diff --git a/packages/website/src/components/TankSearch/components/FilterControl.tsx b/packages/website/src/components/TankSearch/components/FilterControl.tsx index 7c2bcf2d3..9adc8c40d 100644 --- a/packages/website/src/components/TankSearch/components/FilterControl.tsx +++ b/packages/website/src/components/TankSearch/components/FilterControl.tsx @@ -49,9 +49,18 @@ const consumablesArray = Object.values(consumableDefinitions.consumables) consumable.name.locales[locales.default] ) .map((consumable) => consumable.id); -const abilitiesArray = Object.values(consumableDefinitions.consumables) - .filter((consumable) => consumable.game_mode_exclusive) - .map((consumable) => consumable.id); +const abilitiesArray = Array.from( + Object.values(consumableDefinitions.consumables) + .filter((c) => c.game_mode_exclusive) + .reduce((uniqueMap, consumable) => { + if (!uniqueMap.has(consumable.name.locales[locales.default])) { + uniqueMap.set(consumable.name.locales[locales.default], consumable.id); + } + + return uniqueMap; + }, new Map()) + .values() +); const shellTypeIcons: Record = { [ShellType.AP]: "ap", @@ -81,6 +90,7 @@ const GUN_TYPES = Object.keys( const MAX_TIERS = 4; const MAX_CONSUMABLES = 4; +const MAX_ABILITIES = 4; const TIERS = times(10, (i) => 10 - i); @@ -98,6 +108,7 @@ export function FilterControl() { + ); } @@ -815,3 +826,92 @@ function ConsumablesFilter() { ); } + +function AbilitiesFilter() { + const rawAbilities = TankFilters.use((state) => state.abilities); + const abilities = rawAbilities.length === 0 ? abilitiesArray : rawAbilities; + const { unwrap } = useLocale(); + + return ( + + + + + + + {abilitiesArray.map((ability) => { + const selected = rawAbilities.includes(ability); + const abilityDefinition = consumableDefinitions.consumables[ability]; + + return ( + { + event.preventDefault(); + + TankFilters.mutate((draft) => { + if (selected) { + draft.abilities = draft.abilities.filter( + (n) => n !== ability + ); + } else { + draft.abilities = [...draft.abilities, ability]; + } + }); + }} + checked={selected} + key={ability} + > + + + {unwrap(abilityDefinition.name)} + + ); + })} + + + + { + event.preventDefault(); + + TankFilters.mutate((draft) => { + draft.abilities = []; + }); + }} + > + + Clear + + + + ); +} diff --git a/packages/website/src/stores/tankFilters.ts b/packages/website/src/stores/tankFilters.ts index d758d29a5..7b23af850 100644 --- a/packages/website/src/stores/tankFilters.ts +++ b/packages/website/src/stores/tankFilters.ts @@ -22,6 +22,7 @@ export interface TankFilters { gunType: CaseType[]; shells: [ShellType | null, ShellType | null, ShellType | null]; consumables: number[]; + abilities: number[]; showTesting: boolean; showNonTesting: boolean; @@ -39,6 +40,7 @@ export const TankFilters = new Varuna({ gunType: [], shells: [null, null, null], consumables: [], + abilities: [], showTesting: true, showNonTesting: true,