diff --git a/packages/core/src/blitzkit/tankNames.ts b/packages/core/src/blitzkit/tankNames.ts index bb19c9597..9d058899a 100644 --- a/packages/core/src/blitzkit/tankNames.ts +++ b/packages/core/src/blitzkit/tankNames.ts @@ -1,6 +1,6 @@ -import { BlitzKitAPI } from "@blitzkit/core"; +import { BlitzKitAPI } from "@blitzkit/core/src/blitzkit/api/base"; import locales from "@blitzkit/i18n/locales.json"; -import { deburr } from "lodash-es"; +import { deburr, times } from "lodash-es"; import { I18nString } from "../protos"; export async function fetchTankNames(api: BlitzKitAPI) { @@ -12,40 +12,53 @@ export async function fetchTankNames(api: BlitzKitAPI) { return await Promise.all( tankDefinitionsArray.map(async (tank) => { - const searchableNameDeburr: I18nString = { locales: {} }; + const name_deburr: I18nString = I18nString.create(); + const camouflages_deburr: I18nString[] = []; + + const camouflages = tank.camouflages.map( + (id) => camouflageDefinitions.camouflages[id].name!, + ); Object.entries(tank.name!).forEach(([key, value]) => { - searchableNameDeburr.locales[key] = deburr(value); + name_deburr.locales[key] = deburr(value); + }); + + camouflages.forEach((camouflage, index) => { + camouflages_deburr[index] = I18nString.create(); + Object.entries(camouflage).forEach(([key, value]) => { + camouflages_deburr[index].locales[key] = deburr(value); + }); }); return { id: tank.id, - name: tank.name, - searchableName: tank.name, - searchableNameDeburr, - camouflages: tank.camouflages - ?.map((id) => - locales.supported.map( - ({ locale }) => - camouflageDefinitions.camouflages[id]?.name!.locales[locale], - ), - ) - .flat() - .filter(Boolean) - .map(deburr) - .join(" "), - treeType: tank.type, + slug: tank.slug, + dev_name: tank.dev_name, + + name: tank.name!, + name_deburr, + + camouflages, + camouflages_deburr, }; }), ); } export const SEARCH_KEYS = [ + "id", + "slug", + "dev_name", + ...locales.supported .map(({ locale }) => [ - `searchableName.locales.${locale}`, - `searchableNameDeburr.locales.${locale}`, + `name.locales.${locale}`, + `name_deburr.locales.${locale}`, + + ...times(8, (index) => [ + `camouflages.${index}.locales.${locale}`, + `camouflages_deburr.${index}.locales.${locale}`, + ]), ]) - .flat(), - "camouflages", + .flat(2), ]; diff --git a/packages/website/src/components/RecentlyViewedTanks/index.module.css b/packages/website/src/components/RecentlyViewedTanks/index.module.css index 3ace5a444..625d13c86 100644 --- a/packages/website/src/components/RecentlyViewedTanks/index.module.css +++ b/packages/website/src/components/RecentlyViewedTanks/index.module.css @@ -1,4 +1,5 @@ .recent { + margin-top: var(--space-4); padding: var(--space-4); background-color: var(--gray-a2); diff --git a/packages/website/src/components/TankSearch/components/NoResults.tsx b/packages/website/src/components/TankSearch/components/NoResults.tsx index 91234bbc1..d6e11eb6c 100644 --- a/packages/website/src/components/TankSearch/components/NoResults.tsx +++ b/packages/website/src/components/TankSearch/components/NoResults.tsx @@ -1,5 +1,8 @@ import { useLocale } from "../../../hooks/useLocale"; import { TankFilters } from "../../../stores/tankFilters"; +import { Flex } from "../../Flex"; +import { Link } from "../../Link"; +import { Text } from "../../Text"; interface NoResultsProps { type?: "filters" | "search"; @@ -9,8 +12,8 @@ export function NoResults({ type = "filters" }: NoResultsProps) { const { strings } = useLocale(); return ( - - + + {strings.website.common.tank_search.no_tanks_found.body}{" "} ( } else { return Promise.resolve( fuzzysort - .go(tankFilters.search, tankNames, { - keys: SEARCH_KEYS, - }) + .go(tankFilters.search, tankNames, { keys: SEARCH_KEYS }) .map((result) => tankDefinitions.tanks[result.obj.id]), ); } @@ -437,7 +435,7 @@ export const TankSearch = memo( onSelect={onSelect} /> - {!tankFilters.search && !tankFilters.searching && } + {!tankFilters.search && } {!skeleton && !compact && } @@ -497,7 +495,7 @@ export const TankSearch = memo( )} - {!skeleton && !tankFilters.searching && ( + {!skeleton && ( <> {tanks.length > 0 && ( @@ -530,19 +528,6 @@ export const TankSearch = memo( {tanks.length === 0 && } )} - - {(skeleton || tankFilters.searching) && ( - - {times( - Math.round( - skeleton ? DEFAULT_LOADED_CARDS : 10 + 10 * Math.random(), - ), - (index) => ( - - ), - )} - - )} ); }, diff --git a/packages/website/src/components/TankSearchBar/index.tsx b/packages/website/src/components/TankSearchBar/index.tsx index a07eacdb9..a96cb3145 100644 --- a/packages/website/src/components/TankSearchBar/index.tsx +++ b/packages/website/src/components/TankSearchBar/index.tsx @@ -1,12 +1,10 @@ import type { TankDefinition } from "@blitzkit/core"; import { MagnifyingGlassIcon } from "@radix-ui/react-icons"; -import { debounce } from "lodash-es"; import { type KeyboardEventHandler, useCallback, useRef } from "react"; import { useLocale } from "../../hooks/useLocale"; import { TankFilters } from "../../stores/tankFilters"; import type { MaybeSkeletonComponentProps } from "../../types/maybeSkeletonComponentProps"; import { Flex } from "../Flex"; -import { Spinner } from "../Spinner"; import { Sort } from "../TankSearch/components/Sort"; import { TextField } from "../TextField"; @@ -22,36 +20,19 @@ export function TankSearchBar({ }: SearchBarProps) { const { strings } = useLocale(); const search = TankFilters.use((state) => state.search); - const searching = TankFilters.use((state) => state.searching); const input = useRef(null); - const performSearch = useCallback( - debounce(() => { - TankFilters.mutate((draft) => { - draft.searching = false; - }); - - if (!input.current) return; - - const sanitized = input.current.value.trim(); - - TankFilters.mutate((draft) => { - draft.search = sanitized.length === 0 ? null : sanitized; - }); - }, 500), - [], - ); const handleChange = useCallback(() => { - if (!searching) { - TankFilters.mutate((draft) => { - draft.searching = true; - }); - } + if (!input.current) return; - performSearch(); - }, [searching]); + const sanitized = input.current.value.trim(); + + TankFilters.mutate((draft) => { + draft.search = sanitized.length === 0 ? null : sanitized; + }); + }, []); const handleKeyDown = useCallback( (event) => { - if (event.key !== "Enter" || !topResult || searching) return; + if (event.key !== "Enter" || !topResult) return; event.preventDefault(); @@ -75,7 +56,7 @@ export function TankSearchBar({ onChange={handleChange} onKeyDown={handleKeyDown} > - {searching ? : } + diff --git a/packages/website/src/stores/tankFilters.ts b/packages/website/src/stores/tankFilters.ts index 7d1c1dcdb..efa89f066 100644 --- a/packages/website/src/stores/tankFilters.ts +++ b/packages/website/src/stores/tankFilters.ts @@ -18,7 +18,6 @@ export interface TankFilters { classes: TankClass[]; types: TankType[]; search: string | null; - searching: boolean; gunType: CaseType[]; shells: [ShellType | null, ShellType | null, ShellType | null]; consumables: number[]; @@ -38,7 +37,6 @@ export const TankFilters = new Varuna({ classes: [], types: [], search: null, - searching: false, gunType: [], shells: [null, null, null], consumables: [],