diff --git a/packages/website/src/components/TankSearch/components/FilterControl.tsx b/packages/website/src/components/TankSearch/components/FilterControl.tsx index 3f972ccd3..883156eeb 100644 --- a/packages/website/src/components/TankSearch/components/FilterControl.tsx +++ b/packages/website/src/components/TankSearch/components/FilterControl.tsx @@ -1,26 +1,11 @@ -import { asset, ShellType } from "@blitzkit/core"; -import { - LockClosedIcon, - LockOpen2Icon, - TrashIcon, -} from "@radix-ui/react-icons"; -import { - Box, - Button, - DropdownMenu, - Flex, - IconButton, - Inset, - Popover, - Text, - type FlexProps, -} from "@radix-ui/themes"; -import { isEqual } from "lodash-es"; +import { asset, ShellType, TIER_ROMAN_NUMERALS } from "@blitzkit/core"; +import { TrashIcon } from "@radix-ui/react-icons"; +import { Box, Button, DropdownMenu, Flex, Text } from "@radix-ui/themes"; +import { isEqual, times } from "lodash-es"; import { awaitableGameDefinitions } from "../../../core/awaitables/gameDefinitions"; import { useLocale } from "../../../hooks/useLocale"; import { App } from "../../../stores/app"; import { TankFilters } from "../../../stores/tankFilters"; -import { MissingShellIcon } from "../../MissingShellIcon"; const gameDefinitions = await awaitableGameDefinitions; @@ -32,119 +17,8 @@ const shellTypeIcons: Record = { }; const MAX_NATIONS = 3; - -function ShellFilter({ index, premium }: { index: number; premium?: boolean }) { - const shells = TankFilters.use((state) => state.shells); - - return ( - - - - {shells[index] === null && ( - - - - )} - {shells[index] !== null && ( - - )} - - - - - - - {Object.values(ShellType).map((shellType) => { - if (typeof shellType === "string") return null; - - const selected = shells[index] === shellType; - - return ( - { - const mutated = [...shells] as TankFilters["shells"]; - - mutated[index] = selected ? null : shellType; - - TankFilters.mutate((draft) => { - draft.shells = mutated; - }); - }} - highContrast={selected} - color={selected ? undefined : "gray"} - > - - - ); - })} - - - - - ); -} - -function OwnershipFilter(props: FlexProps) { - const tankFilters = TankFilters.use(); - const wargaming = App.use((state) => state.logins.wargaming); - - return ( - - { - TankFilters.mutate((draft) => { - draft.showOwned = !draft.showOwned; - }); - }} - > - - - - { - TankFilters.mutate((draft) => { - draft.showUnowned = !draft.showUnowned; - }); - }} - > - - - - ); -} +const MAX_TIERS = 2; +const TIERS = times(10, (i) => i + 1); export function FilterControl() { const tankFilters = TankFilters.use(); @@ -152,6 +26,7 @@ export function FilterControl() { const clearable = !isEqual(tankFilters, TankFilters.initial); const wargaming = App.use((state) => state.logins.wargaming); + const tiers = tankFilters.tiers.length === 0 ? TIERS : tankFilters.tiers; const nations = tankFilters.nations.length === 0 ? gameDefinitions.nations @@ -159,6 +34,78 @@ export function FilterControl() { return ( + + + + + + + {TIERS.map((tier) => { + const selected = tankFilters.tiers.includes(tier); + + return ( + { + event.preventDefault(); + + TankFilters.mutate((draft) => { + if (selected) { + draft.tiers = draft.tiers.filter((t) => t !== tier); + } else { + draft.tiers = [...draft.tiers, tier]; + } + }); + }} + checked={selected} + key={tier} + > + Tier {TIER_ROMAN_NUMERALS[tier]} + + ); + })} + + + + { + event.preventDefault(); + + TankFilters.mutate((draft) => { + draft.tiers = []; + }); + }} + > + + Clear + + + +