Revert "feat: progress on tankopedia search"

This reverts commit eebc33581c.

packages/core/src/blitzkit/index.ts

@@ -1,5 +1,5 @@
 export * from './assertSecret';
-export * from './asset';
+// export * from './asset';
 // export * from './availableProvisions';
 // export * from './averageDefinitions';
 // export * from './camouflageDefinitions';
@@ -25,13 +25,13 @@ export * from './gameDefinitions';
 // export * from './linkBlitzAndDiscord';
 // export * from './mapDefinitions';
 export * from './modelDefinitions';
-export * from './normalizeBoundingBox';
+// export * from './normalizeBoundingBox';
 // export * from './parseBkni';
 // export * from './patientFetch';
 // export * from './patientFetchJSON';
 // export * from './progressiveStat';
 // export * from './provisionDefinitions';
-export * from './resolveDpm';
+// export * from './resolveDpm';
 // export * from './resolvePenetrationCoefficient';
 // export * from './reviews';
 // export * from './skillDefinitions';
@@ -39,9 +39,9 @@ export * from './resolveDpm';
 export * from './superCompress';
 export * from './superDecompress';
 export * from './tankDefinitions';
-export * from './tankIcon';
+// export * from './tankIcon';
 export * from './tankNames';
-export * from './unionBoundingBox';
+// export * from './unionBoundingBox';
 // export * from './uniqueGuns';
 // export * from './unwrapBlitzkitResponse';
 // export * from './votes';

packages/core/src/blitzkit/tankNames.ts

@@ -1,6 +1,5 @@
 import { deburr } from 'lodash-es';
-import { camouflageDefinitions } from './camouflageDefinitions';
-import { tankDefinitionsArray } from './tankDefinitions';
+import { camouflageDefinitions, tankDefinitionsArray } from '.';
 
 export const tankNames = Promise.all([
   tankDefinitionsArray,

packages/website-legacy/src/app/tools/performance/components/Controls.tsx

@@ -1,4 +1,4 @@
-import { FilterControl } from '../../../../../../website/src/components/TankSearch/components/FilterControl';
+import { FilterControl } from '../../tankopedia/components/FilterControl';
 import { PlayerCountControl } from './PlayerCountControl';
 
 export function Controls() {

packages/website-legacy/src/app/tools/tankopedia/[id]/components/Lighting.tsx

@@ -1,4 +1,7 @@
 import { Environment } from '@react-three/drei';
+import { useModel } from '../../../../../hooks/useModel';
+import * as Duel from '../../../../../stores/duel';
+import * as TankopediaPersistent from '../../../../../stores/tankopediaPersistent';
 
 export const ENVIRONMENTS = [
   'lobby',

packages/website-legacy/src/app/tools/tankopedia/[id]/components/Model/TankSandbox.tsx

@@ -24,7 +24,7 @@ import * as TankopediaEphemeral from '../../../../../../stores/tankopediaEphemer
 import * as TankopediaPersistent from '../../../../../../stores/tankopediaPersistent';
 import { TankopediaDisplay } from '../../../../../../stores/tankopediaPersistent/constants';
 import { Controls } from '../Control';
-import { Lighting } from '../../../../../../../../website/src/components/Sandbox/components/Lighting';
+import { Lighting } from '../Lighting';
 import { SceneProps } from '../SceneProps';
 import { AutoClear } from './AutoClear';
 import { ModelLoader } from './components/ModelLoader';

packages/website-legacy/src/app/tools/tankopedia/[id]/components/Model/components/Options/index.tsx

@@ -31,7 +31,7 @@ import * as TankopediaEphemeral from '../../../../../../../../stores/tankopediaE
 import * as TankopediaPersistent from '../../../../../../../../stores/tankopediaPersistent';
 import { TankopediaDisplay } from '../../../../../../../../stores/tankopediaPersistent/constants';
 import { TankSearch } from '../../../../../components/TankSearch';
-import { ENVIRONMENTS } from '../../../../../../../../../../website/src/components/Sandbox/components/Lighting';
+import { ENVIRONMENTS } from '../../../Lighting';
 import { QuickInputs } from '../../../QuickInputs';
 import { Thicknesses } from '../../../Thicknesses';
 import { DynamicArmorSwitcher } from './components/DynamicArmorSwitcher';

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

@@ -2,21 +2,20 @@ import {
   asset,
   gameDefinitions,
   TANK_CLASSES,
+  Tier,
   TIER_ROMAN_NUMERALS,
-  type Tier,
 } from '@blitzkit/core';
 import strings from '@blitzkit/core/lang/en-US.json';
-import { useStore } from '@nanostores/react';
 import { ReloadIcon } from '@radix-ui/react-icons';
 import { Box, Flex, IconButton, Text, Tooltip } from '@radix-ui/themes';
 import { times } from 'lodash-es';
 import { use } from 'react';
-import { $tankFilters, initialTankFilters } from '../../../stores/tankFilters';
-import { classIcons } from '../../ClassIcon';
-import { ExperimentIcon } from '../../ExperimentIcon';
-import { ResearchedIcon } from '../../ResearchedIcon';
-import { ScienceIcon } from '../../ScienceIcon';
-import { ScienceOffIcon } from '../../ScienceOffIcon';
+import { classIcons } from '../../../../components/ClassIcon';
+import { ExperimentIcon } from '../../../../components/ExperimentIcon';
+import { ResearchedIcon } from '../../../../components/ResearchedIcon';
+import { ScienceIcon } from '../../../../components/ScienceIcon';
+import { ScienceOffIcon } from '../../../../components/ScienceOffIcon';
+import * as TankFilters from '../../../../stores/tankFilters';
 
 interface FilterControlProps {
   compact?: boolean;
@@ -24,7 +23,9 @@ interface FilterControlProps {
 
 export function FilterControl({ compact }: FilterControlProps) {
   const awaitedGameDefinitions = use(gameDefinitions);
-  const tankFilters = useStore($tankFilters);
+  const filters = TankFilters.use();
+  const mutateTankFilters = TankFilters.useMutation();
+  const tankFiltersStore = TankFilters.useStore();
 
   return (
     <Flex height="fit-content" gap="2" align="start" justify="center">
@@ -36,7 +37,7 @@ export function FilterControl({ compact }: FilterControlProps) {
         <Flex direction={compact ? 'column' : { sm: 'row', initial: 'column' }}>
           {times(5, (index) => {
             const tier = (index + 1) as Tier;
-            const selected = tankFilters.tiers?.includes(tier);
+            const selected = filters.tiers?.includes(tier);
 
             return (
               <Tooltip key={tier} content={`Tier ${tier}`}>
@@ -46,19 +47,15 @@ export function FilterControl({ compact }: FilterControlProps) {
                   radius="none"
                   color={selected ? undefined : 'gray'}
                   highContrast
-                  onClick={() => {
-                    if (tankFilters.tiers?.includes(tier)) {
-                      $tankFilters.setKey(
-                        'tiers',
-                        tankFilters.tiers.filter((t) => t !== tier),
-                      );
-                    } else {
-                      $tankFilters.setKey('tiers', [
-                        ...(tankFilters.tiers ?? []),
-                        tier,
-                      ]);
-                    }
-                  }}
+                  onClick={() =>
+                    mutateTankFilters((draft) => {
+                      if (draft.tiers?.includes(tier)) {
+                        draft.tiers = draft.tiers?.filter((t) => t !== tier);
+                      } else {
+                        draft.tiers = [...(draft.tiers ?? []), tier];
+                      }
+                    })
+                  }
                 >
                   <Text size="2">{TIER_ROMAN_NUMERALS[tier]}</Text>
                 </IconButton>
@@ -69,7 +66,7 @@ export function FilterControl({ compact }: FilterControlProps) {
         <Flex direction={compact ? 'column' : { sm: 'row', initial: 'column' }}>
           {times(5, (index) => {
             const tier = (index + 6) as Tier;
-            const selected = tankFilters.tiers?.includes(tier);
+            const selected = filters.tiers?.includes(tier);
 
             return (
               <Tooltip key={tier} content={`Tier ${tier}`}>
@@ -79,19 +76,15 @@ export function FilterControl({ compact }: FilterControlProps) {
                   radius="none"
                   color={selected ? undefined : 'gray'}
                   highContrast
-                  onClick={() => {
-                    if (tankFilters.tiers?.includes(tier)) {
-                      $tankFilters.setKey(
-                        'tiers',
-                        tankFilters.tiers.filter((t) => t !== tier),
-                      );
-                    } else {
-                      $tankFilters.setKey('tiers', [
-                        ...(tankFilters.tiers ?? []),
-                        tier,
-                      ]);
-                    }
-                  }}
+                  onClick={() =>
+                    mutateTankFilters((draft) => {
+                      if (draft.tiers?.includes(tier)) {
+                        draft.tiers = draft.tiers?.filter((t) => t !== tier);
+                      } else {
+                        draft.tiers = [...(draft.tiers ?? []), tier];
+                      }
+                    })
+                  }
                 >
                   <Text size="2">{TIER_ROMAN_NUMERALS[tier]}</Text>
                 </IconButton>
@@ -110,7 +103,7 @@ export function FilterControl({ compact }: FilterControlProps) {
           {awaitedGameDefinitions.nations
             .slice(0, Math.ceil(awaitedGameDefinitions.nations.length / 2))
             .map((nation) => {
-              const selected = tankFilters.nations?.includes(nation);
+              const selected = filters.nations?.includes(nation);
 
               return (
                 <Tooltip
@@ -126,19 +119,17 @@ export function FilterControl({ compact }: FilterControlProps) {
                     color={selected ? undefined : 'gray'}
                     highContrast
                     radius="none"
-                    onClick={() => {
-                      if (tankFilters.nations?.includes(nation)) {
-                        $tankFilters.setKey(
-                          'nations',
-                          tankFilters.nations.filter((n) => n !== nation),
-                        );
-                      } else {
-                        $tankFilters.setKey('nations', [
-                          ...(tankFilters.nations ?? []),
-                          nation,
-                        ]);
-                      }
-                    }}
+                    onClick={() =>
+                      mutateTankFilters((draft) => {
+                        if (draft.nations?.includes(nation)) {
+                          draft.nations = draft.nations?.filter(
+                            (n) => n !== nation,
+                          );
+                        } else {
+                          draft.nations = [...(draft.nations ?? []), nation];
+                        }
+                      })
+                    }
                   >
                     <img
                       style={{ width: '1em', height: '1em' }}
@@ -153,7 +144,7 @@ export function FilterControl({ compact }: FilterControlProps) {
           {awaitedGameDefinitions.nations
             .slice(Math.ceil(awaitedGameDefinitions.nations.length / 2))
             .map((nation) => {
-              const selected = tankFilters.nations?.includes(nation);
+              const selected = filters.nations?.includes(nation);
 
               return (
                 <Tooltip
@@ -171,19 +162,17 @@ export function FilterControl({ compact }: FilterControlProps) {
                     color={selected ? undefined : 'gray'}
                     highContrast
                     radius="none"
-                    onClick={() => {
-                      if (tankFilters.nations?.includes(nation)) {
-                        $tankFilters.setKey(
-                          'nations',
-                          tankFilters.nations.filter((n) => n !== nation),
-                        );
-                      } else {
-                        $tankFilters.setKey('nations', [
-                          ...(tankFilters.nations ?? []),
-                          nation,
-                        ]);
-                      }
-                    }}
+                    onClick={() =>
+                      mutateTankFilters((draft) => {
+                        if (draft.nations?.includes(nation)) {
+                          draft.nations = draft.nations?.filter(
+                            (n) => n !== nation,
+                          );
+                        } else {
+                          draft.nations = [...(draft.nations ?? []), nation];
+                        }
+                      })
+                    }
                   >
                     <img
                       style={{ width: '1em', height: '1em' }}
@@ -203,7 +192,7 @@ export function FilterControl({ compact }: FilterControlProps) {
       >
         {TANK_CLASSES.map((tankClass) => {
           const Icon = classIcons[tankClass];
-          const selected = tankFilters.classes?.includes(tankClass);
+          const selected = filters.classes?.includes(tankClass);
 
           return (
             <Tooltip
@@ -215,19 +204,17 @@ export function FilterControl({ compact }: FilterControlProps) {
                 radius="none"
                 color={selected ? undefined : 'gray'}
                 highContrast
-                onClick={() => {
-                  if (tankFilters.classes?.includes(tankClass)) {
-                    $tankFilters.setKey(
-                      'classes',
-                      tankFilters.classes.filter((c) => c !== tankClass),
-                    );
-                  } else {
-                    $tankFilters.setKey('classes', [
-                      ...(tankFilters.classes ?? []),
-                      tankClass,
-                    ]);
-                  }
-                }}
+                onClick={() =>
+                  mutateTankFilters((draft) => {
+                    if (draft.classes?.includes(tankClass)) {
+                      draft.classes = draft.classes?.filter(
+                        (c) => c !== tankClass,
+                      );
+                    } else {
+                      draft.classes = [...(draft.classes ?? []), tankClass];
+                    }
+                  })
+                }
               >
                 <Icon style={{ width: '1em', height: '1em' }} />
               </IconButton>
@@ -243,55 +230,43 @@ export function FilterControl({ compact }: FilterControlProps) {
       >
         <Tooltip content="Researchable">
           <IconButton
-            variant={
-              tankFilters.types?.includes('researchable') ? 'solid' : 'soft'
-            }
+            variant={filters.types?.includes('researchable') ? 'solid' : 'soft'}
             radius="none"
-            color={
-              tankFilters.types?.includes('researchable') ? undefined : 'gray'
-            }
+            color={filters.types?.includes('researchable') ? undefined : 'gray'}
             highContrast
-            onClick={() => {
-              if (tankFilters.types?.includes('researchable')) {
-                $tankFilters.setKey(
-                  'types',
-                  tankFilters.types.filter((t) => t !== 'researchable'),
-                );
-              } else {
-                $tankFilters.setKey('types', [
-                  ...(tankFilters.types ?? []),
-                  'researchable',
-                ]);
-              }
-            }}
+            onClick={() =>
+              mutateTankFilters((draft) => {
+                if (draft.types?.includes('researchable')) {
+                  draft.types = draft.types?.filter(
+                    (t) => t !== 'researchable',
+                  );
+                } else {
+                  draft.types = [...(draft.types ?? []), 'researchable'];
+                }
+              })
+            }
           >
             <ResearchedIcon style={{ width: '1em', height: '1em' }} />
           </IconButton>
         </Tooltip>
         <Tooltip content="Premium">
           <IconButton
-            variant={tankFilters.types?.includes('premium') ? 'solid' : 'soft'}
+            variant={filters.types?.includes('premium') ? 'solid' : 'soft'}
             radius="none"
-            color={tankFilters.types?.includes('premium') ? 'amber' : 'gray'}
+            color={filters.types?.includes('premium') ? 'amber' : 'gray'}
             highContrast
-            onClick={() => {
-              if (tankFilters.types?.includes('premium')) {
-                $tankFilters.setKey(
-                  'types',
-                  tankFilters.types.filter((t) => t !== 'premium'),
-                );
-              } else {
-                $tankFilters.setKey('types', [
-                  ...(tankFilters.types ?? []),
-                  'premium',
-                ]);
-              }
-            }}
+            onClick={() =>
+              mutateTankFilters((draft) => {
+                if (draft.types?.includes('premium')) {
+                  draft.types = draft.types?.filter((t) => t !== 'premium');
+                } else {
+                  draft.types = [...(draft.types ?? []), 'premium'];
+                }
+              })
+            }
           >
             <Text
-              color={
-                tankFilters.types?.includes('premium') ? undefined : 'amber'
-              }
+              color={filters.types?.includes('premium') ? undefined : 'amber'}
               style={{ display: 'flex', justifyContent: 'center' }}
             >
               <ResearchedIcon style={{ width: '1em', height: '1em' }} />
@@ -300,30 +275,22 @@ export function FilterControl({ compact }: FilterControlProps) {
         </Tooltip>
         <Tooltip content="Collector">
           <IconButton
-            variant={
-              tankFilters.types?.includes('collector') ? 'solid' : 'soft'
-            }
+            variant={filters.types?.includes('collector') ? 'solid' : 'soft'}
             radius="none"
-            color={tankFilters.types?.includes('collector') ? 'blue' : 'gray'}
+            color={filters.types?.includes('collector') ? 'blue' : 'gray'}
             highContrast
-            onClick={() => {
-              if (tankFilters.types?.includes('collector')) {
-                $tankFilters.setKey(
-                  'types',
-                  tankFilters.types.filter((t) => t !== 'collector'),
-                );
-              } else {
-                $tankFilters.setKey('types', [
-                  ...(tankFilters.types ?? []),
-                  'collector',
-                ]);
-              }
-            }}
+            onClick={() =>
+              mutateTankFilters((draft) => {
+                if (draft.types?.includes('collector')) {
+                  draft.types = draft.types?.filter((t) => t !== 'collector');
+                } else {
+                  draft.types = [...(draft.types ?? []), 'collector'];
+                }
+              })
+            }
           >
             <Text
-              color={
-                tankFilters.types?.includes('collector') ? undefined : 'blue'
-              }
+              color={filters.types?.includes('collector') ? undefined : 'blue'}
               style={{ display: 'flex', justifyContent: 'center' }}
             >
               <ResearchedIcon style={{ width: '1em', height: '1em' }} />
@@ -339,13 +306,15 @@ export function FilterControl({ compact }: FilterControlProps) {
       >
         <Tooltip content="Include test tank">
           <IconButton
-            variant={tankFilters.testing === 'include' ? 'solid' : 'soft'}
+            variant={filters.testing === 'include' ? 'solid' : 'soft'}
             radius="none"
-            color={tankFilters.testing === 'include' ? undefined : 'gray'}
+            color={filters.testing === 'include' ? undefined : 'gray'}
             highContrast
-            onClick={() => {
-              $tankFilters.setKey('testing', 'include');
-            }}
+            onClick={() =>
+              mutateTankFilters((draft) => {
+                draft.testing = 'include';
+              })
+            }
           >
             <ExperimentIcon
               style={{ width: '1em', height: '1em', color: 'currentColor' }}
@@ -354,13 +323,15 @@ export function FilterControl({ compact }: FilterControlProps) {
         </Tooltip>
         <Tooltip content="Exclude test tank">
           <IconButton
-            variant={tankFilters.testing === 'exclude' ? 'solid' : 'soft'}
+            variant={filters.testing === 'exclude' ? 'solid' : 'soft'}
             radius="none"
-            color={tankFilters.testing === 'exclude' ? undefined : 'gray'}
+            color={filters.testing === 'exclude' ? undefined : 'gray'}
             highContrast
-            onClick={() => {
-              $tankFilters.setKey('testing', 'exclude');
-            }}
+            onClick={() =>
+              mutateTankFilters((draft) => {
+                draft.testing = 'exclude';
+              })
+            }
           >
             <ScienceOffIcon
               style={{ width: '1em', height: '1em', color: 'currentColor' }}
@@ -369,13 +340,15 @@ export function FilterControl({ compact }: FilterControlProps) {
         </Tooltip>
         <Tooltip content="Only test tank">
           <IconButton
-            variant={tankFilters.testing === 'only' ? 'solid' : 'soft'}
+            variant={filters.testing === 'only' ? 'solid' : 'soft'}
             radius="none"
-            color={tankFilters.testing === 'only' ? undefined : 'gray'}
+            color={filters.testing === 'only' ? undefined : 'gray'}
             highContrast
-            onClick={() => {
-              $tankFilters.setKey('testing', 'only');
-            }}
+            onClick={() =>
+              mutateTankFilters((draft) => {
+                draft.testing = 'only';
+              })
+            }
           >
             <ScienceIcon
               style={{ width: '1em', height: '1em', color: 'currentColor' }}
@@ -388,7 +361,7 @@ export function FilterControl({ compact }: FilterControlProps) {
         <IconButton
           color="red"
           onClick={() => {
-            $tankFilters.set(initialTankFilters);
+            tankFiltersStore.setState(tankFiltersStore.getInitialState(), true);
           }}
         >
           <ReloadIcon />

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

@@ -1,11 +1,12 @@
 import { Flex, Link, Text } from '@radix-ui/themes';
-import { $tankFilters, initialTankFilters } from '../../../stores/tankFilters';
+import * as TankFilters from '../../../../stores/tankFilters';
 
 interface NoResultsProps {
   type?: 'filters' | 'search';
 }
 
 export function NoResults({ type = 'filters' }: NoResultsProps) {
+  const tankFiltersStore = TankFilters.useStore();
 
   return (
     <Flex flexGrow="1" align="center" justify="center">
@@ -16,7 +17,7 @@ export function NoResults({ type = 'filters' }: NoResultsProps) {
           underline="always"
           color="red"
           onClick={() =>
-            $tankFilters.set(initialTankFilters)
+            tankFiltersStore.setState(tankFiltersStore.getInitialState(), true)
           }
         >
           {type === 'filters' ? 'Try clearing filters' : 'Try searching again'}

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

@@ -1,13 +1,12 @@
-import type { TankDefinition } from '@blitzkit/core';
-import { useStore } from '@nanostores/react';
+import { TankDefinition } from '@blitzkit/core';
 import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
 import { Flex, Spinner, TextField } from '@radix-ui/themes';
 import { debounce } from 'lodash-es';
 import { useRouter } from 'next/navigation';
-import { useCallback, useRef, type KeyboardEventHandler } from 'react';
-import { QuickLink } from '../../../../../website-legacy/src/app/tools/tankopedia/components/QuickLink';
-import { Sort } from '../../../../../website-legacy/src/app/tools/tankopedia/components/Sort';
-import { $tankFilters } from '../../../stores/tankFilters';
+import { KeyboardEventHandler, useCallback, useRef } from 'react';
+import * as TankFilters from '../../../../stores/tankFilters';
+import { QuickLink } from './QuickLink';
+import { Sort } from './Sort';
 
 interface SearchBarProps {
   topResult?: TankDefinition;
@@ -15,34 +14,35 @@ interface SearchBarProps {
 }
 
 export function SearchBar({ topResult, onSelect }: SearchBarProps) {
-  const tankFilters = useStore($tankFilters);
+  const tankFiltersStore = TankFilters.useStore();
+  const lastSearch = tankFiltersStore.getState().search;
   const router = useRouter();
   const input = useRef<HTMLInputElement>(null);
+  const searching = TankFilters.use((state) => state.searching);
   const performSearch = useCallback(
     debounce(() => {
-      $tankFilters.setKey('searching', false);
+      tankFiltersStore.setState({ searching: false });
 
       if (!input.current) return;
 
       const sanitized = input.current.value.trim();
 
-      $tankFilters.setKey(
-        'search',
-        sanitized.length === 0 ? undefined : sanitized,
-      );
+      tankFiltersStore.setState({
+        search: sanitized.length === 0 ? undefined : sanitized,
+      });
     }, 500),
     [],
   );
   const handleChange = useCallback(() => {
-    if (!tankFilters.searching) {
-      $tankFilters.setKey('searching', true);
+    if (!tankFiltersStore.getState().searching) {
+      tankFiltersStore.setState({ searching: true });
     }
 
     performSearch();
-  }, [tankFilters]);
+  }, []);
   const handleKeyDown = useCallback<KeyboardEventHandler>(
     (event) => {
-      if (event.key !== 'Enter' || !topResult || tankFilters.searching) return;
+      if (event.key !== 'Enter' || !topResult || searching) return;
 
       event.preventDefault();
 
@@ -59,7 +59,7 @@ export function SearchBar({ topResult, onSelect }: SearchBarProps) {
     <Flex justify="center" mt="4">
       <Flex gap="2" flexGrow="1">
         <TextField.Root
-          defaultValue={tankFilters.search}
+          defaultValue={lastSearch}
           style={{ flex: 1 }}
           ref={input}
           placeholder="Search tanks..."
@@ -67,7 +67,7 @@ export function SearchBar({ topResult, onSelect }: SearchBarProps) {
           onKeyDown={handleKeyDown}
         >
           <TextField.Slot>
-            {tankFilters.searching ? <Spinner /> : <MagnifyingGlassIcon />}
+            {searching ? <Spinner /> : <MagnifyingGlassIcon />}
           </TextField.Slot>
 
           <QuickLink topResult={topResult} />

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

@@ -1,6 +1,6 @@
 import { Flex, Skeleton } from '@radix-ui/themes';
 import { memo, useRef } from 'react';
-import { useIntersection } from '../../../hooks/useIntersection';
+import { useIntersection } from '../../../../hooks/useIntersection';
 
 interface SkeletonTankCardProps {
   onIntersection?: () => void;

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

@@ -4,18 +4,17 @@ import {
   normalizeBoundingBox,
   resolveDpm,
   resolveNearPenetration,
+  TankDefinition,
   tankIcon,
   unionBoundingBox,
-  type TankDefinition,
 } from '@blitzkit/core';
-import { useStore } from '@nanostores/react';
 import { Flex, Text } from '@radix-ui/themes';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import Link from 'next/link';
 import { use, useMemo } from 'react';
-import { resolveReload } from '../../../core/blitzkit/resolveReload';
-import { $tankopediaSort } from '../../../stores/tankopediaSort';
-import { classIcons } from '../../ClassIcon';
+import { classIcons } from '../../../../components/ClassIcon';
+import { resolveReload } from '../../../../core/blitzkit/resolveReload';
+import * as TankopediaSort from '../../../../stores/tankopediaSort';
 import * as styles from './TankCard.css';
 
 interface TankCardProps {
@@ -26,9 +25,9 @@ interface TankCardProps {
 export function TankCard({ tank, onSelect }: TankCardProps) {
   const awaitedModelDefinitions = use(modelDefinitions);
   const Icon = classIcons[tank.class];
-  const tankopediaSortBy = useStore($tankopediaSort).by;
+  const sortBy = TankopediaSort.use((state) => state.by);
   const discriminator = useMemo(() => {
-    if (tankopediaSortBy.startsWith('meta')) return undefined;
+    if (sortBy.startsWith('meta')) return undefined;
 
     const turret = tank.turrets.at(-1)!;
     const gun = turret.guns.at(-1)!;
@@ -40,7 +39,7 @@ export function TankCard({ tank, onSelect }: TankCardProps) {
     const turretModelDefinition = tankModelDefinition.turrets[turret.id];
     const gunModelDefinition = turretModelDefinition.guns[gun.id];
 
-    switch (tankopediaSortBy) {
+    switch (sortBy) {
       case 'fire.aimTime':
         return gun.aimTime.toFixed(2);
       case 'fire.caliber':
@@ -132,7 +131,7 @@ export function TankCard({ tank, onSelect }: TankCardProps) {
           ),
         ).toFixed(0);
     }
-  }, [tankopediaSortBy]);
+  }, [sortBy]);
 
   return (
     <Text
@@ -142,8 +141,8 @@ export function TankCard({ tank, onSelect }: TankCardProps) {
         tank.treeType === 'collector'
           ? 'blue'
           : tank.treeType === 'premium'
-            ? 'amber'
-            : 'gray'
+          ? 'amber'
+          : 'gray'
       }
       highContrast={tank.treeType === 'researchable'}
       onClick={onSelect ? () => onSelect(tank) : undefined}

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

@@ -1,4 +1,4 @@
-import { Grid, type GridProps } from '@radix-ui/themes';
+import { Grid, GridProps } from '@radix-ui/themes';
 
 export function TankCardWrapper(props: GridProps) {
   return (

packages/website-legacy/tsconfig.json

@@ -1,7 +1,11 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "plugins": [{ "name": "next" }]
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
   },
-  "include": ["src/**/*", ".next/types/**/*.ts", "../website/src/components/Sandbox/components/Lighting.tsx"]
+  "include": ["src/**/*", ".next/types/**/*.ts"]
 }

packages/website/package.json

@@ -12,7 +12,6 @@
     "@astrojs/check": "^0.9.3",
     "@astrojs/react": "^3.6.2",
     "@blitzkit/core": "workspace:*",
-    "fuzzysort": "^2.0.4",
     "@nanostores/persistent": "^0.10.2",
     "@nanostores/react": "^0.7.3",
     "@radix-ui/react-icons": "^1.3.0",

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

@@ -3,19 +3,15 @@ import {
   TANK_CLASSES,
   gameDefinitions,
   modelDefinitions,
-  normalizeBoundingBox,
-  resolveDpm,
   resolveNearPenetration,
   tankDefinitions,
   tankDefinitionsArray,
   tankNames,
-  unionBoundingBox,
 } from '@blitzkit/core';
 import { useStore } from '@nanostores/react';
-import { type FlexProps, Callout, Flex, Link, Text } from '@radix-ui/themes';
-import fuzzysort from 'fuzzysort';
+import { type FlexProps, Callout, Flex, Link } from '@radix-ui/themes';
 import { times } from 'lodash-es';
-import React, { memo, useEffect, useMemo, useState } from 'react';
+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';
@@ -28,12 +24,6 @@ import {
 import { $tankopediaSort } from '../../stores/tankopediaSort';
 import { AdMidSectionResponsive } from '../AdMidSectionResponsive';
 import { ExperimentIcon } from '../ExperimentIcon';
-import { FilterControl } from './components/FilterControl';
-import { NoResults } from './components/NoResults';
-import { SearchBar } from './components/SearchBar';
-import { SkeletonTankCard } from './components/SkeletonTankCard';
-import { TankCard } from './components/TankCard';
-import { TankCardWrapper } from './components/TankCardWrapper';
 import { treeTypeOrder } from './constants';
 
 type TankSearchProps = Omit<FlexProps, 'onSelect'> & {
@@ -48,11 +38,11 @@ const DEFAULT_LOADED_CARDS = 75;
 export const TankSearch = memo<TankSearchProps>(
   ({ compact, onSelect, onSelectAll, ...props }) => {
     const exempt = useAdExempt();
-    const awaitedGameDefinitions = React.use(gameDefinitions);
-    const awaitedModelDefinitions = React.use(modelDefinitions);
-    const awaitedTankDefinitions = React.use(tankDefinitions);
-    const awaitedTanksDefinitionsArray = React.use(tankDefinitionsArray);
-    const awaitedTankNames = React.use(tankNames);
+    const awaitedGameDefinitions = use(gameDefinitions);
+    const awaitedModelDefinitions = use(modelDefinitions);
+    const awaitedTankDefinitions = use(tankDefinitions);
+    const awaitedTanksDefinitionsArray = use(tankDefinitionsArray);
+    const awaitedTankNames = use(tankNames);
     const tankFilters = useStore($tankFilters);
     const tankopediaSort = useStore($tankopediaSort);
     const tanksFiltered = useMemo(() => {
@@ -376,7 +366,7 @@ export const TankSearch = memo<TankSearchProps>(
           ? sorted
           : sorted.reverse();
       } else {
-        const searchedRaw = fuzzysort.go(tankFilters.search, awaitedTankNames, {
+        const searchedRaw = go(tankFilters.search, awaitedTankNames, {
           keys: ['searchableName', 'searchableNameDeburr', 'camouflages'],
         });
         const searchedTanks = searchedRaw.map(

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

@@ -4,5 +4,7 @@ import ToolLayout from '../../../layouts/ToolLayout.astro';
 ---
 
 <ToolLayout>
+  <slot />
+
   <TankSearch />
 </ToolLayout>

packages/website/src/stores/tankFilters.ts

@@ -11,7 +11,7 @@ export interface TankFilters {
   searching: boolean;
 }
 
-export const initialTankFilters : TankFilters = {
+export const $tankFilters = map<TankFilters>({
   tiers: [],
   nations: [],
   classes: [],
@@ -19,6 +19,4 @@ export const initialTankFilters : TankFilters = {
   testing: 'include',
   search: undefined,
   searching: false,
-}
-
-export const $tankFilters = map<TankFilters>(initialTankFilters);
+});

packages/website/src/stores/tankopediaPersistent/index.ts

@@ -1,5 +1,9 @@
-import type { TankClass, Tier, TreeType } from '@blitzkit/core';
-import type { ENVIRONMENTS } from '../../components/Sandbox/components/Lighting';
+import { TankClass, Tier, TreeType } from '@blitzkit/core';
+import lodash from 'lodash-es';
+import { create } from 'zustand';
+import { persist, subscribeWithSelector } from 'zustand/middleware';
+import { ENVIRONMENTS } from '../../app/tools/tankopedia/[id]/components/Lighting';
+import { createContextualSafeStore } from '../../core/zustand/createContextualSafeStore';
 import { SORT_NAMES, TankopediaDisplay } from './constants';
 
 export type TankopediaSortBy = keyof typeof SORT_NAMES;
@@ -34,39 +38,39 @@ export interface TankopediaPersistent {
   display: TankopediaDisplay;
 }
 
-// export const { Provider, use, useMutation, useStore } =
-//   createContextualSafeStore(() =>
-//     create<TankopediaPersistent>()(
-//       persist(
-//         subscribeWithSelector<TankopediaPersistent>(() => ({
-//           model: {
-//             visual: {
-//               showSpacedArmor: true,
-//               showExternalModules: true,
-//               showPrimaryArmor: true,
-//               wireframe: false,
-//               opaque: false,
-//               environment: ENVIRONMENTS[0],
-//               showGrid: true,
-//               greenPenetration: false,
-//               showEnvironment: false,
-//             },
-//           },
-//           sort: {
-//             by: 'meta.none',
-//             direction: 'descending',
-//           },
-//           filters: {
-//             tiers: [],
-//             types: [],
-//             treeTypes: [],
-//             nations: [],
-//             test: 'include',
-//             page: 0,
-//           },
-//           display: TankopediaDisplay.Model,
-//         })),
-//         { name: 'tankopedia', merge: (a, b) => lodash.merge(b, a) },
-//       ),
-//     ),
-//   );
+export const { Provider, use, useMutation, useStore } =
+  createContextualSafeStore(() =>
+    create<TankopediaPersistent>()(
+      persist(
+        subscribeWithSelector<TankopediaPersistent>(() => ({
+          model: {
+            visual: {
+              showSpacedArmor: true,
+              showExternalModules: true,
+              showPrimaryArmor: true,
+              wireframe: false,
+              opaque: false,
+              environment: ENVIRONMENTS[0],
+              showGrid: true,
+              greenPenetration: false,
+              showEnvironment: false,
+            },
+          },
+          sort: {
+            by: 'meta.none',
+            direction: 'descending',
+          },
+          filters: {
+            tiers: [],
+            types: [],
+            treeTypes: [],
+            nations: [],
+            test: 'include',
+            page: 0,
+          },
+          display: TankopediaDisplay.Model,
+        })),
+        { name: 'tankopedia', merge: (a, b) => lodash.merge(b, a) },
+      ),
+    ),
+  );