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

feat: more filters

Browse Source
This commit is contained in:
TrèsAbhi committed 2023-12-04 12:35:27 -06:00
1 parent 7020e5641f
commit b503f4fa8f
5 files changed
+151 -40
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/tools/tankopedia/components/Options.tsx
+112 -33
View File
@@ -2,6 +2,13 @@
import { CaretDownIcon } from '@radix-ui/react-icons';
import { Button, DropdownMenu, Flex } from '@radix-ui/themes';
import {
TANK_TYPES,
TREE_TYPES,
TREE_TYPE_ICONS,
TREE_TYPE_IMAGES,
TreeTypeEnum,
} from '../../../../components/Tanks';
import {
TIERS,
TIER_ROMAN_NUMERALS,
@@ -16,7 +23,7 @@ export function Options() {
const tankopediaState = useTankopedia();
return (
<Flex justify="between">
<Flex justify="center" wrap="wrap" gap="4">
<Flex gap="1">
<DropdownMenu.Root>
<DropdownMenu.Trigger>
@@ -67,38 +74,110 @@ export function Options() {
</DropdownMenu.Root>
</Flex>
<Flex gap="1">
<Flex>
{TIERS.toReversed().map((tier, index) => (
<Button
variant={
tankopediaState.filters.tiers.includes(tier) ? 'solid' : 'soft'
}
style={{
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>
{TIERS.toReversed().map((tier, index) => (
<Button
key={tier}
variant={
tankopediaState.filters.tiers.includes(tier) ? 'solid' : 'soft'
}
style={{
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>
{TANK_TYPES.toReversed().map((type, index) => (
<Button
key={type}
variant={
tankopediaState.filters.types.includes(type) ? 'solid' : 'soft'
}
style={{
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>
{TREE_TYPES.map((type, index) => (
<Button
key={type}
variant={
tankopediaState.filters.treeTypes.includes(type)
? 'solid'
: 'soft'
}
style={{
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>
);
src/app/tools/tankopedia/page.tsx
+12 -1
View File
@@ -33,7 +33,18 @@ export default function Page() {
const searchableTanks = useMemo(
() =>
awaitedTanks
.filter((tank) => tankopediaState.filters.tiers.includes(tank.tier))
.filter(
(tank) =>
(tankopediaState.filters.tiers.length === 0
? true
: tankopediaState.filters.tiers.includes(tank.tier)) &&
(tankopediaState.filters.types.length === 0
? true
: tankopediaState.filters.types.includes(tank.type)) &&
(tankopediaState.filters.treeTypes.length === 0
? true
: tankopediaState.filters.treeTypes.includes(tank.tree_type)),
)
.toSorted((a, b) => {
let diff = 0;
src/components/Tanks/components/Item.tsx
+18 -2
View File
@@ -11,8 +11,18 @@ export enum TreeTypeEnum {
Collector,
}
export type TankType = 'AT-SPG' | 'lightTank' | 'mediumTank' | 'heavyTank';
export type TreeTypeString = 'tech-tree' | 'premium' | 'collector';
export const TANK_TYPES = [
'AT-SPG',
'lightTank',
'mediumTank',
'heavyTank',
] as const;
// TODO: remove hyphen for underscore
export const TREE_TYPES = ['tech-tree', 'premium', 'collector'] as const;
export type TankType = (typeof TANK_TYPES)[number];
export type TreeTypeString = (typeof TREE_TYPES)[number];
export const TREE_TYPE_NAMES: Record<TreeTypeString, string> = {
'tech-tree': 'Tech tree',
@@ -20,6 +30,12 @@ export const TREE_TYPE_NAMES: Record<TreeTypeString, string> = {
collector: 'Collector',
};
export const TREE_TYPE_IMAGES: Record<TreeTypeString, string> = {
'tech-tree': 'https://i.imgur.com/pJxO2XY.png',
premium: 'https://i.imgur.com/mZzSwOU.png',
collector: 'https://i.imgur.com/7A0RsG5.png',
};
export interface ItemProps {
image?: string;
tankType?: TankType;
src/core/blitzkrieg/tankopedia.ts
+2 -2
View File
@@ -82,9 +82,9 @@ export const TANK_ICONS_COLLECTOR: Record<TankType, string> = {
heavyTank: 'https://i.imgur.com/8xRf3nc.png',
};
export type Tier = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
export const TIERS = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] as const;
export const TIERS: Tier[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
export type Tier = (typeof TIERS)[number];
export const TIER_ROMAN_NUMERALS: Record<Tier, string> = {
1: 'I',
src/stores/tankopedia.ts
+7 -2
View File
@@ -1,7 +1,8 @@
import { produce } from 'immer';
import { create } from 'zustand';
import { devtools, persist } from 'zustand/middleware';
import { TIERS, Tier } from '../core/blitzkrieg/tankopedia';
import { TankType, TreeTypeString } from '../components/Tanks';
import { Tier } from '../core/blitzkrieg/tankopedia';
export type TankopediaSortBy = 'tier' | 'name';
export type TankopediaSortDirection = 'ascending' | 'descending';
@@ -13,6 +14,8 @@ type Tankopedia = {
};
filters: {
tiers: Tier[];
types: TankType[];
treeTypes: TreeTypeString[];
};
};
@@ -25,7 +28,9 @@ export const useTankopedia = create<Tankopedia>()(
direction: 'descending',
},
filters: {
tiers: [...TIERS],
tiers: [],
types: [],
treeTypes: [],
},
}),
{ name: 'tankopedia' },