diff --git a/packages/core/src/blitzkit/metaSortTank.ts b/packages/core/src/blitzkit/metaSortTank.ts index 81734a526..a81974a64 100644 --- a/packages/core/src/blitzkit/metaSortTank.ts +++ b/packages/core/src/blitzkit/metaSortTank.ts @@ -1,6 +1,6 @@ import { GameDefinitions, TankDefinition } from "@blitzkit/protos"; import { tankClassOrder } from "../config/tankClassOrder"; -import { treeTypeOrder } from "./treeTypeOrder"; +import { treeTypeOrder } from "../config/treeTypeOrder"; export function metaSortTank( tanks: TankDefinition[], diff --git a/packages/core/src/config/gunTypeOrder.ts b/packages/core/src/config/gunTypeOrder.ts new file mode 100644 index 000000000..b10fc89cb --- /dev/null +++ b/packages/core/src/config/gunTypeOrder.ts @@ -0,0 +1,8 @@ +import { GunDefinition } from "@blitzkit/protos"; +import { CaseType } from "../types"; + +export const gunTypeOrder: CaseType[] = [ + "regular", + "auto_loader", + "auto_reloader", +]; diff --git a/packages/core/src/config/index.ts b/packages/core/src/config/index.ts new file mode 100644 index 000000000..c9bce2bce --- /dev/null +++ b/packages/core/src/config/index.ts @@ -0,0 +1,3 @@ +export * from "./gunTypeOrder"; +export * from "./tankClassOrder"; +export * from "./treeTypeOrder"; diff --git a/packages/core/src/blitzkit/treeTypeOrder.ts b/packages/core/src/config/treeTypeOrder.ts similarity index 100% rename from packages/core/src/blitzkit/treeTypeOrder.ts rename to packages/core/src/config/treeTypeOrder.ts diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 9b3ffacd2..3ed7973bc 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -1,6 +1,7 @@ export * from "./api"; export * from "./blitz"; export * from "./blitzkit"; +export * from "./config"; export * from "./imgur"; export * from "./math"; export * from "./patreon"; diff --git a/packages/core/src/types/caseType.ts b/packages/core/src/types/caseType.ts new file mode 100644 index 000000000..d61a2f1a6 --- /dev/null +++ b/packages/core/src/types/caseType.ts @@ -0,0 +1,5 @@ +export type CaseType = T extends { + gun_type?: { $case: infer U; value: any }; +} + ? U + : never; diff --git a/packages/core/src/types/index.ts b/packages/core/src/types/index.ts index a4038c044..2d3726d47 100644 --- a/packages/core/src/types/index.ts +++ b/packages/core/src/types/index.ts @@ -4,6 +4,7 @@ export * from "./blitzStrings"; export * from "./blitzTankFilterDefinitionCategory"; export * from "./camouflagesXml"; export * from "./camouflagesYaml"; +export * from "./caseType"; export * from "./chassisDefinitionsList"; export * from "./combatRolesYaml"; export * from "./consumablesCommon"; diff --git a/packages/website/src/components/ClassIcon/index.ts b/packages/website/src/components/ClassIcon/index.tsx similarity index 70% rename from packages/website/src/components/ClassIcon/index.ts rename to packages/website/src/components/ClassIcon/index.tsx index e62343faa..de96cf357 100644 --- a/packages/website/src/components/ClassIcon/index.ts +++ b/packages/website/src/components/ClassIcon/index.tsx @@ -5,7 +5,11 @@ import { ClassLight } from "./components/ClassLight"; import { ClassMedium } from "./components/ClassMedium"; import { ClassTankDestroyer } from "./components/ClassTankDestroyer"; -export const classIcons: Record< +interface ClassIconProps extends ComponentProps<"svg"> { + class: TankClass; +} + +const classIcons: Record< TankClass, (props: ComponentProps<"svg">) => ReactNode > = { @@ -14,3 +18,8 @@ export const classIcons: Record< [TankClass.TANK_CLASS_LIGHT]: ClassLight, [TankClass.TANK_CLASS_MEDIUM]: ClassMedium, }; + +export function ClassIcon({ class: tankClass, ...props }: ClassIconProps) { + const Icon = classIcons[tankClass]; + return ; +} diff --git a/packages/website/src/components/GunIcon/index.tsx b/packages/website/src/components/GunIcon/index.tsx new file mode 100644 index 000000000..5290b0ff7 --- /dev/null +++ b/packages/website/src/components/GunIcon/index.tsx @@ -0,0 +1,24 @@ +import type { CaseType } from "@blitzkit/core"; +import type { GunDefinition } from "@blitzkit/protos"; +import type { ComponentProps, ReactNode } from "react"; +import { GunAutoloaderIcon } from "../GunAutoloaderIcon"; +import { GunAutoreloaderIcon } from "../GunAutoreloaderIcon"; +import { GunRegularIcon } from "../GunRegularIcon"; + +const typeIcons: Record< + CaseType, + (props: ComponentProps<"svg">) => ReactNode +> = { + regular: GunRegularIcon, + auto_loader: GunAutoloaderIcon, + auto_reloader: GunAutoreloaderIcon, +}; + +interface Props extends ComponentProps<"svg"> { + type: CaseType; +} + +export function GunIcon({ type, ...props }: Props) { + const Icon = typeIcons[type]; + return ; +} diff --git a/packages/website/src/components/TankSearchFilters/index.tsx b/packages/website/src/components/TankSearchFilters/index.tsx index 64cf454d2..1f8e2797c 100644 --- a/packages/website/src/components/TankSearchFilters/index.tsx +++ b/packages/website/src/components/TankSearchFilters/index.tsx @@ -1,7 +1,8 @@ -import { alias, TIER_ROMAN_NUMERALS } from "@blitzkit/core"; +import { alias, gunTypeOrder, TIER_ROMAN_NUMERALS } from "@blitzkit/core"; +import { tankClassOrder } from "@blitzkit/core/src/config/tankClassOrder"; import { literals } from "@blitzkit/i18n"; import locales from "@blitzkit/i18n/locales.json"; -import { ShellType, TankType, type GunDefinition } from "@blitzkit/protos"; +import { ShellType, TankType } from "@blitzkit/protos"; import { LockClosedIcon, LockOpen2Icon, @@ -9,18 +10,16 @@ import { TrashIcon, } from "@radix-ui/react-icons"; import { times } from "lodash-es"; -import { Fragment, type ComponentProps, type ReactNode } from "react"; +import { Fragment } from "react"; import { api } from "../../api/dynamic"; import { useLocale } from "../../hooks/useLocale"; +import { useStrings } from "../../hooks/useStrings"; import { App } from "../../stores/app"; -import { TankFilters, type CaseType } from "../../stores/tankFilters"; +import { TankFilters } from "../../stores/tankFilters"; import { Button } from "../Button"; -import { classIcons } from "../ClassIcon"; +import { ClassIcon } from "../ClassIcon"; import { DropdownMenu } from "../DropdownMenu"; import { Flex } from "../Flex"; -import { GunAutoloaderIcon } from "../GunAutoloaderIcon"; -import { GunAutoreloaderIcon } from "../GunAutoreloaderIcon"; -import { GunRegularIcon } from "../GunRegularIcon"; import { IconButton } from "../IconButton"; import { MissingShellIcon } from "../MissingShellIcon"; import { ResearchedIcon } from "../ResearchedIcon"; @@ -140,25 +139,12 @@ const shellTypeIcons: Record = { [ShellType.SHELL_TYPE_HEAT]: "hc", }; -const GUN_TYPE_ICONS: Record< - CaseType, - (props: ComponentProps<"svg">) => ReactNode -> = { - regular: GunRegularIcon, - auto_loader: GunAutoloaderIcon, - auto_reloader: GunAutoreloaderIcon, -}; - const TANK_TYPE_COLORS: Record = { [TankType.TANK_TYPE_RESEARCHABLE]: "gray", [TankType.TANK_TYPE_PREMIUM]: "amber", [TankType.TANK_TYPE_COLLECTOR]: "blue", }; -const GUN_TYPES = Object.keys( - GUN_TYPE_ICONS, -) as (keyof typeof GUN_TYPE_ICONS)[]; - const MAX_ICONS = 4; const TIERS = times(10, (i) => 10 - i); @@ -200,7 +186,7 @@ function ResetButton() { } function TiersFilter() { - const { strings } = useLocale(); + const strings = useStrings(); const tiersRaw = TankFilters.use((state) => state.tiers); const tiers = tiersRaw.length === 0 ? TIERS : tiersRaw; @@ -277,7 +263,7 @@ function NationsFilter() { const rawNations = TankFilters.use((state) => state.nations); const nations = rawNations.length === 0 ? gameDefinitions.nations : rawNations; - const { strings } = useLocale(); + const strings = useStrings(); return ( @@ -359,9 +345,9 @@ function NationsFilter() { } function ClassFilter() { - const { strings } = useLocale(); + const strings = useStrings(); const rawClasses = TankFilters.use((state) => state.classes); - const classes = rawClasses.length === 0 ? TANK_CLASSES : rawClasses; + const classes = rawClasses.length === 0 ? tankClassOrder : rawClasses; return ( @@ -369,10 +355,10 @@ function ClassFilter() {