diff --git a/packages/website/src/components/TankSearch/components/FilterControl.tsx b/packages/website/src/components/TankSearch/components/FilterControl.tsx index fc51ff253..22cc52588 100644 --- a/packages/website/src/components/TankSearch/components/FilterControl.tsx +++ b/packages/website/src/components/TankSearch/components/FilterControl.tsx @@ -26,7 +26,7 @@ import { type FlexProps, } from "@radix-ui/themes"; import { times } from "lodash-es"; -import { Fragment, type ComponentProps, type ReactNode } from "react"; +import { Fragment, useState, type ComponentProps, type ReactNode } from "react"; import { awaitableConsumableDefinitions } from "../../../core/awaitables/consumableDefinitions"; import { awaitableGameDefinitions } from "../../../core/awaitables/gameDefinitions"; import { awaitableProvisionDefinitions } from "../../../core/awaitables/provisionDefinitions"; @@ -160,17 +160,13 @@ export function FilterControl() { - - - - - + ); @@ -1031,205 +1027,166 @@ function ProvisionsFilter() { ); } -function PowersFilter() { - const { unwrap, strings } = useLocale(); +function GameModeAbilitiesFilter() { + const { unwrap } = useLocale(); + const rawAbilities = TankFilters.use((state) => state.abilities); const rawPowers = TankFilters.use((state) => state.powers); - const powers = - rawPowers.length === 0 - ? Array.from(allGameModeProvisions.values()) - : rawPowers; + const [activeTab, setActiveTab] = useState<"active" | "passive">("active"); + + const totalSelected = rawAbilities.length + rawPowers.length; return ( - - {gameModeRoles.map(({ gameModeId, provisions }) => { - const gameMode = gameDefinitions.gameModes[gameModeId]; - - if (provisions.length === 0) return null; - - return ( - - {unwrap(gameMode.name)} - - {provisions.map((provision) => { - { - const selected = rawPowers.includes(provision); - const powerDefinition = - provisionDefinitions.provisions[provision]; - - return ( - { - event.preventDefault(); - - TankFilters.mutate((draft) => { - if (selected) { - draft.powers = draft.powers.filter( - (n) => n !== provision - ); - } else { - draft.powers = [...draft.powers, provision]; - } - }); - }} - checked={selected} - key={provision} - > - - - {unwrap(powerDefinition.name)} - - ); - } - })} - - ); - })} + + {/* Tab buttons */} + + + + - { - event.preventDefault(); + {/* Active Abilities Content */} + {activeTab === "active" && ( + <> + {gameModeRoles.map(({ gameModeId, consumables }) => { + const gameMode = gameDefinitions.gameModes[gameModeId]; - TankFilters.mutate((draft) => { - draft.powers = []; - }); - }} - > - - {strings.website.common.tank_search.clear} - - - - ); -} + if (consumables.length === 0) return null; -function AbilitiesFilter() { - const { unwrap, strings } = useLocale(); - const rawAbilities = TankFilters.use((state) => state.abilities); - const abilities = - rawAbilities.length === 0 - ? Array.from(allGameModeConsumables.values()) - : rawAbilities; + return ( + + + {unwrap(gameMode.name)} + - return ( - - - - + return ( + { + event.preventDefault(); - - {gameModeRoles.map(({ gameModeId, consumables }) => { - const gameMode = gameDefinitions.gameModes[gameModeId]; - - if (consumables.length === 0) return null; - - return ( - - {unwrap(gameMode.name)} - - {consumables.map((consumable) => { - { - const selected = rawAbilities.includes(consumable); - const abilityDefinition = - consumableDefinitions.consumables[consumable]; - - return ( - { - event.preventDefault(); - - TankFilters.mutate((draft) => { - if (selected) { - draft.abilities = draft.abilities.filter( - (n) => n !== consumable - ); - } else { - draft.abilities = [...draft.abilities, consumable]; - } - }); - }} - checked={selected} - key={consumable} - > - { + if (selected) { + draft.abilities = draft.abilities.filter( + (n) => n !== consumable + ); + } else { + draft.abilities = [ + ...draft.abilities, + consumable, + ]; + } + }); }} - src={asset(`icons/consumables/${consumable}.webp`)} - /> + checked={selected} + key={consumable} + > + - {unwrap(abilityDefinition.name)} - - ); - } - })} - - ); - })} + {unwrap(abilityDefinition.name)} + + ); + })} + + ); + })} + + )} + + {/* Passive Abilities Content */} + {activeTab === "passive" && ( + <> + {gameModeRoles.map(({ gameModeId, provisions }) => { + const gameMode = gameDefinitions.gameModes[gameModeId]; + + if (provisions.length === 0) return null; + + return ( + + + {unwrap(gameMode.name)} + + + {provisions.map((provision) => { + const selected = rawPowers.includes(provision); + const powerDefinition = + provisionDefinitions.provisions[provision]; + + return ( + { + event.preventDefault(); + + TankFilters.mutate((draft) => { + if (selected) { + draft.powers = draft.powers.filter( + (n) => n !== provision + ); + } else { + draft.powers = [...draft.powers, provision]; + } + }); + }} + checked={selected} + key={provision} + > + + + {unwrap(powerDefinition.name)} + + ); + })} + + ); + })} + + )} @@ -1240,11 +1197,12 @@ function AbilitiesFilter() { TankFilters.mutate((draft) => { draft.abilities = []; + draft.powers = []; }); }} > - {strings.website.common.tank_search.clear} + Clear All