sorting

packages/core/src/blitzkit/createDefaultEnvironment.ts

@@ -0,0 +1,11 @@
+import { SkillDefinitions } from "@blitzkit/protos";
+import { createDefaultSkills } from "./createDefaultSkills";
+import { TankEnvironment } from "./tankEnvironment";
+
+export function createDefaultEnvironment(skills: SkillDefinitions) {
+  return {
+    equalize: false,
+    distance: 0,
+    skills: createDefaultSkills(skills),
+  } satisfies TankEnvironment;
+}

packages/core/src/blitzkit/createDefaultSkills.ts

@@ -1,12 +1,13 @@
-import { SkillDefinitions } from "..";
+import { SkillDefinitions } from "@blitzkit/protos";
 import { permanentSkills } from "../blitz/permanentSkills";
+import { MAX_SKILL_LEVEL } from "../config/skills";
 
 export function createDefaultSkills(skillDefinitions: SkillDefinitions) {
   const skills: Record<string, number> = {};
 
   Object.values(skillDefinitions.classes).forEach((tankSkills) => {
     tankSkills.skills.forEach((skill) => {
-      skills[skill] = permanentSkills.includes(skill) ? 7 : 0;
+      skills[skill] = permanentSkills.includes(skill) ? MAX_SKILL_LEVEL : 0;
     });
   });
 

packages/core/src/blitzkit/index.ts

@@ -3,6 +3,7 @@ export * from "./api";
 export * from "./assertSecret";
 export * from "./availableProvisions";
 export * from "./coefficient";
+export * from "./createDefaultEnvironment";
 export * from "./createDefaultProvisions";
 export * from "./createDefaultSkills";
 export * from "./degressiveStat";
@@ -24,6 +25,7 @@ export * from "./sluggify";
 export * from "./staticAsset";
 export * from "./sum";
 export * from "./tankDefinitions";
+export * from "./tankEnvironment";
 export * from "./tankIcon";
 export * from "./tankNames";
 export * from "./unionBoundingBox";

packages/core/src/blitzkit/tankDefinitions/constants.ts

@@ -43,19 +43,6 @@ export const TANK_ICONS_COLLECTOR: Record<TankClass, string> = {
   [TankClass.TANK_CLASS_HEAVY]: "https://i.imgur.com/8xRf3nc.png",
 };
 export const TIERS = times(10, (index) => index + 1);
-export const TIER_ROMAN_NUMERALS: Record<number, string> = {
-  1: "I",
-  2: "II",
-  3: "III",
-  4: "IV",
-  5: "V",
-  6: "VI",
-  7: "VII",
-  8: "VIII",
-  9: "IX",
-  10: "X",
-  11: "XI",
-};
 
 export const flags: Record<string, string> = {
   ussr: "<:ussr:1218421042033197197>",

packages/core/src/blitzkit/tankEnvironment.ts

@@ -0,0 +1,5 @@
+export interface TankEnvironment {
+  equalize: boolean;
+  distance: number;
+  skills: Record<string, number>;
+}

packages/core/src/config/index.ts

@@ -1,3 +1,4 @@
 export * from "./gunTypeOrder";
+export * from "./skills";
 export * from "./tankClassOrder";
 export * from "./treeTypeOrder";

packages/core/src/config/skills.ts

@@ -0,0 +1 @@
+export const MAX_SKILL_LEVEL = 7;

packages/i18n/strings/en.json

@@ -20,6 +20,26 @@
   },
 
   "tanks": {
+    "toys": {
+      "ricochet": {
+        "angle": "Angle",
+        "normalization": "Normalization",
+        "effective": "Effective",
+        "armor": "Armor",
+        "no_ricochet": "Explosive shells don't ricochet"
+      },
+
+      "traverse": {
+        "effective": "Effective",
+        "hull": "Hull",
+        "turret": "Turret"
+      },
+
+      "reload": {
+        "skip": "Skip"
+      }
+    },
+
     "characteristics": {
       "compare": {
         "label": "Compare against",
@@ -28,16 +48,6 @@
         "all": "All tanks"
       },
 
-      "toys": {
-        "ricochet": {
-          "angle": "Angle",
-          "normalization": "Normalization",
-          "effective": "Effective",
-          "armor": "Armor",
-          "no_ricochet": "Explosive shells don't ricochet"
-        }
-      },
-
       "titles": {
         "gun": "Gun",
         "clip": "Clip",
@@ -133,6 +143,9 @@
       "modules": "Modules",
       "equipment": "Equipment",
       "shells": "Shells",
+      "clear": "Clear",
+      "maximize": "Maximize",
+      "skills": "Crew skills",
       "alternative": "Alt"
     },
 
@@ -471,53 +484,15 @@
         },
 
         "sort": {
-          "meta.none": "none",
-          "survivability.health": "health",
-          "survivability.viewRange": "view range",
-          "survivability.camouflageStill": "camouflage still",
-          "survivability.camouflageMoving": "camouflage moving",
-          "survivability.camouflageShooting": "camouflage shooting",
-          "survivability.volume": "volume",
-          "survivability.length": "length",
-          "fire.dpm": "standard DPM",
-          "fire.dpmPremium": "premium DPM",
-          "fire.reload": "reload",
-          "fire.caliber": "caliber",
-          "fire.standardPenetration": "standard penetration",
-          "fire.premiumPenetration": "premium penetration",
-          "fire.tertiaryPenetration": "tertiary penetration",
-          "fire.damage": "damage",
-          "fire.moduleDamage": "module damage",
-          "fire.shellVelocity": "shell velocity",
-          "fire.shellRange": "shell range",
-          "fire.shellCapacity": "shell capacity",
-          "fire.aimTime": "aim time",
-          "fire.dispersionStill": "dispersion still",
-          "fire.dispersionMoving": "dispersion moving",
-          "fire.gunDepression": "gun depression",
-          "fire.gunElevation": "gun elevation",
-          "maneuverability.forwardsSpeed": "forwards speed",
-          "maneuverability.backwardsSpeed": "backwards speed",
-          "maneuverability.power": "power",
-          "maneuverability.powerToWeight": "power to weight",
-          "maneuverability.weight": "weight",
-          "maneuverability.traverseSpeed": "traverse speed"
-        },
-        "sort_dropdown": {
           "label": "Sort",
-          "groups": {
-            "sort": {
-              "no_sort": "No sort",
-              "label": "Sort by",
-              "fire": "Fire",
-              "maneuverability": "Maneuverability",
-              "survivability": "Survivability"
-            },
-            "direction": {
-              "label": "Direction",
-              "ascending": "Ascending",
-              "descending": "Descending"
-            }
+
+          "none": "None",
+          "by": "Sort by",
+
+          "direction": {
+            "label": "Direction",
+            "ascending": "Ascending",
+            "descending": "Descending"
           }
         }
       },

packages/website/src/components/Button/index.module.css

@@ -86,5 +86,9 @@
   &[data-variant="surface"],
   &[data-variant="outline"] {
     outline: var(--space-1) solid var(--accent-6);
+
+    &[data-high-contrast="true"] {
+      outline: var(--space-1) solid var(--accent-11);
+    }
   }
 }

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

@@ -8,7 +8,7 @@ export interface ButtonProps extends ComponentProps<"button"> {
   radius?: `${1 | 2 | 3}` | "max";
   variant?: "solid" | "surface" | "soft" | "inverted" | "ghost" | "outline";
   size?: "regular" | "minor" | "major";
-  highContrast?: boolean; // TODO: add high contrast
+  highContrast?: boolean;
 
   listChild?: boolean;
   parentListChild?: boolean;
@@ -40,6 +40,7 @@ export function Button({
   listChild,
   parentListChild,
   disabled,
+  highContrast,
   ...props
 }: ButtonProps) {
   return (
@@ -52,6 +53,7 @@ export function Button({
       data-size={size}
       data-list-child={listChild}
       data-parent-list-child={parentListChild}
+      data-high-contrast={highContrast}
       data-disabled={disabled}
       disabled={disabled}
       {...props}

packages/website/src/components/Checkbox/index.module.css

@@ -0,0 +1,19 @@
+.checkbox {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+
+  .control {
+    width: 1.25em;
+    height: 1.25em;
+
+    margin: 0;
+
+    accent-color: var(--accent-9);
+  }
+
+  &,
+  * {
+    cursor: pointer;
+  }
+}

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

@@ -0,0 +1,35 @@
+import { useId, type ReactNode } from "react";
+import { Text } from "../Text";
+import styles from "./index.module.css";
+
+export interface CheckboxProps {
+  checked: boolean;
+  onCheckedChange(checked: boolean): void;
+  children?: ReactNode;
+}
+
+export function Checkbox({
+  checked,
+  onCheckedChange,
+  children,
+}: CheckboxProps) {
+  const id = useId();
+
+  return (
+    <div className={styles.checkbox}>
+      <input
+        className={styles.control}
+        type="checkbox"
+        id={id}
+        checked={checked}
+        onChange={(event) => onCheckedChange(event.target.checked)}
+      />
+
+      {children && (
+        <label htmlFor={id}>
+          <Text lowContrast>{children}</Text>
+        </label>
+      )}
+    </div>
+  );
+}

packages/website/src/components/Compare/CompareTable.tsx

@@ -1,4 +1,9 @@
-import { alias, availableProvisions, permanentSkills } from "@blitzkit/core";
+import {
+  alias,
+  availableProvisions,
+  MAX_SKILL_LEVEL,
+  permanentSkills,
+} from "@blitzkit/core";
 import { checkConsumableProvisionInclusivity } from "@blitzkit/core/src/blitzkit/checkConsumableProvisionInclusivity";
 import { ComponentPlaceholderIcon } from "@radix-ui/react-icons";
 import {
@@ -153,7 +158,7 @@ export function CompareTable({ stats }: CompareTableProps) {
                       onClick={() => {
                         CompareEphemeral.mutate((draft) => {
                           Object.keys(draft.crewSkills).forEach((skill) => {
-                            draft.crewSkills[skill] = 7;
+                            draft.crewSkills[skill] = MAX_SKILL_LEVEL;
                           });
                         });
                       }}

packages/website/src/components/CrewSkillManager.tsx

@@ -1,4 +1,9 @@
-import { alias, permanentSkills, romanize } from "@blitzkit/core";
+import {
+  alias,
+  MAX_SKILL_LEVEL,
+  permanentSkills,
+  romanize,
+} from "@blitzkit/core";
 import { Flex } from "@radix-ui/themes";
 import { api } from "../api/dynamic";
 import { GenericTankComponentButton } from "./ModuleButtons/GenericTankComponentButton";
@@ -34,10 +39,10 @@ export function CrewSkillManager({
                   const draft = { ...skillLevels };
 
                   if (event.shiftKey) {
-                    draft[skill] = draft[skill] === 0 ? 7 : 0;
+                    draft[skill] = draft[skill] === 0 ? MAX_SKILL_LEVEL : 0;
                   } else {
                     draft[skill] = level - 1;
-                    if (draft[skill] < 0) draft[skill] = 7;
+                    if (draft[skill] < 0) draft[skill] = MAX_SKILL_LEVEL;
                   }
 
                   onChange(draft);

packages/website/src/components/Guesser.tsx

@@ -1,4 +1,4 @@
-import { alias, SEARCH_KEYS, TIER_ROMAN_NUMERALS } from "@blitzkit/core";
+import { alias, romanize, SEARCH_KEYS } from "@blitzkit/core";
 import { literals } from "@blitzkit/i18n";
 import { TankDefinition } from "@blitzkit/protos";
 import {
@@ -163,7 +163,7 @@ export function Guesser() {
                           justify="center"
                         >
                           <Icon width="1em" height="1em" />
-                          {TIER_ROMAN_NUMERALS[result.tier]}
+                          {romanize(result.tier)}
                         </Flex>
                       }
                     />
@@ -215,7 +215,7 @@ export function Guesser() {
                   }}
                 >
                   {literals(strings.website.tools.guess.tier, {
-                    tier: TIER_ROMAN_NUMERALS[tier],
+                    tier: romanize(tier),
                   })}
                 </DropdownMenu.CheckboxItem>
               );

packages/website/src/components/ModuleManager.tsx

@@ -1,4 +1,4 @@
-import { TIER_ROMAN_NUMERALS } from "@blitzkit/core";
+import { romanize } from "@blitzkit/core";
 import type {
   EngineDefinition,
   GunDefinition,
@@ -42,7 +42,7 @@ export function ModuleManager({
     <Flex gap="1" wrap="wrap">
       <ModuleButton
         module="turret"
-        discriminator={TIER_ROMAN_NUMERALS[modules.turret.tier]}
+        discriminator={romanize(modules.turret.tier)}
         onClick={() => setTurretMenuOpen(true)}
       />
 
@@ -71,7 +71,7 @@ export function ModuleManager({
                   <ModuleButton
                     variant="ghost"
                     module="turret"
-                    discriminator={TIER_ROMAN_NUMERALS[turret.tier]}
+                    discriminator={romanize(turret.tier)}
                   />{" "}
                   {unwrap(turret.name!)}
                 </DropdownMenu.RadioItem>
@@ -83,7 +83,7 @@ export function ModuleManager({
 
       <ModuleButton
         module="gun"
-        discriminator={TIER_ROMAN_NUMERALS[modules.gun.tier]}
+        discriminator={romanize(modules.gun.tier)}
         onClick={() => setGunMenuOpen(true)}
       />
 
@@ -111,7 +111,7 @@ export function ModuleManager({
                   <ModuleButton
                     variant="ghost"
                     module="gun"
-                    discriminator={TIER_ROMAN_NUMERALS[gun.tier]}
+                    discriminator={romanize(gun.tier)}
                   />{" "}
                   {unwrap(gun.name!)}
                 </DropdownMenu.RadioItem>
@@ -123,7 +123,7 @@ export function ModuleManager({
 
       <ModuleButton
         module="engine"
-        discriminator={TIER_ROMAN_NUMERALS[modules.engine.tier]}
+        discriminator={romanize(modules.engine.tier)}
         onClick={() => setEngineMenuOpen(true)}
       />
 
@@ -150,7 +150,7 @@ export function ModuleManager({
                   <ModuleButton
                     variant="ghost"
                     module="engine"
-                    discriminator={TIER_ROMAN_NUMERALS[engine.tier]}
+                    discriminator={romanize(engine.tier)}
                   />{" "}
                   {unwrap(engine.name!)}
                 </DropdownMenu.RadioItem>
@@ -162,7 +162,7 @@ export function ModuleManager({
 
       <ModuleButton
         module="chassis"
-        discriminator={TIER_ROMAN_NUMERALS[modules.track.tier]}
+        discriminator={romanize(modules.track.tier)}
         onClick={() => setTrackMenuOpen(true)}
       />
 
@@ -189,7 +189,7 @@ export function ModuleManager({
                   <ModuleButton
                     variant="ghost"
                     module="chassis"
-                    discriminator={TIER_ROMAN_NUMERALS[track.tier]}
+                    discriminator={romanize(track.tier)}
                   />{" "}
                   {unwrap(track.name!)}
                 </DropdownMenu.RadioItem>

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

@@ -33,7 +33,7 @@ export function RecentlyViewedTanks() {
   const strings = useStrings();
   const by = TankSort.use((state) => state.by);
 
-  if (recentlyViewed.length === 0 || by !== "meta.none" || hasFilters) {
+  if (recentlyViewed.length === 0 || by !== null || hasFilters) {
     return null;
   }
 

packages/website/src/components/Scroller/index.module.css

@@ -0,0 +1,102 @@
+.scroller {
+  --scroller-curtain-color: var(--gray-1);
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+
+  position: relative;
+
+  .content {
+    overflow: auto;
+
+    padding-bottom: var(--space-4);
+
+    transition: scrollbar-color var(--duration-brief);
+    scrollbar-color: transparent transparent;
+
+    &:hover {
+      scrollbar-color: var(--gray-7) var(--gray-3);
+    }
+  }
+
+  &:hover,
+  &:focus-within {
+    .bar-wrapper {
+      opacity: 1;
+    }
+  }
+
+  &[data-orientation="horizontal"] {
+    .curtain {
+      width: min(25%, var(--space-7));
+      height: calc(100% - var(--space-3) - 2 * var(--space-1));
+
+      position: absolute;
+      top: 0;
+
+      &[data-side="start"] {
+        left: 0;
+        background: linear-gradient(
+          90deg,
+          var(--scroller-curtain-color),
+          transparent
+        );
+      }
+
+      &[data-side="end"] {
+        right: 0;
+        background: linear-gradient(
+          90deg,
+          transparent,
+          var(--scroller-curtain-color)
+        );
+      }
+    }
+  }
+
+  &[data-orientation="vertical"] {
+    min-height: 0;
+
+    .content {
+      flex: 1 1 auto;
+      min-height: 0;
+
+      overflow-x: hidden;
+      overflow-y: auto;
+
+      padding-bottom: 0;
+    }
+
+    .curtain {
+      width: calc(100% - var(--space-3) - 2 * var(--space-1));
+      height: min(25%, var(--space-7));
+
+      position: absolute;
+      left: 0;
+
+      &[data-side="start"] {
+        top: 0;
+        background: linear-gradient(
+          180deg,
+          var(--scroller-curtain-color),
+          transparent
+        );
+      }
+
+      &[data-side="end"] {
+        bottom: 0;
+        background: linear-gradient(
+          180deg,
+          transparent,
+          var(--scroller-curtain-color)
+        );
+      }
+    }
+  }
+
+  .curtain {
+    opacity: 0;
+    pointer-events: none;
+  }
+}

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

@@ -0,0 +1,78 @@
+import { useEffect, useRef, type ComponentProps } from "react";
+import { clamp } from "three/src/math/MathUtils.js";
+import { classNames } from "../../ui/classNames";
+import styles from "./index.module.css";
+
+interface ScrollerProps extends ComponentProps<"div"> {
+  orientation?: "horizontal" | "vertical";
+}
+
+export function Scroller({
+  children,
+  className,
+  orientation = "horizontal",
+  ...props
+}: ScrollerProps) {
+  const content = useRef<HTMLDivElement>(null!);
+  const curtainStart = useRef<HTMLDivElement>(null!);
+  const curtainEnd = useRef<HTMLDivElement>(null!);
+
+  const isHorizontal = orientation === "horizontal";
+
+  useEffect(() => {
+    function syncCurtains() {
+      const maxScroll = isHorizontal
+        ? content.current.scrollWidth - content.current.clientWidth
+        : content.current.scrollHeight - content.current.clientHeight;
+      const scrollPosition = isHorizontal
+        ? content.current.scrollLeft
+        : content.current.scrollTop;
+
+      if (maxScroll <= 0) {
+        curtainStart.current.style.opacity = "0";
+        curtainEnd.current.style.opacity = "0";
+
+        return;
+      }
+
+      const dimension = isHorizontal
+        ? content.current.clientWidth
+        : content.current.clientHeight;
+      const fadeDistance = Math.min(60, dimension * 0.15);
+      const startOpacity = clamp(scrollPosition / fadeDistance, 0, 1);
+      const endOpacity = clamp(
+        (maxScroll - scrollPosition) / fadeDistance,
+        0,
+        1,
+      );
+
+      curtainStart.current.style.opacity = `${startOpacity}`;
+      curtainEnd.current.style.opacity = `${endOpacity}`;
+    }
+
+    syncCurtains();
+
+    window.addEventListener("resize", syncCurtains);
+    content.current.addEventListener("scroll", syncCurtains);
+
+    return () => {
+      window.removeEventListener("resize", syncCurtains);
+      content.current.removeEventListener("scroll", syncCurtains);
+    };
+  }, [orientation]);
+
+  return (
+    <div
+      className={classNames(styles.scroller, className)}
+      {...props}
+      data-orientation={orientation}
+    >
+      <div className={styles.content} ref={content}>
+        {children}
+      </div>
+
+      <div ref={curtainStart} data-side="start" className={styles.curtain} />
+      <div ref={curtainEnd} data-side="end" className={styles.curtain} />
+    </div>
+  );
+}

packages/website/src/components/Section/index.module.css

@@ -1,4 +1,6 @@
 .section {
+  padding: var(--space-5);
+
   display: flex;
   justify-content: center;
 

packages/website/src/components/SegmentedControl/index.module.css

@@ -1,23 +1,53 @@
 .options {
+  width: max-content;
+
   position: relative;
   display: grid;
 
   border-radius: var(--radius-max);
 
-  background-color: var(--gray-3);
+  &[data-size="minor"] {
+    .option {
+      padding: var(--space-2) var(--space-3);
+      font-size: 0.75em;
+    }
+  }
 
   .indicator {
     position: absolute;
     top: 0;
     height: 100%;
 
-    background-color: var(--accent-3);
     outline: var(--outline-focus);
     border-radius: var(--radius-max);
 
     transition: var(--duration-brief);
   }
 
+  &[data-variant="solid"] {
+    background-color: var(--gray-3);
+
+    .indicator {
+      background-color: var(--accent-3);
+    }
+  }
+
+  &[data-variant="underline"] {
+    border-radius: 0;
+
+    .indicator {
+      top: auto;
+      bottom: 0;
+
+      background: linear-gradient(transparent, var(--accent-a2));
+
+      outline: none;
+      border-radius: 0;
+
+      border-bottom: var(--space-1) solid var(--accent-9);
+    }
+  }
+
   .option {
     position: relative;
 

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

@@ -1,22 +1,26 @@
 import { type ReactNode } from "react";
 import styles from "./index.module.css";
 
-export interface SegmentedControlOption<Value extends string | number> {
-  value: Value;
+export interface SegmentedControlOption {
+  value: string;
   label: ReactNode;
 }
 
-export interface SegmentedControlProps<Value extends string | number> {
-  options: readonly SegmentedControlOption<Value>[];
-  value: Value;
-  onValueChange(value: Value): void;
+export interface SegmentedControlProps {
+  options: readonly SegmentedControlOption[];
+  value: string;
+  onValueChange(value: string): void;
+  size?: "regular" | "minor";
+  variant?: "solid" | "underline";
 }
 
-export function SegmentedControl<Value extends string | number>({
+export function SegmentedControl({
   options,
   value,
   onValueChange,
-}: SegmentedControlProps<Value>) {
+  size = "regular",
+  variant = "solid",
+}: SegmentedControlProps) {
   const selectedIndex = options.findIndex((option) => option.value === value);
   const segmentWidth = 100 / options.length;
 
@@ -24,7 +28,11 @@ export function SegmentedControl<Value extends string | number>({
     <div
       className={styles.options}
       role="radiogroup"
-      style={{ gridTemplateColumns: `repeat(${options.length}, 1fr)` }}
+      data-size={size}
+      data-variant={variant}
+      style={{
+        gridTemplateColumns: `repeat(${options.length}, minmax(0, 1fr))`,
+      }}
     >
       <div
         className={styles.indicator}

packages/website/src/components/TankCard/index.module.css

@@ -40,4 +40,10 @@
       overflow: hidden;
     }
   }
+
+  .discriminator {
+    display: flex;
+    justify-content: center;
+    gap: var(--space-2);
+  }
 }

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

@@ -82,7 +82,7 @@ export const TankCard = (props: MaybeSkeletonComponentProps<TankCardProps>) => {
 
       {props.discriminator && (
         <Text lowContrast align="center">
-          {props.discriminator}
+          <div className={styles.discriminator}>{props.discriminator}</div>
         </Text>
       )}
     </Flex>

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

@@ -1,145 +0,0 @@
-import {
-  normalizeBoundingBox,
-  resolveDpm,
-  unionBoundingBox,
-} from "@blitzkit/core";
-import type { TankDefinition } from "@blitzkit/protos";
-import { useMemo } from "react";
-import { api } from "../../../api/dynamic";
-import { resolveReload } from "../../../core/blitzkit/resolveReload";
-import { TankSort } from "../../../stores/tankopediaSort";
-import { TankCard } from "../../TankCard";
-
-interface TankSearchCardProps {
-  tank: TankDefinition;
-  onSelect?: (tank: TankDefinition) => void;
-}
-
-const modelDefinitions = await api.models();
-
-export function TankSearchCard({ tank, onSelect }: TankSearchCardProps) {
-  const by = TankSort.use((state) => state.by);
-  const discriminator = useMemo(() => {
-    if (by.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 shell2 = gun.shells[2];
-    const tracks = tank.tracks.at(-1)!;
-    const engine = tank.engines.at(-1)!;
-    const tankModelDefinition = modelDefinitions.models[tank.id];
-    const turretModelDefinition = tankModelDefinition.turrets[turret.id];
-    const gunModelDefinition = turretModelDefinition.guns[gun.id];
-
-    switch (by) {
-      case "fire.aimTime":
-        return gun.aim_time.toFixed(2);
-      case "fire.caliber":
-        return shell0.caliber.toFixed(0);
-      case "fire.damage":
-        return shell0.armor_damage.toFixed(0);
-      case "fire.moduleDamage":
-        return shell0.module_damage.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 shell0?.penetration!.near.toFixed(0);
-      case "fire.premiumPenetration":
-        return shell1 ? shell1?.penetration!.near.toFixed(0) : "--";
-      case "fire.tertiaryPenetration":
-        return shell1 ? shell2?.penetration!.near.toFixed(0) : "--";
-      case "fire.shellVelocity":
-        return shell0.velocity.toFixed(0);
-      case "fire.shellCapacity":
-        return gun.shell_capacity.toFixed(0);
-      case "fire.shellRange":
-        return shell0.range.toFixed(0);
-      case "fire.gunDepression":
-        return (
-          gunModelDefinition.pitch!.max +
-          (tankModelDefinition.initial_turret_rotation?.pitch ?? 0)
-        ).toFixed(1);
-      case "fire.gunElevation":
-        return (
-          -gunModelDefinition.pitch!.min -
-          (tankModelDefinition.initial_turret_rotation?.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.traverse_speed.toFixed(1);
-      case "survivability.health":
-        return (tank.health + turret.health).toFixed(0);
-      case "survivability.viewRange":
-        return turret.view_range.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.camouflage_loss * 100).toFixed(0);
-      case "survivability.volume": {
-        const dimensions = normalizeBoundingBox(
-          unionBoundingBox(
-            tankModelDefinition.bounding_box!,
-            turretModelDefinition.bounding_box!,
-          ),
-        );
-
-        return (dimensions.x * dimensions.y * dimensions.z).toFixed(0);
-      }
-
-      case "survivability.length": {
-        const bounds = normalizeBoundingBox(
-          unionBoundingBox(
-            tankModelDefinition.bounding_box!,
-            turretModelDefinition.bounding_box!,
-          ),
-        );
-
-        return Math.max(bounds.x, bounds.y, bounds.z).toFixed(0);
-      }
-    }
-  }, [by]);
-
-  return (
-    <TankCard
-      key={tank.id}
-      onTankSelect={onSelect}
-      tank={tank}
-      discriminator={discriminator}
-    />
-  );
-}

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

@@ -1,40 +1,37 @@
 import { CaretDownIcon } from "@radix-ui/react-icons";
+import { characteristicsGroups } from "../../../config/characteristicsGroups";
 import { useStrings } from "../../../hooks/useStrings";
-import type {
-  TankopediaSortBy,
-  TankopediaSortDirection,
-} from "../../../stores/tankopediaPersistent";
+import { TankopediaSortDirection } from "../../../stores/tankopediaPersistent";
 import { TankSort } from "../../../stores/tankopediaSort";
+import { sortableCharacteristics } from "../../../tankopedia/sortableCharacteristics";
+import type { CharacteristicName } from "../../../types/characteristics";
 import { Button } from "../../Button";
 import { DropdownMenu } from "../../DropdownMenu";
 
 interface ItemProps {
-  by: TankopediaSortBy;
-}
-
-interface ItemProps {
-  by: TankopediaSortBy;
+  by: CharacteristicName;
 }
 
 function Item({ by }: ItemProps) {
   const strings = useStrings();
-  const _by = TankSort.use((state) => state.by);
+  const selectedBy = TankSort.use((state) => state.by);
 
   return (
     <DropdownMenu.CheckboxItem
-      checked={_by === by}
+      checked={selectedBy === by}
       onClick={() => {
         TankSort.mutate((draft) => {
           draft.by = by;
         });
       }}
     >
-      {strings.website.common.tank_search.sort[by]}
+      {strings.tanks.characteristics.items[by]}
     </DropdownMenu.CheckboxItem>
   );
 }
 
 export function Sort() {
+  const by = TankSort.use((state) => state.by);
   const direction = TankSort.use((state) => state.direction);
   const strings = useStrings();
 
@@ -42,103 +39,79 @@ export function Sort() {
     <DropdownMenu.Root>
       <DropdownMenu.Trigger asChild>
         <Button variant="surface" color="gray">
-          {strings.website.common.tank_search.sort_dropdown.label}
+          {strings.website.common.tank_search.sort.label}
           <CaretDownIcon />
         </Button>
       </DropdownMenu.Trigger>
 
       <DropdownMenu.Content align="end">
         <DropdownMenu.Label>
-          {strings.website.common.tank_search.sort_dropdown.groups.sort.label}
+          {strings.website.common.tank_search.sort.direction.label}
         </DropdownMenu.Label>
 
-        <Item by="meta.none" />
+        <DropdownMenu.CheckboxItem
+          checked={by === null || !sortableCharacteristics.has(by)}
+          onClick={() => {
+            TankSort.mutate((draft) => {
+              draft.by = null;
+            });
+          }}
+        >
+          {strings.website.common.tank_search.sort.none}
+        </DropdownMenu.CheckboxItem>
 
-        <DropdownMenu.Sub>
-          <DropdownMenu.SubTrigger>
-            {strings.website.common.tank_search.sort_dropdown.groups.sort.fire}
-          </DropdownMenu.SubTrigger>
-          <DropdownMenu.SubContent>
-            <Item by="fire.dpm" />
-            <Item by="fire.dpmPremium" />
-            <Item by="fire.reload" />
-            <Item by="fire.caliber" />
-            <Item by="fire.standardPenetration" />
-            <Item by="fire.premiumPenetration" />
-            <Item by="fire.tertiaryPenetration" />
-            <Item by="fire.damage" />
-            <Item by="fire.moduleDamage" />
-            <Item by="fire.shellVelocity" />
-            <Item by="fire.shellRange" />
-            <Item by="fire.shellCapacity" />
-            <Item by="fire.aimTime" />
-            <Item by="fire.dispersionStill" />
-            <Item by="fire.dispersionMoving" />
-            <Item by="fire.gunDepression" />
-            <Item by="fire.gunElevation" />
-          </DropdownMenu.SubContent>
-        </DropdownMenu.Sub>
+        {characteristicsGroups.map((group) => {
+          const items = group.order.filter(
+            (item) => "name" in item && sortableCharacteristics.has(item.name),
+          );
 
-        <DropdownMenu.Sub>
-          <DropdownMenu.SubTrigger>
-            {
-              strings.website.common.tank_search.sort_dropdown.groups.sort
-                .maneuverability
-            }
-          </DropdownMenu.SubTrigger>
-          <DropdownMenu.SubContent>
-            <Item by="maneuverability.forwardsSpeed" />
-            <Item by="maneuverability.backwardsSpeed" />
-            <Item by="maneuverability.power" />
-            <Item by="maneuverability.powerToWeight" />
-            <Item by="maneuverability.weight" />
-            <Item by="maneuverability.traverseSpeed" />
-          </DropdownMenu.SubContent>
-        </DropdownMenu.Sub>
+          return (
+            <DropdownMenu.Sub key={group.name}>
+              <DropdownMenu.SubTrigger>
+                {
+                  (
+                    strings.tanks.characteristics.titles as Record<
+                      string,
+                      string
+                    >
+                  )[group.name]
+                }
+              </DropdownMenu.SubTrigger>
 
-        <DropdownMenu.Sub>
-          <DropdownMenu.SubTrigger>
-            {
-              strings.website.common.tank_search.sort_dropdown.groups.sort
-                .survivability
-            }
-          </DropdownMenu.SubTrigger>
-          <DropdownMenu.SubContent>
-            <Item by="survivability.health" />
-            <Item by="survivability.viewRange" />
-            <Item by="survivability.camouflageStill" />
-            <Item by="survivability.camouflageMoving" />
-            <Item by="survivability.camouflageShooting" />
-            <Item by="survivability.volume" />
-            <Item by="survivability.length" />
-          </DropdownMenu.SubContent>
-        </DropdownMenu.Sub>
+              <DropdownMenu.SubContent>
+                {items.map((item) => {
+                  if (!("name" in item)) return null;
+
+                  return <Item key={item.name} by={item.name} />;
+                })}
+              </DropdownMenu.SubContent>
+            </DropdownMenu.Sub>
+          );
+        })}
 
         <DropdownMenu.Label>
-          {
-            strings.website.common.tank_search.sort_dropdown.groups.direction
-              .label
-          }
+          {strings.website.common.tank_search.sort.direction.label}
         </DropdownMenu.Label>
         <DropdownMenu.RadioGroup
           value={direction}
           onValueChange={(value) => {
+            if (
+              value !== TankopediaSortDirection.Ascending &&
+              value !== TankopediaSortDirection.Descending
+            ) {
+              throw new Error(`Unknown tankopedia sort direction: ${value}`);
+            }
+
             TankSort.mutate((draft) => {
-              draft.direction = value as TankopediaSortDirection;
+              draft.direction = value;
             });
           }}
         >
-          <DropdownMenu.RadioItem value="ascending">
-            {
-              strings.website.common.tank_search.sort_dropdown.groups.direction
-                .ascending
-            }
+          <DropdownMenu.RadioItem value={TankopediaSortDirection.Ascending}>
+            {strings.website.common.tank_search.sort.direction.ascending}
           </DropdownMenu.RadioItem>
-          <DropdownMenu.RadioItem value="descending">
-            {
-              strings.website.common.tank_search.sort_dropdown.groups.direction
-                .descending
-            }
+          <DropdownMenu.RadioItem value={TankopediaSortDirection.Descending}>
+            {strings.website.common.tank_search.sort.direction.descending}
           </DropdownMenu.RadioItem>
         </DropdownMenu.RadioGroup>
       </DropdownMenu.Content>

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

@@ -1,4 +1,4 @@
-import { TIER_ROMAN_NUMERALS } from "@blitzkit/core";
+import { romanize } from "@blitzkit/core";
 import { Flex, IconButton, Text } from "@radix-ui/themes";
 import { memo } from "react";
 import { awaitableTiers } from "../../../core/awaitables/tiers";
@@ -12,7 +12,9 @@ export const TierFilter = memo(() => {
   const search = TankFilters.use((state) => state.search);
   const tiers = TankFilters.use((state) => state.tiers);
 
-  if (by !== "meta.none" || search) return null;
+  if (by !== null || search) {
+    return null;
+  }
 
   return (
     <Flex justify="center">
@@ -41,7 +43,7 @@ export const TierFilter = memo(() => {
                 });
               }}
             >
-              <Text size="2">{TIER_ROMAN_NUMERALS[tier]}</Text>
+              <Text size="2">{romanize(tier)}</Text>
             </IconButton>
           );
         })}

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

@@ -1,10 +1,4 @@
-import {
-  metaSortTank,
-  normalizeBoundingBox,
-  resolveDpm,
-  SEARCH_KEYS,
-  unionBoundingBox,
-} from "@blitzkit/core";
+import { metaSortTank, SEARCH_KEYS } from "@blitzkit/core";
 import { literals } from "@blitzkit/i18n/src/literals";
 import type { TankDefinition } from "@blitzkit/protos";
 import fuzzysort from "fuzzysort";
@@ -12,16 +6,26 @@ import { uniq } from "lodash-es";
 import { memo, useMemo } from "react";
 import usePromise from "react-promise-suspense";
 import { api } from "../../api/dynamic";
+import { characteristics } from "../../config/characteristics";
+import { characteristicRenderConfigs } from "../../config/characteristicsGroups";
 import { awaitableTankNames } from "../../core/awaitables/tankNames";
 import { filterTanks } from "../../core/blitzkit/filterTanks";
-import { resolveReload } from "../../core/blitzkit/resolveReload";
+import { useCharacteristicRenderer } from "../../hooks/useCharacteristicRenderer";
+import { computeDefaultCharacteristics } from "../../hooks/useCharacteristics";
 import { useLocale } from "../../hooks/useLocale";
 import { useStrings } from "../../hooks/useStrings";
 import { App } from "../../stores/app";
 import { TankFilters } from "../../stores/tankFilters";
-import { TankopediaPersistent } from "../../stores/tankopediaPersistent";
-import { SORT_UNITS } from "../../stores/tankopediaPersistent/constants";
+import {
+  TankopediaPersistent,
+  TankopediaSortDirection,
+} from "../../stores/tankopediaPersistent";
 import { TankSort } from "../../stores/tankopediaSort";
+import { sortableCharacteristics } from "../../tankopedia/sortableCharacteristics";
+import {
+  CharacteristicType,
+  type ComputedCharacteristics,
+} from "../../types/characteristics";
 import type { MaybeSkeletonComponentProps } from "../../types/maybeSkeletonComponentProps";
 import { Callout } from "../Callout";
 import { ExperimentIcon } from "../ExperimentIcon";
@@ -44,386 +48,170 @@ export type TankSearchProps = MaybeSkeletonComponentProps & {
   onSelectAll?: (tanks: TankDefinition[]) => void;
 };
 
-const [gameDefinitions, modelDefinitions, tankDefinitions, tankNames] =
-  await Promise.all([
-    api.game(),
-    api.models(),
-    api.tanks(),
-    awaitableTankNames,
-  ]);
+const [gameDefinitions, tankDefinitions, tankNames] = await Promise.all([
+  api.game(),
+  api.tanks(),
+  awaitableTankNames,
+]);
+const tankDefinitionsArray = Object.values(tankDefinitions.tanks);
 
 export const TankSearch = memo<TankSearchProps>(
   ({ compact, onSelect, onSelectAll, skeleton }) => {
     const strings = useStrings();
     const locale = useLocale();
+
     const wargaming = App.use((state) => state.logins.wargaming);
-    const awaitedTanksDefinitionsArray = Object.values(tankDefinitions.tanks);
+
     const tankopediaSort = TankSort.use();
     const tankFilters = TankFilters.use();
 
+    const defaultCharacteristics = useMemo(() => {
+      const computed = new Map<number, ComputedCharacteristics>();
+
+      for (const tank of tankDefinitionsArray) {
+        computed.set(tank.id, computeDefaultCharacteristics(tank));
+      }
+
+      return computed;
+    }, []);
+
     const filtered = usePromise(
-      () => {
-        if (tankFilters.search === null) {
-          return filterTanks(
-            tankFilters,
-            awaitedTanksDefinitionsArray,
-            wargaming?.id,
-          );
-        } else {
-          return Promise.resolve(
-            fuzzysort
-              .go(tankFilters.search, tankNames, { keys: SEARCH_KEYS })
-              .map((result) => tankDefinitions.tanks[result.obj.id]),
+      async () => {
+        let filtered = tankDefinitionsArray;
+
+        console.log("A");
+
+        if (tankopediaSort.by !== null) {
+          console.log("B", filtered.length);
+
+          filtered = filtered.filter((tank) =>
+            defaultCharacteristics.get(tank.id)!.has(tankopediaSort.by!),
           );
+
+          console.log("C", filtered.length);
         }
+
+        if (tankFilters.search === null) {
+          filtered = await filterTanks(tankFilters, filtered, wargaming?.id);
+        } else {
+          filtered = fuzzysort
+            .go(tankFilters.search, tankNames, { keys: SEARCH_KEYS })
+            .map((result) => tankDefinitions.tanks[result.obj.id]);
+        }
+
+        return filtered;
       },
       // react-promise-suspense has awful type annotations
-      [tankFilters] as any,
+      [tankFilters, tankopediaSort.by] as any,
     );
+
     const sorted = useMemo(() => {
-      if (tankFilters.search === null) {
-        let sorted: TankDefinition[];
+      if (tankFilters.search !== null) return filtered;
 
-        switch (tankopediaSort.by) {
-          case "meta.none":
-            sorted = metaSortTank(filtered, gameDefinitions);
-            break;
+      if (
+        tankopediaSort.by === null ||
+        !sortableCharacteristics.has(tankopediaSort.by)
+      ) {
+        const byMeta = metaSortTank([...filtered], gameDefinitions);
 
-          case "survivability.health": {
-            sorted = filtered.sort((a, b) => {
-              const aHealth = a.health + a.turrets.at(-1)!.health;
-              const bHealth = b.health + b.turrets.at(-1)!.health;
+        return tankopediaSort.direction === TankopediaSortDirection.Ascending
+          ? byMeta
+          : byMeta.reverse();
+      }
+
+      const values = new Map<number, number | undefined>();
+      const by = tankopediaSort.by;
+      const characteristic = characteristics[by];
+
+      for (const tank of filtered) {
+        const computedCharacteristics = defaultCharacteristics.get(tank.id)!;
+        if (!computedCharacteristics.has(by)) {
+          values.set(tank.id, undefined);
+          continue;
+        }
+
+        const value = computedCharacteristics.get(by);
+
+        let sortValue: number | undefined;
+
+        switch (characteristic.type) {
+          case CharacteristicType.Number: {
+            sortValue = value as number;
 
-              return aHealth - bHealth;
-            });
             break;
           }
 
-          case "survivability.viewRange":
-            sorted = filtered.sort(
-              (a, b) =>
-                a.turrets.at(-1)!.view_range - b.turrets.at(-1)!.view_range,
+          case CharacteristicType.NumberList: {
+            const values = value as number[];
+            if (values.length === 0) {
+              sortValue = undefined;
+              break;
+            }
+
+            let sum = 0;
+
+            for (const item of values) {
+              sum += item;
+            }
+
+            sortValue = sum / values.length;
+
+            break;
+          }
+
+          default:
+            throw new Error(
+              `Unsortable characteristic type ${characteristic.type}`,
             );
-            break;
-
-          case "survivability.camouflageStill":
-            sorted = filtered.sort(
-              (a, b) => a.camouflage_still - b.camouflage_still,
-            );
-            break;
-
-          case "survivability.camouflageMoving":
-            sorted = filtered.sort(
-              (a, b) => a.camouflage_moving - b.camouflage_moving,
-            );
-            break;
-
-          case "survivability.camouflageShooting":
-            sorted = filtered.sort(
-              (a, b) =>
-                a.camouflage_still *
-                  a.turrets.at(-1)!.guns.at(-1)!.camouflage_loss -
-                b.camouflage_still *
-                  b.turrets.at(-1)!.guns.at(-1)!.camouflage_loss,
-            );
-            break;
-
-          case "survivability.volume":
-            sorted = filtered.sort((a, b) => {
-              const aTankModelDefinition = modelDefinitions.models[a.id];
-              const bTankModelDefinition = modelDefinitions.models[b.id];
-              const aTurretModelDefinition =
-                aTankModelDefinition.turrets[a.turrets.at(-1)!.id];
-              const bTurretModelDefinition =
-                bTankModelDefinition.turrets[b.turrets.at(-1)!.id];
-              const aSize = normalizeBoundingBox(
-                unionBoundingBox(
-                  aTankModelDefinition.bounding_box!,
-                  aTurretModelDefinition.bounding_box!,
-                ),
-              );
-              const bSize = normalizeBoundingBox(
-                unionBoundingBox(
-                  bTankModelDefinition.bounding_box!,
-                  bTurretModelDefinition.bounding_box!,
-                ),
-              );
-              const aVolume = aSize.x * aSize.y * aSize.z;
-              const bVolume = bSize.x * bSize.y * bSize.z;
-
-              return aVolume - bVolume;
-            });
-            break;
-
-          case "survivability.length":
-            sorted = filtered.sort((a, b) => {
-              const aTankModelDefinition = modelDefinitions.models[a.id];
-              const bTankModelDefinition = modelDefinitions.models[b.id];
-              const aTurretModelDefinition =
-                aTankModelDefinition.turrets[a.turrets.at(-1)!.id];
-              const bTurretModelDefinition =
-                bTankModelDefinition.turrets[b.turrets.at(-1)!.id];
-              const aSize = normalizeBoundingBox(
-                unionBoundingBox(
-                  aTankModelDefinition.bounding_box!,
-                  aTurretModelDefinition.bounding_box!,
-                ),
-              );
-              const bSize = normalizeBoundingBox(
-                unionBoundingBox(
-                  bTankModelDefinition.bounding_box!,
-                  bTurretModelDefinition.bounding_box!,
-                ),
-              );
-              const aLength = Math.max(aSize.x, aSize.y, aSize.z);
-              const bLength = Math.max(bSize.x, bSize.y, bSize.z);
-
-              return aLength - bLength;
-            });
-            break;
-
-          case "fire.dpm":
-            sorted = filtered.sort(
-              (a, b) =>
-                resolveDpm(
-                  a.turrets.at(-1)!.guns.at(-1)!,
-                  a.turrets.at(-1)!.guns.at(-1)!.shells[0],
-                ) -
-                resolveDpm(
-                  b.turrets.at(-1)!.guns.at(-1)!,
-                  b.turrets.at(-1)!.guns.at(-1)!.shells[0],
-                ),
-            );
-            break;
-
-          case "fire.dpmPremium":
-            sorted = filtered.sort(
-              (a, b) =>
-                (a.turrets.at(-1)!.guns.at(-1)!.shells[1]
-                  ? resolveDpm(
-                      a.turrets.at(-1)!.guns.at(-1)!,
-                      a.turrets.at(-1)!.guns.at(-1)!.shells[1],
-                    )
-                  : 0) -
-                (b.turrets.at(-1)!.guns.at(-1)!.shells[1]
-                  ? resolveDpm(
-                      b.turrets.at(-1)!.guns.at(-1)!,
-                      b.turrets.at(-1)!.guns.at(-1)!.shells[1],
-                    )
-                  : 0),
-            );
-            break;
-
-          case "fire.reload":
-            sorted = filtered.sort(
-              (a, b) =>
-                resolveReload(a.turrets.at(-1)!.guns.at(-1)!) -
-                resolveReload(b.turrets.at(-1)!.guns.at(-1)!),
-            );
-            break;
-
-          case "fire.caliber":
-            sorted = filtered.sort(
-              (a, b) =>
-                a.turrets.at(-1)!.guns.at(-1)!.shells[0].caliber -
-                b.turrets.at(-1)!.guns.at(-1)!.shells[0].caliber,
-            );
-            break;
-
-          case "fire.standardPenetration":
-            sorted = filtered.sort(
-              (a, b) =>
-                a.turrets.at(-1)!.guns.at(-1)!.shells[0].penetration!.near -
-                b.turrets.at(-1)!.guns.at(-1)!.shells[0].penetration!.near,
-            );
-            break;
-
-          case "fire.premiumPenetration":
-            sorted = filtered.sort(
-              (a, b) =>
-                (a.turrets.at(-1)!.guns.at(-1)!.shells[1]?.penetration!.near ??
-                  0) -
-                (b.turrets.at(-1)!.guns.at(-1)!.shells[1]?.penetration!.near ??
-                  0),
-            );
-            break;
-
-          case "fire.tertiaryPenetration":
-            sorted = filtered.sort(
-              (a, b) =>
-                (a.turrets.at(-1)!.guns.at(-1)!.shells[2]?.penetration!.near ??
-                  0) -
-                (b.turrets.at(-1)!.guns.at(-1)!.shells[2]?.penetration!.near ??
-                  0),
-            );
-            break;
-
-          case "fire.damage":
-            sorted = filtered.sort(
-              (a, b) =>
-                a.turrets.at(-1)!.guns.at(-1)!.shells[0].armor_damage -
-                b.turrets.at(-1)!.guns.at(-1)!.shells[0].armor_damage,
-            );
-            break;
-
-          case "fire.moduleDamage":
-            sorted = filtered.sort(
-              (a, b) =>
-                a.turrets.at(-1)!.guns.at(-1)!.shells[0].module_damage -
-                b.turrets.at(-1)!.guns.at(-1)!.shells[0].module_damage,
-            );
-            break;
-
-          case "fire.shellVelocity":
-            sorted = filtered.sort(
-              (a, b) =>
-                a.turrets.at(-1)!.guns.at(-1)!.shells[0].velocity -
-                b.turrets.at(-1)!.guns.at(-1)!.shells[0].velocity,
-            );
-            break;
-
-          case "fire.shellRange":
-            sorted = filtered.sort(
-              (a, b) =>
-                a.turrets.at(-1)!.guns.at(-1)!.shells[0].range -
-                b.turrets.at(-1)!.guns.at(-1)!.shells[0].range,
-            );
-            break;
-
-          case "fire.shellCapacity":
-            sorted = filtered.sort(
-              (a, b) =>
-                a.turrets.at(-1)!.guns.at(-1)!.shell_capacity -
-                b.turrets.at(-1)!.guns.at(-1)!.shell_capacity,
-            );
-            break;
-
-          case "fire.aimTime":
-            sorted = filtered.sort(
-              (a, b) =>
-                a.turrets.at(-1)!.guns.at(-1)!.aim_time -
-                b.turrets.at(-1)!.guns.at(-1)!.aim_time,
-            );
-            break;
-
-          case "fire.dispersionStill":
-            sorted = filtered.sort(
-              (a, b) =>
-                a.turrets.at(-1)!.guns.at(-1)!.dispersion_base -
-                b.turrets.at(-1)!.guns.at(-1)!.dispersion_base,
-            );
-            break;
-
-          case "fire.dispersionMoving":
-            sorted = filtered.sort(
-              (a, b) =>
-                a.tracks.at(-1)!.dispersion_move -
-                b.tracks.at(-1)!.dispersion_move,
-            );
-            break;
-
-          case "fire.gunDepression":
-            sorted = filtered.sort(
-              (a, b) =>
-                modelDefinitions.models[a.id].turrets[a.turrets.at(-1)!.id]
-                  .guns[a.turrets.at(-1)!.guns.at(-1)!.id].pitch!.max +
-                (modelDefinitions.models[a.id].initial_turret_rotation?.pitch ??
-                  0) -
-                modelDefinitions.models[b.id].turrets[b.turrets.at(-1)!.id]
-                  .guns[b.turrets.at(-1)!.guns.at(-1)!.id].pitch!.max -
-                (modelDefinitions.models[b.id].initial_turret_rotation?.pitch ??
-                  0),
-            );
-            break;
-
-          case "fire.gunElevation":
-            sorted = filtered.sort(
-              (a, b) =>
-                modelDefinitions.models[b.id].turrets[b.turrets.at(-1)!.id]
-                  .guns[b.turrets.at(-1)!.guns.at(-1)!.id].pitch!.min +
-                (modelDefinitions.models[b.id].initial_turret_rotation?.pitch ??
-                  0) -
-                modelDefinitions.models[a.id].turrets[a.turrets.at(-1)!.id]
-                  .guns[a.turrets.at(-1)!.guns.at(-1)!.id].pitch!.min -
-                (modelDefinitions.models[a.id].initial_turret_rotation?.pitch ??
-                  0),
-            );
-            break;
-
-          case "maneuverability.forwardsSpeed":
-            sorted = filtered.sort(
-              (a, b) => a.speed_forwards - b.speed_forwards,
-            );
-            break;
-
-          case "maneuverability.backwardsSpeed":
-            sorted = filtered.sort(
-              (a, b) => a.speed_backwards - b.speed_backwards,
-            );
-            break;
-
-          case "maneuverability.power":
-            sorted = filtered.sort(
-              (a, b) => a.engines.at(-1)!.power - b.engines.at(-1)!.power,
-            );
-            break;
-
-          case "maneuverability.powerToWeight":
-            sorted = filtered.sort(
-              (a, b) =>
-                a.engines.at(-1)!.power /
-                  (a.weight +
-                    a.engines.at(-1)!.weight +
-                    a.tracks.at(-1)!.weight +
-                    a.turrets.at(-1)!.weight +
-                    a.turrets.at(-1)!.guns.at(-1)!.weight) -
-                b.engines.at(-1)!.power /
-                  (b.weight +
-                    b.engines.at(-1)!.weight +
-                    b.tracks.at(-1)!.weight +
-                    b.turrets.at(-1)!.weight +
-                    b.turrets.at(-1)!.guns.at(-1)!.weight),
-            );
-            break;
-
-          case "maneuverability.weight":
-            sorted = filtered.sort(
-              (a, b) =>
-                a.weight +
-                a.engines.at(-1)!.weight +
-                a.tracks.at(-1)!.weight +
-                a.turrets.at(-1)!.weight +
-                a.turrets.at(-1)!.guns.at(-1)!.weight -
-                (b.weight +
-                  b.engines.at(-1)!.weight +
-                  b.tracks.at(-1)!.weight +
-                  b.turrets.at(-1)!.weight +
-                  b.turrets.at(-1)!.guns.at(-1)!.weight),
-            );
-            break;
-
-          case "maneuverability.traverseSpeed":
-            sorted = filtered.sort(
-              (a, b) =>
-                a.tracks.at(-1)!.traverse_speed -
-                b.tracks.at(-1)!.traverse_speed,
-            );
-            break;
         }
 
-        return tankopediaSort.direction === "ascending"
-          ? sorted
-          : sorted.reverse();
-      } else {
-        return filtered;
+        values.set(tank.id, sortValue);
       }
+
+      const direction =
+        tankopediaSort.direction === TankopediaSortDirection.Ascending ? 1 : -1;
+
+      return [...filtered].sort((a, b) => {
+        const aValue = values.get(a.id);
+        const bValue = values.get(b.id);
+
+        if (aValue === undefined) return bValue === undefined ? 0 : 1;
+        if (bValue === undefined) return -1;
+
+        if (aValue === bValue) return 0;
+
+        return (aValue < bValue ? -1 : 1) * direction;
+      });
     }, [tankFilters, tankopediaSort]);
 
-    const data = sorted.map((tank) => ({
-      key: `${tank.id}`,
-      tank,
-      onTankSelect: onSelect,
-    }));
+    console.log("V", sorted.length);
+
+    const sortConfig =
+      tankopediaSort.by !== null &&
+      sortableCharacteristics.has(tankopediaSort.by)
+        ? tankopediaSort.by
+        : undefined;
+
+    const renderCharacteristic = useCharacteristicRenderer();
+
+    const data = sorted.map((tank) => {
+      const tankDefaultCharacteristics = defaultCharacteristics.get(tank.id)!;
+      const shouldRenderDiscriminator =
+        tankopediaSort.by !== null &&
+        tankDefaultCharacteristics.has(tankopediaSort.by);
+
+      return {
+        key: `${tank.id}`,
+        tank,
+        discriminator: shouldRenderDiscriminator
+          ? renderCharacteristic(
+              tankDefaultCharacteristics.get(tankopediaSort.by!)!,
+              characteristicRenderConfigs.get(tankopediaSort.by!)!,
+            )
+          : null,
+        onTankSelect: onSelect,
+      };
+    });
 
     return (
       <Flex className={styles.container} column gap="4">
@@ -470,16 +258,16 @@ export const TankSearch = memo<TankSearchProps>(
               )}
             </div>
 
-            {tankopediaSort.by !== "meta.none" && (
+            {sortConfig && (
               <Text color="gray">
                 {literals(strings.website.common.tank_search.sorting_by, {
-                  name: strings.website.common.tank_search.sort[
-                    tankopediaSort.by
-                  ],
+                  name: (
+                    strings.tanks.characteristics.items as Record<
+                      string,
+                      string
+                    >
+                  )[sortConfig],
                 })}
-                {SORT_UNITS[tankopediaSort.by] === undefined
-                  ? ""
-                  : ` (${SORT_UNITS[tankopediaSort.by]})`}
                 , {tankopediaSort.direction}
               </Text>
             )}

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

@@ -1,9 +1,4 @@
-import {
-  alias,
-  gunTypeOrder,
-  TIER_ROMAN_NUMERALS,
-  treeTypeOrder,
-} from "@blitzkit/core";
+import { alias, gunTypeOrder, romanize, treeTypeOrder } from "@blitzkit/core";
 import { tankClassOrder } from "@blitzkit/core/src/config/tankClassOrder";
 import { literals } from "@blitzkit/i18n";
 import locales from "@blitzkit/i18n/locales.json";
@@ -203,7 +198,7 @@ function TiersFilter() {
           <Flex gap="1">
             {tiers.slice(0, MAX_ICONS).map((tier) => (
               <Text size="minor" key={tier}>
-                {TIER_ROMAN_NUMERALS[tier]}
+                {romanize(tier)}
               </Text>
             ))}
 
@@ -239,7 +234,7 @@ function TiersFilter() {
               key={tier}
             >
               {literals(strings.website.common.tank_search.tier, {
-                tier: TIER_ROMAN_NUMERALS[tier],
+                tier: romanize(tier),
               })}
             </DropdownMenu.CheckboxItem>
           );
@@ -620,13 +615,7 @@ function IndividualShellFilter({
   return (
     <DropdownMenu.Root modal={false}>
       <DropdownMenu.Trigger asChild>
-        <IconButton
-          listChild
-          size="minor"
-          variant="surface"
-          color="gray"
-          highContrast
-        >
+        <IconButton listChild size="minor" variant="surface" color="gray">
           {shells[index] === null && (
             <Text lowContrast className={styles["shell-icon"]}>
               <MissingShellIcon width="1em" height="1em" />
@@ -739,10 +728,10 @@ function OwnershipFilterInternal() {
           borderTopRightRadius: 0,
           borderBottomRightRadius: 0,
         }}
+        listChild
         disabled={!wargaming}
         variant={showOwned ? "solid" : "surface"}
         color={showOwned ? undefined : "gray"}
-        highContrast
         onClick={() => {
           TankFilters.mutate((draft) => {
             draft.showOwned = !draft.showOwned;
@@ -759,10 +748,10 @@ function OwnershipFilterInternal() {
           borderBottomLeftRadius: 0,
           marginLeft: "-1px",
         }}
+        listChild
         disabled={!wargaming}
         variant={showUnowned ? "solid" : "surface"}
         color={showUnowned ? undefined : "gray"}
-        highContrast
         onClick={() => {
           TankFilters.mutate((draft) => {
             draft.showUnowned = !draft.showUnowned;
@@ -789,7 +778,7 @@ function TestFilter() {
         }}
         variant={showNonTesting ? "solid" : "surface"}
         color={showNonTesting ? undefined : "gray"}
-        highContrast
+        listChild
         onClick={() => {
           TankFilters.mutate((draft) => {
             draft.showNonTesting = !draft.showNonTesting;
@@ -810,7 +799,7 @@ function TestFilter() {
         }}
         variant={showTesting ? "solid" : "surface"}
         color={showTesting ? undefined : "gray"}
-        highContrast
+        listChild
         onClick={() => {
           TankFilters.mutate((draft) => {
             draft.showTesting = !draft.showTesting;

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/GunFlexibilityVisualizer/index.tsx

@@ -296,7 +296,7 @@ export function GunFlexibilityVisualizer({
             height="100%"
             style={{
               opacity: 2 ** -3,
-              backgroundImage: `url(/media/random/armor-hash.png)`,
+              backgroundImage: `url(/media/toys/armor-hash.png)`,
               boxShadow: "inset 0 0 4rem 1rem black",
             }}
           />

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/ReloadVisualizer/components/Shell.tsx

@@ -69,7 +69,7 @@ export function Shell({ index, stats }: ShellProps & StatsAcceptorProps) {
             borderRadius: '0.25rem',
             overflow: 'hidden',
             maskImage:
-              'url(/assets/images/tankopedia/visualizers/reload/shell.png)',
+              'url(/media/toys/shell.png)',
             maskSize: 'contain',
             maskRepeat: 'no-repeat',
             maskPosition: 'center',

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/ReloadVisualizer/components/Target.tsx

@@ -5,7 +5,7 @@ export function Target() {
     <Box
       style={{
         background:
-          'url(/assets/images/tankopedia/visualizers/reload/background.jpg)',
+          'url(/media/toys/background.jpg)',
         backgroundSize: '25rem',
         backgroundPosition: 'center',
         position: 'absolute',

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/RicochetVisualizer/index.tsx

@@ -60,7 +60,7 @@ export function RicochetVisualizer({ stats }: StatsAcceptorProps) {
             height="100%"
             style={{
               opacity: 2 ** -3,
-              backgroundImage: `url(/media/random/armor-hash.png)`,
+              backgroundImage: `url(/media/toys/armor-hash.png)`,
             }}
           />
         </Box>

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Modules.tsx

@@ -2,7 +2,7 @@ import {
   alias,
   formatCompact,
   tankIcon,
-  TIER_ROMAN_NUMERALS,
+  romanize,
 } from "@blitzkit/core";
 import {
   EngineDefinition,
@@ -93,7 +93,7 @@ function ModuleButton({
           top: isTank ? 8 : 4,
         }}
       >
-        {TIER_ROMAN_NUMERALS[tier]}
+        {romanize(tier)}
       </Text>
 
       {unlock.cost!.value > 0 && (

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Skills.tsx

@@ -1,3 +1,4 @@
+import { MAX_SKILL_LEVEL } from "@blitzkit/core";
 import { InfoCircledIcon } from "@radix-ui/react-icons";
 import {
   Button,
@@ -59,7 +60,7 @@ export function Skills() {
           onClick={() => {
             Tankopedia.mutate((draft) => {
               Object.keys(draft.skills).forEach((skill) => {
-                draft.skills[skill] = 7;
+                draft.skills[skill] = MAX_SKILL_LEVEL;
               });
             });
           }}

packages/website/src/components/Tankopedia/HeroSection/components/Options/index.tsx

@@ -1,7 +1,7 @@
 import {
   alias,
   resolvePenetrationCoefficient,
-  TIER_ROMAN_NUMERALS,
+  romanize,
   uniqueGuns,
 } from "@blitzkit/core";
 import { literals } from "@blitzkit/i18n/src/literals";
@@ -137,7 +137,7 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) {
                   mr="2"
                   mb="1"
                 >
-                  {TIER_ROMAN_NUMERALS[antagonistGun.tier]}
+                  {romanize(antagonistGun.tier)}
                 </Text>
 
                 <img
@@ -166,7 +166,7 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) {
                       })
                     }
                     selected={gun.id === antagonistGun.id}
-                    discriminator={TIER_ROMAN_NUMERALS[gun.tier]}
+                    discriminator={romanize(gun.tier)}
                     secondaryDiscriminator={
                       <Text style={{ fontSize: "0.75em" }}>
                         {literals(strings.common.units.mm, {

packages/website/src/components/Tankopedia/MetaSection/index.tsx

@@ -1,4 +1,4 @@
-import { alias, TIER_ROMAN_NUMERALS } from "@blitzkit/core";
+import { alias, romanize } from "@blitzkit/core";
 import { TankPriceType, TankType } from "@blitzkit/protos";
 import { Box, Flex } from "@radix-ui/themes";
 import { Var } from "../../../core/radix/var";
@@ -80,7 +80,7 @@ export function MetaSection() {
                     </Flex>
                   </Listing>
                   <Listing label={strings.website.tools.tankopedia.meta.tier}>
-                    {TIER_ROMAN_NUMERALS[protagonist.tier]}
+                    {romanize(protagonist.tier)}
                   </Listing>
                   <Listing
                     label={strings.website.tools.tankopedia.meta.type}

packages/website/src/components/Tankopedia/TechTreeSection/components/Node.tsx

@@ -1,4 +1,4 @@
-import { alias, formatCompact, TIER_ROMAN_NUMERALS } from "@blitzkit/core";
+import { alias, formatCompact, romanize } from "@blitzkit/core";
 import { literals } from "@blitzkit/i18n/src/literals";
 import { Box, Flex, Skeleton, Text } from "@radix-ui/themes";
 import { api } from "../../../../api/dynamic";
@@ -90,7 +90,7 @@ export function Node({ id, highlight, nextIds, skeleton }: NodeProps) {
           <Flex direction="column" align="center">
             <Flex gap="2" align="center">
               <Text color="gray" size="1">
-                {TIER_ROMAN_NUMERALS[tank.tier]}
+                {romanize(tank.tier)}
               </Text>
               <Text wrap="nowrap">{unwrap(tank.name!)}</Text>
             </Flex>

packages/website/src/components/TankopediaCharacteristics/index.module.css

@@ -2,6 +2,8 @@
   display: flex;
   flex-direction: column;
 
+  container-type: inline-size;
+
   gap: var(--space-4);
   margin: var(--space-4);
 
@@ -115,6 +117,7 @@
 
               .bar {
                 height: 100%;
+                transition: var(--duration-brief);
               }
             }
           }

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

@@ -1,4 +1,4 @@
-import { TIER_ROMAN_NUMERALS } from "@blitzkit/core";
+import { romanize } from "@blitzkit/core";
 import { literals } from "@blitzkit/i18n/src/literals";
 import { useRef } from "react";
 import { characteristicsGroups } from "../../config/characteristicsGroups";
@@ -198,20 +198,23 @@ function CompareOptions() {
 
   const options = useRef([
     {
-      value: TankopediaRelativeAgainst.ClassAndTier,
+      value: `${TankopediaRelativeAgainst.ClassAndTier}`,
+      relativeAgainst: TankopediaRelativeAgainst.ClassAndTier,
       label: literals(strings.tanks.characteristics.compare.class, {
-        tier: TIER_ROMAN_NUMERALS[tank.tier],
+        tier: romanize(tank.tier),
         class: strings.common.tank_class_short_plural_lowercase[tank.class],
       }),
     },
     {
-      value: TankopediaRelativeAgainst.Tier,
+      value: `${TankopediaRelativeAgainst.Tier}`,
+      relativeAgainst: TankopediaRelativeAgainst.Tier,
       label: literals(strings.tanks.characteristics.compare.tier, {
-        tier: TIER_ROMAN_NUMERALS[tank.tier],
+        tier: romanize(tank.tier),
       }),
     },
     {
-      value: TankopediaRelativeAgainst.All,
+      value: `${TankopediaRelativeAgainst.All}`,
+      relativeAgainst: TankopediaRelativeAgainst.All,
       label: strings.tanks.characteristics.compare.all,
     },
   ]);
@@ -221,10 +224,10 @@ function CompareOptions() {
       <Text lowContrast>{strings.tanks.characteristics.compare.label}</Text>
       <SegmentedControl
         options={options.current}
-        value={relativeAgainst}
+        value={`${relativeAgainst}`}
         onValueChange={(value) => {
           Tankopedia.mutate((draft) => {
-            draft.relative_against = value;
+            draft.relative_against = Number(value);
           });
         }}
       />

packages/website/src/components/TankopediaLoadout/index.module.css

@@ -1,6 +1,4 @@
 .section {
-  max-width: 21rem;
-
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -13,6 +11,31 @@
 
     .upgrade-buttons {
       display: flex;
+      gap: var(--space-2);
+    }
+  }
+
+  .crew-skills {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+
+    .row {
+      display: flex;
+      gap: inherit;
+    }
+
+    .skill {
+      position: relative;
+
+      .level {
+        position: absolute;
+
+        right: var(--space-1);
+        bottom: var(--space-1);
+
+        font-size: var(--font-size-minor);
+      }
     }
   }
 
@@ -55,8 +78,8 @@
   }
 
   .consumables {
-    display: flex;
-    flex-wrap: wrap;
+    display: grid;
+    grid-template-columns: repeat(3, max-content);
     gap: var(--space-3);
 
     .consumable-wrapper {

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

@@ -1,6 +1,16 @@
-import { alias } from "@blitzkit/core";
+import {
+  alias,
+  MAX_SKILL_LEVEL,
+  permanentSkills,
+  romanize,
+} from "@blitzkit/core";
 import type { Consumable, EquipmentSlot, Provision } from "@blitzkit/protos";
-import { ClockIcon, ResetIcon, TrashIcon } from "@radix-ui/react-icons";
+import {
+  ClockIcon,
+  DoubleArrowUpIcon,
+  ResetIcon,
+  TrashIcon,
+} from "@radix-ui/react-icons";
 import { chunk } from "lodash-es";
 import { api } from "../../api/dynamic";
 import { equipmentColumns } from "../../config/equipment";
@@ -23,13 +33,14 @@ import styles from "./index.module.css";
 const equipment = await api.equipment();
 const provisions = await api.provisions();
 const consumables = await api.consumables();
+const skills = await api.skills();
 
 interface TankopediaLoadoutProps {
   characteristics: ComputedCharacteristics;
 }
 
 export function TankopediaLoadout({ characteristics }: TankopediaLoadoutProps) {
-  const tank = useDuel("protagonist", DuelModule.Tank);
+  // const tank = useDuel("protagonist", DuelModule.Tank);
   // const showModules = hasUpgrades(tank);
 
   return (
@@ -39,12 +50,103 @@ export function TankopediaLoadout({ characteristics }: TankopediaLoadoutProps) {
       <Equipment />
       <Provisions />
       <Consumables characteristics={characteristics} />
+      <CrewSkills />
       <State />
       <Status />
     </>
   );
 }
 
+function CrewSkills() {
+  const strings = useStrings();
+  const selectedSkills = Tankopedia.use((state) => state.environment.skills);
+
+  return (
+    <div className={styles.section}>
+      <div className={styles.header}>
+        <Heading size="4">{strings.tanks.loadout.skills}</Heading>
+
+        <div className={styles["upgrade-buttons"]}>
+          <IconButton
+            color="red"
+            aria-label={`${strings.tanks.loadout.clear} ${strings.tanks.loadout.skills}`}
+            onClick={() => {
+              Tankopedia.mutate((draft) => {
+                Object.keys(draft.environment.skills).forEach((skill) => {
+                  draft.environment.skills[skill] = 0;
+                });
+              });
+            }}
+          >
+            <TrashIcon />
+          </IconButton>
+
+          <IconButton
+            color="gray"
+            highContrast
+            aria-label={`${strings.tanks.loadout.maximize} ${strings.tanks.loadout.skills}`}
+            onClick={() => {
+              Tankopedia.mutate((draft) => {
+                Object.keys(draft.environment.skills).forEach((skill) => {
+                  draft.environment.skills[skill] = MAX_SKILL_LEVEL;
+                });
+              });
+            }}
+          >
+            <DoubleArrowUpIcon />
+          </IconButton>
+        </div>
+      </div>
+
+      <div className={styles["crew-skills"]}>
+        {Object.entries(skills.classes).map(([tankClass, group]) => (
+          <div key={tankClass} className={styles.row}>
+            {group.skills.map((skill) => (
+              <CrewSkillEntry
+                key={skill}
+                id={skill}
+                level={selectedSkills[skill]}
+                permanent={permanentSkills.includes(skill)}
+              />
+            ))}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+interface CrewSkillEntryProps {
+  id: string;
+  level: number;
+  permanent: boolean;
+}
+
+function CrewSkillEntry({ id, level, permanent }: CrewSkillEntryProps) {
+  return (
+    <IconButton
+      size="major"
+      radius="1"
+      className={styles.skill}
+      color={level === 0 ? "gray" : permanent ? undefined : "amber"}
+      variant={level === 0 ? "soft" : "surface"}
+      onClick={(event) => {
+        Tankopedia.mutate((draft) => {
+          if (event.shiftKey) {
+            draft.environment.skills[id] = level === 0 ? MAX_SKILL_LEVEL : 0;
+          } else {
+            draft.environment.skills[id] =
+              level === 0 ? MAX_SKILL_LEVEL : level - 1;
+          }
+        });
+      }}
+    >
+      <img src={alias("api", `/icons/skills/${id}.webp`)} />
+      {level > 0 && <span className={styles.level}>{romanize(level)}</span>}
+    </IconButton>
+  );
+}
+
 function State() {
   const strings = useStrings();
 
@@ -58,6 +160,7 @@ function State() {
 
         <IconButton
           color="red"
+          aria-label={`${strings.tanks.loadout.clear} ${strings.tanks.loadout.consumables}`}
           onClick={() => {
             Tankopedia.mutate((draft) => {
               draft.protagonist.consumables = [];
@@ -87,6 +190,7 @@ function Status() {
 
         <IconButton
           color="red"
+          aria-label={`${strings.tanks.loadout.clear} ${strings.tanks.loadout.status}`}
           onClick={() => {
             Tankopedia.mutate((draft) => {
               draft.protagonist.consumables = [];
@@ -103,6 +207,8 @@ function Status() {
             {group.map((key) => (
               <IconButton
                 key={key}
+                aria-label={key.replaceAll("_", " ")}
+                aria-pressed={status[key]}
                 radius="1"
                 className={styles.state}
                 color={status[key] ? "amber" : "gray"}
@@ -183,6 +289,7 @@ function Provisions() {
 
         <IconButton
           color="red"
+          aria-label={`${strings.tanks.loadout.clear} ${strings.tanks.loadout.provisions}`}
           onClick={() => {
             Tankopedia.mutate((draft) => {
               draft.protagonist.provisions = [];
@@ -230,6 +337,7 @@ function ProvisionEntry({ id, provision }: ProvisionEntryProps) {
   return (
     <Tooltip tooltip={unwrap(provision.name)}>
       <IconButton
+        aria-label={unwrap(provision.name)}
         size="major"
         radius="1"
         variant={isSelected ? "surface" : "soft"}
@@ -275,6 +383,7 @@ function Consumables({ characteristics }: ConsumablesProps) {
 
         <IconButton
           color="red"
+          aria-label={`${strings.tanks.loadout.clear} ${strings.tanks.loadout.consumables}`}
           onClick={() => {
             Tankopedia.mutate((draft) => {
               draft.protagonist.consumables = [];
@@ -325,6 +434,7 @@ function ConsumableEntry({ id, consumable }: ConsumableProps) {
     <div className={styles["consumable-wrapper"]}>
       <Tooltip tooltip={unwrap(consumable.name)}>
         <Button
+          aria-label={unwrap(consumable.name)}
           radius="1"
           variant={isSelected ? "surface" : "soft"}
           color={isSelected ? undefined : "gray"}
@@ -384,6 +494,7 @@ function Equipment() {
 
         <IconButton
           color="red"
+          aria-label={`${strings.tanks.loadout.clear} ${strings.tanks.loadout.equipment}`}
           onClick={() => {
             Tankopedia.mutate((draft) => {
               for (const key in draft.protagonist.equipment) {
@@ -489,6 +600,7 @@ function EquipmentOption({
   return (
     <Tooltip tooltip={unwrap(specificEquipment.name)}>
       <IconButton
+        aria-label={unwrap(specificEquipment.name)}
         size="major"
         color={isSelected ? undefined : "gray"}
         variant={isSelected ? "surface" : "soft"}

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

@@ -1,10 +1,4 @@
-import {
-  forwardRef,
-  Suspense,
-  useEffect,
-  useImperativeHandle,
-  useRef,
-} from "react";
+import { Suspense, useEffect, useRef } from "react";
 import { applyPitchYawLimits } from "../../core/blitz/applyPitchYawLimits";
 import { modelTransformEvent } from "../../core/blitzkit/modelTransform";
 import { Pose, poseEvent } from "../../core/blitzkit/pose";
@@ -14,6 +8,7 @@ import { useModel } from "../../hooks/useModel";
 import { Tankopedia } from "../../stores/tankopedia";
 import { TankopediaPersistent } from "../../stores/tankopediaPersistent";
 import { TankopediaDisplay } from "../../stores/tankopediaPersistent/constants";
+import type { MaybeSkeletonComponentProps } from "../../types/maybeSkeletonComponentProps";
 import { ArmorPlateDisplay } from "../ArmorPlateDisplay";
 import { CanvasAutoClear } from "../CanvasAutoClear";
 import { CanvasControl } from "../CanvasControl";
@@ -27,19 +22,18 @@ import { StaticArmor, type ThicknessRange } from "../StaticArmor";
 import { TankModel } from "../TankModel";
 import styles from "./index.module.css";
 
-interface TankSandboxProps {
+type TankSandboxProps = MaybeSkeletonComponentProps & {
   thicknessRange: ThicknessRange;
-}
+};
 
-export const TankopediaSandbox = forwardRef<
-  HTMLCanvasElement,
-  TankSandboxProps
->(({ thicknessRange }, ref) => {
+export function TankopediaSandbox({
+  skeleton,
+  thicknessRange,
+}: TankSandboxProps) {
   const canvas = useRef<HTMLCanvasElement>(null);
   const hasImprovedVerticalStabilizer = useEquipment("protagonist", 122);
   const hasDownImprovedVerticalStabilizer = useEquipment("protagonist", 124);
 
-  const tank = useDuel("protagonist", DuelModule.Tank);
   const gun = useDuel("protagonist", DuelModule.Gun);
   const turret = useDuel("protagonist", DuelModule.Turret);
 
@@ -47,13 +41,6 @@ export const TankopediaSandbox = forwardRef<
   const turretModelDefinition = model.turrets[turret.id];
   const gunModelDefinition = turretModelDefinition.guns[gun.id];
   const display = Tankopedia.use((state) => state.display);
-  const hideTankModelUnderArmor = TankopediaPersistent.use(
-    (state) => state.hideTankModelUnderArmor,
-  );
-
-  const { hasPbr } = useModel(tank.id);
-
-  useImperativeHandle(ref, () => canvas.current!, []);
 
   function handlePointerDown() {
     window.addEventListener("pointermove", handlePointerMove);
@@ -169,29 +156,47 @@ export const TankopediaSandbox = forwardRef<
           });
         }}
       >
-        <Lighting hasPbr={hasPbr} />
-
-        <SceneProps />
-        {(display === TankopediaDisplay.Model ||
-          (display === TankopediaDisplay.DynamicArmor &&
-            !hideTankModelUnderArmor)) && <TankModel />}
-
-        <ShotDisplay />
-        <ArmorPlateDisplay />
-        <CanvasAutoClear />
-
-        <Suspense>
-          {/* Controls within Suspense to allow for frame-perfect start of camera auto-rotate */}
-          <CanvasControl />
-
-          {display === TankopediaDisplay.DynamicArmor && <DynamicArmor />}
-          {display === TankopediaDisplay.StaticArmor && (
-            <StaticArmor thicknessRange={thicknessRange} />
-          )}
-        </Suspense>
-
-        <InitialCameraAligner />
+        {!skeleton && <Content thicknessRange={thicknessRange} />}
       </SmartCanvas>
     </div>
   );
-});
+}
+
+function Content({ thicknessRange }: { thicknessRange: ThicknessRange }) {
+  const display = Tankopedia.use((state) => state.display);
+  const tank = useDuel("protagonist", DuelModule.Tank);
+
+  const { hasPbr } = useModel(tank.id);
+
+  const hideTankModelUnderArmor = TankopediaPersistent.use(
+    (state) => state.hideTankModelUnderArmor,
+  );
+
+  return (
+    <>
+      <Lighting hasPbr={hasPbr} />
+
+      <SceneProps />
+
+      {(display === TankopediaDisplay.Model ||
+        (display === TankopediaDisplay.DynamicArmor &&
+          !hideTankModelUnderArmor)) && <TankModel />}
+
+      <ShotDisplay />
+      <ArmorPlateDisplay />
+      <CanvasAutoClear />
+
+      <Suspense>
+        {/* Controls within Suspense to allow for frame-perfect start of camera auto-rotate */}
+        <CanvasControl />
+
+        {display === TankopediaDisplay.DynamicArmor && <DynamicArmor />}
+        {display === TankopediaDisplay.StaticArmor && (
+          <StaticArmor thicknessRange={thicknessRange} />
+        )}
+      </Suspense>
+
+      <InitialCameraAligner />
+    </>
+  );
+}

packages/website/src/components/TankopediaToys/index.module.css

@@ -6,146 +6,383 @@
   touch-action: none;
   border-radius: inherit;
   background-color: var(--gray-2);
+
+  .armor {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 33%;
+    height: 100%;
+    background: linear-gradient(to right, transparent, var(--gray-a4));
+
+    .texture {
+      width: 100%;
+      height: 100%;
+      opacity: 0.125;
+      background-image: url("/media/toys/armor-hash.png");
+    }
+  }
+
+  .zones {
+    position: absolute;
+    top: 0;
+    left: 33%;
+    width: 67%;
+    height: 100%;
+    background: conic-gradient(
+      at 0 50%,
+      var(--ruby-a2),
+      var(--ruby-a1) calc(90deg - var(--ricochet-angle)),
+      var(--jade-a2) calc(90deg - var(--ricochet-angle)),
+      var(--jade-a4) calc(90deg - var(--normalization-angle)),
+      var(--cyan-a5) calc(90deg - var(--normalization-angle)),
+      var(--cyan-a3) calc(90deg + var(--normalization-angle)),
+      var(--jade-a2) calc(90deg + var(--normalization-angle)),
+      var(--jade-a4) calc(90deg + var(--ricochet-angle)),
+      var(--ruby-a1) calc(90deg + var(--ricochet-angle)),
+      var(--ruby-a2) 180deg
+    );
+  }
+
+  .shell-path,
+  .effective-path {
+    position: absolute;
+    top: 50%;
+    left: 33%;
+    transform: translateX(-50%) rotate(var(--rotation-angle));
+    transform-origin: top center;
+  }
+
+  .shell-path {
+    width: 0;
+    height: 100%;
+
+    .extension {
+      position: absolute;
+      left: 50%;
+      bottom: 100%;
+      width: var(--space-0);
+      height: 100%;
+      transform: translateX(-50%);
+      background-color: var(--gray-a8);
+    }
+
+    .line {
+      position: absolute;
+      top: 0;
+      left: 50%;
+      width: var(--space-2);
+      height: 100%;
+      transform: translateX(-50%);
+      background: linear-gradient(var(--gray-a11), var(--gray-a4));
+    }
+
+    .shell {
+      position: absolute;
+      top: 6rem;
+      left: 0;
+      width: var(--space-5);
+      height: var(--space-5);
+      object-fit: contain;
+      transform: translate(-50%, -50%) rotate(-45deg);
+      filter: drop-shadow(0 0 var(--space-4) black);
+    }
+  }
+
+  .effective-path {
+    width: 0;
+    height: 100%;
+
+    .line {
+      position: absolute;
+      left: 50%;
+      top: -100%;
+      width: var(--space-2);
+      height: 100%;
+      transform: translateX(-50%);
+      background: linear-gradient(var(--gray-a4), var(--gray-a11));
+    }
+  }
+
+  .corner-stat {
+    position: absolute;
+    display: flex;
+    gap: var(--space-2);
+    color: var(--gray-11);
+    font-size: var(--font-size-minor);
+
+    .value {
+      color: var(--gray-12);
+      font-size: inherit;
+    }
+
+    &[data-position="top-left"] {
+      top: var(--space-3);
+      left: var(--space-3);
+    }
+
+    &[data-position="top-right"] {
+      top: var(--space-3);
+      right: var(--space-3);
+    }
+
+    &[data-position="bottom-left"] {
+      bottom: var(--space-3);
+      left: var(--space-3);
+    }
+
+    &[data-position="bottom-right"] {
+      right: var(--space-3);
+      bottom: var(--space-3);
+    }
+  }
+
+  .explosive-overlay {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--space-3);
+    color: var(--gray-11);
+    text-align: center;
+    background: radial-gradient(var(--black-a7), var(--black-a11));
+  }
 }
 
-.armor {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 33%;
-  height: 100%;
-  background: linear-gradient(to right, transparent, var(--gray-a4));
-}
-
-.armor-texture {
+.traverse {
+  position: relative;
   width: 100%;
   height: 100%;
-  opacity: 0.125;
-  background-image: url("/media/random/armor-hash.png");
+  overflow: hidden;
+  border-radius: inherit;
+  user-select: none;
+
+  .hull {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 12rem;
+    height: 12rem;
+    transform: translate(-50%, -50%);
+
+    &[data-turretless="true"] {
+      width: 22rem;
+      height: 22rem;
+    }
+
+    .image {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+      filter: drop-shadow(0 0 var(--space-4) var(--black-a7));
+    }
+
+    .turret {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 27rem;
+      height: 27rem;
+      object-fit: contain;
+      transform: translate(-50%, -50%);
+      filter: drop-shadow(0 0 var(--space-4) var(--black-a7));
+    }
+  }
+
+  .toggles {
+    position: absolute;
+    top: var(--space-4);
+    left: 50%;
+    display: flex;
+    justify-content: center;
+    gap: var(--space-5);
+    width: 100%;
+    padding: 0 var(--space-5);
+    transform: translateX(-50%);
+  }
+
+  .terrain {
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .effective {
+    position: absolute;
+    bottom: calc(var(--space-2) + 3rem);
+    left: 50%;
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    color: var(--gray-11);
+    font-size: var(--font-size-minor);
+    white-space: nowrap;
+    transform: translateX(-50%);
+  }
 }
 
-.zones {
-  position: absolute;
-  top: 0;
-  left: 33%;
-  width: 67%;
+.reload {
+  position: relative;
+  width: 100%;
   height: 100%;
-  background: conic-gradient(
-    at 0 50%,
-    var(--ruby-a2),
-    var(--ruby-a1) calc(90deg - var(--ricochet-angle)),
-    var(--jade-a2) calc(90deg - var(--ricochet-angle)),
-    var(--jade-a4) calc(90deg - var(--normalization-angle)),
-    var(--cyan-a5) calc(90deg - var(--normalization-angle)),
-    var(--cyan-a3) calc(90deg + var(--normalization-angle)),
-    var(--jade-a2) calc(90deg + var(--normalization-angle)),
-    var(--jade-a4) calc(90deg + var(--ricochet-angle)),
-    var(--ruby-a1) calc(90deg + var(--ricochet-angle)),
-    var(--ruby-a2) 180deg
-  );
-}
+  overflow: hidden;
+  border-radius: inherit;
 
-.shell-path,
-.effective-path {
-  position: absolute;
-  top: 50%;
-  left: 33%;
-  transform: translateX(-50%) rotate(var(--rotation-angle));
-  transform-origin: top center;
-}
+  .backdrop,
+  .target {
+    position: absolute;
+    inset: 0;
+    background-image: url("/media/toys/background.jpg");
+    background-size: 25rem;
+    background-position: center;
+    filter: blur(var(--space-2)) contrast(1.2) brightness(0.5) saturate(0.8);
+  }
 
-.shell-path {
-  width: 0;
-  height: 100%;
-}
+  .vignette {
+    position: absolute;
+    inset: 0;
+    background: radial-gradient(transparent 50%, var(--black-a8) 100%);
+  }
 
-.shell-path-extension {
-  position: absolute;
-  left: 50%;
-  bottom: 100%;
-  width: var(--space-0);
-  height: 100%;
-  transform: translateX(-50%);
-  background-color: var(--gray-a8);
-}
+  .glow,
+  .ring {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 65%;
+    height: 65%;
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+    transition: var(--duration-brief);
 
-.shell-path-line {
-  position: absolute;
-  top: 0;
-  left: 50%;
-  width: var(--space-2);
-  height: 100%;
-  transform: translateX(-50%);
-  background: linear-gradient(var(--gray-a11), var(--gray-a4));
-}
+    &[data-shot="true"] {
+      width: 70%;
+      height: 70%;
+      transition: none;
+    }
+  }
 
-.shell {
-  position: absolute;
-  top: 6rem;
-  left: 0;
-  width: var(--space-5);
-  height: var(--space-5);
-  object-fit: contain;
-  transform: translate(-50%, -50%) rotate(-45deg);
-  filter: drop-shadow(0 0 var(--space-4) black);
-}
+  .glow {
+    filter: blur(var(--space-4));
+  }
 
-.effective-path {
-  width: 0;
-  height: 100%;
-}
+  .ring {
+    padding: var(--space-2);
+    background: var(--orange-7);
+  }
 
-.effective-path-line {
-  position: absolute;
-  left: 50%;
-  top: -100%;
-  width: var(--space-2);
-  height: 100%;
-  transform: translateX(-50%);
-  background: linear-gradient(var(--gray-a4), var(--gray-a11));
-}
+  .core {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    border-radius: 50%;
+    background: black;
+  }
 
-.corner-stat {
-  position: absolute;
-  display: flex;
-  gap: var(--space-2);
-  color: var(--gray-11);
-  font-size: var(--font-size-minor);
-}
+  .fill {
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+    mask-image: radial-gradient(transparent 25%, black 100%);
+  }
 
-.corner-stat-value {
-  color: var(--gray-12);
-  font-size: inherit;
-}
+  .caret {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 10%;
+    height: 10%;
+    transform: translateX(-50%);
+  }
 
-.corner-stat[data-position="top-left"] {
-  top: var(--space-3);
-  left: var(--space-3);
-}
+  .remaining-time,
+  .total-time {
+    position: absolute;
+    z-index: 1;
+    top: 50%;
+    transform: translateY(-50%);
+  }
 
-.corner-stat[data-position="top-right"] {
-  top: var(--space-3);
-  right: var(--space-3);
-}
+  .remaining-time {
+    right: calc(50% + var(--space-6));
+    transform: translate(50%, -50%);
+  }
 
-.corner-stat[data-position="bottom-left"] {
-  bottom: var(--space-3);
-  left: var(--space-3);
-}
+  .total-time {
+    left: calc(50% + var(--space-6));
+    transform: translate(-50%, -50%);
+  }
 
-.corner-stat[data-position="bottom-right"] {
-  right: var(--space-3);
-  bottom: var(--space-3);
-}
+  .shells {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
 
-.explosive-overlay {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--space-3);
-  color: var(--gray-11);
-  text-align: center;
-  background: radial-gradient(var(--black-a7), var(--black-a11));
+  .shell-track {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .shell {
+    position: absolute;
+    top: 50%;
+    left: 90%;
+    width: 1.25rem;
+    height: 1.25rem;
+    transform: translate(-50%, -50%);
+  }
+
+  .border {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    color: var(--jade-8);
+  }
+
+  .mask {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    justify-content: end;
+    overflow: hidden;
+    border-radius: var(--space-1);
+    mask-image: url("/media/toys/shell.png");
+    mask-size: contain;
+    mask-repeat: no-repeat;
+    mask-position: center;
+  }
+
+  .shell-fill {
+    width: 100%;
+    background: var(--jade-9);
+  }
+
+  .flash {
+    position: absolute;
+    inset: 0;
+    background: transparent;
+    transition: var(--duration-brief);
+
+    &[data-shot="true"] {
+      background: var(--white-a3);
+      transition: none;
+    }
+  }
+
+  .skip {
+    position: absolute;
+    top: 68%;
+    left: 50%;
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    transform: translate(-50%, -50%);
+  }
 }

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

@@ -1,6 +1,11 @@
 import { alias, isExplosive } from "@blitzkit/core";
 import { literals } from "@blitzkit/i18n";
+import { DoubleArrowRightIcon } from "@radix-ui/react-icons";
+import { times } from "lodash-es";
 import {
+  useCallback,
+  useEffect,
+  useMemo,
   useRef,
   useState,
   type CSSProperties,
@@ -10,7 +15,12 @@ import { clamp, degToRad, radToDeg } from "three/src/math/MathUtils.js";
 import type { ToyProps } from "../../config/toys";
 import { DuelModule, useDuel } from "../../hooks/useDuel";
 import { useStrings } from "../../hooks/useStrings";
+import type { ComputedCharacteristics } from "../../types/characteristics";
+import { Button } from "../Button";
+import { Checkbox } from "../Checkbox";
 import { Code } from "../Code";
+import { SegmentedControl } from "../SegmentedControl";
+import { ShellBorder } from "../Tankopedia/CharacteristicsSection/components/Characteristics/components/ReloadVisualizer/components/ShellBorder";
 import styles from "./index.module.css";
 
 export function RicochetToy({ characteristics }: ToyProps) {
@@ -53,7 +63,7 @@ export function RicochetToy({ characteristics }: ToyProps) {
       onPointerMove={updateAngle}
     >
       <div className={styles.armor}>
-        <div className={styles["armor-texture"]} />
+        <div className={styles.texture} />
       </div>
 
       <div
@@ -74,11 +84,10 @@ export function RicochetToy({ characteristics }: ToyProps) {
           } as CSSProperties
         }
       >
-        <div className={styles["shell-path-extension"]} />
-        <div className={styles["shell-path-line"]} />
+        <div className={styles.extension} />
+        <div className={styles.line} />
         <img
           className={styles.shell}
-          alt=""
           src={alias("api", `/icons/shells/${shell.icon}.webp`)}
         />
       </div>
@@ -91,18 +100,18 @@ export function RicochetToy({ characteristics }: ToyProps) {
           } as CSSProperties
         }
       >
-        <div className={styles["effective-path-line"]} />
+        <div className={styles.line} />
       </div>
 
       <CornerStat
-        label={strings.tanks.characteristics.toys.ricochet.angle}
+        label={strings.tanks.toys.ricochet.angle}
         value={literals(strings.common.units.deg, {
           value: radToDeg(Math.abs(angle)).toFixed(0),
         })}
         position={CornerStatPosition.TopLeft}
       />
       <CornerStat
-        label={strings.tanks.characteristics.toys.ricochet.normalization}
+        label={strings.tanks.toys.ricochet.normalization}
         value={
           doesRicochet
             ? "-"
@@ -115,7 +124,7 @@ export function RicochetToy({ characteristics }: ToyProps) {
         position={CornerStatPosition.TopRight}
       />
       <CornerStat
-        label={strings.tanks.characteristics.toys.ricochet.effective}
+        label={strings.tanks.toys.ricochet.effective}
         value={
           doesRicochet
             ? "-"
@@ -126,7 +135,7 @@ export function RicochetToy({ characteristics }: ToyProps) {
         position={CornerStatPosition.BottomLeft}
       />
       <CornerStat
-        label={strings.tanks.characteristics.toys.ricochet.armor}
+        label={strings.tanks.toys.ricochet.armor}
         value={
           doesRicochet
             ? "-"
@@ -139,7 +148,7 @@ export function RicochetToy({ characteristics }: ToyProps) {
 
       {explodes && (
         <div className={styles["explosive-overlay"]}>
-          {strings.tanks.characteristics.toys.ricochet.no_ricochet}
+          {strings.tanks.toys.ricochet.no_ricochet}
         </div>
       )}
     </div>
@@ -163,9 +172,397 @@ function CornerStat({ label, value, position }: CornerStatProps) {
   return (
     <div className={styles["corner-stat"]} data-position={position}>
       <span>{label}</span>
-      <Code className={styles["corner-stat-value"]} size="minor">
+      <Code className={styles.value} size="minor">
         {value}
       </Code>
     </div>
   );
 }
+
+const terrains = ["hard", "medium", "soft"] as const;
+type Terrain = (typeof terrains)[number];
+
+interface TraverseToyProps {
+  characteristics: ComputedCharacteristics;
+}
+
+export function TraverseToy({ characteristics }: TraverseToyProps) {
+  const hull = useRef<HTMLDivElement>(null);
+  const turret = useRef<HTMLImageElement>(null);
+
+  const [terrain, setTerrain] = useState<Terrain>("hard");
+  const [rotateHull, setRotateHull] = useState(true);
+  const [rotateTurret, setRotateTurret] = useState(true);
+
+  const turretAngle = useRef(0);
+  const hullAngle = useRef(0);
+
+  const strings = useStrings();
+
+  const hullSpeed = characteristics.get(
+    `hull_traverse_speed_${terrain}`,
+  ) as number;
+  const turretTraverseSpeed = characteristics.get(
+    "turret_traverse_speed",
+  ) as number;
+
+  const turretSpeed = rotateTurret ? turretTraverseSpeed : 0;
+  const hullSpeedEffective = rotateHull ? hullSpeed : 0;
+
+  const isTurretless =
+    characteristics.has("azimuth_left") || characteristics.has("azimuth_right");
+
+  useEffect(() => {
+    let cancel = false;
+    const turretSpeedRad = (turretSpeed * Math.PI) / 180;
+    const hullSpeedRad = (hullSpeedEffective * Math.PI) / 180;
+    let lastT = Date.now() / 1000;
+
+    function frame() {
+      const t = Date.now() / 1000;
+      const dt = t - lastT;
+      lastT = t;
+
+      if (turret.current) {
+        turretAngle.current =
+          (turretAngle.current + turretSpeedRad * dt) % (2 * Math.PI);
+        turret.current.style.transform = `translate(-50%, -50%) rotate(${-turretAngle.current}rad)`;
+      }
+
+      if (hull.current) {
+        hullAngle.current =
+          (hullAngle.current + hullSpeedRad * dt) % (2 * Math.PI);
+        hull.current.style.transform = `translate(-50%, -50%) rotate(${-hullAngle.current}rad)`;
+      }
+
+      if (!cancel) requestAnimationFrame(frame);
+    }
+
+    frame();
+
+    return () => {
+      cancel = true;
+    };
+  }, [hullSpeedEffective, turretSpeed]);
+
+  const terrainOptions = terrains.map((terrain) => ({
+    value: terrain,
+    label:
+      strings.tanks.characteristics.items[`hull_traverse_speed_${terrain}`],
+  }));
+
+  return (
+    <div className={styles.traverse}>
+      <div ref={hull} className={styles.hull} data-turretless={isTurretless}>
+        <img
+          draggable="false"
+          className={styles.image}
+          src={`/media/toys/hull${isTurretless ? "-only" : ""}.png`}
+        />
+
+        {!isTurretless && (
+          <img
+            draggable="false"
+            ref={turret}
+            className={styles.turret}
+            src="/media/toys/turret.png"
+          />
+        )}
+      </div>
+
+      <div className={styles.toggles}>
+        {!isTurretless && (
+          <>
+            <Checkbox checked={rotateHull} onCheckedChange={setRotateHull}>
+              {strings.tanks.toys.traverse.hull}
+            </Checkbox>
+            <Checkbox checked={rotateTurret} onCheckedChange={setRotateTurret}>
+              {strings.tanks.toys.traverse.turret}
+            </Checkbox>
+          </>
+        )}
+      </div>
+
+      <div className={styles.terrain}>
+        <SegmentedControl
+          options={terrainOptions}
+          value={terrain}
+          onValueChange={(value) => {
+            const nextTerrain = terrains.find((terrain) => terrain === value);
+            if (nextTerrain) setTerrain(nextTerrain);
+          }}
+          variant="underline"
+        />
+      </div>
+
+      <div className={styles.effective}>
+        <span>{strings.tanks.toys.traverse.effective}</span>
+        <Code size="minor">
+          {literals(strings.units.deg_s, {
+            value: (turretSpeed + hullSpeedEffective).toFixed(1),
+          })}
+        </Code>
+      </div>
+    </div>
+  );
+}
+
+const RELOAD_PRECISION = 1;
+
+interface ReloadData {
+  reloads: number[];
+  shells: number;
+  intraClip: number;
+  burstShells: number;
+  burstInterShell?: number;
+}
+
+export function ReloadToy({ characteristics }: ToyProps) {
+  const gun = useDuel("protagonist", DuelModule.Gun);
+  const strings = useStrings();
+
+  const reloadData = useMemo<ReloadData>(() => {
+    const reloadCoefficient = characteristics.get(
+      "_reload_coefficient",
+    ) as number;
+    const intraClip =
+      gun.gun_type!.$case === "regular"
+        ? 0
+        : (characteristics.get("intra_clip") as number);
+
+    let reloads: number[];
+    let shells: number;
+
+    switch (gun.gun_type!.$case) {
+      case "regular":
+        reloads = [characteristics.get("reload") as number];
+        shells = 1;
+        break;
+
+      case "auto_loader":
+        reloads = [characteristics.get("reload") as number];
+        shells = gun.gun_type!.value.shell_count;
+        break;
+
+      case "auto_reloader":
+        reloads = gun.gun_type!.value.shell_reloads.map(
+          (reload) => reload * reloadCoefficient,
+        );
+        shells = gun.gun_type!.value.shell_count;
+        break;
+    }
+
+    return {
+      reloads,
+      shells,
+      intraClip,
+      burstShells: gun.burst?.count ?? 1,
+      burstInterShell: gun.burst?.interval,
+    };
+  }, [characteristics, gun]);
+
+  const glow = useRef<HTMLDivElement>(null);
+  const ring = useRef<HTMLDivElement>(null);
+  const core = useRef<HTMLDivElement>(null);
+  const remainingTime = useRef<HTMLSpanElement>(null);
+  const totalTime = useRef<HTMLSpanElement>(null);
+  const flash = useRef<HTMLDivElement>(null);
+  const shellBars = useRef<Array<HTMLDivElement | null>>([]);
+  const state = useRef(0);
+
+  const shoot = useCallback(() => {
+    for (const element of [flash.current, ring.current, glow.current]) {
+      if (!element) continue;
+
+      element.dataset.shot = "true";
+
+      void element.offsetWidth;
+      delete element.dataset.shot;
+    }
+  }, []);
+
+  useEffect(() => {
+    let cancel = false;
+    let lastTime = performance.now() / 1000;
+    let lastState = state.current;
+
+    state.current = 0;
+
+    function frame() {
+      const reloadThreshold = reloadData.reloads.length;
+      const now = performance.now() / 1000;
+      const deltaTime = now - lastTime;
+
+      let reload = 0;
+      let shells: number[];
+      let interval = 0;
+
+      if (state.current < reloadThreshold) {
+        const currentReload = reloadData.reloads[Math.floor(state.current)];
+
+        if (currentReload === undefined) {
+          throw new Error("Missing reload duration for current reload stage");
+        }
+
+        interval = currentReload;
+        state.current = Math.min(
+          reloadThreshold,
+          state.current + deltaTime / interval,
+        );
+        reload = state.current % 1;
+        shells = Array(reloadData.shells).fill(reload);
+
+        if (reloadThreshold > 1) {
+          shells = shells.map((_, index) =>
+            Math.max(0, state.current - reloadData.shells + index + 1),
+          );
+        }
+
+        if (state.current >= reloadThreshold) shoot();
+      } else if (state.current < reloadData.shells + reloadThreshold - 1) {
+        if (
+          reloadData.burstShells === 1 ||
+          Math.floor(state.current) % reloadData.burstShells === 0
+        ) {
+          interval = reloadData.intraClip;
+        } else {
+          if (reloadData.burstInterShell === undefined) {
+            throw new Error("Missing burst interval for firing sequence");
+          }
+
+          interval = reloadData.burstInterShell;
+        }
+
+        state.current = Math.min(
+          reloadData.shells + reloadThreshold,
+          state.current + deltaTime / interval,
+        );
+        reload = state.current % 1;
+
+        shells =
+          reloadThreshold > 1
+            ? times(reloadData.shells, (index) =>
+                Math.max(
+                  0,
+                  Math.floor(index + 1 + reloadThreshold - state.current),
+                ),
+              )
+            : times(reloadData.shells, (index) =>
+                Number(index > state.current - 1),
+              );
+
+        if (lastState % 1 > state.current % 1) shoot();
+      } else {
+        state.current = 0;
+        shells = Array(reloadData.shells).fill(0);
+      }
+
+      if (interval > 0 && totalTime.current) {
+        totalTime.current.textContent = interval.toFixed(RELOAD_PRECISION);
+      }
+
+      if (interval > 0 && remainingTime.current) {
+        remainingTime.current.textContent = ((1 - reload) * interval).toFixed(
+          RELOAD_PRECISION,
+        );
+      }
+
+      for (const [index, bar] of shellBars.current.entries()) {
+        if (bar) bar.style.width = `${(shells[index] ?? 0) * 100}%`;
+      }
+
+      if (ring.current && glow.current && core.current) {
+        const angle = reload * 2 * Math.PI;
+
+        ring.current.style.background = `conic-gradient(var(--amber-9) 0 ${angle}rad, var(--orange-7) ${angle}rad)`;
+        core.current.style.background = `conic-gradient(var(--amber-6) 0 ${angle}rad, var(--orange-3) ${angle}rad)`;
+        glow.current.style.background = `conic-gradient(var(--amber-9) 0 ${angle}rad, transparent ${angle}rad)`;
+      }
+
+      if (!cancel) requestAnimationFrame(frame);
+
+      lastTime = now;
+      lastState = state.current;
+    }
+
+    frame();
+
+    return () => {
+      cancel = true;
+    };
+  }, [reloadData, shoot]);
+
+  return (
+    <div className={styles.reload}>
+      <div className={styles.backdrop} />
+      <div className={styles.vignette} />
+
+      <div className={styles.glow} ref={glow} />
+      <div className={styles.ring} ref={ring}>
+        <div className={styles.core}>
+          <div className={styles.target} />
+          <div className={styles.fill} ref={core} />
+        </div>
+      </div>
+
+      <img
+        className={styles.caret}
+        src="/assets/images/tankopedia/visualizers/reload/caret.png"
+      />
+
+      <Code
+        variant="ghost"
+        className={styles["remaining-time"]}
+        ref={remainingTime}
+      >
+        {(0).toFixed(RELOAD_PRECISION)}
+      </Code>
+      <Code variant="ghost" className={styles["total-time"]} ref={totalTime}>
+        {(0).toFixed(RELOAD_PRECISION)}
+      </Code>
+
+      {reloadData.shells > 1 && (
+        <div className={styles.shells} aria-hidden="true">
+          {Array.from({ length: reloadData.shells }, (_, index) => (
+            <div
+              className={styles["shell-track"]}
+              key={index}
+              style={{
+                transform: `rotate(${135 - 7 * (index - (reloadData.shells - 1) / 2)}deg)`,
+              }}
+            >
+              <div className={styles.shell}>
+                <ShellBorder className={styles.border} />
+                <div className={styles.mask}>
+                  <div
+                    className={styles["shell-fill"]}
+                    ref={(element) => {
+                      shellBars.current[index] = element;
+                    }}
+                  />
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      <div className={styles.flash} ref={flash} />
+
+      <Button
+        className={styles.skip}
+        size="minor"
+        variant="outline"
+        color="gray"
+        highContrast
+        aria-label={strings.tanks.toys.reload.skip}
+        onClick={() => {
+          state.current = Math.floor(state.current + 1);
+        }}
+      >
+        {strings.tanks.toys.reload.skip}
+        <DoubleArrowRightIcon />
+      </Button>
+    </div>
+  );
+}

packages/website/src/config/characteristics.ts

@@ -101,6 +101,24 @@ export const characteristics = {
     },
   },
 
+  reloads: {
+    type: CharacteristicType.NumberList,
+
+    should_render({ gun }) {
+      return gun.gun_type!.$case === "auto_reloader";
+    },
+
+    compute({ gun, characteristic }) {
+      if (gun.gun_type!.$case !== "auto_reloader") return [];
+
+      const reloadCoefficient = characteristic("_reload_coefficient") as number;
+
+      return gun.gun_type!.value.shell_reloads.map(
+        (reload) => reload * reloadCoefficient,
+      );
+    },
+  },
+
   intra_clip: {
     type: CharacteristicType.Number,
 
@@ -195,8 +213,6 @@ export const characteristics = {
 
   // module_damage_range: unavailable,
 
-  // reloads: unavailable,
-
   clip_size: {
     type: CharacteristicType.Number,
 

packages/website/src/config/characteristicsGroups.ts

@@ -1,7 +1,11 @@
 import type { CaseType } from "@blitzkit/core";
 import type { GunDefinition } from "@blitzkit/protos";
-import { CharacteristicRanking } from "../types/characteristics";
-import type { CharacteristicsGroup } from "../types/characteristics";
+import {
+  CharacteristicRanking,
+  type CharacteristicName,
+  type CharacteristicRenderConfig,
+  type CharacteristicsGroup,
+} from "../types/characteristics";
 
 export const characteristicsGroups: CharacteristicsGroup[] = [
   // {
@@ -87,7 +91,12 @@ export const characteristicsGroups: CharacteristicsGroup[] = [
         units: "s",
         ranking: CharacteristicRanking.LowerIsBetter,
       },
-      { name: "reloads", decimals: 1, units: "s" },
+      {
+        name: "reloads",
+        decimals: 1,
+        units: "s",
+        ranking: CharacteristicRanking.LowerIsBetter,
+      },
 
       { toy: "reload" },
     ],
@@ -294,3 +303,15 @@ export const characteristicsGroups: CharacteristicsGroup[] = [
     ],
   },
 ];
+
+export const characteristicRenderConfigs = new Map<
+  CharacteristicName,
+  CharacteristicRenderConfig
+>();
+
+for (const group of characteristicsGroups) {
+  for (const config of group.order) {
+    if (!("name" in config)) continue;
+    characteristicRenderConfigs.set(config.name, config);
+  }
+}

packages/website/src/config/toys.ts

@@ -1,5 +1,9 @@
 import type { ReactNode } from "react";
-import { RicochetToy } from "../components/TankopediaToys";
+import {
+  ReloadToy,
+  RicochetToy,
+  TraverseToy,
+} from "../components/TankopediaToys";
 import type { ComputedCharacteristics } from "../types/characteristics";
 
 export interface ToyProps {
@@ -8,4 +12,6 @@ export interface ToyProps {
 
 export const toys: Record<string, (props: ToyProps) => ReactNode> = {
   ricochet: RicochetToy,
+  traverse: TraverseToy,
+  reload: ReloadToy,
 };

packages/website/src/hooks/useCharacteristicRenderer.tsx

@@ -1,10 +1,12 @@
 import { literalsArray } from "@blitzkit/i18n/src/literals";
-import { type ReactNode } from "react";
+import { Fragment, type ReactNode } from "react";
 import { Text } from "../components/Text";
+import { characteristics } from "../config/characteristics";
 import type {
   CharacteristicRenderConfig,
   CharacteristicReturnType,
 } from "../types/characteristics";
+import { CharacteristicType } from "../types/characteristics";
 import { useLocale } from "./useLocale";
 import { useStrings } from "./useStrings";
 
@@ -21,39 +23,61 @@ export function useCharacteristicRenderer() {
     if (config.render)
       return config.render({ output: characteristic, strings });
 
-    if (typeof characteristic === "number") {
-      if (Number.isFinite(characteristic)) {
-        let value: ReactNode = characteristic;
+    function renderNumber(
+      value: number,
+      units: CharacteristicRenderConfig["units"],
+    ): ReactNode {
+      if (!Number.isFinite(value)) return `${value < 0 ? "-" : ""}∞`;
 
-        if (config.decimals !== undefined) {
-          value *= 10 ** config.decimals;
-          value = Math.round(value);
-          value /= 10 ** config.decimals;
-        }
+      let rendered: ReactNode = value;
 
-        if (config.localize) {
-          value = value.toLocaleString(locale);
-        } else {
-          value = value.toFixed(config.decimals);
-        }
-
-        if (config.units !== undefined) {
-          value = literalsArray(strings.units[config.units], {
-            value: <Text>{value}</Text>,
-          });
-        }
-
-        return value;
+      if (config.decimals !== undefined) {
+        rendered *= 10 ** config.decimals;
+        rendered = Math.round(rendered);
+        rendered /= 10 ** config.decimals;
       }
 
-      return `${characteristic < 0 ? "-" : ""}∞`;
+      if (config.localize) {
+        rendered = rendered.toLocaleString(locale);
+      } else {
+        rendered = rendered.toFixed(config.decimals);
+      }
+
+      if (units !== undefined) {
+        rendered = literalsArray(strings.units[units], {
+          value: <Text>{rendered}</Text>,
+        });
+      }
+
+      return rendered;
     }
 
-    if (typeof characteristic === "string") {
-      return characteristic;
-    }
+    switch (characteristics[config.name].type) {
+      case CharacteristicType.Enum:
+        return characteristic as string;
 
-    throw new Error("Unknown characteristic type");
+      case CharacteristicType.Number:
+        return renderNumber(characteristic as number, config.units);
+
+      case CharacteristicType.NumberList: {
+        const values = (characteristic as number[]).map((value, index) => (
+          <Fragment key={index}>
+            {index > 0 && ", "}
+            {renderNumber(value, undefined)}
+          </Fragment>
+        ));
+
+        if (config.units === undefined) return values;
+
+        return (
+          <>
+            {literalsArray(strings.units[config.units], {
+              value: <Text>{values}</Text>,
+            })}
+          </>
+        );
+      }
+    }
   }
 
   return renderCharacteristic;

packages/website/src/hooks/useCharacteristics.ts

@@ -1,10 +1,16 @@
-import { degressiveStat, progressiveStat } from "@blitzkit/core";
+import {
+  createDefaultEnvironment,
+  degressiveStat,
+  progressiveStat,
+  type TankEnvironment,
+} from "@blitzkit/core";
 import type { BlitzEffectScript } from "@blitzkit/core/src/types/blitzEffectScript";
-import { CrewType } from "@blitzkit/protos";
+import { CrewType, type TankDefinition } from "@blitzkit/protos";
 import { api } from "../api/dynamic";
 import { characteristics } from "../config/characteristics";
 import { defaultEqualizer } from "../config/equalizer";
-import { Tankopedia, type TankEnvironment } from "../stores/tankopedia";
+import { Tankopedia } from "../stores/tankopedia";
+import { createTankState } from "../tankopedia/createTankState";
 import type { TankState } from "../tankopedia/tankState";
 import type {
   CharacteristicContext,
@@ -16,14 +22,7 @@ import { duelSides, type DuelSide } from "./useEquipment";
 const tanks = await api.tanks();
 const scripts = await api.scripts();
 const equipment = await api.equipment();
-
-export function useCharacteristics() {
-  const protagonist = Tankopedia.use((state) => state.protagonist);
-  const antagonist = Tankopedia.use((state) => state.antagonist);
-  const environment = Tankopedia.use((state) => state.environment);
-
-  return computeCharacteristics({ protagonist, antagonist }, environment);
-}
+const skills = await api.skills();
 
 export function computeCharacteristics(
   states: Record<DuelSide, TankState>,
@@ -191,3 +190,20 @@ export function computeCharacteristics(
 
   return computed;
 }
+
+export function useCharacteristics() {
+  const protagonist = Tankopedia.use((state) => state.protagonist);
+  const antagonist = Tankopedia.use((state) => state.antagonist);
+  const environment = Tankopedia.use((state) => state.environment);
+
+  return computeCharacteristics({ protagonist, antagonist }, environment);
+}
+
+export function computeDefaultCharacteristics(tank: TankDefinition) {
+  const state = createTankState(tank);
+
+  return computeCharacteristics(
+    { protagonist: state, antagonist: state },
+    createDefaultEnvironment(skills),
+  );
+}

packages/website/src/pages/[...chunk_default]/[...locale]/mixer/_index.tsx

@@ -1,6 +1,6 @@
 import {
   alias,
-  TIER_ROMAN_NUMERALS,
+  romanize,
 } from "@blitzkit/core";
 import { literals } from "@blitzkit/i18n";
 import {
@@ -161,7 +161,7 @@ function ModuleChooser({
                       }
                       key={turret.id}
                       module="turret"
-                      discriminator={TIER_ROMAN_NUMERALS[turret.tier]}
+                      discriminator={romanize(turret.tier)}
                       onClick={() => {
                         onSelect?.(tankDefinition, turret);
                       }}
@@ -179,7 +179,7 @@ function ModuleChooser({
                       }
                       key={gun.id}
                       module="gun"
-                      discriminator={TIER_ROMAN_NUMERALS[gun.tier]}
+                      discriminator={romanize(gun.tier)}
                       secondaryDiscriminator={
                         <Text style={{ fontSize: "0.75em" }}>
                           {literals(strings.common.units.mm, {

packages/website/src/pages/[...chunk_default]/[...locale]/tanks/[slug]/_index.module.css

@@ -13,11 +13,14 @@
     display: flex;
     flex-direction: column;
 
-    gap: var(--space-5);
-    padding: var(--space-5);
-
-    overflow-y: auto;
-
     background-color: var(--gray-2);
+
+    .content {
+      padding: var(--space-5);
+
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-5);
+    }
   }
 }

packages/website/src/pages/[...chunk_default]/[...locale]/tanks/[slug]/_index.tsx

@@ -1,9 +1,11 @@
 import { useMemo } from "react";
 import { api } from "../../../../../api/dynamic";
+import { Scroller } from "../../../../../components/Scroller";
 import type { ThicknessRange } from "../../../../../components/StaticArmor";
 import { TankopediaCharacteristics } from "../../../../../components/TankopediaCharacteristics";
 import { TankopediaGameModeAbilities } from "../../../../../components/TankopediaGameModeAbilities";
 import { TankopediaLoadout } from "../../../../../components/TankopediaLoadout";
+import { TankopediaSandbox } from "../../../../../components/TankopediaSandbox";
 import { defaultEqualizer } from "../../../../../config/equalizer";
 import { withErrorWrapper } from "../../../../../hocs/withErrorWrapper";
 import { withLocale } from "../../../../../hocs/withLocale";
@@ -52,12 +54,17 @@ export const Page = withErrorWrapper(
 
     return (
       <div className={styles.page}>
-        <div className={styles.loadout}>
-          <TankopediaLoadout characteristics={characteristics} />
-        </div>
+        <Scroller className={styles.loadout} orientation="vertical">
+          <div className={styles.content}>
+            <TankopediaLoadout characteristics={characteristics} />
+          </div>
+        </Scroller>
 
         <div className={styles.sandbox}>
-          {/* {!skeleton && <TankopediaSandbox thicknessRange={thicknessRange} />} */}
+          <TankopediaSandbox
+            skeleton={skeleton}
+            thicknessRange={thicknessRange}
+          />
           <TankopediaCharacteristics characteristics={characteristics} />
           <TankopediaGameModeAbilities />
         </div>

packages/website/src/stores/tankopedia.ts

@@ -1,4 +1,4 @@
-import { createDefaultSkills } from "@blitzkit/core";
+import { createDefaultEnvironment, type TankEnvironment } from "@blitzkit/core";
 import type { ShellDefinition, TankDefinition } from "@blitzkit/protos";
 import { Soapstone } from "soapstone";
 import type { Vector3 } from "three";
@@ -76,12 +76,6 @@ export enum TankopediaRelativeAgainst {
   All,
 }
 
-export interface TankEnvironment {
-  equalize: boolean;
-  distance: number;
-  skills: Record<string, number>;
-}
-
 interface Tankopedia {
   disturbed: boolean;
   revealed: boolean;
@@ -128,11 +122,7 @@ export const Tankopedia = new Soapstone<Tankopedia, [TankDefinition]>(
     antagonist: createTankState(tank),
     model: models.models[tank.id],
 
-    environment: {
-      equalize: false,
-      distance: 0,
-      skills: createDefaultSkills(skills),
-    },
+    environment: createDefaultEnvironment(skills),
 
     relative_against: TankopediaRelativeAgainst.ClassAndTier,
 

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

@@ -1,39 +1,3 @@
-import type { TankopediaSortBy } from '.';
-
-export const SORT_UNITS: Record<TankopediaSortBy, string | undefined> = {
-  'meta.none': undefined,
-  'survivability.health': 'hp',
-  'fire.aimTime': 's',
-  'fire.caliber': 'mm',
-  'fire.damage': 'hp',
-  'fire.moduleDamage': 'hp',
-  'fire.dispersionMoving': 'm',
-  'fire.dispersionStill': 'm',
-  'fire.dpm': undefined,
-  'fire.dpmPremium': undefined,
-  'fire.gunDepression': '°',
-  'fire.gunElevation': '°',
-  'fire.premiumPenetration': 'mm',
-  'fire.tertiaryPenetration': 'mm',
-  'fire.reload': 's',
-  'fire.shellVelocity': 'm/s',
-  'fire.shellRange': 'm',
-  'fire.shellCapacity': undefined,
-  'fire.standardPenetration': 'mm',
-  'maneuverability.backwardsSpeed': 'kph',
-  'maneuverability.forwardsSpeed': 'kph',
-  'maneuverability.power': 'hp',
-  'maneuverability.powerToWeight': 'hp/tn',
-  'maneuverability.traverseSpeed': '°/s',
-  'maneuverability.weight': 'tn',
-  'survivability.camouflageMoving': '%',
-  'survivability.camouflageShooting': '%',
-  'survivability.camouflageStill': '%',
-  'survivability.length': 'm',
-  'survivability.viewRange': 'm',
-  'survivability.volume': 'm^3',
-};
-
 export enum TankopediaDisplay {
   Model,
   DynamicArmor,

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

@@ -1,9 +1,9 @@
-import type en from "@blitzkit/i18n/strings/en.json";
 import { Soapstone } from "soapstone";
 
-export type TankopediaSortBy = keyof typeof en.website.common.tank_search.sort;
-export type TankopediaSortDirection = "ascending" | "descending";
-export type TankopediaTestTankDisplay = "include" | "exclude" | "only";
+export enum TankopediaSortDirection {
+  Ascending,
+  Descending,
+}
 
 export interface TankopediaPersistent {
   wireframe: boolean;
@@ -16,11 +16,6 @@ export interface TankopediaPersistent {
   recentlyViewed: number[];
   hideTankModelUnderArmor: boolean;
   highGraphics: boolean;
-
-  sort: {
-    by: TankopediaSortBy;
-    direction: TankopediaSortDirection;
-  };
 }
 
 export const TankopediaPersistent = new Soapstone<TankopediaPersistent>(
@@ -35,10 +30,6 @@ export const TankopediaPersistent = new Soapstone<TankopediaPersistent>(
     showPrimaryArmor: true,
     recentlyViewed: [],
     highGraphics: true,
-    sort: {
-      by: "meta.none",
-      direction: "ascending",
-    },
   },
   "tankopedia-3",
 );

packages/website/src/stores/tankopediaSort.ts

@@ -1,15 +1,13 @@
-import { Soapstone } from 'soapstone';
-import {
-  type TankopediaSortBy,
-  type TankopediaSortDirection,
-} from './tankopediaPersistent';
+import { Soapstone } from "soapstone";
+import type { CharacteristicName } from "../types/characteristics";
+import { TankopediaSortDirection } from "./tankopediaPersistent";
 
 export interface TankSort {
-  by: TankopediaSortBy;
+  by: CharacteristicName | null;
   direction: TankopediaSortDirection;
 }
 
 export const TankSort = new Soapstone<TankSort>({
-  by: 'meta.none',
-  direction: 'descending',
+  by: null,
+  direction: TankopediaSortDirection.Descending,
 });

packages/website/src/tankopedia/calculateRankings.ts

@@ -1,8 +1,11 @@
+import { characteristics as characteristicDefinitions } from "../config/characteristics";
 import { characteristicsGroups } from "../config/characteristicsGroups";
 import {
   CharacteristicRanking as CharacteristicRankingDirection,
+  CharacteristicType,
   type CharacteristicName,
   type CharacteristicRenderConfig,
+  type CharacteristicReturnType,
   type ComputedCharacteristics,
 } from "../types/characteristics";
 
@@ -24,6 +27,35 @@ export interface CharacteristicRank {
   score: number;
 }
 
+function rankingValue(
+  name: CharacteristicName,
+  value?: CharacteristicReturnType,
+) {
+  if (value === undefined) return;
+
+  switch (characteristicDefinitions[name].type) {
+    case CharacteristicType.Enum:
+      return;
+
+    case CharacteristicType.Number:
+      return value as number;
+
+    case CharacteristicType.NumberList: {
+      const values = value as number[];
+
+      if (values.length === 0) return;
+
+      let total = 0;
+
+      for (const current of values) {
+        total += current;
+      }
+
+      return total / values.length;
+    }
+  }
+}
+
 export function calculateRankings(
   characteristics: ComputedCharacteristics,
   comparisons: ComputedCharacteristics[],
@@ -31,7 +63,9 @@ export function calculateRankings(
   const rankings = new Map<CharacteristicName, CharacteristicRank>();
 
   for (const [name, value] of characteristics) {
-    if (typeof value !== "number" || name[0] === "_") continue;
+    const currentValue = rankingValue(name, value);
+
+    if (currentValue === undefined || name[0] === "_") continue;
 
     const config = characteristicConfigs.get(name)!;
 
@@ -41,13 +75,13 @@ export function calculateRankings(
       config.ranking === CharacteristicRankingDirection.LowerIsBetter;
 
     const values = comparisons
-      .map((comparison) => comparison.get(name))
-      .filter((other) => typeof other === "number");
+      .map((comparison) => rankingValue(name, comparison.get(name)))
+      .filter((other) => other !== undefined);
 
     if (values.length === 0) continue;
 
     const betterCount = values.filter((other) =>
-      lowerIsBetter ? other < value : other > value,
+      lowerIsBetter ? other < currentValue : other > currentValue,
     ).length;
 
     rankings.set(name, {

packages/website/src/tankopedia/sortableCharacteristics.ts

@@ -0,0 +1,28 @@
+import { characteristics } from "../config/characteristics";
+import { characteristicsGroups } from "../config/characteristicsGroups";
+import {
+  CharacteristicType,
+  type CharacteristicName,
+} from "../types/characteristics";
+
+const sortableCharacteristicTypes = new Set<CharacteristicType>([
+  CharacteristicType.Number,
+  CharacteristicType.NumberList,
+]);
+
+export const sortableCharacteristics = new Set<CharacteristicName>();
+
+for (const group of characteristicsGroups) {
+  for (const config of group.order) {
+    if (!("name" in config)) continue;
+
+    // TODO: remove this when all characteristics are defined
+    if (!(config.name in characteristics)) continue;
+
+    const item = characteristics[config.name];
+
+    if (!sortableCharacteristicTypes.has(item.type)) continue;
+
+    sortableCharacteristics.add(config.name);
+  }
+}

packages/website/src/types/characteristics.ts

@@ -1,3 +1,4 @@
+import type { TankEnvironment } from "@blitzkit/core";
 import type { BlitzEffectScript } from "@blitzkit/core/src/types/blitzEffectScript";
 import type { Strings } from "@blitzkit/i18n";
 import type {
@@ -13,7 +14,6 @@ import type { ReactNode } from "react";
 import type { characteristics } from "../config/characteristics";
 import type { toys } from "../config/toys";
 import type { DuelSide } from "../hooks/useEquipment";
-import type { TankEnvironment } from "../stores/tankopedia";
 import type { TankState } from "../tankopedia/tankState";
 
 export type Characteristic = {
@@ -27,6 +27,10 @@ export type Characteristic = {
       type: CharacteristicType.Number;
       compute(context: CharacteristicContext): number;
     }
+  | {
+      type: CharacteristicType.NumberList;
+      compute(context: CharacteristicContext): number[];
+    }
 );
 
 export type CharacteristicScript = (
@@ -63,6 +67,7 @@ export type CrewStatRole = "commander" | "loader" | "gunner" | "driver";
 export enum CharacteristicType {
   Enum,
   Number,
+  NumberList,
 }
 
 export enum CharacteristicRanking {