feat: upgrade Guess

* New translations en.json (French)

* New translations en.json (Spanish)

* New translations en.json (Japanese)

* New translations en.json (Polish)

* New translations en.json (Portuguese)

* New translations en.json (Russian)

* New translations en.json (Ukrainian)

* New translations en.json (Chinese Simplified)

.github/workflows/host-bot.yml

@@ -22,6 +22,19 @@ env:
   PUBLIC_WARGAMING_APPLICATION_ID: ${{ secrets.PUBLIC_WARGAMING_APPLICATION_ID }}
   PUBLIC_ASSET_FAST_USER: ${{ secrets.PUBLIC_ASSET_FAST_USER }}
   PUBLIC_ASSET_FAST_REPO: ${{ secrets.PUBLIC_ASSET_FAST_REPO }}
+  PUBLIC_PROMOTE_OPENTEST: ${{ secrets.PUBLIC_PROMOTE_OPENTEST }}
+  ALLOW_ROBOTS: ${{ secrets.ALLOW_ROBOTS }}
+  WOTB_GLOSSARY: ${{ secrets.WOTB_GLOSSARY }}
+  PUBLIC_GOOGLE_TAG_MANAGER_ID: ${{ secrets.PUBLIC_GOOGLE_TAG_MANAGER_ID }}
+  PUBLIC_GOOGLE_ANALYTICS_PROPERTY_ID: ${{ secrets.PUBLIC_GOOGLE_ANALYTICS_PROPERTY_ID }}
+  GOOGLE_APPLICATION_CREDENTIALS: ${{ secrets.GOOGLE_APPLICATION_CREDENTIALS }}
+  WOTB_GLOSSARY_DOMAIN: ${{ secrets.WOTB_GLOSSARY_DOMAIN }}
+  WOTB_GLOSSARY_PATH: ${{ secrets.WOTB_GLOSSARY_PATH }}
+  PUBLIC_DISCORD_SERVER_ID: ${{ secrets.PUBLIC_DISCORD_SERVER_ID }}
+  PUBLIC_ASSET_BASE: ${{ secrets.PUBLIC_ASSET_BASE }}
+  PUBLIC_BRANCH: ${{ secrets.PUBLIC_BRANCH }}
+  PUBLIC_GUIDE_WEBSITE: ${{ secrets.PUBLIC_GUIDE_WEBSITE }}
+  SERVICING: ${{ secrets.SERVICING }}
 
 jobs:
   host:

.github/workflows/website.yml

@@ -29,6 +29,8 @@ env:
   PUBLIC_DISCORD_SERVER_ID: ${{ secrets.PUBLIC_DISCORD_SERVER_ID }}
   PUBLIC_ASSET_BASE: ${{ secrets.PUBLIC_ASSET_BASE }}
   PUBLIC_BRANCH: ${{ secrets.PUBLIC_BRANCH }}
+  PUBLIC_GUIDE_WEBSITE: ${{ secrets.PUBLIC_GUIDE_WEBSITE }}
+  SERVICING: ${{ secrets.SERVICING }}
 
 jobs:
   build:

.prettierrc

@@ -1,7 +0,0 @@
-{
-  "trailingComma": "all",
-  "tabWidth": 2,
-  "semi": true,
-  "singleQuote": true,
-  "printWidth": 80
-}

.vscode/settings.json

@@ -222,6 +222,7 @@
     "yolo",
     "youtuber",
     "youtubers",
+    "zoomable",
     "zustand"
   ],
   "deno.enable": false,

docs/changelogs/1.27.16.md

@@ -0,0 +1,25 @@
+# BlitzKit 1.27.16
+
+## Features
+
+- Added links to GuidesBlitz to Tankopedia to aid users understand tanks beyond just numbers and stats
+- Added a gun depression and yaw visualizer
+
+## Changes
+
+- Made the colors of the advanced highlighting mode more subtle
+- Made the Tankopedia stat lines more condensed
+- You can now scroll the page even with your cursor on the Tankopedia sandbox
+
+## Fixes
+
+- Fixed a bug where the range of increased gun depression was incorrectly doubled
+- Removed an unintended space before the "x" in the "Gun damaged" stat
+- Fixed an issue causing the 3D renderer to render frames even when off screen
+- Fixed a differential issue causing excessive rerendering of the stat lines
+- Images no longer exceed the width of the device in the docs
+- Assault shells no longer scale the module damage with distance
+
+## Technical Changes
+
+- Removed all code relating to the canceled "Shooting Range" mode

docs/changelogs/1.27.17.md

@@ -0,0 +1,18 @@
+# BlitzKit 1.27.17
+
+This update was released early for the website. Today, it'll be officially announced and released for the bot
+
+## Features
+
+- Added the shell reload visualizer to aid people in getting a feel for how long shell reloads really are
+- Added lines of stats for the burst shells
+
+## Changes
+
+- Removed the redundant word "Shell" from "Shell reload" and "Shell reloads"
+- Removed the penetration over distance slider
+
+## Fixes
+
+- Fixed the DPM of tanks with burst shells like the ATAC
+  - The DPM will still be different from the game due to a bug in World of Tanks Blitz; I am trying to get Wargaming to fix it; trust BlitzKit!

docs/changelogs/1.27.18.md

@@ -0,0 +1,11 @@
+# BlitzKit 1.27.18
+
+## Features
+
+- Added a mini-game to BlitzKit similar to "Guess Who's That Pokemon" but with tanks: http://blitzkit.vercel.app/guess
+- Switched to a new renderer for better lighting for the Tankopedia
+
+## Fixes
+
+- The loading bar for the Tankopedia sandbox now shows up again
+- Removed a lot of dead code, improving performance

docs/changelogs/1.27.19.md

@@ -0,0 +1,18 @@
+# BlitzKit 1.27.19
+
+Two updates in a day? I just got a little excited by the new Tankopedia lighting.
+
+## Features
+
+- The camera is now lower town in the Tankopedia, giving the tank a more heroic feel
+- Tanks are better framed across all devices, minimizing whitespace
+- Added a skip button for the reload visualizer to skip to the next event
+
+## Fixes
+
+- Removed the useless "show grid" setting
+- Taking screenshots now no longer includes the scene props like the floor
+- The subtler color contrast for the advanced highlighting has now been reverted back to the higher contrast
+- The shot display card is now properly aligned as a proper table again
+- Tank modules are once again considered in the penetration tester
+- Tank filters in the antagonist selector in the Tankopedia sandbox are now properly aligned

package.json

@@ -1,7 +1,7 @@
 {
   "name": "blitzkit",
   "private": true,
-  "version": "1.27.15",
+  "version": "1.27.19",
   "description": "🎉 Tools for everything World of Tanks Blitz",
   "type": "module",
   "types": "./types.d.ts",
@@ -41,6 +41,7 @@
   },
   "license": "MIT",
   "dependencies": {
+    "cheerio": "^1.1.2",
     "googleapis": "^144.0.0",
     "lodash-es": "^4.17.21",
     "protobufjs": "^7.5.2",

packages/bot/src/commands/research.tsx

@@ -197,15 +197,10 @@ export const researchCommand = new Promise<CommandRegistry>((resolve) => {
 
             turret.guns.forEach((gun) => {
               if (
-                gun.gun_type!.value.base.research_cost !== undefined &&
-                typeof gun.gun_type!.value.base.research_cost
-                  .research_cost_type!.value === 'number'
+                gun.research_cost !== undefined &&
+                typeof gun.research_cost.research_cost_type!.value === 'number'
               ) {
-                gunXps.set(
-                  gun.gun_type!.value.base.id,
-                  gun.gun_type!.value.base.research_cost.research_cost_type!
-                    .value,
-                );
+                gunXps.set(gun.id, gun.research_cost.research_cost_type!.value);
               }
             });
           });

packages/core/src/blitzkit/resolveDpm.ts

@@ -1,6 +1,6 @@
 import {
   GunDefinition,
-  GunDefinitionAutoReloaderProperties,
+  GunDefinitionAutoReloader,
   ShellDefinition,
 } from '../protos';
 
@@ -15,34 +15,46 @@ export function resolveDpm(
   let dps: number;
 
   if (gun.gun_type!.$case === 'regular') {
-    dps = alpha / (reloadCoefficient * gun.gun_type!.value.extension.reload);
+    dps = alpha / (reloadCoefficient * gun.gun_type!.value.reload);
   } else if (gun.gun_type!.$case === 'auto_loader') {
-    dps =
-      (alpha * gun.gun_type!.value.extension.shell_count) /
-      (gun.gun_type!.value.extension.clip_reload * reloadCoefficient +
-        (gun.gun_type!.value.extension.shell_count - 1) *
-          gun.gun_type!.value.extension.intra_clip *
-          intraClipCoefficient);
-  } else {
-    const mostOptimalShell =
-      gun.gun_type!.value.extension.shell_reloads.reduce<null | {
-        index: number;
-        reload: number;
-      }>((current, reloadRaw, index) => {
-        const reload =
-          reloadRaw * reloadCoefficient +
-          (index > 0
-            ? (
-                gun.gun_type!.value
-                  .extension as GunDefinitionAutoReloaderProperties
-              ).intra_clip * intraClipCoefficient
-            : 0);
+    const damage = alpha * gun.gun_type!.value.shell_count;
+    let time = gun.gun_type!.value.clip_reload * reloadCoefficient;
 
-        if (current === null || reload < current.reload) {
-          return { index, reload };
-        }
-        return current;
-      }, null)!;
+    if (gun.burst) {
+      time +=
+        (gun.gun_type!.value.shell_count / gun.burst.count - 1) *
+        gun.gun_type!.value.intra_clip *
+        intraClipCoefficient;
+
+      time +=
+        (gun.gun_type!.value.shell_count / gun.burst.count) *
+        (gun.burst.count - 1) *
+        gun.burst.interval;
+    } else {
+      time +=
+        (gun.gun_type!.value.shell_count - 1) *
+        gun.gun_type!.value.intra_clip *
+        intraClipCoefficient;
+    }
+
+    dps = damage / time;
+  } else {
+    const mostOptimalShell = gun.gun_type!.value.shell_reloads.reduce<null | {
+      index: number;
+      reload: number;
+    }>((current, reloadRaw, index) => {
+      const reload =
+        reloadRaw * reloadCoefficient +
+        (index > 0
+          ? (gun.gun_type!.value as GunDefinitionAutoReloader).intra_clip *
+            intraClipCoefficient
+          : 0);
+
+      if (current === null || reload < current.reload) {
+        return { index, reload };
+      }
+      return current;
+    }, null)!;
 
     dps = alpha / mostOptimalShell?.reload;
   }

packages/core/src/blitzkit/uniqueGuns.ts

@@ -7,8 +7,8 @@ export function uniqueGuns(turrets: TurretDefinition[]) {
 
   forEachRight(turrets, (turret) => {
     forEachRight(turret.guns, (gun) => {
-      if (!gunIds.has(gun.gun_type!.value.base.id)) {
-        gunIds.add(gun.gun_type!.value.base.id);
+      if (!gunIds.has(gun.id)) {
+        gunIds.add(gun.id);
         guns.push({ turret, gun });
       }
     });

packages/core/src/protos/tank_definitions.proto

@@ -108,58 +108,47 @@ message GunDefinition {
     GunDefinitionAutoLoader auto_loader = 2;
     GunDefinitionAutoReloader auto_reloader = 3;
   }
+
+  required uint32 id = 4;
+  required float rotation_speed = 5;
+  optional ResearchCost research_cost = 6;
+  required uint32 weight = 7;
+  required I18nString name = 8;
+  required uint32 tier = 9;
+  repeated ShellDefinition shells = 10;
+  required float camouflage_loss = 11;
+  required float aim_time = 12;
+  required float dispersion_base = 13;
+  required float dispersion_traverse = 14;
+  required float dispersion_shot = 15;
+  required float dispersion_damaged = 16;
+  repeated Unlock unlocks = 17;
+  required uint32 shell_capacity = 18;
+  optional AssaultRanges assault_ranges = 19;
+  optional Burst burst = 20;
 }
 
 message GunDefinitionRegular {
-  required GunDefinitionBase base = 1;
-  required GunDefinitionRegularProperties extension = 2;
-}
-
-message GunDefinitionRegularProperties {
   required float reload = 1;
 }
 
 message GunDefinitionAutoLoader {
-  required GunDefinitionBase base = 1;
-  required GunDefinitionAutoLoaderProperties extension = 2;
-}
-
-message GunDefinitionAutoLoaderProperties {
   required float clip_reload = 1;
   required float intra_clip = 2;
   required float shell_count = 3;
 }
 
-message GunDefinitionAutoReloader {
-  required GunDefinitionBase base = 1;
-  required GunDefinitionAutoReloaderProperties extension = 2;
+message Burst {
+  required uint32 count = 1;
+  required float interval = 2;
 }
 
-message GunDefinitionAutoReloaderProperties {
+message GunDefinitionAutoReloader {
   repeated float shell_reloads = 1;
   required float intra_clip = 2;
   required float shell_count = 3;
 }
 
-message GunDefinitionBase {
-  required uint32 id = 1;
-  required float rotation_speed = 2;
-  optional ResearchCost research_cost = 3;
-  required uint32 weight = 4;
-  required I18nString name = 5;
-  required uint32 tier = 6;
-  repeated ShellDefinition shells = 7;
-  required float camouflage_loss = 8;
-  required float aim_time = 9;
-  required float dispersion_base = 10;
-  required float dispersion_traverse = 11;
-  required float dispersion_shot = 12;
-  required float dispersion_damaged = 13;
-  repeated Unlock unlocks = 14;
-  required uint32 shell_capacity = 15;
-  optional AssaultRanges assault_ranges = 16;
-}
-
 message AssaultRanges {
   repeated AssaultRange ranges = 1;
   repeated ShellType types = 2;

packages/i18n/strings/en.json

@@ -861,6 +861,13 @@
     },
 
     "tools": {
+      "mixer": {
+        "name": "Mixer",
+        "button": "Mix and match",
+        "description": "Mix tank modules",
+        "seo_description": "Mix and match hulls, turrets, and guns of tanks in World of Tanks Blitz"
+      },
+
       "guess": {
         "name": "Guess the tank",
         "button": "Guess away",
@@ -887,6 +894,10 @@
         "tank_seo_description": "%s1 armor, statistics, equipment, provisions, and more. %s2 DPM, %s3hp alpha, %s4mm penetration, %s5kph top speed, %s6hp health.",
 
         "visualizers": {
+          "reload": {
+            "skip": "Skip"
+          },
+
           "assault": {
             "title": "Assault shells"
           },
@@ -913,6 +924,13 @@
             "percentage": "%s1%",
             "ghost_factory": "Ghost Factory",
             "dead_rail": "Dead Rail"
+          },
+
+          "flexibility": {
+            "yaw": "Yaw",
+            "pitch": "Pitch",
+            "min": "Min",
+            "max": "Max"
           }
         },
 
@@ -928,9 +946,7 @@
             "green_penetration": "Green penetration",
             "hide_model_under_armor": "Hide model under armor",
             "opaque": "Opaque",
-            "dev_wireframe": "DEV: wireframe",
-            "environment": "Environment",
-            "show_grid": "Show grid"
+            "dev_wireframe": "DEV: wireframe"
           },
 
           "screenshot": {
@@ -1026,7 +1042,6 @@
 
         "review": {
           "title": "Review videos",
-          "disclaimer": "BlitzKit does not endorse any review videos.",
           "join": "Apply to %s1 YouTuber program"
         },
 
@@ -1090,8 +1105,8 @@
             "dpmEffective": "Effective at 60s",
             "shells": "Shells",
             "mostOptimalShellIndex": "Most optimal shell",
-            "shellReloads": "Shell reloads",
-            "shellReload": "Shell reload",
+            "shellReloads": "Reloads",
+            "shellReload": "Reload",
             "intraClip": "Intra-clip",
             "caliber": "Caliber",
             "penetration": "Penetration",
@@ -1149,7 +1164,9 @@
             "shellRange": "Shell range",
             "shellCapacity": "Shell capacity",
             "gunType": "Gun type",
-            "penetrationAt250m": "Penetration at 250m"
+            "penetrationAt250m": "Penetration at 250m",
+            "burstShells": "Burst shell count",
+            "burstInterShell": "Burst inter-shell"
           }
         },
 

packages/i18n/strings/es.json

@@ -810,6 +810,12 @@
             "percentage": "%s1%",
             "ghost_factory": "Ghost Factory",
             "dead_rail": "Dead Rail"
+          },
+          "flexibility": {
+            "yaw": "Yaw",
+            "pitch": "Pitch",
+            "min": "Min",
+            "max": "Max"
           }
         },
         "sandbox": {
@@ -912,7 +918,6 @@
         },
         "review": {
           "title": "Vídeos de reseña",
-          "disclaimer": "BlitzKit no respalda ningún vídeo de reseñas.",
           "join": "Aplica para el programa de YouTube de %s1"
         },
         "configuration": {
@@ -973,8 +978,8 @@
             "dpmEffective": "Effective at 60s",
             "shells": "Proyectiles",
             "mostOptimalShellIndex": "Proyectil más óptimo",
-            "shellReloads": "Tiempos de recarga",
-            "shellReload": "Tiempo de recarga",
+            "shellReloads": "Reloads",
+            "shellReload": "Recarga",
             "intraClip": "Intra-clip",
             "caliber": "Calibre",
             "penetration": "Penetración",
@@ -1032,7 +1037,9 @@
             "shellRange": "Rango del proyectil",
             "shellCapacity": "Capacidad de proyectiles",
             "gunType": "Tipo de cañón",
-            "penetrationAt250m": "Penetración a 250 m"
+            "penetrationAt250m": "Penetración a 250 m",
+            "burstShells": "Burst shell count",
+            "burstInterShell": "Burst inter-shell"
           }
         },
         "firepower": {

packages/i18n/strings/fr.json

@@ -810,6 +810,12 @@
             "percentage": "%s1%",
             "ghost_factory": "Ghost Factory",
             "dead_rail": "Dead Rail"
+          },
+          "flexibility": {
+            "yaw": "Yaw",
+            "pitch": "Pitch",
+            "min": "Min",
+            "max": "Max"
           }
         },
         "sandbox": {
@@ -912,7 +918,6 @@
         },
         "review": {
           "title": "Review videos",
-          "disclaimer": "BlitzKit does not endorse any review videos.",
           "join": "Apply to %s1 YouTuber program"
         },
         "configuration": {
@@ -973,8 +978,8 @@
             "dpmEffective": "Effective at 60s",
             "shells": "Shells",
             "mostOptimalShellIndex": "Most optimal shell",
-            "shellReloads": "Shell reloads",
-            "shellReload": "Shell reload",
+            "shellReloads": "Reloads",
+            "shellReload": "Reload",
             "intraClip": "Intra-clip",
             "caliber": "Caliber",
             "penetration": "Penetration",
@@ -1032,7 +1037,9 @@
             "shellRange": "Shell range",
             "shellCapacity": "Shell capacity",
             "gunType": "Gun type",
-            "penetrationAt250m": "Penetration at 250m"
+            "penetrationAt250m": "Penetration at 250m",
+            "burstShells": "Burst shell count",
+            "burstInterShell": "Burst inter-shell"
           }
         },
         "firepower": {

packages/i18n/strings/ja.json

@@ -810,6 +810,12 @@
             "percentage": "%s1%",
             "ghost_factory": "Ghost Factory",
             "dead_rail": "Dead Rail"
+          },
+          "flexibility": {
+            "yaw": "Yaw",
+            "pitch": "Pitch",
+            "min": "Min",
+            "max": "Max"
           }
         },
         "sandbox": {
@@ -912,7 +918,6 @@
         },
         "review": {
           "title": "Review videos",
-          "disclaimer": "BlitzKitはいかなるレビュー動画も後援していません。",
           "join": "%s1 YouTuberプログラムに応募する"
         },
         "configuration": {
@@ -973,7 +978,7 @@
             "dpmEffective": "60秒での有効値",
             "shells": "砲弾",
             "mostOptimalShellIndex": "最適な弾数",
-            "shellReloads": "自動装填時間",
+            "shellReloads": "Reloads",
             "shellReload": "装填時間",
             "intraClip": "砲弾再装填時間",
             "caliber": "口径",
@@ -1032,7 +1037,9 @@
             "shellRange": "射程",
             "shellCapacity": "総弾数",
             "gunType": "主砲タイプ",
-            "penetrationAt250m": "250m での貫通力"
+            "penetrationAt250m": "250m での貫通力",
+            "burstShells": "Burst shell count",
+            "burstInterShell": "Burst inter-shell"
           }
         },
         "firepower": {

packages/i18n/strings/pl.json

@@ -810,6 +810,12 @@
             "percentage": "%s1%",
             "ghost_factory": "Ghost Factory",
             "dead_rail": "Dead Rail"
+          },
+          "flexibility": {
+            "yaw": "Yaw",
+            "pitch": "Pitch",
+            "min": "Min",
+            "max": "Max"
           }
         },
         "sandbox": {
@@ -912,7 +918,6 @@
         },
         "review": {
           "title": "Review videos",
-          "disclaimer": "BlitzKit does not endorse any review videos.",
           "join": "Apply to %s1 YouTuber program"
         },
         "configuration": {
@@ -973,8 +978,8 @@
             "dpmEffective": "Effective at 60s",
             "shells": "Shells",
             "mostOptimalShellIndex": "Most optimal shell",
-            "shellReloads": "Shell reloads",
-            "shellReload": "Shell reload",
+            "shellReloads": "Reloads",
+            "shellReload": "Reload",
             "intraClip": "Intra-clip",
             "caliber": "Caliber",
             "penetration": "Penetration",
@@ -1032,7 +1037,9 @@
             "shellRange": "Shell range",
             "shellCapacity": "Shell capacity",
             "gunType": "Gun type",
-            "penetrationAt250m": "Penetration at 250m"
+            "penetrationAt250m": "Penetration at 250m",
+            "burstShells": "Burst shell count",
+            "burstInterShell": "Burst inter-shell"
           }
         },
         "firepower": {

packages/i18n/strings/pt.json

@@ -810,6 +810,12 @@
             "percentage": "%s1%",
             "ghost_factory": "Ghost Factory",
             "dead_rail": "Dead Rail"
+          },
+          "flexibility": {
+            "yaw": "Yaw",
+            "pitch": "Pitch",
+            "min": "Min",
+            "max": "Max"
           }
         },
         "sandbox": {
@@ -912,7 +918,6 @@
         },
         "review": {
           "title": "Vídeos de análise",
-          "disclaimer": "BlitzKit não aprova nenhum vídeo de análise.",
           "join": "Candidate-se para %s1 um programa YouTuber"
         },
         "configuration": {
@@ -973,8 +978,8 @@
             "dpmEffective": "Efetivo aos 60s",
             "shells": "Projéteis",
             "mostOptimalShellIndex": "Projétil mais ideal",
-            "shellReloads": "Recarga de projétil",
-            "shellReload": "Recarregamento de projétil",
+            "shellReloads": "Reloads",
+            "shellReload": "Recarga",
             "intraClip": "Intra-clipe",
             "caliber": "Calibre",
             "penetration": "Penetração",
@@ -1032,7 +1037,9 @@
             "shellRange": "Alcance de projétil",
             "shellCapacity": "Capacidade de projéteis",
             "gunType": "Tipo de arma",
-            "penetrationAt250m": "Penetração à 250m"
+            "penetrationAt250m": "Penetração à 250m",
+            "burstShells": "Burst shell count",
+            "burstInterShell": "Burst inter-shell"
           }
         },
         "firepower": {

packages/i18n/strings/ru.json

@@ -788,7 +788,7 @@
         "tank_seo_description": "%s1 броня, статистика, оборудование, снабжение и многое другое. %s2 УВМ, %s3hp альфа, %s4mm пробитие, %s5км/ч лучшая скорость, %s6hp здоровье.",
         "visualizers": {
           "assault": {
-            "title": "Assault shells"
+            "title": "Штурмовые снаряды"
           },
           "rotator": {
             "hull": "Корпус",
@@ -810,6 +810,12 @@
             "percentage": "%s1%",
             "ghost_factory": "Промзона",
             "dead_rail": "Эшелон"
+          },
+          "flexibility": {
+            "yaw": "Отклонение",
+            "pitch": "Наклон",
+            "min": "Вниз",
+            "max": "Вверх"
           }
         },
         "sandbox": {
@@ -912,7 +918,6 @@
         },
         "review": {
           "title": "Видеообзоры",
-          "disclaimer": "BlitzKit не несёт ответственности за видеообзоры.",
           "join": "Предложить ютубера для программы %s1"
         },
         "configuration": {
@@ -973,13 +978,13 @@
             "dpmEffective": "Эффективность за 60с",
             "shells": "Снарядов в барабане",
             "mostOptimalShellIndex": "Самый эффективный снаряд",
-            "shellReloads": "Перезарядка снарядов",
+            "shellReloads": "Reloads",
             "shellReload": "Перезарядка",
             "intraClip": "Между снарядами",
             "caliber": "Калибр",
             "penetration": "Пробитие",
             "damage": "Урон",
-            "damageWithoutAssault": "Damage without assault shells",
+            "damageWithoutAssault": "Урон без штурмовых снарядов",
             "clipDamage": "Урон с барабана",
             "moduleDamage": "Урон по модулям",
             "explosionRadius": "Разлет осколков",
@@ -1032,7 +1037,9 @@
             "shellRange": "Дальность снаряда",
             "shellCapacity": "Боезапас",
             "gunType": "Тип орудия",
-            "penetrationAt250m": "Пробитие на 250м"
+            "penetrationAt250m": "Пробитие на 250м",
+            "burstShells": "Burst shell count",
+            "burstInterShell": "Burst inter-shell"
           }
         },
         "firepower": {

packages/i18n/strings/uk.json

@@ -810,6 +810,12 @@
             "percentage": "%s1%",
             "ghost_factory": "Ghost Factory",
             "dead_rail": "Dead Rail"
+          },
+          "flexibility": {
+            "yaw": "Yaw",
+            "pitch": "Pitch",
+            "min": "Min",
+            "max": "Max"
           }
         },
         "sandbox": {
@@ -912,7 +918,6 @@
         },
         "review": {
           "title": "Review videos",
-          "disclaimer": "BlitzKit does not endorse any review videos.",
           "join": "Apply to %s1 YouTuber program"
         },
         "configuration": {
@@ -973,8 +978,8 @@
             "dpmEffective": "Effective at 60s",
             "shells": "Снаряди",
             "mostOptimalShellIndex": "Most optimal shell",
-            "shellReloads": "Shell reloads",
-            "shellReload": "Shell reload",
+            "shellReloads": "Reloads",
+            "shellReload": "Час перезаряджання",
             "intraClip": "Intra-clip",
             "caliber": "Калібр",
             "penetration": "Бронепробиття",
@@ -1032,7 +1037,9 @@
             "shellRange": "Shell range",
             "shellCapacity": "Shell capacity",
             "gunType": "Тип гармати",
-            "penetrationAt250m": "Penetration at 250m"
+            "penetrationAt250m": "Penetration at 250m",
+            "burstShells": "Burst shell count",
+            "burstInterShell": "Burst inter-shell"
           }
         },
         "firepower": {

packages/i18n/strings/zh.json

@@ -810,6 +810,12 @@
             "percentage": "%s1%",
             "ghost_factory": "幽灵工厂",
             "dead_rail": "死亡铁道"
+          },
+          "flexibility": {
+            "yaw": "Yaw",
+            "pitch": "Pitch",
+            "min": "Min",
+            "max": "Max"
           }
         },
         "sandbox": {
@@ -912,7 +918,6 @@
         },
         "review": {
           "title": "回顾影片",
-          "disclaimer": "BlitzKit 不支援任何影片回顾。",
           "join": "应用到 %s1 YouTuber程序"
         },
         "configuration": {
@@ -973,8 +978,8 @@
             "dpmEffective": "60秒内生效",
             "shells": "炮弹 ",
             "mostOptimalShellIndex": "最优炮弹",
-            "shellReloads": "弹匣装填",
-            "shellReload": "炮弹装填",
+            "shellReloads": "Reloads",
+            "shellReload": "装填时间",
             "intraClip": "炮弹装填",
             "caliber": "口径",
             "penetration": "穿深",
@@ -1032,7 +1037,9 @@
             "shellRange": "射程",
             "shellCapacity": "携弹量",
             "gunType": "炮管类型",
-            "penetrationAt250m": "两百五十米处的穿透力"
+            "penetrationAt250m": "两百五十米处的穿透力",
+            "burstShells": "Burst shell count",
+            "burstInterShell": "Burst inter-shell"
           }
         },
         "firepower": {

packages/scripts/src/buildAssets/definitions.ts

@@ -12,7 +12,6 @@ import {
   EquipmentSlot,
   GameDefinitions,
   GunDefinition,
-  GunDefinitionBase,
   I18nString,
   MapDefinitions,
   ModelDefinitions,
@@ -274,6 +273,7 @@ interface VehicleDefinitions {
           pumpGunMode?: boolean;
           pumpGunReloadTimes?: string;
           clip?: { count: number; rate: number };
+          burst?: { count: number; rate: number };
           models: { undamaged: string };
           extras?: {
             trayShell?: {
@@ -1304,7 +1304,7 @@ export async function definitions() {
                 }
               });
 
-            const base = {
+            tankDefinitions.tanks[tankId].turrets[turretIndex].guns.push({
               id: gunId,
               weight: gunListEntry.weight,
               rotation_speed: gunListEntry.rotationSpeed,
@@ -1324,41 +1324,38 @@ export async function definitions() {
               unlocks: resolveUnlocks(gun.unlocks),
               shell_capacity: gun.maxAmmo ?? gunListEntry.maxAmmo,
               assault_ranges,
-            } satisfies GunDefinitionBase;
-
-            tankDefinitions.tanks[tankId].turrets[turretIndex].guns.push({
+              burst:
+                gun.burst && gun.burst.count > 1
+                  ? {
+                      count: gun.burst.count,
+                      interval: 60 / gun.burst.rate,
+                    }
+                  : undefined,
               gun_type:
                 gunType === 'regular'
                   ? {
                       $case: 'regular',
                       value: {
-                        base,
-                        extension: { reload: gun.reloadTime },
+                        reload: gun.reloadTime,
                       },
                     }
                   : gunType === 'autoReloader'
                     ? {
                         $case: 'auto_reloader',
                         value: {
-                          base,
-                          extension: {
-                            intra_clip: 60 / gun.clip!.rate,
-                            shell_count: gunClipCount,
-                            shell_reloads: gun
-                              .pumpGunReloadTimes!.split(' ')
-                              .map(Number),
-                          },
+                          intra_clip: 60 / gun.clip!.rate,
+                          shell_count: gunClipCount,
+                          shell_reloads: gun
+                            .pumpGunReloadTimes!.split(' ')
+                            .map(Number),
                         },
                       }
                     : {
                         $case: 'auto_loader',
                         value: {
-                          base,
-                          extension: {
-                            intra_clip: 60 / gun.clip!.rate,
-                            clip_reload: gun.reloadTime,
-                            shell_count: gunClipCount,
-                          },
+                          intra_clip: 60 / gun.clip!.rate,
+                          clip_reload: gun.reloadTime,
+                          shell_count: gunClipCount,
                         },
                       },
             } satisfies GunDefinition);
@@ -1407,7 +1404,7 @@ export async function definitions() {
 
               tankDefinitions.tanks[tankId].turrets[turretIndex].guns[
                 gunIndex
-              ].gun_type!.value.base!.shells.push({
+              ].shells.push({
                 id: shellId,
                 name: shellName,
                 velocity: gunShellEntry.speed,
@@ -1495,9 +1492,7 @@ export async function definitions() {
         turret.research_cost = turretXps.get(turret.id);
 
         Object.values(turret.guns).forEach((gunRaw) => {
-          gunRaw.gun_type!.value.base!.research_cost = gunXps.get(
-            gunRaw.gun_type!.value.base!.id,
-          );
+          gunRaw.research_cost = gunXps.get(gunRaw.id);
         });
       });
 

packages/scripts/src/buildAssets/tankIcons.ts

@@ -62,6 +62,7 @@ export async function tankIcons() {
 
           const nationVehicleId = tank.id;
           const id = (nationVehicleId << 8) + (NATION_IDS[nation] << 4) + 1;
+
           const parameters = await readYAMLDVPL<TankParameters>(
             `${DATA}/3d/Tanks/Parameters/${nation}/${tankKey}.yaml`,
           );

packages/scripts/src/buildAssets/tankModels.ts

@@ -1,7 +1,7 @@
 import { toUniqueId } from '@blitzkit/core';
 import { NodeIO } from '@gltf-transform/core';
 import { ALL_EXTENSIONS } from '@gltf-transform/extensions';
-import { readdir, writeFile } from 'fs/promises';
+import { readdir } from 'fs/promises';
 import { extractModel } from '../core/blitz/extractModel';
 import { readXMLDVPL } from '../core/blitz/readXMLDVPL';
 import { readYAMLDVPL } from '../core/blitz/readYAMLDVPL';
@@ -32,6 +32,7 @@ export async function tankModels() {
       if (tankKey.includes('tutorial_bot')) continue;
 
       const id = toUniqueId(nation, tank.id);
+
       const parameters = await readYAMLDVPL<TankParameters>(
         `${DATA}/3d/Tanks/Parameters/${nation}/${tankKey}.yaml`,
       );

packages/varuna/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "varuna",
+  "type": "module",
+  "main": "src/index.ts",
+  "dependencies": {
+    "react": "^18.3.1"
+  }
+}

packages/varuna/src/index.ts

@@ -0,0 +1,101 @@
+import { produce } from "immer";
+import { merge } from "lodash-es";
+import { useEffect, useState } from "react";
+
+interface ProviderProps<Arguments> {
+  args: Arguments;
+}
+
+export class Varuna<Type, Arguments = void> {
+  private listeners = new Set<(state: Type) => void>();
+
+  private initialized = false;
+  private _initial?: Type;
+  private _state?: Type;
+
+  constructor(
+    private creator: Type | ((...args: Arguments[]) => Type),
+    private persistence?: string
+  ) {
+    if (typeof creator !== "function") this.initialize(creator);
+  }
+
+  private initialize(initial: Type) {
+    let data = initial;
+
+    if (this.persistence && typeof localStorage !== "undefined") {
+      const dehydrated = localStorage.getItem(this.persistence);
+
+      if (dehydrated) {
+        const rehydrated = JSON.parse(dehydrated) as unknown;
+        data = merge(data, rehydrated);
+      }
+    }
+
+    this.initialized = true;
+    this._initial = data;
+    this._state = data;
+  }
+
+  useInitialization(...args: Arguments[]) {
+    if (this.initialized) return;
+
+    if (typeof this.creator !== "function") {
+      throw new Error("Provider must be used with a function creator");
+    }
+
+    this.initialize((this.creator as (...args: Arguments[]) => Type)(...args));
+  }
+
+  private dispatch() {
+    const state = this.state;
+    this.listeners.forEach((callback) => callback(state));
+  }
+
+  on<Slice>(slicer: (state: Type) => Slice, callback: (state: Slice) => void) {
+    const last = slicer(this.state);
+
+    function listener(state: Type) {
+      const next = slicer(state);
+      if (next !== last) callback(next);
+    }
+
+    this.listeners.add(listener);
+
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+
+  mutate(mutator: (state: Type) => void) {
+    this.set(produce(this.state, mutator));
+  }
+
+  private assertInitialized() {
+    if (!this.initialized) throw new Error("State used before initialization");
+  }
+
+  get state() {
+    this.assertInitialized();
+    return this._state as Type;
+  }
+
+  set(state: Type) {
+    this.assertInitialized();
+    this._state = state;
+    this.dispatch();
+  }
+
+  get initial() {
+    this.assertInitialized();
+    return this._initial as Type;
+  }
+
+  use<Slice = Type>(
+    slicer: (state: Type) => Slice = (state) => state as unknown as Slice
+  ) {
+    const [slice, setSlice] = useState(slicer(this.state));
+    useEffect(() => this.on(slicer, setSlice), []);
+    return slice;
+  }
+}

packages/varuna/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}

packages/website/package.json

@@ -13,6 +13,7 @@
     "@astrolib/seo": "^1.0.0-beta.8",
     "@blitzkit/core": "workspace:*",
     "@blitzkit/i18n": "workspace:*",
+    "varuna": "workspace:*",
     "@fontsource/inter": "^5.2.5",
     "@nanostores/persistent": "^0.10.2",
     "@nanostores/react": "^0.7.3",

packages/website/src/components/Armor/components/ArmorPlateDisplay.tsx

@@ -21,11 +21,9 @@ export function ArmorPlateDisplay() {
   const highlightArmor = TankopediaEphemeral.use(
     (state) => state.highlightArmor,
   );
-  const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
   const developerMode = App.useDeferred((state) => state.developerMode, false);
   const duelStore = Duel.useStore();
   const input = useRef<HTMLInputElement>(null);
-  const tankopediaEphemeralStore = TankopediaEphemeral.useStore();
 
   if (highlightArmor === undefined) return null;
 
@@ -95,13 +93,12 @@ export function ArmorPlateDisplay() {
                     if (event.key === 'Enter') {
                       input.current?.blur();
 
-                      mutateTankopediaEphemeral((draft) => {
+                      TankopediaEphemeral.mutate((draft) => {
                         draft.highlightArmor = undefined;
                         const { protagonist } = duelStore.getState();
                         const tank = draft.model;
                         const turret = tank.turrets[protagonist.turret.id];
-                        const gun =
-                          turret.guns[protagonist.gun.gun_type!.value.base.id];
+                        const gun = turret.guns[protagonist.gun.id];
                         const track = tank.tracks[protagonist.track.id];
 
                         if (highlightArmor.name.startsWith('hull_')) {
@@ -120,7 +117,7 @@ export function ArmorPlateDisplay() {
                       });
                     } else if (event.key === 'Escape') {
                       input.current?.blur();
-                      mutateTankopediaEphemeral((draft) => {
+                      TankopediaEphemeral.mutate((draft) => {
                         draft.highlightArmor = undefined;
                       });
                     }
@@ -138,7 +135,7 @@ export function ArmorPlateDisplay() {
                   mt="2"
                   color="red"
                   onClick={() => {
-                    mutateTankopediaEphemeral((draft) => {
+                    TankopediaEphemeral.mutate((draft) => {
                       if (!highlightArmor.editingPlate) return;
 
                       const index = resolveArmorIndex(highlightArmor.name);
@@ -146,20 +143,15 @@ export function ArmorPlateDisplay() {
                       if (index === undefined) return;
 
                       draft.highlightArmor = undefined;
-                      const initialState =
-                        tankopediaEphemeralStore.getInitialState();
+                      const initialState = TankopediaEphemeral.initial;
                       const { protagonist } = duelStore.getState();
                       const tank = draft.model;
                       const initialTank = initialState.model;
                       const turret = tank.turrets[protagonist.turret.id];
                       const initialTurret =
                         initialTank.turrets[protagonist.turret.id];
-                      const gun =
-                        turret.guns[protagonist.gun.gun_type!.value.base.id];
-                      const initialGun =
-                        initialTurret.guns[
-                          protagonist.gun.gun_type!.value.base.id
-                        ];
+                      const gun = turret.guns[protagonist.gun.id];
+                      const initialGun = initialTurret.guns[protagonist.gun.id];
                       const track = tank.tracks[protagonist.track.id];
                       const initialTrack =
                         initialTank.tracks[protagonist.track.id];

packages/website/src/components/Armor/components/PrimaryArmorScene.tsx

@@ -14,7 +14,6 @@ export const PrimaryArmorScene = memo(() => {
   const wrapper = useRef<Group>(null);
   const turretContainer = useRef<Group>(null);
   const gunContainer = useRef<Group>(null);
-  // const protagonist = Duel.use((draft) => draft.protagonist);
   const tank = Duel.use((state) => state.protagonist.tank);
   const track = Duel.use((state) => state.protagonist.track);
   const turret = Duel.use((state) => state.protagonist.turret);
@@ -24,8 +23,7 @@ export const PrimaryArmorScene = memo(() => {
   const tankModelDefinition = useTankModelDefinition();
   const trackModelDefinition = tankModelDefinition.tracks[track.id];
   const turretModelDefinition = tankModelDefinition.turrets[turret.id];
-  const gunModelDefinition =
-    turretModelDefinition.guns[gun.gun_type!.value.base.id];
+  const gunModelDefinition = turretModelDefinition.guns[gun.id];
   const hullOrigin = correctZYTuple(trackModelDefinition.origin);
   const turretOrigin = correctZYTuple(tankModelDefinition.turret_origin);
   const gunOrigin = correctZYTuple(turretModelDefinition.gun_origin);

packages/website/src/components/Armor/components/PrimaryArmorSceneComponent/index.tsx

@@ -7,8 +7,10 @@ import { invalidate, useFrame } from '@react-three/fiber';
 import { useEffect } from 'react';
 import {
   MeshBasicMaterial,
+  NormalBlending,
   Object3D,
   ShaderMaterial,
+  SubtractiveBlending,
   UniformsLib,
   UniformsUtils,
   Vector2,
@@ -32,13 +34,15 @@ const excludeMaterial = new MeshBasicMaterial({
   colorWrite: false,
 });
 
+const date = new Date();
+const isHalloween = date.getMonth() === 9 && date.getDate() === 31;
+
 export function PrimaryArmorSceneComponent({
   node,
   thickness,
 }: PrimaryArmorSceneComponentProps) {
   const tankopediaPersistentStore = TankopediaPersistent.useStore();
   const duelStore = Duel.useStore();
-  const tankopediaEphemeralStore = TankopediaEphemeral.useStore();
   const material = new ShaderMaterial({
     fragmentShader,
     vertexShader,
@@ -46,6 +50,8 @@ export function PrimaryArmorSceneComponent({
     fog: true,
     transparent: true,
 
+    blending: isHalloween ? SubtractiveBlending : NormalBlending,
+
     uniforms: UniformsUtils.merge([
       UniformsLib.common,
       UniformsLib.fog,
@@ -73,9 +79,9 @@ export function PrimaryArmorSceneComponent({
   });
 
   useEffect(() => {
-    async function handleShellChange() {
+    function handleShellChange() {
       const duel = duelStore.getState();
-      const tankopediaEphemeral = tankopediaEphemeralStore.getState();
+      const tankopediaEphemeral = TankopediaEphemeral.state;
       const shell = tankopediaEphemeral.customShell ?? duel.antagonist.shell;
 
       material.uniforms.caliber.value = shell.caliber;
@@ -90,14 +96,8 @@ export function PrimaryArmorSceneComponent({
       material.uniforms.damage.value = shell.armor_damage;
       material.uniforms.explosionRadius.value = shell.explosion_radius;
 
-      await handleProtagonistEquipmentChange(
-        duel.protagonist.equipmentMatrix,
-        true,
-      );
-      await handleAntagonistEquipmentChange(
-        duel.antagonist.equipmentMatrix,
-        true,
-      );
+      handleProtagonistEquipmentChange(duel.protagonist.equipmentMatrix, true);
+      handleAntagonistEquipmentChange(duel.antagonist.equipmentMatrix, true);
 
       invalidate();
     }
@@ -114,12 +114,12 @@ export function PrimaryArmorSceneComponent({
     function handleWireframeChange(wireframe: boolean) {
       material.wireframe = wireframe;
     }
-    async function handleProtagonistEquipmentChange(
+    function handleProtagonistEquipmentChange(
       equipment: EquipmentMatrix,
       noInvalidate = false,
     ) {
       const duel = duelStore.getState();
-      const hasEnhancedArmor = await hasEquipment(
+      const hasEnhancedArmor = hasEquipment(
         110,
         duel.protagonist.tank.equipment_preset,
         equipment,
@@ -130,15 +130,15 @@ export function PrimaryArmorSceneComponent({
 
       if (!noInvalidate) invalidate();
     }
-    async function handleAntagonistEquipmentChange(
+    function handleAntagonistEquipmentChange(
       equipment: EquipmentMatrix,
       noInvalidate = false,
     ) {
       const duel = duelStore.getState();
-      const tankopediaEphemeral = tankopediaEphemeralStore.getState();
+      const tankopediaEphemeral = TankopediaEphemeral.state;
       const shell = tankopediaEphemeral.customShell ?? duel.antagonist.shell;
       const penetration = shell.penetration.near;
-      const hasCalibratedShells = await hasEquipment(
+      const hasCalibratedShells = hasEquipment(
         103,
         duel.antagonist.tank.equipment_preset,
         equipment,
@@ -167,10 +167,7 @@ export function PrimaryArmorSceneComponent({
 
     const unsubscribes = [
       duelStore.subscribe((state) => state.antagonist.shell, handleShellChange),
-      tankopediaEphemeralStore.subscribe(
-        (state) => state.customShell,
-        handleShellChange,
-      ),
+      TankopediaEphemeral.on((state) => state.customShell, handleShellChange),
       tankopediaPersistentStore.subscribe(
         (state) => state.greenPenetration,
         handleGreenPenetrationChange,

packages/website/src/components/Armor/components/PrimaryArmorSceneComponent/shaders/fragment.glsl

@@ -25,7 +25,6 @@ uniform mat4 inverseProjectionMatrix;
 uniform highp sampler2D spacedArmorBuffer;
 uniform highp sampler2D spacedArmorDepth;
 
-const float HALF = 0.5;
 const float EXPLOSION_DAMAGE_FACTOR = 1.1;
 const float RANDOMIZATION_FACTOR = 0.05;
 const float GREEN_VALUE = 0.392;
@@ -81,12 +80,12 @@ void main() {
         float distFromArmor = primaryDist - spacedDist;
 
         if (canSplash) {
-          float finalDamage = HALF * damage * (1.0 - distFromArmor / explosionRadius) - EXPLOSION_DAMAGE_FACTOR * (finalThickness + spacedArmorThickness);
+          float finalDamage = 0.5 * damage * (1.0 - distFromArmor / explosionRadius) - EXPLOSION_DAMAGE_FACTOR * (finalThickness + spacedArmorThickness);
           splashChance = step(0.0, finalDamage);
           penetrationChance = 0.0;
 
         } else {
-          remainingPen -= HALF * remainingPen * distFromArmor;
+          remainingPen -= 0.5 * remainingPen * distFromArmor;
         }
       }
     }
@@ -98,13 +97,13 @@ void main() {
       penetrationChance = clamp(1.0 - (delta + randomization) / (2.0 * randomization), 0.0, 1.0);
 
       if (canSplash) {
-        float splashDamage = HALF * damage - EXPLOSION_DAMAGE_FACTOR * finalThickness;
+        float splashDamage = 0.5 * damage - EXPLOSION_DAMAGE_FACTOR * finalThickness;
         splashChance = step(0.0, splashDamage);
       }
     }
   }
 
-  float alpha = opaque ? 1.0 : HALF;
+  float alpha = opaque ? 1.0 : 0.5;
   vec3 baseColor = vec3(1.0, splashChance * GREEN_VALUE, 0.0);
 
   if (advancedHighlighting && didRicochet) {

packages/website/src/components/Armor/components/ShotDisplay.tsx

@@ -16,6 +16,7 @@ import {
   Path,
   Quaternion,
 } from 'three';
+import { isHalloween } from '../../../core/blitzkit/isHalloween';
 import { LocaleProvider, useLocale } from '../../../hooks/useLocale';
 import {
   TankopediaEphemeral,
@@ -72,11 +73,8 @@ export function ShotDisplay() {
   });
 
   useEffect(() => {
-    const data = new Date();
-    const isHalloween = data.getMonth() === 9 && data.getDate() === 31;
-
     if (
-      isHalloween &&
+      isHalloween() &&
       shot?.splashRadius !== undefined &&
       shot.in.status === 'penetration'
     ) {

packages/website/src/components/Armor/components/ShotDisplayCard.tsx

@@ -37,44 +37,38 @@ function LayerEntry({
   const { locale, strings } = useLocale();
 
   return (
-    <Flex align="center" gap="2">
-      <Text size="1" color="gray" style={{ width: 12 }}>
-        {layerIndex}
-      </Text>
-      <Text size="2" color={shotStatusColor} style={{ width: 48 }}>
-        {layerName}
-      </Text>
+    <tr>
+      <td>
+        <Text size="1" color="gray">
+          {layerIndex}
+        </Text>
+      </td>
 
-      {layer.type === null && (
-        <>
-          <Text size="2" color={shotStatusColor} style={{ width: 64 }}>
+      <td>
+        <Text size="2" color={shotStatusColor}>
+          {layerName}
+        </Text>
+      </td>
+
+      <td>
+        {layer.type === null && (
+          <Text size="2" color={shotStatusColor}>
             {literals(strings.common.units.mm, [
               Math.round(layer.distance * 1000).toLocaleString(locale),
             ])}
           </Text>
+        )}
 
-          <Text size="2" color="gray">
-            {literals(
-              strings.website.tools.tankopedia.sandbox.dynamic.shot_card.stats
-                .ricochet_loss,
-              [Math.max(-100, -50 * layer.distance).toFixed(0)],
-            )}
+        {layer.type === ArmorType.External && (
+          <Text size="2" color={shotStatusColor}>
+            {literals(strings.common.units.mm, [
+              Math.round(layer.thickness).toLocaleString(locale),
+            ])}
           </Text>
-        </>
-      )}
-
-      {layer.type === ArmorType.External && (
-        <Text size="2" color={shotStatusColor} style={{ width: 64 }}>
-          {literals(strings.common.units.mm, [
-            Math.round(layer.thickness).toLocaleString(locale),
-          ])}
-        </Text>
-      )}
-
-      {(layer.type === ArmorType.Primary ||
-        layer.type === ArmorType.Spaced) && (
-        <>
-          <Text size="2" color={shotStatusColor} style={{ width: 80 }}>
+        )}
+        {(layer.type === ArmorType.Primary ||
+          layer.type === ArmorType.Spaced) && (
+          <Text size="2" color={shotStatusColor}>
             {literals(
               angle === undefined
                 ? strings.common.units.mm
@@ -86,7 +80,22 @@ function LayerEntry({
               ],
             )}
           </Text>
+        )}
+      </td>
 
+      <td>
+        {layer.type === null && (
+          <Text size="2" color="gray">
+            {literals(
+              strings.website.tools.tankopedia.sandbox.dynamic.shot_card.stats
+                .ricochet_loss,
+              [Math.max(-100, -50 * layer.distance).toFixed(0)],
+            )}
+          </Text>
+        )}
+
+        {(layer.type === ArmorType.Primary ||
+          layer.type === ArmorType.Spaced) && (
           <Text size="2" color="gray">
             {literals(
               strings.website.tools.tankopedia.sandbox.dynamic.shot_card.stats
@@ -94,9 +103,9 @@ function LayerEntry({
               [Math.round(layer.thickness).toLocaleString(locale)],
             )}
           </Text>
-        </>
-      )}
-    </Flex>
+        )}
+      </td>
+    </tr>
   );
 }
 
@@ -115,7 +124,7 @@ export function ShotDisplayCard({ shot, ...props }: ShotDisplayCardProps) {
   const inTitleColor = shotStatusColors[shot.in.status];
 
   return (
-    <Card variant="classic" style={{ width: 300 }} {...props}>
+    <Card variant="classic" {...props}>
       <Flex direction="column" gap="2">
         <Flex direction="column" gap="1">
           <Text color={inTitleColor} weight="bold">
@@ -127,7 +136,12 @@ export function ShotDisplayCard({ shot, ...props }: ShotDisplayCardProps) {
             )}
           </Text>
 
-          <Flex direction="column">
+          <table
+            style={{
+              whiteSpace: 'nowrap',
+              borderSpacing: 'var(--space-1) 0',
+            }}
+          >
             {shot.in.layers.map((layer, index) => {
               const layerName =
                 strings.website.tools.tankopedia.sandbox.dynamic.shot_card
@@ -161,7 +175,7 @@ export function ShotDisplayCard({ shot, ...props }: ShotDisplayCardProps) {
                 />
               );
             })}
-          </Flex>
+          </table>
         </Flex>
 
         {shot.out && shot.out.layers.length > 0 && (

packages/website/src/components/Armor/components/SpacedArmorScene.tsx

@@ -36,8 +36,7 @@ export const SpacedArmorScene = memo<SpacedArmorSceneProps>(({ scene }) => {
   const tankModelDefinition = useTankModelDefinition();
   const trackModelDefinition = tankModelDefinition.tracks[track.id];
   const turretModelDefinition = tankModelDefinition.turrets[turret.id];
-  const gunModelDefinition =
-    turretModelDefinition.guns[gun.gun_type!.value.base.id];
+  const gunModelDefinition = turretModelDefinition.guns[gun.id];
   const hullOrigin = correctZYTuple(trackModelDefinition.origin);
   const turretOrigin = correctZYTuple(tankModelDefinition.turret_origin);
   const gunOrigin = correctZYTuple(turretModelDefinition.gun_origin);

packages/website/src/components/Armor/components/SpacedArmorSceneComponent/components/SpacedArmorSubExternal/index.tsx

@@ -29,7 +29,6 @@ export function SpacedArmorSubExternal({
   variant,
   clip,
 }: SpacedArmorSubExternalProps) {
-  const tankopediaEphemeralStore = TankopediaEphemeral.useStore();
   const duelStore = Duel.useStore();
   const material = new ShaderMaterial({
     fragmentShader,
@@ -50,15 +49,13 @@ export function SpacedArmorSubExternal({
   useEffect(() => {
     function handleShellChange() {
       const duel = duelStore.getState();
-      const tankopediaEphemeral = tankopediaEphemeralStore.getState();
+      const tankopediaEphemeral = TankopediaEphemeral.state;
       const shell = tankopediaEphemeral.customShell ?? duel.antagonist.shell;
       material.uniforms.penetration.value = shell.penetration.near;
     }
-    async function handleProtagonistEquipmentChange(
-      equipment: EquipmentMatrix,
-    ) {
+    function handleProtagonistEquipmentChange(equipment: EquipmentMatrix) {
       const duel = duelStore.getState();
-      const hasEnhancedArmor = await hasEquipment(
+      const hasEnhancedArmor = hasEquipment(
         110,
         duel.protagonist.tank.equipment_preset,
         equipment,
@@ -67,12 +64,12 @@ export function SpacedArmorSubExternal({
         ? thickness * 1.03
         : thickness;
     }
-    async function handleAntagonistEquipmentChange(equipment: EquipmentMatrix) {
+    function handleAntagonistEquipmentChange(equipment: EquipmentMatrix) {
       const duel = duelStore.getState();
-      const tankopediaEphemeral = tankopediaEphemeralStore.getState();
+      const tankopediaEphemeral = TankopediaEphemeral.state;
       const shell = tankopediaEphemeral.customShell ?? duel.antagonist.shell;
       const penetration = shell.penetration.near;
-      const hasCalibratedShells = await hasEquipment(
+      const hasCalibratedShells = hasEquipment(
         103,
         duel.antagonist.tank.equipment_preset,
         equipment,
@@ -93,10 +90,7 @@ export function SpacedArmorSubExternal({
 
     const unsubscribes = [
       duelStore.subscribe((state) => state.antagonist.shell, handleShellChange),
-      tankopediaEphemeralStore.subscribe(
-        (state) => state.customShell,
-        handleShellChange,
-      ),
+      TankopediaEphemeral.on((state) => state.customShell, handleShellChange),
       duelStore.subscribe(
         (state) => state.protagonist.equipmentMatrix,
         handleProtagonistEquipmentChange,
@@ -125,6 +119,7 @@ export function SpacedArmorSubExternal({
           return (
             <mesh
               {...props}
+              onClick={() => {}}
               key={`${key}-spaced-sub-external-exclude`}
               renderOrder={3}
               material={

packages/website/src/components/Armor/components/SpacedArmorSceneComponent/components/SpacedArmorSubSpaced/index.tsx

@@ -30,7 +30,6 @@ export function SpacedArmorSubSpaced({
   node,
   thickness,
 }: SpacedArmorSubSpacedProps) {
-  const tankopediaEphemeralStore = TankopediaEphemeral.useStore();
   const duelStore = Duel.useStore();
   const material = new ShaderMaterial({
     fragmentShader,
@@ -52,7 +51,7 @@ export function SpacedArmorSubSpaced({
   useEffect(() => {
     function handleShellChange() {
       const duel = duelStore.getState();
-      const tankopediaEphemeral = tankopediaEphemeralStore.getState();
+      const tankopediaEphemeral = TankopediaEphemeral.state;
       const shell = tankopediaEphemeral.customShell ?? duel.antagonist.shell;
 
       material.uniforms.penetration.value = shell.penetration.near;
@@ -64,11 +63,9 @@ export function SpacedArmorSubSpaced({
         shell.normalization ?? 0,
       );
     }
-    async function handleProtagonistEquipmentChange(
-      equipment: EquipmentMatrix,
-    ) {
+    function handleProtagonistEquipmentChange(equipment: EquipmentMatrix) {
       const duel = duelStore.getState();
-      const hasEnhancedArmor = await hasEquipment(
+      const hasEnhancedArmor = hasEquipment(
         110,
         duel.protagonist.tank.equipment_preset,
         equipment,
@@ -77,12 +74,12 @@ export function SpacedArmorSubSpaced({
         ? thickness * 1.03
         : thickness;
     }
-    async function handleAntagonistEquipmentChange(equipment: EquipmentMatrix) {
+    function handleAntagonistEquipmentChange(equipment: EquipmentMatrix) {
       const duel = duelStore.getState();
-      const tankopediaEphemeral = tankopediaEphemeralStore.getState();
+      const tankopediaEphemeral = TankopediaEphemeral.state;
       const shell = tankopediaEphemeral.customShell ?? duel.antagonist.shell;
       const penetration = shell.penetration.near;
-      const hasCalibratedShells = await hasEquipment(
+      const hasCalibratedShells = hasEquipment(
         103,
         duel.antagonist.tank.equipment_preset,
         equipment,
@@ -103,10 +100,7 @@ export function SpacedArmorSubSpaced({
 
     const unsubscribes = [
       duelStore.subscribe((state) => state.antagonist.shell, handleShellChange),
-      tankopediaEphemeralStore.subscribe(
-        (state) => state.customShell,
-        handleShellChange,
-      ),
+      TankopediaEphemeral.on((state) => state.customShell, handleShellChange),
       duelStore.subscribe(
         (state) => state.protagonist.equipmentMatrix,
         handleProtagonistEquipmentChange,

packages/website/src/components/Armor/components/SpacedArmorSceneComponent/index.tsx

@@ -76,19 +76,18 @@ export function SpacedArmorSceneComponent({
   clip,
   ...props
 }: SpacedArmorSceneComponentProps) {
-  const tankopediaEphemeralStore = TankopediaEphemeral.useStore();
   const duelStore = Duel.useStore();
   const camera = useThree((state) => state.camera);
 
   const shoot = useCallback(
-    async (
+    (
       point: Vector3,
       intersections: Intersection[],
       allowRicochet: boolean,
       remainingPenetrationInput?: number,
     ) => {
       const { antagonist, protagonist } = duelStore.getState();
-      const { customShell } = tankopediaEphemeralStore.getState();
+      const { customShell } = TankopediaEphemeral.state;
       const shell = customShell ?? antagonist.shell;
       const cameraNormal = camera.position.clone().sub(point).normalize();
       const shot: Shot = {
@@ -103,12 +102,12 @@ export function SpacedArmorSceneComponent({
         },
       };
 
-      const hasCalibratedShells = await hasEquipment(
+      const hasCalibratedShells = hasEquipment(
         103,
         antagonist.tank.equipment_preset,
         antagonist.equipmentMatrix,
       );
-      const hasEnhancedArmor = await hasEquipment(
+      const hasEnhancedArmor = hasEquipment(
         110,
         protagonist.tank.equipment_preset,
         protagonist.equipmentMatrix,
@@ -340,7 +339,7 @@ export function SpacedArmorSceneComponent({
               props.scene.children,
               true,
             );
-            const outShot = await shoot(
+            const outShot = shoot(
               lastLayer.point,
               ricochetIntersections,
               false,
@@ -386,14 +385,14 @@ export function SpacedArmorSceneComponent({
                     thickness,
                   } satisfies ArmorUserData
                 }
-                onClick={async (event) => {
+                onClick={(event) => {
                   event.stopPropagation();
-                  const shot = (await shoot(
-                    event.point,
-                    event.intersections,
-                    true,
-                  ))!;
-                  tankopediaEphemeralStore.setState({ shot });
+
+                  const shot = shoot(event.point, event.intersections, true)!;
+
+                  TankopediaEphemeral.mutate((draft) => {
+                    draft.shot = shot;
+                  });
                 }}
               />
             );

packages/website/src/components/Armor/components/StaticArmor.tsx

@@ -1,4 +1,3 @@
-import { normalizeAngleRad } from '@blitzkit/core';
 import { useThree, type ThreeEvent } from '@react-three/fiber';
 import { memo, useRef } from 'react';
 import { Group, Plane, Vector2, Vector3 } from 'three';
@@ -31,7 +30,6 @@ export const StaticArmor = memo<ArmorSceneProps>(({ thicknessRange }) => {
   const wrapper = useRef<Group>(null);
   const turretContainer = useRef<Group>(null);
   const gunContainer = useRef<Group>(null);
-  const protagonist = Duel.use((draft) => draft.protagonist);
   const tank = Duel.use((state) => state.protagonist.tank);
   const track = Duel.use((state) => state.protagonist.track);
   const turret = Duel.use((state) => state.protagonist.turret);
@@ -43,14 +41,11 @@ export const StaticArmor = memo<ArmorSceneProps>(({ thicknessRange }) => {
   const tankModelDefinition = useTankModelDefinition();
   const trackModelDefinition = tankModelDefinition.tracks[track.id];
   const turretModelDefinition = tankModelDefinition.turrets[turret.id];
-  const gunModelDefinition =
-    turretModelDefinition.guns[gun.gun_type!.value.base.id];
+  const gunModelDefinition = turretModelDefinition.guns[gun.id];
   const hullOrigin = correctZYTuple(trackModelDefinition.origin);
   const turretOrigin = correctZYTuple(tankModelDefinition.turret_origin);
   const gunOrigin = correctZYTuple(turretModelDefinition.gun_origin);
-  const mutateDuel = Duel.useMutation();
   const canvas = useThree((state) => state.gl.domElement);
-  const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
   const duelStore = Duel.useStore();
   const maskOrigin =
     gunModelDefinition.mask === undefined
@@ -153,34 +148,30 @@ export const StaticArmor = memo<ArmorSceneProps>(({ thicknessRange }) => {
 
           const position = new Vector2();
           const delta = new Vector2();
-          let pitch = 0;
-          let yaw = 0;
 
           function onPointerDown(event: ThreeEvent<PointerEvent>) {
             event.stopPropagation();
 
             position.set(event.clientX, event.clientY);
-            yaw = protagonist.yaw;
-            pitch = protagonist.pitch;
 
-            mutateTankopediaEphemeral((draft) => {
+            TankopediaEphemeral.mutate((draft) => {
               draft.controlsEnabled = false;
             });
-            mutateTankopediaEphemeral((draft) => {
+            TankopediaEphemeral.mutate((draft) => {
               draft.shot = undefined;
               draft.highlightArmor = undefined;
             });
             window.addEventListener('pointermove', handlePointerMove);
             window.addEventListener('pointerup', handlePointerUp);
           }
-          async function handlePointerMove(event: PointerEvent) {
+          function handlePointerMove(event: PointerEvent) {
             const duel = duelStore.getState();
-            const hasImprovedVerticalStabilizer = await hasEquipment(
+            const hasImprovedVerticalStabilizer = hasEquipment(
               122,
               duel.protagonist.tank.equipment_preset,
               duel.protagonist.equipmentMatrix,
             );
-            const hasDownImprovedVerticalStabilizer = await hasEquipment(
+            const hasDownImprovedVerticalStabilizer = hasEquipment(
               124,
               duel.protagonist.tank.equipment_preset,
               duel.protagonist.equipmentMatrix,
@@ -190,22 +181,19 @@ export const StaticArmor = memo<ArmorSceneProps>(({ thicknessRange }) => {
             delta.set(event.clientX, event.clientY).sub(position);
             position.set(event.clientX, event.clientY);
 
-            [pitch, yaw] = applyPitchYawLimits(
-              pitch,
-              yaw + delta.x * (Math.PI / boundingRect.width),
+            const [pitch, yaw] = applyPitchYawLimits(
+              modelTransformEvent.last!.pitch,
+              modelTransformEvent.last!.yaw +
+                delta.x * (Math.PI / boundingRect.width),
               gunModelDefinition.pitch,
               turretModelDefinition.yaw,
               hasImprovedVerticalStabilizer,
               hasDownImprovedVerticalStabilizer,
             );
-            modelTransformEvent.emit({ pitch, yaw });
+            modelTransformEvent.dispatch({ pitch, yaw });
           }
           function handlePointerUp() {
-            mutateDuel((draft) => {
-              draft.protagonist.pitch = normalizeAngleRad(pitch);
-              draft.protagonist.yaw = normalizeAngleRad(yaw);
-            });
-            mutateTankopediaEphemeral((draft) => {
+            TankopediaEphemeral.mutate((draft) => {
               draft.controlsEnabled = true;
             });
             window.removeEventListener('pointermove', handlePointerMove);
@@ -218,7 +206,6 @@ export const StaticArmor = memo<ArmorSceneProps>(({ thicknessRange }) => {
                 <StaticArmorSceneComponent
                   name={node.name}
                   thicknessRange={thicknessRange}
-                  key={node.uuid}
                   type={spaced ? ArmorType.Spaced : ArmorType.Primary}
                   thickness={thickness}
                   node={node}
@@ -253,35 +240,31 @@ export const StaticArmor = memo<ArmorSceneProps>(({ thicknessRange }) => {
 
             const position = new Vector2();
             const delta = new Vector2();
-            let pitch = 0;
-            let yaw = 0;
 
             function onPointerDown(event: ThreeEvent<PointerEvent>) {
               event.stopPropagation();
 
-              mutateTankopediaEphemeral((draft) => {
+              TankopediaEphemeral.mutate((draft) => {
                 draft.controlsEnabled = false;
               });
-              mutateTankopediaEphemeral((draft) => {
+              TankopediaEphemeral.mutate((draft) => {
                 draft.shot = undefined;
                 draft.highlightArmor = undefined;
               });
 
               position.set(event.clientX, event.clientY);
-              pitch = protagonist.pitch;
-              yaw = protagonist.yaw;
 
               window.addEventListener('pointermove', handlePointerMove);
               window.addEventListener('pointerup', handlePointerUp);
             }
-            async function handlePointerMove(event: PointerEvent) {
+            function handlePointerMove(event: PointerEvent) {
               const duel = duelStore.getState();
-              const hasImprovedVerticalStabilizer = await hasEquipment(
+              const hasImprovedVerticalStabilizer = hasEquipment(
                 122,
                 duel.protagonist.tank.equipment_preset,
                 duel.protagonist.equipmentMatrix,
               );
-              const hasDownImprovedVerticalStabilizer = await hasEquipment(
+              const hasDownImprovedVerticalStabilizer = hasEquipment(
                 124,
                 duel.protagonist.tank.equipment_preset,
                 duel.protagonist.equipmentMatrix,
@@ -290,24 +273,22 @@ export const StaticArmor = memo<ArmorSceneProps>(({ thicknessRange }) => {
               delta.set(event.clientX, event.clientY).sub(position);
               position.set(event.clientX, event.clientY);
 
-              [pitch, yaw] = applyPitchYawLimits(
-                pitch - delta.y * (Math.PI / boundingRect.height),
-                yaw + delta.x * (Math.PI / boundingRect.width),
+              const [pitch, yaw] = applyPitchYawLimits(
+                modelTransformEvent.last!.pitch -
+                  delta.y * (Math.PI / boundingRect.height),
+                modelTransformEvent.last!.yaw +
+                  delta.x * (Math.PI / boundingRect.width),
                 gunModelDefinition.pitch,
                 turretModelDefinition.yaw,
                 hasImprovedVerticalStabilizer,
                 hasDownImprovedVerticalStabilizer,
               );
-              modelTransformEvent.emit({ pitch, yaw });
+              modelTransformEvent.dispatch({ pitch, yaw });
             }
             function handlePointerUp() {
-              mutateTankopediaEphemeral((draft) => {
+              TankopediaEphemeral.mutate((draft) => {
                 draft.controlsEnabled = true;
               });
-              mutateDuel((draft) => {
-                draft.protagonist.pitch = normalizeAngleRad(pitch);
-                draft.protagonist.yaw = normalizeAngleRad(yaw);
-              });
               window.removeEventListener('pointermove', handlePointerMove);
               window.removeEventListener('pointerup', handlePointerUp);
             }
@@ -341,35 +322,30 @@ export const StaticArmor = memo<ArmorSceneProps>(({ thicknessRange }) => {
 
             const position = new Vector2();
             const delta = new Vector2();
-            let pitch = 0;
-            let yaw = 0;
 
             function onPointerDown(event: ThreeEvent<PointerEvent>) {
               event.stopPropagation();
 
-              mutateTankopediaEphemeral((draft) => {
+              TankopediaEphemeral.mutate((draft) => {
                 draft.controlsEnabled = false;
               });
-              mutateTankopediaEphemeral((draft) => {
+              TankopediaEphemeral.mutate((draft) => {
                 draft.shot = undefined;
                 draft.highlightArmor = undefined;
               });
 
               position.set(event.clientX, event.clientY);
-              pitch = protagonist.pitch;
-              yaw = protagonist.yaw;
-
               window.addEventListener('pointermove', handlePointerMove);
               window.addEventListener('pointerup', handlePointerUp);
             }
-            async function handlePointerMove(event: PointerEvent) {
+            function handlePointerMove(event: PointerEvent) {
               const duel = duelStore.getState();
-              const hasImprovedVerticalStabilizer = await hasEquipment(
+              const hasImprovedVerticalStabilizer = hasEquipment(
                 122,
                 duel.protagonist.tank.equipment_preset,
                 duel.protagonist.equipmentMatrix,
               );
-              const hasDownImprovedVerticalStabilizer = await hasEquipment(
+              const hasDownImprovedVerticalStabilizer = hasEquipment(
                 124,
                 duel.protagonist.tank.equipment_preset,
                 duel.protagonist.equipmentMatrix,
@@ -378,24 +354,23 @@ export const StaticArmor = memo<ArmorSceneProps>(({ thicknessRange }) => {
               delta.set(event.clientX, event.clientY).sub(position);
               position.set(event.clientX, event.clientY);
 
-              [pitch, yaw] = applyPitchYawLimits(
-                pitch - delta.y * (Math.PI / boundingRect.height),
-                yaw + delta.x * (Math.PI / boundingRect.width),
+              const [pitch, yaw] = applyPitchYawLimits(
+                modelTransformEvent.last!.pitch -
+                  delta.y * (Math.PI / boundingRect.height),
+                modelTransformEvent.last!.yaw +
+                  delta.x * (Math.PI / boundingRect.width),
                 gunModelDefinition.pitch,
                 turretModelDefinition.yaw,
                 hasImprovedVerticalStabilizer,
                 hasDownImprovedVerticalStabilizer,
               );
-              modelTransformEvent.emit({ pitch, yaw });
+              modelTransformEvent.dispatch({ pitch, yaw });
             }
             function handlePointerUp() {
-              mutateTankopediaEphemeral((draft) => {
+              TankopediaEphemeral.mutate((draft) => {
                 draft.controlsEnabled = true;
               });
-              mutateDuel((draft) => {
-                draft.protagonist.pitch = normalizeAngleRad(pitch);
-                draft.protagonist.yaw = normalizeAngleRad(yaw);
-              });
+
               window.removeEventListener('pointermove', handlePointerMove);
               window.removeEventListener('pointerup', handlePointerUp);
             }

packages/website/src/components/Armor/components/StaticArmorSceneComponent.tsx

@@ -1,6 +1,7 @@
 import { I_HAT, J_HAT } from '@blitzkit/core';
 import { type MeshProps, useThree } from '@react-three/fiber';
 import { clamp } from 'lodash-es';
+import type { QuicklimeEvent } from 'quicklime';
 import { useEffect, useMemo } from 'react';
 import {
   Box3,
@@ -9,7 +10,7 @@ import {
   FrontSide,
   LineBasicMaterial,
   Mesh,
-  MeshStandardMaterial,
+  MeshBasicMaterial,
   Object3D,
   Plane,
   Quaternion,
@@ -68,8 +69,6 @@ export function StaticArmorSceneComponent({
   onPointerDown,
   ...props
 }: StaticArmorSceneComponentProps) {
-  const mutateTankopediaEphemeralStore = TankopediaEphemeral.useMutation();
-  const tankopediaEphemeralStore = TankopediaEphemeral.useStore();
   const camera = useThree((state) => state.camera);
   const x = thickness / thicknessRange.value;
   const xClamped = clamp(x, 0, 1);
@@ -107,7 +106,7 @@ export function StaticArmorSceneComponent({
 
   const surfaceMaterial = useMemo(
     () =>
-      new MeshStandardMaterial({
+      new MeshBasicMaterial({
         color,
         opacity,
         transparent: opacity < 1,
@@ -165,7 +164,7 @@ export function StaticArmorSceneComponent({
     }
 
     const unsubscribes = [
-      tankopediaEphemeralStore.subscribe(
+      TankopediaEphemeral.on(
         (state) => state.highlightArmor?.name,
         handleHighlightArmor,
       ),
@@ -186,16 +185,18 @@ export function StaticArmorSceneComponent({
       const distanceToBarrel = clip.distanceToPoint(barrelOrigin);
       const point = new Vector3();
 
-      function handleModelTransform(data: ModelTransformEventData) {
+      function handleModelTransform(
+        event: QuicklimeEvent<ModelTransformEventData>,
+      ) {
         clip.normal
           .set(0, 0, -1)
-          .applyAxisAngle(I_HAT, data.pitch)
-          .applyAxisAngle(J_HAT, data.yaw ?? 0);
+          .applyAxisAngle(I_HAT, event.data.pitch)
+          .applyAxisAngle(J_HAT, event.data.yaw);
         clip.constant = 0;
 
         point
           .copy(gunOrigin)
-          .applyAxisAngle(J_HAT, data.yaw ?? 0)
+          .applyAxisAngle(J_HAT, event.data.yaw)
           .add(clip.normal.multiplyScalar(-distanceToBarrel))
           .add(neckOrigin);
         clip.normal.normalize();
@@ -235,7 +236,7 @@ export function StaticArmorSceneComponent({
 
                 event.stopPropagation();
 
-                const { editStatic } = tankopediaEphemeralStore.getState();
+                const { editStatic } = TankopediaEphemeral.state;
 
                 const bounds = new Box3().setFromObject(event.object);
                 const point = bounds.min
@@ -256,7 +257,7 @@ export function StaticArmorSceneComponent({
                 const thicknessAngled =
                   thickness / Math.sin(Math.PI / 2 - angle);
 
-                mutateTankopediaEphemeralStore((draft) => {
+                TankopediaEphemeral.mutate((draft) => {
                   draft.highlightArmor = {
                     type: props.type,
                     name,

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

@@ -33,43 +33,35 @@ export function Body({ stats }: BodyProps) {
             <StickyColumnHeaderCell key={key} top={137}>
               <Flex justify="center">
                 <Flex>
-                  {gun.gun_type!.value.base.shells.map(
-                    (thisShell, shellIndex) => (
-                      <IconButton
-                        color={thisShell.id === shell.id ? undefined : 'gray'}
-                        variant="soft"
-                        key={thisShell.id}
-                        style={{
-                          borderTopLeftRadius: shellIndex === 0 ? undefined : 0,
-                          borderBottomLeftRadius:
-                            shellIndex === 0 ? undefined : 0,
-                          borderTopRightRadius:
-                            shellIndex ===
-                            gun.gun_type!.value.base.shells.length - 1
-                              ? undefined
-                              : 0,
-                          borderBottomRightRadius:
-                            shellIndex ===
-                            gun.gun_type!.value.base.shells.length - 1
-                              ? undefined
-                              : 0,
-                          marginLeft: shellIndex === 0 ? 0 : -1,
-                        }}
-                        onClick={() => {
-                          mutateCompareEphemeral((draft) => {
-                            draft.members[index].shell = thisShell;
-                          });
-                        }}
-                      >
-                        <img
-                          alt={unwrap(thisShell.name)}
-                          width={16}
-                          height={16}
-                          src={asset(`icons/shells/${thisShell.icon}.webp`)}
-                        />
-                      </IconButton>
-                    ),
-                  )}
+                  {gun.shells.map((thisShell, shellIndex) => (
+                    <IconButton
+                      color={thisShell.id === shell.id ? undefined : 'gray'}
+                      variant="soft"
+                      key={thisShell.id}
+                      style={{
+                        borderTopLeftRadius: shellIndex === 0 ? undefined : 0,
+                        borderBottomLeftRadius:
+                          shellIndex === 0 ? undefined : 0,
+                        borderTopRightRadius:
+                          shellIndex === gun.shells.length - 1 ? undefined : 0,
+                        borderBottomRightRadius:
+                          shellIndex === gun.shells.length - 1 ? undefined : 0,
+                        marginLeft: shellIndex === 0 ? 0 : -1,
+                      }}
+                      onClick={() => {
+                        mutateCompareEphemeral((draft) => {
+                          draft.members[index].shell = thisShell;
+                        });
+                      }}
+                    >
+                      <img
+                        alt={unwrap(thisShell.name)}
+                        width={16}
+                        height={16}
+                        src={asset(`icons/shells/${thisShell.icon}.webp`)}
+                      />
+                    </IconButton>
+                  ))}
                 </Flex>
               </Flex>
             </StickyColumnHeaderCell>

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

@@ -250,8 +250,7 @@ export function CompareTable({ stats }: CompareTableProps) {
 
                                 member.turret = member.tank.turrets[0];
                                 member.gun = member.turret.guns[0];
-                                member.shell =
-                                  member.gun.gun_type!.value.base.shells[0];
+                                member.shell = member.gun.shells[0];
                                 member.engine = member.tank.engines[0];
                                 member.track = member.tank.tracks[0];
                               });
@@ -267,8 +266,7 @@ export function CompareTable({ stats }: CompareTableProps) {
 
                                 member.turret = member.tank.turrets.at(-1)!;
                                 member.gun = member.turret.guns.at(-1)!;
-                                member.shell =
-                                  member.gun.gun_type!.value.base.shells[0];
+                                member.shell = member.gun.shells[0];
                                 member.engine = member.tank.engines.at(-1)!;
                                 member.track = member.tank.tracks.at(-1)!;
                               });

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

@@ -1,6 +1,5 @@
 import { PlusIcon, TrashIcon } from '@radix-ui/react-icons';
 import { Button, Dialog, Flex, SegmentedControl } from '@radix-ui/themes';
-import { awaitableModelDefinitions } from '../../core/awaitables/modelDefinitions';
 import { awaitableProvisionDefinitions } from '../../core/awaitables/provisionDefinitions';
 import { tankToCompareMember } from '../../core/blitzkit/tankToCompareMember';
 import { useLocale } from '../../hooks/useLocale';
@@ -16,10 +15,7 @@ interface ControlsProps {
   onAddTankDialogOpenChange: (open: boolean) => void;
 }
 
-const [provisionDefinitions, modelDefinitions] = await Promise.all([
-  awaitableProvisionDefinitions,
-  awaitableModelDefinitions,
-]);
+const provisionDefinitions = await awaitableProvisionDefinitions;
 
 export function Controls({
   addTankDialogOpen,
@@ -60,11 +56,9 @@ export function Controls({
               <TankSearch
                 compact
                 onSelect={(tank) => {
-                  const model = modelDefinitions.models[tank.id];
-
                   mutateCompareEphemeral((draft) => {
                     draft.members.push(
-                      tankToCompareMember(tank, model, provisionDefinitions),
+                      tankToCompareMember(tank, provisionDefinitions),
                     );
                     draft.sorting = undefined;
                   });
@@ -74,13 +68,7 @@ export function Controls({
                   mutateCompareEphemeral((draft) => {
                     draft.members.push(
                       ...tanks.map((tank) => {
-                        const model = modelDefinitions.models[tank.id];
-
-                        return tankToCompareMember(
-                          tank,
-                          model,
-                          provisionDefinitions,
-                        );
+                        return tankToCompareMember(tank, provisionDefinitions);
                       }),
                     );
                     draft.sorting = undefined;

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

@@ -1,7 +1,6 @@
 import { ExternalLinkIcon, LoopIcon, TrashIcon } from '@radix-ui/react-icons';
 import { Dialog, Flex, IconButton } from '@radix-ui/themes';
 import { useState } from 'react';
-import { awaitableModelDefinitions } from '../../core/awaitables/modelDefinitions';
 import { awaitableProvisionDefinitions } from '../../core/awaitables/provisionDefinitions';
 import { tankToCompareMember } from '../../core/blitzkit/tankToCompareMember';
 import { useLocale } from '../../hooks/useLocale';
@@ -14,10 +13,7 @@ interface TankControlProps {
   slug: string;
 }
 
-const [provisionDefinitions, modelDefinitions] = await Promise.all([
-  awaitableProvisionDefinitions,
-  awaitableModelDefinitions,
-]);
+const provisionDefinitions = await awaitableProvisionDefinitions;
 
 export function TankControl({ index, slug }: TankControlProps) {
   const { locale } = useLocale();
@@ -61,12 +57,9 @@ export function TankControl({ index, slug }: TankControlProps) {
               <TankSearch
                 compact
                 onSelect={(tank) => {
-                  const model = modelDefinitions.models[tank.id];
-
                   mutateCompareEphemeral((draft) => {
                     draft.members[index] = tankToCompareMember(
                       tank,
-                      model,
                       provisionDefinitions,
                     );
                     draft.sorting = undefined;

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

@@ -1,13 +1,13 @@
-import { Box } from '@radix-ui/themes';
-import { useEffect } from 'react';
-import { awaitableModelDefinitions } from '../../core/awaitables/modelDefinitions';
-import { awaitableProvisionDefinitions } from '../../core/awaitables/provisionDefinitions';
-import { tankToDuelMember } from '../../core/blitzkit/tankToDuelMember';
-import { Var } from '../../core/radix/var';
-import { Duel } from '../../stores/duel';
-import { GuessEphemeral } from '../../stores/guessEphemeral';
-import { TankopediaEphemeral } from '../../stores/tankopediaEphemeral';
-import './index.css';
+import { Box } from "@radix-ui/themes";
+import { useEffect } from "react";
+import { awaitableModelDefinitions } from "../../core/awaitables/modelDefinitions";
+import { awaitableProvisionDefinitions } from "../../core/awaitables/provisionDefinitions";
+import { tankToDuelMember } from "../../core/blitzkit/tankToDuelMember";
+import { Var } from "../../core/radix/var";
+import { Duel } from "../../stores/duel";
+import { Guess } from "../../stores/guessEphemeral";
+import { TankopediaEphemeral } from "../../stores/tankopediaEphemeral";
+import "./index.css";
 
 const [modelDefinitions, provisionDefinitions] = await Promise.all([
   awaitableModelDefinitions,
@@ -15,17 +15,15 @@ const [modelDefinitions, provisionDefinitions] = await Promise.all([
 ]);
 
 export function GuessBackground() {
-  const guessState = GuessEphemeral.use((state) => state.guessState);
-  const tank = GuessEphemeral.use((state) => state.tank);
+  const guessState = Guess.use((state) => state.guessState);
+  const tank = Guess.use((state) => state.tank);
   const mutateDuel = Duel.useMutation();
-  const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
 
   useEffect(() => {
     mutateDuel((state) => {
-      const model = modelDefinitions.models[tank.id];
-      state.protagonist = tankToDuelMember(tank, model, provisionDefinitions);
+      state.protagonist = tankToDuelMember(tank, provisionDefinitions);
     });
-    mutateTankopediaEphemeral((state) => {
+    TankopediaEphemeral.mutate((state) => {
       state.model = modelDefinitions.models[tank.id];
     });
   }, [tank]);
@@ -39,13 +37,13 @@ export function GuessBackground() {
         top="0"
         left="0"
         style={{
-          transitionDuration: '2s',
+          transitionDuration: "2s",
           backgroundColor: Var(
             guessState === null
-              ? 'accent-2'
+              ? "accent-2"
               : guessState
-                ? 'jade-3'
-                : 'tomato-3',
+                ? "jade-3"
+                : "tomato-3"
           ),
         }}
       >
@@ -53,7 +51,7 @@ export function GuessBackground() {
           width="100%"
           height="100%"
           style={{
-            background: `radial-gradient(circle, ${Var('color-panel-translucent')}, ${Var('color-panel-solid')})`,
+            background: `radial-gradient(circle, ${Var("color-panel-translucent")}, ${Var("color-panel-solid")})`,
           }}
         />
       </Box>
@@ -67,13 +65,13 @@ export function GuessBackground() {
         left="0"
         style={{
           backgroundImage: `
-            radial-gradient(circle, ${Var('white-a1')} 20%, transparent 20%),
-            radial-gradient(circle at 0 0, ${Var('white-a1')} 10%, transparent 10%),
-            radial-gradient(circle at 100% 0, ${Var('white-a1')} 10%, transparent 10%),
-            radial-gradient(circle at 0 100%, ${Var('white-a1')} 10%, transparent 10%),
-            radial-gradient(circle at 100% 100%, ${Var('white-a1')} 10%, transparent 10%)
+            radial-gradient(circle, ${Var("white-a1")} 20%, transparent 20%),
+            radial-gradient(circle at 0 0, ${Var("white-a1")} 10%, transparent 10%),
+            radial-gradient(circle at 100% 0, ${Var("white-a1")} 10%, transparent 10%),
+            radial-gradient(circle at 0 100%, ${Var("white-a1")} 10%, transparent 10%),
+            radial-gradient(circle at 100% 100%, ${Var("white-a1")} 10%, transparent 10%)
           `,
-          backgroundSize: '4rem 4rem',
+          backgroundSize: "4rem 4rem",
         }}
       />
     </>

packages/website/src/components/GuessRenderer.tsx

@@ -1,30 +1,28 @@
-import { Canvas } from '@react-three/fiber';
-import { GuessEphemeral } from '../stores/guessEphemeral';
-import { TankopediaDisplay } from '../stores/tankopediaPersistent/constants';
-import { Controls } from './Tankopedia/HeroSection/components/TankSandbox/components/Control';
-import { Lighting } from './Tankopedia/HeroSection/components/TankSandbox/components/Lighting';
-import { TankModel } from './Tankopedia/HeroSection/components/TankSandbox/components/TankModel';
+import { Guess } from "../stores/guessEphemeral";
+import { SmartCanvas } from "./SmartCanvas";
+import { Controls } from "./Tankopedia/HeroSection/components/TankSandbox/components/Control";
+import { Lighting } from "./Tankopedia/HeroSection/components/TankSandbox/components/Lighting";
+import { TankModel } from "./Tankopedia/HeroSection/components/TankSandbox/components/TankModel";
 
-const BRIGHTNESS = 2 ** -5;
+const BRIGHTNESS = 2 ** -5.5;
 const CONTRAST = 2 ** 2;
 
 export function GuessRenderer() {
-  const guessState = GuessEphemeral.use((state) => state.guessState);
+  const guessState = Guess.use((state) => state.guessState);
   const isRevealed = guessState !== null;
 
   return (
-    <Canvas
+    <SmartCanvas
       style={{
         filter: `grayscale(${isRevealed ? 0 : 1}) contrast(${isRevealed ? 1 : CONTRAST}) brightness(${isRevealed ? 1 : BRIGHTNESS})`,
-        // filter: `drop-shadow(0 0 1rem ${Var('black-a11')})`,
-        transitionDuration: isRevealed ? '2s' : undefined,
-        transitionProperty: 'filter',
+        transitionDuration: isRevealed ? "2s" : undefined,
+        transitionProperty: "filter",
       }}
       camera={{ position: [-5, 5, -5] }}
     >
-      <Controls distanceScale={2} zoomable={false} />
-      <Lighting display={TankopediaDisplay.Model} />
+      <Controls zoomable={false} />
+      <Lighting />
       <TankModel />
-    </Canvas>
+    </SmartCanvas>
   );
 }

packages/website/src/components/Guesser.tsx

@@ -2,13 +2,13 @@ import {
   SEARCH_KEYS,
   TankDefinition,
   TIER_ROMAN_NUMERALS,
-} from '@blitzkit/core';
-import { literals } from '@blitzkit/i18n';
+} from "@blitzkit/core";
+import { literals } from "@blitzkit/i18n";
 import {
   ArrowRightIcon,
   MagnifyingGlassIcon,
   PaperPlaneIcon,
-} from '@radix-ui/react-icons';
+} from "@radix-ui/react-icons";
 import {
   Box,
   Button,
@@ -17,16 +17,16 @@ import {
   Spinner,
   Text,
   TextField,
-} from '@radix-ui/themes';
-import fuzzysort from 'fuzzysort';
-import { debounce } from 'lodash-es';
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { awaitableTankDefinitions } from '../core/awaitables/tankDefinitions';
-import { awaitableTankNames } from '../core/awaitables/tankNames';
-import { useLocale } from '../hooks/useLocale';
-import { GuessEphemeral } from '../stores/guessEphemeral';
-import { classIcons } from './ClassIcon';
-import { SearchResults } from './SearchResults';
+} from "@radix-ui/themes";
+import fuzzysort from "fuzzysort";
+import { debounce } from "lodash-es";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { awaitableTankDefinitions } from "../core/awaitables/tankDefinitions";
+import { awaitableTankNames } from "../core/awaitables/tankNames";
+import { useLocale } from "../hooks/useLocale";
+import { Guess } from "../stores/guessEphemeral";
+import { classIcons } from "./ClassIcon";
+import { SearchResults } from "./SearchResults";
 
 const { go } = fuzzysort;
 
@@ -38,16 +38,15 @@ const [tankNames, tankDefinitions] = await Promise.all([
 const ids = Object.keys(tankDefinitions.tanks);
 
 export function Guesser() {
-  const tank = GuessEphemeral.use((state) => state.tank);
-  const guessState = GuessEphemeral.use((state) => state.guessState);
-  const correctGuesses = GuessEphemeral.use((state) => state.correctGuesses);
-  const totalGuesses = GuessEphemeral.use((state) => state.totalGuesses);
+  const tank = Guess.use((state) => state.tank);
+  const guessState = Guess.use((state) => state.guessState);
+  const correctGuesses = Guess.use((state) => state.correctGuesses);
+  const totalGuesses = Guess.use((state) => state.totalGuesses);
   const { strings, unwrap } = useLocale();
   const input = useRef<HTMLInputElement>(null);
   const [searching, setSearching] = useState(false);
   const [results, setResults] = useState<TankDefinition[] | null>(null);
   const [selected, setSelected] = useState<TankDefinition | null>(null);
-  const mutateGuessEphemeral = GuessEphemeral.useMutation();
 
   const requestSearch = useCallback(() => {
     setSelected(null);
@@ -72,10 +71,10 @@ export function Guesser() {
       });
 
       setResults(
-        searchResults.map((result) => tankDefinitions.tanks[result.obj.id]),
+        searchResults.map((result) => tankDefinitions.tanks[result.obj.id])
       );
     }, 500),
-    [],
+    []
   );
 
   useEffect(() => {
@@ -88,7 +87,7 @@ export function Guesser() {
       position="absolute"
       bottom="0"
       left="50%"
-      style={{ transform: 'translateX(-50%)' }}
+      style={{ transform: "translateX(-50%)" }}
       width="100%"
       p="4"
       maxWidth="25rem"
@@ -138,7 +137,7 @@ export function Guesser() {
         </Card>
       )}
 
-      <Flex justify="center">
+      <Flex justify="center" style={{ userSelect: "none" }}>
         <Text>
           {literals(strings.website.tools.guess.stats, [
             `${correctGuesses}`,
@@ -164,12 +163,12 @@ export function Guesser() {
 
         <Button
           size="3"
-          color={guessState === null && selected === null ? 'red' : undefined}
+          color={guessState === null && selected === null ? "red" : undefined}
           onClick={() => {
             if (guessState === null) {
               const correct = selected !== null && selected.id === tank.id;
 
-              mutateGuessEphemeral((draft) => {
+              Guess.mutate((draft) => {
                 draft.guessState = correct;
                 draft.totalGuesses++;
                 draft.correctGuesses += correct ? 1 : 0;
@@ -178,12 +177,12 @@ export function Guesser() {
               const id = Number(ids[Math.floor(Math.random() * ids.length)]);
               const tank = tankDefinitions.tanks[id];
 
-              mutateGuessEphemeral((draft) => {
+              Guess.mutate((draft) => {
                 if (!input.current) return;
 
                 draft.tank = tank;
                 draft.guessState = null;
-                input.current.value = '';
+                input.current.value = "";
               });
             }
           }}
@@ -192,7 +191,7 @@ export function Guesser() {
             <>
               {
                 strings.website.tools.guess.search[
-                  selected === null ? 'skip' : 'guess'
+                  selected === null ? "skip" : "guess"
                 ]
               }
               {selected === null ? <ArrowRightIcon /> : <PaperPlaneIcon />}

packages/website/src/components/HelpingSpotLight.tsx

@@ -0,0 +1,21 @@
+import type { SpotLightProps } from '@react-three/fiber';
+import { memo } from 'react';
+
+interface Props extends SpotLightProps {
+  debug?: boolean;
+}
+
+export const HelpingSpotLight = memo<Props>(({ debug, ...props }) => {
+  return (
+    <>
+      {debug && (
+        <mesh position={props.position}>
+          <icosahedronGeometry args={[0.1, 2]} />
+          <meshBasicMaterial color={props.color} />
+        </mesh>
+      )}
+
+      <spotLight {...props} />
+    </>
+  );
+});

packages/website/src/components/Markdown.tsx

@@ -1,10 +1,15 @@
 import { Link, Table } from '@radix-ui/themes';
 import MarkdownToJSX from 'markdown-to-jsx';
+import type { ComponentProps } from 'react';
 
 interface MarkdownProps {
   children: string;
 }
 
+function Image(props: ComponentProps<'img'>) {
+  return <img style={{ maxWidth: '100%' }} {...props} />;
+}
+
 export function Markdown({ children }: MarkdownProps) {
   return (
     <MarkdownToJSX
@@ -17,6 +22,7 @@ export function Markdown({ children }: MarkdownProps) {
           tr: { component: Table.Row },
           th: { component: Table.ColumnHeaderCell },
           td: { component: Table.Cell },
+          img: { component: Image },
         },
       }}
     >

packages/website/src/components/MixerScene/components/Model.tsx

@@ -0,0 +1,125 @@
+import { awaitableModelDefinitions } from "../../../core/awaitables/modelDefinitions";
+import { jsxTree } from "../../../core/blitzkit/jsxTree";
+import { useModel } from "../../../hooks/useModel";
+import { Mixer } from "../../../stores/mixer";
+
+const modelDefinitions = await awaitableModelDefinitions;
+
+export function Model() {
+  const hull = Mixer.use((state) => state.hull);
+  const turret = Mixer.use((state) => state.turret);
+  const gun = Mixer.use((state) => state.gun);
+
+  const hullGltf = useModel(hull.id);
+  const turretGltf = useModel(turret.tank.id);
+  const gunGltf = useModel(gun.tank.id);
+
+  const hullNodes = Object.values(hullGltf.gltf.nodes);
+  const turretNodes = Object.values(turretGltf.gltf.nodes);
+  const gunNodes = Object.values(gunGltf.gltf.nodes);
+
+  const tankModel = modelDefinitions.models[hull.id];
+  const trackModel = tankModel.tracks[hull.tracks.at(-1)!.id];
+
+  const turretTankModel = modelDefinitions.models[turret.tank.id];
+  const turretTrackModel =
+    turretTankModel.tracks[turret.tank.tracks.at(-1)!.id];
+  const turretModel = turretTankModel.turrets[turret.turret.id];
+
+  const gunTankModel = modelDefinitions.models[gun.tank.id];
+  const gunTrackModel = gunTankModel.tracks[gun.tank.tracks.at(-1)!.id];
+  const gunTurretModel = gunTankModel.turrets[gun.turret.id];
+  const gunModel = gunTurretModel.guns[gun.gun.id];
+
+  return (
+    <group rotation={[-Math.PI / 2, 0, 0]}>
+      {hullNodes.map((node) => {
+        const isHull = node.name === "hull";
+        const isWheel = node.name.startsWith("chassis_wheel_");
+        const isTrack = node.name.startsWith("chassis_track_");
+        const isVisible = isHull || isWheel || isTrack;
+
+        if (!isVisible) return null;
+
+        return jsxTree(node, {
+          mesh(_, props, key) {
+            return <mesh {...props} key={key} castShadow receiveShadow />;
+          },
+        });
+      })}
+
+      <group
+        position={[
+          tankModel.turret_origin.x +
+            trackModel.origin.x -
+            turretTankModel.turret_origin.x -
+            turretTrackModel.origin.x,
+          tankModel.turret_origin.z +
+            trackModel.origin.z -
+            turretTankModel.turret_origin.z -
+            turretTrackModel.origin.z,
+          tankModel.turret_origin.y +
+            trackModel.origin.y -
+            turretTankModel.turret_origin.y -
+            turretTrackModel.origin.y,
+        ]}
+      >
+        {turretNodes.map((node) => {
+          const isCurrentTurret =
+            node.name ===
+            `turret_${turretModel.model_id.toString().padStart(2, "0")}`;
+          const isVisible = isCurrentTurret;
+
+          if (!isVisible) return null;
+
+          return jsxTree(node, {
+            mesh(_, props, key) {
+              return <mesh {...props} key={key} castShadow receiveShadow />;
+            },
+          });
+        })}
+
+        <group
+          position={[
+            turretTankModel.turret_origin.x +
+              turretTrackModel.origin.x +
+              turretModel.gun_origin.x -
+              gunTankModel.turret_origin.x -
+              gunTrackModel.origin.x -
+              gunTurretModel.gun_origin.x,
+            turretTankModel.turret_origin.z +
+              turretTrackModel.origin.z +
+              turretModel.gun_origin.z -
+              gunTankModel.turret_origin.z -
+              gunTrackModel.origin.z -
+              gunTurretModel.gun_origin.z,
+            turretTankModel.turret_origin.y +
+              turretTrackModel.origin.y +
+              turretModel.gun_origin.y -
+              gunTankModel.turret_origin.y -
+              gunTrackModel.origin.y -
+              gunTurretModel.gun_origin.y,
+          ]}
+        >
+          {gunNodes.map((node) => {
+            const isCurrentMantlet =
+              node.name ===
+              `gun_${gunModel.model_id.toString().padStart(2, "0")}_mask`;
+            const isCurrentGun =
+              node.name ===
+              `gun_${gunModel.model_id.toString().padStart(2, "0")}`;
+            const isVisible = isCurrentGun || isCurrentMantlet;
+
+            if (!isVisible) return null;
+
+            return jsxTree(node, {
+              mesh(_, props, key) {
+                return <mesh {...props} key={key} castShadow receiveShadow />;
+              },
+            });
+          })}
+        </group>
+      </group>
+    </group>
+  );
+}

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

@@ -0,0 +1,25 @@
+import { OrbitControls } from "@react-three/drei";
+import { Canvas } from "@react-three/fiber";
+import { Suspense } from "react";
+import { Lighting } from "../Tankopedia/HeroSection/components/TankSandbox/components/Lighting";
+import { Model } from "./components/Model";
+
+export function MixerScene() {
+  return (
+    <Canvas
+      shadows="soft"
+      camera={{
+        fov: 45,
+        position: [5, 5, -5],
+      }}
+    >
+      <OrbitControls />
+
+      <Lighting />
+
+      <Suspense fallback={null}>
+        <Model />
+      </Suspense>
+    </Canvas>
+  );
+}

packages/website/src/components/ModuleManager.tsx

@@ -62,7 +62,7 @@ export function ModuleManager({
                     const draft = { ...modules };
                     draft.turret = turret;
                     draft.gun = draft.turret.guns.at(-1)!;
-                    draft.shell = draft.gun.gun_type!.value.base.shells[0];
+                    draft.shell = draft.gun.shells[0];
 
                     onChange?.(draft);
                     setTurretMenuOpen(false);
@@ -83,9 +83,7 @@ export function ModuleManager({
 
       <ModuleButton
         module="gun"
-        discriminator={
-          TIER_ROMAN_NUMERALS[modules.gun.gun_type!.value.base.tier]
-        }
+        discriminator={TIER_ROMAN_NUMERALS[modules.gun.tier]}
         onClick={() => setGunMenuOpen(true)}
       />
 
@@ -95,18 +93,16 @@ export function ModuleManager({
         </DropdownMenu.Trigger>
 
         <DropdownMenu.Content>
-          <DropdownMenu.RadioGroup
-            value={`${modules.gun.gun_type!.value.base.id}`}
-          >
+          <DropdownMenu.RadioGroup value={`${modules.gun.id}`}>
             {[...modules.turret.guns].reverse().map((gun) => {
               return (
                 <DropdownMenu.RadioItem
-                  key={gun.gun_type!.value.base.id}
-                  value={`${gun.gun_type!.value.base.id}`}
+                  key={gun.id}
+                  value={`${gun.id}`}
                   onClick={() => {
                     const draft = { ...modules };
                     draft.gun = gun;
-                    draft.shell = draft.gun.gun_type!.value.base.shells[0];
+                    draft.shell = draft.gun.shells[0];
 
                     onChange?.(draft);
                     setGunMenuOpen(false);
@@ -115,11 +111,9 @@ export function ModuleManager({
                   <ModuleButton
                     variant="ghost"
                     module="gun"
-                    discriminator={
-                      TIER_ROMAN_NUMERALS[gun.gun_type!.value.base.tier]
-                    }
+                    discriminator={TIER_ROMAN_NUMERALS[gun.tier]}
                   />{' '}
-                  {unwrap(gun.gun_type!.value.base.name)}
+                  {unwrap(gun.name)}
                 </DropdownMenu.RadioItem>
               );
             })}

packages/website/src/components/Performance/PlayerCountControl.tsx

@@ -1,15 +1,9 @@
 import { Flex, Select, Text } from '@radix-ui/themes';
 import { useLocale } from '../../hooks/useLocale';
-import {
-  TankPerformanceEphemeral,
-  type PlayerCountPeriod,
-} from '../../stores/tankPerformanceEphemeral';
+import { Performance, type PlayerCountPeriod } from '../../stores/performance';
 
 export function PlayerCountControl() {
-  const playerCountPeriod = TankPerformanceEphemeral.use(
-    (state) => state.playerCountPeriod,
-  );
-  const mutateTankPerformanceSort = TankPerformanceEphemeral.useMutation();
+  const playerCountPeriod = Performance.use((state) => state.playerCountPeriod);
   const { strings } = useLocale();
 
   return (
@@ -18,7 +12,7 @@ export function PlayerCountControl() {
       <Select.Root
         value={playerCountPeriod}
         onValueChange={(period) => {
-          mutateTankPerformanceSort((draft) => {
+          Performance.mutate((draft) => {
             draft.playerCountPeriod = period as PlayerCountPeriod;
           });
         }}

packages/website/src/components/Performance/TankRow.tsx

@@ -4,7 +4,7 @@ import { memo } from 'react';
 import { awaitableAverageDefinitions } from '../../core/awaitables/averageDefinitions';
 import { useAveragesExclusionRatio } from '../../hooks/useAveragesExclusionRatio';
 import { useLocale } from '../../hooks/useLocale';
-import { TankPerformanceEphemeral } from '../../stores/tankPerformanceEphemeral';
+import { Performance } from '../../stores/performance';
 import { TankRowHeaderCell } from '../TankRowHeaderCell';
 
 interface TankRowProps {
@@ -17,7 +17,7 @@ export const TankRow = memo<TankRowProps>(
   ({ tank }) => {
     const averages = averageDefinitions.averages[tank.id];
     const ratio = useAveragesExclusionRatio();
-    const playerCountPeriod = TankPerformanceEphemeral.use(
+    const playerCountPeriod = Performance.use(
       (state) => state.playerCountPeriod,
     );
     const { locale } = useLocale();

packages/website/src/components/Performance/Tanks.tsx

@@ -1,17 +1,16 @@
-import { useStore } from '@nanostores/react';
-import { Table } from '@radix-ui/themes';
-import { times } from 'lodash-es';
-import { Fragment, Suspense, useEffect, useMemo, useState } from 'react';
-import { awaitableAverageDefinitions } from '../../core/awaitables/averageDefinitions';
-import { awaitableTankDefinitions } from '../../core/awaitables/tankDefinitions';
-import { filterTank } from '../../core/blitzkit/filterTank';
-import { $tankFilters } from '../../stores/tankFilters';
-import { TankPerformanceEphemeral } from '../../stores/tankPerformanceEphemeral';
-import { TankPerformanceSort } from '../../stores/tankPerformanceSort';
-import type { MaybeSkeletonComponentProps } from '../../types/maybeSkeletonComponentProps';
-import { RowLoader } from './RowLoader';
-import { TankRow } from './TankRow';
-import { Total } from './Total';
+import { Table } from "@radix-ui/themes";
+import { times } from "lodash-es";
+import { Fragment, Suspense, useEffect, useMemo, useState } from "react";
+import { awaitableAverageDefinitions } from "../../core/awaitables/averageDefinitions";
+import { awaitableTankDefinitions } from "../../core/awaitables/tankDefinitions";
+import { filterTank } from "../../core/blitzkit/filterTank";
+import { Performance } from "../../stores/performance";
+import { TankFilters } from "../../stores/tankFilters";
+import { TankPerformanceSort } from "../../stores/tankPerformanceSort";
+import type { MaybeSkeletonComponentProps } from "../../types/maybeSkeletonComponentProps";
+import { RowLoader } from "./RowLoader";
+import { TankRow } from "./TankRow";
+import { Total } from "./Total";
 
 const PREVIEW_COUNT = 10;
 const DEFAULT_LOADED_ROWS = 25;
@@ -25,7 +24,7 @@ const averageDefinitionsArray = Object.entries(averageDefinitions.averages).map(
   ([id, average]) => ({
     id: Number(id),
     ...average,
-  }),
+  })
 );
 
 export function Tanks({ skeleton }: MaybeSkeletonComponentProps) {
@@ -40,98 +39,97 @@ export function Tanks({ skeleton }: MaybeSkeletonComponentProps) {
   }
 
   const sort = TankPerformanceSort.use();
-  const tankPerformancePersistentStore = TankPerformanceEphemeral.useStore();
-  const filters = useStore($tankFilters);
   const tanksSorted = useMemo(() => {
-    const { playerCountPeriod } = tankPerformancePersistentStore.getState();
+    const { playerCountPeriod } = Performance.state;
 
     switch (sort.type) {
-      case 'accuracy':
+      case "accuracy":
         return averageDefinitionsArray.sort(
           (a, b) =>
-            sort.direction * (a.mu.hits / a.mu.shots - b.mu.hits / b.mu.shots),
+            sort.direction * (a.mu.hits / a.mu.shots - b.mu.hits / b.mu.shots)
         );
-      case 'capture_points':
+      case "capture_points":
         return averageDefinitionsArray.sort(
           (a, b) =>
             sort.direction *
             (a.mu.capture_points / a.mu.battles -
-              b.mu.capture_points / b.mu.battles),
+              b.mu.capture_points / b.mu.battles)
         );
-      case 'damage':
+      case "damage":
         return averageDefinitionsArray.sort(
           (a, b) =>
             sort.direction *
             (a.mu.damage_dealt / a.mu.battles -
-              b.mu.damage_dealt / b.mu.battles),
+              b.mu.damage_dealt / b.mu.battles)
         );
-      case 'damage_ratio':
+      case "damage_ratio":
         return averageDefinitionsArray.sort(
           (a, b) =>
             sort.direction *
             (a.mu.damage_dealt / a.mu.damage_received -
-              b.mu.damage_dealt / b.mu.damage_received),
+              b.mu.damage_dealt / b.mu.damage_received)
         );
-      case 'damage_taken':
+      case "damage_taken":
         return averageDefinitionsArray.sort(
           (a, b) =>
             sort.direction *
             (a.mu.damage_received / a.mu.battles -
-              b.mu.damage_received / b.mu.battles),
+              b.mu.damage_received / b.mu.battles)
         );
-      case 'hits':
+      case "hits":
         return averageDefinitionsArray.sort(
           (a, b) =>
             sort.direction *
-            (a.mu.hits / a.mu.battles - b.mu.hits / b.mu.battles),
+            (a.mu.hits / a.mu.battles - b.mu.hits / b.mu.battles)
         );
-      case 'kills':
+      case "kills":
         return averageDefinitionsArray.sort(
           (a, b) =>
             sort.direction *
-            (a.mu.frags / a.mu.battles - b.mu.frags / b.mu.battles),
+            (a.mu.frags / a.mu.battles - b.mu.frags / b.mu.battles)
         );
-      case 'shots':
+      case "shots":
         return averageDefinitionsArray.sort(
           (a, b) =>
             sort.direction *
-            (a.mu.shots / a.mu.battles - b.mu.shots / b.mu.battles),
+            (a.mu.shots / a.mu.battles - b.mu.shots / b.mu.battles)
         );
-      case 'players':
+      case "players":
         return averageDefinitionsArray.sort(
           (a, b) =>
             sort.direction *
-            (a.samples[playerCountPeriod] - b.samples[playerCountPeriod]),
+            (a.samples[playerCountPeriod] - b.samples[playerCountPeriod])
         );
-      case 'spots':
+      case "spots":
         return averageDefinitionsArray.sort(
           (a, b) =>
             sort.direction *
-            (a.mu.spotted / a.mu.battles - b.mu.spotted / b.mu.battles),
+            (a.mu.spotted / a.mu.battles - b.mu.spotted / b.mu.battles)
         );
-      case 'survival':
+      case "survival":
         return averageDefinitionsArray.sort(
           (a, b) =>
             sort.direction *
             (a.mu.survived_battles / a.mu.battles -
-              b.mu.survived_battles / b.mu.battles),
+              b.mu.survived_battles / b.mu.battles)
         );
-      case 'winrate':
+      case "winrate":
         return averageDefinitionsArray.sort(
           (a, b) =>
             sort.direction *
-            (a.mu.wins / a.mu.battles - b.mu.wins / b.mu.battles),
+            (a.mu.wins / a.mu.battles - b.mu.wins / b.mu.battles)
         );
-      case 'xp':
+      case "xp":
         return averageDefinitionsArray.sort(
           (a, b) =>
-            sort.direction * (a.mu.xp / a.mu.battles - b.mu.xp / b.mu.battles),
+            sort.direction * (a.mu.xp / a.mu.battles - b.mu.xp / b.mu.battles)
         );
     }
   }, [sort]);
+  const filters = TankFilters.use();
   const tanks = useMemo(() => {
     return tanksSorted.filter((tank) =>
-      filterTank(filters, tankDefinitions.tanks[tank.id]),
+      filterTank(filters, tankDefinitions.tanks[tank.id])
     );
   }, [filters, sort]);
   const [loadedRows, setLoadedRows] = useState(DEFAULT_LOADED_ROWS);

packages/website/src/components/Performance/Total.tsx

@@ -8,7 +8,7 @@ import { memo, useCallback } from 'react';
 import { awaitableAverageDefinitions } from '../../core/awaitables/averageDefinitions';
 import { useAveragesExclusionRatio } from '../../hooks/useAveragesExclusionRatio';
 import { useLocale } from '../../hooks/useLocale';
-import { TankPerformanceEphemeral } from '../../stores/tankPerformanceEphemeral';
+import { Performance } from '../../stores/performance';
 import { StickyRowHeaderCell } from '../StickyRowHeaderCell';
 
 interface AverageDefinitionsEntryWithId extends AverageDefinitionsEntry {
@@ -23,7 +23,7 @@ const averageDefinitions = await awaitableAverageDefinitions;
 
 export const Total = memo<TotalProps>(
   ({ tanks }) => {
-    const playerCountPeriod = TankPerformanceEphemeral.use(
+    const playerCountPeriod = Performance.use(
       (state) => state.playerCountPeriod,
     );
     const { strings, locale } = useLocale();

packages/website/src/components/Servicing.astro

@@ -0,0 +1,14 @@
+---
+import { Heading, Link, Text } from '@radix-ui/themes';
+import { PageWrapper } from './PageWrapper';
+---
+
+<PageWrapper align="center" justify="center" gap="0">
+  <Heading>BlitzKit down for servicing</Heading>
+  <Text color="gray">
+    <Link color="blue" href="https://discord.gg/nDt7AjGJQH">
+      Join the official Discord server
+    </Link>
+    for updates.
+  </Text>
+</PageWrapper>

packages/website/src/components/SmartCanvas.tsx

@@ -0,0 +1,20 @@
+import { Canvas, type CanvasProps } from '@react-three/fiber';
+import { forwardRef, useImperativeHandle, useRef } from 'react';
+import { useOnScreen } from '../hooks/useOnScreen';
+
+export const SmartCanvas = forwardRef<HTMLCanvasElement, CanvasProps>(
+  (props, ref) => {
+    const canvas = useRef<HTMLCanvasElement>(null);
+    const onScreen = useOnScreen(canvas);
+
+    useImperativeHandle(ref, () => canvas.current!, []);
+
+    return (
+      <Canvas
+        frameloop={onScreen ? 'demand' : 'never'}
+        ref={canvas}
+        {...props}
+      />
+    );
+  },
+);

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

@@ -4,11 +4,10 @@ import {
   unionBoundingBox,
   type TankDefinition,
 } from '@blitzkit/core';
-import { useStore } from '@nanostores/react';
 import { useMemo } from 'react';
 import { awaitableModelDefinitions } from '../../../core/awaitables/modelDefinitions';
 import { resolveReload } from '../../../core/blitzkit/resolveReload';
-import { $tankopediaSort } from '../../../stores/tankopediaSort';
+import { TankSort } from '../../../stores/tankopediaSort';
 import { TankCard } from '../../TankCard';
 
 interface TankSearchCardProps {
@@ -19,25 +18,24 @@ interface TankSearchCardProps {
 const modelDefinitions = await awaitableModelDefinitions;
 
 export function TankSearchCard({ tank, onSelect }: TankSearchCardProps) {
-  const tankopediaSort = useStore($tankopediaSort);
+  const by = TankSort.use((state) => state.by);
   const discriminator = useMemo(() => {
-    if (tankopediaSort.by.startsWith('meta')) return undefined;
+    if (by.startsWith('meta')) return undefined;
 
     const turret = tank.turrets.at(-1)!;
     const gun = turret.guns.at(-1)!;
-    const shell0 = gun.gun_type!.value.base.shells[0];
-    const shell1 = gun.gun_type!.value.base.shells[1];
-    const shell2 = gun.gun_type!.value.base.shells[2];
+    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.gun_type!.value.base.id];
+    const gunModelDefinition = turretModelDefinition.guns[gun.id];
 
-    switch (tankopediaSort.by) {
+    switch (by) {
       case 'fire.aimTime':
-        return gun.gun_type!.value.base.aim_time.toFixed(2);
+        return gun.aim_time.toFixed(2);
       case 'fire.caliber':
         return shell0.caliber.toFixed(0);
       case 'fire.damage':
@@ -47,7 +45,7 @@ export function TankSearchCard({ tank, onSelect }: TankSearchCardProps) {
       case 'fire.dispersionMoving':
         return tracks.dispersion_move.toFixed(3);
       case 'fire.dispersionStill':
-        return gun.gun_type!.value.base.dispersion_base.toFixed(3);
+        return gun.dispersion_base.toFixed(3);
       case 'fire.dpm':
         return resolveDpm(gun, shell0).toFixed(0);
       case 'fire.dpmPremium':
@@ -63,7 +61,7 @@ export function TankSearchCard({ tank, onSelect }: TankSearchCardProps) {
       case 'fire.shellVelocity':
         return shell0.velocity.toFixed(0);
       case 'fire.shellCapacity':
-        return gun.gun_type!.value.base.shell_capacity.toFixed(0);
+        return gun.shell_capacity.toFixed(0);
       case 'fire.shellRange':
         return shell0.range.toFixed(0);
       case 'fire.gunDepression':
@@ -89,7 +87,7 @@ export function TankSearchCard({ tank, onSelect }: TankSearchCardProps) {
             engine.weight +
             tracks.weight +
             turret.weight +
-            gun.gun_type!.value.base.weight)
+            gun.weight)
         ).toFixed(1);
       case 'maneuverability.weight':
         return (
@@ -97,7 +95,7 @@ export function TankSearchCard({ tank, onSelect }: TankSearchCardProps) {
             engine.weight +
             tracks.weight +
             turret.weight +
-            gun.gun_type!.value.base.weight) /
+            gun.weight) /
           1000
         ).toFixed(1);
       case 'maneuverability.traverseSpeed':
@@ -111,11 +109,7 @@ export function TankSearchCard({ tank, onSelect }: TankSearchCardProps) {
       case 'survivability.camouflageMoving':
         return (tank.camouflage_moving * 100).toFixed(0);
       case 'survivability.camouflageShooting':
-        return (
-          tank.camouflage_still *
-          gun.gun_type!.value.base.camouflage_loss *
-          100
-        ).toFixed(0);
+        return (tank.camouflage_still * gun.camouflage_loss * 100).toFixed(0);
       case 'survivability.volume': {
         const dimensions = normalizeBoundingBox(
           unionBoundingBox(
@@ -138,7 +132,7 @@ export function TankSearchCard({ tank, onSelect }: TankSearchCardProps) {
         return Math.max(bounds.x, bounds.y, bounds.z).toFixed(0);
       }
     }
-  }, [tankopediaSort.by]);
+  }, [by]);
 
   return (
     <TankCard

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

@@ -4,8 +4,7 @@ import {
   TANK_CLASSES,
   TankType,
   TIER_ROMAN_NUMERALS,
-} from '@blitzkit/core';
-import { useStore } from '@nanostores/react';
+} from "@blitzkit/core";
 import {
   Box,
   Flex,
@@ -14,29 +13,22 @@ import {
   Link,
   Popover,
   Text,
-} from '@radix-ui/themes';
-import { isEqual, times } from 'lodash-es';
-import { awaitableGameDefinitions } from '../../../core/awaitables/gameDefinitions';
-import { Var } from '../../../core/radix/var';
-import { useLocale } from '../../../hooks/useLocale';
-import {
-  $tankFilters,
-  initialTankFilters,
-  type TankFilters,
-} from '../../../stores/tankFilters';
-import {
-  $tankopediaSort,
-  initialTankopediaSort,
-} from '../../../stores/tankopediaSort';
-import { classIcons } from '../../ClassIcon';
-import { ExperimentIcon } from '../../ExperimentIcon';
-import { GunAutoloaderIcon } from '../../GunAutoloaderIcon';
-import { GunAutoreloaderIcon } from '../../GunAutoreloaderIcon';
-import { GunRegularIcon } from '../../GunRegularIcon';
-import { MissingShellIcon } from '../../MissingShellIcon';
-import { ResearchedIcon } from '../../ResearchedIcon';
-import { ScienceIcon } from '../../ScienceIcon';
-import { ScienceOffIcon } from '../../ScienceOffIcon';
+} from "@radix-ui/themes";
+import { isEqual, times } from "lodash-es";
+import { awaitableGameDefinitions } from "../../../core/awaitables/gameDefinitions";
+import { Var } from "../../../core/radix/var";
+import { useLocale } from "../../../hooks/useLocale";
+import { TankFilters } from "../../../stores/tankFilters";
+import { TankSort } from "../../../stores/tankopediaSort";
+import { classIcons } from "../../ClassIcon";
+import { ExperimentIcon } from "../../ExperimentIcon";
+import { GunAutoloaderIcon } from "../../GunAutoloaderIcon";
+import { GunAutoreloaderIcon } from "../../GunAutoreloaderIcon";
+import { GunRegularIcon } from "../../GunRegularIcon";
+import { MissingShellIcon } from "../../MissingShellIcon";
+import { ResearchedIcon } from "../../ResearchedIcon";
+import { ScienceIcon } from "../../ScienceIcon";
+import { ScienceOffIcon } from "../../ScienceOffIcon";
 
 interface FilterControlProps {
   compact?: boolean;
@@ -45,29 +37,29 @@ interface FilterControlProps {
 const gameDefinitions = await awaitableGameDefinitions;
 
 const shellTypeIcons: Record<ShellType, string> = {
-  [ShellType.AP]: 'ap',
-  [ShellType.APCR]: 'ap_cr',
-  [ShellType.HE]: 'he',
-  [ShellType.HEAT]: 'hc',
+  [ShellType.AP]: "ap",
+  [ShellType.APCR]: "ap_cr",
+  [ShellType.HE]: "he",
+  [ShellType.HEAT]: "hc",
 };
 
 function ShellFilter({ index, premium }: { index: number; premium?: boolean }) {
-  const tankFilters = useStore($tankFilters);
+  const shells = TankFilters.use((state) => state.shells);
 
   return (
     <Popover.Root>
       <Popover.Trigger>
         <IconButton variant="soft" radius="none" color="gray" highContrast>
-          {tankFilters.shells[index] === null && (
-            <Text color="gray" style={{ display: 'contents' }}>
+          {shells[index] === null && (
+            <Text color="gray" style={{ display: "contents" }}>
               <MissingShellIcon width="1em" height="1em" />
             </Text>
           )}
-          {tankFilters.shells[index] !== null && (
+          {shells[index] !== null && (
             <img
-              style={{ width: '1em', height: '1em' }}
+              style={{ width: "1em", height: "1em" }}
               src={asset(
-                `icons/shells/${shellTypeIcons[tankFilters.shells[index]]}${premium ? '_premium' : ''}.webp`,
+                `icons/shells/${shellTypeIcons[shells[index]]}${premium ? "_premium" : ""}.webp`
               )}
             />
           )}
@@ -78,35 +70,33 @@ function ShellFilter({ index, premium }: { index: number; premium?: boolean }) {
         <Inset>
           <Flex>
             {Object.values(ShellType).map((shellType) => {
-              if (typeof shellType === 'string') return null;
+              if (typeof shellType === "string") return null;
 
-              const selected = tankFilters.shells[index] === shellType;
+              const selected = shells[index] === shellType;
 
               return (
                 <IconButton
                   key={shellType}
                   value={`${shellType}`}
                   radius="none"
-                  variant={selected ? 'solid' : 'soft'}
+                  variant={selected ? "solid" : "soft"}
                   onClick={() => {
-                    const mutated = [
-                      tankFilters.shells[0],
-                      tankFilters.shells[1],
-                      tankFilters.shells[2],
-                    ] as TankFilters['shells'];
+                    const mutated = [...shells] as TankFilters["shells"];
 
                     mutated[index] = selected ? null : shellType;
 
-                    $tankFilters.setKey('shells', mutated);
+                    TankFilters.mutate((draft) => {
+                      draft.shells = mutated;
+                    });
                   }}
                   highContrast={selected}
-                  color={selected ? undefined : 'gray'}
+                  color={selected ? undefined : "gray"}
                 >
                   <img
                     src={asset(
-                      `icons/shells/${shellTypeIcons[shellType]}${premium ? '_premium' : ''}.webp`,
+                      `icons/shells/${shellTypeIcons[shellType]}${premium ? "_premium" : ""}.webp`
                     )}
-                    style={{ width: '1em', height: '1em' }}
+                    style={{ width: "1em", height: "1em" }}
                   />
                 </IconButton>
               );
@@ -119,26 +109,26 @@ function ShellFilter({ index, premium }: { index: number; premium?: boolean }) {
 }
 
 export function FilterControl({ compact }: FilterControlProps) {
-  const tankFilters = useStore($tankFilters);
+  const tankFilters = TankFilters.use();
   const { strings } = useLocale();
-  const clearable = !isEqual(tankFilters, initialTankFilters);
+  const clearable = !isEqual(tankFilters, TankFilters.initial);
 
   return (
     <Flex direction="column" align="center">
       <Flex
         height="fit-content"
         gap="2"
-        align={{ initial: 'start', md: 'center' }}
+        align={{ initial: "start", md: "center" }}
         justify="center"
       >
         <Flex
           flexShrink="0"
-          direction={compact ? 'row' : { initial: 'row', md: 'column' }}
+          direction={compact ? "row" : { initial: "row", md: "column" }}
           overflow="hidden"
-          style={{ borderRadius: 'var(--radius-5)' }}
+          style={{ borderRadius: "var(--radius-5)" }}
         >
           <Flex
-            direction={compact ? 'column' : { md: 'row', initial: 'column' }}
+            direction={compact ? "column" : { md: "row", initial: "column" }}
           >
             {times(5, (index) => {
               const tier = index + 1;
@@ -147,21 +137,19 @@ export function FilterControl({ compact }: FilterControlProps) {
               return (
                 <IconButton
                   key={tier}
-                  variant={selected ? 'solid' : 'soft'}
+                  variant={selected ? "solid" : "soft"}
                   radius="none"
-                  color={selected ? undefined : 'gray'}
+                  color={selected ? undefined : "gray"}
                   highContrast
                   onClick={() => {
                     if (tankFilters.tiers.includes(tier)) {
-                      $tankFilters.setKey(
-                        'tiers',
-                        tankFilters.tiers.filter((t) => t !== tier),
-                      );
+                      TankFilters.mutate((draft) => {
+                        draft.tiers = draft.tiers.filter((t) => t !== tier);
+                      });
                     } else {
-                      $tankFilters.setKey('tiers', [
-                        ...tankFilters.tiers,
-                        tier,
-                      ]);
+                      TankFilters.mutate((draft) => {
+                        draft.tiers = [...draft.tiers, tier];
+                      });
                     }
                   }}
                 >
@@ -172,15 +160,15 @@ export function FilterControl({ compact }: FilterControlProps) {
           </Flex>
 
           <Box
-            display={{ initial: 'none', md: 'block' }}
+            display={{ initial: "none", md: "block" }}
             style={{
-              height: Var('space-1'),
-              backgroundColor: Var('gray-a3'),
+              height: Var("space-1"),
+              backgroundColor: Var("gray-a3"),
             }}
           />
 
           <Flex
-            direction={compact ? 'column' : { md: 'row', initial: 'column' }}
+            direction={compact ? "column" : { md: "row", initial: "column" }}
           >
             {times(5, (index) => {
               const tier = index + 6;
@@ -189,21 +177,19 @@ export function FilterControl({ compact }: FilterControlProps) {
               return (
                 <IconButton
                   key={tier}
-                  variant={selected ? 'solid' : 'soft'}
+                  variant={selected ? "solid" : "soft"}
                   radius="none"
-                  color={selected ? undefined : 'gray'}
+                  color={selected ? undefined : "gray"}
                   highContrast
                   onClick={() => {
                     if (tankFilters.tiers.includes(tier)) {
-                      $tankFilters.setKey(
-                        'tiers',
-                        tankFilters.tiers.filter((t) => t !== tier),
-                      );
+                      TankFilters.mutate((draft) => {
+                        draft.tiers = draft.tiers.filter((t) => t !== tier);
+                      });
                     } else {
-                      $tankFilters.setKey('tiers', [
-                        ...tankFilters.tiers,
-                        tier,
-                      ]);
+                      TankFilters.mutate((draft) => {
+                        draft.tiers = [...draft.tiers, tier];
+                      });
                     }
                   }}
                 >
@@ -216,12 +202,12 @@ export function FilterControl({ compact }: FilterControlProps) {
 
         <Flex
           flexShrink="0"
-          direction={compact ? 'row' : { initial: 'row', md: 'column' }}
+          direction={compact ? "row" : { initial: "row", md: "column" }}
           overflow="hidden"
-          style={{ borderRadius: 'var(--radius-5)' }}
+          style={{ borderRadius: "var(--radius-5)" }}
         >
           <Flex
-            direction={compact ? 'column' : { md: 'row', initial: 'column' }}
+            direction={compact ? "column" : { md: "row", initial: "column" }}
           >
             {gameDefinitions.nations
               .slice(0, Math.ceil(gameDefinitions.nations.length / 2))
@@ -231,26 +217,24 @@ export function FilterControl({ compact }: FilterControlProps) {
                 return (
                   <IconButton
                     key={nation}
-                    variant={selected ? 'solid' : 'soft'}
-                    color={selected ? undefined : 'gray'}
+                    variant={selected ? "solid" : "soft"}
+                    color={selected ? undefined : "gray"}
                     highContrast
                     radius="none"
                     onClick={() => {
-                      if (tankFilters.nations.includes(nation)) {
-                        $tankFilters.setKey(
-                          'nations',
-                          tankFilters.nations.filter((n) => n !== nation),
-                        );
-                      } else {
-                        $tankFilters.setKey('nations', [
-                          ...tankFilters.nations,
-                          nation,
-                        ]);
-                      }
+                      TankFilters.mutate((draft) => {
+                        if (tankFilters.nations.includes(nation)) {
+                          draft.nations = draft.nations.filter(
+                            (n) => n !== nation
+                          );
+                        } else {
+                          draft.nations = [...draft.nations, nation];
+                        }
+                      });
                     }}
                   >
                     <img
-                      style={{ width: '1em', height: '1em' }}
+                      style={{ width: "1em", height: "1em" }}
                       src={asset(`flags/circle/${nation}.webp`)}
                     />
                   </IconButton>
@@ -259,15 +243,15 @@ export function FilterControl({ compact }: FilterControlProps) {
           </Flex>
 
           <Box
-            display={{ initial: 'none', md: 'block' }}
+            display={{ initial: "none", md: "block" }}
             style={{
-              height: Var('space-1'),
-              backgroundColor: Var('gray-a3'),
+              height: Var("space-1"),
+              backgroundColor: Var("gray-a3"),
             }}
           />
 
           <Flex
-            direction={compact ? 'column' : { md: 'row', initial: 'column' }}
+            direction={compact ? "column" : { md: "row", initial: "column" }}
           >
             {gameDefinitions.nations
               .slice(Math.ceil(gameDefinitions.nations.length / 2))
@@ -278,26 +262,24 @@ export function FilterControl({ compact }: FilterControlProps) {
                   <IconButton
                     key={nation}
                     style={{ flex: 1 }}
-                    variant={selected ? 'solid' : 'soft'}
-                    color={selected ? undefined : 'gray'}
+                    variant={selected ? "solid" : "soft"}
+                    color={selected ? undefined : "gray"}
                     highContrast
                     radius="none"
                     onClick={() => {
-                      if (tankFilters.nations.includes(nation)) {
-                        $tankFilters.setKey(
-                          'nations',
-                          tankFilters.nations.filter((n) => n !== nation),
-                        );
-                      } else {
-                        $tankFilters.setKey('nations', [
-                          ...tankFilters.nations,
-                          nation,
-                        ]);
-                      }
+                      TankFilters.mutate((draft) => {
+                        if (tankFilters.nations.includes(nation)) {
+                          draft.nations = draft.nations.filter(
+                            (n) => n !== nation
+                          );
+                        } else {
+                          draft.nations = [...draft.nations, nation];
+                        }
+                      });
                     }}
                   >
                     <img
-                      style={{ width: '1em', height: '1em' }}
+                      style={{ width: "1em", height: "1em" }}
                       src={asset(`flags/circle/${nation}.webp`)}
                     />
                   </IconButton>
@@ -307,15 +289,15 @@ export function FilterControl({ compact }: FilterControlProps) {
         </Flex>
 
         <Flex
-          direction={{ initial: 'row', md: 'column' }}
+          direction={compact ? "row" : { initial: "row", md: "column" }}
           align="start"
-          gap={{ initial: '2', md: '1' }}
+          gap={{ initial: "2", md: "1" }}
         >
           <Flex gap="2" align="start">
             <Flex
               overflow="hidden"
-              style={{ borderRadius: 'var(--radius-full)' }}
-              direction={compact ? 'column' : { md: 'row', initial: 'column' }}
+              style={{ borderRadius: "var(--radius-full)" }}
+              direction={compact ? "column" : { md: "row", initial: "column" }}
             >
               {TANK_CLASSES.map((tankClass) => {
                 const Icon = classIcons[tankClass];
@@ -324,25 +306,23 @@ export function FilterControl({ compact }: FilterControlProps) {
                 return (
                   <IconButton
                     key={tankClass}
-                    variant={selected ? 'solid' : 'soft'}
+                    variant={selected ? "solid" : "soft"}
                     radius="none"
-                    color={selected ? undefined : 'gray'}
+                    color={selected ? undefined : "gray"}
                     highContrast
                     onClick={() => {
-                      if (tankFilters.classes.includes(tankClass)) {
-                        $tankFilters.setKey(
-                          'classes',
-                          tankFilters.classes.filter((c) => c !== tankClass),
-                        );
-                      } else {
-                        $tankFilters.setKey('classes', [
-                          ...tankFilters.classes,
-                          tankClass,
-                        ]);
-                      }
+                      TankFilters.mutate((draft) => {
+                        if (tankFilters.classes.includes(tankClass)) {
+                          draft.classes = draft.classes.filter(
+                            (c) => c !== tankClass
+                          );
+                        } else {
+                          draft.classes = [...draft.classes, tankClass];
+                        }
+                      });
                     }}
                   >
-                    <Icon style={{ width: '1em', height: '1em' }} />
+                    <Icon style={{ width: "1em", height: "1em" }} />
                   </IconButton>
                 );
               })}
@@ -350,96 +330,90 @@ export function FilterControl({ compact }: FilterControlProps) {
 
             <Flex
               overflow="hidden"
-              style={{ borderRadius: 'var(--radius-full)' }}
-              direction={compact ? 'column' : { md: 'row', initial: 'column' }}
+              style={{ borderRadius: "var(--radius-full)" }}
+              direction={compact ? "column" : { md: "row", initial: "column" }}
             >
               <IconButton
                 variant={
-                  tankFilters.gunType.includes('regular') ? 'solid' : 'soft'
+                  tankFilters.gunType.includes("regular") ? "solid" : "soft"
                 }
                 radius="none"
                 color={
-                  tankFilters.gunType.includes('regular') ? undefined : 'gray'
+                  tankFilters.gunType.includes("regular") ? undefined : "gray"
                 }
                 highContrast
                 onClick={() => {
-                  if (tankFilters.gunType.includes('regular')) {
-                    $tankFilters.setKey(
-                      'gunType',
-                      tankFilters.gunType.filter((t) => t !== 'regular'),
-                    );
-                  } else {
-                    $tankFilters.setKey('gunType', [
-                      ...tankFilters.gunType,
-                      'regular',
-                    ]);
-                  }
+                  TankFilters.mutate((draft) => {
+                    if (tankFilters.gunType.includes("regular")) {
+                      draft.gunType = draft.gunType.filter(
+                        (t) => t !== "regular"
+                      );
+                    } else {
+                      draft.gunType = [...draft.gunType, "regular"];
+                    }
+                  });
                 }}
               >
-                <GunRegularIcon style={{ width: '1em', height: '1em' }} />
+                <GunRegularIcon style={{ width: "1em", height: "1em" }} />
               </IconButton>
               <IconButton
                 variant={
-                  tankFilters.gunType.includes('auto_loader') ? 'solid' : 'soft'
+                  tankFilters.gunType.includes("auto_loader") ? "solid" : "soft"
                 }
                 radius="none"
                 color={
-                  tankFilters.gunType.includes('auto_loader')
+                  tankFilters.gunType.includes("auto_loader")
                     ? undefined
-                    : 'gray'
+                    : "gray"
                 }
                 highContrast
                 onClick={() => {
-                  if (tankFilters.gunType.includes('auto_loader')) {
-                    $tankFilters.setKey(
-                      'gunType',
-                      tankFilters.gunType.filter((t) => t !== 'auto_loader'),
-                    );
-                  } else {
-                    $tankFilters.setKey('gunType', [
-                      ...tankFilters.gunType,
-                      'auto_loader',
-                    ]);
-                  }
+                  TankFilters.mutate((draft) => {
+                    if (tankFilters.gunType.includes("auto_loader")) {
+                      draft.gunType = draft.gunType.filter(
+                        (t) => t !== "auto_loader"
+                      );
+                    } else {
+                      draft.gunType = [...draft.gunType, "auto_loader"];
+                    }
+                  });
                 }}
               >
-                <GunAutoloaderIcon style={{ width: '1em', height: '1em' }} />
+                <GunAutoloaderIcon style={{ width: "1em", height: "1em" }} />
               </IconButton>
               <IconButton
                 variant={
-                  tankFilters.gunType.includes('auto_reloader')
-                    ? 'solid'
-                    : 'soft'
+                  tankFilters.gunType.includes("auto_reloader")
+                    ? "solid"
+                    : "soft"
                 }
                 radius="none"
                 color={
-                  tankFilters.gunType.includes('auto_reloader')
+                  tankFilters.gunType.includes("auto_reloader")
                     ? undefined
-                    : 'gray'
+                    : "gray"
                 }
                 highContrast
                 onClick={() => {
-                  if (tankFilters.gunType.includes('auto_reloader')) {
-                    $tankFilters.setKey(
-                      'gunType',
-                      tankFilters.gunType.filter((t) => t !== 'auto_reloader'),
-                    );
-                  } else {
-                    $tankFilters.setKey('gunType', [
-                      ...tankFilters.gunType,
-                      'auto_reloader',
-                    ]);
-                  }
+                  TankFilters.mutate((draft) => {
+                    if (tankFilters.gunType.includes("auto_reloader")) {
+                      draft.gunType = draft.gunType.filter(
+                        (t) => t !== "auto_reloader"
+                      );
+                    } else {
+                      draft.gunType = [...draft.gunType, "auto_reloader"];
+                    }
+                  });
                 }}
               >
-                <GunAutoreloaderIcon style={{ width: '1em', height: '1em' }} />
+                <GunAutoreloaderIcon style={{ width: "1em", height: "1em" }} />
               </IconButton>
             </Flex>
 
             <Flex
               overflow="hidden"
-              style={{ borderRadius: 'var(--radius-full)' }}
-              direction={compact ? 'column' : { md: 'row', initial: 'column' }}
+              style={{ borderRadius: "var(--radius-full)" }}
+              direction={compact ? "column" : { md: "row", initial: "column" }}
             >
               <ShellFilter index={0} />
               <ShellFilter index={1} premium />
@@ -450,160 +424,158 @@ export function FilterControl({ compact }: FilterControlProps) {
           <Flex gap="2" align="start">
             <Flex
               overflow="hidden"
-              style={{ borderRadius: 'var(--radius-full)' }}
-              direction={compact ? 'column' : { md: 'row', initial: 'column' }}
+              style={{ borderRadius: "var(--radius-full)" }}
+              direction={compact ? "column" : { md: "row", initial: "column" }}
             >
               <IconButton
                 variant={
                   tankFilters.types?.includes(TankType.RESEARCHABLE)
-                    ? 'solid'
-                    : 'soft'
+                    ? "solid"
+                    : "soft"
                 }
                 radius="none"
                 color={
                   tankFilters.types?.includes(TankType.RESEARCHABLE)
                     ? undefined
-                    : 'gray'
+                    : "gray"
                 }
                 highContrast
                 onClick={() => {
-                  if (tankFilters.types.includes(TankType.RESEARCHABLE)) {
-                    $tankFilters.setKey(
-                      'types',
-                      tankFilters.types.filter(
-                        (t) => t !== TankType.RESEARCHABLE,
-                      ),
-                    );
-                  } else {
-                    $tankFilters.setKey('types', [
-                      ...tankFilters.types,
-                      TankType.RESEARCHABLE,
-                    ]);
-                  }
+                  TankFilters.mutate((draft) => {
+                    if (tankFilters.types.includes(TankType.RESEARCHABLE)) {
+                      draft.types = draft.types.filter(
+                        (t) => t !== TankType.RESEARCHABLE
+                      );
+                    } else {
+                      draft.types = [...draft.types, TankType.RESEARCHABLE];
+                    }
+                  });
                 }}
               >
-                <ResearchedIcon style={{ width: '1em', height: '1em' }} />
+                <ResearchedIcon style={{ width: "1em", height: "1em" }} />
               </IconButton>
               <IconButton
                 variant={
                   tankFilters.types?.includes(TankType.PREMIUM)
-                    ? 'solid'
-                    : 'soft'
+                    ? "solid"
+                    : "soft"
                 }
                 radius="none"
                 color={
                   tankFilters.types?.includes(TankType.PREMIUM)
-                    ? 'amber'
-                    : 'gray'
+                    ? "amber"
+                    : "gray"
                 }
                 highContrast
                 onClick={() => {
-                  if (tankFilters.types.includes(TankType.PREMIUM)) {
-                    $tankFilters.setKey(
-                      'types',
-                      tankFilters.types.filter((t) => t !== TankType.PREMIUM),
-                    );
-                  } else {
-                    $tankFilters.setKey('types', [
-                      ...tankFilters.types,
-                      TankType.PREMIUM,
-                    ]);
-                  }
+                  TankFilters.mutate((draft) => {
+                    if (tankFilters.types.includes(TankType.PREMIUM)) {
+                      draft.types = draft.types.filter(
+                        (t) => t !== TankType.PREMIUM
+                      );
+                    } else {
+                      draft.types = [...draft.types, TankType.PREMIUM];
+                    }
+                  });
                 }}
               >
                 <Text
                   color={
                     tankFilters.types?.includes(TankType.PREMIUM)
                       ? undefined
-                      : 'amber'
+                      : "amber"
                   }
-                  style={{ display: 'flex', justifyContent: 'center' }}
+                  style={{ display: "flex", justifyContent: "center" }}
                 >
-                  <ResearchedIcon style={{ width: '1em', height: '1em' }} />
+                  <ResearchedIcon style={{ width: "1em", height: "1em" }} />
                 </Text>
               </IconButton>
               <IconButton
                 variant={
                   tankFilters.types?.includes(TankType.COLLECTOR)
-                    ? 'solid'
-                    : 'soft'
+                    ? "solid"
+                    : "soft"
                 }
                 radius="none"
                 color={
                   tankFilters.types?.includes(TankType.COLLECTOR)
-                    ? 'blue'
-                    : 'gray'
+                    ? "blue"
+                    : "gray"
                 }
                 highContrast
                 onClick={() => {
-                  if (tankFilters.types.includes(TankType.COLLECTOR)) {
-                    $tankFilters.setKey(
-                      'types',
-                      tankFilters.types.filter((t) => t !== TankType.COLLECTOR),
-                    );
-                  } else {
-                    $tankFilters.setKey('types', [
-                      ...tankFilters.types,
-                      TankType.COLLECTOR,
-                    ]);
-                  }
+                  TankFilters.mutate((draft) => {
+                    if (tankFilters.types.includes(TankType.COLLECTOR)) {
+                      draft.types = draft.types.filter(
+                        (t) => t !== TankType.COLLECTOR
+                      );
+                    } else {
+                      draft.types = [...draft.types, TankType.COLLECTOR];
+                    }
+                  });
                 }}
               >
                 <Text
                   color={
                     tankFilters.types?.includes(TankType.COLLECTOR)
                       ? undefined
-                      : 'blue'
+                      : "blue"
                   }
-                  style={{ display: 'flex', justifyContent: 'center' }}
+                  style={{ display: "flex", justifyContent: "center" }}
                 >
-                  <ResearchedIcon style={{ width: '1em', height: '1em' }} />
+                  <ResearchedIcon style={{ width: "1em", height: "1em" }} />
                 </Text>
               </IconButton>
             </Flex>
 
             <Flex
               overflow="hidden"
-              style={{ borderRadius: 'var(--radius-full)' }}
-              direction={compact ? 'column' : { md: 'row', initial: 'column' }}
+              style={{ borderRadius: "var(--radius-full)" }}
+              direction={compact ? "column" : { md: "row", initial: "column" }}
             >
               <IconButton
-                variant={tankFilters.testing === 'include' ? 'solid' : 'soft'}
+                variant={tankFilters.testing === "include" ? "solid" : "soft"}
                 radius="none"
-                color={tankFilters.testing === 'include' ? undefined : 'gray'}
+                color={tankFilters.testing === "include" ? undefined : "gray"}
                 highContrast
                 onClick={() => {
-                  $tankFilters.setKey('testing', 'include');
+                  TankFilters.mutate((draft) => {
+                    draft.testing = "include";
+                  });
                 }}
               >
                 <ExperimentIcon
-                  style={{ width: '1em', height: '1em', color: 'currentColor' }}
+                  style={{ width: "1em", height: "1em", color: "currentColor" }}
                 />
               </IconButton>
               <IconButton
-                variant={tankFilters.testing === 'exclude' ? 'solid' : 'soft'}
+                variant={tankFilters.testing === "exclude" ? "solid" : "soft"}
                 radius="none"
-                color={tankFilters.testing === 'exclude' ? undefined : 'gray'}
+                color={tankFilters.testing === "exclude" ? undefined : "gray"}
                 highContrast
                 onClick={() => {
-                  $tankFilters.setKey('testing', 'exclude');
+                  TankFilters.mutate((draft) => {
+                    draft.testing = "exclude";
+                  });
                 }}
               >
                 <ScienceOffIcon
-                  style={{ width: '1em', height: '1em', color: 'currentColor' }}
+                  style={{ width: "1em", height: "1em", color: "currentColor" }}
                 />
               </IconButton>
               <IconButton
-                variant={tankFilters.testing === 'only' ? 'solid' : 'soft'}
+                variant={tankFilters.testing === "only" ? "solid" : "soft"}
                 radius="none"
-                color={tankFilters.testing === 'only' ? undefined : 'gray'}
+                color={tankFilters.testing === "only" ? undefined : "gray"}
                 highContrast
                 onClick={() => {
-                  $tankFilters.setKey('testing', 'only');
+                  TankFilters.mutate((draft) => {
+                    draft.testing = "only";
+                  });
                 }}
               >
                 <ScienceIcon
-                  style={{ width: '1em', height: '1em', color: 'currentColor' }}
+                  style={{ width: "1em", height: "1em", color: "currentColor" }}
                 />
               </IconButton>
             </Flex>
@@ -619,8 +591,8 @@ export function FilterControl({ compact }: FilterControlProps) {
           href="#"
           onClick={(event) => {
             event.preventDefault();
-            $tankFilters.set(initialTankFilters);
-            $tankopediaSort.set(initialTankopediaSort);
+            TankFilters.set(TankFilters.initial);
+            TankSort.set(TankSort.initial);
           }}
         >
           {strings.website.common.tank_search.clear_filters}

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

@@ -1,27 +1,27 @@
-import { Flex, Link, Text } from '@radix-ui/themes';
-import { useLocale } from '../../../hooks/useLocale';
-import { $tankFilters, initialTankFilters } from '../../../stores/tankFilters';
+import { Flex, Link, Text } from "@radix-ui/themes";
+import { useLocale } from "../../../hooks/useLocale";
+import { TankFilters } from "../../../stores/tankFilters";
 
 interface NoResultsProps {
-  type?: 'filters' | 'search';
+  type?: "filters" | "search";
 }
 
-export function NoResults({ type = 'filters' }: NoResultsProps) {
+export function NoResults({ type = "filters" }: NoResultsProps) {
   const { strings } = useLocale();
 
   return (
     <Flex flexGrow="1" align="center" justify="center">
       <Text color="gray">
-        {strings.website.common.tank_search.no_tanks_found.body}{' '}
+        {strings.website.common.tank_search.no_tanks_found.body}{" "}
         <Link
           href="#"
           underline="always"
           color="red"
           onClick={() => {
-            $tankFilters.set(initialTankFilters);
+            TankFilters.set(TankFilters.initial);
           }}
         >
-          {type === 'filters'
+          {type === "filters"
             ? strings.website.common.tank_search.no_tanks_found.clear_filters
             : strings.website.common.tank_search.no_tanks_found.search_again}
         </Link>

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

@@ -1,20 +1,20 @@
-import { type TankDefinition } from '@blitzkit/core';
-import { useStore } from '@nanostores/react';
-import { CaretRightIcon } from '@radix-ui/react-icons';
-import { Button, TextField } from '@radix-ui/themes';
-import { useLocale } from '../../../hooks/useLocale';
-import { $tankFilters } from '../../../stores/tankFilters';
-import { LinkI18n } from '../../LinkI18n';
+import { type TankDefinition } from "@blitzkit/core";
+import { CaretRightIcon } from "@radix-ui/react-icons";
+import { Button, TextField } from "@radix-ui/themes";
+import { useLocale } from "../../../hooks/useLocale";
+import { TankFilters } from "../../../stores/tankFilters";
+import { LinkI18n } from "../../LinkI18n";
 
 interface QuickLinkProps {
   topResult?: TankDefinition;
 }
 
 export function QuickLink({ topResult }: QuickLinkProps) {
-  const tankFilters = useStore($tankFilters);
   const { locale, unwrap } = useLocale();
+  const search = TankFilters.use((state) => state.search);
+  const searching = TankFilters.use((state) => state.searching);
 
-  if (!tankFilters.search || !topResult || tankFilters.searching) return null;
+  if (!search || !topResult || searching) return null;
 
   return (
     <TextField.Slot>

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

@@ -1,38 +1,37 @@
-import { useStore } from '@nanostores/react';
-import { Flex, Separator, Text } from '@radix-ui/themes';
-import { isEqual } from 'lodash-es';
-import { useMemo } from 'react';
-import { awaitableTankDefinitions } from '../../../core/awaitables/tankDefinitions';
-import { useLocale } from '../../../hooks/useLocale';
-import { $tankFilters, initialTankFilters } from '../../../stores/tankFilters';
-import { TankopediaPersistent } from '../../../stores/tankopediaPersistent';
-import { $tankopediaSort } from '../../../stores/tankopediaSort';
-import { TankCard } from '../../TankCard';
-import { TankCardWrapper } from './TankCardWrapper';
+import { Flex, Separator, Text } from "@radix-ui/themes";
+import { isEqual } from "lodash-es";
+import { useMemo } from "react";
+import { awaitableTankDefinitions } from "../../../core/awaitables/tankDefinitions";
+import { useLocale } from "../../../hooks/useLocale";
+import { TankFilters } from "../../../stores/tankFilters";
+import { TankopediaPersistent } from "../../../stores/tankopediaPersistent";
+import { TankSort } from "../../../stores/tankopediaSort";
+import { TankCard } from "../../TankCard";
+import { TankCardWrapper } from "./TankCardWrapper";
 
 const tankDefinitions = await awaitableTankDefinitions;
 
 export function RecentlyViewed() {
   const tankopediaPersistentStore = TankopediaPersistent.useStore();
-  const filters = useStore($tankFilters);
+  const filters = TankFilters.use();
   // non-reactive because it is a little weird that it updates instantly even before the page loads
   const recentlyViewed = tankopediaPersistentStore
     .getState()
     .recentlyViewed.filter((id) => id in tankDefinitions.tanks);
-  const sort = useStore($tankopediaSort);
   const hasFilters = useMemo(
     () =>
       Object.entries(filters).some(([key, value]) => {
         return !isEqual(
           value,
-          initialTankFilters[key as keyof typeof initialTankFilters],
+          TankFilters.initial[key as keyof typeof TankFilters.initial]
         );
       }),
-    [filters],
+    [filters]
   );
   const { strings } = useLocale();
+  const by = TankSort.use((state) => state.by);
 
-  if (recentlyViewed.length === 0 || sort.by !== 'meta.none' || hasFilters) {
+  if (recentlyViewed.length === 0 || by !== "meta.none" || hasFilters) {
     return null;
   }
 

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

@@ -1,14 +1,13 @@
-import type { TankDefinition } from '@blitzkit/core';
-import { useStore } from '@nanostores/react';
-import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
-import { Flex, Spinner, TextField } from '@radix-ui/themes';
-import { debounce } from 'lodash-es';
-import { type KeyboardEventHandler, useCallback, useRef } from 'react';
-import { useLocale } from '../../../hooks/useLocale';
-import { $tankFilters } from '../../../stores/tankFilters';
-import type { MaybeSkeletonComponentProps } from '../../../types/maybeSkeletonComponentProps';
-import { QuickLink } from './QuickLink';
-import { Sort } from './Sort';
+import type { TankDefinition } from "@blitzkit/core";
+import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
+import { Flex, Spinner, TextField } from "@radix-ui/themes";
+import { debounce } from "lodash-es";
+import { type KeyboardEventHandler, useCallback, useRef } from "react";
+import { useLocale } from "../../../hooks/useLocale";
+import { TankFilters } from "../../../stores/tankFilters";
+import type { MaybeSkeletonComponentProps } from "../../../types/maybeSkeletonComponentProps";
+import { QuickLink } from "./QuickLink";
+import { Sort } from "./Sort";
 
 type SearchBarProps = MaybeSkeletonComponentProps & {
   topResult?: TankDefinition;
@@ -17,30 +16,37 @@ type SearchBarProps = MaybeSkeletonComponentProps & {
 
 export function SearchBar({ topResult, skeleton, onSelect }: SearchBarProps) {
   const { strings } = useLocale();
-  const tankFilters = useStore($tankFilters);
+  const search = TankFilters.use((state) => state.search);
+  const searching = TankFilters.use((state) => state.searching);
   const input = useRef<HTMLInputElement>(null);
   const performSearch = useCallback(
     debounce(() => {
-      $tankFilters.setKey('searching', false);
+      TankFilters.mutate((draft) => {
+        draft.searching = false;
+      });
 
       if (!input.current) return;
 
       const sanitized = input.current.value.trim();
 
-      $tankFilters.setKey('search', sanitized.length === 0 ? null : sanitized);
+      TankFilters.mutate((draft) => {
+        draft.search = sanitized.length === 0 ? null : sanitized;
+      });
     }, 500),
-    [],
+    []
   );
   const handleChange = useCallback(() => {
-    if (!tankFilters.searching) {
-      $tankFilters.setKey('searching', true);
+    if (!searching) {
+      TankFilters.mutate((draft) => {
+        draft.searching = true;
+      });
     }
 
     performSearch();
-  }, [tankFilters]);
+  }, [searching]);
   const handleKeyDown = useCallback<KeyboardEventHandler>(
     (event) => {
-      if (event.key !== 'Enter' || !topResult || tankFilters.searching) return;
+      if (event.key !== "Enter" || !topResult || searching) return;
 
       event.preventDefault();
 
@@ -50,7 +56,7 @@ export function SearchBar({ topResult, skeleton, onSelect }: SearchBarProps) {
         window.location.href = `/tanks/${topResult.slug}`;
       }
     },
-    [topResult],
+    [topResult]
   );
 
   return (
@@ -59,7 +65,7 @@ export function SearchBar({ topResult, skeleton, onSelect }: SearchBarProps) {
         <TextField.Root
           variant="classic"
           disabled={skeleton}
-          defaultValue={tankFilters.search ?? undefined}
+          defaultValue={search ?? undefined}
           style={{ flex: 1 }}
           ref={input}
           placeholder={strings.website.common.tank_search.search_bar_hint}
@@ -67,7 +73,7 @@ export function SearchBar({ topResult, skeleton, onSelect }: SearchBarProps) {
           onKeyDown={handleKeyDown}
         >
           <TextField.Slot>
-            {tankFilters.searching ? <Spinner /> : <MagnifyingGlassIcon />}
+            {searching ? <Spinner /> : <MagnifyingGlassIcon />}
           </TextField.Slot>
 
           <QuickLink topResult={topResult} />

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

@@ -1,4 +1,3 @@
-import { useStore } from '@nanostores/react';
 import { CaretDownIcon } from '@radix-ui/react-icons';
 import { Button, DropdownMenu } from '@radix-ui/themes';
 import { useLocale } from '../../../hooks/useLocale';
@@ -6,7 +5,7 @@ import type {
   TankopediaSortBy,
   TankopediaSortDirection,
 } from '../../../stores/tankopediaPersistent';
-import { $tankopediaSort } from '../../../stores/tankopediaSort';
+import { TankSort } from '../../../stores/tankopediaSort';
 
 interface ItemProps {
   by: TankopediaSortBy;
@@ -18,13 +17,15 @@ interface ItemProps {
 
 function Item({ by }: ItemProps) {
   const { strings } = useLocale();
-  const tankopediaSort = useStore($tankopediaSort);
+  const _by = TankSort.use((state) => state.by);
 
   return (
     <DropdownMenu.CheckboxItem
-      checked={tankopediaSort.by === by}
+      checked={_by === by}
       onClick={() => {
-        $tankopediaSort.setKey('by', by);
+        TankSort.mutate((draft) => {
+          draft.by = by;
+        });
       }}
     >
       {strings.website.common.tank_search.sort[by]}
@@ -33,7 +34,7 @@ function Item({ by }: ItemProps) {
 }
 
 export function Sort() {
-  const tankopediaSort = useStore($tankopediaSort);
+  const direction = TankSort.use((state) => state.direction);
   const { strings } = useLocale();
 
   return (
@@ -119,12 +120,11 @@ export function Sort() {
           }
         </DropdownMenu.Label>
         <DropdownMenu.RadioGroup
-          value={tankopediaSort.direction}
+          value={direction}
           onValueChange={(value) => {
-            $tankopediaSort.setKey(
-              'direction',
-              value as TankopediaSortDirection,
-            );
+            TankSort.mutate((draft) => {
+              draft.direction = value as TankopediaSortDirection;
+            });
           }}
         >
           <DropdownMenu.RadioItem value="ascending">

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

@@ -1,44 +1,43 @@
-import { TIER_ROMAN_NUMERALS } from '@blitzkit/core';
-import { useStore } from '@nanostores/react';
-import { Flex, IconButton, Text } from '@radix-ui/themes';
-import { times } from 'lodash-es';
-import { memo } from 'react';
-import { $tankFilters } from '../../../stores/tankFilters';
-import { $tankopediaSort } from '../../../stores/tankopediaSort';
+import { TIER_ROMAN_NUMERALS } from "@blitzkit/core";
+import { Flex, IconButton, Text } from "@radix-ui/themes";
+import { times } from "lodash-es";
+import { memo } from "react";
+import { TankFilters } from "../../../stores/tankFilters";
+import { TankSort } from "../../../stores/tankopediaSort";
 
 export const TierFilter = memo(() => {
-  const tankFilters = useStore($tankFilters);
-  const tankopediaSort = useStore($tankopediaSort);
+  const by = TankSort.use((state) => state.by);
+  const search = TankFilters.use((state) => state.search);
+  const tiers = TankFilters.use((state) => state.tiers);
 
-  if (tankopediaSort.by !== 'meta.none' || tankFilters.search) return null;
+  if (by !== "meta.none" || search) return null;
 
   return (
     <Flex justify="center">
       <Flex
         direction="row"
         overflow="hidden"
-        style={{ borderRadius: 'var(--radius-full)' }}
+        style={{ borderRadius: "var(--radius-full)" }}
       >
         {times(10, (index) => {
           const tier = 10 - index;
-          const selected = tankFilters.tiers.includes(tier);
+          const selected = tiers.includes(tier);
 
           return (
             <IconButton
               key={tier}
-              variant={selected ? 'solid' : 'soft'}
+              variant={selected ? "solid" : "soft"}
               radius="none"
-              color={selected ? undefined : 'gray'}
+              color={selected ? undefined : "gray"}
               highContrast
               onClick={() => {
-                if (tankFilters.tiers.includes(tier)) {
-                  $tankFilters.setKey(
-                    'tiers',
-                    tankFilters.tiers.filter((t) => t !== tier),
-                  );
-                } else {
-                  $tankFilters.setKey('tiers', [...tankFilters.tiers, tier]);
-                }
+                TankFilters.mutate((draft) => {
+                  if (tiers.includes(tier)) {
+                    draft.tiers = tiers.filter((t) => t !== tier);
+                  } else {
+                    draft.tiers = [...tiers, tier];
+                  }
+                });
               }}
             >
               <Text size="2">{TIER_ROMAN_NUMERALS[tier]}</Text>

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

@@ -5,37 +5,36 @@ import {
   SEARCH_KEYS,
   unionBoundingBox,
   type TankDefinition,
-} from '@blitzkit/core';
-import { literals } from '@blitzkit/i18n/src/literals';
-import { useStore } from '@nanostores/react';
-import { Callout, Flex, Link, Text, type FlexProps } from '@radix-ui/themes';
-import fuzzysort from 'fuzzysort';
-import { times, uniq } from 'lodash-es';
-import { memo, useEffect, useMemo, useState } from 'react';
-import { awaitableGameDefinitions } from '../../core/awaitables/gameDefinitions';
-import { awaitableModelDefinitions } from '../../core/awaitables/modelDefinitions';
-import { awaitableTankDefinitions } from '../../core/awaitables/tankDefinitions';
-import { awaitableTankNames } from '../../core/awaitables/tankNames';
-import { filterTank } from '../../core/blitzkit/filterTank';
-import { resolveReload } from '../../core/blitzkit/resolveReload';
-import { useLocale } from '../../hooks/useLocale';
-import { $tankFilters } from '../../stores/tankFilters';
-import { TankopediaPersistent } from '../../stores/tankopediaPersistent';
-import { SORT_UNITS } from '../../stores/tankopediaPersistent/constants';
-import { $tankopediaSort } from '../../stores/tankopediaSort';
-import type { MaybeSkeletonComponentProps } from '../../types/maybeSkeletonComponentProps';
-import { ExperimentIcon } from '../ExperimentIcon';
-import { TankSearchCard } from './components/Card';
-import { FilterControl } from './components/FilterControl';
-import { NoResults } from './components/NoResults';
-import { RecentlyViewed } from './components/RecentlyViewed';
-import { SearchBar } from './components/SearchBar';
-import { SkeletonTankCard } from './components/SkeletonTankCard';
-import { TankCardWrapper } from './components/TankCardWrapper';
-import { MAX_RECENTLY_VIEWED } from './constants';
+} from "@blitzkit/core";
+import { literals } from "@blitzkit/i18n/src/literals";
+import { Callout, Flex, Link, Text, type FlexProps } from "@radix-ui/themes";
+import fuzzysort from "fuzzysort";
+import { times, uniq } from "lodash-es";
+import { memo, useEffect, useMemo, useState } from "react";
+import { awaitableGameDefinitions } from "../../core/awaitables/gameDefinitions";
+import { awaitableModelDefinitions } from "../../core/awaitables/modelDefinitions";
+import { awaitableTankDefinitions } from "../../core/awaitables/tankDefinitions";
+import { awaitableTankNames } from "../../core/awaitables/tankNames";
+import { filterTank } from "../../core/blitzkit/filterTank";
+import { resolveReload } from "../../core/blitzkit/resolveReload";
+import { useLocale } from "../../hooks/useLocale";
+import { TankFilters } from "../../stores/tankFilters";
+import { TankopediaPersistent } from "../../stores/tankopediaPersistent";
+import { SORT_UNITS } from "../../stores/tankopediaPersistent/constants";
+import { TankSort } from "../../stores/tankopediaSort";
+import type { MaybeSkeletonComponentProps } from "../../types/maybeSkeletonComponentProps";
+import { ExperimentIcon } from "../ExperimentIcon";
+import { TankSearchCard } from "./components/Card";
+import { FilterControl } from "./components/FilterControl";
+import { NoResults } from "./components/NoResults";
+import { RecentlyViewed } from "./components/RecentlyViewed";
+import { SearchBar } from "./components/SearchBar";
+import { SkeletonTankCard } from "./components/SkeletonTankCard";
+import { TankCardWrapper } from "./components/TankCardWrapper";
+import { MAX_RECENTLY_VIEWED } from "./constants";
 
 type TankSearchProps = MaybeSkeletonComponentProps &
-  Omit<FlexProps, 'onSelect'> & {
+  Omit<FlexProps, "onSelect"> & {
     compact?: boolean;
     onSelect?: (tank: TankDefinition) => void;
     onSelectAll?: (tanks: TankDefinition[]) => void;
@@ -57,21 +56,21 @@ export const TankSearch = memo<TankSearchProps>(
     const { strings, locale } = useLocale();
     const mutateTankopediaPersistent = TankopediaPersistent.useMutation();
     const awaitedTanksDefinitionsArray = Object.values(tankDefinitions.tanks);
-    const tankFilters = useStore($tankFilters);
-    const tankopediaSort = useStore($tankopediaSort);
+    const tankopediaSort = TankSort.use();
+    const tankFilters = TankFilters.use();
     const tanksFiltered = useMemo(() => {
       if (tankFilters.search === null) {
         const filtered = awaitedTanksDefinitionsArray.filter((tank) =>
-          filterTank(tankFilters, tank),
+          filterTank(tankFilters, tank)
         );
         let sorted: TankDefinition[];
 
         switch (tankopediaSort.by) {
-          case 'meta.none':
+          case "meta.none":
             sorted = metaSortTank(filtered, gameDefinitions);
             break;
 
-          case 'survivability.health': {
+          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;
@@ -81,38 +80,36 @@ export const TankSearch = memo<TankSearchProps>(
             break;
           }
 
-          case 'survivability.viewRange':
+          case "survivability.viewRange":
             sorted = filtered.sort(
               (a, b) =>
-                a.turrets.at(-1)!.view_range - b.turrets.at(-1)!.view_range,
+                a.turrets.at(-1)!.view_range - b.turrets.at(-1)!.view_range
             );
             break;
 
-          case 'survivability.camouflageStill':
+          case "survivability.camouflageStill":
             sorted = filtered.sort(
-              (a, b) => a.camouflage_still - b.camouflage_still,
+              (a, b) => a.camouflage_still - b.camouflage_still
             );
             break;
 
-          case 'survivability.camouflageMoving':
+          case "survivability.camouflageMoving":
             sorted = filtered.sort(
-              (a, b) => a.camouflage_moving - b.camouflage_moving,
+              (a, b) => a.camouflage_moving - b.camouflage_moving
             );
             break;
 
-          case 'survivability.camouflageShooting':
+          case "survivability.camouflageShooting":
             sorted = filtered.sort(
               (a, b) =>
                 a.camouflage_still *
-                  a.turrets.at(-1)!.guns.at(-1)!.gun_type!.value.base
-                    .camouflage_loss -
+                  a.turrets.at(-1)!.guns.at(-1)!.camouflage_loss -
                 b.camouflage_still *
-                  b.turrets.at(-1)!.guns.at(-1)!.gun_type!.value.base
-                    .camouflage_loss,
+                  b.turrets.at(-1)!.guns.at(-1)!.camouflage_loss
             );
             break;
 
-          case 'survivability.volume':
+          case "survivability.volume":
             sorted = filtered.sort((a, b) => {
               const aTankModelDefinition = modelDefinitions.models[a.id];
               const bTankModelDefinition = modelDefinitions.models[b.id];
@@ -123,14 +120,14 @@ export const TankSearch = memo<TankSearchProps>(
               const aSize = normalizeBoundingBox(
                 unionBoundingBox(
                   aTankModelDefinition.bounding_box,
-                  aTurretModelDefinition.bounding_box,
-                ),
+                  aTurretModelDefinition.bounding_box
+                )
               );
               const bSize = normalizeBoundingBox(
                 unionBoundingBox(
                   bTankModelDefinition.bounding_box,
-                  bTurretModelDefinition.bounding_box,
-                ),
+                  bTurretModelDefinition.bounding_box
+                )
               );
               const aVolume = aSize.x * aSize.y * aSize.z;
               const bVolume = bSize.x * bSize.y * bSize.z;
@@ -139,7 +136,7 @@ export const TankSearch = memo<TankSearchProps>(
             });
             break;
 
-          case 'survivability.length':
+          case "survivability.length":
             sorted = filtered.sort((a, b) => {
               const aTankModelDefinition = modelDefinitions.models[a.id];
               const bTankModelDefinition = modelDefinitions.models[b.id];
@@ -150,14 +147,14 @@ export const TankSearch = memo<TankSearchProps>(
               const aSize = normalizeBoundingBox(
                 unionBoundingBox(
                   aTankModelDefinition.bounding_box,
-                  aTurretModelDefinition.bounding_box,
-                ),
+                  aTurretModelDefinition.bounding_box
+                )
               );
               const bSize = normalizeBoundingBox(
                 unionBoundingBox(
                   bTankModelDefinition.bounding_box,
-                  bTurretModelDefinition.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);
@@ -166,215 +163,193 @@ export const TankSearch = memo<TankSearchProps>(
             });
             break;
 
-          case 'fire.dpm':
+          case "fire.dpm":
             sorted = filtered.sort(
               (a, b) =>
                 resolveDpm(
                   a.turrets.at(-1)!.guns.at(-1)!,
-                  a.turrets.at(-1)!.guns.at(-1)!.gun_type!.value.base.shells[0],
+                  a.turrets.at(-1)!.guns.at(-1)!.shells[0]
                 ) -
                 resolveDpm(
                   b.turrets.at(-1)!.guns.at(-1)!,
-                  b.turrets.at(-1)!.guns.at(-1)!.gun_type!.value.base.shells[0],
-                ),
+                  b.turrets.at(-1)!.guns.at(-1)!.shells[0]
+                )
             );
             break;
 
-          case 'fire.dpmPremium':
+          case "fire.dpmPremium":
             sorted = filtered.sort(
               (a, b) =>
-                (a.turrets.at(-1)!.guns.at(-1)!.gun_type!.value.base.shells[1]
+                (a.turrets.at(-1)!.guns.at(-1)!.shells[1]
                   ? resolveDpm(
                       a.turrets.at(-1)!.guns.at(-1)!,
-                      a.turrets.at(-1)!.guns.at(-1)!.gun_type!.value.base
-                        .shells[1],
+                      a.turrets.at(-1)!.guns.at(-1)!.shells[1]
                     )
                   : 0) -
-                (b.turrets.at(-1)!.guns.at(-1)!.gun_type!.value.base.shells[1]
+                (b.turrets.at(-1)!.guns.at(-1)!.shells[1]
                   ? resolveDpm(
                       b.turrets.at(-1)!.guns.at(-1)!,
-                      b.turrets.at(-1)!.guns.at(-1)!.gun_type!.value.base
-                        .shells[1],
+                      b.turrets.at(-1)!.guns.at(-1)!.shells[1]
                     )
-                  : 0),
+                  : 0)
             );
             break;
 
-          case 'fire.reload':
+          case "fire.reload":
             sorted = filtered.sort(
               (a, b) =>
                 resolveReload(a.turrets.at(-1)!.guns.at(-1)!) -
-                resolveReload(b.turrets.at(-1)!.guns.at(-1)!),
+                resolveReload(b.turrets.at(-1)!.guns.at(-1)!)
             );
             break;
 
-          case 'fire.caliber':
+          case "fire.caliber":
             sorted = filtered.sort(
               (a, b) =>
-                a.turrets.at(-1)!.guns.at(-1)!.gun_type!.value.base.shells[0]
-                  .caliber -
-                b.turrets.at(-1)!.guns.at(-1)!.gun_type!.value.base.shells[0]
-                  .caliber,
+                a.turrets.at(-1)!.guns.at(-1)!.shells[0].caliber -
+                b.turrets.at(-1)!.guns.at(-1)!.shells[0].caliber
             );
             break;
 
-          case 'fire.standardPenetration':
+          case "fire.standardPenetration":
             sorted = filtered.sort(
               (a, b) =>
-                a.turrets.at(-1)!.guns.at(-1)!.gun_type!.value.base.shells[0]
-                  .penetration.near -
-                b.turrets.at(-1)!.guns.at(-1)!.gun_type!.value.base.shells[0]
-                  .penetration.near,
+                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':
+          case "fire.premiumPenetration":
             sorted = filtered.sort(
               (a, b) =>
-                (a.turrets.at(-1)!.guns.at(-1)!.gun_type!.value.base.shells[1]
-                  ?.penetration.near ?? 0) -
-                (b.turrets.at(-1)!.guns.at(-1)!.gun_type!.value.base.shells[1]
-                  ?.penetration.near ?? 0),
+                (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':
+          case "fire.tertiaryPenetration":
             sorted = filtered.sort(
               (a, b) =>
-                (a.turrets.at(-1)!.guns.at(-1)!.gun_type!.value.base.shells[2]
-                  ?.penetration.near ?? 0) -
-                (b.turrets.at(-1)!.guns.at(-1)!.gun_type!.value.base.shells[2]
-                  ?.penetration.near ?? 0),
+                (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':
+          case "fire.damage":
             sorted = filtered.sort(
               (a, b) =>
-                a.turrets.at(-1)!.guns.at(-1)!.gun_type!.value.base.shells[0]
-                  .armor_damage -
-                b.turrets.at(-1)!.guns.at(-1)!.gun_type!.value.base.shells[0]
-                  .armor_damage,
+                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':
+          case "fire.moduleDamage":
             sorted = filtered.sort(
               (a, b) =>
-                a.turrets.at(-1)!.guns.at(-1)!.gun_type!.value.base.shells[0]
-                  .module_damage -
-                b.turrets.at(-1)!.guns.at(-1)!.gun_type!.value.base.shells[0]
-                  .module_damage,
+                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':
+          case "fire.shellVelocity":
             sorted = filtered.sort(
               (a, b) =>
-                a.turrets.at(-1)!.guns.at(-1)!.gun_type!.value.base.shells[0]
-                  .velocity -
-                b.turrets.at(-1)!.guns.at(-1)!.gun_type!.value.base.shells[0]
-                  .velocity,
+                a.turrets.at(-1)!.guns.at(-1)!.shells[0].velocity -
+                b.turrets.at(-1)!.guns.at(-1)!.shells[0].velocity
             );
             break;
 
-          case 'fire.shellRange':
+          case "fire.shellRange":
             sorted = filtered.sort(
               (a, b) =>
-                a.turrets.at(-1)!.guns.at(-1)!.gun_type!.value.base.shells[0]
-                  .range -
-                b.turrets.at(-1)!.guns.at(-1)!.gun_type!.value.base.shells[0]
-                  .range,
+                a.turrets.at(-1)!.guns.at(-1)!.shells[0].range -
+                b.turrets.at(-1)!.guns.at(-1)!.shells[0].range
             );
             break;
 
-          case 'fire.shellCapacity':
+          case "fire.shellCapacity":
             sorted = filtered.sort(
               (a, b) =>
-                a.turrets.at(-1)!.guns.at(-1)!.gun_type!.value.base
-                  .shell_capacity -
-                b.turrets.at(-1)!.guns.at(-1)!.gun_type!.value.base
-                  .shell_capacity,
+                a.turrets.at(-1)!.guns.at(-1)!.shell_capacity -
+                b.turrets.at(-1)!.guns.at(-1)!.shell_capacity
             );
             break;
 
-          case 'fire.aimTime':
+          case "fire.aimTime":
             sorted = filtered.sort(
               (a, b) =>
-                a.turrets.at(-1)!.guns.at(-1)!.gun_type!.value.base.aim_time -
-                b.turrets.at(-1)!.guns.at(-1)!.gun_type!.value.base.aim_time,
+                a.turrets.at(-1)!.guns.at(-1)!.aim_time -
+                b.turrets.at(-1)!.guns.at(-1)!.aim_time
             );
             break;
 
-          case 'fire.dispersionStill':
+          case "fire.dispersionStill":
             sorted = filtered.sort(
               (a, b) =>
-                a.turrets.at(-1)!.guns.at(-1)!.gun_type!.value.base
-                  .dispersion_base -
-                b.turrets.at(-1)!.guns.at(-1)!.gun_type!.value.base
-                  .dispersion_base,
+                a.turrets.at(-1)!.guns.at(-1)!.dispersion_base -
+                b.turrets.at(-1)!.guns.at(-1)!.dispersion_base
             );
             break;
 
-          case 'fire.dispersionMoving':
+          case "fire.dispersionMoving":
             sorted = filtered.sort(
               (a, b) =>
                 a.tracks.at(-1)!.dispersion_move -
-                b.tracks.at(-1)!.dispersion_move,
+                b.tracks.at(-1)!.dispersion_move
             );
             break;
 
-          case 'fire.gunDepression':
+          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)!.gun_type!.value.base.id]
-                  .pitch.max +
+                  .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)!.gun_type!.value.base.id]
-                  .pitch.max -
+                  .guns[b.turrets.at(-1)!.guns.at(-1)!.id].pitch.max -
                 (modelDefinitions.models[b.id].initial_turret_rotation?.pitch ??
-                  0),
+                  0)
             );
             break;
 
-          case 'fire.gunElevation':
+          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)!.gun_type!.value.base.id]
-                  .pitch.min +
+                  .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)!.gun_type!.value.base.id]
-                  .pitch.min -
+                  .guns[a.turrets.at(-1)!.guns.at(-1)!.id].pitch.min -
                 (modelDefinitions.models[a.id].initial_turret_rotation?.pitch ??
-                  0),
+                  0)
             );
             break;
 
-          case 'maneuverability.forwardsSpeed':
+          case "maneuverability.forwardsSpeed":
             sorted = filtered.sort(
-              (a, b) => a.speed_forwards - b.speed_forwards,
+              (a, b) => a.speed_forwards - b.speed_forwards
             );
             break;
 
-          case 'maneuverability.backwardsSpeed':
+          case "maneuverability.backwardsSpeed":
             sorted = filtered.sort(
-              (a, b) => a.speed_backwards - b.speed_backwards,
+              (a, b) => a.speed_backwards - b.speed_backwards
             );
             break;
 
-          case 'maneuverability.power':
+          case "maneuverability.power":
             sorted = filtered.sort(
-              (a, b) => a.engines.at(-1)!.power - b.engines.at(-1)!.power,
+              (a, b) => a.engines.at(-1)!.power - b.engines.at(-1)!.power
             );
             break;
 
-          case 'maneuverability.powerToWeight':
+          case "maneuverability.powerToWeight":
             sorted = filtered.sort(
               (a, b) =>
                 a.engines.at(-1)!.power /
@@ -382,43 +357,42 @@ export const TankSearch = memo<TankSearchProps>(
                     a.engines.at(-1)!.weight +
                     a.tracks.at(-1)!.weight +
                     a.turrets.at(-1)!.weight +
-                    a.turrets.at(-1)!.guns.at(-1)!.gun_type!.value.base
-                      .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)!.gun_type!.value.base.weight),
+                    b.turrets.at(-1)!.guns.at(-1)!.weight)
             );
             break;
 
-          case 'maneuverability.weight':
+          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)!.gun_type!.value.base.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)!.gun_type!.value.base.weight),
+                  b.turrets.at(-1)!.guns.at(-1)!.weight)
             );
             break;
 
-          case 'maneuverability.traverseSpeed':
+          case "maneuverability.traverseSpeed":
             sorted = filtered.sort(
               (a, b) =>
                 a.tracks.at(-1)!.traverse_speed -
-                b.tracks.at(-1)!.traverse_speed,
+                b.tracks.at(-1)!.traverse_speed
             );
             break;
         }
 
-        return tankopediaSort.direction === 'ascending'
+        return tankopediaSort.direction === "ascending"
           ? sorted
           : sorted.reverse();
       } else {
@@ -426,7 +400,7 @@ export const TankSearch = memo<TankSearchProps>(
           keys: SEARCH_KEYS,
         });
         const searchedTanks = searchedRaw.map(
-          (result) => tankDefinitions.tanks[result.obj.id],
+          (result) => tankDefinitions.tanks[result.obj.id]
         );
         return searchedTanks;
       }
@@ -484,24 +458,24 @@ export const TankSearch = memo<TankSearchProps>(
             )}
           </Flex>
 
-          {tankopediaSort.by !== 'meta.none' && (
+          {tankopediaSort.by !== "meta.none" && (
             <Text color="gray">
               {literals(strings.website.common.tank_search.sorting_by, [
                 strings.website.common.tank_search.sort[tankopediaSort.by],
               ])}
               {SORT_UNITS[tankopediaSort.by] === undefined
-                ? ''
+                ? ""
                 : ` (${SORT_UNITS[tankopediaSort.by]})`}
               , {tankopediaSort.direction}
             </Text>
           )}
         </Flex>
 
-        {tankFilters.testing === 'only' && (
+        {tankFilters.testing === "only" && (
           <Flex justify="center" mt="4">
             <Callout.Root color="amber">
               <Callout.Icon>
-                <ExperimentIcon style={{ width: '1em', height: '1em' }} />
+                <ExperimentIcon style={{ width: "1em", height: "1em" }} />
               </Callout.Icon>
               <Callout.Text>
                 {strings.website.common.warnings.test}
@@ -530,12 +504,12 @@ export const TankSearch = memo<TankSearchProps>(
                         key={index}
                         onIntersection={() => {
                           setLoadedCards((state) =>
-                            Math.min(state + 2, tanksFiltered.length),
+                            Math.min(state + 2, tanksFiltered.length)
                           );
                         }}
                       />
                     );
-                  },
+                  }
                 )}
               </TankCardWrapper>
             )}
@@ -548,15 +522,15 @@ export const TankSearch = memo<TankSearchProps>(
           <TankCardWrapper>
             {times(
               Math.round(
-                skeleton ? DEFAULT_LOADED_CARDS : 10 + 10 * Math.random(),
+                skeleton ? DEFAULT_LOADED_CARDS : 10 + 10 * Math.random()
               ),
               (index) => (
                 <SkeletonTankCard key={index} />
-              ),
+              )
             )}
           </TankCardWrapper>
         )}
       </Flex>
     );
-  },
+  }
 );

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

@@ -1,6 +1,6 @@
 import type { AssaultRanges } from '@blitzkit/core';
 import { literals } from '@blitzkit/i18n';
-import { Box, Card, Flex, Text } from '@radix-ui/themes';
+import { Box, Flex, Text } from '@radix-ui/themes';
 import { clamp } from 'three/src/math/MathUtils.js';
 import {
   fakeLogSquishyHigh,
@@ -9,6 +9,7 @@ import {
 import type { TankCharacteristics } from '../../../../../../../core/blitzkit/tankCharacteristics';
 import { Var } from '../../../../../../../core/radix/var';
 import { useLocale } from '../../../../../../../hooks/useLocale';
+import { VisualizerCard } from '../VisualizerCard';
 import { AssaultCursor } from './components/Cursor';
 
 interface Props {
@@ -29,7 +30,7 @@ export function AssaultRangesVisualizer({ ranges: _ranges, stats }: Props) {
   const { strings } = useLocale();
 
   return (
-    <Card mb="6" variant="classic" style={{ aspectRatio: '1 / 1' }}>
+    <VisualizerCard>
       <Flex
         position="absolute"
         top="0"
@@ -152,6 +153,6 @@ export function AssaultRangesVisualizer({ ranges: _ranges, stats }: Props) {
           </Flex>
         </Flex>
       </Flex>
-    </Card>
+    </VisualizerCard>
   );
 }

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/CompareOptions.tsx

@@ -13,7 +13,6 @@ export function CompareOptions(props: FlexProps) {
     (state) => state.relativeAgainst,
   );
   const tank = Duel.use((state) => state.protagonist.tank);
-  const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
   const { strings } = useLocale();
 
   return (
@@ -33,7 +32,7 @@ export function CompareOptions(props: FlexProps) {
         size="1"
         value={`${relativeAgainst}`}
         onValueChange={(value) => {
-          mutateTankopediaEphemeral((draft) => {
+          TankopediaEphemeral.mutate((draft) => {
             draft.relativeAgainst = Number(value) as TankopediaRelativeAgainst;
           });
         }}

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/Firepower.tsx

@@ -1,62 +1,31 @@
-import {
-  asset,
-  coefficient,
-  isExplosive,
-  resolvePenetrationCoefficient,
-} from '@blitzkit/core';
+import { asset, isExplosive } from '@blitzkit/core';
 import { literals } from '@blitzkit/i18n';
-import {
-  Flex,
-  Heading,
-  IconButton,
-  Slider,
-  Text,
-  TextField,
-  Tooltip,
-} from '@radix-ui/themes';
-import { debounce } from 'lodash-es';
-import { useEffect, useRef, useState } from 'react';
-import { lerp } from 'three/src/math/MathUtils.js';
-import { useEquipment } from '../../../../../../hooks/useEquipment';
+import { Flex, Heading, IconButton, Tooltip } from '@radix-ui/themes';
 import { useLocale } from '../../../../../../hooks/useLocale';
 import { useTankModelDefinition } from '../../../../../../hooks/useTankModelDefinition';
 import { Duel } from '../../../../../../stores/duel';
+import type { MaybeSkeletonComponentProps } from '../../../../../../types/maybeSkeletonComponentProps';
 import { AssaultRangesVisualizer } from './AssaultRangesVisualizer';
+import { GunFlexibilityVisualizer } from './GunFlexibilityVisualizer';
 import { Info } from './Info';
 import { InfoWithDelta } from './InfoWithDelta';
+import { ReloadVisualizer } from './ReloadVisualizer';
 import { RicochetVisualizer } from './RicochetVisualizer';
 import { StatsTableWrapper } from './StatsTableWrapper';
 import type { StatsAcceptorProps } from './TraverseVisualizer';
 
-export function Firepower({ stats }: StatsAcceptorProps) {
+export function Firepower({
+  stats,
+  skeleton,
+}: StatsAcceptorProps & MaybeSkeletonComponentProps) {
   const mutateDuel = Duel.useMutation();
   const { strings, unwrap } = useLocale();
-  const [penetrationDistance, setPenetrationDistance] = useState(250);
-  const setPenetrationDistanceDebounced = debounce((value: number) => {
-    setPenetrationDistance(value);
-  }, 500);
-  const { gun, shell, turret } = Duel.use((state) => state.protagonist);
-  const penetrationDistanceInput = useRef<HTMLInputElement>(null);
-  const hasSupercharger = useEquipment(107);
-  const hasCalibratedShells = useEquipment(103);
-  const penetrationCoefficient = coefficient([
-    hasCalibratedShells,
-    resolvePenetrationCoefficient(true, shell.type) - 1,
-  ]);
-  const penetrationLossOverDistanceCoefficient = coefficient([
-    hasSupercharger,
-    -0.6,
-  ]);
+  const turret = Duel.use((state) => state.protagonist.turret);
+  const gun = Duel.use((state) => state.protagonist.gun);
+  const shell = Duel.use((state) => state.protagonist.shell);
   const tankModelDefinition = useTankModelDefinition();
   const turretModelDefinition = tankModelDefinition.turrets[turret.id];
-  const gunModelDefinition =
-    turretModelDefinition.guns[gun.gun_type!.value.base.id];
-
-  useEffect(() => {
-    if (penetrationDistanceInput.current) {
-      penetrationDistanceInput.current.value = `${penetrationDistance}`;
-    }
-  }, [penetrationDistance]);
+  const gunModelDefinition = turretModelDefinition.guns[gun.id];
 
   return (
     <StatsTableWrapper>
@@ -66,7 +35,7 @@ export function Firepower({ stats }: StatsAcceptorProps) {
         </Heading>
 
         <Flex>
-          {gun.gun_type!.value.base.shells.map((thisShell, shellIndex) => {
+          {gun.shells.map((thisShell, shellIndex) => {
             const selected = thisShell.id === shell.id;
 
             return (
@@ -79,13 +48,9 @@ export function Firepower({ stats }: StatsAcceptorProps) {
                     borderTopLeftRadius: shellIndex === 0 ? undefined : 0,
                     borderBottomLeftRadius: shellIndex === 0 ? undefined : 0,
                     borderTopRightRadius:
-                      shellIndex === gun.gun_type!.value.base.shells.length - 1
-                        ? undefined
-                        : 0,
+                      shellIndex === gun.shells.length - 1 ? undefined : 0,
                     borderBottomRightRadius:
-                      shellIndex === gun.gun_type!.value.base.shells.length - 1
-                        ? undefined
-                        : 0,
+                      shellIndex === gun.shells.length - 1 ? undefined : 0,
                     marginLeft: shellIndex === 0 ? 0 : -1,
                   }}
                   onClick={() => {
@@ -120,11 +85,8 @@ export function Firepower({ stats }: StatsAcceptorProps) {
       <InfoWithDelta stats={stats} decimals={0} value="moduleDamage" />
       <InfoWithDelta stats={stats} decimals={0} value="penetration" />
 
-      {gun.gun_type!.value.base.assault_ranges?.types.includes(shell.type) && (
-        <AssaultRangesVisualizer
-          stats={stats}
-          ranges={gun.gun_type!.value.base.assault_ranges}
-        />
+      {gun.assault_ranges?.types.includes(shell.type) && (
+        <AssaultRangesVisualizer stats={stats} ranges={gun.assault_ranges} />
       )}
 
       {gun.gun_type!.$case === 'auto_reloader' && (
@@ -185,75 +147,8 @@ export function Firepower({ stats }: StatsAcceptorProps) {
           value="intraClip"
         />
       )}
-      {/* <ReloadVisualizer stats={stats} /> */}
+      <ReloadVisualizer stats={stats} />
 
-      {typeof shell.penetration !== 'number' && (
-        <>
-          <InfoWithDelta
-            stats={stats}
-            indent
-            decimals={0}
-            name={literals(
-              strings.website.tools.tankopedia.characteristics.values
-                .at_distance,
-              [`${penetrationDistance}`],
-            )}
-            noRanking
-            value={() =>
-              lerp(
-                shell.penetration.near,
-                shell.penetration.far,
-                (penetrationDistance * penetrationLossOverDistanceCoefficient) /
-                  500,
-              ) * penetrationCoefficient
-            }
-          />
-          <Flex align="center" gap="2" style={{ paddingLeft: 24 }}>
-            <Text color="gray">
-              {
-                strings.website.tools.tankopedia.characteristics.values
-                  .at_distance_slider_label
-              }
-            </Text>
-            <Slider
-              variant="classic"
-              key={penetrationDistance}
-              min={0}
-              max={500}
-              style={{ flex: 1 }}
-              defaultValue={[penetrationDistance]}
-              onValueChange={([value]) => {
-                setPenetrationDistanceDebounced(value);
-
-                if (!penetrationDistanceInput.current) return;
-
-                penetrationDistanceInput.current.value = value.toString();
-              }}
-            />
-            <TextField.Root
-              variant="classic"
-              style={{ width: 64 }}
-              ref={penetrationDistanceInput}
-              defaultValue={penetrationDistance}
-              onBlur={() => {
-                setPenetrationDistance(
-                  Math.min(
-                    parseInt(penetrationDistanceInput.current!.value),
-                    500,
-                  ),
-                );
-              }}
-              onKeyDown={(event) => {
-                if (event.key === 'Enter') {
-                  event.currentTarget.blur();
-                }
-              }}
-            >
-              <TextField.Slot side="right">m</TextField.Slot>
-            </TextField.Root>
-          </Flex>
-        </>
-      )}
       {isExplosive(shell.type) && (
         <InfoWithDelta
           stats={stats}
@@ -342,7 +237,7 @@ export function Firepower({ stats }: StatsAcceptorProps) {
       <InfoWithDelta
         stats={stats}
         decimals={1}
-        prefix="x "
+        prefix="x"
         indent
         deltaType="lowerIsBetter"
         value="dispersionGunDamaged"
@@ -403,6 +298,7 @@ export function Firepower({ stats }: StatsAcceptorProps) {
           />
         </>
       )}
+      <GunFlexibilityVisualizer skeleton={skeleton} />
     </StatsTableWrapper>
   );
 }

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

@@ -0,0 +1,14 @@
+import { useFrame } from '@react-three/fiber';
+
+export const zoom = 60;
+
+export function CameraPositioner() {
+  useFrame(({ camera, gl: { domElement } }) => {
+    const { width } = domElement.getBoundingClientRect();
+    const physicalWidth = width / zoom;
+
+    camera.position.set(10, 0, -physicalWidth / 6);
+  });
+
+  return null;
+}

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

@@ -0,0 +1,55 @@
+import type { QuicklimeEvent } from 'quicklime';
+import { useEffect, useRef } from 'react';
+import type { Group } from 'three';
+import { awaitableModelDefinitions } from '../../../../../../../../core/awaitables/modelDefinitions';
+import {
+  modelTransformEvent,
+  type ModelTransformEventData,
+} from '../../../../../../../../core/blitzkit/modelTransform';
+import { Duel } from '../../../../../../../../stores/duel';
+import { ModelChunk } from './ModelChunk';
+
+const modelDefinitions = await awaitableModelDefinitions;
+
+export function CanvasContent() {
+  const hullWrapper = useRef<Group>(null);
+  const gunWrapper = useRef<Group>(null);
+
+  const tank = Duel.use((state) => state.protagonist.tank);
+  const turret = Duel.use((state) => state.protagonist.turret);
+
+  const tankModel = modelDefinitions.models[tank.id];
+  const turretModel = tankModel.turrets[turret.id];
+
+  useEffect(() => {
+    function handleModelTransformEvent(
+      event: QuicklimeEvent<ModelTransformEventData>,
+    ) {
+      if (!gunWrapper.current || !hullWrapper.current) return;
+
+      gunWrapper.current.rotation.x = event.data.pitch;
+      if (event.data.yaw) hullWrapper.current.rotation.y = event.data.yaw;
+    }
+
+    modelTransformEvent.on(handleModelTransformEvent);
+
+    return () => {
+      modelTransformEvent.off(handleModelTransformEvent);
+    };
+  }, []);
+  return (
+    <>
+      <group ref={hullWrapper} position={[0, 0, turretModel.gun_origin.z]}>
+        <group position={[0, 0, -turretModel.gun_origin.z]}>
+          <ModelChunk only="body" />
+        </group>
+      </group>
+
+      <ModelChunk only="turret" />
+
+      <group ref={gunWrapper}>
+        <ModelChunk only="gun" />
+      </group>
+    </>
+  );
+}

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

@@ -0,0 +1,12 @@
+import { SmartCanvas } from '../../../../../../../SmartCanvas';
+import { CameraPositioner, zoom } from './CameraPositioner';
+import { CanvasContent } from './CanvasContent';
+
+export function FlexibilityCanvas() {
+  return (
+    <SmartCanvas orthographic camera={{ zoom, rotation: [0, Math.PI / 2, 0] }}>
+      <CanvasContent />
+      <CameraPositioner />
+    </SmartCanvas>
+  );
+}

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

@@ -0,0 +1,105 @@
+import { mauveDark } from '@radix-ui/colors';
+import { LineBasicMaterial, MeshBasicMaterial } from 'three';
+import { awaitableModelDefinitions } from '../../../../../../../../core/awaitables/modelDefinitions';
+import { jsxTree } from '../../../../../../../../core/blitzkit/jsxTree';
+import { useModel } from '../../../../../../../../hooks/useModel';
+import { Duel } from '../../../../../../../../stores/duel';
+
+const modelDefinitions = await awaitableModelDefinitions;
+
+const surfaceMaterial: Record<Props['only'], MeshBasicMaterial> = {
+  gun: new MeshBasicMaterial({
+    color: mauveDark.mauve8,
+    toneMapped: false,
+  }),
+  turret: new MeshBasicMaterial({
+    color: mauveDark.mauve6,
+    toneMapped: false,
+  }),
+  body: new MeshBasicMaterial({
+    color: mauveDark.mauve6,
+    toneMapped: false,
+    transparent: true,
+    opacity: 0.5,
+  }),
+};
+const outlineMaterial: Record<Props['only'], LineBasicMaterial> = {
+  gun: new LineBasicMaterial({
+    color: mauveDark.mauve11,
+    toneMapped: false,
+  }),
+  turret: new LineBasicMaterial({
+    color: mauveDark.mauve8,
+    toneMapped: false,
+  }),
+  body: new LineBasicMaterial({
+    color: mauveDark.mauve8,
+    toneMapped: false,
+    transparent: true,
+    opacity: 0.5,
+  }),
+};
+
+interface Props {
+  only: 'gun' | 'turret' | 'body';
+}
+
+export function ModelChunk({ only }: Props) {
+  const tank = Duel.use((state) => state.protagonist.tank);
+  const turret = Duel.use((state) => state.protagonist.turret);
+  const gun = Duel.use((state) => state.protagonist.gun);
+
+  const tankModel = modelDefinitions.models[tank.id];
+  const turretModel = tankModel.turrets[turret.id];
+  const gunModel = turretModel.guns[gun.id];
+
+  const originZ = tankModel.turret_origin.z + turretModel.gun_origin.z;
+  const originY = tankModel.turret_origin.y + turretModel.gun_origin.y;
+
+  const { gltf } = useModel(tank.id);
+  const nodes = Object.values(gltf.nodes);
+
+  return (
+    <group position={[0, -originY, originZ]} rotation={[-Math.PI / 2, 0, 0]}>
+      {nodes.map((node) => {
+        const isCurrentMantlet =
+          node.name ===
+          `gun_${gunModel.model_id.toString().padStart(2, '0')}_mask`;
+        const isCurrentGun =
+          node.name === `gun_${gunModel.model_id.toString().padStart(2, '0')}`;
+        const isGun = isCurrentGun || isCurrentMantlet;
+
+        const isCurrentTurret =
+          node.name ===
+          `turret_${turretModel.model_id.toString().padStart(2, '0')}`;
+        const isTurret = isCurrentTurret;
+
+        const isHull = node.name === 'hull';
+        const isWheel = node.name.startsWith('chassis_wheel_');
+        const isTrack = node.name.startsWith('chassis_track_');
+        const isBody = isHull || isWheel || isTrack;
+
+        if (
+          (only === 'gun' && !isGun) ||
+          (only === 'turret' && !isTurret) ||
+          (only === 'body' && !isBody)
+        ) {
+          return null;
+        }
+
+        return jsxTree(node, {
+          mesh(mesh, props, key) {
+            return (
+              <>
+                <mesh key={key} {...props} material={surfaceMaterial[only]} />
+                <lineSegments material={outlineMaterial[only]}>
+                  <edgesGeometry args={[mesh.geometry, 29]} />
+                </lineSegments>
+              </>
+            );
+          },
+        });
+      })}
+    </group>
+  );
+}

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

@@ -0,0 +1,397 @@
+import { literals } from '@blitzkit/i18n';
+import { Box, Card, Flex } from '@radix-ui/themes';
+import { clamp } from 'lodash-es';
+import { useRef, useState } from 'react';
+import { degToRad, radToDeg } from 'three/src/math/MathUtils.js';
+import { awaitableModelDefinitions } from '../../../../../../../core/awaitables/modelDefinitions';
+import {
+  DEFAULT_PITCH_TRANSITION,
+  applyPitchYawLimits,
+} from '../../../../../../../core/blitz/applyPitchYawLimits';
+import { hasEquipment } from '../../../../../../../core/blitzkit/hasEquipment';
+import { modelTransformEvent } from '../../../../../../../core/blitzkit/modelTransform';
+import { Var } from '../../../../../../../core/radix/var';
+import { useLocale } from '../../../../../../../hooks/useLocale';
+import { Duel } from '../../../../../../../stores/duel';
+import type { MaybeSkeletonComponentProps } from '../../../../../../../types/maybeSkeletonComponentProps';
+import { VisualizerCard } from '../VisualizerCard';
+import { VisualizerCornerStat } from '../VisualizerCornerStat';
+import { FlexibilityCanvas } from './components/FlexibilityCanvas';
+
+const ANGLE_COEFFICIENT = 1 / 10;
+
+const modelDefinition = await awaitableModelDefinitions;
+
+function mag(x: number) {
+  return (1 / Math.PI) * Math.atan(ANGLE_COEFFICIENT * x) + 1 / 2;
+}
+
+function magInverse(y: number): number {
+  return (1 / ANGLE_COEFFICIENT) * Math.tan(Math.PI * y - Math.PI / 2);
+}
+
+function c(thetaDeg: number, m = 1) {
+  const theta = thetaDeg * (Math.PI / 180);
+  return `${m * Math.cos(theta)} ${-m * Math.sin(theta)}`;
+}
+
+export function GunFlexibilityVisualizer({
+  skeleton,
+}: MaybeSkeletonComponentProps) {
+  const { strings } = useLocale();
+
+  const duelStore = Duel.useStore();
+  const tank = Duel.use((state) => state.protagonist.tank);
+  const turret = Duel.use((state) => state.protagonist.turret);
+  const gun = Duel.use((state) => state.protagonist.gun);
+
+  const tankModel = modelDefinition.models[tank.id];
+  const turretModel = tankModel.turrets[turret.id];
+  const gunModel = turretModel.guns[gun.id];
+
+  const [yaw, setYaw] = useState(0);
+  const [pitch, setPitch] = useState(0);
+  const [minPitch, setMinPitch] = useState(
+    -degToRad(gunModel.pitch.front?.max ?? gunModel.pitch.max),
+  );
+  const [maxPitch, setMaxPitch] = useState(
+    -degToRad(gunModel.pitch.front?.min ?? gunModel.pitch.min),
+  );
+
+  const container = useRef<HTMLDivElement>(null);
+  const highlighter = useRef<HTMLDivElement>(null);
+  const pointer = useRef<HTMLDivElement>(null);
+
+  const p = gunModel.pitch;
+  const y = turretModel.yaw;
+  const f = p.front;
+  const b = p.back;
+  const t = gunModel.pitch.transition ?? DEFAULT_PITCH_TRANSITION;
+
+  let d = '';
+
+  // right
+  const mo = mag(p.max);
+  if (y) {
+    d += `M 0 0`;
+    d += `L ${c(90 - y.max, mo)}`;
+  } else if (b) {
+    d += `M ${c(-90 + b.range / 2 + t, mo)}`;
+  } else {
+    d += `M ${c(-90, mo)}`;
+  }
+  if (f) {
+    d += `A ${mo} ${mo} 0 0 0 ${c(90 - f.range / 2 - t, mo)}`;
+  } else {
+    d += `A ${mo} ${mo} 0 0 0 ${c(90, mo)}`;
+  }
+
+  // front
+  if (f) {
+    const m = mag(f.max);
+    d += `L ${c(90 - f.range / 2, m)}`;
+    d += `A ${m} ${m} 0 0 0 ${c(90 + f.range / 2, m)}`;
+  }
+
+  // left
+  if (f) {
+    d += `L ${c(90 + f.range / 2 + t, mo)}`;
+  } else {
+    d += `L ${c(90, mo)}`;
+  }
+  if (y) {
+    d += `A ${mo} ${mo} 0 0 0 ${c(90 - y.min, mo)}`;
+  } else if (b) {
+    d += `A ${mo} ${mo} 0 0 0 ${c(-90 - b.range / 2 - t, mo)}`;
+  } else {
+    d += `A ${mo} ${mo} 0 0 0 ${c(-90, mo)}`;
+  }
+
+  // back
+  if (!y && b) {
+    const m = mag(b.max);
+    d += `L ${c(-90 - b.range / 2, m)}`;
+    d += `A ${m} ${m} 0 0 0 ${c(-90 + b.range / 2, m)}`;
+  }
+
+  d += `Z`;
+
+  // right
+  const mi = mag(p.min);
+  if (y) {
+    d += `M 0 0`;
+    d += `L ${c(90 - y.max, mi)}`;
+  } else if (b) {
+    d += `M ${c(-90 + b.range / 2 + t, mi)}`;
+  } else {
+    d += `M ${c(-90, mi)}`;
+  }
+  if (f) {
+    d += `A ${mi} ${mi} 0 0 0 ${c(90 - f.range / 2 - t, mi)}`;
+  } else {
+    d += `A ${mi} ${mi} 0 0 0 ${c(90, mi)}`;
+  }
+
+  // front
+  if (f) {
+    const m = mag(f.min);
+    d += `L ${c(90 - f.range / 2, m)}`;
+    d += `A ${m} ${m} 0 0 0 ${c(90 + f.range / 2, m)}`;
+  }
+
+  // left
+  if (f) {
+    d += `L ${c(90 + f.range / 2 + t, mi)}`;
+  } else {
+    d += `L ${c(90, mi)}`;
+  }
+  if (y) {
+    d += `A ${mi} ${mi} 0 0 0 ${c(90 - y.min, mi)}`;
+  } else if (b) {
+    d += `A ${mi} ${mi} 0 0 0 ${c(-90 - b.range / 2 - t, mi)}`;
+  } else {
+    d += `A ${mi} ${mi} 0 0 0 ${c(-90, mi)}`;
+  }
+
+  // back
+  if (!y && b) {
+    const m = mag(b.min);
+    d += `L ${c(-90 - b.range / 2, m)}`;
+    d += `A ${m} ${m} 0 0 0 ${c(-90 + b.range / 2, m)}`;
+  }
+
+  d += `Z`;
+
+  const r = mag(radToDeg(-pitch));
+  const dotX = r * Math.sin(yaw);
+  const dotY = r * Math.cos(yaw);
+
+  return (
+    <Flex direction="column-reverse" gap="0">
+      <Box mt="-3" px="2">
+        <Card variant="classic" style={{ height: '10rem' }}>
+          <Box
+            style={{
+              background: 'linear-gradient(var(--gray-1), var(--gray-3))',
+            }}
+            position="absolute"
+            width="100%"
+            height="100%"
+            top="0"
+            left="0"
+          >
+            {!skeleton && <FlexibilityCanvas />}
+
+            <Box
+              position="absolute"
+              width="100%"
+              height="100%"
+              top="0"
+              left="33%"
+              style={{
+                background: `conic-gradient(
+                  at 0 50%,
+                  
+                  transparent,
+                  transparent ${Math.PI / 2 - maxPitch}rad,
+
+                  ${Var('cyan-a4')} ${Math.PI / 2 - maxPitch}rad,
+                  ${Var('jade-a4')} ${Math.PI / 2 - minPitch}rad,
+
+                  transparent ${Math.PI / 2 - minPitch}rad,
+                  transparent 180deg
+                )`,
+              }}
+            />
+          </Box>
+        </Card>
+      </Box>
+
+      <VisualizerCard
+        ref={container}
+        style={{ touchAction: 'none' }}
+        onPointerMove={(event) => {
+          event.preventDefault();
+
+          if (!container.current || !highlighter.current || !pointer.current)
+            return;
+
+          const rect = container.current.getBoundingClientRect();
+          const u = event.clientX - rect.left - rect.width / 2;
+          const v = event.clientY - rect.top - rect.height / 2;
+          let yaw = Math.atan2(u, -v);
+
+          const {
+            equipmentMatrix,
+            tank: { equipment_preset },
+          } = duelStore.getState().protagonist;
+          const hasImprovedVerticalStabilizer = hasEquipment(
+            122,
+            equipment_preset,
+            equipmentMatrix,
+          );
+          const hasDownImprovedVerticalStabilizer = hasEquipment(
+            124,
+            equipment_preset,
+            equipmentMatrix,
+          );
+
+          const min = applyPitchYawLimits(
+            -Math.PI,
+            yaw,
+            p,
+            y,
+            hasImprovedVerticalStabilizer,
+            hasDownImprovedVerticalStabilizer,
+          );
+          const max = applyPitchYawLimits(
+            Math.PI,
+            yaw,
+            p,
+            y,
+            hasImprovedVerticalStabilizer,
+            hasDownImprovedVerticalStabilizer,
+          );
+
+          yaw = min[1];
+          let t = 2 * Math.sqrt((u / rect.width) ** 2 + (v / rect.height) ** 2);
+          t = clamp(t, 0, 1);
+          let pitch = degToRad(magInverse(-t));
+          pitch = clamp(pitch, min[0], max[0]);
+
+          setPitch(pitch);
+          setYaw(yaw);
+          setMinPitch(min[0]);
+          setMaxPitch(max[0]);
+
+          modelTransformEvent.dispatch({ pitch, yaw });
+        }}
+        mb="0"
+      >
+        <Box
+          ref={highlighter}
+          position="absolute"
+          top="0"
+          left="0"
+          width="100%"
+          height="100%"
+          style={{
+            borderRadius: Var('radius-2'),
+            overflow: 'hidden',
+          }}
+        >
+          <Box
+            width="100%"
+            height="100%"
+            style={{
+              opacity: 2 ** -3,
+              backgroundImage: `url(/assets/images/tankopedia/visualizers/ricochet/armor-hash.png)`,
+              boxShadow: 'inset 0 0 4rem 1rem black',
+            }}
+          />
+        </Box>
+
+        <svg
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: 'calc(100%)',
+            height: 'calc(100%)',
+          }}
+          viewBox="-1 -1 2 2"
+        >
+          <path
+            fillRule="evenodd"
+            fill="var(--gray-5)"
+            stroke="var(--gray-8)"
+            strokeWidth="1px"
+            vectorEffect="non-scaling-stroke"
+            d={d}
+          />
+
+          <path
+            stroke="var(--gray-10)"
+            fill="transparent"
+            strokeWidth="1px"
+            strokeDasharray="0.5rem 0.5rem"
+            vectorEffect="non-scaling-stroke"
+            d={`
+            M 0.5 0
+            A 0.5 0.5 0 1 1 -0.5 0
+            A 0.5 0.5 0 1 1 0.5 0
+            Z
+          `}
+          />
+        </svg>
+
+        <Box
+          ref={pointer}
+          position="absolute"
+          top="50%"
+          left="50%"
+          width="0"
+          height="0"
+          style={{
+            transform: `translate(-50%, -50%) rotate(${yaw + Math.PI}rad)`,
+          }}
+        >
+          <Box
+            width="1pt"
+            height="14rem"
+            style={{
+              borderRadius: Var('radius-1'),
+              background: `linear-gradient(${Var('gray-a11')}, ${Var('gray-a6')})`,
+              boxShadow:
+                'var(--white-a12) -0.25rem 0 1rem, var(--black-a12) 0.25rem 0 1rem',
+              transform: 'translateX(-50%)',
+            }}
+          />
+        </Box>
+
+        <Box
+          position="absolute"
+          left={`${50 * (dotX + 1)}%`}
+          bottom={`${50 * (dotY + 1)}%`}
+          width="0.25rem"
+          height="0.25rem"
+          style={{
+            borderRadius: '50%',
+            backgroundColor: Var('gray-12'),
+            transform: 'translate(-50%, 50%)',
+          }}
+        />
+
+        <VisualizerCornerStat
+          label={strings.website.tools.tankopedia.visualizers.flexibility.max}
+          value={literals(strings.common.units.deg, [
+            radToDeg(maxPitch).toFixed(0),
+          ])}
+          side="bottom-left"
+        />
+
+        <VisualizerCornerStat
+          label={strings.website.tools.tankopedia.visualizers.flexibility.min}
+          value={literals(strings.common.units.deg, [
+            radToDeg(minPitch).toFixed(0),
+          ])}
+          side="bottom-right"
+        />
+
+        <VisualizerCornerStat
+          label={strings.website.tools.tankopedia.visualizers.flexibility.pitch}
+          value={literals(strings.common.units.deg, [
+            radToDeg(pitch).toFixed(0),
+          ])}
+          side="top-left"
+        />
+
+        <VisualizerCornerStat
+          label={strings.website.tools.tankopedia.visualizers.flexibility.yaw}
+          value={literals(strings.common.units.deg, [radToDeg(yaw).toFixed(0)])}
+          side="top-right"
+        />
+      </VisualizerCard>
+    </Flex>
+  );
+}

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/InfoWithDelta.tsx

@@ -1,7 +1,7 @@
 import { createDefaultSkills } from '@blitzkit/core';
 import { Flex, Progress, Text } from '@radix-ui/themes';
 import { clamp } from 'lodash-es';
-import { useMemo, type ComponentProps, type ReactNode } from 'react';
+import { memo, useMemo, type ComponentProps, type ReactNode } from 'react';
 import { awaitableEquipmentDefinitions } from '../../../../../../core/awaitables/equipmentDefinitions';
 import { awaitableModelDefinitions } from '../../../../../../core/awaitables/modelDefinitions';
 import { awaitableProvisionDefinitions } from '../../../../../../core/awaitables/provisionDefinitions';
@@ -48,148 +48,142 @@ const [
   awaitableSkillDefinitions,
 ]);
 
-export function InfoWithDelta({
-  stats,
-  indent,
-  noRanking,
-  deltaType,
-  ...props
-}: InfoWithDeltaProps) {
-  const { strings } = useLocale();
-  const relativeAgainst = TankopediaEphemeral.use(
-    (state) => state.relativeAgainst,
-  );
-  const uhWhatDoICallThisVariable =
-    typeof props.value === 'function'
-      ? props.value(stats)!
-      : (stats[props.value] as number);
-  const delta = useDelta(uhWhatDoICallThisVariable);
-  const protagonistTank = Duel.use((state) => state.protagonist.tank);
-  const shellIndex = Duel.use((state) =>
-    state.protagonist.gun.gun_type!.value.base.shells.indexOf(
-      state.protagonist.shell,
-    ),
-  );
-  const equipmentMatrix = Duel.use(
-    (state) => state.protagonist.equipmentMatrix,
-  );
-  const others = useMemo(() => {
-    const defaultSkills = createDefaultSkills(skillDefinitions);
-
-    return Object.values(tankDefinitions.tanks)
-      .filter(
-        (tank) =>
-          (relativeAgainst === TankopediaRelativeAgainst.Class &&
-            tank.tier === protagonistTank.tier &&
-            tank.class === protagonistTank.class) ||
-          (relativeAgainst === TankopediaRelativeAgainst.Tier &&
-            tank.tier === protagonistTank.tier) ||
-          relativeAgainst === TankopediaRelativeAgainst.All,
-      )
-      .map((tank) => {
-        const thisTankModel = modelDefinitions.models[tank.id];
-        const member = tankToDuelMember(
-          tank,
-          thisTankModel,
-          provisionDefinitions,
-        );
-
-        if (member.gun.gun_type!.value.base.shells[shellIndex] === undefined) {
-          return undefined;
-        }
-
-        return tankCharacteristics(
-          {
-            applyDynamicArmor: false,
-            applyReactiveArmor: false,
-            applySpallLiner: false,
-            camouflage: member.camouflage,
-            consumables: member.consumables,
-            crewSkills: defaultSkills,
-            provisions: member.provisions,
-            engine: member.engine,
-            gun: member.gun,
-            equipmentMatrix: equipmentMatrix,
-            shell: member.gun.gun_type!.value.base.shells[shellIndex],
-            stockEngine: tank.engines[0],
-            stockGun: tank.turrets[0].guns[0],
-            stockTrack: tank.tracks[0],
-            stockTurret: tank.turrets[0],
-            tank,
-            track: member.track,
-            turret: member.turret,
-            assaultDistance: member.assaultDistance,
-          },
-          {
-            equipmentDefinitions,
-            provisionDefinitions,
-            tankModelDefinition: modelDefinitions.models[tank.id],
-          },
-        );
-      })
-      .filter((tank) => {
-        if (tank === undefined) return false;
-
-        const othersValue =
-          typeof props.value === 'function'
-            ? props.value(tank)!
-            : (tank[props.value] as number);
-
-        return othersValue !== undefined;
-      }) as TankCharacteristics[];
-  }, [relativeAgainst, shellIndex, equipmentMatrix]);
-  const betterTanks = others.filter((tank) => {
-    const othersValue =
+export const InfoWithDelta = memo<InfoWithDeltaProps>(
+  ({ stats, indent, noRanking, deltaType, ...props }) => {
+    const { strings } = useLocale();
+    const relativeAgainst = TankopediaEphemeral.use(
+      (state) => state.relativeAgainst,
+    );
+    const uhWhatDoICallThisVariable =
       typeof props.value === 'function'
-        ? props.value(tank)!
-        : (tank[props.value] as number);
+        ? props.value(stats)!
+        : (stats[props.value] as number);
+    const delta = useDelta(uhWhatDoICallThisVariable);
+    const protagonistTank = Duel.use((state) => state.protagonist.tank);
+    const shellIndex = Duel.use((state) =>
+      state.protagonist.gun.shells.indexOf(state.protagonist.shell),
+    );
+    const equipmentMatrix = Duel.use(
+      (state) => state.protagonist.equipmentMatrix,
+    );
+    const others = useMemo(() => {
+      const defaultSkills = createDefaultSkills(skillDefinitions);
 
-    if (othersValue === undefined) return false;
-    return deltaType === 'lowerIsBetter'
-      ? othersValue < uhWhatDoICallThisVariable
-      : othersValue > uhWhatDoICallThisVariable;
-  });
-  const goodness = (others.length - betterTanks.length) / others.length;
-  let color: ComponentProps<typeof Progress>['color'];
+      return Object.values(tankDefinitions.tanks)
+        .filter(
+          (tank) =>
+            (relativeAgainst === TankopediaRelativeAgainst.Class &&
+              tank.tier === protagonistTank.tier &&
+              tank.class === protagonistTank.class) ||
+            (relativeAgainst === TankopediaRelativeAgainst.Tier &&
+              tank.tier === protagonistTank.tier) ||
+            relativeAgainst === TankopediaRelativeAgainst.All,
+        )
+        .map((tank) => {
+          const member = tankToDuelMember(tank, provisionDefinitions);
 
-  if (goodness <= 0.25) color = 'red';
-  else if (goodness <= 0.5) color = 'orange';
-  else if (goodness <= 0.75) color = 'yellow';
-  else color = 'green';
+          if (member.gun.shells[shellIndex] === undefined) {
+            return undefined;
+          }
 
-  return (
-    <Flex direction="column">
-      <Info
-        deltaType={deltaType}
-        indent={indent}
-        {...props}
-        name={
-          'name' in props
-            ? props.name
-            : strings.website.tools.tankopedia.characteristics.values[
-                props.value
-              ]
-        }
-        delta={delta}
-      >
-        {uhWhatDoICallThisVariable}
-      </Info>
+          return tankCharacteristics(
+            {
+              applyDynamicArmor: false,
+              applyReactiveArmor: false,
+              applySpallLiner: false,
+              camouflage: member.camouflage,
+              consumables: member.consumables,
+              crewSkills: defaultSkills,
+              provisions: member.provisions,
+              engine: member.engine,
+              gun: member.gun,
+              equipmentMatrix: equipmentMatrix,
+              shell: member.gun.shells[shellIndex],
+              stockEngine: tank.engines[0],
+              stockGun: tank.turrets[0].guns[0],
+              stockTrack: tank.tracks[0],
+              stockTurret: tank.turrets[0],
+              tank,
+              track: member.track,
+              turret: member.turret,
+              assaultDistance: member.assaultDistance,
+            },
+            {
+              equipmentDefinitions,
+              provisionDefinitions,
+              tankModelDefinition: modelDefinitions.models[tank.id],
+            },
+          );
+        })
+        .filter((tank) => {
+          if (tank === undefined) return false;
 
-      {!noRanking && (
-        <Flex pl={indent ? '2' : '0'} align="center" gap="2" mb="2">
-          <Progress
-            variant="soft"
-            size="1"
-            value={goodness * 100}
-            color={color}
-            style={{ height: '0.125rem', opacity: 0.5 }}
-          />
+          const othersValue =
+            typeof props.value === 'function'
+              ? props.value(tank)!
+              : (tank[props.value] as number);
 
-          <Text color="gray" size="1">
-            {clamp(betterTanks.length + 1, 1, others.length)} / {others.length}
-          </Text>
-        </Flex>
-      )}
-    </Flex>
-  );
-}
+          return othersValue !== undefined;
+        }) as TankCharacteristics[];
+    }, [relativeAgainst, shellIndex, equipmentMatrix]);
+    const betterTanks = others.filter((tank) => {
+      const othersValue =
+        typeof props.value === 'function'
+          ? props.value(tank)!
+          : (tank[props.value] as number);
+
+      if (othersValue === undefined) return false;
+      return deltaType === 'lowerIsBetter'
+        ? othersValue < uhWhatDoICallThisVariable
+        : othersValue > uhWhatDoICallThisVariable;
+    });
+    const goodness = (others.length - betterTanks.length) / others.length;
+    let color: ComponentProps<typeof Progress>['color'];
+
+    if (goodness <= 0.25) color = 'red';
+    else if (goodness <= 0.5) color = 'orange';
+    else if (goodness <= 0.75) color = 'yellow';
+    else color = 'green';
+
+    return (
+      <Flex direction="column">
+        <Info
+          deltaType={deltaType}
+          indent={indent}
+          name={
+            'name' in props
+              ? props.name
+              : strings.website.tools.tankopedia.characteristics.values[
+                  props.value
+                ]
+          }
+          delta={delta}
+          {...props}
+        >
+          {uhWhatDoICallThisVariable}
+        </Info>
+
+        {!noRanking && (
+          <Flex pl={indent ? '2' : '0'} align="center" gap="2">
+            <Progress
+              variant="soft"
+              size="1"
+              value={goodness * 100}
+              color={color}
+              style={{ height: '0.125rem', opacity: 0.5 }}
+            />
+
+            <Text color="gray" size="1">
+              {clamp(betterTanks.length + 1, 1, others.length)} /{' '}
+              {others.length}
+            </Text>
+          </Flex>
+        )}
+      </Flex>
+    );
+  },
+
+  (a, b) =>
+    (typeof a.value === 'function' ? a.value(a.stats) : a.stats[a.value]) ===
+    (typeof b.value === 'function' ? b.value(b.stats) : b.stats[b.value]),
+);

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

@@ -40,7 +40,7 @@ export function Shell({ index, stats }: ShellProps & StatsAcceptorProps) {
       <Box
         left="50%"
         position="absolute"
-        ml="calc(25% + 2.5rem)"
+        ml="40%"
         width="1.25rem"
         height="1.25rem"
         style={{
@@ -70,11 +70,9 @@ export function Shell({ index, stats }: ShellProps & StatsAcceptorProps) {
             overflow: 'hidden',
             maskImage:
               'url(/assets/images/tankopedia/visualizers/reload/shell.png)',
-            // maskComposite: 'exclude',
             maskSize: 'contain',
             maskRepeat: 'no-repeat',
             maskPosition: 'center',
-            // background: 'red',
           }}
         >
           <Box

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

@@ -13,8 +13,8 @@ export function ShellBorder(props: ComponentProps<'svg'>) {
       <path
         d="M149.917 7.5L151.5 9.91406V50.085L149.917 52.5H134.674C133.504 51.6657 132.116 51.1813 130.673 51.1133L130.319 51.1045H93.085C91.8919 51.1046 90.7173 51.3895 89.6582 51.9336L89.4482 52.0459L88.6494 52.4883C48.806 52.0806 22.9344 39.046 11.1416 30C22.9344 20.954 48.806 7.91846 88.6494 7.51074L89.4482 7.9541C90.5611 8.57122 91.8125 8.89543 93.085 8.89551H130.319C131.888 8.89551 133.409 8.40216 134.674 7.5H149.917Z"
         stroke="currentColor"
-        stroke-width="15"
-        stroke-linejoin="round"
+        strokeWidth="15"
+        strokeLinejoin="round"
       />
     </svg>
   );

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/ReloadVisualizer/index.css

@@ -0,0 +1,21 @@
+#reload-visualizer-flash {
+  background: transparent;
+  transition-duration: 200ms;
+}
+
+#reload-visualizer-flash.go {
+  background: var(--white-a3);
+  transition: none;
+}
+
+.reload {
+  width: 65%;
+  height: 65%;
+  transition-duration: 200ms;
+}
+
+.reload.go {
+  width: 70%;
+  height: 70%;
+  transition: none;
+}

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

@@ -1,12 +1,17 @@
-import { type Datum, type Serie } from '@nivo/line';
-import { Box, Card, Code } from '@radix-ui/themes';
+import { DoubleArrowRightIcon } from '@radix-ui/react-icons';
+import { Box, Button, Code } from '@radix-ui/themes';
 import { times } from 'lodash-es';
 import { Quicklime, type QuicklimeCallback } from 'quicklime';
-import { useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import { Var } from '../../../../../../../core/radix/var';
+import { useLocale } from '../../../../../../../hooks/useLocale';
 import type { StatsAcceptorProps } from '../TraverseVisualizer';
+import { VisualizerCard } from '../VisualizerCard';
 import { Shell } from './components/Shell';
 import { Target } from './components/Target';
+import './index.css';
+
+const PRECISION = 2;
 
 export interface ReloadUpdateData {
   reload: number;
@@ -15,30 +20,31 @@ export interface ReloadUpdateData {
 
 export const reloadUpdate = new Quicklime<ReloadUpdateData>();
 
-const T = 60;
-
 export function ReloadVisualizer({ stats }: StatsAcceptorProps) {
+  const { strings } = useLocale();
+
   const reloadCircle = useRef<HTMLDivElement>(null);
   const reloadCore = useRef<HTMLDivElement>(null);
   const reloadGlow = useRef<HTMLDivElement>(null);
-  const dpmDisplay = useRef<HTMLSpanElement>(null);
+  const totalTime = useRef<HTMLSpanElement>(null);
+  const progressTime = useRef<HTMLSpanElement>(null);
+  const flash = useRef<HTMLDivElement>(null);
 
-  /**
-   * 3-shell gun example:
-   *
-   * 0-1: clip reload
-   * ~~~: shell shot
-   * 1-2: intra-clip
-   * ~~~: shell shot
-   * 2-3: intra-clip
-   * ~~~: shell shot & reset to 0
-   *
-   * intra-clip time = intraClip * (n - 1)
-   */
   const state = useRef(0);
-  const dpm = useRef(0);
-  const shotPool = useRef(new Set<number>());
-  const data = useRef<Serie[]>([{ id: 'value', data: [] }]);
+
+  const shoot = useCallback(() => {
+    flash.current?.classList.add('go');
+    reloadCircle.current?.classList.add('go');
+    reloadGlow.current?.classList.add('go');
+
+    void flash.current?.offsetWidth;
+    void reloadCircle.current?.offsetWidth;
+    void reloadGlow.current?.offsetWidth;
+
+    flash.current?.classList.remove('go');
+    reloadCircle.current?.classList.remove('go');
+    reloadGlow.current?.classList.remove('go');
+  }, []);
 
   useEffect(() => {
     let cancel = false;
@@ -46,40 +52,76 @@ export function ReloadVisualizer({ stats }: StatsAcceptorProps) {
     let lastState = state.current;
     const shellArray = new Array(stats.shells);
 
-    function shoot() {
-      shotPool.current.add(Date.now() / 1000);
-      dpm.current += stats.damage;
-    }
-
     function frame() {
-      if (!dpmDisplay.current) return;
+      if (!totalTime.current || !progressTime.current) return;
 
+      const reloadThreshold = stats.shellReloads
+        ? stats.shellReloads.length
+        : 1;
       const now = Date.now() / 1000;
       const dt = now - lastT;
       let reload;
       let shells;
 
-      shotPool.current.forEach((t) => {
-        if (now - t > 60) shotPool.current.delete(t);
-      });
+      if (state.current < reloadThreshold) {
+        const shellReload =
+          reloadThreshold === 1
+            ? stats.shellReload!
+            : stats.shellReloads![Math.floor(state.current)];
 
-      dpm.current = shotPool.current.size * stats.damage;
-      dpmDisplay.current.innerText = `${Math.round(dpm.current)}`;
-
-      if (state.current < 1) {
-        state.current = Math.min(1, state.current + dt / stats.shellReload!);
-        reload = state.current;
+        state.current = Math.min(
+          reloadThreshold,
+          state.current + dt / shellReload,
+        );
+        reload = state.current % 1;
         shells = shellArray.fill(reload);
 
-        if (state.current >= 1) shoot();
-      } else if (state.current < stats.shells) {
+        if (reloadThreshold > 1) {
+          shells = shells.map((_, index) =>
+            Math.max(0, state.current - shellArray.length + index + 1),
+          );
+        }
+
+        totalTime.current.innerHTML = shellReload.toFixed(PRECISION);
+        progressTime.current.innerHTML = ((1 - reload) * shellReload).toFixed(
+          PRECISION,
+        );
+
+        if (state.current >= reloadThreshold) shoot();
+      } else if (state.current < stats.shells + reloadThreshold - 1) {
+        let interval;
+
+        if (
+          stats.burstShells === 1 ||
+          Math.floor(state.current) % stats.burstShells === 0
+        ) {
+          interval = stats.intraClip!;
+        } else {
+          interval = stats.burstInterShell!;
+        }
+
         state.current = Math.min(
-          stats.shells,
-          state.current + dt / stats.intraClip!,
+          stats.shells + reloadThreshold,
+          state.current + dt / interval,
         );
-        shells = times(stats.shells, (index) => index > state.current - 1);
         reload = state.current % 1;
 
+        if (reloadThreshold > 1) {
+          shells = shellArray.map((_, index) =>
+            Math.max(
+              0,
+              Math.floor(index + 1 + reloadThreshold - state.current),
+            ),
+          );
+        } else {
+          shells = times(stats.shells, (index) => index > state.current - 1);
+        }
+
+        totalTime.current.innerHTML = interval.toFixed(PRECISION);
+        progressTime.current.innerHTML = ((1 - reload) * interval).toFixed(
+          PRECISION,
+        );
+
         if (lastState % 1 > state.current % 1) shoot();
       } else {
         state.current = 0;
@@ -93,15 +135,6 @@ export function ReloadVisualizer({ stats }: StatsAcceptorProps) {
 
       lastT = now;
       lastState = state.current;
-
-      (data.current[0].data as Datum[]).push({
-        x: now,
-        y: dpm.current / (stats.dpm + stats.damage),
-      });
-      (data.current[0].data as Datum[]).splice(
-        0,
-        data.current[0].data.findIndex((d) => now - (d.x as number) < T),
-      );
     }
 
     frame();
@@ -133,7 +166,7 @@ export function ReloadVisualizer({ stats }: StatsAcceptorProps) {
   }, []);
 
   return (
-    <Card variant="classic" mb="6" style={{ aspectRatio: '1 / 1' }}>
+    <VisualizerCard>
       <Box position="absolute" top="0" left="0" width="100%" height="100%">
         <Target />
 
@@ -154,8 +187,6 @@ export function ReloadVisualizer({ stats }: StatsAcceptorProps) {
         position="absolute"
         top="50%"
         left="50%"
-        width="12rem"
-        height="12rem"
         className="reload"
         ref={reloadGlow}
         style={{
@@ -170,8 +201,6 @@ export function ReloadVisualizer({ stats }: StatsAcceptorProps) {
         position="absolute"
         top="50%"
         left="50%"
-        width="12rem"
-        height="12rem"
         className="reload"
         ref={reloadCircle}
         style={{
@@ -219,14 +248,71 @@ export function ReloadVisualizer({ stats }: StatsAcceptorProps) {
         }}
       />
 
+      <Code
+        ref={progressTime}
+        size="2"
+        variant="ghost"
+        weight="bold"
+        color="gray"
+        highContrast
+        style={{
+          position: 'absolute',
+          top: '50%',
+          right: 'calc(50% + var(--space-8))',
+          transform: 'translate(50%, -50%)',
+        }}
+      >
+        0.00
+      </Code>
+      <Code
+        ref={totalTime}
+        size="2"
+        variant="ghost"
+        weight="bold"
+        color="gray"
+        style={{
+          position: 'absolute',
+          top: '50%',
+          left: 'calc(50% + var(--space-8))',
+          transform: 'translate(-50%, -50%)',
+        }}
+      >
+        0.00
+      </Code>
+
       {stats.shells > 1 &&
         times(stats.shells, (index) => (
           <Shell stats={stats} index={index} key={index} />
         ))}
 
-      <Box position="absolute" right="3" bottom="3">
-        <Code ref={dpmDisplay}>0 dpm</Code>
-      </Box>
-    </Card>
+      <Box
+        id="reload-visualizer-flash"
+        ref={flash}
+        position="absolute"
+        top="0"
+        left="0"
+        width="100%"
+        height="100%"
+      />
+
+      <Button
+        size="1"
+        variant="outline"
+        color="gray"
+        highContrast
+        style={{
+          position: 'absolute',
+          top: '68%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+        }}
+        onClick={() => {
+          state.current = Math.floor(state.current + 1);
+        }}
+      >
+        {strings.website.tools.tankopedia.visualizers.reload.skip}
+        <DoubleArrowRightIcon />
+      </Button>
+    </VisualizerCard>
   );
 }

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

@@ -11,7 +11,7 @@ export function ShellSwitcher() {
 
   return (
     <Flex>
-      {gun.gun_type!.value.base.shells.map((thisShell, shellIndex) => {
+      {gun.shells.map((thisShell, shellIndex) => {
         const selected = thisShell.id === shell.id;
 
         return (
@@ -26,9 +26,7 @@ export function ShellSwitcher() {
                 borderBottomLeftRadius: shellIndex === 0 ? '50%' : 0,
                 borderTopRightRadius: 0,
                 borderBottomRightRadius:
-                  shellIndex === gun.gun_type!.value.base.shells.length - 1
-                    ? '50%'
-                    : 0,
+                  shellIndex === gun.shells.length - 1 ? '50%' : 0,
                 marginLeft: shellIndex === 0 ? 0 : -1,
               }}
               onClick={() => {

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

@@ -1,12 +1,14 @@
 import { asset, isExplosive } from '@blitzkit/core';
 import { literals } from '@blitzkit/i18n';
-import { Box, Card, Code, Flex, Text } from '@radix-ui/themes';
+import { Box, Flex, Text } from '@radix-ui/themes';
 import { useRef, useState } from 'react';
 import { clamp, degToRad, radToDeg } from 'three/src/math/MathUtils.js';
 import { Var } from '../../../../../../../core/radix/var';
 import { useLocale } from '../../../../../../../hooks/useLocale';
 import { Duel } from '../../../../../../../stores/duel';
 import type { StatsAcceptorProps } from '../TraverseVisualizer';
+import { VisualizerCard } from '../VisualizerCard';
+import { VisualizerCornerStat } from '../VisualizerCornerStat';
 import { ShellSwitcher } from './components/ShellSwitcher';
 
 export function RicochetVisualizer({ stats }: StatsAcceptorProps) {
@@ -26,13 +28,9 @@ export function RicochetVisualizer({ stats }: StatsAcceptorProps) {
 
   return (
     <Flex direction="column" mb="6" align="center">
-      <Card
-        variant="classic"
-        style={{
-          width: '100%',
-          aspectRatio: '1 / 1',
-          touchAction: 'none',
-        }}
+      <VisualizerCard
+        mb="0"
+        style={{ width: '100%' }}
         ref={container}
         onPointerMove={(event) => {
           if (!container.current || explodes) return;
@@ -73,23 +71,23 @@ export function RicochetVisualizer({ stats }: StatsAcceptorProps) {
           position="absolute"
           style={{
             background: `conic-gradient(
-            at 0 50%,
+              at 0 50%,
 
-            ${Var('ruby-a2')},
-            ${Var('ruby-a1')} ${Math.PI / 2 - ricochet}rad,
+              ${Var('ruby-a2')},
+              ${Var('ruby-a1')} ${Math.PI / 2 - ricochet}rad,
 
-            ${Var('jade-a2')} ${Math.PI / 2 - ricochet}rad,
-            ${Var('jade-a4')} ${Math.PI / 2 - normalization}rad,
+              ${Var('jade-a2')} ${Math.PI / 2 - ricochet}rad,
+              ${Var('jade-a4')} ${Math.PI / 2 - normalization}rad,
 
-            ${Var('cyan-a5')} ${Math.PI / 2 - normalization}rad,
-            ${Var('cyan-a3')} ${Math.PI / 2 + normalization}rad,
+              ${Var('cyan-a5')} ${Math.PI / 2 - normalization}rad,
+              ${Var('cyan-a3')} ${Math.PI / 2 + normalization}rad,
 
-            ${Var('jade-a2')} ${Math.PI / 2 + normalization}rad,
-            ${Var('jade-a4')} ${Math.PI / 2 + ricochet}rad,
+              ${Var('jade-a2')} ${Math.PI / 2 + normalization}rad,
+              ${Var('jade-a4')} ${Math.PI / 2 + ricochet}rad,
 
-            ${Var('ruby-a1')} ${Math.PI / 2 + ricochet}rad,
-            ${Var('ruby-a2')} 180deg
-          `,
+              ${Var('ruby-a1')} ${Math.PI / 2 + ricochet}rad,
+              ${Var('ruby-a2')} 180deg
+            `,
           }}
         />
 
@@ -160,85 +158,51 @@ export function RicochetVisualizer({ stats }: StatsAcceptorProps) {
           />
         </Box>
 
-        <Flex
-          style={{ userSelect: 'none' }}
-          gap="4"
-          position="absolute"
-          top="0"
-          left="0"
-          p="3"
-          width="100%"
-          justify="between"
-        >
-          <Flex gap="2">
-            <Text color="gray" size="1">
-              {strings.website.tools.tankopedia.visualizers.ricochet.angle}
-            </Text>
-            <Code size="1" variant="ghost">
-              {literals(strings.common.units.deg, [
-                radToDeg(Math.abs(angle)).toFixed(0),
-              ])}
-            </Code>
-          </Flex>
-
-          <Flex gap="2">
-            <Text color="gray" size="1">
-              {
-                strings.website.tools.tankopedia.visualizers.ricochet
-                  .normalization
-              }
-            </Text>
-            <Code size="1" variant="ghost">
-              {doesRicochet
-                ? '-'
-                : literals(strings.common.units.deg, [
-                    radToDeg(Math.min(normalization, Math.abs(angle))).toFixed(
-                      0,
-                    ),
-                  ])}
-            </Code>
-          </Flex>
-        </Flex>
-
-        <Flex
-          style={{ userSelect: 'none' }}
-          gap="4"
-          position="absolute"
-          bottom="0"
-          left="0"
-          p="3"
-          width="100%"
-          justify="between"
-        >
-          <Flex gap="2">
-            <Text color="gray" size="1">
-              {
-                strings.website.tools.tankopedia.visualizers.ricochet
-                  .effective_angle
-              }
-            </Text>
-            <Code size="1" variant="ghost">
-              {doesRicochet
-                ? '-'
-                : literals(strings.common.units.deg, [
-                    radToDeg(Math.abs(effectiveAngle)).toFixed(0),
-                  ])}
-            </Code>
-          </Flex>
-
-          <Flex gap="2">
-            <Text color="gray" size="1">
-              {strings.website.tools.tankopedia.visualizers.ricochet.armor}
-            </Text>
-            <Code size="1" variant="ghost">
-              {doesRicochet
-                ? '-'
-                : literals(strings.common.units.percentage, [
-                    armorPercentage.toFixed(0),
-                  ])}
-            </Code>
-          </Flex>
-        </Flex>
+        <VisualizerCornerStat
+          label={strings.website.tools.tankopedia.visualizers.ricochet.angle}
+          value={literals(strings.common.units.deg, [
+            radToDeg(Math.abs(angle)).toFixed(0),
+          ])}
+          side="top-left"
+        />
+        <VisualizerCornerStat
+          label={
+            strings.website.tools.tankopedia.visualizers.ricochet.normalization
+          }
+          value={
+            doesRicochet
+              ? '-'
+              : literals(strings.common.units.deg, [
+                  radToDeg(Math.min(normalization, Math.abs(angle))).toFixed(0),
+                ])
+          }
+          side="top-right"
+        />
+        <VisualizerCornerStat
+          label={
+            strings.website.tools.tankopedia.visualizers.ricochet
+              .effective_angle
+          }
+          value={
+            doesRicochet
+              ? '-'
+              : literals(strings.common.units.deg, [
+                  radToDeg(Math.abs(effectiveAngle)).toFixed(0),
+                ])
+          }
+          side="bottom-left"
+        />
+        <VisualizerCornerStat
+          label={strings.website.tools.tankopedia.visualizers.ricochet.armor}
+          value={
+            doesRicochet
+              ? '-'
+              : literals(strings.common.units.percentage, [
+                  armorPercentage.toFixed(0),
+                ])
+          }
+          side="bottom-right"
+        />
 
         {explodes && (
           <Flex
@@ -262,7 +226,7 @@ export function RicochetVisualizer({ stats }: StatsAcceptorProps) {
             </Text>
           </Flex>
         )}
-      </Card>
+      </VisualizerCard>
 
       <ShellSwitcher />
     </Flex>

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/StatSearch.tsx

@@ -10,7 +10,6 @@ export function StatSearch(props: FlexProps) {
   const { strings } = useLocale();
   const [searching, setSearching] = useState(false);
   const input = useRef<HTMLInputElement>(null);
-  const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
   const count = useRef<HTMLDivElement>(null);
   const [index, setIndex] = useState(0);
   const search = useCallback(() => {
@@ -34,14 +33,14 @@ export function StatSearch(props: FlexProps) {
         count.current.textContent = '';
 
         setSearching(false);
-        mutateTankopediaEphemeral((draft) => {
+        TankopediaEphemeral.mutate((draft) => {
           draft.statSearch = undefined;
         });
         return;
       }
 
       setSearching(false);
-      mutateTankopediaEphemeral((draft) => {
+      TankopediaEphemeral.mutate((draft) => {
         draft.statSearch = input.current!.value;
       });
     }, 500),

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

@@ -1,8 +1,9 @@
 import { literals } from '@blitzkit/i18n';
-import { Card, Checkbox, Code, Flex, Tabs, Text } from '@radix-ui/themes';
+import { Checkbox, Code, Flex, Tabs, Text } from '@radix-ui/themes';
 import { useEffect, useRef, useState } from 'react';
 import type { TankCharacteristics } from '../../../../../../../core/blitzkit/tankCharacteristics';
 import { useLocale } from '../../../../../../../hooks/useLocale';
+import { VisualizerCard } from '../VisualizerCard';
 
 export interface StatsAcceptorProps {
   stats: TankCharacteristics;
@@ -58,7 +59,7 @@ export function TraverseVisualizer({ stats }: StatsAcceptorProps) {
   }, [terrain, turretSpeedDeg, hullSpeedDeg]);
 
   return (
-    <Card variant="classic" style={{ aspectRatio: '1 / 1' }}>
+    <VisualizerCard>
       <div
         ref={hull}
         style={{
@@ -188,6 +189,6 @@ export function TraverseVisualizer({ stats }: StatsAcceptorProps) {
           </Flex>
         </Flex>
       )}
-    </Card>
+    </VisualizerCard>
   );
 }

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/VisualizerCard.tsx

@@ -0,0 +1,17 @@
+import { Card, type CardProps } from '@radix-ui/themes';
+import { forwardRef } from 'react';
+
+export const VisualizerCard = forwardRef<HTMLDivElement, CardProps>(
+  ({ style, ...props }, ref) => {
+    return (
+      <Card
+        ref={ref}
+        variant="classic"
+        mt="4"
+        mb="6"
+        style={{ aspectRatio: '1 / 1', ...style }}
+        {...props}
+      />
+    );
+  },
+);

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/VisualizerCornerStat.tsx

@@ -0,0 +1,29 @@
+import { Code, Flex, Text } from '@radix-ui/themes';
+
+interface Props {
+  label: string;
+  value: string;
+  side: `${'top' | 'bottom'}-${'left' | 'right'}`;
+}
+
+export function VisualizerCornerStat({ label, value, side }: Props) {
+  return (
+    <Flex
+      gap="2"
+      position="absolute"
+      top={side === 'top-left' || side === 'top-right' ? '3' : undefined}
+      bottom={
+        side === 'bottom-left' || side === 'bottom-right' ? '3' : undefined
+      }
+      left={side === 'top-left' || side === 'bottom-left' ? '3' : undefined}
+      right={side === 'top-right' || side === 'bottom-right' ? '3' : undefined}
+    >
+      <Text color="gray" size="1">
+        {label}
+      </Text>
+      <Code size="1" variant="ghost">
+        {value}
+      </Code>
+    </Flex>
+  );
+}

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

@@ -3,11 +3,13 @@ import { useEffect } from 'react';
 import { awaitableEquipmentDefinitions } from '../../../../../core/awaitables/equipmentDefinitions';
 import { awaitableProvisionDefinitions } from '../../../../../core/awaitables/provisionDefinitions';
 import { applyPitchYawLimits } from '../../../../../core/blitz/applyPitchYawLimits';
+import { modelTransformEvent } from '../../../../../core/blitzkit/modelTransform';
 import { tankCharacteristics } from '../../../../../core/blitzkit/tankCharacteristics';
 import { useEquipment } from '../../../../../hooks/useEquipment';
 import { useTankModelDefinition } from '../../../../../hooks/useTankModelDefinition';
 import { Duel } from '../../../../../stores/duel';
 import { TankopediaEphemeral } from '../../../../../stores/tankopediaEphemeral';
+import type { MaybeSkeletonComponentProps } from '../../../../../types/maybeSkeletonComponentProps';
 import { Crew } from './components/Crew';
 import { Firepower } from './components/Firepower';
 import { Maneuverability } from './components/Maneuverability';
@@ -18,8 +20,7 @@ const [equipmentDefinitions, provisionDefinitions] = await Promise.all([
   awaitableProvisionDefinitions,
 ]);
 
-export function Characteristics() {
-  const mutateDuel = Duel.useMutation();
+export function Characteristics({ skeleton }: MaybeSkeletonComponentProps) {
   const crewSkills = TankopediaEphemeral.use((state) => state.skills);
   const provisions = Duel.use((state) => state.protagonist.provisions);
   const consumables = Duel.use((state) => state.protagonist.consumables);
@@ -39,8 +40,7 @@ export function Characteristics() {
   const stockGun = stockTurret.guns[0];
   const tankModelDefinition = useTankModelDefinition();
   const turretModelDefinition = tankModelDefinition.turrets[turret.id];
-  const gunModelDefinition =
-    turretModelDefinition.guns[gun.gun_type!.value.base.id];
+  const gunModelDefinition = turretModelDefinition.guns[gun.id];
   const stats = tankCharacteristics(
     {
       tank,
@@ -74,16 +74,16 @@ export function Characteristics() {
   const hasDownImprovedVerticalStabilizer = useEquipment(124);
 
   useEffect(() => {
-    mutateDuel((draft) => {
-      [draft.protagonist.pitch, draft.protagonist.yaw] = applyPitchYawLimits(
-        draft.protagonist.pitch,
-        draft.protagonist.yaw,
-        gunModelDefinition.pitch,
-        turretModelDefinition.yaw,
-        hasImprovedVerticalStabilizer,
-        hasDownImprovedVerticalStabilizer,
-      );
-    });
+    const [pitch, yaw] = applyPitchYawLimits(
+      modelTransformEvent.last!.pitch,
+      modelTransformEvent.last!.yaw,
+      gunModelDefinition.pitch,
+      turretModelDefinition.yaw,
+      hasImprovedVerticalStabilizer,
+      hasDownImprovedVerticalStabilizer,
+    );
+
+    modelTransformEvent.dispatch({ pitch, yaw });
   }, [hasImprovedVerticalStabilizer, hasDownImprovedVerticalStabilizer]);
 
   return (
@@ -93,7 +93,7 @@ export function Characteristics() {
       align={{ initial: 'center', sm: 'start' }}
       width={{ initial: '100%', sm: 'auto' }}
     >
-      <Firepower stats={stats} />
+      <Firepower skeleton={skeleton} stats={stats} />
 
       <Flex
         gap="8"

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

@@ -33,7 +33,7 @@ type ModuleDefinition =
 
 function extractModule(raw: ModuleDefinition | TankDefinition) {
   if ('gun_type' in raw) {
-    return raw.gun_type!.value.base;
+    return raw;
   } else
     return raw as Exclude<ModuleDefinition | TankDefinition, GunDefinition>;
 }
@@ -179,37 +179,31 @@ export function Modules() {
 
         if (
           !draft.protagonist.turret.guns.some(
-            (gun) =>
-              gun.gun_type!.value.base.id ===
-              draft.protagonist.gun.gun_type!.value.base.id,
+            (gun) => gun.id === draft.protagonist.gun.id,
           )
         ) {
           draft.protagonist.gun = draft.protagonist.turret.guns.at(-1)!;
-          draft.protagonist.shell =
-            draft.protagonist.gun.gun_type!.value.base.shells[0];
+          draft.protagonist.shell = draft.protagonist.gun.shells[0];
         }
       } else if (unlock.type === ModuleType.GUN) {
         const gunInTurret = draft.protagonist.turret.guns.find(
-          (gun) => gun.gun_type!.value.base.id === unlock.id,
+          (gun) => gun.id === unlock.id,
         );
         if (gunInTurret) {
           draft.protagonist.gun = gunInTurret;
-          draft.protagonist.shell = gunInTurret.gun_type!.value.base.shells[0];
+          draft.protagonist.shell = gunInTurret.shells[0];
         } else {
           // TODO: warn somehow?
           const suitableTurret = draft.protagonist.tank.turrets.find((turret) =>
-            turret.guns.some(
-              (gun) => gun.gun_type!.value.base.id === unlock.id,
-            ),
+            turret.guns.some((gun) => gun.id === unlock.id),
           )!;
           const gunInSuitableTurret = suitableTurret.guns.find(
-            (gun) => gun.gun_type!.value.base.id === unlock.id,
+            (gun) => gun.id === unlock.id,
           )!;
 
           draft.protagonist.turret = suitableTurret;
           draft.protagonist.gun = gunInSuitableTurret;
-          draft.protagonist.shell =
-            gunInSuitableTurret.gun_type!.value.base.shells[0];
+          draft.protagonist.shell = gunInSuitableTurret.shells[0];
         }
       } else if (unlock.type === ModuleType.ENGINE) {
         draft.protagonist.engine = draft.protagonist.tank.engines.find(
@@ -241,11 +235,9 @@ export function Modules() {
           } else if (unlock.type === ModuleType.GUN) {
             module = tank.turrets
               .find((turret) =>
-                turret.guns.some(
-                  (gun) => gun.gun_type!.value.base.id === unlock.id,
-                ),
+                turret.guns.some((gun) => gun.id === unlock.id),
               )!
-              .guns.find((gun) => gun.gun_type!.value.base.id === unlock.id)!;
+              .guns.find((gun) => gun.id === unlock.id)!;
           } else if (unlock.type === ModuleType.VEHICLE) {
             module = tankDefinitions.tanks[unlock.id];
           }
@@ -308,7 +300,7 @@ export function Modules() {
                   (unlock.type === ModuleType.TURRET
                     ? turret.id
                     : unlock.type === ModuleType.GUN
-                      ? gun.gun_type!.value.base.id
+                      ? gun.id
                       : unlock.type === ModuleType.ENGINE
                         ? engine.id
                         : unlock.type === ModuleType.TRACKS
@@ -319,8 +311,7 @@ export function Modules() {
                   unlock.type === ModuleType.TURRET
                     ? extractModule(module).id == topTurret.id
                     : unlock.type === ModuleType.GUN
-                      ? extractModule(module).id ===
-                        topGun.gun_type!.value.base.id
+                      ? extractModule(module).id === topGun.id
                       : unlock.type === ModuleType.ENGINE
                         ? extractModule(module).id === topEngine.id
                         : unlock.type === ModuleType.TRACKS
@@ -371,8 +362,7 @@ export function Modules() {
                 mutateDuel((draft) => {
                   draft.protagonist.turret = draft.protagonist.tank.turrets[0];
                   draft.protagonist.gun = draft.protagonist.turret.guns[0];
-                  draft.protagonist.shell =
-                    draft.protagonist.gun.gun_type!.value.base.shells[0];
+                  draft.protagonist.shell = draft.protagonist.gun.shells[0];
                   draft.protagonist.engine = draft.protagonist.tank.engines[0];
                   draft.protagonist.track = draft.protagonist.tank.tracks[0];
                 });
@@ -387,8 +377,7 @@ export function Modules() {
                   draft.protagonist.turret =
                     draft.protagonist.tank.turrets.at(-1)!;
                   draft.protagonist.gun = draft.protagonist.turret.guns.at(-1)!;
-                  draft.protagonist.shell =
-                    draft.protagonist.gun.gun_type!.value.base.shells[0];
+                  draft.protagonist.shell = draft.protagonist.gun.shells[0];
                   draft.protagonist.engine =
                     draft.protagonist.tank.engines.at(-1)!;
                   draft.protagonist.track =
@@ -427,7 +416,7 @@ export function Modules() {
         {tree(ModuleType.GUN, [
           {
             cost: { type: 'xp', value: 0 },
-            id: gun0.gun_type!.value.base.id,
+            id: gun0.id,
             type: ModuleType.GUN,
           },
         ])}

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

@@ -14,7 +14,6 @@ import { ConfigurationChildWrapper } from './ConfigurationChildWrapper';
 
 export function Skills() {
   const skillLevels = TankopediaEphemeral.use((state) => state.skills);
-  const mutateTankopediaTemporary = TankopediaEphemeral.useMutation();
   const { strings } = useLocale();
 
   return (
@@ -46,7 +45,7 @@ export function Skills() {
           variant="ghost"
           color="red"
           onClick={() => {
-            mutateTankopediaTemporary((draft) => {
+            TankopediaEphemeral.mutate((draft) => {
               Object.keys(draft.skills).forEach((skill) => {
                 draft.skills[skill] = 0;
               });
@@ -58,7 +57,7 @@ export function Skills() {
         <Button
           variant="ghost"
           onClick={() => {
-            mutateTankopediaTemporary((draft) => {
+            TankopediaEphemeral.mutate((draft) => {
               Object.keys(draft.skills).forEach((skill) => {
                 draft.skills[skill] = 7;
               });
@@ -72,7 +71,7 @@ export function Skills() {
       <CrewSkillManager
         skillLevels={skillLevels}
         onChange={(skills) => {
-          mutateTankopediaTemporary((draft) => {
+          TankopediaEphemeral.mutate((draft) => {
             draft.skills = skills;
           });
         }}

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

@@ -1,4 +1,5 @@
 import { Flex } from '@radix-ui/themes';
+import type { MaybeSkeletonComponentProps } from '../../../types/maybeSkeletonComponentProps';
 import { Characteristics } from './components/Characteristics';
 import { CompareOptions } from './components/Characteristics/components/CompareOptions';
 import { StatSearch } from './components/Characteristics/components/StatSearch';
@@ -9,7 +10,9 @@ import { Modules } from './components/Modules';
 import { Provisions } from './components/Provisions';
 import { Skills } from './components/Skills';
 
-export function CharacteristicsSection() {
+export function CharacteristicsSection({
+  skeleton,
+}: MaybeSkeletonComponentProps) {
   return (
     <Flex direction="column" gap="3">
       <Flex
@@ -64,7 +67,7 @@ export function CharacteristicsSection() {
               <CompareOptions />
             </Flex>
 
-            <Characteristics />
+            <Characteristics skeleton={skeleton} />
           </Flex>
         </Flex>
       </Flex>

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

@@ -0,0 +1,66 @@
+import { CaretRightIcon } from '@radix-ui/react-icons';
+import { Box, Flex, Link, Text } from '@radix-ui/themes';
+import { Var } from '../../../core/radix/var';
+import type { TankGuide } from '../../../pages/[...locale]/tanks/[slug]/index.astro';
+
+interface Props {
+  guide: TankGuide;
+}
+
+export function GuideSection({ guide }: Props) {
+  return (
+    <Flex justify="center">
+      <Link
+        color="gray"
+        href={guide.url}
+        underline="none"
+        highContrast
+        style={{
+          display: 'flex',
+          maxWidth: '35rem',
+          flexDirection: 'column',
+          gap: Var('space-4'),
+        }}
+      >
+        <Flex maxWidth="35rem" direction="column" gap="4">
+          <Flex direction="column" gap="4" position="relative">
+            <Text size="4" weight="medium">
+              <Flex width="100%" justify="start" align="center" gap="2">
+                <img
+                  style={{
+                    width: '1.5em',
+                    height: '1.5em',
+                    objectFit: 'contain',
+                  }}
+                  src="https://guidesblitz.com/wp-content/uploads/2023/11/cropped-logo-1.png"
+                />
+                GuidesBlitz
+              </Flex>
+            </Text>
+
+            <Text size="2">{guide.description}</Text>
+            <img style={{ width: '100%' }} src={guide.image} />
+
+            <Box
+              position="absolute"
+              bottom="0"
+              width="100%"
+              height="100%"
+              left="0"
+              style={{
+                background: `linear-gradient(${Var('gray-a1')}, ${Var('gray-1')})`,
+              }}
+            />
+          </Flex>
+
+          <Text color="purple">
+            <Flex width="100%" justify="center" align="center" gap="1">
+              Read the full guide
+              <CaretRightIcon width="1em" height="1em" />
+            </Flex>
+          </Text>
+        </Flex>
+      </Link>
+    </Flex>
+  );
+}

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

@@ -20,7 +20,6 @@ export function CustomShellButton() {
   const customShell = TankopediaEphemeral.use((state) => state.customShell);
   const gun = Duel.use((state) => state.protagonist.gun);
   const antagonistShell = Duel.use((state) => state.antagonist.shell);
-  const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
   const { strings } = useLocale();
 
   return (
@@ -28,7 +27,7 @@ export function CustomShellButton() {
       onOpenChange={(open) => {
         if (!open || customShell) return;
 
-        mutateTankopediaEphemeral((draft) => {
+        TankopediaEphemeral.mutate((draft) => {
           draft.customShell = antagonistShell;
         });
       }}
@@ -90,14 +89,14 @@ export function CustomShellButton() {
                         modified.normalization = undefined;
                         modified.ricochet = undefined;
                         modified.explosion_radius =
-                          gun.gun_type!.value.base.shells.find(
+                          gun.shells.find(
                             (shell) => shell.type === ShellType.HE,
                           )?.explosion_radius ?? 1;
                         break;
                       }
                     }
 
-                    mutateTankopediaEphemeral((draft) => {
+                    TankopediaEphemeral.mutate((draft) => {
                       draft.customShell = modified;
                     });
                   }}
@@ -134,7 +133,7 @@ export function CustomShellButton() {
                   defaultValue={customShell.caliber}
                   type="number"
                   onChange={(event) => {
-                    mutateTankopediaEphemeral((draft) => {
+                    TankopediaEphemeral.mutate((draft) => {
                       draft.customShell!.caliber = event.target.valueAsNumber;
                     });
                   }}
@@ -170,7 +169,7 @@ export function CustomShellButton() {
                   defaultValue={customShell.penetration.near}
                   type="number"
                   onChange={(event: ChangeEvent<HTMLInputElement>) => {
-                    mutateTankopediaEphemeral((draft) => {
+                    TankopediaEphemeral.mutate((draft) => {
                       draft.customShell!.penetration.near =
                         event.target.valueAsNumber;
                     });
@@ -226,7 +225,7 @@ export function CustomShellButton() {
                         onValueChange={([value]) => {
                           console.log('asd');
 
-                          mutateTankopediaEphemeral((draft) => {
+                          TankopediaEphemeral.mutate((draft) => {
                             draft.customShell!.normalization = value;
                           });
                         }}
@@ -255,7 +254,7 @@ export function CustomShellButton() {
                         step={Number.EPSILON}
                         defaultValue={[customShell.ricochet ?? 90]}
                         onValueChange={throttle(([value]) => {
-                          mutateTankopediaEphemeral((draft) => {
+                          TankopediaEphemeral.mutate((draft) => {
                             draft.customShell!.ricochet = value;
                           });
                         }, 1000)}
@@ -274,7 +273,7 @@ export function CustomShellButton() {
                     defaultValue={customShell.explosion_radius ?? 0}
                     type="number"
                     onChange={(event: ChangeEvent<HTMLInputElement>) => {
-                      mutateTankopediaEphemeral((draft) => {
+                      TankopediaEphemeral.mutate((draft) => {
                         draft.customShell!.explosion_radius =
                           event.target.valueAsNumber;
                       });
@@ -310,7 +309,7 @@ export function CustomShellButton() {
               <Button
                 color="red"
                 onClick={() => {
-                  mutateTankopediaEphemeral((draft) => {
+                  TankopediaEphemeral.mutate((draft) => {
                     draft.customShell = antagonistShell;
                   });
                 }}

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

@@ -7,7 +7,6 @@ import { TankopediaEphemeral } from '../../../../../../stores/tankopediaEphemera
 export function DynamicArmorSwitcher() {
   const tank = Duel.use((state) => state.protagonist.tank);
   const mutateDuel = Duel.useMutation();
-  const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
   const isDynamicArmorActive = Duel.use((state) =>
     state.protagonist.consumables.includes(73),
   );
@@ -33,7 +32,7 @@ export function DynamicArmorSwitcher() {
             }
           }
         });
-        mutateTankopediaEphemeral((draft) => {
+        TankopediaEphemeral.mutate((draft) => {
           draft.shot = undefined;
         });
       }}

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

@@ -1,5 +1,6 @@
 import { HeightIcon, WidthIcon } from '@radix-ui/react-icons';
 import { Flex, TextField } from '@radix-ui/themes';
+import type { QuicklimeEvent } from 'quicklime';
 import { useEffect, useRef } from 'react';
 import { degToRad, radToDeg } from 'three/src/math/MathUtils.js';
 import { applyPitchYawLimits } from '../../../../../../../core/blitz/applyPitchYawLimits';
@@ -13,46 +14,32 @@ import { Duel } from '../../../../../../../stores/duel';
 import './index.css';
 
 export function QuickInputs() {
-  const mutateDuel = Duel.useMutation();
   const protagonist = Duel.use((state) => state.protagonist);
   const yawInput = useRef<HTMLInputElement>(null);
   const pitchInput = useRef<HTMLInputElement>(null);
   const tankModelDefinition = useTankModelDefinition();
   const turretModelDefinition =
     tankModelDefinition.turrets[protagonist.turret.id];
-  const gunModelDefinition =
-    turretModelDefinition.guns[protagonist.gun.gun_type!.value.base.id];
+  const gunModelDefinition = turretModelDefinition.guns[protagonist.gun.id];
   const initialGunPitch =
     tankModelDefinition.initial_turret_rotation?.pitch ?? 0;
   const hasImprovedVerticalStabilizer = useEquipment(122);
   const hasDownImprovedVerticalStabilizer = useEquipment(124);
 
   useEffect(() => {
-    if (!yawInput.current) return;
-
-    yawInput.current.value = radToDeg(protagonist.yaw).toFixed(1);
-  }, [protagonist.yaw]);
-
-  useEffect(() => {
-    if (!pitchInput.current) return;
-
-    pitchInput.current.value = (
-      -radToDeg(protagonist.pitch) + initialGunPitch
-    ).toFixed(1);
-  }, [protagonist.pitch]);
-
-  useEffect(() => {
-    function handleTransformEvent({ pitch, yaw }: ModelTransformEventData) {
+    function handleTransformEvent(
+      event: QuicklimeEvent<ModelTransformEventData>,
+    ) {
       if (!pitchInput.current || !yawInput.current) return;
 
       pitchInput.current.value = (
-        -radToDeg(pitch) +
+        -radToDeg(event.data.pitch) +
         (tankModelDefinition.initial_turret_rotation?.pitch ?? 0)
       ).toFixed(1);
 
-      if (yaw === undefined) return;
+      if (event.data.yaw === undefined) return;
 
-      yawInput.current.value = radToDeg(yaw).toFixed(1);
+      yawInput.current.value = radToDeg(event.data.yaw).toFixed(1);
     }
 
     modelTransformEvent.on(handleTransformEvent);
@@ -85,24 +72,27 @@ export function QuickInputs() {
         defaultValue="0.0"
         onBlur={() => {
           const value = Number(yawInput.current!.value);
+
           if (isNaN(value)) {
-            yawInput.current!.value = radToDeg(protagonist.yaw).toFixed(1);
+            yawInput.current!.value = radToDeg(
+              modelTransformEvent.last!.yaw,
+            ).toFixed(1);
             return;
           }
+
           const [pitch, yaw] = applyPitchYawLimits(
-            protagonist.pitch,
+            modelTransformEvent.last!.pitch,
             degToRad(value),
             gunModelDefinition.pitch,
             turretModelDefinition.yaw,
             hasImprovedVerticalStabilizer,
             hasDownImprovedVerticalStabilizer,
           );
-          modelTransformEvent.emit({ pitch, yaw });
-          mutateDuel((state) => {
-            state.protagonist.pitch = pitch;
-            state.protagonist.yaw = yaw;
-          });
-          yawInput.current!.value = radToDeg(protagonist.yaw).toFixed(1);
+
+          modelTransformEvent.dispatch({ pitch, yaw });
+          yawInput.current!.value = radToDeg(
+            modelTransformEvent.last!.yaw,
+          ).toFixed(1);
         }}
         onKeyDown={(event) => {
           if (event.key === 'Enter') {
@@ -128,25 +118,21 @@ export function QuickInputs() {
           const value = Number(pitchInput.current!.value);
           if (isNaN(value)) {
             pitchInput.current!.value = (
-              -radToDeg(protagonist.pitch) + initialGunPitch
+              -radToDeg(modelTransformEvent.last!.pitch) + initialGunPitch
             ).toFixed(1);
             return;
           }
           const [pitch, yaw] = applyPitchYawLimits(
             degToRad(-value + initialGunPitch),
-            protagonist.yaw,
+            modelTransformEvent.last!.yaw,
             gunModelDefinition.pitch,
             turretModelDefinition.yaw,
             hasImprovedVerticalStabilizer,
             hasDownImprovedVerticalStabilizer,
           );
-          modelTransformEvent.emit({ pitch, yaw });
-          mutateDuel((state) => {
-            state.protagonist.pitch = pitch;
-            state.protagonist.yaw = yaw;
-          });
+          modelTransformEvent.dispatch({ pitch, yaw });
           pitchInput.current!.value = (
-            -radToDeg(protagonist.pitch) + initialGunPitch
+            -radToDeg(modelTransformEvent.last!.pitch) + initialGunPitch
           ).toFixed(1);
         }}
         onKeyDown={(event) => {

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

@@ -26,9 +26,7 @@ export function Thicknesses({ thicknessRange, skeleton }: ThicknessesProps) {
     (state) => state.showPrimaryArmor,
   );
   const mutateTankopediaPersistent = TankopediaPersistent.useMutation();
-  const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
   const editStatic = TankopediaEphemeral.use((state) => state.editStatic);
-  const tankopediaEphemeralStore = TankopediaEphemeral.useStore();
   const { strings } = useLocale();
 
   return (
@@ -55,7 +53,7 @@ export function Thicknesses({ thicknessRange, skeleton }: ThicknessesProps) {
             mutateTankopediaPersistent((draft) => {
               draft.showPrimaryArmor = !draft.showPrimaryArmor;
             });
-            mutateTankopediaEphemeral((draft) => {
+            TankopediaEphemeral.mutate((draft) => {
               draft.highlightArmor = undefined;
             });
           }}
@@ -96,7 +94,7 @@ export function Thicknesses({ thicknessRange, skeleton }: ThicknessesProps) {
             mutateTankopediaPersistent((draft) => {
               draft.showSpacedArmor = !draft.showSpacedArmor;
             });
-            mutateTankopediaEphemeral((draft) => {
+            TankopediaEphemeral.mutate((draft) => {
               draft.highlightArmor = undefined;
             });
           }}
@@ -135,7 +133,7 @@ export function Thicknesses({ thicknessRange, skeleton }: ThicknessesProps) {
             mutateTankopediaPersistent((draft) => {
               draft.showExternalModules = !draft.showExternalModules;
             });
-            mutateTankopediaEphemeral((draft) => {
+            TankopediaEphemeral.mutate((draft) => {
               draft.highlightArmor = undefined;
             });
           }}
@@ -168,7 +166,7 @@ export function Thicknesses({ thicknessRange, skeleton }: ThicknessesProps) {
             gap="2"
             style={{ cursor: 'pointer' }}
             onClick={() => {
-              mutateTankopediaEphemeral((draft) => {
+              TankopediaEphemeral.mutate((draft) => {
                 draft.editStatic = !draft.editStatic;
                 draft.highlightArmor = undefined;
               });
@@ -186,9 +184,9 @@ export function Thicknesses({ thicknessRange, skeleton }: ThicknessesProps) {
           size="1"
           variant="ghost"
           onClick={() => {
-            mutateTankopediaEphemeral((draft) => {
+            TankopediaEphemeral.mutate((draft) => {
               draft.editStatic = false;
-              draft.model = tankopediaEphemeralStore.getInitialState().model;
+              draft.model = TankopediaEphemeral.initial.model;
             });
           }}
         >