From b400ff6d07ae12f10e170b77958388a7b92e717d Mon Sep 17 00:00:00 2001 From: tresabhi <43380238+tresabhi@users.noreply.github.com> Date: Thu, 27 Aug 2026 11:46:55 -0500 Subject: [PATCH] compiling search --- .../src/components/Compare/CompareTable.tsx | 4 +- .../CompareTankCard/index.module.css | 3 + .../index.tsx} | 25 +- .../RecentlyViewedTanks/index.module.css | 3 + .../index.tsx} | 24 +- .../src/components/Separator/index.module.css | 2 + .../src/components/Separator/index.tsx | 5 + .../website/src/components/TankCard/index.tsx | 2 + .../components/TankSearch/components/Sort.tsx | 7 +- .../src/components/TankSearch/index.tsx | 6 +- .../components/TankSearchFilters/index.tsx | 351 ++++++++---------- .../[...locale]/tanks/index.astro | 9 +- 12 files changed, 213 insertions(+), 228 deletions(-) create mode 100644 packages/website/src/components/CompareTankCard/index.module.css rename packages/website/src/components/{Compare/TankCard.tsx => CompareTankCard/index.tsx} (87%) create mode 100644 packages/website/src/components/RecentlyViewedTanks/index.module.css rename packages/website/src/components/{TankSearch/components/RecentlyViewed.tsx => RecentlyViewedTanks/index.tsx} (63%) create mode 100644 packages/website/src/components/Separator/index.module.css create mode 100644 packages/website/src/components/Separator/index.tsx diff --git a/packages/website/src/components/Compare/CompareTable.tsx b/packages/website/src/components/Compare/CompareTable.tsx index 59d7ab555..6854b6ce3 100644 --- a/packages/website/src/components/Compare/CompareTable.tsx +++ b/packages/website/src/components/Compare/CompareTable.tsx @@ -18,6 +18,7 @@ import { useLocale } from "../../hooks/useLocale"; import { CompareEphemeral } from "../../stores/compareEphemeral"; import type { EquipmentMatrix } from "../../stores/duel"; import { BlitzkitButtonGrayIcon } from "../BlitzkitButtonGrayIcon"; +import { CompareTankCard } from "../CompareTankCard"; import { ConsumablesManager } from "../ConsumablesManager"; import { CrewSkillManager } from "../CrewSkillManager"; import { EquipmentManager } from "../EquipmentManager"; @@ -27,7 +28,6 @@ import { StickyColumnHeaderCell } from "../StickyColumnHeaderCell"; import { StickyTableRoot } from "../StickyTableRoot"; import { Body } from "./Body"; import { InsertionMarker } from "./IntersectionMarker"; -import { TankCard } from "./TankCard"; interface CompareTableProps { stats: TankCharacteristics[]; @@ -77,7 +77,7 @@ export function CompareTable({ stats }: CompareTableProps) { {members.map(({ tank, key }, index) => { - return ; + return ; })} diff --git a/packages/website/src/components/CompareTankCard/index.module.css b/packages/website/src/components/CompareTankCard/index.module.css new file mode 100644 index 000000000..aec98b2d5 --- /dev/null +++ b/packages/website/src/components/CompareTankCard/index.module.css @@ -0,0 +1,3 @@ +.name { + max-width: 8rem; +} diff --git a/packages/website/src/components/Compare/TankCard.tsx b/packages/website/src/components/CompareTankCard/index.tsx similarity index 87% rename from packages/website/src/components/Compare/TankCard.tsx rename to packages/website/src/components/CompareTankCard/index.tsx index bb6221719..e80c255bd 100644 --- a/packages/website/src/components/Compare/TankCard.tsx +++ b/packages/website/src/components/CompareTankCard/index.tsx @@ -1,20 +1,22 @@ import { type TankDefinition, tankIcon } from "@blitzkit/core"; -import { Flex, Text } from "@radix-ui/themes"; import { useEffect, useRef } from "react"; import { Vector2 } from "three"; import { useLocale } from "../../hooks/useLocale"; import { CompareEphemeral } from "../../stores/compareEphemeral"; +import { InsertionMarker } from "../Compare/IntersectionMarker"; +import { insertionMarkers } from "../Compare/IntersectionMarker/constants"; +import { TankControl } from "../Compare/TankControl"; +import { Flex } from "../Flex"; import { StickyColumnHeaderCell } from "../StickyColumnHeaderCell"; -import { InsertionMarker } from "./IntersectionMarker"; -import { insertionMarkers } from "./IntersectionMarker/constants"; -import { TankControl } from "./TankControl"; +import { Text } from "../Text"; +import styles from "./index.module.css"; interface TankCardProps { index: number; tank: TankDefinition; } -export function TankCard({ index, tank }: TankCardProps) { +export function CompareTankCard({ index, tank }: TankCardProps) { const draggable = useRef(null); const { unwrap } = useLocale(); @@ -103,12 +105,12 @@ export function TankCard({ index, tank }: TankCardProps) { return ( - + - + {unwrap(tank.name!)} diff --git a/packages/website/src/components/RecentlyViewedTanks/index.module.css b/packages/website/src/components/RecentlyViewedTanks/index.module.css new file mode 100644 index 000000000..dee5990a2 --- /dev/null +++ b/packages/website/src/components/RecentlyViewedTanks/index.module.css @@ -0,0 +1,3 @@ +.recent { + /* mt="2" mb="6" */ +} diff --git a/packages/website/src/components/TankSearch/components/RecentlyViewed.tsx b/packages/website/src/components/RecentlyViewedTanks/index.tsx similarity index 63% rename from packages/website/src/components/TankSearch/components/RecentlyViewed.tsx rename to packages/website/src/components/RecentlyViewedTanks/index.tsx index 6ac16448e..a88e5aa23 100644 --- a/packages/website/src/components/TankSearch/components/RecentlyViewed.tsx +++ b/packages/website/src/components/RecentlyViewedTanks/index.tsx @@ -1,16 +1,20 @@ import { isEqual } from "lodash-es"; import { useMemo } from "react"; -import { api } from "../../../core/blitzkit/api"; -import { useLocale } from "../../../hooks/useLocale"; -import { TankFilters } from "../../../stores/tankFilters"; -import { TankopediaPersistent } from "../../../stores/tankopediaPersistent"; -import { TankSort } from "../../../stores/tankopediaSort"; -import { TankCard } from "../../TankCard"; -import { TankCardWrapper } from "../../TankCardWrapper"; +import { api } from "../../core/blitzkit/api"; +import { useLocale } from "../../hooks/useLocale"; +import { TankFilters } from "../../stores/tankFilters"; +import { TankopediaPersistent } from "../../stores/tankopediaPersistent"; +import { TankSort } from "../../stores/tankopediaSort"; +import { Flex } from "../Flex"; +import { Separator } from "../Separator"; +import { TankCard } from "../TankCard"; +import { TankCardWrapper } from "../TankCardWrapper"; +import { Text } from "../Text"; +import styles from "./index.module.css"; const tankDefinitions = await api.tankDefinitions(); -export function RecentlyViewed() { +export function RecentlyViewedTanks() { const filters = TankFilters.use(); // non-reactive because it is a little weird that it updates instantly even before the page loads const recentlyViewed = TankopediaPersistent.state.recentlyViewed.filter( @@ -34,7 +38,7 @@ export function RecentlyViewed() { } return ( - + {strings.website.common.tank_search.recent} @@ -44,7 +48,7 @@ export function RecentlyViewed() { ))} - + ); } diff --git a/packages/website/src/components/Separator/index.module.css b/packages/website/src/components/Separator/index.module.css new file mode 100644 index 000000000..612b52de1 --- /dev/null +++ b/packages/website/src/components/Separator/index.module.css @@ -0,0 +1,2 @@ +.separator { +} diff --git a/packages/website/src/components/Separator/index.tsx b/packages/website/src/components/Separator/index.tsx new file mode 100644 index 000000000..ffda91494 --- /dev/null +++ b/packages/website/src/components/Separator/index.tsx @@ -0,0 +1,5 @@ +import styles from "./index.module.css"; + +export function Separator() { + return
; +} diff --git a/packages/website/src/components/TankCard/index.tsx b/packages/website/src/components/TankCard/index.tsx index 93fa1be31..5472bff2d 100644 --- a/packages/website/src/components/TankCard/index.tsx +++ b/packages/website/src/components/TankCard/index.tsx @@ -5,8 +5,10 @@ import { api } from "../../core/blitzkit/api"; import { useLocale } from "../../hooks/useLocale"; import { TankopediaPersistent } from "../../stores/tankopediaPersistent"; import { classIcons } from "../ClassIcon"; +import { Flex } from "../Flex"; import { LinkI18n } from "../LinkI18n"; import { MAX_RECENTLY_VIEWED } from "../TankSearch/constants"; +import { Text, type TextProps } from "../Text"; import "./index.css"; type TankCardProps = TextProps & { diff --git a/packages/website/src/components/TankSearch/components/Sort.tsx b/packages/website/src/components/TankSearch/components/Sort.tsx index d9f8f2204..d7ef3b2f1 100644 --- a/packages/website/src/components/TankSearch/components/Sort.tsx +++ b/packages/website/src/components/TankSearch/components/Sort.tsx @@ -5,7 +5,6 @@ import type { TankopediaSortDirection, } from "../../../stores/tankopediaPersistent"; import { TankSort } from "../../../stores/tankopediaSort"; -import { Button } from "../../Button"; import { DropdownMenu } from "../../DropdownMenu"; interface ItemProps { @@ -41,10 +40,8 @@ export function Sort() { return ( - + {strings.website.common.tank_search.sort_dropdown.label} + diff --git a/packages/website/src/components/TankSearch/index.tsx b/packages/website/src/components/TankSearch/index.tsx index 845034b56..2facbcc93 100644 --- a/packages/website/src/components/TankSearch/index.tsx +++ b/packages/website/src/components/TankSearch/index.tsx @@ -25,14 +25,14 @@ import type { MaybeSkeletonComponentProps } from "../../types/maybeSkeletonCompo import { Callout } from "../Callout"; import { ExperimentIcon } from "../ExperimentIcon"; import { Link } from "../Link"; +import { RecentlyViewedTanks } from "../RecentlyViewedTanks"; +import { TankCardSkeleton } from "../TankCardSkeleton"; import { TankCardWrapper } from "../TankCardWrapper"; import { TankSearchBar } from "../TankSearchBar"; import { TankSearchFilters } from "../TankSearchFilters"; import { Text } from "../Text"; import { TankSearchCard } from "./components/Card"; import { NoResults } from "./components/NoResults"; -import { RecentlyViewed } from "./components/RecentlyViewed"; -import { TankCardSkeleton } from "../TankCardSkeleton"; import { MAX_RECENTLY_VIEWED } from "./constants"; import styles from "./index.module.css"; @@ -439,7 +439,7 @@ export const TankSearch = memo( {!tankFilters.search && !tankFilters.searching && } - {!skeleton && !compact && } + {!skeleton && !compact && }
diff --git a/packages/website/src/components/TankSearchFilters/index.tsx b/packages/website/src/components/TankSearchFilters/index.tsx index 04a2ea608..ef9fd08ed 100644 --- a/packages/website/src/components/TankSearchFilters/index.tsx +++ b/packages/website/src/components/TankSearchFilters/index.tsx @@ -21,7 +21,6 @@ import { api } from "../../core/blitzkit/api"; import { useLocale } from "../../hooks/useLocale"; import { App } from "../../stores/app"; import { TankFilters, type CaseType } from "../../stores/tankFilters"; -import { Button } from "../Button"; import { classIcons } from "../ClassIcon"; import { DropdownMenu } from "../DropdownMenu"; import { Flex } from "../Flex"; @@ -216,23 +215,21 @@ function TiersFilter() { return ( - + {tiers.length > MAX_ICONS && ( + + {literals(strings.common.units.plus, { + value: tiers.length - MAX_ICONS, + })} + + )} + @@ -291,22 +288,20 @@ function NationsFilter() { return ( - + + {nations.map((nation, index) => ( + 0 ? "-0.5em" : undefined, + width: "1.25em", + height: "1.25em", + }} + src={alias("api", `/flags/circle/${nation}.webp`)} + /> + ))} + @@ -375,26 +370,24 @@ function ClassFilter() { return ( - + + {classes.map((tankClass, index) => { + const Icon = classIcons[tankClass]; + return ( + 0 ? "-0.5em" : undefined, + width: "1.25em", + height: "1.25em", + }} + /> + ); + })} + @@ -455,26 +448,24 @@ function GunTypeFilter() { return ( - + return ( + + ); + })} + @@ -533,26 +524,24 @@ function TypeFilter() { return ( - + + {types.map((tankType) => { + return ( + + ); + })} + @@ -634,32 +623,20 @@ function IndividualShellFilter({ return ( - - {shells[index] === null && ( - - - - )} - {shells[index] !== null && ( - - )} - + {shells[index] === null && ( + + + + )} + {shells[index] !== null && ( + + )} @@ -849,31 +826,29 @@ function ConsumablesFilter() { return ( - + {consumables.length > MAX_ICONS && ( + + {literals(strings.common.units.plus, { + value: consumables.length - MAX_ICONS, + })} + + )} + @@ -943,31 +918,29 @@ function ProvisionsFilter() { return ( - + {provisions.length > MAX_ICONS && ( + + {literals(strings.common.units.plus, { + value: provisions.length - MAX_ICONS, + })} + + )} + @@ -1052,31 +1025,29 @@ function GameModeAbilitiesFilter() { return ( - + {icons.length > MAX_ICONS && ( + + {literals(strings.common.units.plus, { + value: icons.length - MAX_ICONS, + })} + + )} + diff --git a/packages/website/src/pages/[...chunk_default]/[...locale]/tanks/index.astro b/packages/website/src/pages/[...chunk_default]/[...locale]/tanks/index.astro index 115745d49..4f8b4e87b 100644 --- a/packages/website/src/pages/[...chunk_default]/[...locale]/tanks/index.astro +++ b/packages/website/src/pages/[...chunk_default]/[...locale]/tanks/index.astro @@ -1,4 +1,5 @@ --- +import { Section } from "../../../../components/Section"; import ToolBanner from "../../../../components/ToolBanner.astro"; import { tools } from "../../../../constants/tools"; import BaseLayout from "../../../../layouts/BaseLayout.astro"; @@ -12,7 +13,9 @@ const { locale } = Astro.props; - - - +
+ + + +