feat: progress on tankopedia search

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

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

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

@@ -1,42 +0,0 @@
-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',
-  '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-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 '../Lighting';
+import { Lighting } from '../../../../../../../../website/src/components/Sandbox/components/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 '../../../Lighting';
+import { ENVIRONMENTS } from '../../../../../../../../../../website/src/components/Sandbox/components/Lighting';
 import { QuickInputs } from '../../../QuickInputs';
 import { Thicknesses } from '../../../Thicknesses';
 import { DynamicArmorSwitcher } from './components/DynamicArmorSwitcher';

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

@@ -1,372 +0,0 @@
-import {
-  asset,
-  gameDefinitions,
-  TANK_CLASSES,
-  Tier,
-  TIER_ROMAN_NUMERALS,
-} from '@blitzkit/core';
-import strings from '@blitzkit/core/lang/en-US.json';
-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 { 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;
-}
-
-export function FilterControl({ compact }: FilterControlProps) {
-  const awaitedGameDefinitions = use(gameDefinitions);
-  const filters = TankFilters.use();
-  const mutateTankFilters = TankFilters.useMutation();
-  const tankFiltersStore = TankFilters.useStore();
-
-  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 = filters.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={() =>
-                    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>
-              </Tooltip>
-            );
-          })}
-        </Flex>
-        <Flex direction={compact ? 'column' : { sm: 'row', initial: 'column' }}>
-          {times(5, (index) => {
-            const tier = (index + 6) as Tier;
-            const selected = filters.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={() =>
-                    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>
-              </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 = filters.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={() =>
-                      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' }}
-                      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 = filters.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={() =>
-                      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' }}
-                      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 = filters.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={() =>
-                  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>
-            </Tooltip>
-          );
-        })}
-      </Flex>
-
-      <Flex
-        overflow="hidden"
-        style={{ borderRadius: 'var(--radius-full)' }}
-        direction={compact ? 'column' : { sm: 'row', initial: 'column' }}
-      >
-        <Tooltip content="Researchable">
-          <IconButton
-            variant={filters.types?.includes('researchable') ? 'solid' : 'soft'}
-            radius="none"
-            color={filters.types?.includes('researchable') ? undefined : 'gray'}
-            highContrast
-            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={filters.types?.includes('premium') ? 'solid' : 'soft'}
-            radius="none"
-            color={filters.types?.includes('premium') ? 'amber' : 'gray'}
-            highContrast
-            onClick={() =>
-              mutateTankFilters((draft) => {
-                if (draft.types?.includes('premium')) {
-                  draft.types = draft.types?.filter((t) => t !== 'premium');
-                } else {
-                  draft.types = [...(draft.types ?? []), 'premium'];
-                }
-              })
-            }
-          >
-            <Text
-              color={filters.types?.includes('premium') ? undefined : 'amber'}
-              style={{ display: 'flex', justifyContent: 'center' }}
-            >
-              <ResearchedIcon style={{ width: '1em', height: '1em' }} />
-            </Text>
-          </IconButton>
-        </Tooltip>
-        <Tooltip content="Collector">
-          <IconButton
-            variant={filters.types?.includes('collector') ? 'solid' : 'soft'}
-            radius="none"
-            color={filters.types?.includes('collector') ? 'blue' : 'gray'}
-            highContrast
-            onClick={() =>
-              mutateTankFilters((draft) => {
-                if (draft.types?.includes('collector')) {
-                  draft.types = draft.types?.filter((t) => t !== 'collector');
-                } else {
-                  draft.types = [...(draft.types ?? []), 'collector'];
-                }
-              })
-            }
-          >
-            <Text
-              color={filters.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={filters.testing === 'include' ? 'solid' : 'soft'}
-            radius="none"
-            color={filters.testing === 'include' ? undefined : 'gray'}
-            highContrast
-            onClick={() =>
-              mutateTankFilters((draft) => {
-                draft.testing = 'include';
-              })
-            }
-          >
-            <ExperimentIcon
-              style={{ width: '1em', height: '1em', color: 'currentColor' }}
-            />
-          </IconButton>
-        </Tooltip>
-        <Tooltip content="Exclude test tank">
-          <IconButton
-            variant={filters.testing === 'exclude' ? 'solid' : 'soft'}
-            radius="none"
-            color={filters.testing === 'exclude' ? undefined : 'gray'}
-            highContrast
-            onClick={() =>
-              mutateTankFilters((draft) => {
-                draft.testing = 'exclude';
-              })
-            }
-          >
-            <ScienceOffIcon
-              style={{ width: '1em', height: '1em', color: 'currentColor' }}
-            />
-          </IconButton>
-        </Tooltip>
-        <Tooltip content="Only test tank">
-          <IconButton
-            variant={filters.testing === 'only' ? 'solid' : 'soft'}
-            radius="none"
-            color={filters.testing === 'only' ? undefined : 'gray'}
-            highContrast
-            onClick={() =>
-              mutateTankFilters((draft) => {
-                draft.testing = 'only';
-              })
-            }
-          >
-            <ScienceIcon
-              style={{ width: '1em', height: '1em', color: 'currentColor' }}
-            />
-          </IconButton>
-        </Tooltip>
-      </Flex>
-
-      <Box>
-        <IconButton
-          color="red"
-          onClick={() => {
-            tankFiltersStore.setState(tankFiltersStore.getInitialState(), true);
-          }}
-        >
-          <ReloadIcon />
-        </IconButton>
-      </Box>
-    </Flex>
-  );
-}

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

@@ -1,29 +0,0 @@
-import { Flex, Link, Text } from '@radix-ui/themes';
-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">
-      <Text color="gray">
-        No tanks found.{' '}
-        <Link
-          href="#"
-          underline="always"
-          color="red"
-          onClick={() =>
-            tankFiltersStore.setState(tankFiltersStore.getInitialState(), true)
-          }
-        >
-          {type === 'filters' ? 'Try clearing filters' : 'Try searching again'}
-        </Link>
-        .
-      </Text>
-    </Flex>
-  );
-}

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

@@ -1,80 +0,0 @@
-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 { KeyboardEventHandler, useCallback, useRef } from 'react';
-import * as TankFilters from '../../../../stores/tankFilters';
-import { QuickLink } from './QuickLink';
-import { Sort } from './Sort';
-
-interface SearchBarProps {
-  topResult?: TankDefinition;
-  onSelect?: (tank: TankDefinition) => void;
-}
-
-export function SearchBar({ topResult, onSelect }: SearchBarProps) {
-  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(() => {
-      tankFiltersStore.setState({ searching: false });
-
-      if (!input.current) return;
-
-      const sanitized = input.current.value.trim();
-
-      tankFiltersStore.setState({
-        search: sanitized.length === 0 ? undefined : sanitized,
-      });
-    }, 500),
-    [],
-  );
-  const handleChange = useCallback(() => {
-    if (!tankFiltersStore.getState().searching) {
-      tankFiltersStore.setState({ searching: true });
-    }
-
-    performSearch();
-  }, []);
-  const handleKeyDown = useCallback<KeyboardEventHandler>(
-    (event) => {
-      if (event.key !== 'Enter' || !topResult || 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={lastSearch}
-          style={{ flex: 1 }}
-          ref={input}
-          placeholder="Search tanks..."
-          onChange={handleChange}
-          onKeyDown={handleKeyDown}
-        >
-          <TextField.Slot>
-            {searching ? <Spinner /> : <MagnifyingGlassIcon />}
-          </TextField.Slot>
-
-          <QuickLink topResult={topResult} />
-        </TextField.Root>
-
-        <Sort />
-      </Flex>
-    </Flex>
-  );
-}

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

@@ -1,25 +0,0 @@
-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-legacy/src/app/tools/tankopedia/components/TankCard.css.ts

@@ -1,45 +0,0 @@
-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-legacy/src/app/tools/tankopedia/components/TankCard.tsx

@@ -1,192 +0,0 @@
-import {
-  asset,
-  modelDefinitions,
-  normalizeBoundingBox,
-  resolveDpm,
-  resolveNearPenetration,
-  TankDefinition,
-  tankIcon,
-  unionBoundingBox,
-} from '@blitzkit/core';
-import { Flex, Text } from '@radix-ui/themes';
-import { assignInlineVars } from '@vanilla-extract/dynamic';
-import Link from 'next/link';
-import { use, useMemo } from 'react';
-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 {
-  tank: TankDefinition;
-  onSelect?: (tank: TankDefinition) => void;
-}
-
-export function TankCard({ tank, onSelect }: TankCardProps) {
-  const awaitedModelDefinitions = use(modelDefinitions);
-  const Icon = classIcons[tank.class];
-  const sortBy = TankopediaSort.use((state) => state.by);
-  const discriminator = useMemo(() => {
-    if (sortBy.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 (sortBy) {
-      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);
-    }
-  }, [sortBy]);
-
-  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-legacy/src/app/tools/tankopedia/components/TankCardWrapper.tsx

@@ -1,14 +0,0 @@
-import { Grid, 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-legacy/tsconfig.json

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