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

@@ -143,6 +143,9 @@
       "modules": "Modules",
       "equipment": "Equipment",
       "shells": "Shells",
+      "clear": "Clear",
+      "maximize": "Maximize",
+      "skills": "Crew skills",
       "alternative": "Alt"
     },
 
@@ -481,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/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/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/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.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";
@@ -201,7 +201,7 @@ function CompareOptions() {
       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],
       }),
     },
@@ -209,7 +209,7 @@ function CompareOptions() {
       value: `${TankopediaRelativeAgainst.Tier}`,
       relativeAgainst: TankopediaRelativeAgainst.Tier,
       label: literals(strings.tanks.characteristics.compare.tier, {
-        tier: TIER_ROMAN_NUMERALS[tank.tier],
+        tier: romanize(tank.tier),
       }),
     },
     {

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/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[] = [
   // {
@@ -299,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/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/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 = {