diff --git a/packages/website/src/components/TankSearch/components/FilterControl.tsx b/packages/website/src/components/TankSearch/components/FilterControl.tsx index 0b394c6dd..4cfddb32f 100644 --- a/packages/website/src/components/TankSearch/components/FilterControl.tsx +++ b/packages/website/src/components/TankSearch/components/FilterControl.tsx @@ -122,10 +122,7 @@ const GUN_TYPES = Object.keys( GUN_TYPE_ICONS ) as (keyof typeof GUN_TYPE_ICONS)[]; -const MAX_TIERS = 4; -const MAX_CONSUMABLES = 4; -const MAX_PROVISIONS = 4; -const MAX_ABILITIES = 4; +const MAX_ICONS = 4; const TIERS = times(10, (i) => 10 - i); @@ -179,16 +176,16 @@ function TiersFilter() { + + + + {powersArray.map((power) => { + const selected = rawPowers.includes(power); + const powerDefinition = provisionDefinitions.provisions[power]; + + return ( + { + event.preventDefault(); + + TankFilters.mutate((draft) => { + if (selected) { + draft.powers = draft.powers.filter((n) => n !== power); + } else { + draft.powers = [...draft.powers, power]; + } + }); + }} + checked={selected} + key={power} + > + + + {unwrap(powerDefinition.name)} + + ); + })} + + + + { + event.preventDefault(); + + TankFilters.mutate((draft) => { + draft.powers = []; + }); + }} + > + + {strings.website.common.tank_search.clear} + + + + ); +} + function AbilitiesFilter() { const { unwrap, strings } = useLocale(); const rawAbilities = TankFilters.use((state) => state.abilities); @@ -1021,7 +1107,7 @@ function AbilitiesFilter() {