From c4fa6cebfaa554af906dc63c197ba9c50225d748 Mon Sep 17 00:00:00 2001 From: tresabhi <43380238+tresabhi@users.noreply.github.com> Date: Sat, 9 Nov 2024 19:05:23 -0600 Subject: [PATCH] feat: gun type filters --- .vscode/settings.json | 2 + .../src/components/GunAutoloaderIcon.tsx | 36 +++++++ .../src/components/GunAutoreloaderIcon.tsx | 33 +++++++ .../website/src/components/GunRegularIcon.tsx | 22 +++++ .../TankSearch/components/FilterControl.tsx | 99 +++++++++++++++++-- .../website/src/core/blitzkit/filterTank.ts | 15 ++- packages/website/src/stores/tankFilters.ts | 10 +- 7 files changed, 206 insertions(+), 11 deletions(-) create mode 100644 packages/website/src/components/GunAutoloaderIcon.tsx create mode 100644 packages/website/src/components/GunAutoreloaderIcon.tsx create mode 100644 packages/website/src/components/GunRegularIcon.tsx diff --git a/.vscode/settings.json b/.vscode/settings.json index b121917ec..96c8fd3e8 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -13,6 +13,8 @@ "artefacts", "astrojs", "atgm", + "Autoloader", + "Autoreloader", "AYUV", "battleresults", "bbox", diff --git a/packages/website/src/components/GunAutoloaderIcon.tsx b/packages/website/src/components/GunAutoloaderIcon.tsx new file mode 100644 index 000000000..10e2274b8 --- /dev/null +++ b/packages/website/src/components/GunAutoloaderIcon.tsx @@ -0,0 +1,36 @@ +import type { ComponentProps } from 'react'; + +export function GunAutoloaderIcon(props: ComponentProps<'svg'>) { + return ( + + + + + + ); +} diff --git a/packages/website/src/components/GunAutoreloaderIcon.tsx b/packages/website/src/components/GunAutoreloaderIcon.tsx new file mode 100644 index 000000000..55f58ff8b --- /dev/null +++ b/packages/website/src/components/GunAutoreloaderIcon.tsx @@ -0,0 +1,33 @@ +import type { ComponentProps } from 'react'; + +export function GunAutoreloaderIcon(props: ComponentProps<'svg'>) { + return ( + + + + + + + + + + + + ); +} diff --git a/packages/website/src/components/GunRegularIcon.tsx b/packages/website/src/components/GunRegularIcon.tsx new file mode 100644 index 000000000..2107eb8db --- /dev/null +++ b/packages/website/src/components/GunRegularIcon.tsx @@ -0,0 +1,22 @@ +import type { ComponentProps } from 'react'; + +export function GunRegularIcon(props: ComponentProps<'svg'>) { + return ( + + + + ); +} diff --git a/packages/website/src/components/TankSearch/components/FilterControl.tsx b/packages/website/src/components/TankSearch/components/FilterControl.tsx index 492a91fbc..a9c9ebd54 100644 --- a/packages/website/src/components/TankSearch/components/FilterControl.tsx +++ b/packages/website/src/components/TankSearch/components/FilterControl.tsx @@ -13,6 +13,9 @@ import { times } from 'lodash-es'; import { $tankFilters, initialTankFilters } from '../../../stores/tankFilters'; import { classIcons } from '../../ClassIcon'; import { ExperimentIcon } from '../../ExperimentIcon'; +import { GunAutoloaderIcon } from '../../GunAutoloaderIcon'; +import { GunAutoreloaderIcon } from '../../GunAutoreloaderIcon'; +import { GunRegularIcon } from '../../GunRegularIcon'; import { ResearchedIcon } from '../../ResearchedIcon'; import { ScienceIcon } from '../../ScienceIcon'; import { ScienceOffIcon } from '../../ScienceOffIcon'; @@ -29,11 +32,11 @@ export function FilterControl({ compact }: FilterControlProps) { return ( - + {times(5, (index) => { const tier = index as Tier; const selected = tankFilters.tiers?.includes(tier); @@ -61,7 +64,7 @@ export function FilterControl({ compact }: FilterControlProps) { ); })} - + {times(5, (index) => { const tier = (index + 5) as Tier; const selected = tankFilters.tiers?.includes(tier); @@ -92,11 +95,11 @@ export function FilterControl({ compact }: FilterControlProps) { - + {gameDefinitions.nations .slice(0, Math.ceil(gameDefinitions.nations.length / 2)) .map((nation) => { @@ -131,7 +134,7 @@ export function FilterControl({ compact }: FilterControlProps) { ); })} - + {gameDefinitions.nations .slice(Math.ceil(gameDefinitions.nations.length / 2)) .map((nation) => { @@ -172,7 +175,7 @@ export function FilterControl({ compact }: FilterControlProps) { {TANK_CLASSES.map((tankClass) => { const Icon = classIcons[tankClass]; @@ -208,7 +211,85 @@ export function FilterControl({ compact }: FilterControlProps) { + { + if (tankFilters.gunType.includes('regular')) { + $tankFilters.setKey( + 'gunType', + tankFilters.gunType.filter((t) => t !== 'regular'), + ); + } else { + $tankFilters.setKey('gunType', [ + ...tankFilters.gunType, + 'regular', + ]); + } + }} + > + + + { + if (tankFilters.gunType.includes('auto_loader')) { + $tankFilters.setKey( + 'gunType', + tankFilters.gunType.filter((t) => t !== 'auto_loader'), + ); + } else { + $tankFilters.setKey('gunType', [ + ...tankFilters.gunType, + 'auto_loader', + ]); + } + }} + > + + + { + if (tankFilters.gunType.includes('auto_reloader')) { + $tankFilters.setKey( + 'gunType', + tankFilters.gunType.filter((t) => t !== 'auto_reloader'), + ); + } else { + $tankFilters.setKey('gunType', [ + ...tankFilters.gunType, + 'auto_reloader', + ]); + } + }} + > + + + + + + turret.guns.some((gun) => gun.gun_type!.$case === 'regular'), + )) || + (filters.gunType.includes('auto_loader') && + tank.turrets.some((turret) => + turret.guns.some((gun) => gun.gun_type!.$case === 'auto_loader'), + )) || + (filters.gunType.includes('auto_reloader') && + tank.turrets.some((turret) => + turret.guns.some((gun) => gun.gun_type!.$case === 'auto_reloader'), + ))) ); } diff --git a/packages/website/src/stores/tankFilters.ts b/packages/website/src/stores/tankFilters.ts index 8a9d9c4e5..f57bdf700 100644 --- a/packages/website/src/stores/tankFilters.ts +++ b/packages/website/src/stores/tankFilters.ts @@ -1,6 +1,12 @@ -import type { TankClass, TankType, Tier } from '@blitzkit/core'; +import type { GunDefinition, TankClass, TankType, Tier } from '@blitzkit/core'; import { map } from 'nanostores'; +export type CaseType = T extends { + gun_type?: { $case: infer U; value: any }; +} + ? U + : never; + export interface TankFilters { tiers: Tier[]; nations: string[]; @@ -9,6 +15,7 @@ export interface TankFilters { testing: 'include' | 'exclude' | 'only'; search?: string; searching: boolean; + gunType: CaseType[]; } export const initialTankFilters: TankFilters = { @@ -19,6 +26,7 @@ export const initialTankFilters: TankFilters = { testing: 'include', search: undefined, searching: false, + gunType: [], }; export const $tankFilters = map(initialTankFilters);