TresAbhi/blitzkit
1
0 Fork 0
mirror of https://github.com/blitzkit/blitzkit.git synced 2026-11-14 13:16:11 +01:00
Code Issues Packages Projects Releases Wiki Activity

game mode abilities

Browse Source
This commit is contained in:
tresabhi committed 2026-10-11 13:28:38 -05:00
1 parent 5c482e0bac
commit 53eebc7a43
6 files changed
+164 -122
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/website/src/components/Tankopedia/GameModeSection.tsx
-122
View File
@@ -1,122 +0,0 @@
import { alias } from "@blitzkit/core";
import { Box, Flex, Heading, Text } from "@radix-ui/themes";
import { api } from "../../api/dynamic";
import { useLocale } from "../../hooks/useLocale";
import { Duel } from "../../stores/duel";
const [gameDefinitions, consumableDefinitions, provisionDefinitions] =
await Promise.all([api.game(), api.consumables(), api.provisions()]);
export function GameModeSection() {
const { unwrap, strings } = useLocale();
const tank = Duel.use((state) => state.protagonist.tank);
const roles = Object.entries(tank.roles);
if (roles.length === 0) return null;
return (
<Flex direction="column" gap="4" align="center">
<Heading size="6">
{strings.website.tools.tankopedia.game_modes.title}
</Heading>
<Flex justify="center" gap="4" wrap="wrap" px="4">
{roles.map(([id, value]) => {
const gameMode = gameDefinitions.gameModes[id];
return (
<Flex
key={id}
width="16rem"
height="20rem"
overflow="hidden"
direction="column"
style={{
borderRadius: "var(--radius-3)",
background: `url(${alias(
"api",
`/gamemodes/${id}/banner.webp`,
)})`,
backgroundSize: "cover",
backgroundPosition: "center",
}}
>
<Box
flexGrow="1"
style={{
background: `url(${alias(
"api",
`/gamemodes/${id}/banner.webp`,
)})`,
backgroundSize: "cover",
backgroundPosition: "center",
}}
/>
<Flex
p="3"
direction="column"
height="98px"
flexShrink="0"
style={{
backdropFilter: "blur(4rem)",
WebkitBackdropFilter: "blur(4rem)",
}}
align="center"
justify="center"
>
<Text size="4" weight="bold">
{unwrap(gameMode.name!)}
</Text>
<Flex direction="column">
{gameDefinitions.roles[value].provisions.map((id) => {
const provisions = provisionDefinitions.provisions[id];
return (
<Text color="gray" wrap="nowrap" key={id}>
<Flex align="center" gap="1">
<img
style={{
width: "1.5em",
height: "1.5em",
objectFit: "contain",
}}
src={alias("api", `/icons/provisions/${id}.webp`)}
alt={unwrap(provisions.name!)}
/>
{unwrap(provisions.name!)}
</Flex>
</Text>
);
})}
{gameDefinitions.roles[value].consumables.map((id) => {
const consumable = consumableDefinitions.consumables[id];
return (
<Text color="gray" wrap="nowrap" key={id}>
<Flex align="center" gap="1">
<img
style={{
width: "1.5em",
height: "1.5em",
objectFit: "contain",
}}
src={alias("api", `/icons/consumables/${id}.webp`)}
alt={unwrap(consumable.name!)}
/>
{unwrap(consumable.name!)}
</Flex>
</Text>
);
})}
</Flex>
</Flex>
</Flex>
);
})}
</Flex>
</Flex>
);
}