mirror of
https://github.com/blitzkit/blitzkit.git
synced 2026-10-23 19:49:50 +02:00
feat: some things
This commit is contained in:
TrèsAbhi committed
1 parent
3ccbb7895c
commit
b689ecba9f
1 file changed
+232
-126
+232
-126
@@ -1,5 +1,14 @@
|
|||||||
import { Flex, Grid, Heading, Separator, Text } from '@radix-ui/themes';
|
import {
|
||||||
import { range } from 'lodash';
|
Button,
|
||||||
|
Flex,
|
||||||
|
Grid,
|
||||||
|
Heading,
|
||||||
|
IconButton,
|
||||||
|
RadioGroup,
|
||||||
|
Separator,
|
||||||
|
Text,
|
||||||
|
} from '@radix-ui/themes';
|
||||||
|
import { range, times } from 'lodash';
|
||||||
import { use } from 'react';
|
import { use } from 'react';
|
||||||
import { classIcons } from '../../../components/ClassIcon';
|
import { classIcons } from '../../../components/ClassIcon';
|
||||||
import { Link } from '../../../components/Link';
|
import { Link } from '../../../components/Link';
|
||||||
@@ -16,154 +25,251 @@ import { tankIcon } from '../../../core/blitzkit/tankIcon';
|
|||||||
import strings from '../../../lang/en-US.json';
|
import strings from '../../../lang/en-US.json';
|
||||||
import { treeTypeOrder } from './components/TankSearch/constants';
|
import { treeTypeOrder } from './components/TankSearch/constants';
|
||||||
|
|
||||||
|
// TODO: KEYS
|
||||||
|
|
||||||
export default function Page() {
|
export default function Page() {
|
||||||
const awaitedTanksDefinitionsArray = use(tanksDefinitionsArray);
|
const awaitedTanksDefinitionsArray = use(tanksDefinitionsArray);
|
||||||
const awaitedNations = use(NATIONS);
|
const awaitedNations = use(NATIONS);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<PageWrapper color="purple">
|
<PageWrapper color="purple" size={1028 + 256}>
|
||||||
{/* <TextField.Root size="3" placeholder="Search tanks...">
|
<Flex gap="8">
|
||||||
<TextField.Slot />
|
<Flex direction="column" gap="4" align="start">
|
||||||
|
<Text mb="-3" weight="bold">
|
||||||
|
Class
|
||||||
|
</Text>
|
||||||
|
<Flex
|
||||||
|
direction="column"
|
||||||
|
overflow="hidden"
|
||||||
|
style={{
|
||||||
|
borderRadius: 'var(--radius-4)',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Flex>
|
||||||
|
{times(5, (index) => {
|
||||||
|
const tier = (index + 1) as Tier;
|
||||||
|
|
||||||
<TextField.Slot>
|
return (
|
||||||
<Button size="3" variant="ghost">
|
<Button
|
||||||
M48 Patton <CaretRightIcon />
|
variant="soft"
|
||||||
</Button>
|
radius="none"
|
||||||
</TextField.Slot>
|
color="gray"
|
||||||
</TextField.Root> */}
|
highContrast
|
||||||
|
style={{
|
||||||
|
width: 32,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{TIER_ROMAN_NUMERALS[tier]}
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</Flex>
|
||||||
|
<Flex>
|
||||||
|
{times(5, (index) => {
|
||||||
|
const tier = (index + 6) as Tier;
|
||||||
|
|
||||||
<Flex direction="column" gap="8" mt="4">
|
return (
|
||||||
{range(10, 0).map((tierUntyped) => {
|
<Button
|
||||||
const tier = tierUntyped as Tier;
|
variant="soft"
|
||||||
const tierTanks = awaitedTanksDefinitionsArray.filter(
|
radius="none"
|
||||||
(tank) => tank.tier === tier,
|
color="gray"
|
||||||
);
|
highContrast
|
||||||
|
style={{
|
||||||
|
width: 32,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{TIER_ROMAN_NUMERALS[tier]}
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</Flex>
|
||||||
|
</Flex>
|
||||||
|
|
||||||
return (
|
<Text mb="-3" weight="bold">
|
||||||
<Flex key={tier} direction="column" gap="4">
|
Type
|
||||||
<Heading align="center" color="gray">
|
</Text>
|
||||||
Tier {TIER_ROMAN_NUMERALS[tier]}
|
<Flex
|
||||||
</Heading>
|
overflow="hidden"
|
||||||
|
style={{
|
||||||
|
borderRadius: 'var(--radius-full)',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{TANK_CLASSES.map((tankClass) => {
|
||||||
|
const Icon = classIcons[tankClass];
|
||||||
|
|
||||||
<Flex direction="column" gap="8">
|
return (
|
||||||
{awaitedNations.map((nation, nationIndex) => {
|
<IconButton
|
||||||
const nationTanks = tierTanks
|
variant="soft"
|
||||||
.filter((tank) => tank.nation === nation)
|
radius="none"
|
||||||
.sort(
|
color="gray"
|
||||||
(a, b) =>
|
highContrast
|
||||||
treeTypeOrder.indexOf(a.treeType) -
|
>
|
||||||
treeTypeOrder.indexOf(b.treeType),
|
<Icon style={{ width: '1em', height: '1em' }} />
|
||||||
)
|
</IconButton>
|
||||||
.sort(
|
);
|
||||||
(a, b) =>
|
})}
|
||||||
TANK_CLASSES.indexOf(a.class) -
|
</Flex>
|
||||||
TANK_CLASSES.indexOf(b.class),
|
|
||||||
);
|
|
||||||
|
|
||||||
if (nationTanks.length === 0) return null;
|
<Text mb="-3" weight="bold">
|
||||||
|
Nation
|
||||||
|
</Text>
|
||||||
|
<Flex>
|
||||||
|
{awaitedNations.map((nation) => (
|
||||||
|
<IconButton
|
||||||
|
variant="soft"
|
||||||
|
color="gray"
|
||||||
|
highContrast
|
||||||
|
radius="none"
|
||||||
|
>
|
||||||
|
{/* TODO: trim icons */}
|
||||||
|
<img src={asset(`flags/circle/${nation}.webp`)} />
|
||||||
|
</IconButton>
|
||||||
|
))}
|
||||||
|
</Flex>
|
||||||
|
|
||||||
return (
|
<Text mb="-3" weight="bold">
|
||||||
<Flex direction="column" gap="4">
|
Test tanks
|
||||||
<Flex align="center">
|
</Text>
|
||||||
<img
|
<RadioGroup.Root defaultValue="include">
|
||||||
src={asset(`flags/scratched/${nation}.webp`)}
|
<RadioGroup.Item value="include">Include</RadioGroup.Item>
|
||||||
style={{
|
<RadioGroup.Item value="exclude">Exclude</RadioGroup.Item>
|
||||||
height: 64,
|
<RadioGroup.Item value="only">Only</RadioGroup.Item>
|
||||||
aspectRatio: '2 / 1',
|
</RadioGroup.Root>
|
||||||
}}
|
</Flex>
|
||||||
/>
|
|
||||||
|
|
||||||
<Heading size="5" ml="-8" mr="4" wrap="nowrap">
|
<Flex direction="column" gap="8" mt="4" flexGrow="1">
|
||||||
{
|
{range(10, 0).map((tierUntyped) => {
|
||||||
strings.common.nations[
|
const tier = tierUntyped as Tier;
|
||||||
nation as keyof typeof strings.common.nations
|
const tierTanks = awaitedTanksDefinitionsArray.filter(
|
||||||
]
|
(tank) => tank.tier === tier,
|
||||||
}
|
);
|
||||||
</Heading>
|
|
||||||
|
|
||||||
<Separator size="4" />
|
return (
|
||||||
</Flex>
|
<Flex key={tier} direction="column" gap="4">
|
||||||
|
<Heading color="gray" mb="4">
|
||||||
|
Tier {TIER_ROMAN_NUMERALS[tier]}
|
||||||
|
</Heading>
|
||||||
|
|
||||||
<Grid
|
<Flex direction="column" gap="8">
|
||||||
flexGrow="1"
|
{awaitedNations.map((nation, nationIndex) => {
|
||||||
columns="repeat(auto-fill, minmax(80px, 1fr))"
|
const nationTanks = tierTanks
|
||||||
gap="2"
|
.filter((tank) => tank.nation === nation)
|
||||||
gapY="4"
|
.sort(
|
||||||
key={nation}
|
(a, b) =>
|
||||||
>
|
treeTypeOrder.indexOf(a.treeType) -
|
||||||
{nationTanks.map((tank) => {
|
treeTypeOrder.indexOf(b.treeType),
|
||||||
const Icon = classIcons[tank.class];
|
)
|
||||||
|
.sort(
|
||||||
|
(a, b) =>
|
||||||
|
TANK_CLASSES.indexOf(a.class) -
|
||||||
|
TANK_CLASSES.indexOf(b.class),
|
||||||
|
);
|
||||||
|
|
||||||
return (
|
if (nationTanks.length === 0) return null;
|
||||||
<Link
|
|
||||||
size="1"
|
return (
|
||||||
color={
|
<Flex direction="column" gap="4">
|
||||||
tank.treeType === 'collector'
|
<Flex align="center">
|
||||||
? 'blue'
|
<img
|
||||||
: tank.treeType === 'premium'
|
src={asset(`flags/scratched/${nation}.webp`)}
|
||||||
? 'amber'
|
style={{
|
||||||
: 'gray'
|
height: 64,
|
||||||
}
|
aspectRatio: '2 / 1',
|
||||||
highContrast={tank.treeType === 'researchable'}
|
}}
|
||||||
underline="hover"
|
/>
|
||||||
key={tank.id}
|
|
||||||
href={`/tools/tankopedia/${tank.id}`}
|
<Heading size="5" ml="-8" mr="4" wrap="nowrap">
|
||||||
style={{
|
{
|
||||||
display: 'flex',
|
strings.common.nations[
|
||||||
flexDirection: 'column',
|
nation as keyof typeof strings.common.nations
|
||||||
alignItems: 'center',
|
]
|
||||||
gap: 'var(--space-2)',
|
}
|
||||||
}}
|
</Heading>
|
||||||
>
|
|
||||||
<img
|
<Separator size="4" />
|
||||||
alt={tank.name}
|
</Flex>
|
||||||
src={tankIcon(tank.id)}
|
|
||||||
height={64}
|
<Grid
|
||||||
|
flexGrow="1"
|
||||||
|
columns="repeat(auto-fill, minmax(80px, 1fr))"
|
||||||
|
gap="2"
|
||||||
|
gapY="4"
|
||||||
|
key={nation}
|
||||||
|
>
|
||||||
|
{nationTanks.map((tank) => {
|
||||||
|
const Icon = classIcons[tank.class];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Link
|
||||||
|
size="1"
|
||||||
|
color={
|
||||||
|
tank.treeType === 'collector'
|
||||||
|
? 'blue'
|
||||||
|
: tank.treeType === 'premium'
|
||||||
|
? 'amber'
|
||||||
|
: 'gray'
|
||||||
|
}
|
||||||
|
highContrast={tank.treeType === 'researchable'}
|
||||||
|
underline="hover"
|
||||||
|
key={tank.id}
|
||||||
|
href={`/tools/tankopedia/${tank.id}`}
|
||||||
style={{
|
style={{
|
||||||
width: '100%',
|
display: 'flex',
|
||||||
objectPosition: 'center',
|
flexDirection: 'column',
|
||||||
objectFit: 'contain',
|
alignItems: 'center',
|
||||||
|
gap: 'var(--space-2)',
|
||||||
}}
|
}}
|
||||||
/>
|
|
||||||
|
|
||||||
<Flex
|
|
||||||
justify="center"
|
|
||||||
gap="1"
|
|
||||||
align="center"
|
|
||||||
overflow="hidden"
|
|
||||||
width="100%"
|
|
||||||
maxWidth="100%"
|
|
||||||
>
|
>
|
||||||
<Icon
|
<img
|
||||||
|
alt={tank.name}
|
||||||
|
src={tankIcon(tank.id)}
|
||||||
|
height={64}
|
||||||
style={{
|
style={{
|
||||||
width: '1em',
|
width: '100%',
|
||||||
height: '1em',
|
objectPosition: 'center',
|
||||||
minWidth: '1em',
|
objectFit: 'contain',
|
||||||
minHeight: '1em',
|
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<Text
|
|
||||||
|
<Flex
|
||||||
|
justify="center"
|
||||||
|
gap="1"
|
||||||
align="center"
|
align="center"
|
||||||
style={{
|
overflow="hidden"
|
||||||
whiteSpace: 'nowrap',
|
width="100%"
|
||||||
overflow: 'hidden',
|
maxWidth="100%"
|
||||||
textOverflow: 'ellipsis',
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
{tank.name}
|
<Icon
|
||||||
</Text>
|
style={{
|
||||||
</Flex>
|
width: '1em',
|
||||||
</Link>
|
height: '1em',
|
||||||
);
|
minWidth: '1em',
|
||||||
})}
|
minHeight: '1em',
|
||||||
</Grid>
|
}}
|
||||||
</Flex>
|
/>
|
||||||
);
|
<Text
|
||||||
})}
|
align="center"
|
||||||
|
style={{
|
||||||
|
whiteSpace: 'nowrap',
|
||||||
|
overflow: 'hidden',
|
||||||
|
textOverflow: 'ellipsis',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{tank.name}
|
||||||
|
</Text>
|
||||||
|
</Flex>
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</Grid>
|
||||||
|
</Flex>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</Flex>
|
||||||
</Flex>
|
</Flex>
|
||||||
</Flex>
|
);
|
||||||
);
|
})}
|
||||||
})}
|
</Flex>
|
||||||
</Flex>
|
</Flex>
|
||||||
</PageWrapper>
|
</PageWrapper>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in new issue
Block a user