diff --git a/src/app/tools/tankopedia/components/Options.tsx b/src/app/tools/tankopedia/components/Options.tsx index b504cb7ca..9a4e887c0 100644 --- a/src/app/tools/tankopedia/components/Options.tsx +++ b/src/app/tools/tankopedia/components/Options.tsx @@ -3,6 +3,10 @@ import { CaretDownIcon } from '@radix-ui/react-icons'; import { Button, DropdownMenu, Flex } from '@radix-ui/themes'; import { + TIERS, + TIER_ROMAN_NUMERALS, +} from '../../../../core/blitzkrieg/tankopedia'; +import mutateTankopedia, { TankopediaSortBy, TankopediaSortDirection, useTankopedia, @@ -12,52 +16,90 @@ export function Options() { const tankopediaState = useTankopedia(); return ( - - - - - - - - useTankopedia.setState({ sortBy: value as TankopediaSortBy }) - } - > - Tier - Name - - - + + + + + + + + + mutateTankopedia((draft) => { + draft.sort.by = value as TankopediaSortBy; + }) + } + > + Tier + Name + + + - - - - - - - useTankopedia.setState({ - sortDirection: value as TankopediaSortDirection, - }) - } - > - - Ascending - - - Descending - - - - + + + + + + + mutateTankopedia((draft) => { + draft.sort.direction = value as TankopediaSortDirection; + }) + } + > + + Ascending + + + Descending + + + + + + + + + {TIERS.toReversed().map((tier, index) => ( + + ))} + + ); } diff --git a/src/app/tools/tankopedia/page.tsx b/src/app/tools/tankopedia/page.tsx index 4244aa94e..a624890fd 100644 --- a/src/app/tools/tankopedia/page.tsx +++ b/src/app/tools/tankopedia/page.tsx @@ -30,34 +30,36 @@ export default function Page() { const tankopediaState = useTankopedia(); const awaitedTanks = use(tanks); const input = useRef(null); - const sortedTanks = useMemo( + const searchableTanks = useMemo( () => - awaitedTanks.toSorted((a, b) => { - let diff = 0; + awaitedTanks + .filter((tank) => tankopediaState.filters.tiers.includes(tank.tier)) + .toSorted((a, b) => { + let diff = 0; - if (tankopediaState.sortBy === 'tier') { - diff = a.tier - b.tier; - } - if (tankopediaState.sortBy === 'name') { - diff = ( - a.name_short ?? - a.name ?? - `Unknown tank ${a.id}` - ).localeCompare(b.name_short ?? b.name ?? `Unknown tank ${b.id}`); - } + if (tankopediaState.sort.by === 'tier') { + diff = a.tier - b.tier; + } + if (tankopediaState.sort.by === 'name') { + diff = ( + a.name_short ?? + a.name ?? + `Unknown tank ${a.id}` + ).localeCompare(b.name_short ?? b.name ?? `Unknown tank ${b.id}`); + } - return tankopediaState.sortDirection === 'ascending' ? diff : -diff; - }), - [tankopediaState.sortBy, tankopediaState.sortDirection], + return tankopediaState.sort.direction === 'ascending' ? diff : -diff; + }), + [tankopediaState.filters, tankopediaState.sort], ); - const [searchedList, setSearchedList] = useState(sortedTanks); + const [searchedList, setSearchedList] = useState(searchableTanks); const [page, setPage] = useState(0); const pageInput = useRef(null); useEffect(() => { - setSearchedList(sortedTanks); + setSearchedList(searchableTanks); if (input.current) input.current.value = ''; - }, [sortedTanks]); + }, [searchableTanks]); useEffect(() => { if (pageInput.current) pageInput.current.value = `${page + 1}`; @@ -84,10 +86,10 @@ export default function Page() { placeholder="Search tanks..." onChange={(event) => { if (event.target.value.length === 0) { - setSearchedList(sortedTanks); + setSearchedList(searchableTanks); } else { setSearchedList( - go(event.target.value, sortedTanks, { + go(event.target.value, searchableTanks, { keys: [ 'name', 'name_short', diff --git a/src/core/blitzkrieg/tankopedia.ts b/src/core/blitzkrieg/tankopedia.ts index dee09b571..bf71b7d18 100644 --- a/src/core/blitzkrieg/tankopedia.ts +++ b/src/core/blitzkrieg/tankopedia.ts @@ -84,6 +84,8 @@ export const TANK_ICONS_COLLECTOR: Record = { export type Tier = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10; +export const TIERS: Tier[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; + export const TIER_ROMAN_NUMERALS: Record = { 1: 'I', 2: 'II', diff --git a/src/stores/tankopedia.ts b/src/stores/tankopedia.ts index afb6ce360..c3f2f7d1d 100644 --- a/src/stores/tankopedia.ts +++ b/src/stores/tankopedia.ts @@ -1,21 +1,32 @@ import { produce } from 'immer'; import { create } from 'zustand'; import { devtools, persist } from 'zustand/middleware'; +import { TIERS, Tier } from '../core/blitzkrieg/tankopedia'; export type TankopediaSortBy = 'tier' | 'name'; export type TankopediaSortDirection = 'ascending' | 'descending'; type Tankopedia = { - sortBy: TankopediaSortBy; - sortDirection: TankopediaSortDirection; + sort: { + by: TankopediaSortBy; + direction: TankopediaSortDirection; + }; + filters: { + tiers: Tier[]; + }; }; export const useTankopedia = create()( devtools( persist( (set) => ({ - sortBy: 'tier', - sortDirection: 'descending', + sort: { + by: 'tier', + direction: 'descending', + }, + filters: { + tiers: [...TIERS], + }, }), { name: 'tankopedia' }, ),