feat: progress on tankopedia search

package.json

@@ -37,10 +37,10 @@
   "devDependencies": {
     "@types/lodash-es": "^4.17.12",
     "@types/bun": "latest",
-    "@types/node": "^22.5.4",
+    "@types/node": "^22.5.5",
     "esbuild": "^0.19.12",
     "prettier": "^3.3.3",
     "prisma": "^5.19.1",
-    "typescript": "^5.5.4"
+    "typescript": "^5.6.2"
   }
 }

packages/core/src/blitzkit/index.ts

@@ -24,7 +24,7 @@ export * from './gameDefinitions';
 // export * from './isExplosive';
 // export * from './linkBlitzAndDiscord';
 // export * from './mapDefinitions';
-// export * from './modelDefinitions';
+export * from './modelDefinitions';
 // export * from './normalizeBoundingBox';
 // export * from './parseBkni';
 // export * from './patientFetch';
@@ -40,7 +40,7 @@ export * from './superCompress';
 export * from './superDecompress';
 export * from './tankDefinitions';
 // export * from './tankIcon';
-// export * from './tankNames';
+export * from './tankNames';
 // export * from './unionBoundingBox';
 // export * from './uniqueGuns';
 // export * from './unwrapBlitzkitResponse';

packages/website-legacy/package.json

@@ -32,10 +32,10 @@
     "zustand": "^4.5.5"
   },
   "devDependencies": {
-    "@types/react-dom": "^18",
     "@types/lodash": "^4.17.7",
     "@types/three": "^0.160.0",
     "@vanilla-extract/next-plugin": "^2.4.5",
-    "@types/react": "^18.3.5"
+    "@types/react": "^18.3.5",
+    "@types/react-dom": "^18"
   }
 }

packages/website/package.json

@@ -26,6 +26,8 @@
     "react-promise-suspense": "^0.3.4"
   },
   "devDependencies": {
-    "@vanilla-extract/vite-plugin": "^4.0.15"
+    "@vanilla-extract/vite-plugin": "^4.0.15",
+    "@types/react": "^18.3.5",
+    "@types/react-dom": "^18"
   }
 }

packages/website/src/components/TankSearch/index.tsx

@@ -1,37 +1,29 @@
 import {
+  type TankDefinition,
   TANK_CLASSES,
-  TankDefinition,
   gameDefinitions,
   modelDefinitions,
-  normalizeBoundingBox,
-  resolveDpm,
   resolveNearPenetration,
   tankDefinitions,
   tankDefinitionsArray,
   tankNames,
-  unionBoundingBox,
 } from '@blitzkit/core';
-import { Callout, Flex, FlexProps, Link, Text } from '@radix-ui/themes';
+import { useStore } from '@nanostores/react';
-import { go } from 'fuzzysort';
+import { type FlexProps, Callout, Flex, Link } from '@radix-ui/themes';
 import { times } from 'lodash-es';
-import { Fragment, memo, use, useEffect, useMemo, useState } from 'react';
+import { memo, use, useEffect, useMemo, useState } from 'react';
-import { AdMidSectionResponsive } from '../../../../../components/AdMidSectionResponsive';
+import { Fragment } from 'react/jsx-runtime';
-import { ExperimentIcon } from '../../../../../components/ExperimentIcon';
+import { filterTank } from '../../core/blitzkit/filterTank';
-import { filterTank } from '../../../../../core/blitzkit/filterTank';
+import { resolveReload } from '../../core/blitzkit/resolveReload';
-import { resolveReload } from '../../../../../core/blitzkit/resolveReload';
+import { useAdExempt } from '../../hooks/useAdExempt';
-import { useAdExempt } from '../../../../../hooks/useAdExempt';
+import { $tankFilters } from '../../stores/tankFilters';
-import * as TankFilters from '../../../../../stores/tankFilters';
 import {
   SORT_NAMES,
   SORT_UNITS,
-} from '../../../../../stores/tankopediaPersistent/constants';
+} from '../../stores/tankopediaPersistent/constants';
-import * as TankopediaSort from '../../../../../stores/tankopediaSort';
+import { $tankopediaSort } from '../../stores/tankopediaSort';
-import { FilterControl } from '../FilterControl';
+import { AdMidSectionResponsive } from '../AdMidSectionResponsive';
-import { NoResults } from '../NoResults';
+import { ExperimentIcon } from '../ExperimentIcon';
-import { SearchBar } from '../SearchBar';
-import { SkeletonTankCard } from '../SkeletonTankCard';
-import { TankCard } from '../TankCard';
-import { TankCardWrapper } from '../TankCardWrapper';
 import { treeTypeOrder } from './constants';
 
 type TankSearchProps = Omit<FlexProps, 'onSelect'> & {
@@ -51,16 +43,16 @@ export const TankSearch = memo<TankSearchProps>(
     const awaitedTankDefinitions = use(tankDefinitions);
     const awaitedTanksDefinitionsArray = use(tankDefinitionsArray);
     const awaitedTankNames = use(tankNames);
-    const filters = TankFilters.use();
+    const tankFilters = useStore($tankFilters);
-    const sort = TankopediaSort.use();
+    const tankopediaSort = useStore($tankopediaSort);
     const tanksFiltered = useMemo(() => {
-      if (filters.search === undefined) {
+      if (tankFilters.search === undefined) {
         const filtered = awaitedTanksDefinitionsArray.filter((tank) =>
-          filterTank(filters, tank),
+          filterTank(tankFilters, tank),
         );
         let sorted: TankDefinition[];
 
-        switch (sort.by) {
+        switch (tankopediaSort.by) {
           case 'meta.none':
             sorted = filtered
               .sort((a, b) => b.tier - a.tier)
@@ -370,9 +362,11 @@ export const TankSearch = memo<TankSearchProps>(
             break;
         }
 
-        return sort.direction === 'ascending' ? sorted : sorted.reverse();
+        return tankopediaSort.direction === 'ascending'
+          ? sorted
+          : sorted.reverse();
       } else {
-        const searchedRaw = go(filters.search, awaitedTankNames, {
+        const searchedRaw = go(tankFilters.search, awaitedTankNames, {
           keys: ['searchableName', 'searchableNameDeburr', 'camouflages'],
         });
         const searchedTanks = searchedRaw.map(
@@ -380,19 +374,19 @@ export const TankSearch = memo<TankSearchProps>(
         );
         return searchedTanks;
       }
-    }, [filters, sort]);
+    }, [tankFilters, tankopediaSort]);
     const [loadedRows, setLoadedRows] = useState(DEFAULT_LOADED_CARDS);
     const tanks = tanksFiltered.slice(0, loadedRows);
 
     useEffect(() => {
       setLoadedRows(DEFAULT_LOADED_CARDS);
-    }, [filters, sort]);
+    }, [tankFilters, tankopediaSort]);
 
     return (
       <Flex direction="column" gap="4" flexGrow="1" {...props}>
         <SearchBar topResult={tanks?.[0]} onSelect={onSelect} />
 
-        {!filters.search && !filters.searching && (
+        {!tankFilters.search && !tankFilters.searching && (
           <FilterControl compact={compact} />
         )}
 
@@ -413,18 +407,18 @@ export const TankSearch = memo<TankSearchProps>(
             )}
           </Flex>
 
-          {sort.by !== 'meta.none' && (
+          {tankopediaSort.by !== 'meta.none' && (
             <Text color="gray">
-              Sorting by {SORT_NAMES[sort.by]}
+              Sorting by {SORT_NAMES[tankopediaSort.by]}
-              {SORT_UNITS[sort.by] === undefined
+              {SORT_UNITS[tankopediaSort.by] === undefined
                 ? ''
-                : ` (${SORT_UNITS[sort.by]})`}
+                : ` (${SORT_UNITS[tankopediaSort.by]})`}
-              , {sort.direction}
+              , {tankopediaSort.direction}
             </Text>
           )}
         </Flex>
 
-        {filters.testing === 'only' && (
+        {tankFilters.testing === 'only' && (
           <Flex justify="center" mt="4">
             <Callout.Root color="amber">
               <Callout.Icon>
@@ -438,7 +432,7 @@ export const TankSearch = memo<TankSearchProps>(
           </Flex>
         )}
 
-        {!filters.searching && (
+        {!tankFilters.searching && (
           <>
             {tanks.length > 0 && (
               <TankCardWrapper>
@@ -477,7 +471,7 @@ export const TankSearch = memo<TankSearchProps>(
           </>
         )}
 
-        {filters.searching && (
+        {tankFilters.searching && (
           <TankCardWrapper>
             {times(Math.round(10 + 10 * Math.random()), (index) => (
               <SkeletonTankCard key={index} />

packages/website/src/pages/tools/tankopedia/index.astro

@@ -1,7 +1,10 @@
 ---
+import { TankSearch } from '../../../components/TankSearch';
 import ToolLayout from '../../../layouts/ToolLayout.astro';
 ---
 
 <ToolLayout>
   <slot />
+
+  <TankSearch />
 </ToolLayout>

packages/website/src/stores/tankFilters.ts

@@ -1,6 +1,5 @@
-import { TankClass, Tier, TreeType } from '@blitzkit/core';
+import type { TankClass, Tier, TreeType } from '@blitzkit/core';
-import { create } from 'zustand';
+import { map } from 'nanostores';
-import { createContextualSafeStore } from '../core/zustand/createContextualSafeStore';
 
 export interface TankFilters {
   tiers: Tier[];
@@ -12,15 +11,12 @@ export interface TankFilters {
   searching: boolean;
 }
 
-export const { Provider, use, useMutation, useStore } =
+export const $tankFilters = map<TankFilters>({
-  createContextualSafeStore(() =>
+  tiers: [],
-    create<TankFilters>()(() => ({
+  nations: [],
-      tiers: [],
+  classes: [],
-      nations: [],
+  types: [],
-      classes: [],
+  testing: 'include',
-      types: [],
+  search: undefined,
-      testing: 'include',
+  searching: false,
-      search: undefined,
+});
-      searching: false,
-    })),
-  );

packages/website/src/stores/tankopediaSort.ts

@@ -1,6 +1,5 @@
-import { create } from 'zustand';
+import { map } from 'nanostores';
-import { createContextualSafeStore } from '../core/zustand/createContextualSafeStore';
+import type {
-import {
   TankopediaSortBy,
   TankopediaSortDirection,
 } from './tankopediaPersistent';
@@ -10,10 +9,7 @@ export interface TankopediaSort {
   direction: TankopediaSortDirection;
 }
 
-export const { Provider, use, useMutation, useStore } =
+export const $tankopediaSort = map<TankopediaSort>({
-  createContextualSafeStore(() =>
+  by: 'meta.none',
-    create<TankopediaSort>()(() => ({
+  direction: 'descending',
-      by: 'meta.none',
+});
-      direction: 'descending',
-    })),
-  );