feat: progress on tankopedia search

packages/website/package.json

@@ -12,6 +12,7 @@
     "@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/Sandbox/components/Lighting.tsx

@@ -0,0 +1,39 @@
+import { Environment } from '@react-three/drei';
+
+export const ENVIRONMENTS = [
+  'lobby',
+  'apartment',
+  'warehouse',
+  'dawn',
+  'sunset',
+] as const;
+
+export function Lighting() {
+  const protagonist = Duel.use((state) => state.protagonist);
+  const { hasPbr } = useModel(protagonist.tank.id);
+  const showEnvironment = TankopediaPersistent.use(
+    (state) => state.model.visual.showEnvironment,
+  );
+  const environment = TankopediaPersistent.use(
+    (state) => state.model.visual.environment,
+  );
+
+  return (
+    <>
+      <Environment preset={environment} background={showEnvironment} blur={0} />
+
+      <directionalLight
+        position={[1, 1, -1]}
+        intensity={hasPbr ? 1 : 5}
+        castShadow
+        color={'rgb(225, 225, 255)'}
+      />
+      <directionalLight
+        position={[-1, 1, 1]}
+        intensity={hasPbr ? 1 : 4}
+        castShadow
+        color={'rgb(240, 255, 240)'}
+      />
+    </>
+  );
+}

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

@@ -0,0 +1,399 @@
+import {
+  asset,
+  gameDefinitions,
+  TANK_CLASSES,
+  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';
+
+interface FilterControlProps {
+  compact?: boolean;
+}
+
+export function FilterControl({ compact }: FilterControlProps) {
+  const awaitedGameDefinitions = use(gameDefinitions);
+  const tankFilters = useStore($tankFilters);
+
+  return (
+    <Flex height="fit-content" gap="2" align="start" justify="center">
+      <Flex
+        direction={compact ? 'row' : { initial: 'row', sm: 'column' }}
+        overflow="hidden"
+        style={{ borderRadius: 'var(--radius-5)' }}
+      >
+        <Flex direction={compact ? 'column' : { sm: 'row', initial: 'column' }}>
+          {times(5, (index) => {
+            const tier = (index + 1) as Tier;
+            const selected = tankFilters.tiers?.includes(tier);
+
+            return (
+              <Tooltip key={tier} content={`Tier ${tier}`}>
+                <IconButton
+                  key={tier}
+                  variant={selected ? 'solid' : 'soft'}
+                  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,
+                      ]);
+                    }
+                  }}
+                >
+                  <Text size="2">{TIER_ROMAN_NUMERALS[tier]}</Text>
+                </IconButton>
+              </Tooltip>
+            );
+          })}
+        </Flex>
+        <Flex direction={compact ? 'column' : { sm: 'row', initial: 'column' }}>
+          {times(5, (index) => {
+            const tier = (index + 6) as Tier;
+            const selected = tankFilters.tiers?.includes(tier);
+
+            return (
+              <Tooltip key={tier} content={`Tier ${tier}`}>
+                <IconButton
+                  key={tier}
+                  variant={selected ? 'solid' : 'soft'}
+                  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,
+                      ]);
+                    }
+                  }}
+                >
+                  <Text size="2">{TIER_ROMAN_NUMERALS[tier]}</Text>
+                </IconButton>
+              </Tooltip>
+            );
+          })}
+        </Flex>
+      </Flex>
+
+      <Flex
+        direction={compact ? 'row' : { initial: 'row', sm: 'column' }}
+        overflow="hidden"
+        style={{ borderRadius: 'var(--radius-5)' }}
+      >
+        <Flex direction={compact ? 'column' : { sm: 'row', initial: 'column' }}>
+          {awaitedGameDefinitions.nations
+            .slice(0, Math.ceil(awaitedGameDefinitions.nations.length / 2))
+            .map((nation) => {
+              const selected = tankFilters.nations?.includes(nation);
+
+              return (
+                <Tooltip
+                  content={
+                    strings.common.nations[
+                      nation as keyof typeof strings.common.nations
+                    ]
+                  }
+                  key={nation}
+                >
+                  <IconButton
+                    variant={selected ? 'solid' : 'soft'}
+                    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,
+                        ]);
+                      }
+                    }}
+                  >
+                    <img
+                      style={{ width: '1em', height: '1em' }}
+                      src={asset(`flags/circle/${nation}.webp`)}
+                    />
+                  </IconButton>
+                </Tooltip>
+              );
+            })}
+        </Flex>
+        <Flex direction={compact ? 'column' : { sm: 'row', initial: 'column' }}>
+          {awaitedGameDefinitions.nations
+            .slice(Math.ceil(awaitedGameDefinitions.nations.length / 2))
+            .map((nation) => {
+              const selected = tankFilters.nations?.includes(nation);
+
+              return (
+                <Tooltip
+                  content={
+                    strings.common.nations[
+                      nation as keyof typeof strings.common.nations
+                    ]
+                  }
+                  key={nation}
+                >
+                  <IconButton
+                    key={nation}
+                    style={{ flex: 1 }}
+                    variant={selected ? 'solid' : 'soft'}
+                    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,
+                        ]);
+                      }
+                    }}
+                  >
+                    <img
+                      style={{ width: '1em', height: '1em' }}
+                      src={asset(`flags/circle/${nation}.webp`)}
+                    />
+                  </IconButton>
+                </Tooltip>
+              );
+            })}
+        </Flex>
+      </Flex>
+
+      <Flex
+        overflow="hidden"
+        style={{ borderRadius: 'var(--radius-full)' }}
+        direction={compact ? 'column' : { sm: 'row', initial: 'column' }}
+      >
+        {TANK_CLASSES.map((tankClass) => {
+          const Icon = classIcons[tankClass];
+          const selected = tankFilters.classes?.includes(tankClass);
+
+          return (
+            <Tooltip
+              content={strings.common.tank_class_medium[tankClass]}
+              key={tankClass}
+            >
+              <IconButton
+                variant={selected ? 'solid' : 'soft'}
+                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,
+                    ]);
+                  }
+                }}
+              >
+                <Icon style={{ width: '1em', height: '1em' }} />
+              </IconButton>
+            </Tooltip>
+          );
+        })}
+      </Flex>
+
+      <Flex
+        overflow="hidden"
+        style={{ borderRadius: 'var(--radius-full)' }}
+        direction={compact ? 'column' : { sm: 'row', initial: 'column' }}
+      >
+        <Tooltip content="Researchable">
+          <IconButton
+            variant={
+              tankFilters.types?.includes('researchable') ? 'solid' : 'soft'
+            }
+            radius="none"
+            color={
+              tankFilters.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',
+                ]);
+              }
+            }}
+          >
+            <ResearchedIcon style={{ width: '1em', height: '1em' }} />
+          </IconButton>
+        </Tooltip>
+        <Tooltip content="Premium">
+          <IconButton
+            variant={tankFilters.types?.includes('premium') ? 'solid' : 'soft'}
+            radius="none"
+            color={tankFilters.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',
+                ]);
+              }
+            }}
+          >
+            <Text
+              color={
+                tankFilters.types?.includes('premium') ? undefined : 'amber'
+              }
+              style={{ display: 'flex', justifyContent: 'center' }}
+            >
+              <ResearchedIcon style={{ width: '1em', height: '1em' }} />
+            </Text>
+          </IconButton>
+        </Tooltip>
+        <Tooltip content="Collector">
+          <IconButton
+            variant={
+              tankFilters.types?.includes('collector') ? 'solid' : 'soft'
+            }
+            radius="none"
+            color={tankFilters.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',
+                ]);
+              }
+            }}
+          >
+            <Text
+              color={
+                tankFilters.types?.includes('collector') ? undefined : 'blue'
+              }
+              style={{ display: 'flex', justifyContent: 'center' }}
+            >
+              <ResearchedIcon style={{ width: '1em', height: '1em' }} />
+            </Text>
+          </IconButton>
+        </Tooltip>
+      </Flex>
+
+      <Flex
+        overflow="hidden"
+        style={{ borderRadius: 'var(--radius-full)' }}
+        direction={compact ? 'column' : { sm: 'row', initial: 'column' }}
+      >
+        <Tooltip content="Include test tank">
+          <IconButton
+            variant={tankFilters.testing === 'include' ? 'solid' : 'soft'}
+            radius="none"
+            color={tankFilters.testing === 'include' ? undefined : 'gray'}
+            highContrast
+            onClick={() => {
+              $tankFilters.setKey('testing', 'include');
+            }}
+          >
+            <ExperimentIcon
+              style={{ width: '1em', height: '1em', color: 'currentColor' }}
+            />
+          </IconButton>
+        </Tooltip>
+        <Tooltip content="Exclude test tank">
+          <IconButton
+            variant={tankFilters.testing === 'exclude' ? 'solid' : 'soft'}
+            radius="none"
+            color={tankFilters.testing === 'exclude' ? undefined : 'gray'}
+            highContrast
+            onClick={() => {
+              $tankFilters.setKey('testing', 'exclude');
+            }}
+          >
+            <ScienceOffIcon
+              style={{ width: '1em', height: '1em', color: 'currentColor' }}
+            />
+          </IconButton>
+        </Tooltip>
+        <Tooltip content="Only test tank">
+          <IconButton
+            variant={tankFilters.testing === 'only' ? 'solid' : 'soft'}
+            radius="none"
+            color={tankFilters.testing === 'only' ? undefined : 'gray'}
+            highContrast
+            onClick={() => {
+              $tankFilters.setKey('testing', 'only');
+            }}
+          >
+            <ScienceIcon
+              style={{ width: '1em', height: '1em', color: 'currentColor' }}
+            />
+          </IconButton>
+        </Tooltip>
+      </Flex>
+
+      <Box>
+        <IconButton
+          color="red"
+          onClick={() => {
+            $tankFilters.set(initialTankFilters);
+          }}
+        >
+          <ReloadIcon />
+        </IconButton>
+      </Box>
+    </Flex>
+  );
+}

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

@@ -0,0 +1,28 @@
+import { Flex, Link, Text } from '@radix-ui/themes';
+import { $tankFilters, initialTankFilters } from '../../../stores/tankFilters';
+
+interface NoResultsProps {
+  type?: 'filters' | 'search';
+}
+
+export function NoResults({ type = 'filters' }: NoResultsProps) {
+
+  return (
+    <Flex flexGrow="1" align="center" justify="center">
+      <Text color="gray">
+        No tanks found.{' '}
+        <Link
+          href="#"
+          underline="always"
+          color="red"
+          onClick={() =>
+            $tankFilters.set(initialTankFilters)
+          }
+        >
+          {type === 'filters' ? 'Try clearing filters' : 'Try searching again'}
+        </Link>
+        .
+      </Text>
+    </Flex>
+  );
+}

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

@@ -0,0 +1,80 @@
+import type { TankDefinition } from '@blitzkit/core';
+import { useStore } from '@nanostores/react';
+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';
+
+interface SearchBarProps {
+  topResult?: TankDefinition;
+  onSelect?: (tank: TankDefinition) => void;
+}
+
+export function SearchBar({ topResult, onSelect }: SearchBarProps) {
+  const tankFilters = useStore($tankFilters);
+  const router = useRouter();
+  const input = useRef<HTMLInputElement>(null);
+  const performSearch = useCallback(
+    debounce(() => {
+      $tankFilters.setKey('searching', false);
+
+      if (!input.current) return;
+
+      const sanitized = input.current.value.trim();
+
+      $tankFilters.setKey(
+        'search',
+        sanitized.length === 0 ? undefined : sanitized,
+      );
+    }, 500),
+    [],
+  );
+  const handleChange = useCallback(() => {
+    if (!tankFilters.searching) {
+      $tankFilters.setKey('searching', true);
+    }
+
+    performSearch();
+  }, [tankFilters]);
+  const handleKeyDown = useCallback<KeyboardEventHandler>(
+    (event) => {
+      if (event.key !== 'Enter' || !topResult || tankFilters.searching) return;
+
+      event.preventDefault();
+
+      if (onSelect) {
+        onSelect(topResult);
+      } else {
+        router.push(`/tools/tankopedia/${topResult.id}`);
+      }
+    },
+    [topResult],
+  );
+
+  return (
+    <Flex justify="center" mt="4">
+      <Flex gap="2" flexGrow="1">
+        <TextField.Root
+          defaultValue={tankFilters.search}
+          style={{ flex: 1 }}
+          ref={input}
+          placeholder="Search tanks..."
+          onChange={handleChange}
+          onKeyDown={handleKeyDown}
+        >
+          <TextField.Slot>
+            {tankFilters.searching ? <Spinner /> : <MagnifyingGlassIcon />}
+          </TextField.Slot>
+
+          <QuickLink topResult={topResult} />
+        </TextField.Root>
+
+        <Sort />
+      </Flex>
+    </Flex>
+  );
+}

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

@@ -0,0 +1,25 @@
+import { Flex, Skeleton } from '@radix-ui/themes';
+import { memo, useRef } from 'react';
+import { useIntersection } from '../../../hooks/useIntersection';
+
+interface SkeletonTankCardProps {
+  onIntersection?: () => void;
+}
+
+export const SkeletonTankCard = memo(
+  ({ onIntersection }: SkeletonTankCardProps) => {
+    const card = useRef<HTMLDivElement>(null);
+
+    useIntersection(() => onIntersection?.(), card, {
+      disabled: onIntersection === undefined,
+    });
+
+    return (
+      <Flex direction="column" gap="2" ref={card}>
+        <Skeleton height="64px" />
+        <Skeleton height="1em" />
+      </Flex>
+    );
+  },
+  () => true,
+);

packages/website/src/components/TankSearch/components/TankCard.css.ts

@@ -0,0 +1,45 @@
+import { createVar, style } from '@vanilla-extract/css';
+
+export const cardBackgroundVar = createVar();
+
+export const card = style({
+  cursor: 'pointer',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  gap: 'var(--space-2)',
+  background: cardBackgroundVar,
+  overflow: 'hidden',
+});
+
+export const image = style({
+  height: 64,
+  width: '100%',
+  objectPosition: 'center right',
+  objectFit: 'contain',
+});
+
+export const classIcon = style({
+  width: '1em',
+  height: '1em',
+  minWidth: '1em',
+  minHeight: '1em',
+});
+
+export const name = style({
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+});
+
+export const link = style({
+  color: 'inherit',
+  textDecoration: 'none',
+  width: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+
+  ':hover': {
+    textDecoration: 'underline',
+  },
+});

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

@@ -0,0 +1,193 @@
+import {
+  asset,
+  modelDefinitions,
+  normalizeBoundingBox,
+  resolveDpm,
+  resolveNearPenetration,
+  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 * as styles from './TankCard.css';
+
+interface TankCardProps {
+  tank: TankDefinition;
+  onSelect?: (tank: TankDefinition) => void;
+}
+
+export function TankCard({ tank, onSelect }: TankCardProps) {
+  const awaitedModelDefinitions = use(modelDefinitions);
+  const Icon = classIcons[tank.class];
+  const tankopediaSortBy = useStore($tankopediaSort).by;
+  const discriminator = useMemo(() => {
+    if (tankopediaSortBy.startsWith('meta')) return undefined;
+
+    const turret = tank.turrets.at(-1)!;
+    const gun = turret.guns.at(-1)!;
+    const shell0 = gun.shells[0];
+    const shell1 = gun.shells[1];
+    const tracks = tank.tracks.at(-1)!;
+    const engine = tank.engines.at(-1)!;
+    const tankModelDefinition = awaitedModelDefinitions[tank.id];
+    const turretModelDefinition = tankModelDefinition.turrets[turret.id];
+    const gunModelDefinition = turretModelDefinition.guns[gun.id];
+
+    switch (tankopediaSortBy) {
+      case 'fire.aimTime':
+        return gun.aimTime.toFixed(2);
+      case 'fire.caliber':
+        return shell0.caliber.toFixed(0);
+      case 'fire.damage':
+        return shell0.damage.armor.toFixed(0);
+      case 'fire.dispersionMoving':
+        return tracks.dispersion.move.toFixed(3);
+      case 'fire.dispersionStill':
+        return gun.dispersion.base.toFixed(3);
+      case 'fire.dpm':
+        return resolveDpm(gun, shell0).toFixed(0);
+      case 'fire.dpmPremium':
+        return shell1 ? resolveDpm(gun, shell1).toFixed(0) : '--';
+      case 'fire.reload':
+        return resolveReload(gun).toFixed(2);
+      case 'fire.standardPenetration':
+        return resolveNearPenetration(shell0.penetration).toFixed(0);
+      case 'fire.premiumPenetration':
+        return shell1
+          ? resolveNearPenetration(shell1.penetration).toFixed(0)
+          : '--';
+      case 'fire.shellVelocity':
+        return shell0.speed.toFixed(0);
+      case 'fire.gunDepression':
+        return (
+          gunModelDefinition.pitch.max +
+          (tankModelDefinition.turretRotation?.pitch ?? 0)
+        ).toFixed(1);
+      case 'fire.gunElevation':
+        return (
+          -gunModelDefinition.pitch.min -
+          (tankModelDefinition.turretRotation?.pitch ?? 0)
+        ).toFixed(1);
+      case 'maneuverability.forwardsSpeed':
+        return tank.speed.forwards.toFixed(0);
+      case 'maneuverability.backwardsSpeed':
+        return tank.speed.backwards.toFixed(0);
+      case 'maneuverability.power':
+        return engine.power.toFixed(0);
+      case 'maneuverability.powerToWeight':
+        return (
+          (1000 * engine.power) /
+          (tank.weight +
+            engine.weight +
+            tracks.weight +
+            turret.weight +
+            gun.weight)
+        ).toFixed(1);
+      case 'maneuverability.weight':
+        return (
+          (tank.weight +
+            engine.weight +
+            tracks.weight +
+            turret.weight +
+            gun.weight) /
+          1000
+        ).toFixed(1);
+      case 'maneuverability.traverseSpeed':
+        return tracks.traverseSpeed.toFixed(1);
+      case 'survivability.health':
+        return (tank.health + turret.health).toFixed(0);
+      case 'survivability.viewRange':
+        return turret.viewRange.toFixed(0);
+      case 'survivability.camouflageStill':
+        return (tank.camouflage.still * 100).toFixed(0);
+      case 'survivability.camouflageMoving':
+        return (tank.camouflage.moving * 100).toFixed(0);
+      case 'survivability.camouflageShooting':
+        return (tank.camouflage.still * gun.camouflageLoss * 100).toFixed(0);
+      case 'survivability.volume': {
+        const dimensions = normalizeBoundingBox(
+          unionBoundingBox(
+            tankModelDefinition.boundingBox,
+            turretModelDefinition.boundingBox,
+          ),
+        );
+
+        return (dimensions[0] * dimensions[1] * dimensions[2]).toFixed(0);
+      }
+
+      case 'survivability.length':
+        return Math.max(
+          ...normalizeBoundingBox(
+            unionBoundingBox(
+              tankModelDefinition.boundingBox,
+              turretModelDefinition.boundingBox,
+            ),
+          ),
+        ).toFixed(0);
+    }
+  }, [tankopediaSortBy]);
+
+  return (
+    <Text
+      tabIndex={onSelect ? 0 : undefined}
+      size="1"
+      color={
+        tank.treeType === 'collector'
+          ? 'blue'
+          : tank.treeType === 'premium'
+            ? 'amber'
+            : 'gray'
+      }
+      highContrast={tank.treeType === 'researchable'}
+      onClick={onSelect ? () => onSelect(tank) : undefined}
+      className={styles.card}
+      style={assignInlineVars({
+        [styles.cardBackgroundVar]: `top left / contain no-repeat url(${asset(
+          `flags/scratched/${tank.nation}.webp`,
+        )})`,
+      })}
+    >
+      <Link
+        className={styles.link}
+        href={onSelect ? '#' : `/tools/tankopedia/${tank.id}`}
+        prefetch={false}
+      >
+        <img alt={tank.name} src={tankIcon(tank.id)} className={styles.image} />
+
+        <Flex
+          justify="center"
+          gap="1"
+          align="center"
+          overflow="hidden"
+          width="100%"
+        >
+          <Icon className={styles.classIcon} />
+          <Text align="center" className={styles.name}>
+            {tank.name}
+          </Text>
+        </Flex>
+
+        {discriminator && (
+          <Text
+            color="gray"
+            align="center"
+            style={{
+              whiteSpace: 'nowrap',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+            }}
+          >
+            {discriminator}
+          </Text>
+        )}
+      </Link>
+    </Text>
+  );
+}

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

@@ -0,0 +1,14 @@
+import { Grid, type GridProps } from '@radix-ui/themes';
+
+export function TankCardWrapper(props: GridProps) {
+  return (
+    <Grid
+      py="4"
+      columns="repeat(auto-fill, minmax(100px, 1fr))"
+      flow="dense"
+      gap="2"
+      gapY="6"
+      {...props}
+    />
+  );
+}

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

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

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

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

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

@@ -1,9 +1,5 @@
-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 type { TankClass, Tier, TreeType } from '@blitzkit/core';
+import type { ENVIRONMENTS } from '../../components/Sandbox/components/Lighting';
 import { SORT_NAMES, TankopediaDisplay } from './constants';
 
 export type TankopediaSortBy = keyof typeof SORT_NAMES;
@@ -38,39 +34,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) },
+//       ),
+//     ),
+//   );