TresAbhi/blitzkit
1
0 Fork 0
mirror of https://github.com/blitzkit/blitzkit.git synced 2026-10-24 03:59:50 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: even cleaner filters

Browse Source
This commit is contained in:
TrèsAbhi committed 2023-12-06 12:48:19 -06:00
1 parent 84a1af8100
commit fb9c04c779
2 files changed
+298 -293
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/tools/tankopedia/components/Options/index.tsx
+289 -282
View File
@@ -27,218 +27,219 @@ export function Options() {
const tankopediaState = useTankopedia(); const tankopediaState = useTankopedia();
return ( return (
<Flex justify="center" wrap="wrap" gap="2"> <Flex justify="center" direction="column" gap="2">
<Button <Flex gap="2" style={{ flex: 1 }} wrap="wrap">
color="red" <Button
onClick={() => color="red"
useTankopedia.setState({ onClick={() =>
filters: { useTankopedia.setState({
nations: [], filters: {
tiers: [], nations: [],
treeTypes: [], tiers: [],
types: [], treeTypes: [],
test: 'include', types: [],
}, test: 'include',
}) },
} })
> }
Clear >
</Button> Clear
</Button>
<DropdownMenu.Root> <DropdownMenu.Root>
<DropdownMenu.Trigger> <DropdownMenu.Trigger>
<Button variant="soft"> <Button variant="soft">
Test tanks Test tanks
<CaretDownIcon /> <CaretDownIcon />
</Button> </Button>
</DropdownMenu.Trigger> </DropdownMenu.Trigger>
<DropdownMenu.Content> <DropdownMenu.Content>
<DropdownMenu.RadioGroup <DropdownMenu.RadioGroup
value={tankopediaState.filters.test} value={tankopediaState.filters.test}
onValueChange={(value) => onValueChange={(value) =>
mutateTankopedia((draft) => { mutateTankopedia((draft) => {
draft.filters.test = value as TankopediaTestTankDisplay; draft.filters.test = value as TankopediaTestTankDisplay;
}) })
} }
> >
<DropdownMenu.RadioItem value="include"> <DropdownMenu.RadioItem value="include">
Include Include
</DropdownMenu.RadioItem> </DropdownMenu.RadioItem>
<DropdownMenu.RadioItem value="exclude"> <DropdownMenu.RadioItem value="exclude">
Exclude Exclude
</DropdownMenu.RadioItem> </DropdownMenu.RadioItem>
<DropdownMenu.RadioItem value="only">Only</DropdownMenu.RadioItem> <DropdownMenu.RadioItem value="only">Only</DropdownMenu.RadioItem>
</DropdownMenu.RadioGroup> </DropdownMenu.RadioGroup>
</DropdownMenu.Content> </DropdownMenu.Content>
</DropdownMenu.Root> </DropdownMenu.Root>
<Flex style={{ flex: 1 }}>
<Flex style={{ flex: 1 }}> {TREE_TYPES.map((type, index) => (
{TREE_TYPES.map((type, index) => ( <Button
<Button key={type}
key={type} variant={
variant={ tankopediaState.filters.treeTypes.includes(type)
tankopediaState.filters.treeTypes.includes(type) ? 'solid'
? 'solid' : 'soft'
: 'soft' }
}
style={{
flex: 1,
margin: -0.5,
borderTopLeftRadius: index === 0 ? undefined : 0,
borderBottomLeftRadius: index === 0 ? undefined : 0,
borderTopRightRadius:
index === TREE_TYPES.length - 1 ? undefined : 0,
borderBottomRightRadius:
index === TREE_TYPES.length - 1 ? undefined : 0,
}}
onClick={() =>
mutateTankopedia((draft) => {
if (draft.filters.treeTypes.includes(type)) {
draft.filters.treeTypes = draft.filters.treeTypes.filter(
(preexistingType) => preexistingType !== type,
);
} else {
draft.filters.treeTypes.push(type);
}
})
}
>
<img
src={TREE_TYPE_IMAGES[type]}
style={{ width: '1em', height: '1em' }}
/>
</Button>
))}
</Flex>
<Flex style={{ flex: 1 }}>
{[...TANK_TYPES].reverse().map((type, index) => (
<Button
key={type}
variant={
tankopediaState.filters.types.includes(type) ? 'solid' : 'soft'
}
style={{
flex: 1,
margin: -0.5,
borderTopLeftRadius: index === 0 ? undefined : 0,
borderBottomLeftRadius: index === 0 ? undefined : 0,
borderTopRightRadius:
index === TANK_TYPES.length - 1 ? undefined : 0,
borderBottomRightRadius:
index === TANK_TYPES.length - 1 ? undefined : 0,
}}
onClick={() =>
mutateTankopedia((draft) => {
if (draft.filters.types.includes(type)) {
draft.filters.types = draft.filters.types.filter(
(preexistingType) => preexistingType !== type,
);
} else {
draft.filters.types.push(type);
}
})
}
>
<img
src={TREE_TYPE_ICONS[TreeTypeEnum.TechTree][type]}
style={{ width: '1em', height: '1em' }}
/>
</Button>
))}
</Flex>
<Flex className={styles.oneLineFilters} style={{ flex: 1 }}>
{[...TIERS].reverse().map((tier, index) => (
<Button
key={tier}
variant={
tankopediaState.filters.tiers.includes(tier) ? 'solid' : 'soft'
}
style={{
flex: 1,
margin: -0.5,
borderTopLeftRadius: index === 0 ? undefined : 0,
borderBottomLeftRadius: index === 0 ? undefined : 0,
borderTopRightRadius: index === TIERS.length - 1 ? undefined : 0,
borderBottomRightRadius:
index === TIERS.length - 1 ? undefined : 0,
}}
onClick={() =>
mutateTankopedia((draft) => {
if (draft.filters.tiers.includes(tier)) {
draft.filters.tiers = draft.filters.tiers.filter(
(preexistingTier) => preexistingTier !== tier,
);
} else {
draft.filters.tiers.push(tier);
}
})
}
>
{TIER_ROMAN_NUMERALS[tier]}
</Button>
))}
</Flex>
<Flex className={styles.oneLineFilters} style={{ flex: 1 }}>
{nations.map((nation, index) => (
<Button
key={nation}
variant={
tankopediaState.filters.nations.includes(nation)
? 'solid'
: 'soft'
}
style={{
flex: 1,
margin: -0.5,
borderTopLeftRadius: index === 0 ? undefined : 0,
borderBottomLeftRadius: index === 0 ? undefined : 0,
borderTopRightRadius:
index === nations.length - 1 ? undefined : 0,
borderBottomRightRadius:
index === nations.length - 1 ? undefined : 0,
}}
onClick={() =>
mutateTankopedia((draft) => {
if (draft.filters.nations.includes(nation)) {
draft.filters.nations = draft.filters.nations.filter(
(preexistingType) => preexistingType !== nation,
);
} else {
draft.filters.nations.push(nation);
}
})
}
>
<img
src={asset(`flags/circle/${nation}.webp`)}
style={{ style={{
width: '1em', flex: 1,
height: '1em', margin: -0.5,
scale: 2, borderTopLeftRadius: index === 0 ? undefined : 0,
transform: 'translate(15%, 15%)', borderBottomLeftRadius: index === 0 ? undefined : 0,
borderTopRightRadius:
index === TREE_TYPES.length - 1 ? undefined : 0,
borderBottomRightRadius:
index === TREE_TYPES.length - 1 ? undefined : 0,
}} }}
/> onClick={() =>
</Button> mutateTankopedia((draft) => {
))} if (draft.filters.treeTypes.includes(type)) {
</Flex> draft.filters.treeTypes = draft.filters.treeTypes.filter(
(preexistingType) => preexistingType !== type,
<Flex );
direction="column" } else {
className={styles.splitFilters} draft.filters.treeTypes.push(type);
style={{ width: '100%' }} }
> })
<Flex> }
{[...TIERS] >
.reverse() <img
.slice(0, 5) src={TREE_TYPE_IMAGES[type]}
.map((tier, index) => ( style={{ width: '1em', height: '1em' }}
/>
</Button>
))}
</Flex>
<Flex style={{ flex: 1 }}>
{[...TANK_TYPES].reverse().map((type, index) => (
<Button
key={type}
variant={
tankopediaState.filters.types.includes(type) ? 'solid' : 'soft'
}
style={{
flex: 1,
margin: -0.5,
borderTopLeftRadius: index === 0 ? undefined : 0,
borderBottomLeftRadius: index === 0 ? undefined : 0,
borderTopRightRadius:
index === TANK_TYPES.length - 1 ? undefined : 0,
borderBottomRightRadius:
index === TANK_TYPES.length - 1 ? undefined : 0,
}}
onClick={() =>
mutateTankopedia((draft) => {
if (draft.filters.types.includes(type)) {
draft.filters.types = draft.filters.types.filter(
(preexistingType) => preexistingType !== type,
);
} else {
draft.filters.types.push(type);
}
})
}
>
<img
src={TREE_TYPE_ICONS[TreeTypeEnum.TechTree][type]}
style={{ width: '1em', height: '1em' }}
/>
</Button>
))}
</Flex>
<Flex
direction="column"
className={styles.splitFilters}
style={{ width: '100%' }}
>
<Flex>
{[...TIERS]
.reverse()
.slice(0, 5)
.map((tier, index) => (
<Button
key={tier}
variant={
tankopediaState.filters.tiers.includes(tier)
? 'solid'
: 'soft'
}
style={{
flex: 1,
margin: -0.5,
borderTopLeftRadius: index === 0 ? undefined : 0,
borderBottomLeftRadius: 0,
borderTopRightRadius:
index === TIERS.length - Math.round(TIERS.length / 2) - 1
? undefined
: 0,
borderBottomRightRadius: 0,
}}
onClick={() =>
mutateTankopedia((draft) => {
if (draft.filters.tiers.includes(tier)) {
draft.filters.tiers = draft.filters.tiers.filter(
(preexistingTier) => preexistingTier !== tier,
);
} else {
draft.filters.tiers.push(tier);
}
})
}
>
{TIER_ROMAN_NUMERALS[tier]}
</Button>
))}
</Flex>
<Flex>
{[...TIERS]
.reverse()
.slice(5, 10)
.map((tier, index) => (
<Button
key={tier}
variant={
tankopediaState.filters.tiers.includes(tier)
? 'solid'
: 'soft'
}
style={{
flex: 1,
margin: -0.5,
borderTopLeftRadius: 0,
borderBottomLeftRadius: index === 0 ? undefined : 0,
borderTopRightRadius: 0,
borderBottomRightRadius:
index === TIERS.length - Math.round(TIERS.length / 2) - 1
? undefined
: 0,
}}
onClick={() =>
mutateTankopedia((draft) => {
if (draft.filters.tiers.includes(tier)) {
draft.filters.tiers = draft.filters.tiers.filter(
(preexistingTier) => preexistingTier !== tier,
);
} else {
draft.filters.tiers.push(tier);
}
})
}
>
{TIER_ROMAN_NUMERALS[tier]}
</Button>
))}
</Flex>
</Flex>
<Flex
direction="column"
className={styles.splitFilters}
style={{ width: '100%' }}
>
<Flex>
{nations.slice(0, 5).map((nation, index) => (
<Button <Button
key={tier} key={nation}
variant={ variant={
tankopediaState.filters.tiers.includes(tier) tankopediaState.filters.nations.includes(nation)
? 'solid' ? 'solid'
: 'soft' : 'soft'
} }
@@ -248,35 +249,43 @@ export function Options() {
borderTopLeftRadius: index === 0 ? undefined : 0, borderTopLeftRadius: index === 0 ? undefined : 0,
borderBottomLeftRadius: 0, borderBottomLeftRadius: 0,
borderTopRightRadius: borderTopRightRadius:
index === TIERS.length - 6 ? undefined : 0, index === nations.length - Math.round(nations.length / 2)
borderBottomRightRadius: 0, ? undefined
: 0,
borderBottomRightRadius:
index === nations.length - 1 ? undefined : 0,
}} }}
onClick={() => onClick={() =>
mutateTankopedia((draft) => { mutateTankopedia((draft) => {
if (draft.filters.tiers.includes(tier)) { if (draft.filters.nations.includes(nation)) {
draft.filters.tiers = draft.filters.tiers.filter( draft.filters.nations = draft.filters.nations.filter(
(preexistingTier) => preexistingTier !== tier, (preexistingType) => preexistingType !== nation,
); );
} else { } else {
draft.filters.tiers.push(tier); draft.filters.nations.push(nation);
} }
}) })
} }
> >
{TIER_ROMAN_NUMERALS[tier]} <img
src={asset(`flags/circle/${nation}.webp`)}
style={{
width: '1em',
height: '1em',
scale: 2,
transform: 'translate(15%, 15%)',
}}
/>
</Button> </Button>
))} ))}
</Flex> </Flex>
<Flex> <Flex>
{[...TIERS] {nations.slice(5, 10).map((nation, index) => (
.reverse()
.slice(5, 10)
.map((tier, index) => (
<Button <Button
key={tier} key={nation}
variant={ variant={
tankopediaState.filters.tiers.includes(tier) tankopediaState.filters.nations.includes(nation)
? 'solid' ? 'solid'
: 'soft' : 'soft'
} }
@@ -285,35 +294,77 @@ export function Options() {
margin: -0.5, margin: -0.5,
borderTopLeftRadius: 0, borderTopLeftRadius: 0,
borderBottomLeftRadius: index === 0 ? undefined : 0, borderBottomLeftRadius: index === 0 ? undefined : 0,
borderTopRightRadius: 0, borderTopRightRadius:
index === nations.length - 1 ? undefined : 0,
borderBottomRightRadius: borderBottomRightRadius:
index === TIERS.length - 6 ? undefined : 0, index ===
nations.length - Math.round(nations.length / 2) - 1
? undefined
: 0,
}} }}
onClick={() => onClick={() =>
mutateTankopedia((draft) => { mutateTankopedia((draft) => {
if (draft.filters.tiers.includes(tier)) { if (draft.filters.nations.includes(nation)) {
draft.filters.tiers = draft.filters.tiers.filter( draft.filters.nations = draft.filters.nations.filter(
(preexistingTier) => preexistingTier !== tier, (preexistingType) => preexistingType !== nation,
); );
} else { } else {
draft.filters.tiers.push(tier); draft.filters.nations.push(nation);
} }
}) })
} }
> >
{TIER_ROMAN_NUMERALS[tier]} <img
src={asset(`flags/circle/${nation}.webp`)}
style={{
width: '1em',
height: '1em',
scale: 2,
transform: 'translate(15%, 15%)',
}}
/>
</Button> </Button>
))} ))}
</Flex>
</Flex> </Flex>
</Flex> </Flex>
<Flex <Flex gap="2" style={{ flex: 1 }} wrap="wrap">
direction="column" <Flex className={styles.oneLineFilters} style={{ flex: 1 }}>
className={styles.splitFilters} {[...TIERS].reverse().map((tier, index) => (
style={{ width: '100%' }} <Button
> key={tier}
<Flex> variant={
{nations.slice(0, 5).map((nation, index) => ( tankopediaState.filters.tiers.includes(tier) ? 'solid' : 'soft'
}
style={{
flex: 1,
margin: -0.5,
borderTopLeftRadius: index === 0 ? undefined : 0,
borderBottomLeftRadius: index === 0 ? undefined : 0,
borderTopRightRadius:
index === TIERS.length - 1 ? undefined : 0,
borderBottomRightRadius:
index === TIERS.length - 1 ? undefined : 0,
}}
onClick={() =>
mutateTankopedia((draft) => {
if (draft.filters.tiers.includes(tier)) {
draft.filters.tiers = draft.filters.tiers.filter(
(preexistingTier) => preexistingTier !== tier,
);
} else {
draft.filters.tiers.push(tier);
}
})
}
>
{TIER_ROMAN_NUMERALS[tier]}
</Button>
))}
</Flex>
<Flex className={styles.oneLineFilters} style={{ flex: 1 }}>
{nations.map((nation, index) => (
<Button <Button
key={nation} key={nation}
variant={ variant={
@@ -325,55 +376,11 @@ export function Options() {
flex: 1, flex: 1,
margin: -0.5, margin: -0.5,
borderTopLeftRadius: index === 0 ? undefined : 0, borderTopLeftRadius: index === 0 ? undefined : 0,
borderBottomLeftRadius: 0,
borderTopRightRadius:
index === nations.length - 5 ? undefined : 0,
borderBottomRightRadius:
index === nations.length - 1 ? undefined : 0,
}}
onClick={() =>
mutateTankopedia((draft) => {
if (draft.filters.nations.includes(nation)) {
draft.filters.nations = draft.filters.nations.filter(
(preexistingType) => preexistingType !== nation,
);
} else {
draft.filters.nations.push(nation);
}
})
}
>
<img
src={asset(`flags/circle/${nation}.webp`)}
style={{
width: '1em',
height: '1em',
scale: 2,
transform: 'translate(15%, 15%)',
}}
/>
</Button>
))}
</Flex>
<Flex>
{nations.slice(5, 10).map((nation, index) => (
<Button
key={nation}
variant={
tankopediaState.filters.nations.includes(nation)
? 'solid'
: 'soft'
}
style={{
flex: 1,
margin: -0.5,
borderTopLeftRadius: 0,
borderBottomLeftRadius: index === 0 ? undefined : 0, borderBottomLeftRadius: index === 0 ? undefined : 0,
borderTopRightRadius: borderTopRightRadius:
index === nations.length - 1 ? undefined : 0, index === nations.length - 1 ? undefined : 0,
borderBottomRightRadius: borderBottomRightRadius:
index === nations.length - 6 ? undefined : 0, index === nations.length - 1 ? undefined : 0,
}} }}
onClick={() => onClick={() =>
mutateTankopedia((draft) => { mutateTankopedia((draft) => {
src/app/tools/tankopedia/page.tsx
+9 -11
View File
@@ -28,14 +28,13 @@ import { theme } from '../../../stitches.config';
import mutateTankopedia, { import mutateTankopedia, {
TankopediaSortBy, TankopediaSortBy,
TankopediaSortDirection, TankopediaSortDirection,
TankopediaTestTankDisplay,
useTankopedia, useTankopedia,
} from '../../../stores/tankopedia'; } from '../../../stores/tankopedia';
import { Options } from './components/Options'; import { Options } from './components/Options';
import { PageTurner } from './components/PageTurner'; import { PageTurner } from './components/PageTurner';
import * as styles from './page.css'; import * as styles from './page.css';
const TANKS_PER_PAGE = 3 * 2 ** 4; const TANKS_PER_PAGE = 3 * 2 ** 3;
export default function Page() { export default function Page() {
const tankopediaState = useTankopedia(); const tankopediaState = useTankopedia();
@@ -102,7 +101,7 @@ export default function Page() {
return ( return (
<PageWrapper size="wide" color="purple"> <PageWrapper size="wide" color="purple">
<Suspense fallback={<Text>Loading...</Text>}> <Suspense fallback={<Text>Loading...</Text>}>
<Flex direction="column" gap="6"> <Flex direction="column" gap="4">
<Flex gap="2"> <Flex gap="2">
<TextField.Root style={{ flex: 1 }}> <TextField.Root style={{ flex: 1 }}>
<TextField.Slot> <TextField.Slot>
@@ -174,19 +173,18 @@ export default function Page() {
</DropdownMenu.RadioGroup> </DropdownMenu.RadioGroup>
</DropdownMenu.Content> </DropdownMenu.Content>
</DropdownMenu.Root> </DropdownMenu.Root>
</Flex> </Flex>
<Options /> <Options />
<PageTurner
page={page}
setPage={setPage}
tanksPerPage={TANKS_PER_PAGE}
searchedList={searchedList}
/>
</Flex> </Flex>
<PageTurner
page={page}
setPage={setPage}
tanksPerPage={TANKS_PER_PAGE}
searchedList={searchedList}
/>
<Flex wrap="wrap" gap="3" justify="center"> <Flex wrap="wrap" gap="3" justify="center">
{searchedList {searchedList
.map((tank) => ( .map((tank) => (