Revert "feat: progress on tankopedia search"

This reverts commit c873c32d09.

package.json

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

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-dom": "^18"
+    "@types/react": "^18.3.5"
   }
 }

packages/website-legacy/src/app/tools/tankopedia/components/TankSearch/index.tsx

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

packages/website/package.json

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

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

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

packages/website/src/stores/tankFilters.ts

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

packages/website/src/stores/tankopediaSort.ts

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