feat: some changes to lighting... again

* 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

@@ -167,6 +167,7 @@
     "searchtanks",
     "SHAREDEXP",
     "SKLLD",
+    "smoothstep",
     "Smri",
     "Specularity",
     "SSAO",
@@ -222,11 +223,7 @@
     "yolo",
     "youtuber",
     "youtubers",
-    "zustand"
+    "zoomable"
   ],
-  "deno.enable": false,
+  "typescript.tsdk": "node_modules\\typescript\\lib"
-  "deno.unstable": false,
-  "cSpell.enableFiletypes": ["glsl", "proto3"],
-  "typescript.tsdk": "node_modules\\typescript\\lib",
-  "liveServer.settings.multiRootWorkspaceName": "blitzkit"
 }

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 &&
+                gun.research_cost !== undefined &&
-                typeof gun.gun_type!.value.base.research_cost
+                typeof gun.research_cost.research_cost_type!.value === 'number'
-                  .research_cost_type!.value === 'number'
               ) {
-                gunXps.set(
+                gunXps.set(gun.id, gun.research_cost.research_cost_type!.value);
-                  gun.gun_type!.value.base.id,
-                  gun.gun_type!.value.base.research_cost.research_cost_type!
-                    .value,
-                );
               }
             });
           });

packages/bot/src/core/streams/wotbreplay.ts

@@ -1,8 +1,8 @@
-import { ReadStream } from '@blitzkit/core';
+import { ReadStream } from "@blitzkit/core";
-import AdmZip from 'adm-zip';
+import AdmZip from "adm-zip";
-import { readFile, writeFile } from 'fs/promises';
+import { readFile } from "fs/promises";
-import { Parser } from 'pickleparser';
+import { Parser } from "pickleparser";
-import protobuf from 'protobufjs';
+import protobuf from "protobufjs";
 
 interface WotbReplayMetaJson {
   version: string;
@@ -24,26 +24,24 @@ export class WotbReplayReadStream extends ReadStream {
   async wotbReplay() {
     const pickleParser = new Parser();
     const zip = new AdmZip(Buffer.from(this.buffer));
-    const metaJsonBuffer = zip.getEntry('meta.json')?.getData();
+    const metaJsonBuffer = zip.getEntry("meta.json")?.getData();
-    const battleResultsDat = zip.getEntry('battle_results.dat')?.getData();
+    const battleResultsDat = zip.getEntry("battle_results.dat")?.getData();
 
     if (!metaJsonBuffer || !battleResultsDat)
-      throw new SyntaxError('meta.json not found');
+      throw new SyntaxError("meta.json not found");
 
     const metaJson = JSON.parse(
-      metaJsonBuffer.toString(),
+      metaJsonBuffer.toString()
     ) as WotbReplayMetaJson;
     const unpickledBattleResults = pickleParser.parse(battleResultsDat);
     const [, battleResultsString] = unpickledBattleResults as [number, string];
     const root = await protobuf.load(
-      `${__dirname}/../../protos/BattleResultsClient.proto`,
+      `${__dirname}/../../protos/BattleResultsClient.proto`
     );
     const BattleResults = root.lookupType(
-      'BattleResultsGenerated.BattleResultsClient',
+      "BattleResultsGenerated.BattleResultsClient"
     );
 
-    writeFile('test.dat', Buffer.from(battleResultsString));
-
     const reader = protobuf.Reader.create(Buffer.from(battleResultsString));
 
     // const decodedBattleResults = BattleResults.decodeDelimited(
@@ -53,7 +51,7 @@ export class WotbReplayReadStream extends ReadStream {
   }
 }
 
-const replay = await readFile('temp/test3.wotbreplay');
+const replay = await readFile("temp/test3.wotbreplay");
 const stream = new WotbReplayReadStream(replay.buffer as ArrayBuffer);
 
 stream.wotbReplay();

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 =
+    const damage = alpha * gun.gun_type!.value.shell_count;
-      (alpha * gun.gun_type!.value.extension.shell_count) /
+    let time = gun.gun_type!.value.clip_reload * reloadCoefficient;
-      (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);
 
-        if (current === null || reload < current.reload) {
+    if (gun.burst) {
-          return { index, reload };
+      time +=
-        }
+        (gun.gun_type!.value.shell_count / gun.burst.count - 1) *
-        return current;
+        gun.gun_type!.value.intra_clip *
-      }, null)!;
+        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)) {
+      if (!gunIds.has(gun.id)) {
-        gunIds.add(gun.gun_type!.value.base.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 {
+message Burst {
-  required GunDefinitionBase base = 1;
+  required uint32 count = 1;
-  required GunDefinitionAutoReloaderProperties extension = 2;
+  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",
+            "dev_wireframe": "DEV: wireframe"
-            "environment": "Environment",
-            "show_grid": "Show grid"
           },
 
           "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",
+            "shellReloads": "Reloads",
-            "shellReload": "Shell reload",
+            "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",
+            "shellReloads": "Reloads",
-            "shellReload": "Tiempo de recarga",
+            "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",
+            "shellReloads": "Reloads",
-            "shellReload": "Shell reload",
+            "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",
+            "shellReloads": "Reloads",
-            "shellReload": "Shell reload",
+            "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",
+            "shellReloads": "Reloads",
-            "shellReload": "Recarregamento de projétil",
+            "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",
+            "shellReloads": "Reloads",
-            "shellReload": "Shell reload",
+            "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": "弹匣装填",
+            "shellReloads": "Reloads",
-            "shellReload": "炮弹装填",
+            "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;
+              burst:
-
+                gun.burst && gun.burst.count > 1
-            tankDefinitions.tanks[tankId].turrets[turretIndex].guns.push({
+                  ? {
+                      count: gun.burst.count,
+                      interval: 60 / gun.burst.rate,
+                    }
+                  : undefined,
               gun_type:
                 gunType === 'regular'
                   ? {
                       $case: 'regular',
                       value: {
-                        base,
+                        reload: gun.reloadTime,
-                        extension: { reload: gun.reloadTime },
                       },
                     }
                   : gunType === 'autoReloader'
                     ? {
                         $case: 'auto_reloader',
                         value: {
-                          base,
+                          intra_clip: 60 / gun.clip!.rate,
-                          extension: {
+                          shell_count: gunClipCount,
-                            intra_clip: 60 / gun.clip!.rate,
+                          shell_reloads: gun
-                            shell_count: gunClipCount,
+                            .pumpGunReloadTimes!.split(' ')
-                            shell_reloads: gun
+                            .map(Number),
-                              .pumpGunReloadTimes!.split(' ')
-                              .map(Number),
-                          },
                         },
                       }
                     : {
                         $case: 'auto_loader',
                         value: {
-                          base,
+                          intra_clip: 60 / gun.clip!.rate,
-                          extension: {
+                          clip_reload: gun.reloadTime,
-                            intra_clip: 60 / gun.clip!.rate,
+                          shell_count: gunClipCount,
-                            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.research_cost = gunXps.get(gunRaw.id);
-            gunRaw.gun_type!.value.base!.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,49 +1,52 @@
-import { toUniqueId } from '@blitzkit/core';
+import { toUniqueId } from "@blitzkit/core";
-import { NodeIO } from '@gltf-transform/core';
+import { NodeIO } from "@gltf-transform/core";
-import { ALL_EXTENSIONS } from '@gltf-transform/extensions';
+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 { extractModel } from "../core/blitz/extractModel";
-import { readXMLDVPL } from '../core/blitz/readXMLDVPL';
+import { readXMLDVPL } from "../core/blitz/readXMLDVPL";
-import { readYAMLDVPL } from '../core/blitz/readYAMLDVPL';
+import { readYAMLDVPL } from "../core/blitz/readYAMLDVPL";
-import { commitAssets } from '../core/github/commitAssets';
+import { commitAssets } from "../core/github/commitAssets";
-import { FileChange } from '../core/github/commitMultipleFiles';
+import { FileChange } from "../core/github/commitMultipleFiles";
-import { DATA } from './constants';
+import { DATA } from "./constants";
-import { VehicleDefinitionList } from './definitions';
+import { VehicleDefinitionList } from "./definitions";
-import { TankParameters } from './tankIcons';
+import { TankParameters } from "./tankIcons";
 
 export async function tankModels() {
-  console.log('Building tank models...');
+  console.log("Building tank models...");
 
   const nodeIO = new NodeIO().registerExtensions(ALL_EXTENSIONS);
   const nations = await readdir(`${DATA}/XML/item_defs/vehicles`).then(
-    (nations) => nations.filter((nation) => nation !== 'common'),
+    (nations) => nations.filter((nation) => nation !== "common")
   );
 
   for (const nationIndex in nations) {
     const nation = nations[nationIndex];
     const changes: FileChange[] = [];
     const tanks = await readXMLDVPL<{ root: VehicleDefinitionList }>(
-      `${DATA}/XML/item_defs/vehicles/${nation}/list.xml`,
+      `${DATA}/XML/item_defs/vehicles/${nation}/list.xml`
     );
+    const entries = Object.entries(tanks.root);
 
     console.log(`Building models for ${nation}`);
 
-    for (const [tankKey, tank] of Object.entries(tanks.root)) {
+    let index = 0;
-      if (tankKey.includes('tutorial_bot')) continue;
+    for (const [tankKey, tank] of entries) {
+      console.log(`  ${++index} / ${entries.length} : ${tankKey}`);
+
+      if (tankKey.includes("tutorial_bot")) continue;
 
       const id = toUniqueId(nation, tank.id);
+
       const parameters = await readYAMLDVPL<TankParameters>(
-        `${DATA}/3d/Tanks/Parameters/${nation}/${tankKey}.yaml`,
+        `${DATA}/3d/Tanks/Parameters/${nation}/${tankKey}.yaml`
       );
       const model = await extractModel(
         DATA,
-        parameters.resourcesPath.blitzModelPath.replace(/\.sc2$/, ''),
+        parameters.resourcesPath.blitzModelPath.replace(/\.sc2$/, "")
       );
+      const content = Buffer.from(await nodeIO.writeBinary(model));
 
-      changes.push({
+      changes.push({ path: `3d/tanks/models/${id}.glb`, content });
-        path: `3d/tanks/models/${id}.glb`,
-        content: Buffer.from(await nodeIO.writeBinary(model)),
-      });
     }
 
     await commitAssets(`tank models ${nation}`, changes);

packages/scripts/src/core/blitz/extractModel/constants.ts

@@ -1,13 +1,13 @@
-import { VertexAttribute, vertexAttributeVectorSizes } from '@blitzkit/core';
+import { VertexAttribute, vertexAttributeVectorSizes } from "@blitzkit/core";
 
 export const vertexAttributeGLTFName: Partial<Record<VertexAttribute, string>> =
   {
-    [VertexAttribute.VERTEX]: 'POSITION',
+    [VertexAttribute.VERTEX]: "POSITION",
-    [VertexAttribute.NORMAL]: 'NORMAL',
+    [VertexAttribute.NORMAL]: "NORMAL",
-    [VertexAttribute.TEXCOORD0]: 'TEXCOORD_0',
+    [VertexAttribute.TEXCOORD0]: "TEXCOORD_0",
-    [VertexAttribute.TEXCOORD1]: 'TEXCOORD_0',
+    [VertexAttribute.TEXCOORD1]: "TEXCOORD_1",
-    [VertexAttribute.TEXCOORD2]: 'TEXCOORD_0',
+    [VertexAttribute.TEXCOORD2]: "TEXCOORD_2",
-    [VertexAttribute.TEXCOORD3]: 'TEXCOORD_0',
+    [VertexAttribute.TEXCOORD3]: "TEXCOORD_3",
   };
 export const vertexAttributeGltfVectorSizes = {
   ...vertexAttributeVectorSizes,

packages/scripts/src/core/blitz/extractModel/index.ts

@@ -4,35 +4,35 @@ import {
   ScgReadStream,
   Textures,
   VertexAttribute,
-} from '@blitzkit/core';
+} from "@blitzkit/core";
-import { Document, Material, Node, Scene } from '@gltf-transform/core';
+import { Document, Material, Node, Scene } from "@gltf-transform/core";
-import { dedup, prune } from '@gltf-transform/functions';
+import { dedup, prune } from "@gltf-transform/functions";
-import { times } from 'lodash-es';
+import { times } from "lodash-es";
-import { dirname } from 'path';
+import { dirname } from "path";
-import { Matrix4, Quaternion, Vector3, Vector4Tuple } from 'three';
+import { readBaseColor } from "../readBaseColor";
-import { readDVPLFile } from '../readDVPLFile';
+import { readDVPLFile } from "../readDVPLFile";
-import { readTexture } from '../readTexture';
+import { readNormal } from "../readNormal";
-import { TextureMutation } from '../readTexture/constants';
+import { readRoughnessMetallic } from "../readRoughnessMetallic";
 import {
   vertexAttributeGLTFName,
   vertexAttributeGltfVectorSizes,
-} from './constants';
+} from "./constants";
 
 const ERROR_ON_UNKNOWN_COMPONENT = false;
 
 const omitMeshNames = {
-  start: ['chassis_chassis_', 'chassis_track_crash_', 'HP_'],
+  start: ["chassis_chassis_", "chassis_track_crash_", "HP_"],
-  end: ['_POINT'],
+  end: ["_POINT"],
 };
 
 export async function extractModel(data: string, path: string) {
   const sc2Path = `${data}/3d/${path}.sc2`;
   const scgPath = `${data}/3d/${path}.scg`;
   const sc2 = new Sc2ReadStream(
-    (await readDVPLFile(sc2Path)).buffer as ArrayBuffer,
+    (await readDVPLFile(sc2Path)).buffer as ArrayBuffer
   ).sc2();
   const scg = new ScgReadStream(
-    (await readDVPLFile(scgPath)).buffer as ArrayBuffer,
+    (await readDVPLFile(scgPath)).buffer as ArrayBuffer
   ).scg();
   const document = new Document();
   const scene = document.createScene();
@@ -41,8 +41,8 @@ export async function extractModel(data: string, path: string) {
 
   // create materials
   await Promise.all(
-    sc2['#dataNodes'].map(async (node) => {
+    sc2["#dataNodes"].map(async (node) => {
-      const id = new DataView(node['#id']).getBigUint64(0, true);
+      const id = new DataView(node["#id"]).getBigUint64(0, true);
 
       if (node.parentMaterialKey !== undefined) {
         /**
@@ -58,7 +58,7 @@ export async function extractModel(data: string, path: string) {
 
       if (node.textures) {
         textures = node.textures;
-      } else if (typeof node.configCount === 'number') {
+      } else if (typeof node.configCount === "number") {
         textures = node.configArchive_0.textures;
       }
 
@@ -66,26 +66,27 @@ export async function extractModel(data: string, path: string) {
         material.setBaseColorTexture(
           document
             .createTexture(node.materialName)
-            .setMimeType('image/jpeg')
+            .setMimeType("image/jpeg")
             .setImage(
-              await readTexture(
+              await readBaseColor(
-                `${data}/3d/${dirname(path)}/${textures.albedo}`,
+                `${data}/3d/${dirname(path)}/${textures.baseColorMap ?? textures.albedo}`,
-                TextureMutation.Albedo,
+                textures.miscMap
-              ),
+                  ? `${data}/3d/${dirname(path)}/${textures.miscMap}`
-            ),
+                  : undefined
+              )
+            )
         );
 
         if (textures.baseRMMap) {
           material.setMetallicRoughnessTexture(
             document
               .createTexture(node.materialName)
-              .setMimeType('image/jpeg')
+              .setMimeType("image/jpeg")
               .setImage(
-                await readTexture(
+                await readRoughnessMetallic(
-                  `${data}/3d/${dirname(path)}/${textures.baseRMMap}`,
+                  `${data}/3d/${dirname(path)}/${textures.baseRMMap}`
-                  TextureMutation.RoughnessMetallicness,
+                )
-                ),
+              )
-              ),
           );
         }
 
@@ -95,47 +96,33 @@ export async function extractModel(data: string, path: string) {
           material.setNormalTexture(
             document
               .createTexture(node.materialName)
-              .setMimeType('image/jpeg')
+              .setMimeType("image/jpeg")
               .setImage(
-                await readTexture(
+                await readNormal(
                   `${data}/3d/${dirname(path)}/${
                     textures.baseNormalMap ?? textures.normalmap
                   }`,
-                  isBase ? TextureMutation.Normal : undefined,
+                  isBase
-                ),
+                )
-              ),
+              )
-          );
-        }
-
-        if (textures.miscMap) {
-          material.setOcclusionTexture(
-            document
-              .createTexture(node.materialName)
-              .setMimeType('image/jpeg')
-              .setImage(
-                await readTexture(
-                  `${data}/3d/${dirname(path)}/${textures.miscMap}`,
-                  TextureMutation.Miscellaneous,
-                ),
-              ),
           );
         }
 
         materials.set(
-          new DataView(node['#id']).getBigUint64(0, true),
+          new DataView(node["#id"]).getBigUint64(0, true),
-          material,
+          material
         );
       }
-    }),
+    })
   );
 
   // replace children materials with parents
   materials.forEach((material, id) => {
-    if (typeof material !== 'bigint') return;
+    if (typeof material !== "bigint") return;
 
     let resolvedMaterial: Material | bigint | undefined = material;
 
-    while (typeof resolvedMaterial === 'bigint') {
+    while (typeof resolvedMaterial === "bigint") {
       const linkedParentMaterial = materials.get(resolvedMaterial);
 
       resolvedMaterial = linkedParentMaterial;
@@ -155,36 +142,36 @@ export async function extractModel(data: string, path: string) {
       const node = document.createNode(hierarchy.name);
       const components = times(
         hierarchy.components.count,
-        (index) => hierarchy.components[index.toString().padStart(4, '0')],
+        (index) => hierarchy.components[index.toString().padStart(4, "0")]
       );
 
       components.forEach((component) => {
-        switch (component['comp.typename']) {
+        switch (component["comp.typename"]) {
-          case 'LodComponent':
+          case "LodComponent":
             // found and used later by transform component
             // TODO: lod component always shows up before transform component; cache it before parsing transform
             break;
 
-          case 'TransformComponent': {
+          case "TransformComponent": {
-            node.setTranslation(component['tc.localTranslation']);
+            node.setTranslation(component["tc.localTranslation"]);
-            node.setRotation(component['tc.localRotation']);
+            node.setRotation(component["tc.localRotation"]);
-            node.setScale(component['tc.localScale']);
+            node.setScale(component["tc.localScale"]);
 
             break;
           }
 
-          case 'RenderComponent': {
+          case "RenderComponent": {
-            const renderObject = component['rc.renderObj'];
+            const renderObject = component["rc.renderObj"];
 
-            times(renderObject['ro.batchCount'], (batchIndex): void => {
+            times(renderObject["ro.batchCount"], (batchIndex): void => {
               const lodIndex = renderObject[`rb${batchIndex}.lodIndex`];
 
               if (lodIndex !== 0) return;
 
-              const batchKey = batchIndex.toString().padStart(4, '0');
+              const batchKey = batchIndex.toString().padStart(4, "0");
-              const batch = renderObject['ro.batches'][batchKey];
+              const batch = renderObject["ro.batches"][batchKey];
-              const material = materials.get(batch['rb.nmatname']);
+              const material = materials.get(batch["rb.nmatname"]);
-              const polygonGroup = scg.get(batch['rb.datasource']);
+              const polygonGroup = scg.get(batch["rb.datasource"]);
 
               if (!(material instanceof Material)) {
                 // probably shadow material
@@ -192,14 +179,14 @@ export async function extractModel(data: string, path: string) {
               }
               if (polygonGroup === undefined) {
                 throw new Error(
-                  `Missing polygon group ${batch['rb.datasource']}`,
+                  `Missing polygon group ${batch["rb.datasource"]}`
                 );
               }
 
               const lodNode = document.createNode(batchKey);
               const indicesAccessor = document
                 .createAccessor()
-                .setType('SCALAR')
+                .setType("SCALAR")
                 .setArray(new Uint16Array(polygonGroup.indices))
                 .setBuffer(buffer);
               const primitive = document
@@ -233,7 +220,7 @@ export async function extractModel(data: string, path: string) {
                 const vertexSize = vertexAttributeGltfVectorSizes[attribute];
                 const attributeAccessor = document
                   .createAccessor(name)
-                  .setType(vertexSize === 1 ? 'SCALAR' : `VEC${vertexSize}`)
+                  .setType(vertexSize === 1 ? "SCALAR" : `VEC${vertexSize}`)
                   .setArray(new Float32Array(value.flat()))
                   .setBuffer(buffer);
 
@@ -241,7 +228,7 @@ export async function extractModel(data: string, path: string) {
               });
 
               const mesh = document
-                .createMesh(batch['##name'])
+                .createMesh(batch["##name"])
                 .addPrimitive(primitive);
               lodNode.setMesh(mesh);
               node.addChild(lodNode);
@@ -253,24 +240,24 @@ export async function extractModel(data: string, path: string) {
           default: {
             if (ERROR_ON_UNKNOWN_COMPONENT) {
               throw new Error(
-                `Unhandled component type: ${component['comp.typename']}`,
+                `Unhandled component type: ${component["comp.typename"]}`
               );
             }
           }
         }
       });
 
-      if (hierarchy['#hierarchy']) {
+      if (hierarchy["#hierarchy"]) {
-        parseHierarchies(hierarchy['#hierarchy'], node);
+        parseHierarchies(hierarchy["#hierarchy"], node);
       }
 
       parent.addChild(node);
     });
   }
 
-  parseHierarchies(sc2['#hierarchy'], scene);
+  parseHierarchies(sc2["#hierarchy"], scene);
 
-  scene.addChild(document.createNode('test'));
+  scene.addChild(document.createNode("test"));
 
   await document.transform(prune({ keepAttributes: true }), dedup());
 

packages/scripts/src/core/blitz/readBaseColor.ts

@@ -0,0 +1,48 @@
+import sharp from "sharp";
+import { readTexture } from "./readTexture";
+
+export async function readBaseColor(path: string, occlusionPath?: string) {
+  const baseRaw = await readTexture(path);
+  const occlusionRaw = occlusionPath
+    ? await readTexture(occlusionPath)
+    : undefined;
+  const base = await sharp(baseRaw.data, { raw: baseRaw })
+    .removeAlpha()
+    .raw()
+    .toBuffer();
+  const occlusion = occlusionRaw
+    ? await sharp(occlusionRaw.data, { raw: occlusionRaw })
+        .extractChannel(3)
+        .raw()
+        .toBuffer()
+    : undefined;
+
+  const combined = Buffer.alloc(baseRaw.width * baseRaw.height * 3);
+
+  for (let i = 0; i < baseRaw.width * baseRaw.height; i++) {
+    let c = 1;
+
+    if (occlusionRaw) {
+      const x = i % baseRaw.width;
+      const y = Math.floor(i / baseRaw.width);
+      const u = Math.floor(x * (occlusionRaw.width / baseRaw.width));
+      const v = Math.floor(y * (occlusionRaw.height / baseRaw.height));
+
+      const occlusionI = u + v * occlusionRaw.width;
+
+      c = occlusion![occlusionI] / 255;
+    }
+
+    combined[i * 3 + 0] = Math.round(base[i * 3 + 0] * c);
+    combined[i * 3 + 1] = Math.round(base[i * 3 + 1] * c);
+    combined[i * 3 + 2] = Math.round(base[i * 3 + 2] * c);
+  }
+
+  const image = await sharp(combined, {
+    raw: { width: baseRaw.width, height: baseRaw.height, channels: 3 },
+  })
+    .jpeg()
+    .toBuffer();
+
+  return image;
+}

packages/scripts/src/core/blitz/readNormal.ts

@@ -0,0 +1,29 @@
+import sharp from "sharp";
+import { readTexture } from "./readTexture";
+
+export async function readNormal(path: string, isBase: boolean) {
+  const raw = await readTexture(path);
+
+  if (!isBase) {
+    return await sharp(raw.data, { raw }).removeAlpha().jpeg().toBuffer();
+  }
+
+  const bytes = 4 * raw.width * raw.height;
+
+  for (let index = 0; index < bytes; index += 4) {
+    /**
+     * Red is always 255 and blue is always 0. Only alpha and green contain any
+     * sort of information.
+     */
+    let x = raw.data[index + 3] * (2 / 255) - 1;
+    let y = raw.data[index + 1] * (2 / 255) - 1;
+    let z = Math.sqrt(Math.max(0, 1 - x ** 2 - y ** 2));
+
+    raw.data[index] = Math.round((x + 1) * (255 / 2));
+    raw.data[index + 1] = Math.round((y + 1) * (255 / 2));
+    raw.data[index + 2] = Math.round((z + 1) * (255 / 2));
+    raw.data[index + 3] = 255;
+  }
+
+  return await sharp(raw.data, { raw }).jpeg().toBuffer();
+}

packages/scripts/src/core/blitz/readRoughnessMetallic.ts

@@ -0,0 +1,24 @@
+import sharp from "sharp";
+import { readTexture } from "./readTexture";
+
+export async function readRoughnessMetallic(path: string) {
+  const raw = await readTexture(path);
+  const blitz = sharp(raw.data, { raw: raw });
+  const metallicness = await blitz?.extractChannel(1).raw().toBuffer();
+  const roughness = await blitz?.extractChannel(3).raw().toBuffer();
+
+  const combined = Buffer.alloc(raw.width * raw.height * 3);
+
+  for (let i = 0; i < raw.width * raw.height; i++) {
+    combined[i * 3 + 1] = roughness[i];
+    combined[i * 3 + 2] = metallicness[i];
+  }
+
+  const image = await sharp(combined, {
+    raw: { width: raw.width, height: raw.height, channels: 3 },
+  })
+    .jpeg()
+    .toBuffer();
+
+  return image;
+}

packages/scripts/src/core/blitz/readTexture/index.ts

@@ -1,81 +1,83 @@
-import { DdsReadStream, PvrReadStream } from '@blitzkit/core';
+import { DdsReadStream, PvrReadStream } from "@blitzkit/core";
-import { existsSync } from 'fs';
+import { existsSync } from "fs";
-import sharp from 'sharp';
+import sharp from "sharp";
-import { DATA_COMPRESSED } from '../../../buildAssets/constants';
+import { DATA_COMPRESSED } from "../../../buildAssets/constants";
-import { readDVPLFile } from '../readDVPLFile';
+import { readDVPLFile } from "../readDVPLFile";
-import { TextureMutation } from './constants';
+import { TextureMutation } from "./constants";
 
-export async function readTexture(path: string, mutation?: TextureMutation) {
+export async function readTexture(path: string) {
-  const ddsTexturePath = path.replace('.tex', '.dx11.dds');
+  const ddsTexturePath = path.replace(".tex", ".dx11.dds");
   const isDds = existsSync(
-    `${ddsTexturePath}${DATA_COMPRESSED ? '.dvpl' : ''}`,
+    `${ddsTexturePath}${DATA_COMPRESSED ? ".dvpl" : ""}`
   );
   const resolvedTexturePath = isDds
     ? ddsTexturePath
-    : ddsTexturePath.replace('.dds', '.pvr');
+    : ddsTexturePath.replace(".dds", ".pvr");
   const decompressedDvpl = await readDVPLFile(`${resolvedTexturePath}.dvpl`);
 
   const raw = isDds
     ? await new DdsReadStream(decompressedDvpl.buffer as ArrayBuffer).dds()
     : new PvrReadStream(decompressedDvpl.buffer as ArrayBuffer).pvr();
 
-  switch (mutation) {
+  return raw;
-    case TextureMutation.Normal: {
-      const bytes = 4 * raw.width * raw.height;
-      for (let index = 0; index < bytes; index += 4) {
-        /**
-         * Red is always 255 and blue is always 0. Only alpha and green contain any
-         * sort of information.
-         */
-        let x = raw.data[index + 3] * (2 / 255) - 1;
-        let y = raw.data[index + 1] * (2 / 255) - 1;
-        const underSqrt = 1 - x ** 2 - y ** 2;
-        let z = underSqrt > 0 ? Math.sqrt(underSqrt) : -Math.sqrt(-underSqrt);
 
-        raw.data[index] = Math.round((x + 1) * (255 / 2));
+  // switch (mutation) {
-        raw.data[index + 1] = Math.round((y + 1) * (255 / 2));
+  //   case TextureMutation.Normal: {
-        raw.data[index + 2] = Math.round((z + 1) * (255 / 2));
+  //     const bytes = 4 * raw.width * raw.height;
-        raw.data[index + 3] = 255;
+  //     for (let index = 0; index < bytes; index += 4) {
-      }
+  //       /**
+  //        * Red is always 255 and blue is always 0. Only alpha and green contain any
+  //        * sort of information.
+  //        */
+  //       let x = raw.data[index + 3] * (2 / 255) - 1;
+  //       let y = raw.data[index + 1] * (2 / 255) - 1;
+  //       const underSqrt = 1 - x ** 2 - y ** 2;
+  //       let z = underSqrt > 0 ? Math.sqrt(underSqrt) : -Math.sqrt(-underSqrt);
 
-      return await sharp(raw.data, { raw }).jpeg().toBuffer();
+  //       raw.data[index] = Math.round((x + 1) * (255 / 2));
-    }
+  //       raw.data[index + 1] = Math.round((y + 1) * (255 / 2));
+  //       raw.data[index + 2] = Math.round((z + 1) * (255 / 2));
+  //       raw.data[index + 3] = 255;
+  //     }
 
-    case TextureMutation.RoughnessMetallicness: {
+  //     return await sharp(raw.data, { raw }).jpeg().toBuffer();
-      const newImage = sharp(Buffer.alloc(raw.width * raw.height), {
+  //   }
-        raw: { ...raw, channels: 1 },
-      });
-      const metallicness = sharp(raw.data, { raw })
-        .extractChannel('green')
-        .jpeg()
-        .toBuffer();
-      const roughness = sharp(raw.data, { raw })
-        .extractChannel('alpha')
-        .jpeg()
-        .toBuffer();
 
-      return await newImage
+  //   case TextureMutation.RoughnessMetallicness: {
-        .joinChannel(await Promise.all([roughness, metallicness]))
+  //     const newImage = sharp(Buffer.alloc(raw.width * raw.height), {
-        .jpeg()
+  //       raw: { ...raw, channels: 1 },
-        .toBuffer();
+  //     });
-    }
+  //     const metallicness = sharp(raw.data, { raw })
+  //       .extractChannel("green")
+  //       .jpeg()
+  //       .toBuffer();
+  //     const roughness = sharp(raw.data, { raw })
+  //       .extractChannel("alpha")
+  //       .jpeg()
+  //       .toBuffer();
 
-    case TextureMutation.Miscellaneous: {
+  //     return await newImage
-      /**
+  //       .joinChannel(await Promise.all([roughness, metallicness]))
-       * Alpha is ambient occlusion and green is emissive. But very few tanks
+  //       .jpeg()
-       * use emissive so I am ignoring it for now.
+  //       .toBuffer();
-       */
+  //   }
-      return await sharp(raw.data, { raw })
-        .extractChannel('alpha')
-        .jpeg()
-        .toBuffer();
-    }
 
-    case TextureMutation.Albedo: {
+  //   case TextureMutation.Miscellaneous: {
-      return await sharp(raw.data, { raw }).removeAlpha().jpeg().toBuffer();
+  //     /**
-    }
+  //      * Alpha is ambient occlusion and green is emissive. But very few tanks
+  //      * use emissive so I am ignoring it for now.
+  //      */
+  //     return await sharp(raw.data, { raw })
+  //       .extractChannel("alpha")
+  //       .jpeg()
+  //       .toBuffer();
+  //   }
 
-    default:
+  //   case TextureMutation.Albedo: {
-      return await sharp(raw.data, { raw }).jpeg().toBuffer();
+  //     return await sharp(raw.data, { raw }).removeAlpha().jpeg().toBuffer();
-  }
+  //   }
+
+  //   default:
+  //     return await sharp(raw.data, { raw }).jpeg().toBuffer();
+  // }
 }

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,115 @@
+import { produce } from "immer";
+import { merge } from "lodash-es";
+import { useEffect, useState } from "react";
+
+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 instance = this;
+      const dehydrated = localStorage.getItem(this.persistence);
+
+      if (dehydrated) {
+        const rehydrated = JSON.parse(dehydrated) as unknown;
+        data = merge(data, rehydrated);
+      }
+
+      window.addEventListener("beforeunload", () => {
+        localStorage.setItem(this.persistence!, JSON.stringify(instance.state));
+      });
+    }
+
+    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) {
+    let last = slicer(this.state);
+
+    function listener(state: Type) {
+      const next = slicer(state);
+
+      if (next !== last) {
+        callback(next);
+        last = 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("Varuna store 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
+  ) {
+    return this.useDeferred(slicer, slicer(this.state));
+  }
+
+  useDeferred<Slice = Type>(slicer: (state: Type) => Slice, initial: Slice) {
+    const instance = this;
+    const [slice, setSlice] = useState(initial);
+
+    useEffect(() => instance.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",
@@ -35,8 +36,7 @@
     "react-dom": "^18.3.1",
     "react-promise-suspense": "^0.3.4",
     "three": "^0.169.0",
-    "urlon": "^3.1.0",
+    "urlon": "^3.1.0"
-    "zustand": "^4.5.5"
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.4",

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

@@ -1,4 +1,4 @@
-import { ReloadIcon } from '@radix-ui/react-icons';
+import { ReloadIcon } from "@radix-ui/react-icons";
 import {
   Card,
   Code,
@@ -6,26 +6,21 @@ import {
   IconButton,
   Text,
   TextField,
-} from '@radix-ui/themes';
+} from "@radix-ui/themes";
-import { Html } from '@react-three/drei';
+import { Html } from "@react-three/drei";
-import { useRef } from 'react';
+import { useRef } from "react";
-import { radToDeg } from 'three/src/math/MathUtils.js';
+import { radToDeg } from "three/src/math/MathUtils.js";
-import { resolveArmorIndex } from '../../../core/blitzkit/resolveArmorIndex';
+import { resolveArmorIndex } from "../../../core/blitzkit/resolveArmorIndex";
-import { App } from '../../../stores/app';
+import { App } from "../../../stores/app";
-import { Duel } from '../../../stores/duel';
+import { Duel } from "../../../stores/duel";
-import { TankopediaEphemeral } from '../../../stores/tankopediaEphemeral';
+import { Tankopedia } from "../../../stores/tankopedia";
-import { layerTypeNames } from './ShotDisplayCard';
+import { layerTypeNames } from "./ShotDisplayCard";
-import { ArmorType } from './SpacedArmorScene';
+import { ArmorType } from "./SpacedArmorScene";
 
 export function ArmorPlateDisplay() {
-  const highlightArmor = TankopediaEphemeral.use(
+  const highlightArmor = Tankopedia.use((state) => state.highlightArmor);
-    (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;
 
@@ -33,20 +28,20 @@ export function ArmorPlateDisplay() {
     <group position={highlightArmor.point}>
       <Html
         center
-        style={{ pointerEvents: highlightArmor.editingPlate ? 'auto' : 'none' }}
+        style={{ pointerEvents: highlightArmor.editingPlate ? "auto" : "none" }}
       >
         <Card
           variant="classic"
           mb="4"
           style={{
-            whiteSpace: 'nowrap',
+            whiteSpace: "nowrap",
             color: highlightArmor.color,
-            transform: 'translateY(-50%)',
+            transform: "translateY(-50%)",
           }}
         >
           <Flex direction="column">
             <Text weight="bold">
-              {layerTypeNames[highlightArmor.type]}{' '}
+              {layerTypeNames[highlightArmor.type]}{" "}
               {highlightArmor.thickness.toFixed(0)}
               <Text size="1" weight="regular">
                 mm
@@ -92,35 +87,34 @@ export function ArmorPlateDisplay() {
 
                     if (isNaN(thickness) || thickness < 0) return;
 
-                    if (event.key === 'Enter') {
+                    if (event.key === "Enter") {
                       input.current?.blur();
 
-                      mutateTankopediaEphemeral((draft) => {
+                      Tankopedia.mutate((draft) => {
                         draft.highlightArmor = undefined;
-                        const { protagonist } = duelStore.getState();
+                        const { protagonist } = Duel.state;
                         const tank = draft.model;
                         const turret = tank.turrets[protagonist.turret.id];
-                        const gun =
+                        const gun = turret.guns[protagonist.gun.id];
-                          turret.guns[protagonist.gun.gun_type!.value.base.id];
                         const track = tank.tracks[protagonist.track.id];
 
-                        if (highlightArmor.name.startsWith('hull_')) {
+                        if (highlightArmor.name.startsWith("hull_")) {
                           tank.armor.thickness[index] = thickness;
-                        } else if (highlightArmor.name.startsWith('turret_')) {
+                        } else if (highlightArmor.name.startsWith("turret_")) {
                           turret.armor.thickness[index] = thickness;
-                        } else if (highlightArmor.name.startsWith('gun_')) {
+                        } else if (highlightArmor.name.startsWith("gun_")) {
-                          if (highlightArmor.name.includes('_armor_')) {
+                          if (highlightArmor.name.includes("_armor_")) {
                             gun.armor.thickness[index] = thickness;
                           } else {
                             gun.thickness = thickness;
                           }
-                        } else if (highlightArmor.name.startsWith('chassis_')) {
+                        } else if (highlightArmor.name.startsWith("chassis_")) {
                           track.thickness = thickness;
                         }
                       });
-                    } else if (event.key === 'Escape') {
+                    } else if (event.key === "Escape") {
                       input.current?.blur();
-                      mutateTankopediaEphemeral((draft) => {
+                      Tankopedia.mutate((draft) => {
                         draft.highlightArmor = undefined;
                       });
                     }
@@ -138,7 +132,7 @@ export function ArmorPlateDisplay() {
                   mt="2"
                   color="red"
                   onClick={() => {
-                    mutateTankopediaEphemeral((draft) => {
+                    Tankopedia.mutate((draft) => {
                       if (!highlightArmor.editingPlate) return;
 
                       const index = resolveArmorIndex(highlightArmor.name);
@@ -146,38 +140,33 @@ export function ArmorPlateDisplay() {
                       if (index === undefined) return;
 
                       draft.highlightArmor = undefined;
-                      const initialState =
+                      const initialState = Tankopedia.initial;
-                        tankopediaEphemeralStore.getInitialState();
+                      const { protagonist } = Duel.state;
-                      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 =
+                      const gun = turret.guns[protagonist.gun.id];
-                        turret.guns[protagonist.gun.gun_type!.value.base.id];
+                      const initialGun = initialTurret.guns[protagonist.gun.id];
-                      const initialGun =
-                        initialTurret.guns[
-                          protagonist.gun.gun_type!.value.base.id
-                        ];
                       const track = tank.tracks[protagonist.track.id];
                       const initialTrack =
                         initialTank.tracks[protagonist.track.id];
 
-                      if (highlightArmor.name.startsWith('hull_')) {
+                      if (highlightArmor.name.startsWith("hull_")) {
                         tank.armor.thickness[index] =
                           initialTank.armor.thickness[index];
-                      } else if (highlightArmor.name.startsWith('turret_')) {
+                      } else if (highlightArmor.name.startsWith("turret_")) {
                         turret.armor.thickness[index] =
                           initialTurret.armor.thickness[index];
-                      } else if (highlightArmor.name.startsWith('gun_')) {
+                      } else if (highlightArmor.name.startsWith("gun_")) {
-                        if (highlightArmor.name.includes('_armor_')) {
+                        if (highlightArmor.name.includes("_armor_")) {
                           gun.armor.thickness[index] =
                             initialGun.armor.thickness[index];
                         } else {
                           gun.thickness = initialGun.thickness;
                         }
-                      } else if (highlightArmor.name.startsWith('chassis_')) {
+                      } else if (highlightArmor.name.startsWith("chassis_")) {
                         track.thickness = initialTrack.thickness;
                       }
                     });

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 =
+  const gunModelDefinition = turretModelDefinition.guns[gun.id];
-    turretModelDefinition.guns[gun.gun_type!.value.base.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

@@ -2,26 +2,28 @@ import {
   canSplash,
   isExplosive,
   resolvePenetrationCoefficient,
-} from '@blitzkit/core';
+} from "@blitzkit/core";
-import { invalidate, useFrame } from '@react-three/fiber';
+import { invalidate, useFrame } from "@react-three/fiber";
-import { useEffect } from 'react';
+import { useEffect } from "react";
 import {
   MeshBasicMaterial,
+  NormalBlending,
   Object3D,
   ShaderMaterial,
+  SubtractiveBlending,
   UniformsLib,
   UniformsUtils,
   Vector2,
-} from 'three';
+} from "three";
-import { degToRad } from 'three/src/math/MathUtils.js';
+import { degToRad } from "three/src/math/MathUtils.js";
-import { hasEquipment } from '../../../../core/blitzkit/hasEquipment';
+import { hasEquipment } from "../../../../core/blitzkit/hasEquipment";
-import { jsxTree } from '../../../../core/blitzkit/jsxTree';
+import { jsxTree } from "../../../../core/blitzkit/jsxTree";
-import { Duel, type EquipmentMatrix } from '../../../../stores/duel';
+import { Duel, type EquipmentMatrix } from "../../../../stores/duel";
-import { TankopediaEphemeral } from '../../../../stores/tankopediaEphemeral';
+import { Tankopedia } from "../../../../stores/tankopedia";
-import { TankopediaPersistent } from '../../../../stores/tankopediaPersistent';
+import { TankopediaPersistent } from "../../../../stores/tankopediaPersistent";
-import fragmentShader from './shaders/fragment.glsl?raw';
+import fragmentShader from "./shaders/fragment.glsl?raw";
-import vertexShader from './shaders/vertex.glsl?raw';
+import vertexShader from "./shaders/vertex.glsl?raw";
-import { spacedArmorRenderTarget } from './target';
+import { spacedArmorRenderTarget } from "./target";
 
 interface PrimaryArmorSceneComponentProps {
   thickness: number;
@@ -32,13 +34,13 @@ 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 +48,8 @@ export function PrimaryArmorSceneComponent({
     fog: true,
     transparent: true,
 
+    blending: isHalloween ? SubtractiveBlending : NormalBlending,
+
     uniforms: UniformsUtils.merge([
       UniformsLib.common,
       UniformsLib.fog,
@@ -73,30 +77,30 @@ export function PrimaryArmorSceneComponent({
   });
 
   useEffect(() => {
-    async function handleShellChange() {
+    function handleShellChange() {
-      const duel = duelStore.getState();
+      const tankopediaEphemeral = Tankopedia.state;
-      const tankopediaEphemeral = tankopediaEphemeralStore.getState();
+      const shell =
-      const shell = tankopediaEphemeral.customShell ?? duel.antagonist.shell;
+        tankopediaEphemeral.customShell ?? Duel.state.antagonist.shell;
 
       material.uniforms.caliber.value = shell.caliber;
       material.uniforms.ricochet.value = degToRad(
-        isExplosive(shell.type) ? 90 : shell.ricochet!,
+        isExplosive(shell.type) ? 90 : shell.ricochet!
       );
       material.uniforms.normalization.value = degToRad(
-        shell.normalization ?? 0,
+        shell.normalization ?? 0
       );
       material.uniforms.isExplosive.value = isExplosive(shell.type);
       material.uniforms.canSplash.value = canSplash(shell.type);
       material.uniforms.damage.value = shell.armor_damage;
       material.uniforms.explosionRadius.value = shell.explosion_radius;
 
-      await handleProtagonistEquipmentChange(
+      handleProtagonistEquipmentChange(
-        duel.protagonist.equipmentMatrix,
+        Duel.state.protagonist.equipmentMatrix,
-        true,
+        true
       );
-      await handleAntagonistEquipmentChange(
+      handleAntagonistEquipmentChange(
-        duel.antagonist.equipmentMatrix,
+        Duel.state.antagonist.equipmentMatrix,
-        true,
+        true
       );
 
       invalidate();
@@ -114,15 +118,14 @@ export function PrimaryArmorSceneComponent({
     function handleWireframeChange(wireframe: boolean) {
       material.wireframe = wireframe;
     }
-    async function handleProtagonistEquipmentChange(
+    function handleProtagonistEquipmentChange(
       equipment: EquipmentMatrix,
-      noInvalidate = false,
+      noInvalidate = false
     ) {
-      const duel = duelStore.getState();
+      const hasEnhancedArmor = hasEquipment(
-      const hasEnhancedArmor = await hasEquipment(
         110,
-        duel.protagonist.tank.equipment_preset,
+        Duel.state.protagonist.tank.equipment_preset,
-        equipment,
+        equipment
       );
       material.uniforms.thickness.value = hasEnhancedArmor
         ? thickness * 1.03
@@ -130,18 +133,18 @@ export function PrimaryArmorSceneComponent({
 
       if (!noInvalidate) invalidate();
     }
-    async function handleAntagonistEquipmentChange(
+    function handleAntagonistEquipmentChange(
       equipment: EquipmentMatrix,
-      noInvalidate = false,
+      noInvalidate = false
     ) {
-      const duel = duelStore.getState();
+      const tankopediaEphemeral = Tankopedia.state;
-      const tankopediaEphemeral = tankopediaEphemeralStore.getState();
+      const shell =
-      const shell = tankopediaEphemeral.customShell ?? duel.antagonist.shell;
+        tankopediaEphemeral.customShell ?? Duel.state.antagonist.shell;
       const penetration = shell.penetration.near;
-      const hasCalibratedShells = await hasEquipment(
+      const hasCalibratedShells = hasEquipment(
         103,
-        duel.antagonist.tank.equipment_preset,
+        Duel.state.antagonist.tank.equipment_preset,
-        equipment,
+        equipment
       );
 
       material.uniforms.penetration.value =
@@ -151,45 +154,35 @@ export function PrimaryArmorSceneComponent({
       if (!noInvalidate) invalidate();
     }
 
-    const initialState = tankopediaPersistentStore.getState();
-
     handleShellChange();
-    handleGreenPenetrationChange(initialState.greenPenetration);
+    handleGreenPenetrationChange(TankopediaPersistent.state.greenPenetration);
-    handleAdvancedHighlightingChange(initialState.advancedHighlighting);
+    handleAdvancedHighlightingChange(
-    handleOpaqueChange(initialState.opaque);
+      TankopediaPersistent.state.advancedHighlighting
-    handleWireframeChange(initialState.wireframe);
-    handleProtagonistEquipmentChange(
-      duelStore.getState().protagonist.equipmentMatrix,
-    );
-    handleAntagonistEquipmentChange(
-      duelStore.getState().antagonist.equipmentMatrix,
     );
+    handleOpaqueChange(TankopediaPersistent.state.opaque);
+    handleWireframeChange(TankopediaPersistent.state.wireframe);
+    handleProtagonistEquipmentChange(Duel.state.protagonist.equipmentMatrix);
+    handleAntagonistEquipmentChange(Duel.state.antagonist.equipmentMatrix);
 
     const unsubscribes = [
-      duelStore.subscribe((state) => state.antagonist.shell, handleShellChange),
+      Duel.on((state) => state.antagonist.shell, handleShellChange),
-      tankopediaEphemeralStore.subscribe(
+      Tankopedia.on((state) => state.customShell, handleShellChange),
-        (state) => state.customShell,
+      TankopediaPersistent.on(
-        handleShellChange,
-      ),
-      tankopediaPersistentStore.subscribe(
         (state) => state.greenPenetration,
-        handleGreenPenetrationChange,
+        handleGreenPenetrationChange
       ),
-      tankopediaPersistentStore.subscribe(
+      TankopediaPersistent.on(
         (state) => state.advancedHighlighting,
-        handleAdvancedHighlightingChange,
+        handleAdvancedHighlightingChange
       ),
-      tankopediaPersistentStore.subscribe(
+      TankopediaPersistent.on((state) => state.opaque, handleOpaqueChange),
-        (state) => state.opaque,
+      Duel.on(
-        handleOpaqueChange,
-      ),
-      duelStore.subscribe(
         (state) => state.protagonist.equipmentMatrix,
-        (equipment) => handleProtagonistEquipmentChange(equipment),
+        (equipment) => handleProtagonistEquipmentChange(equipment)
       ),
-      duelStore.subscribe(
+      Duel.on(
         (state) => state.antagonist.equipmentMatrix,
-        (equipment) => handleAntagonistEquipmentChange(equipment),
+        (equipment) => handleAntagonistEquipmentChange(equipment)
       ),
     ];
 
@@ -200,7 +193,7 @@ export function PrimaryArmorSceneComponent({
 
   useFrame(({ gl, camera }) => {
     gl.getSize(material.uniforms.resolution.value).multiplyScalar(
-      gl.getPixelRatio(),
+      gl.getPixelRatio()
     );
     material.uniforms.spacedArmorBuffer.value = spacedArmorRenderTarget.texture;
     material.uniforms.spacedArmorDepth.value =

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

@@ -1,9 +1,9 @@
-import { J_HAT, K_HAT } from '@blitzkit/core';
+import { J_HAT, K_HAT } from "@blitzkit/core";
-import { Box, Flex, Text } from '@radix-ui/themes';
+import { Box, Flex, Text } from "@radix-ui/themes";
-import { Html } from '@react-three/drei';
+import { Html } from "@react-three/drei";
-import { invalidate, useFrame } from '@react-three/fiber';
+import { invalidate, useFrame } from "@react-three/fiber";
-import { clamp } from 'lodash-es';
+import { clamp } from "lodash-es";
-import { useEffect, useRef, type ComponentProps } from 'react';
+import { useEffect, useRef, type ComponentProps } from "react";
 import {
   BufferGeometry,
   DoubleSide,
@@ -15,23 +15,24 @@ import {
   MeshBasicMaterial,
   Path,
   Quaternion,
-} from 'three';
+} from "three";
-import { LocaleProvider, useLocale } from '../../../hooks/useLocale';
+import { isHalloween } from "../../../core/blitzkit/isHalloween";
+import { LocaleProvider, useLocale } from "../../../hooks/useLocale";
 import {
-  TankopediaEphemeral,
+  Tankopedia,
   type ShotLayerNonExternal,
   type ShotStatus,
-} from '../../../stores/tankopediaEphemeral';
+} from "../../../stores/tankopedia";
-import { ShotDisplayCard } from './ShotDisplayCard';
+import { ShotDisplayCard } from "./ShotDisplayCard";
 
 export const shotStatusColors: Record<
   ShotStatus,
-  ComponentProps<typeof Text>['color']
+  ComponentProps<typeof Text>["color"]
 > = {
-  blocked: 'red',
+  blocked: "red",
-  penetration: 'green',
+  penetration: "green",
-  ricochet: 'yellow',
+  ricochet: "yellow",
-  splash: 'orange',
+  splash: "orange",
 };
 
 const SURFACE_POINT_SIZE = 12;
@@ -40,7 +41,7 @@ const TRACER_THICK = 1 / 32;
 const TRACER_THIN = TRACER_THICK / 2;
 
 export function ShotDisplay() {
-  const shot = TankopediaEphemeral.use((state) => state.shot);
+  const shot = Tankopedia.use((state) => state.shot);
   const inTracer = useRef<Mesh>(null);
   const outTracer = useRef<Mesh>(null);
   const splashRadiusWrapper = useRef<Group>(null);
@@ -51,16 +52,16 @@ export function ShotDisplay() {
   useEffect(() => {
     if (shot?.splashRadius !== undefined) {
       const outlineGeometry = new BufferGeometry().setFromPoints(
-        new Path().absarc(0, 0, 1, 0, Math.PI * 2).getSpacedPoints(50),
+        new Path().absarc(0, 0, 1, 0, Math.PI * 2).getSpacedPoints(50)
       );
       const outlineMaterial = new LineDashedMaterial({
-        color: 'orange',
+        color: "orange",
         dashSize: 0.05,
         gapSize: 0.025,
       });
       const outline = new Line(
         outlineGeometry,
-        outlineMaterial,
+        outlineMaterial
       ).computeLineDistances();
 
       splashRadiusWrapper.current?.add(outline);
@@ -72,15 +73,12 @@ 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'
+      shot.in.status === "penetration"
     ) {
-      const audio = new Audio('/assets/audio/lotta-damage.mp3');
+      const audio = new Audio("/assets/audio/lotta-damage.mp3");
 
       audio.currentTime = 0.7;
       audio.volume = 0.25;
@@ -136,11 +134,11 @@ export function ShotDisplay() {
   const outLength =
     shot.out && shot.out.layers.length > 0
       ? (shot.in.layers.at(-1) as ShotLayerNonExternal).point.distanceTo(
-          (shot.out.layers.at(-1) as ShotLayerNonExternal).point,
+          (shot.out.layers.at(-1) as ShotLayerNonExternal).point
         )
       : SHOT_DISPLAY_LENGTH_INFINITY;
   const inLast = shot.in.layers.findLast(
-    (layer) => layer.type !== null,
+    (layer) => layer.type !== null
   ) as ShotLayerNonExternal;
   const outTitleColor = shot.out
     ? shotStatusColors[shot.out.status]
@@ -156,7 +154,7 @@ export function ShotDisplay() {
           position={inLast.point}
           ref={splashRadiusWrapper}
           rotation={new Euler().setFromQuaternion(
-            new Quaternion().setFromUnitVectors(K_HAT, shot.in.surfaceNormal),
+            new Quaternion().setFromUnitVectors(K_HAT, shot.in.surfaceNormal)
           )}
         >
           <mesh>
@@ -174,13 +172,13 @@ export function ShotDisplay() {
       <Html position={inLast.point} center>
         <Box
           style={{
-            pointerEvents: 'none',
+            pointerEvents: "none",
             transform: `translateY(${tracerGoingUp ? 50 : -50}%)`,
           }}
-          mb={tracerGoingUp ? '0' : '9'}
+          mb={tracerGoingUp ? "0" : "9"}
-          pb={tracerGoingUp ? '0' : '4'}
+          pb={tracerGoingUp ? "0" : "4"}
-          mt={tracerGoingUp ? '9' : '0'}
+          mt={tracerGoingUp ? "9" : "0"}
-          pt={tracerGoingUp ? '4' : '0'}
+          pt={tracerGoingUp ? "4" : "0"}
         >
           <LocaleProvider locale={locale}>
             <ShotDisplayCard shot={shot} />
@@ -192,7 +190,7 @@ export function ShotDisplay() {
         if (layer.type === null) return null;
 
         const shotStatusColor =
-          shot.in.status === 'splash'
+          shot.in.status === "splash"
             ? shotStatusColors.splash
             : shotStatusColors[layer.status];
 
@@ -201,8 +199,8 @@ export function ShotDisplay() {
             position={layer.point}
             key={index}
             style={{
-              pointerEvents: 'none',
+              pointerEvents: "none",
-              transform: 'translateY(-50%)',
+              transform: "translateY(-50%)",
             }}
           >
             <Flex
@@ -227,7 +225,7 @@ export function ShotDisplay() {
       <group
         position={inLast.point}
         rotation={new Euler().setFromQuaternion(
-          new Quaternion().setFromUnitVectors(J_HAT, shot.in.surfaceNormal),
+          new Quaternion().setFromUnitVectors(J_HAT, shot.in.surfaceNormal)
         )}
       >
         <mesh position={[0, inLength / 2, 0]} renderOrder={2}>
@@ -255,8 +253,8 @@ export function ShotDisplay() {
           rotation={new Euler().setFromQuaternion(
             new Quaternion().setFromUnitVectors(
               J_HAT,
-              shot.out.surfaceNormal.clone(),
+              shot.out.surfaceNormal.clone()
-            ),
+            )
           )}
         >
           <mesh position={[0, outLength / 2, 0]} renderOrder={2}>

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

@@ -1,4 +1,4 @@
-import { literals } from '@blitzkit/i18n/src/literals';
+import { literals } from "@blitzkit/i18n/src/literals";
 import {
   Card,
   Flex,
@@ -6,19 +6,19 @@ import {
   Separator,
   Text,
   type CardProps,
-} from '@radix-ui/themes';
+} from "@radix-ui/themes";
-import type { ComponentProps } from 'react';
+import type { ComponentProps } from "react";
-import { radToDeg } from 'three/src/math/MathUtils.js';
+import { radToDeg } from "three/src/math/MathUtils.js";
-import { useLocale } from '../../../hooks/useLocale';
+import { useLocale } from "../../../hooks/useLocale";
-import type { Shot, ShotLayer } from '../../../stores/tankopediaEphemeral';
+import type { Shot, ShotLayer } from "../../../stores/tankopedia";
-import { shotStatusColors } from './ShotDisplay';
+import { shotStatusColors } from "./ShotDisplay";
-import { ArmorType } from './SpacedArmorScene';
+import { ArmorType } from "./SpacedArmorScene";
 
 export const layerTypeNames = {
-  [ArmorType.Primary]: 'primary',
+  [ArmorType.Primary]: "primary",
-  [ArmorType.Spaced]: 'spaced',
+  [ArmorType.Spaced]: "spaced",
-  [ArmorType.External]: 'external',
+  [ArmorType.External]: "external",
-  null: 'gap',
+  null: "gap",
 } as const;
 
 function LayerEntry({
@@ -29,7 +29,7 @@ function LayerEntry({
   angle,
 }: {
   layerIndex?: string;
-  shotStatusColor: ComponentProps<typeof Text>['color'];
+  shotStatusColor: ComponentProps<typeof Text>["color"];
   layerName: string;
   layer: ShotLayer;
   angle?: number;
@@ -37,44 +37,38 @@ function LayerEntry({
   const { locale, strings } = useLocale();
 
   return (
-    <Flex align="center" gap="2">
+    <tr>
-      <Text size="1" color="gray" style={{ width: 12 }}>
+      <td>
-        {layerIndex}
+        <Text size="1" color="gray">
-      </Text>
+          {layerIndex}
-      <Text size="2" color={shotStatusColor} style={{ width: 48 }}>
+        </Text>
-        {layerName}
+      </td>
-      </Text>
 
-      {layer.type === null && (
+      <td>
-        <>
+        <Text size="2" color={shotStatusColor}>
-          <Text size="2" color={shotStatusColor} style={{ width: 64 }}>
+          {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">
+        {layer.type === ArmorType.External && (
-            {literals(
+          <Text size="2" color={shotStatusColor}>
-              strings.website.tools.tankopedia.sandbox.dynamic.shot_card.stats
+            {literals(strings.common.units.mm, [
-                .ricochet_loss,
+              Math.round(layer.thickness).toLocaleString(locale),
-              [Math.max(-100, -50 * layer.distance).toFixed(0)],
+            ])}
-            )}
           </Text>
-        </>
+        )}
-      )}
+        {(layer.type === ArmorType.Primary ||
-
+          layer.type === ArmorType.Spaced) && (
-      {layer.type === ArmorType.External && (
+          <Text size="2" color={shotStatusColor}>
-        <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 }}>
             {literals(
               angle === undefined
                 ? strings.common.units.mm
@@ -83,20 +77,35 @@ function LayerEntry({
               [
                 Math.round(layer.thicknessAngled).toLocaleString(locale),
                 radToDeg(angle ?? 0).toFixed(0),
-              ],
+              ]
             )}
           </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
                 .nominal,
-              [Math.round(layer.thickness).toLocaleString(locale)],
+              [Math.round(layer.thickness).toLocaleString(locale)]
             )}
           </Text>
-        </>
+        )}
-      )}
+      </td>
-    </Flex>
+    </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">
@@ -123,11 +132,16 @@ export function ShotDisplayCard({ shot, ...props }: ShotDisplayCardProps) {
               strings.website.tools.tankopedia.sandbox.dynamic.shot_card.status[
                 shot.in.status
               ],
-              [Math.round(shot.damage).toLocaleString(locale)],
+              [Math.round(shot.damage).toLocaleString(locale)]
             )}
           </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
@@ -141,7 +155,7 @@ export function ShotDisplayCard({ shot, ...props }: ShotDisplayCardProps) {
                   ? undefined
                   : `${(shot.containsGaps ? index / 2 : index) + 1}.`;
               const shotStatusColor =
-                shot.in.status === 'splash'
+                shot.in.status === "splash"
                   ? shotStatusColors.splash
                   : shotStatusColors[layer.status];
 
@@ -161,7 +175,7 @@ export function ShotDisplayCard({ shot, ...props }: ShotDisplayCardProps) {
                 />
               );
             })}
-          </Flex>
+          </table>
         </Flex>
 
         {shot.out && shot.out.layers.length > 0 && (
@@ -188,7 +202,7 @@ export function ShotDisplayCard({ shot, ...props }: ShotDisplayCardProps) {
               {literals(
                 strings.website.tools.tankopedia.sandbox.dynamic.shot_card
                   .status[shot.out.status],
-                [Math.round(shot.damage).toLocaleString(locale)],
+                [Math.round(shot.damage).toLocaleString(locale)]
               )}
             </Text>
 
@@ -210,7 +224,7 @@ export function ShotDisplayCard({ shot, ...props }: ShotDisplayCardProps) {
                         1
                       }.`;
                 const shotStatusColor =
-                  shot.out!.status === 'splash'
+                  shot.out!.status === "splash"
                     ? shotStatusColors.splash
                     : shotStatusColors[layer.status];
 

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 =
+  const gunModelDefinition = turretModelDefinition.guns[gun.id];
-    turretModelDefinition.guns[gun.gun_type!.value.base.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

@@ -1,20 +1,20 @@
-import { resolvePenetrationCoefficient } from '@blitzkit/core';
+import { resolvePenetrationCoefficient } from "@blitzkit/core";
-import { useEffect } from 'react';
+import { useEffect } from "react";
 import {
   AdditiveBlending,
   MeshBasicMaterial,
   Object3D,
   Plane,
   ShaderMaterial,
-} from 'three';
+} from "three";
-import type { ArmorUserData, ExternalModuleVariant } from '../..';
+import type { ArmorUserData, ExternalModuleVariant } from "../..";
-import { hasEquipment } from '../../../../../../core/blitzkit/hasEquipment';
+import { hasEquipment } from "../../../../../../core/blitzkit/hasEquipment";
-import { jsxTree } from '../../../../../../core/blitzkit/jsxTree';
+import { jsxTree } from "../../../../../../core/blitzkit/jsxTree";
-import { Duel, type EquipmentMatrix } from '../../../../../../stores/duel';
+import { Duel, type EquipmentMatrix } from "../../../../../../stores/duel";
-import { TankopediaEphemeral } from '../../../../../../stores/tankopediaEphemeral';
+import { Tankopedia } from "../../../../../../stores/tankopedia";
-import { ArmorType } from '../../../SpacedArmorScene';
+import { ArmorType } from "../../../SpacedArmorScene";
-import fragmentShader from './shaders/fragment.glsl?raw';
+import fragmentShader from "./shaders/fragment.glsl?raw";
-import vertexShader from './shaders/vertex.glsl?raw';
+import vertexShader from "./shaders/vertex.glsl?raw";
 
 interface SpacedArmorSubExternalProps {
   node: Object3D;
@@ -29,8 +29,6 @@ export function SpacedArmorSubExternal({
   variant,
   clip,
 }: SpacedArmorSubExternalProps) {
-  const tankopediaEphemeralStore = TankopediaEphemeral.useStore();
-  const duelStore = Duel.useStore();
   const material = new ShaderMaterial({
     fragmentShader,
     vertexShader,
@@ -49,33 +47,30 @@ export function SpacedArmorSubExternal({
 
   useEffect(() => {
     function handleShellChange() {
-      const duel = duelStore.getState();
+      const tankopediaEphemeral = Tankopedia.state;
-      const tankopediaEphemeral = tankopediaEphemeralStore.getState();
+      const shell =
-      const shell = tankopediaEphemeral.customShell ?? duel.antagonist.shell;
+        tankopediaEphemeral.customShell ?? Duel.state.antagonist.shell;
       material.uniforms.penetration.value = shell.penetration.near;
     }
-    async function handleProtagonistEquipmentChange(
+    function handleProtagonistEquipmentChange(equipment: EquipmentMatrix) {
-      equipment: EquipmentMatrix,
+      const hasEnhancedArmor = hasEquipment(
-    ) {
-      const duel = duelStore.getState();
-      const hasEnhancedArmor = await hasEquipment(
         110,
-        duel.protagonist.tank.equipment_preset,
+        Duel.state.protagonist.tank.equipment_preset,
-        equipment,
+        equipment
       );
       material.uniforms.thickness.value = hasEnhancedArmor
         ? thickness * 1.03
         : thickness;
     }
-    async function handleAntagonistEquipmentChange(equipment: EquipmentMatrix) {
+    function handleAntagonistEquipmentChange(equipment: EquipmentMatrix) {
-      const duel = duelStore.getState();
+      const tankopediaEphemeral = Tankopedia.state;
-      const tankopediaEphemeral = tankopediaEphemeralStore.getState();
+      const shell =
-      const shell = tankopediaEphemeral.customShell ?? duel.antagonist.shell;
+        tankopediaEphemeral.customShell ?? Duel.state.antagonist.shell;
       const penetration = shell.penetration.near;
-      const hasCalibratedShells = await hasEquipment(
+      const hasCalibratedShells = hasEquipment(
         103,
-        duel.antagonist.tank.equipment_preset,
+        Duel.state.antagonist.tank.equipment_preset,
-        equipment,
+        equipment
       );
 
       material.uniforms.penetration.value =
@@ -84,26 +79,19 @@ export function SpacedArmorSubExternal({
     }
 
     handleShellChange();
-    handleProtagonistEquipmentChange(
+    handleProtagonistEquipmentChange(Duel.state.protagonist.equipmentMatrix);
-      duelStore.getState().protagonist.equipmentMatrix,
+    handleAntagonistEquipmentChange(Duel.state.antagonist.equipmentMatrix);
-    );
-    handleAntagonistEquipmentChange(
-      duelStore.getState().antagonist.equipmentMatrix,
-    );
 
     const unsubscribes = [
-      duelStore.subscribe((state) => state.antagonist.shell, handleShellChange),
+      Duel.on((state) => state.antagonist.shell, handleShellChange),
-      tankopediaEphemeralStore.subscribe(
+      Tankopedia.on((state) => state.customShell, handleShellChange),
-        (state) => state.customShell,
+      Duel.on(
-        handleShellChange,
-      ),
-      duelStore.subscribe(
         (state) => state.protagonist.equipmentMatrix,
-        handleProtagonistEquipmentChange,
+        handleProtagonistEquipmentChange
       ),
-      duelStore.subscribe(
+      Duel.on(
         (state) => state.antagonist.equipmentMatrix,
-        handleAntagonistEquipmentChange,
+        handleAntagonistEquipmentChange
       ),
     ];
 
@@ -125,6 +113,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

@@ -1,20 +1,20 @@
-import { isExplosive, resolvePenetrationCoefficient } from '@blitzkit/core';
+import { isExplosive, resolvePenetrationCoefficient } from "@blitzkit/core";
-import { useEffect } from 'react';
+import { useEffect } from "react";
 import {
   AdditiveBlending,
   MeshBasicMaterial,
   ShaderMaterial,
   type Object3D,
-} from 'three';
+} from "three";
-import { degToRad } from 'three/src/math/MathUtils.js';
+import { degToRad } from "three/src/math/MathUtils.js";
-import type { ArmorUserData } from '../..';
+import type { ArmorUserData } from "../..";
-import { hasEquipment } from '../../../../../../core/blitzkit/hasEquipment';
+import { hasEquipment } from "../../../../../../core/blitzkit/hasEquipment";
-import { jsxTree } from '../../../../../../core/blitzkit/jsxTree';
+import { jsxTree } from "../../../../../../core/blitzkit/jsxTree";
-import { Duel, type EquipmentMatrix } from '../../../../../../stores/duel';
+import { Duel, type EquipmentMatrix } from "../../../../../../stores/duel";
-import { TankopediaEphemeral } from '../../../../../../stores/tankopediaEphemeral';
+import { Tankopedia } from "../../../../../../stores/tankopedia";
-import { ArmorType } from '../../../SpacedArmorScene';
+import { ArmorType } from "../../../SpacedArmorScene";
-import fragmentShader from './shaders/fragment.glsl?raw';
+import fragmentShader from "./shaders/fragment.glsl?raw";
-import vertexShader from './shaders/vertex.glsl?raw';
+import vertexShader from "./shaders/vertex.glsl?raw";
 
 interface SpacedArmorSubSpacedProps {
   node: Object3D;
@@ -30,8 +30,6 @@ export function SpacedArmorSubSpaced({
   node,
   thickness,
 }: SpacedArmorSubSpacedProps) {
-  const tankopediaEphemeralStore = TankopediaEphemeral.useStore();
-  const duelStore = Duel.useStore();
   const material = new ShaderMaterial({
     fragmentShader,
     vertexShader,
@@ -51,41 +49,38 @@ export function SpacedArmorSubSpaced({
 
   useEffect(() => {
     function handleShellChange() {
-      const duel = duelStore.getState();
+      const tankopediaEphemeral = Tankopedia.state;
-      const tankopediaEphemeral = tankopediaEphemeralStore.getState();
+      const shell =
-      const shell = tankopediaEphemeral.customShell ?? duel.antagonist.shell;
+        tankopediaEphemeral.customShell ?? Duel.state.antagonist.shell;
 
       material.uniforms.penetration.value = shell.penetration.near;
       material.uniforms.caliber.value = shell.caliber;
       material.uniforms.ricochet.value = degToRad(
-        isExplosive(shell.type) ? 90 : shell.ricochet!,
+        isExplosive(shell.type) ? 90 : shell.ricochet!
       );
       material.uniforms.normalization.value = degToRad(
-        shell.normalization ?? 0,
+        shell.normalization ?? 0
       );
     }
-    async function handleProtagonistEquipmentChange(
+    function handleProtagonistEquipmentChange(equipment: EquipmentMatrix) {
-      equipment: EquipmentMatrix,
+      const hasEnhancedArmor = hasEquipment(
-    ) {
-      const duel = duelStore.getState();
-      const hasEnhancedArmor = await hasEquipment(
         110,
-        duel.protagonist.tank.equipment_preset,
+        Duel.state.protagonist.tank.equipment_preset,
-        equipment,
+        equipment
       );
       material.uniforms.thickness.value = hasEnhancedArmor
         ? thickness * 1.03
         : thickness;
     }
-    async function handleAntagonistEquipmentChange(equipment: EquipmentMatrix) {
+    function handleAntagonistEquipmentChange(equipment: EquipmentMatrix) {
-      const duel = duelStore.getState();
+      const tankopediaEphemeral = Tankopedia.state;
-      const tankopediaEphemeral = tankopediaEphemeralStore.getState();
+      const shell =
-      const shell = tankopediaEphemeral.customShell ?? duel.antagonist.shell;
+        tankopediaEphemeral.customShell ?? Duel.state.antagonist.shell;
       const penetration = shell.penetration.near;
-      const hasCalibratedShells = await hasEquipment(
+      const hasCalibratedShells = hasEquipment(
         103,
-        duel.antagonist.tank.equipment_preset,
+        Duel.state.antagonist.tank.equipment_preset,
-        equipment,
+        equipment
       );
 
       material.uniforms.penetration.value =
@@ -94,26 +89,19 @@ export function SpacedArmorSubSpaced({
     }
 
     handleShellChange();
-    handleProtagonistEquipmentChange(
+    handleProtagonistEquipmentChange(Duel.state.protagonist.equipmentMatrix);
-      duelStore.getState().protagonist.equipmentMatrix,
+    handleAntagonistEquipmentChange(Duel.state.antagonist.equipmentMatrix);
-    );
-    handleAntagonistEquipmentChange(
-      duelStore.getState().antagonist.equipmentMatrix,
-    );
 
     const unsubscribes = [
-      duelStore.subscribe((state) => state.antagonist.shell, handleShellChange),
+      Duel.on((state) => state.antagonist.shell, handleShellChange),
-      tankopediaEphemeralStore.subscribe(
+      Tankopedia.on((state) => state.customShell, handleShellChange),
-        (state) => state.customShell,
+      Duel.on(
-        handleShellChange,
-      ),
-      duelStore.subscribe(
         (state) => state.protagonist.equipmentMatrix,
-        handleProtagonistEquipmentChange,
+        handleProtagonistEquipmentChange
       ),
-      duelStore.subscribe(
+      Duel.on(
         (state) => state.antagonist.equipmentMatrix,
-        handleAntagonistEquipmentChange,
+        handleAntagonistEquipmentChange
       ),
     ];
 

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

@@ -2,9 +2,9 @@ import {
   ShellType,
   isExplosive,
   resolvePenetrationCoefficient,
-} from '@blitzkit/core';
+} from "@blitzkit/core";
-import { useThree } from '@react-three/fiber';
+import { useThree } from "@react-three/fiber";
-import { useCallback } from 'react';
+import { useCallback } from "react";
 import {
   type Intersection,
   MeshBasicMaterial,
@@ -14,21 +14,21 @@ import {
   Raycaster,
   Scene,
   Vector3,
-} from 'three';
+} from "three";
-import { degToRad } from 'three/src/math/MathUtils.js';
+import { degToRad } from "three/src/math/MathUtils.js";
-import { hasEquipment } from '../../../../core/blitzkit/hasEquipment';
+import { hasEquipment } from "../../../../core/blitzkit/hasEquipment";
-import { jsxTree } from '../../../../core/blitzkit/jsxTree';
+import { jsxTree } from "../../../../core/blitzkit/jsxTree";
-import { discardClippingPlane } from '../../../../core/three/discardClippingPlane';
+import { discardClippingPlane } from "../../../../core/three/discardClippingPlane";
-import { Duel } from '../../../../stores/duel';
+import { Duel } from "../../../../stores/duel";
 import {
   type Shot,
   type ShotLayerBase,
   type ShotLayerNonExternal,
-  TankopediaEphemeral,
+  Tankopedia,
-} from '../../../../stores/tankopediaEphemeral';
+} from "../../../../stores/tankopedia";
-import { ArmorType } from '../SpacedArmorScene';
+import { ArmorType } from "../SpacedArmorScene";
-import { SpacedArmorSubExternal } from './components/SpacedArmorSubExternal';
+import { SpacedArmorSubExternal } from "./components/SpacedArmorSubExternal";
-import { SpacedArmorSubSpaced } from './components/SpacedArmorSubSpaced';
+import { SpacedArmorSubSpaced } from "./components/SpacedArmorSubSpaced";
 
 type SpacedArmorSceneComponentProps = {
   node: Object3D;
@@ -45,7 +45,7 @@ type SpacedArmorSceneComponentProps = {
     }
 );
 
-export type ExternalModuleVariant = 'gun' | 'track';
+export type ExternalModuleVariant = "gun" | "track";
 export type ArmorUserData = {
   thickness: number;
 } & (
@@ -76,20 +76,17 @@ 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,
+      remainingPenetrationInput?: number
     ) => {
-      const { antagonist, protagonist } = duelStore.getState();
+      const { customShell } = Tankopedia.state;
-      const { customShell } = tankopediaEphemeralStore.getState();
+      const shell = customShell ?? Duel.state.antagonist.shell;
-      const shell = customShell ?? antagonist.shell;
       const cameraNormal = camera.position.clone().sub(point).normalize();
       const shot: Shot = {
         splashRadius:
@@ -99,19 +96,19 @@ export function SpacedArmorSceneComponent({
         in: {
           surfaceNormal: cameraNormal,
           layers: [],
-          status: 'blocked',
+          status: "blocked",
         },
       };
 
-      const hasCalibratedShells = await hasEquipment(
+      const hasCalibratedShells = hasEquipment(
         103,
-        antagonist.tank.equipment_preset,
+        Duel.state.antagonist.tank.equipment_preset,
-        antagonist.equipmentMatrix,
+        Duel.state.antagonist.equipmentMatrix
       );
-      const hasEnhancedArmor = await hasEquipment(
+      const hasEnhancedArmor = hasEquipment(
         110,
-        protagonist.tank.equipment_preset,
+        Duel.state.protagonist.tank.equipment_preset,
-        protagonist.equipmentMatrix,
+        Duel.state.protagonist.equipmentMatrix
       );
       const penetration =
         shell.penetration.near *
@@ -119,8 +116,8 @@ export function SpacedArmorSceneComponent({
       const thicknessCoefficient = hasEnhancedArmor ? 1.03 : 1;
       const filteredIntersections = intersections.filter(
         (intersection) =>
-          'type' in intersection.object.userData &&
+          "type" in intersection.object.userData &&
-          !discardClippingPlane(intersection.object, intersection.point),
+          !discardClippingPlane(intersection.object, intersection.point)
       ) as unknown as Intersection<Object3D & { userData: ArmorUserData }>[];
       const encounteredExternalModuleVariants: ExternalModuleVariant[] = [];
       const noDuplicateIntersections: typeof filteredIntersections = [];
@@ -129,12 +126,12 @@ export function SpacedArmorSceneComponent({
         if (intersection.object.userData.type === ArmorType.External) {
           if (
             !encounteredExternalModuleVariants.includes(
-              intersection.object.userData.variant,
+              intersection.object.userData.variant
             )
           ) {
             noDuplicateIntersections.push(intersection);
             encounteredExternalModuleVariants.push(
-              intersection.object.userData.variant,
+              intersection.object.userData.variant
             );
           }
         } else {
@@ -162,7 +159,7 @@ export function SpacedArmorSceneComponent({
         const surfaceNormal = intersection
           .normal!.clone()
           .applyQuaternion(
-            intersection.object.getWorldQuaternion(new Quaternion()),
+            intersection.object.getWorldQuaternion(new Quaternion())
           );
 
         if (shell.type === ShellType.HEAT && index > 0) {
@@ -174,7 +171,7 @@ export function SpacedArmorSceneComponent({
           shot.in.layers.push({
             type: null,
             distance,
-            status: blocked ? 'blocked' : 'penetration',
+            status: blocked ? "blocked" : "penetration",
           });
 
           if (blocked) break;
@@ -194,16 +191,16 @@ export function SpacedArmorSceneComponent({
             surfaceNormal,
             status:
               shell.type === ShellType.HE
-                ? 'blocked'
+                ? "blocked"
                 : blocked
-                  ? 'blocked'
+                  ? "blocked"
-                  : 'penetration',
+                  : "penetration",
             variant: layer.variant,
           });
         } else {
           const thickness = layer.thickness * thicknessCoefficient;
           const ricochet = degToRad(
-            isExplosive(shell.type) ? 90 : shell.ricochet!,
+            isExplosive(shell.type) ? 90 : shell.ricochet!
           );
           const angle = surfaceNormal.angleTo(cameraNormal);
 
@@ -227,7 +224,7 @@ export function SpacedArmorSceneComponent({
               thicknessAngled: finalThickness,
               point: intersection.point,
               surfaceNormal,
-              status: 'ricochet',
+              status: "ricochet",
               angle,
             });
 
@@ -245,10 +242,10 @@ export function SpacedArmorSceneComponent({
               surfaceNormal: intersection.face!.normal,
               status:
                 shell.type === ShellType.HE && layer.type !== ArmorType.Primary
-                  ? 'blocked'
+                  ? "blocked"
                   : blocked
-                    ? 'blocked'
+                    ? "blocked"
-                    : 'penetration',
+                    : "penetration",
               angle,
             });
           }
@@ -282,10 +279,10 @@ export function SpacedArmorSceneComponent({
 
               return acc + layer.thicknessAngled;
             },
-            0,
+            0
           );
           const distanceFromSpacedArmor = firstLayer.point.distanceTo(
-            lastLayer.point,
+            lastLayer.point
           );
           const finalDamage = Math.max(
             0,
@@ -294,7 +291,7 @@ export function SpacedArmorSceneComponent({
               (1 - distanceFromSpacedArmor / shell.explosion_radius!) -
               1.1 *
                 (lastLayer.thicknessAngled +
-                  Math.min(penetration, totalSpacedArmorThickness)),
+                  Math.min(penetration, totalSpacedArmorThickness))
           );
 
           /**
@@ -308,19 +305,19 @@ export function SpacedArmorSceneComponent({
            * for parity's sake, I am capping the value here.
            */
 
-          if (shot.in.layers.length > 1 || lastLayer.status === 'blocked') {
+          if (shot.in.layers.length > 1 || lastLayer.status === "blocked") {
-            shot.in.status = finalDamage > 0 ? 'splash' : 'blocked';
+            shot.in.status = finalDamage > 0 ? "splash" : "blocked";
             shot.damage = finalDamage;
           } else {
-            shot.in.status = 'penetration';
+            shot.in.status = "penetration";
             shot.damage = shell.armor_damage;
           }
         } else {
-          if (lastLayer.status === 'blocked') {
+          if (lastLayer.status === "blocked") {
-            shot.in.status = 'blocked';
+            shot.in.status = "blocked";
             shot.damage = 0;
-          } else if (lastLayer.status === 'penetration') {
+          } else if (lastLayer.status === "penetration") {
-            shot.in.status = 'penetration';
+            shot.in.status = "penetration";
             shot.damage = shell.armor_damage;
           } else {
             const caster = new Raycaster();
@@ -331,29 +328,29 @@ export function SpacedArmorSceneComponent({
               .sub(
                 lastLayer.surfaceNormal
                   .clone()
-                  .multiplyScalar(2 * shellNormal.dot(lastLayer.surfaceNormal)),
+                  .multiplyScalar(2 * shellNormal.dot(lastLayer.surfaceNormal))
               );
 
             caster.set(lastLayer.point, ricochetNormal);
 
             const ricochetIntersections = caster.intersectObjects(
               props.scene.children,
-              true,
+              true
             );
-            const outShot = await shoot(
+            const outShot = shoot(
               lastLayer.point,
               ricochetIntersections,
               false,
-              remainingPenetration,
+              remainingPenetration
             );
 
-            shot.in.status = 'ricochet';
+            shot.in.status = "ricochet";
             if (outShot === null) {
               shot.damage = 0;
               shot.out = {
                 surfaceNormal: ricochetNormal,
                 layers: [],
-                status: 'ricochet',
+                status: "ricochet",
               };
             } else {
               shot.damage = outShot.damage;
@@ -366,7 +363,7 @@ export function SpacedArmorSceneComponent({
 
       return shot;
     },
-    [camera],
+    [camera]
   );
 
   return (
@@ -386,14 +383,14 @@ export function SpacedArmorSceneComponent({
                     thickness,
                   } satisfies ArmorUserData
                 }
-                onClick={async (event) => {
+                onClick={(event) => {
                   event.stopPropagation();
-                  const shot = (await shoot(
+
-                    event.point,
+                  const shot = shoot(event.point, event.intersections, true)!;
-                    event.intersections,
+
-                    true,
+                  Tankopedia.mutate((draft) => {
-                  ))!;
+                    draft.shot = shot;
-                  tankopediaEphemeralStore.setState({ shot });
+                  });
                 }}
               />
             );

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

@@ -1,23 +1,22 @@
-import { normalizeAngleRad } from '@blitzkit/core';
+import { useThree, type ThreeEvent } from "@react-three/fiber";
-import { useThree, type ThreeEvent } from '@react-three/fiber';
+import { memo, useRef } from "react";
-import { memo, useRef } from 'react';
+import { Group, Plane, Vector2, Vector3 } from "three";
-import { Group, Plane, Vector2, Vector3 } from 'three';
+import { applyPitchYawLimits } from "../../../core/blitz/applyPitchYawLimits";
-import { applyPitchYawLimits } from '../../../core/blitz/applyPitchYawLimits';
+import { correctZYTuple } from "../../../core/blitz/correctZYTuple";
-import { correctZYTuple } from '../../../core/blitz/correctZYTuple';
+import { hasEquipment } from "../../../core/blitzkit/hasEquipment";
-import { hasEquipment } from '../../../core/blitzkit/hasEquipment';
+import { modelTransformEvent } from "../../../core/blitzkit/modelTransform";
-import { modelTransformEvent } from '../../../core/blitzkit/modelTransform';
+import { nameToArmorId } from "../../../core/blitzkit/nameToArmorId";
-import { nameToArmorId } from '../../../core/blitzkit/nameToArmorId';
+import { resolveArmor } from "../../../core/blitzkit/resolveThickness";
-import { resolveArmor } from '../../../core/blitzkit/resolveThickness';
+import { useArmor } from "../../../hooks/useArmor";
-import { useArmor } from '../../../hooks/useArmor';
+import { useModel } from "../../../hooks/useModel";
-import { useModel } from '../../../hooks/useModel';
+import { useTankModelDefinition } from "../../../hooks/useTankModelDefinition";
-import { useTankModelDefinition } from '../../../hooks/useTankModelDefinition';
+import { useTankTransform } from "../../../hooks/useTankTransform";
-import { useTankTransform } from '../../../hooks/useTankTransform';
+import { Duel } from "../../../stores/duel";
-import { Duel } from '../../../stores/duel';
+import { Tankopedia } from "../../../stores/tankopedia";
-import { TankopediaEphemeral } from '../../../stores/tankopediaEphemeral';
+import { TankopediaPersistent } from "../../../stores/tankopediaPersistent";
-import { TankopediaPersistent } from '../../../stores/tankopediaPersistent';
+import { ModelTankWrapper } from "./ModelTankWrapper";
-import { ModelTankWrapper } from './ModelTankWrapper';
+import { ArmorType } from "./SpacedArmorScene";
-import { ArmorType } from './SpacedArmorScene';
+import { StaticArmorSceneComponent } from "./StaticArmorSceneComponent";
-import { StaticArmorSceneComponent } from './StaticArmorSceneComponent';
 
 interface ArmorSceneProps {
   thicknessRange: ThicknessRange;
@@ -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,30 +41,27 @@ export const StaticArmor = memo<ArmorSceneProps>(({ thicknessRange }) => {
   const tankModelDefinition = useTankModelDefinition();
   const trackModelDefinition = tankModelDefinition.tracks[track.id];
   const turretModelDefinition = tankModelDefinition.turrets[turret.id];
-  const gunModelDefinition =
+  const gunModelDefinition = turretModelDefinition.guns[gun.id];
-    turretModelDefinition.guns[gun.gun_type!.value.base.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
       ? undefined
       : gunModelDefinition.mask + hullOrigin.y + turretOrigin.y + gunOrigin.y;
   const showPrimaryArmor = TankopediaPersistent.use(
-    (state) => state.showPrimaryArmor,
+    (state) => state.showPrimaryArmor
   );
   const showSpacedArmor = TankopediaPersistent.use(
-    (state) => state.showSpacedArmor,
+    (state) => state.showSpacedArmor
   );
   const showExternalModules = TankopediaPersistent.use(
-    (state) => state.showExternalModules,
+    (state) => state.showExternalModules
   );
   const isDynamicArmorActive = Duel.use((state) =>
-    state.protagonist.consumables.includes(73),
+    state.protagonist.consumables.includes(73)
   );
 
   useTankTransform(track, turret, turretContainer, gunContainer);
@@ -75,12 +70,12 @@ export const StaticArmor = memo<ArmorSceneProps>(({ thicknessRange }) => {
     <ModelTankWrapper ref={wrapper}>
       <group position={hullOrigin}>
         {armorNodes.map((node) => {
-          const isHull = node.name.startsWith('hull_');
+          const isHull = node.name.startsWith("hull_");
           const isVisible = isHull;
           const armorId = nameToArmorId(node.name);
           const { spaced, thickness } = resolveArmor(
             tankModelDefinition.armor,
-            armorId,
+            armorId
           );
 
           if (
@@ -88,8 +83,8 @@ export const StaticArmor = memo<ArmorSceneProps>(({ thicknessRange }) => {
             thickness === undefined ||
             (!showPrimaryArmor && !spaced) ||
             (!showSpacedArmor && spaced) ||
-            (isDynamicArmorActive && node.name.includes('state_00')) ||
+            (isDynamicArmorActive && node.name.includes("state_00")) ||
-            (!isDynamicArmorActive && node.name.includes('state_01'))
+            (!isDynamicArmorActive && node.name.includes("state_01"))
           )
             return null;
 
@@ -108,8 +103,8 @@ export const StaticArmor = memo<ArmorSceneProps>(({ thicknessRange }) => {
       </group>
 
       {modelNodes.map((node) => {
-        const isWheel = node.name.startsWith('chassis_wheel_');
+        const isWheel = node.name.startsWith("chassis_wheel_");
-        const isTrack = node.name.startsWith('chassis_track_');
+        const isTrack = node.name.startsWith("chassis_track_");
         const isVisible = isWheel || isTrack;
 
         if (!isVisible || !showExternalModules) return null;
@@ -131,13 +126,13 @@ export const StaticArmor = memo<ArmorSceneProps>(({ thicknessRange }) => {
       <group ref={turretContainer}>
         {armorNodes.map((node) => {
           const isCurrentTurret = node.name.startsWith(
-            `turret_${turretModelDefinition.model_id.toString().padStart(2, '0')}`,
+            `turret_${turretModelDefinition.model_id.toString().padStart(2, "0")}`
           );
           const isVisible = isCurrentTurret;
           const armorId = nameToArmorId(node.name);
           const { spaced, thickness } = resolveArmor(
             turretModelDefinition.armor,
-            armorId,
+            armorId
           );
 
           if (
@@ -145,71 +140,63 @@ export const StaticArmor = memo<ArmorSceneProps>(({ thicknessRange }) => {
             thickness === undefined ||
             (!showPrimaryArmor && !spaced) ||
             (!showSpacedArmor && spaced) ||
-            (isDynamicArmorActive && node.name.includes('state_00')) ||
+            (isDynamicArmorActive && node.name.includes("state_00")) ||
-            (!isDynamicArmorActive && node.name.includes('state_01'))
+            (!isDynamicArmorActive && node.name.includes("state_01"))
           ) {
             return null;
           }
 
           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) => {
+            Tankopedia.mutate((draft) => {
               draft.controlsEnabled = false;
             });
-            mutateTankopediaEphemeral((draft) => {
+            Tankopedia.mutate((draft) => {
               draft.shot = undefined;
               draft.highlightArmor = undefined;
             });
-            window.addEventListener('pointermove', handlePointerMove);
+            window.addEventListener("pointermove", handlePointerMove);
-            window.addEventListener('pointerup', handlePointerUp);
+            window.addEventListener("pointerup", handlePointerUp);
           }
-          async function handlePointerMove(event: PointerEvent) {
+          function handlePointerMove(event: PointerEvent) {
-            const duel = duelStore.getState();
+            const hasImprovedVerticalStabilizer = hasEquipment(
-            const hasImprovedVerticalStabilizer = await hasEquipment(
               122,
-              duel.protagonist.tank.equipment_preset,
+              Duel.state.protagonist.tank.equipment_preset,
-              duel.protagonist.equipmentMatrix,
+              Duel.state.protagonist.equipmentMatrix
             );
-            const hasDownImprovedVerticalStabilizer = await hasEquipment(
+            const hasDownImprovedVerticalStabilizer = hasEquipment(
               124,
-              duel.protagonist.tank.equipment_preset,
+              Duel.state.protagonist.tank.equipment_preset,
-              duel.protagonist.equipmentMatrix,
+              Duel.state.protagonist.equipmentMatrix
             );
             const boundingRect = canvas.getBoundingClientRect();
 
             delta.set(event.clientX, event.clientY).sub(position);
             position.set(event.clientX, event.clientY);
 
-            [pitch, yaw] = applyPitchYawLimits(
+            const [pitch, yaw] = applyPitchYawLimits(
-              pitch,
+              modelTransformEvent.last!.pitch,
-              yaw + delta.x * (Math.PI / boundingRect.width),
+              modelTransformEvent.last!.yaw +
+                delta.x * (Math.PI / boundingRect.width),
               gunModelDefinition.pitch,
               turretModelDefinition.yaw,
               hasImprovedVerticalStabilizer,
-              hasDownImprovedVerticalStabilizer,
+              hasDownImprovedVerticalStabilizer
             );
-            modelTransformEvent.emit({ pitch, yaw });
+            modelTransformEvent.dispatch({ pitch, yaw });
           }
           function handlePointerUp() {
-            mutateDuel((draft) => {
+            Tankopedia.mutate((draft) => {
-              draft.protagonist.pitch = normalizeAngleRad(pitch);
-              draft.protagonist.yaw = normalizeAngleRad(yaw);
-            });
-            mutateTankopediaEphemeral((draft) => {
               draft.controlsEnabled = true;
             });
-            window.removeEventListener('pointermove', handlePointerMove);
+            window.removeEventListener("pointermove", handlePointerMove);
-            window.removeEventListener('pointerup', handlePointerUp);
+            window.removeEventListener("pointerup", handlePointerUp);
           }
 
           return (
@@ -218,7 +205,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}
@@ -232,13 +218,13 @@ export const StaticArmor = memo<ArmorSceneProps>(({ thicknessRange }) => {
         <group ref={gunContainer}>
           {armorNodes.map((node) => {
             const isCurrentGun = node.name.startsWith(
-              `gun_${gunModelDefinition.model_id.toString().padStart(2, '0')}`,
+              `gun_${gunModelDefinition.model_id.toString().padStart(2, "0")}`
             );
             const isVisible = isCurrentGun;
             const armorId = nameToArmorId(node.name);
             const { spaced, thickness } = resolveArmor(
               gunModelDefinition.armor,
-              armorId,
+              armorId
             );
 
             if (
@@ -246,70 +232,63 @@ export const StaticArmor = memo<ArmorSceneProps>(({ thicknessRange }) => {
               thickness === undefined ||
               (!showPrimaryArmor && !spaced) ||
               (!showSpacedArmor && spaced) ||
-              (isDynamicArmorActive && node.name.includes('state_00')) ||
+              (isDynamicArmorActive && node.name.includes("state_00")) ||
-              (!isDynamicArmorActive && node.name.includes('state_01'))
+              (!isDynamicArmorActive && node.name.includes("state_01"))
             )
               return null;
 
             const position = new Vector2();
             const delta = new Vector2();
-            let pitch = 0;
-            let yaw = 0;
 
             function onPointerDown(event: ThreeEvent<PointerEvent>) {
               event.stopPropagation();
 
-              mutateTankopediaEphemeral((draft) => {
+              Tankopedia.mutate((draft) => {
                 draft.controlsEnabled = false;
               });
-              mutateTankopediaEphemeral((draft) => {
+              Tankopedia.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("pointermove", handlePointerMove);
-              window.addEventListener('pointerup', handlePointerUp);
+              window.addEventListener("pointerup", handlePointerUp);
             }
-            async function handlePointerMove(event: PointerEvent) {
+            function handlePointerMove(event: PointerEvent) {
-              const duel = duelStore.getState();
+              const hasImprovedVerticalStabilizer = hasEquipment(
-              const hasImprovedVerticalStabilizer = await hasEquipment(
                 122,
-                duel.protagonist.tank.equipment_preset,
+                Duel.state.protagonist.tank.equipment_preset,
-                duel.protagonist.equipmentMatrix,
+                Duel.state.protagonist.equipmentMatrix
               );
-              const hasDownImprovedVerticalStabilizer = await hasEquipment(
+              const hasDownImprovedVerticalStabilizer = hasEquipment(
                 124,
-                duel.protagonist.tank.equipment_preset,
+                Duel.state.protagonist.tank.equipment_preset,
-                duel.protagonist.equipmentMatrix,
+                Duel.state.protagonist.equipmentMatrix
               );
               const boundingRect = canvas.getBoundingClientRect();
               delta.set(event.clientX, event.clientY).sub(position);
               position.set(event.clientX, event.clientY);
 
-              [pitch, yaw] = applyPitchYawLimits(
+              const [pitch, yaw] = applyPitchYawLimits(
-                pitch - delta.y * (Math.PI / boundingRect.height),
+                modelTransformEvent.last!.pitch -
-                yaw + delta.x * (Math.PI / boundingRect.width),
+                  delta.y * (Math.PI / boundingRect.height),
+                modelTransformEvent.last!.yaw +
+                  delta.x * (Math.PI / boundingRect.width),
                 gunModelDefinition.pitch,
                 turretModelDefinition.yaw,
                 hasImprovedVerticalStabilizer,
-                hasDownImprovedVerticalStabilizer,
+                hasDownImprovedVerticalStabilizer
               );
-              modelTransformEvent.emit({ pitch, yaw });
+              modelTransformEvent.dispatch({ pitch, yaw });
             }
             function handlePointerUp() {
-              mutateTankopediaEphemeral((draft) => {
+              Tankopedia.mutate((draft) => {
                 draft.controlsEnabled = true;
               });
-              mutateDuel((draft) => {
+              window.removeEventListener("pointermove", handlePointerMove);
-                draft.protagonist.pitch = normalizeAngleRad(pitch);
+              window.removeEventListener("pointerup", handlePointerUp);
-                draft.protagonist.yaw = normalizeAngleRad(yaw);
-              });
-              window.removeEventListener('pointermove', handlePointerMove);
-              window.removeEventListener('pointerup', handlePointerUp);
             }
 
             return (
@@ -331,7 +310,7 @@ export const StaticArmor = memo<ArmorSceneProps>(({ thicknessRange }) => {
           {modelNodes.map((node) => {
             const gunString = `gun_${gunModelDefinition.model_id
               .toString()
-              .padStart(2, '0')}`;
+              .padStart(2, "0")}`;
             const isCurrentGun = gunModelDefinition.mask
               ? node.name.startsWith(gunString)
               : node.name === gunString;
@@ -341,63 +320,56 @@ 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) => {
+              Tankopedia.mutate((draft) => {
                 draft.controlsEnabled = false;
               });
-              mutateTankopediaEphemeral((draft) => {
+              Tankopedia.mutate((draft) => {
                 draft.shot = undefined;
                 draft.highlightArmor = undefined;
               });
 
               position.set(event.clientX, event.clientY);
-              pitch = protagonist.pitch;
+              window.addEventListener("pointermove", handlePointerMove);
-              yaw = protagonist.yaw;
+              window.addEventListener("pointerup", handlePointerUp);
-
-              window.addEventListener('pointermove', handlePointerMove);
-              window.addEventListener('pointerup', handlePointerUp);
             }
-            async function handlePointerMove(event: PointerEvent) {
+            function handlePointerMove(event: PointerEvent) {
-              const duel = duelStore.getState();
+              const hasImprovedVerticalStabilizer = hasEquipment(
-              const hasImprovedVerticalStabilizer = await hasEquipment(
                 122,
-                duel.protagonist.tank.equipment_preset,
+                Duel.state.protagonist.tank.equipment_preset,
-                duel.protagonist.equipmentMatrix,
+                Duel.state.protagonist.equipmentMatrix
               );
-              const hasDownImprovedVerticalStabilizer = await hasEquipment(
+              const hasDownImprovedVerticalStabilizer = hasEquipment(
                 124,
-                duel.protagonist.tank.equipment_preset,
+                Duel.state.protagonist.tank.equipment_preset,
-                duel.protagonist.equipmentMatrix,
+                Duel.state.protagonist.equipmentMatrix
               );
               const boundingRect = canvas.getBoundingClientRect();
               delta.set(event.clientX, event.clientY).sub(position);
               position.set(event.clientX, event.clientY);
 
-              [pitch, yaw] = applyPitchYawLimits(
+              const [pitch, yaw] = applyPitchYawLimits(
-                pitch - delta.y * (Math.PI / boundingRect.height),
+                modelTransformEvent.last!.pitch -
-                yaw + delta.x * (Math.PI / boundingRect.width),
+                  delta.y * (Math.PI / boundingRect.height),
+                modelTransformEvent.last!.yaw +
+                  delta.x * (Math.PI / boundingRect.width),
                 gunModelDefinition.pitch,
                 turretModelDefinition.yaw,
                 hasImprovedVerticalStabilizer,
-                hasDownImprovedVerticalStabilizer,
+                hasDownImprovedVerticalStabilizer
               );
-              modelTransformEvent.emit({ pitch, yaw });
+              modelTransformEvent.dispatch({ pitch, yaw });
             }
             function handlePointerUp() {
-              mutateTankopediaEphemeral((draft) => {
+              Tankopedia.mutate((draft) => {
                 draft.controlsEnabled = true;
               });
-              mutateDuel((draft) => {
+
-                draft.protagonist.pitch = normalizeAngleRad(pitch);
+              window.removeEventListener("pointermove", handlePointerMove);
-                draft.protagonist.yaw = normalizeAngleRad(yaw);
+              window.removeEventListener("pointerup", handlePointerUp);
-              });
-              window.removeEventListener('pointermove', handlePointerMove);
-              window.removeEventListener('pointerup', handlePointerUp);
             }
 
             return (

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

@@ -1,7 +1,8 @@
-import { I_HAT, J_HAT } from '@blitzkit/core';
+import { I_HAT, J_HAT } from "@blitzkit/core";
-import { type MeshProps, useThree } from '@react-three/fiber';
+import { type MeshProps, useThree } from "@react-three/fiber";
-import { clamp } from 'lodash-es';
+import { clamp } from "lodash-es";
-import { useEffect, useMemo } from 'react';
+import type { QuicklimeEvent } from "quicklime";
+import { useEffect, useMemo } from "react";
 import {
   Box3,
   Color,
@@ -9,33 +10,33 @@ import {
   FrontSide,
   LineBasicMaterial,
   Mesh,
-  MeshStandardMaterial,
+  MeshBasicMaterial,
   Object3D,
   Plane,
   Quaternion,
   Vector3,
-} from 'three';
+} from "three";
-import { unrotateDavaVector } from '../../../core/blitz/unrotateDavaVector';
+import { unrotateDavaVector } from "../../../core/blitz/unrotateDavaVector";
-import { jsxTree } from '../../../core/blitzkit/jsxTree';
+import { jsxTree } from "../../../core/blitzkit/jsxTree";
 import {
   type ModelTransformEventData,
   modelTransformEvent,
-} from '../../../core/blitzkit/modelTransform';
+} from "../../../core/blitzkit/modelTransform";
-import { discardClippingPlane } from '../../../core/three/discardClippingPlane';
+import { discardClippingPlane } from "../../../core/three/discardClippingPlane";
-import { TankopediaEphemeral } from '../../../stores/tankopediaEphemeral';
+import { Tankopedia } from "../../../stores/tankopedia";
-import { ArmorType } from './SpacedArmorScene';
+import { ArmorType } from "./SpacedArmorScene";
 import type {
   ArmorUserData,
   ExternalModuleVariant,
-} from './SpacedArmorSceneComponent';
+} from "./SpacedArmorSceneComponent";
-import type { ThicknessRange } from './StaticArmor';
+import type { ThicknessRange } from "./StaticArmor";
 
 type StaticArmorSceneComponentProps = {
   name: string;
   thickness: number;
   thicknessRange: ThicknessRange;
   node: Object3D;
-  onPointerDown?: MeshProps['onPointerDown'];
+  onPointerDown?: MeshProps["onPointerDown"];
 } & (
   | {
       type: Exclude<ArmorType, ArmorType.External>;
@@ -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);
@@ -91,7 +90,7 @@ export function StaticArmorSceneComponent({
       color = new Color(
         clamp(1 - (7 / 8) * xClamped, 0, 1),
         0,
-        clamp(1 - (1 / 8) * xClamped, 0, 1),
+        clamp(1 - (1 / 8) * xClamped, 0, 1)
       );
       opacity = clamp(x + 1 / 2, 0, 1);
       break;
@@ -107,14 +106,14 @@ export function StaticArmorSceneComponent({
 
   const surfaceMaterial = useMemo(
     () =>
-      new MeshStandardMaterial({
+      new MeshBasicMaterial({
         color,
         opacity,
         transparent: opacity < 1,
         depthWrite,
         ...(props.clip ? { clippingPlanes: [props.clip] } : {}),
       }),
-    [thickness],
+    [thickness]
   );
   const outlineMaterial = useMemo(
     () =>
@@ -123,7 +122,7 @@ export function StaticArmorSceneComponent({
           .clone()
           .multiplyScalar(props.type === ArmorType.Spaced ? 2 ** 2 : 2 ** -1),
       }),
-    [thickness],
+    [thickness]
   );
 
   useEffect(() => {
@@ -138,11 +137,11 @@ export function StaticArmorSceneComponent({
         outlineMaterial.visible = true;
       } else if (
         selectedName === name ||
-        (name.startsWith('chassis_') && selectedName.startsWith('chassis_')) ||
+        (name.startsWith("chassis_") && selectedName.startsWith("chassis_")) ||
-        (name.startsWith('gun_') &&
+        (name.startsWith("gun_") &&
-          selectedName.startsWith('gun_') &&
+          selectedName.startsWith("gun_") &&
-          !name.includes('_armor_') &&
+          !name.includes("_armor_") &&
-          !selectedName.includes('_armor_'))
+          !selectedName.includes("_armor_"))
       ) {
         // this selected, stand out!
         surfaceMaterial.opacity = 1;
@@ -165,9 +164,9 @@ export function StaticArmorSceneComponent({
     }
 
     const unsubscribes = [
-      tankopediaEphemeralStore.subscribe(
+      Tankopedia.on(
         (state) => state.highlightArmor?.name,
-        handleHighlightArmor,
+        handleHighlightArmor
       ),
     ];
 
@@ -180,22 +179,24 @@ export function StaticArmorSceneComponent({
       const { clip } = props;
       const gunOrigin = unrotateDavaVector(props.gunOrigin.clone());
       const neckOrigin = unrotateDavaVector(props.hullOrigin.clone()).add(
-        unrotateDavaVector(props.turretOrigin.clone()),
+        unrotateDavaVector(props.turretOrigin.clone())
       );
       const barrelOrigin = neckOrigin.clone().add(gunOrigin);
       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(I_HAT, event.data.pitch)
-          .applyAxisAngle(J_HAT, data.yaw ?? 0);
+          .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();
@@ -226,7 +227,7 @@ export function StaticArmorSceneComponent({
                 {
                   type: props.type,
                   variant:
-                    props.type === ArmorType.External ? props.variant : 'gun',
+                    props.type === ArmorType.External ? props.variant : "gun",
                   thickness,
                 } satisfies ArmorUserData
               }
@@ -235,7 +236,7 @@ export function StaticArmorSceneComponent({
 
                 event.stopPropagation();
 
-                const { editStatic } = tankopediaEphemeralStore.getState();
+                const { editStatic } = Tankopedia.state;
 
                 const bounds = new Box3().setFromObject(event.object);
                 const point = bounds.min
@@ -250,13 +251,13 @@ export function StaticArmorSceneComponent({
                 const surfaceNormal = event
                   .normal!.clone()
                   .applyQuaternion(
-                    event.object.getWorldQuaternion(new Quaternion()),
+                    event.object.getWorldQuaternion(new Quaternion())
                   );
                 const angle = surfaceNormal.angleTo(cameraNormal);
                 const thicknessAngled =
                   thickness / Math.sin(Math.PI / 2 - angle);
 
-                mutateTankopediaEphemeralStore((draft) => {
+                Tankopedia.mutate((draft) => {
                   draft.highlightArmor = {
                     type: props.type,
                     name,

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

@@ -1,19 +1,19 @@
-import { assertSecret, idToRegion } from '@blitzkit/core';
+import { assertSecret, idToRegion } from "@blitzkit/core";
-import { Button, Flex, Heading, Text } from '@radix-ui/themes';
+import { Button, Flex, Heading, Text } from "@radix-ui/themes";
-import { useEffect, useState } from 'react';
+import { useEffect, useState } from "react";
 import {
   LocaleProvider,
   useLocale,
   type LocaleAcceptorProps,
-} from '../../hooks/useLocale';
+} from "../../hooks/useLocale";
-import { App } from '../../stores/app';
+import { App } from "../../stores/app";
-import { CURRENT_POLICIES_AGREEMENT_INDEX } from '../../stores/app/constants';
+import { CURRENT_POLICIES_AGREEMENT_INDEX } from "../../stores/app/constants";
-import { LinkI18n } from '../LinkI18n';
+import { LinkI18n } from "../LinkI18n";
-import './index.css';
+import "./index.css";
 
 type Extension =
   | {
-      status: 'ok';
+      status: "ok";
       data: {
         access_token: string;
         account_id: number;
@@ -21,15 +21,13 @@ type Extension =
       };
     }
   | {
-      status: 'error';
+      status: "error";
     };
 
 export function Checks({ locale }: LocaleAcceptorProps) {
   return (
     <LocaleProvider locale={locale}>
-      <App.Provider>
+      <Content />
-        <Content />
-      </App.Provider>
     </LocaleProvider>
   );
 }
@@ -40,19 +38,17 @@ export function Checks({ locale }: LocaleAcceptorProps) {
 function Content() {
   const { locale } = useLocale();
   const logins = App.use((state) => state.logins);
-  const mutateApp = App.useMutation();
-  const appStore = App.useStore();
   const policiesAgreementIndex = App.use(
-    (state) => state.policiesAgreementIndex,
+    (state) => state.policiesAgreementIndex
   );
-  const isLegal = window.location.pathname.startsWith('/legal');
+  const isLegal = window.location.pathname.startsWith("/legal");
   const [showPoliciesAgreement, setShowPoliciesAgreement] = useState(false);
 
   useEffect(() => {
     function unsubscribe() {
-      window.removeEventListener('scroll', show);
+      window.removeEventListener("scroll", show);
-      window.removeEventListener('pointermove', show);
+      window.removeEventListener("pointermove", show);
-      window.removeEventListener('pointerdown', show);
+      window.removeEventListener("pointerdown", show);
     }
 
     function show() {
@@ -64,9 +60,9 @@ function Content() {
       policiesAgreementIndex !== CURRENT_POLICIES_AGREEMENT_INDEX &&
       !isLegal
     ) {
-      window.addEventListener('scroll', show);
+      window.addEventListener("scroll", show);
-      window.addEventListener('pointermove', show);
+      window.addEventListener("pointermove", show);
-      window.addEventListener('pointerdown', show);
+      window.addEventListener("pointerdown", show);
     }
 
     return unsubscribe;
@@ -78,25 +74,25 @@ function Content() {
       const expiresInDays = expiresIn / 1000 / 60 / 60 / 24;
 
       if (expiresInDays < 0) {
-        mutateApp((draft) => {
+        App.mutate((draft) => {
           draft.logins.wargaming = undefined;
         });
       } else if (expiresInDays < 7) {
-        const { wargaming } = appStore.getState().logins;
+        const { wargaming } = App.state.logins;
 
         if (!wargaming) return;
 
         fetch(
           `https://api.worldoftanks.${idToRegion(
-            wargaming.id,
+            wargaming.id
           )}/wot/auth/prolongate/?application_id=${assertSecret(
-            import.meta.env.PUBLIC_WARGAMING_APPLICATION_ID,
+            import.meta.env.PUBLIC_WARGAMING_APPLICATION_ID
-          )}&access_token=${wargaming.token}`,
+          )}&access_token=${wargaming.token}`
         )
           .then((response) => response.json() as Promise<Extension>)
           .then((json) => {
-            mutateApp((draft) => {
+            App.mutate((draft) => {
-              if (json.status === 'error') {
+              if (json.status === "error") {
                 draft.logins.wargaming = undefined;
               } else {
                 draft.logins.wargaming = {
@@ -126,11 +122,11 @@ function Content() {
 
             <Text>
               This website utilizes cookies to perform analytics and personalize
-              your experience. You can learn more through{' '}
+              your experience. You can learn more through{" "}
               <LinkI18n locale={locale} href="/docs/legal/privacy-policy">
                 our privacy policy
               </LinkI18n>
-              . By using BlitzKit, you also agree to our{' '}
+              . By using BlitzKit, you also agree to our{" "}
               <LinkI18n locale={locale} href="/docs/legal/terms-of-service">
                 terms of service
               </LinkI18n>
@@ -141,8 +137,8 @@ function Content() {
           <Button
             mt="2"
             onClick={() => {
-              appStore.setState({
+              App.mutate((draft) => {
-                policiesAgreementIndex: CURRENT_POLICIES_AGREEMENT_INDEX,
+                draft.policiesAgreementIndex = CURRENT_POLICIES_AGREEMENT_INDEX;
               });
               setShowPoliciesAgreement(false);
             }}

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

@@ -1,11 +1,11 @@
-import { asset } from '@blitzkit/core';
+import { asset } from "@blitzkit/core";
-import { Flex, Heading, IconButton, Table } from '@radix-ui/themes';
+import { Flex, Heading, IconButton, Table } from "@radix-ui/themes";
-import type { TankCharacteristics } from '../../core/blitzkit/tankCharacteristics';
+import type { TankCharacteristics } from "../../core/blitzkit/tankCharacteristics";
-import { useLocale } from '../../hooks/useLocale';
+import { useLocale } from "../../hooks/useLocale";
-import { CompareEphemeral } from '../../stores/compareEphemeral';
+import { CompareEphemeral } from "../../stores/compareEphemeral";
-import { StickyColumnHeaderCell } from '../StickyColumnHeaderCell';
+import { StickyColumnHeaderCell } from "../StickyColumnHeaderCell";
-import { CompareRow } from './CompareRow';
+import { CompareRow } from "./CompareRow";
-import { CompareSectionTitle } from './CompareSectionTitle';
+import { CompareSectionTitle } from "./CompareSectionTitle";
 
 interface BodyProps {
   stats: TankCharacteristics[];
@@ -14,10 +14,9 @@ interface BodyProps {
 export function Body({ stats }: BodyProps) {
   const members = CompareEphemeral.use((state) => state.members);
   const hasNonRegularGun = members.some(
-    ({ gun }) => gun.gun_type!.$case !== 'regular',
+    ({ gun }) => gun.gun_type!.$case !== "regular"
   );
   const { unwrap, strings } = useLocale();
-  const mutateCompareEphemeral = CompareEphemeral.useMutation();
 
   return (
     <>
@@ -33,43 +32,35 @@ export function Body({ stats }: BodyProps) {
             <StickyColumnHeaderCell key={key} top={137}>
               <Flex justify="center">
                 <Flex>
-                  {gun.gun_type!.value.base.shells.map(
+                  {gun.shells.map((thisShell, shellIndex) => (
-                    (thisShell, shellIndex) => (
+                    <IconButton
-                      <IconButton
+                      color={thisShell.id === shell.id ? undefined : "gray"}
-                        color={thisShell.id === shell.id ? undefined : 'gray'}
+                      variant="soft"
-                        variant="soft"
+                      key={thisShell.id}
-                        key={thisShell.id}
+                      style={{
-                        style={{
+                        borderTopLeftRadius: shellIndex === 0 ? undefined : 0,
-                          borderTopLeftRadius: shellIndex === 0 ? undefined : 0,
+                        borderBottomLeftRadius:
-                          borderBottomLeftRadius:
+                          shellIndex === 0 ? undefined : 0,
-                            shellIndex === 0 ? undefined : 0,
+                        borderTopRightRadius:
-                          borderTopRightRadius:
+                          shellIndex === gun.shells.length - 1 ? undefined : 0,
-                            shellIndex ===
+                        borderBottomRightRadius:
-                            gun.gun_type!.value.base.shells.length - 1
+                          shellIndex === gun.shells.length - 1 ? undefined : 0,
-                              ? undefined
+                        marginLeft: shellIndex === 0 ? 0 : -1,
-                              : 0,
+                      }}
-                          borderBottomRightRadius:
+                      onClick={() => {
-                            shellIndex ===
+                        CompareEphemeral.mutate((draft) => {
-                            gun.gun_type!.value.base.shells.length - 1
+                          draft.members[index].shell = thisShell;
-                              ? undefined
+                        });
-                              : 0,
+                      }}
-                          marginLeft: shellIndex === 0 ? 0 : -1,
+                    >
-                        }}
+                      <img
-                        onClick={() => {
+                        alt={unwrap(thisShell.name)}
-                          mutateCompareEphemeral((draft) => {
+                        width={16}
-                            draft.members[index].shell = thisShell;
+                        height={16}
-                          });
+                        src={asset(`icons/shells/${thisShell.icon}.webp`)}
-                        }}
+                      />
-                      >
+                    </IconButton>
-                        <img
+                  ))}
-                          alt={unwrap(thisShell.name)}
-                          width={16}
-                          height={16}
-                          src={asset(`icons/shells/${thisShell.icon}.webp`)}
-                        />
-                      </IconButton>
-                    ),
-                  )}
                 </Flex>
               </Flex>
             </StickyColumnHeaderCell>
@@ -96,7 +87,7 @@ export function Body({ stats }: BodyProps) {
           }
           display={(stats) =>
             stats.shellReload?.toFixed(2) ??
-            stats.shellReloads!.map((reload) => reload.toFixed(2)).join(', ')
+            stats.shellReloads!.map((reload) => reload.toFixed(2)).join(", ")
           }
           deltaNominalDisplay={(delta) => delta.toFixed(2)}
         />

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

@@ -2,21 +2,21 @@ import {
   CaretLeftIcon,
   CaretRightIcon,
   CaretSortIcon,
-} from '@radix-ui/react-icons';
+} from "@radix-ui/react-icons";
-import { Flex, IconButton, Table, Text } from '@radix-ui/themes';
+import { Flex, IconButton, Table, Text } from "@radix-ui/themes";
-import { useRef } from 'react';
+import { useRef } from "react";
-import type { TankCharacteristics } from '../../core/blitzkit/tankCharacteristics';
+import type { TankCharacteristics } from "../../core/blitzkit/tankCharacteristics";
-import { Var } from '../../core/radix/var';
+import { Var } from "../../core/radix/var";
-import { useLocale } from '../../hooks/useLocale';
+import { useLocale } from "../../hooks/useLocale";
-import { CompareEphemeral } from '../../stores/compareEphemeral';
+import { CompareEphemeral } from "../../stores/compareEphemeral";
-import { ComparePersistent } from '../../stores/comparePersistent';
+import { ComparePersistent } from "../../stores/comparePersistent";
-import { StickyRowHeaderCell } from '../StickyRowHeaderCell';
+import { StickyRowHeaderCell } from "../StickyRowHeaderCell";
 
 type CompareRowProps = {
   display?: (
-    member: Awaited<TankCharacteristics>,
+    member: Awaited<TankCharacteristics>
   ) => number | string | undefined;
-  deltaType?: 'higherIsBetter' | 'lowerIsBetter';
+  deltaType?: "higherIsBetter" | "lowerIsBetter";
   decimals?: number;
   deltaNominalDisplay?: (delta: number) => string | number;
   indent?: boolean;
@@ -33,7 +33,7 @@ type CompareRowProps = {
 
 export function CompareRow({
   display,
-  deltaType = 'higherIsBetter',
+  deltaType = "higherIsBetter",
   decimals,
   deltaNominalDisplay,
   indent,
@@ -41,17 +41,16 @@ export function CompareRow({
   ...props
 }: CompareRowProps) {
   const { strings } = useLocale();
-  const mutateCompareEphemeral = CompareEphemeral.useMutation();
   const sorting = CompareEphemeral.use((state) => state.sorting);
   const deltaMode = ComparePersistent.use((state) => state.deltaMode);
   const values = stats.map((stat) =>
-    typeof props.value === 'function'
+    typeof props.value === "function"
       ? props.value(stat)!
-      : (stat[props.value] as number),
+      : (stat[props.value] as number)
   );
   const id = useRef(Math.random());
   const name =
-    typeof props.value === 'string'
+    typeof props.value === "string"
       ? strings.website.tools.tankopedia.characteristics.values[props.value]
       : props.name;
 
@@ -60,21 +59,21 @@ export function CompareRow({
       <StickyRowHeaderCell>
         <Flex
           align="center"
-          style={{ whiteSpace: 'nowrap' }}
+          style={{ whiteSpace: "nowrap" }}
-          gap={indent ? { initial: '4', sm: '6' } : { initial: '1', sm: '2' }}
+          gap={indent ? { initial: "4", sm: "6" } : { initial: "1", sm: "2" }}
         >
           <IconButton
-            color={sorting?.by === id.current ? undefined : 'gray'}
+            color={sorting?.by === id.current ? undefined : "gray"}
             variant="ghost"
             onClick={() => {
-              mutateCompareEphemeral((draft) => {
+              CompareEphemeral.mutate((draft) => {
                 draft.members.sort((memberA, memberB) => {
                   const indexA = draft.members.indexOf(memberA);
                   const indexB = draft.members.indexOf(memberB);
                   const valueA = values[indexA];
                   const valueB = values[indexB];
 
-                  return draft.sorting?.direction === 'ascending' &&
+                  return draft.sorting?.direction === "ascending" &&
                     draft.sorting.by === id.current
                     ? valueA - valueB
                     : valueB - valueA;
@@ -83,26 +82,26 @@ export function CompareRow({
                 draft.sorting = {
                   by: id.current,
                   direction:
-                    draft.sorting?.direction === 'ascending' &&
+                    draft.sorting?.direction === "ascending" &&
                     draft.sorting.by === id.current
-                      ? 'descending'
+                      ? "descending"
-                      : 'ascending',
+                      : "ascending",
                 };
               });
             }}
           >
             {(sorting === undefined || sorting.by !== id.current) && (
-              <CaretSortIcon style={{ transform: 'rotate(90deg)' }} />
+              <CaretSortIcon style={{ transform: "rotate(90deg)" }} />
             )}
             {sorting?.by === id.current && (
               <>
-                {sorting.direction === 'ascending' && <CaretRightIcon />}
+                {sorting.direction === "ascending" && <CaretRightIcon />}
-                {sorting.direction === 'descending' && <CaretLeftIcon />}
+                {sorting.direction === "descending" && <CaretLeftIcon />}
               </>
             )}
           </IconButton>
 
-          <Text size={{ initial: '1', sm: '2' }}>{name}</Text>
+          <Text size={{ initial: "1", sm: "2" }}>{name}</Text>
         </Flex>
       </StickyRowHeaderCell>
 
@@ -110,7 +109,7 @@ export function CompareRow({
         const delta = value - values[0];
         const deltaPercentage = value / values[0] - 1;
         const normalizedDeltaPercentage = Math.round(
-          Math.min(100, Math.abs(deltaPercentage) * 2 * 100 + 25),
+          Math.min(100, Math.abs(deltaPercentage) * 2 * 100 + 25)
         );
         const resolvedDisplayValue = display
           ? display(stats[index])
@@ -129,12 +128,12 @@ export function CompareRow({
                 value === values[0]
                   ? undefined
                   : (
-                        deltaType === 'higherIsBetter'
+                        deltaType === "higherIsBetter"
                           ? value > values[0]
                           : value < values[0]
                       )
-                    ? `color-mix(in srgb, ${Var('green-7')} ${normalizedDeltaPercentage}%, ${Var('green-3')})`
+                    ? `color-mix(in srgb, ${Var("green-7")} ${normalizedDeltaPercentage}%, ${Var("green-3")})`
-                    : `color-mix(in srgb, ${Var('red-7')} ${normalizedDeltaPercentage}%, ${Var('red-3')})`,
+                    : `color-mix(in srgb, ${Var("red-7")} ${normalizedDeltaPercentage}%, ${Var("red-3")})`,
             }}
           >
             <Flex
@@ -142,11 +141,11 @@ export function CompareRow({
               justify="center"
               gap="2"
               style={{
-                width: '100%',
+                width: "100%",
-                height: '100%',
+                height: "100%",
               }}
             >
-              <Text style={{ textAlign: 'center' }} wrap="nowrap">
+              <Text style={{ textAlign: "center" }} wrap="nowrap">
                 {resolvedDisplayValue}
               </Text>
 
@@ -154,10 +153,10 @@ export function CompareRow({
                 resolvedDisplayValue !== undefined &&
                 values[0] !== undefined && (
                   <>
-                    {deltaMode === 'absolute' && (
+                    {deltaMode === "absolute" && (
                       <Text color="gray">
                         (
-                        {`${delta > 0 ? '+' : ''}${
+                        {`${delta > 0 ? "+" : ""}${
                           deltaNominalDisplay
                             ? deltaNominalDisplay(delta)
                             : decimals === undefined
@@ -168,11 +167,11 @@ export function CompareRow({
                       </Text>
                     )}
 
-                    {deltaMode === 'percentage' && (
+                    {deltaMode === "percentage" && (
                       <Text color="gray">
                         (
-                        {`${deltaPercentage > 0 ? '+' : ''}${Math.round(
+                        {`${deltaPercentage > 0 ? "+" : ""}${Math.round(
-                          deltaPercentage * 100,
+                          deltaPercentage * 100
                         )}%`}
                         )
                       </Text>

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

@@ -1,28 +1,28 @@
-import { asset, availableProvisions, permanentSkills } from '@blitzkit/core';
+import { asset, availableProvisions, permanentSkills } from "@blitzkit/core";
-import { checkConsumableProvisionInclusivity } from '@blitzkit/core/src/blitzkit/checkConsumableProvisionInclusivity';
+import { checkConsumableProvisionInclusivity } from "@blitzkit/core/src/blitzkit/checkConsumableProvisionInclusivity";
-import { ComponentPlaceholderIcon } from '@radix-ui/react-icons';
+import { ComponentPlaceholderIcon } from "@radix-ui/react-icons";
-import { Button, Flex, IconButton, Popover, Table } from '@radix-ui/themes';
+import { Button, Flex, IconButton, Popover, Table } from "@radix-ui/themes";
-import { times } from 'lodash-es';
+import { times } from "lodash-es";
-import { awaitableConsumableDefinitions } from '../../core/awaitables/consumableDefinitions';
+import { awaitableConsumableDefinitions } from "../../core/awaitables/consumableDefinitions";
-import { awaitableEquipmentDefinitions } from '../../core/awaitables/equipmentDefinitions';
+import { awaitableEquipmentDefinitions } from "../../core/awaitables/equipmentDefinitions";
-import { awaitableProvisionDefinitions } from '../../core/awaitables/provisionDefinitions';
+import { awaitableProvisionDefinitions } from "../../core/awaitables/provisionDefinitions";
-import { awaitableSkillDefinitions } from '../../core/awaitables/skillDefinitions';
+import { awaitableSkillDefinitions } from "../../core/awaitables/skillDefinitions";
-import type { TankCharacteristics } from '../../core/blitzkit/tankCharacteristics';
+import type { TankCharacteristics } from "../../core/blitzkit/tankCharacteristics";
-import { Var } from '../../core/radix/var';
+import { Var } from "../../core/radix/var";
-import { useLocale } from '../../hooks/useLocale';
+import { useLocale } from "../../hooks/useLocale";
-import { CompareEphemeral } from '../../stores/compareEphemeral';
+import { CompareEphemeral } from "../../stores/compareEphemeral";
-import type { EquipmentMatrix } from '../../stores/duel';
+import type { EquipmentMatrix } from "../../stores/duel";
-import { BlitzkitButtonGrayIcon } from '../BlitzkitButtonGrayIcon';
+import { BlitzkitButtonGrayIcon } from "../BlitzkitButtonGrayIcon";
-import { ConsumablesManager } from '../ConsumablesManager';
+import { ConsumablesManager } from "../ConsumablesManager";
-import { CrewSkillManager } from '../CrewSkillManager';
+import { CrewSkillManager } from "../CrewSkillManager";
-import { EquipmentManager } from '../EquipmentManager';
+import { EquipmentManager } from "../EquipmentManager";
-import { ModuleManager } from '../ModuleManager';
+import { ModuleManager } from "../ModuleManager";
-import { ProvisionsManager } from '../ProvisionsManager';
+import { ProvisionsManager } from "../ProvisionsManager";
-import { StickyColumnHeaderCell } from '../StickyColumnHeaderCell';
+import { StickyColumnHeaderCell } from "../StickyColumnHeaderCell";
-import { StickyTableRoot } from '../StickyTableRoot';
+import { StickyTableRoot } from "../StickyTableRoot";
-import { Body } from './Body';
+import { Body } from "./Body";
-import { InsertionMarker } from './IntersectionMarker';
+import { InsertionMarker } from "./IntersectionMarker";
-import { TankCard } from './TankCard';
+import { TankCard } from "./TankCard";
 
 interface CompareTableProps {
   stats: TankCharacteristics[];
@@ -43,7 +43,6 @@ const [
 export function CompareTable({ stats }: CompareTableProps) {
   const crewSkills = CompareEphemeral.use((state) => state.crewSkills);
   const members = CompareEphemeral.use((state) => state.members);
-  const mutateCompareEphemeral = CompareEphemeral.useMutation();
   const { unwrap, strings } = useLocale();
 
   return (
@@ -51,20 +50,20 @@ export function CompareTable({ stats }: CompareTableProps) {
       size="1"
       variant="surface"
       style={{
-        position: 'absolute',
+        position: "absolute",
-        maxWidth: '100%',
+        maxWidth: "100%",
-        maxHeight: '100%',
+        maxHeight: "100%",
-        height: '100%',
+        height: "100%",
         // height: 'calc(100vh - 128px)'
       }}
     >
       <Table.Header>
         <Table.Row>
-          <StickyColumnHeaderCell width="0" style={{ height: '100%' }}>
+          <StickyColumnHeaderCell width="0" style={{ height: "100%" }}>
             <Flex
               style={{
-                width: '100%',
+                width: "100%",
-                height: '100%',
+                height: "100%",
               }}
               align="center"
               justify="center"
@@ -82,11 +81,11 @@ export function CompareTable({ stats }: CompareTableProps) {
 
       <Table.Body>
         <Table.Row>
-          <Table.Cell style={{ height: '100%' }}>
+          <Table.Cell style={{ height: "100%" }}>
             <Flex
               style={{
-                width: '100%',
+                width: "100%",
-                height: '100%',
+                height: "100%",
               }}
               align="center"
               justify="center"
@@ -107,15 +106,15 @@ export function CompareTable({ stats }: CompareTableProps) {
                                   borderRadius: 2,
                                   backgroundColor:
                                     crewSkills[skill] === 0
-                                      ? Var('gray-11')
+                                      ? Var("gray-11")
                                       : permanentSkills.includes(skill)
-                                        ? Var('crimson-11')
+                                        ? Var("crimson-11")
-                                        : Var('amber-11'),
+                                        : Var("amber-11"),
                                 }}
                               />
                             ))}
                           </Flex>
-                        ),
+                        )
                       )}
                     </Flex>
                   </Button>
@@ -125,7 +124,7 @@ export function CompareTable({ stats }: CompareTableProps) {
                   <CrewSkillManager
                     skillLevels={crewSkills}
                     onChange={(skills) => {
-                      mutateCompareEphemeral((draft) => {
+                      CompareEphemeral.mutate((draft) => {
                         draft.crewSkills = skills;
                       });
                     }}
@@ -135,7 +134,7 @@ export function CompareTable({ stats }: CompareTableProps) {
                     <Button
                       variant="ghost"
                       onClick={() => {
-                        mutateCompareEphemeral((draft) => {
+                        CompareEphemeral.mutate((draft) => {
                           Object.keys(draft.crewSkills).forEach((skill) => {
                             draft.crewSkills[skill] = 0;
                           });
@@ -147,7 +146,7 @@ export function CompareTable({ stats }: CompareTableProps) {
                     <Button
                       variant="ghost"
                       onClick={() => {
-                        mutateCompareEphemeral((draft) => {
+                        CompareEphemeral.mutate((draft) => {
                           Object.keys(draft.crewSkills).forEach((skill) => {
                             draft.crewSkills[skill] = 7;
                           });
@@ -177,19 +176,19 @@ export function CompareTable({ stats }: CompareTableProps) {
                 consumables,
                 camouflage,
               },
-              index,
+              index
             ) => {
               const equipmentPreset =
                 equipmentDefinitions.presets[tank.equipment_preset];
               const provisionsList = availableProvisions(
                 tank,
                 gun,
-                provisionDefinitions,
+                provisionDefinitions
               );
               const consumablesList = Object.values(
-                consumableDefinitions.consumables,
+                consumableDefinitions.consumables
               ).filter((consumable) =>
-                checkConsumableProvisionInclusivity(consumable, tank, gun),
+                checkConsumableProvisionInclusivity(consumable, tank, gun)
               );
 
               return (
@@ -205,7 +204,7 @@ export function CompareTable({ stats }: CompareTableProps) {
                         <Button variant="ghost">
                           <Flex align="center">
                             {(
-                              ['turret', 'gun', 'engine', 'chassis'] as const
+                              ["turret", "gun", "engine", "chassis"] as const
                             ).map((module, index) => (
                               <img
                                 key={module}
@@ -215,7 +214,7 @@ export function CompareTable({ stats }: CompareTableProps) {
                                 src={asset(`icons/modules/${module}.webp`)}
                                 style={{
                                   marginLeft: index > 0 ? -8 : 0,
-                                  objectFit: 'contain',
+                                  objectFit: "contain",
                                 }}
                               />
                             ))}
@@ -232,7 +231,7 @@ export function CompareTable({ stats }: CompareTableProps) {
                           engine={engine}
                           track={track}
                           onChange={(modules) => {
-                            mutateCompareEphemeral((draft) => {
+                            CompareEphemeral.mutate((draft) => {
                               draft.members[index] = {
                                 ...draft.members[index],
                                 ...modules,
@@ -245,13 +244,12 @@ export function CompareTable({ stats }: CompareTableProps) {
                           <Button
                             variant="ghost"
                             onClick={() => {
-                              mutateCompareEphemeral((draft) => {
+                              CompareEphemeral.mutate((draft) => {
                                 const member = draft.members[index];
 
                                 member.turret = member.tank.turrets[0];
                                 member.gun = member.turret.guns[0];
-                                member.shell =
+                                member.shell = member.gun.shells[0];
-                                  member.gun.gun_type!.value.base.shells[0];
                                 member.engine = member.tank.engines[0];
                                 member.track = member.tank.tracks[0];
                               });
@@ -262,13 +260,12 @@ export function CompareTable({ stats }: CompareTableProps) {
                           <Button
                             variant="ghost"
                             onClick={() => {
-                              mutateCompareEphemeral((draft) => {
+                              CompareEphemeral.mutate((draft) => {
                                 const member = draft.members[index];
 
                                 member.turret = member.tank.turrets.at(-1)!;
                                 member.gun = member.turret.guns.at(-1)!;
-                                member.shell =
+                                member.shell = member.gun.shells[0];
-                                  member.gun.gun_type!.value.base.shells[0];
                                 member.engine = member.tank.engines.at(-1)!;
                                 member.track = member.tank.tracks.at(-1)!;
                               });
@@ -290,9 +287,9 @@ export function CompareTable({ stats }: CompareTableProps) {
                             variant="ghost"
                             radius="large"
                             style={{
-                              height: '100%',
+                              height: "100%",
                               width: 12,
-                              position: 'relative',
+                              position: "relative",
                             }}
                           >
                             <Flex direction="column" justify="center">
@@ -300,14 +297,14 @@ export function CompareTable({ stats }: CompareTableProps) {
                                 <img
                                   alt={unwrap(
                                     provisionDefinitions.provisions[provision]
-                                      .name,
+                                      .name
                                   )}
                                   key={provision}
                                   src={asset(
-                                    `/icons/provisions/${provision}.webp`,
+                                    `/icons/provisions/${provision}.webp`
                                   )}
                                   style={{
-                                    left: '50%',
+                                    left: "50%",
                                     /**
                                      * max = 100% - 16px - 4px
                                      * min = 4px
@@ -322,11 +319,11 @@ export function CompareTable({ stats }: CompareTableProps) {
                                         ? 0.5
                                         : index / (provisions.length - 1)
                                     } * (100% - 24px))`,
-                                    transform: 'translateX(-50%)',
+                                    transform: "translateX(-50%)",
-                                    position: 'absolute',
+                                    position: "absolute",
                                     width: 16,
                                     height: 16,
-                                    objectFit: 'contain',
+                                    objectFit: "contain",
                                   }}
                                 />
                               ))}
@@ -341,12 +338,12 @@ export function CompareTable({ stats }: CompareTableProps) {
                         <Popover.Content>
                           <ProvisionsManager
                             provisions={provisionsList.map(
-                              (provision) => provision.id,
+                              (provision) => provision.id
                             )}
                             selected={provisions}
                             disabled={tank.max_provisions === provisions.length}
                             onChange={(provisions) => {
-                              mutateCompareEphemeral((draft) => {
+                              CompareEphemeral.mutate((draft) => {
                                 draft.members[index].provisions = provisions;
                               });
                             }}
@@ -355,7 +352,7 @@ export function CompareTable({ stats }: CompareTableProps) {
                             <Button
                               variant="ghost"
                               onClick={() => {
-                                mutateCompareEphemeral((draft) => {
+                                CompareEphemeral.mutate((draft) => {
                                   draft.members[index].provisions = [];
                                 });
                               }}
@@ -396,8 +393,8 @@ export function CompareTable({ stats }: CompareTableProps) {
                                             height: 8,
                                             backgroundColor:
                                               equipment === -1
-                                                ? Var('crimson-11')
+                                                ? Var("crimson-11")
-                                                : Var('gray-11'),
+                                                : Var("gray-11"),
                                             borderRadius: 2,
                                           }}
                                         />
@@ -407,8 +404,8 @@ export function CompareTable({ stats }: CompareTableProps) {
                                             height: 8,
                                             backgroundColor:
                                               equipment === 1
-                                                ? Var('crimson-11')
+                                                ? Var("crimson-11")
-                                                : Var('gray-11'),
+                                                : Var("gray-11"),
                                             borderRadius: 2,
                                           }}
                                         />
@@ -426,7 +423,7 @@ export function CompareTable({ stats }: CompareTableProps) {
                             matrix={equipmentMatrix}
                             preset={equipmentPreset}
                             onChange={(matrix) => {
-                              mutateCompareEphemeral((draft) => {
+                              CompareEphemeral.mutate((draft) => {
                                 draft.members[index].equipmentMatrix = matrix;
                                 draft.sorting = undefined;
                               });
@@ -438,10 +435,10 @@ export function CompareTable({ stats }: CompareTableProps) {
                               variant="ghost"
                               color="red"
                               onClick={() => {
-                                mutateCompareEphemeral((draft) => {
+                                CompareEphemeral.mutate((draft) => {
                                   draft.members[index].equipmentMatrix = times(
                                     3,
-                                    () => times(3, () => 0),
+                                    () => times(3, () => 0)
                                   ) as EquipmentMatrix;
                                   draft.sorting = undefined;
                                 });
@@ -455,7 +452,7 @@ export function CompareTable({ stats }: CompareTableProps) {
                             <Button
                               variant="ghost"
                               onClick={() => {
-                                mutateCompareEphemeral((draft) => {
+                                CompareEphemeral.mutate((draft) => {
                                   draft.members.forEach((member) => {
                                     member.equipmentMatrix =
                                       draft.members[index].equipmentMatrix;
@@ -479,9 +476,9 @@ export function CompareTable({ stats }: CompareTableProps) {
                             variant="ghost"
                             radius="large"
                             style={{
-                              height: '100%',
+                              height: "100%",
                               width: 12,
-                              position: 'relative',
+                              position: "relative",
                             }}
                           >
                             <Flex direction="column" justify="center">
@@ -490,14 +487,14 @@ export function CompareTable({ stats }: CompareTableProps) {
                                   alt={unwrap(
                                     consumableDefinitions.consumables[
                                       consumable
-                                    ].name,
+                                    ].name
                                   )}
                                   key={consumable}
                                   src={asset(
-                                    `/icons/consumables/${consumable}.webp`,
+                                    `/icons/consumables/${consumable}.webp`
                                   )}
                                   style={{
-                                    left: '50%',
+                                    left: "50%",
                                     /**
                                      * max = 100% - 16px - 4px
                                      * min = 4px
@@ -512,11 +509,11 @@ export function CompareTable({ stats }: CompareTableProps) {
                                         ? 0.5
                                         : index / (consumables.length - 1)
                                     } * (100% - 24px))`,
-                                    transform: 'translateX(-50%)',
+                                    transform: "translateX(-50%)",
-                                    position: 'absolute',
+                                    position: "absolute",
                                     width: 16,
                                     height: 16,
-                                    objectFit: 'contain',
+                                    objectFit: "contain",
                                   }}
                                 />
                               ))}
@@ -533,7 +530,7 @@ export function CompareTable({ stats }: CompareTableProps) {
                             consumables={consumablesList}
                             selected={consumables}
                             onConsumablesChange={(consumables) => {
-                              mutateCompareEphemeral((draft) => {
+                              CompareEphemeral.mutate((draft) => {
                                 draft.members[index].consumables = consumables;
                               });
                             }}
@@ -546,7 +543,7 @@ export function CompareTable({ stats }: CompareTableProps) {
                             <Button
                               variant="ghost"
                               onClick={() => {
-                                mutateCompareEphemeral((draft) => {
+                                CompareEphemeral.mutate((draft) => {
                                   draft.members[index].consumables = [];
                                 });
                               }}
@@ -564,18 +561,18 @@ export function CompareTable({ stats }: CompareTableProps) {
                     {!tank.fixed_camouflage && (
                       <IconButton
                         onClick={() => {
-                          mutateCompareEphemeral((draft) => {
+                          CompareEphemeral.mutate((draft) => {
                             draft.members[index].camouflage = !camouflage;
                           });
                         }}
-                        variant={camouflage ? 'solid' : 'outline'}
+                        variant={camouflage ? "solid" : "outline"}
                       >
                         <img
-                          src={asset('icons/camo.webp')}
+                          src={asset("icons/camo.webp")}
                           style={{
-                            width: '1em',
+                            width: "1em",
-                            height: '1em',
+                            height: "1em",
-                            transform: 'scale(2) translate(15%, 15%)',
+                            transform: "scale(2) translate(15%, 15%)",
                           }}
                         />
                       </IconButton>
@@ -583,7 +580,7 @@ export function CompareTable({ stats }: CompareTableProps) {
                   </Flex>
                 </Table.Cell>
               );
-            },
+            }
           )}
         </Table.Row>
       </Table.Body>

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

@@ -1,33 +1,27 @@
-import { PlusIcon, TrashIcon } from '@radix-ui/react-icons';
+import { PlusIcon, TrashIcon } from "@radix-ui/react-icons";
-import { Button, Dialog, Flex, SegmentedControl } from '@radix-ui/themes';
+import { Button, Dialog, Flex, SegmentedControl } from "@radix-ui/themes";
-import { awaitableModelDefinitions } from '../../core/awaitables/modelDefinitions';
+import { awaitableProvisionDefinitions } from "../../core/awaitables/provisionDefinitions";
-import { awaitableProvisionDefinitions } from '../../core/awaitables/provisionDefinitions';
+import { tankToCompareMember } from "../../core/blitzkit/tankToCompareMember";
-import { tankToCompareMember } from '../../core/blitzkit/tankToCompareMember';
+import { useLocale } from "../../hooks/useLocale";
-import { useLocale } from '../../hooks/useLocale';
+import { CompareEphemeral } from "../../stores/compareEphemeral";
-import { CompareEphemeral } from '../../stores/compareEphemeral';
 import {
   ComparePersistent,
   type DeltaMode,
-} from '../../stores/comparePersistent';
+} from "../../stores/comparePersistent";
-import { TankSearch } from '../TankSearch';
+import { TankSearch } from "../TankSearch";
 
 interface ControlsProps {
   addTankDialogOpen: boolean;
   onAddTankDialogOpenChange: (open: boolean) => void;
 }
 
-const [provisionDefinitions, modelDefinitions] = await Promise.all([
+const provisionDefinitions = await awaitableProvisionDefinitions;
-  awaitableProvisionDefinitions,
-  awaitableModelDefinitions,
-]);
 
 export function Controls({
   addTankDialogOpen,
   onAddTankDialogOpenChange,
 }: ControlsProps) {
   const deltaMode = ComparePersistent.use((state) => state.deltaMode);
-  const mutateCompareEphemeral = CompareEphemeral.useMutation();
-  const mutateComparePersistent = ComparePersistent.useMutation();
   const { strings } = useLocale();
 
   return (
@@ -60,28 +54,20 @@ export function Controls({
               <TankSearch
                 compact
                 onSelect={(tank) => {
-                  const model = modelDefinitions.models[tank.id];
+                  CompareEphemeral.mutate((draft) => {
-
-                  mutateCompareEphemeral((draft) => {
                     draft.members.push(
-                      tankToCompareMember(tank, model, provisionDefinitions),
+                      tankToCompareMember(tank, provisionDefinitions)
                     );
                     draft.sorting = undefined;
                   });
                   onAddTankDialogOpenChange(false);
                 }}
                 onSelectAll={(tanks) => {
-                  mutateCompareEphemeral((draft) => {
+                  CompareEphemeral.mutate((draft) => {
                     draft.members.push(
                       ...tanks.map((tank) => {
-                        const model = modelDefinitions.models[tank.id];
+                        return tankToCompareMember(tank, provisionDefinitions);
-
+                      })
-                        return tankToCompareMember(
-                          tank,
-                          model,
-                          provisionDefinitions,
-                        );
-                      }),
                     );
                     draft.sorting = undefined;
                   });
@@ -97,7 +83,7 @@ export function Controls({
         variant="soft"
         color="red"
         onClick={() => {
-          mutateCompareEphemeral((draft) => {
+          CompareEphemeral.mutate((draft) => {
             draft.members = [];
             draft.sorting = undefined;
           });
@@ -110,18 +96,18 @@ export function Controls({
         variant="classic"
         value={deltaMode}
         onValueChange={(value) => {
-          mutateComparePersistent((draft) => {
+          ComparePersistent.mutate((draft) => {
             draft.deltaMode = value as DeltaMode;
           });
         }}
       >
-        <SegmentedControl.Item value={'none' satisfies DeltaMode}>
+        <SegmentedControl.Item value={"none" satisfies DeltaMode}>
           {strings.website.tools.compare.actions.deltas.none}
         </SegmentedControl.Item>
-        <SegmentedControl.Item value={'percentage' satisfies DeltaMode}>
+        <SegmentedControl.Item value={"percentage" satisfies DeltaMode}>
           {strings.website.tools.compare.actions.deltas.percentage}
         </SegmentedControl.Item>
-        <SegmentedControl.Item value={'absolute' satisfies DeltaMode}>
+        <SegmentedControl.Item value={"absolute" satisfies DeltaMode}>
           {strings.website.tools.compare.actions.deltas.absolute}
         </SegmentedControl.Item>
       </SegmentedControl.Root>

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

@@ -1,13 +1,13 @@
-import { type TankDefinition, tankIcon } from '@blitzkit/core';
+import { type TankDefinition, tankIcon } from "@blitzkit/core";
-import { Flex, Text } from '@radix-ui/themes';
+import { Flex, Text } from "@radix-ui/themes";
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef } from "react";
-import { Vector2 } from 'three';
+import { Vector2 } from "three";
-import { useLocale } from '../../hooks/useLocale';
+import { useLocale } from "../../hooks/useLocale";
-import { CompareEphemeral } from '../../stores/compareEphemeral';
+import { CompareEphemeral } from "../../stores/compareEphemeral";
-import { StickyColumnHeaderCell } from '../StickyColumnHeaderCell';
+import { StickyColumnHeaderCell } from "../StickyColumnHeaderCell";
-import { InsertionMarker } from './IntersectionMarker';
+import { InsertionMarker } from "./IntersectionMarker";
-import { insertionMarkers } from './IntersectionMarker/constants';
+import { insertionMarkers } from "./IntersectionMarker/constants";
-import { TankControl } from './TankControl';
+import { TankControl } from "./TankControl";
 
 interface TankCardProps {
   index: number;
@@ -16,7 +16,6 @@ interface TankCardProps {
 
 export function TankCard({ index, tank }: TankCardProps) {
   const draggable = useRef<HTMLDivElement>(null);
-  const mutateCompareEphemeral = CompareEphemeral.useMutation();
   const { unwrap } = useLocale();
 
   useEffect(() => {
@@ -34,8 +33,8 @@ export function TankCard({ index, tank }: TankCardProps) {
 
       delta.set(0, 0);
       current.copy(initial.set(event.clientX, event.clientY));
-      window.addEventListener('pointermove', handlePointerMove);
+      window.addEventListener("pointermove", handlePointerMove);
-      window.addEventListener('pointerup', handlePointerUp);
+      window.addEventListener("pointerup", handlePointerUp);
     }
     function handlePointerMove(event: PointerEvent) {
       event.preventDefault();
@@ -43,7 +42,7 @@ export function TankCard({ index, tank }: TankCardProps) {
       current.set(event.clientX, event.clientY);
       delta.copy(current).sub(initial);
       insertionMarkers.forEach(({ element }) => {
-        element.style.opacity = '0';
+        element.style.opacity = "0";
       });
 
       const distances = insertionMarkers.map((insertionMarker) => {
@@ -56,34 +55,34 @@ export function TankCard({ index, tank }: TankCardProps) {
         };
       });
       const closest = distances.reduce((a, b) =>
-        a.distance < b.distance ? a : b,
+        a.distance < b.distance ? a : b
       );
 
       dropIndex = closest.index;
-      closest.element.style.opacity = '1';
+      closest.element.style.opacity = "1";
-      draggable.current!.style.position = 'fixed';
+      draggable.current!.style.position = "fixed";
-      draggable.current!.style.cursor = 'grabbing';
+      draggable.current!.style.cursor = "grabbing";
-      draggable.current!.style.zIndex = '1';
+      draggable.current!.style.zIndex = "1";
       draggable.current!.style.left = `${initialRect.left + delta.x}px`;
       draggable.current!.style.top = `${initialRect.top + delta.y}px`;
     }
     function handlePointerUp(event: PointerEvent) {
       event.preventDefault();
 
-      draggable.current!.style.position = 'static';
+      draggable.current!.style.position = "static";
-      draggable.current!.style.zIndex = 'unset';
+      draggable.current!.style.zIndex = "unset";
-      draggable.current!.style.cursor = 'grab';
+      draggable.current!.style.cursor = "grab";
 
       insertionMarkers.forEach(({ element }) => {
-        element.style.opacity = '0';
+        element.style.opacity = "0";
       });
 
-      window.removeEventListener('pointermove', handlePointerMove);
+      window.removeEventListener("pointermove", handlePointerMove);
-      window.removeEventListener('pointerup', handlePointerUp);
+      window.removeEventListener("pointerup", handlePointerUp);
 
       if (dropIndex === -1) return;
 
-      mutateCompareEphemeral((draft) => {
+      CompareEphemeral.mutate((draft) => {
         const fromIndex = index;
         const toIndex = dropIndex > index ? dropIndex - 1 : dropIndex;
 
@@ -95,10 +94,10 @@ export function TankCard({ index, tank }: TankCardProps) {
       dropIndex = -1;
     }
 
-    draggable.current?.addEventListener('pointerdown', handlePointerDown);
+    draggable.current?.addEventListener("pointerdown", handlePointerDown);
 
     return () => {
-      draggable.current?.removeEventListener('pointerdown', handlePointerDown);
+      draggable.current?.removeEventListener("pointerdown", handlePointerDown);
     };
   }, []);
 
@@ -114,9 +113,9 @@ export function TankCard({ index, tank }: TankCardProps) {
           justify="between"
           gap="2"
           style={{
-            userSelect: 'none',
+            userSelect: "none",
-            touchAction: 'none',
+            touchAction: "none",
-            cursor: 'grab',
+            cursor: "grab",
           }}
         >
           <img
@@ -126,16 +125,16 @@ export function TankCard({ index, tank }: TankCardProps) {
             height={64}
             draggable={false}
             style={{
-              objectFit: 'contain',
+              objectFit: "contain",
             }}
           />
 
           <Text
             style={{
-              whiteSpace: 'nowrap',
+              whiteSpace: "nowrap",
               maxWidth: 128,
-              overflow: 'hidden',
+              overflow: "hidden",
-              textOverflow: 'ellipsis',
+              textOverflow: "ellipsis",
             }}
           >
             {unwrap(tank.name)}

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

@@ -1,35 +1,30 @@
-import { ExternalLinkIcon, LoopIcon, TrashIcon } from '@radix-ui/react-icons';
+import { ExternalLinkIcon, LoopIcon, TrashIcon } from "@radix-ui/react-icons";
-import { Dialog, Flex, IconButton } from '@radix-ui/themes';
+import { Dialog, Flex, IconButton } from "@radix-ui/themes";
-import { useState } from 'react';
+import { useState } from "react";
-import { awaitableModelDefinitions } from '../../core/awaitables/modelDefinitions';
+import { awaitableProvisionDefinitions } from "../../core/awaitables/provisionDefinitions";
-import { awaitableProvisionDefinitions } from '../../core/awaitables/provisionDefinitions';
+import { tankToCompareMember } from "../../core/blitzkit/tankToCompareMember";
-import { tankToCompareMember } from '../../core/blitzkit/tankToCompareMember';
+import { useLocale } from "../../hooks/useLocale";
-import { useLocale } from '../../hooks/useLocale';
+import { CompareEphemeral } from "../../stores/compareEphemeral";
-import { CompareEphemeral } from '../../stores/compareEphemeral';
+import { LinkI18n } from "../LinkI18n";
-import { LinkI18n } from '../LinkI18n';
+import { TankSearch } from "../TankSearch";
-import { TankSearch } from '../TankSearch';
 
 interface TankControlProps {
   index: number;
   slug: string;
 }
 
-const [provisionDefinitions, modelDefinitions] = await Promise.all([
+const provisionDefinitions = await awaitableProvisionDefinitions;
-  awaitableProvisionDefinitions,
-  awaitableModelDefinitions,
-]);
 
 export function TankControl({ index, slug }: TankControlProps) {
   const { locale } = useLocale();
   const [switchTankDialogOpen, setSwitchTankDialogOpen] = useState(false);
-  const mutateCompareEphemeral = CompareEphemeral.useMutation();
 
   return (
-    <Flex gap="3" justify="center" style={{ width: '100%' }}>
+    <Flex gap="3" justify="center" style={{ width: "100%" }}>
       <IconButton
         variant="ghost"
         onClick={() => {
-          mutateCompareEphemeral((draft) => {
+          CompareEphemeral.mutate((draft) => {
             draft.members.splice(index, 1);
             draft.sorting = undefined;
           });
@@ -61,13 +56,10 @@ export function TankControl({ index, slug }: TankControlProps) {
               <TankSearch
                 compact
                 onSelect={(tank) => {
-                  const model = modelDefinitions.models[tank.id];
+                  CompareEphemeral.mutate((draft) => {
-
-                  mutateCompareEphemeral((draft) => {
                     draft.members[index] = tankToCompareMember(
                       tank,
-                      model,
+                      provisionDefinitions
-                      provisionDefinitions,
                     );
                     draft.sorting = undefined;
                   });

packages/website/src/components/Embeds/Boolean.tsx

@@ -1,16 +1,14 @@
-import { Switch } from '@radix-ui/themes';
+import { Switch } from "@radix-ui/themes";
-import type { EmbedPreviewControllerProps } from '../../pages/[...locale]/embed/[embed]/_index';
+import type { EmbedPreviewControllerProps } from "../../pages/[...locale]/embed/[embed]/_index";
-import { EmbedState } from '../../stores/embedState';
+import { EmbedState } from "../../stores/embedState";
 
 export function Boolean({ configKey }: EmbedPreviewControllerProps) {
-  const mutateEmbedState = EmbedState.useMutation();
-
   return (
     <Switch
       variant="classic"
       checked={EmbedState.use((state) => state[configKey] as boolean)}
       onCheckedChange={() => {
-        mutateEmbedState((draft) => {
+        EmbedState.mutate((draft) => {
           draft[configKey] = !draft[configKey];
         });
       }}

packages/website/src/components/Embeds/Color.tsx

@@ -1,16 +1,15 @@
-import type { EmbedPreviewControllerProps } from '../../pages/[...locale]/embed/[embed]/_index';
+import type { EmbedPreviewControllerProps } from "../../pages/[...locale]/embed/[embed]/_index";
-import { EmbedState } from '../../stores/embedState';
+import { EmbedState } from "../../stores/embedState";
-import { ColorControllerRaw } from './ColorControllerRaw';
+import { ColorControllerRaw } from "./ColorControllerRaw";
 
 export function Color({ configKey }: EmbedPreviewControllerProps) {
-  const mutateEmbedState = EmbedState.useMutation();
   const color = EmbedState.use((state) => state[configKey] as string);
 
   return (
     <ColorControllerRaw
       value={color}
       onValueChange={(value) => {
-        mutateEmbedState((draft) => {
+        EmbedState.mutate((draft) => {
           draft[configKey] = value;
         });
       }}

packages/website/src/components/Embeds/Enum.tsx

@@ -1,11 +1,11 @@
-import { Select } from '@radix-ui/themes';
+import { Select } from "@radix-ui/themes";
-import { useLocale } from '../../hooks/useLocale';
+import { useLocale } from "../../hooks/useLocale";
-import type { EmbedPreviewControllerProps } from '../../pages/[...locale]/embed/[embed]/_index';
+import type { EmbedPreviewControllerProps } from "../../pages/[...locale]/embed/[embed]/_index";
-import { EmbedState } from '../../stores/embedState';
+import { EmbedState } from "../../stores/embedState";
 import type {
   EmbedConfigItemType,
   EmbedItemType,
-} from '../../stores/embedState/constants';
+} from "../../stores/embedState/constants";
 
 export function Enum({
   configKey,
@@ -13,14 +13,13 @@ export function Enum({
 }: EmbedPreviewControllerProps & {
   config: EmbedConfigItemType<EmbedItemType.Enum>;
 }) {
-  const mutateEmbedState = EmbedState.useMutation();
   const { locale } = useLocale();
 
   return (
     <Select.Root
       value={EmbedState.use((state) => state[configKey] as string)}
       onValueChange={(value) => {
-        mutateEmbedState((draft) => {
+        EmbedState.mutate((draft) => {
           draft[configKey] = value;
         });
       }}

packages/website/src/components/Embeds/GenerateURL.tsx

@@ -2,9 +2,9 @@ import {
   searchPlayersAcrossRegions,
   type AccountListItem,
   type AccountListWithServer,
-} from '@blitzkit/core';
+} from "@blitzkit/core";
-import { literals } from '@blitzkit/i18n/src/literals';
+import { literals } from "@blitzkit/i18n/src/literals";
-import { CaretLeftIcon, Link2Icon, PersonIcon } from '@radix-ui/react-icons';
+import { CaretLeftIcon, Link2Icon, PersonIcon } from "@radix-ui/react-icons";
 import {
   Button,
   Dialog,
@@ -13,15 +13,15 @@ import {
   Spinner,
   Text,
   TextField,
-} from '@radix-ui/themes';
+} from "@radix-ui/themes";
-import { debounce } from 'lodash-es';
+import { debounce } from "lodash-es";
-import { useCallback, useRef, useState } from 'react';
+import { useCallback, useRef, useState } from "react";
-import { stringify } from 'urlon';
+import { stringify } from "urlon";
-import type { embedConfigurations } from '../../constants/embeds';
+import type { embedConfigurations } from "../../constants/embeds";
-import { useLocale } from '../../hooks/useLocale';
+import { useLocale } from "../../hooks/useLocale";
-import { EmbedState, type EmbedStateStore } from '../../stores/embedState';
+import { EmbedState, type EmbedStateStore } from "../../stores/embedState";
-import { CopyButton } from '../CopyButton';
+import { CopyButton } from "../CopyButton";
-import { SearchResults } from '../SearchResults';
+import { SearchResults } from "../SearchResults";
 
 interface GenerateURLProps {
   embed: keyof typeof embedConfigurations;
@@ -31,7 +31,6 @@ export function GenerateURL({ embed }: GenerateURLProps) {
   const [searchDialogOpen, setSearchDialogOpen] = useState(false);
   const [copyDialogOpen, setCopyDialogOpen] = useState(false);
   const [copyUser, setCopyUser] = useState<AccountListItem | null>(null);
-  const embedStateStore = EmbedState.useStore();
   const input = useRef<HTMLInputElement>(null);
   const [searching, setSearching] = useState(false);
   const [results, setResults] = useState<AccountListWithServer>([]);
@@ -52,7 +51,7 @@ export function GenerateURL({ embed }: GenerateURLProps) {
       setSearching(false);
       setResults(results);
     }, 500),
-    [],
+    []
   );
   const handleChange = useCallback(() => {
     if (!input.current) return;
@@ -94,7 +93,7 @@ export function GenerateURL({ embed }: GenerateURLProps) {
           <TextField.Root
             variant="classic"
             mt="4"
-            style={{ width: '20rem' }}
+            style={{ width: "20rem" }}
             placeholder={strings.website.common.player_search.hint}
             ref={input}
             onChange={handleChange}
@@ -136,7 +135,7 @@ export function GenerateURL({ embed }: GenerateURLProps) {
           </Flex>
 
           <Dialog.Close>
-            <Button color="red" variant="outline" style={{ width: '100%' }}>
+            <Button color="red" variant="outline" style={{ width: "100%" }}>
               {strings.website.tools.embed.configuration.export.generate.cancel}
             </Button>
           </Dialog.Close>
@@ -144,7 +143,7 @@ export function GenerateURL({ embed }: GenerateURLProps) {
       </Dialog.Root>
 
       <Dialog.Root open={copyDialogOpen} onOpenChange={setCopyDialogOpen}>
-        <Dialog.Content style={{ width: 'fit-content' }}>
+        <Dialog.Content style={{ width: "fit-content" }}>
           <Flex direction="column" gap="1">
             <Heading size="5">
               {
@@ -156,7 +155,7 @@ export function GenerateURL({ embed }: GenerateURLProps) {
               {literals(
                 strings.website.tools.embed.configuration.export.generate
                   .success.info,
-                [`${copyUser?.nickname}`],
+                [`${copyUser?.nickname}`]
               )}
             </Text>
           </Flex>
@@ -170,7 +169,7 @@ export function GenerateURL({ embed }: GenerateURLProps) {
                 setSearchDialogOpen(true);
               }}
             >
-              <CaretLeftIcon />{' '}
+              <CaretLeftIcon />{" "}
               {
                 strings.website.tools.embed.configuration.export.generate
                   .success.back
@@ -181,12 +180,10 @@ export function GenerateURL({ embed }: GenerateURLProps) {
               copy={() => {
                 if (!copyUser) return;
 
-                const state = embedStateStore.getState();
-                const initial = embedStateStore.getInitialState();
                 const shallowState: EmbedStateStore = {};
 
-                Object.entries(state).forEach(([key, value]) => {
+                Object.entries(EmbedState.state).forEach(([key, value]) => {
-                  if (value !== initial[key]) {
+                  if (value !== EmbedState.initial[key]) {
                     shallowState[key] = value;
                   }
                 });
@@ -202,7 +199,7 @@ export function GenerateURL({ embed }: GenerateURLProps) {
                 return `${location.origin}/embed/${embed}/host?${searchParams.toString()}`;
               }}
             >
-              <Link2Icon />{' '}
+              <Link2Icon />{" "}
               {
                 strings.website.tools.embed.configuration.export.generate
                   .success.copy

packages/website/src/components/Embeds/Import.tsx

@@ -6,17 +6,16 @@ import {
   Text,
   TextField,
   Tooltip,
-} from '@radix-ui/themes';
+} from "@radix-ui/themes";
-import { useRef, useState } from 'react';
+import { useRef, useState } from "react";
-import { parse } from 'urlon';
+import { parse } from "urlon";
-import { useLocale } from '../../hooks/useLocale';
+import { useLocale } from "../../hooks/useLocale";
-import { EmbedState } from '../../stores/embedState';
+import { EmbedState } from "../../stores/embedState";
 
 export function Import() {
   const importInput = useRef<HTMLInputElement>(null);
   const [showInvalidURLPrompt, setShowInvalidURLPrompt] = useState(false);
   const [showConfirmation, setConfirmation] = useState(false);
-  const mutateEmbedState = EmbedState.useMutation();
   const { strings } = useLocale();
 
   return (
@@ -64,15 +63,15 @@ export function Import() {
 
               try {
                 const url = new URL(importInput.current.value);
-                const state = url.searchParams.get('state');
+                const state = url.searchParams.get("state");
                 if (state === null) throw undefined;
                 const json = parse(state);
 
-                mutateEmbedState((draft) => {
+                EmbedState.mutate((draft) => {
                   Object.assign(draft, json);
                 });
 
-                importInput.current.value = '';
+                importInput.current.value = "";
                 setConfirmation(true);
                 setTimeout(() => setConfirmation(false), 2000);
               } catch {

packages/website/src/components/Embeds/Radius.tsx

@@ -1,10 +1,8 @@
-import { Slider } from '@radix-ui/themes';
+import { Slider } from "@radix-ui/themes";
-import type { EmbedPreviewControllerProps } from '../../pages/[...locale]/embed/[embed]/_index';
+import type { EmbedPreviewControllerProps } from "../../pages/[...locale]/embed/[embed]/_index";
-import { EmbedState, type RadixRadius } from '../../stores/embedState';
+import { EmbedState, type RadixRadius } from "../../stores/embedState";
 
 export function Radius({ configKey }: EmbedPreviewControllerProps) {
-  const mutateEmbedState = EmbedState.useMutation();
-
   return (
     <Slider
       variant="classic"
@@ -13,12 +11,12 @@ export function Radius({ configKey }: EmbedPreviewControllerProps) {
       value={[
         EmbedState.use((state) => {
           const radius = state[configKey] as RadixRadius;
-          return radius === 'full' ? 5 : parseInt(radius);
+          return radius === "full" ? 5 : parseInt(radius);
         }),
       ]}
       onValueChange={([value]) => {
-        mutateEmbedState((draft) => {
+        EmbedState.mutate((draft) => {
-          draft[configKey] = value === 5 ? 'full' : `${value}`;
+          draft[configKey] = value === 5 ? "full" : `${value}`;
         });
       }}
     />

packages/website/src/components/Embeds/RichText.tsx

@@ -1,21 +1,18 @@
-import { FontBoldIcon, FontSizeIcon } from '@radix-ui/react-icons';
+import { FontBoldIcon, FontSizeIcon } from "@radix-ui/react-icons";
-import { Flex, Slider, Text } from '@radix-ui/themes';
+import { Flex, Slider, Text } from "@radix-ui/themes";
-import type { EmbedPreviewControllerProps } from '../../pages/[...locale]/embed/[embed]/_index';
+import type { EmbedPreviewControllerProps } from "../../pages/[...locale]/embed/[embed]/_index";
-import { EmbedState, type RadixSizeWithout0 } from '../../stores/embedState';
+import { EmbedState, type RadixSizeWithout0 } from "../../stores/embedState";
 import {
   radixTextWeights,
   type EmbedConfigItemType,
   type EmbedItemType,
-} from '../../stores/embedState/constants';
+} from "../../stores/embedState/constants";
-import { ColorControllerRaw } from './ColorControllerRaw';
+import { ColorControllerRaw } from "./ColorControllerRaw";
 
 export function RichText({ configKey }: EmbedPreviewControllerProps) {
-  const mutateEmbedState = EmbedState.useMutation();
   const state = EmbedState.use(
     (state) =>
-      state[
+      state[configKey] as EmbedConfigItemType<EmbedItemType.RichText>["default"]
-        configKey
-      ] as EmbedConfigItemType<EmbedItemType.RichText>['default'],
   );
 
   return (
@@ -24,11 +21,11 @@ export function RichText({ configKey }: EmbedPreviewControllerProps) {
         <ColorControllerRaw
           value={state.color}
           onValueChange={(value) => {
-            mutateEmbedState((draft) => {
+            EmbedState.mutate((draft) => {
               (
                 draft[
                   configKey
-                ] as EmbedConfigItemType<EmbedItemType.RichText>['default']
+                ] as EmbedConfigItemType<EmbedItemType.RichText>["default"]
               ).color = value;
             });
           }}
@@ -45,11 +42,11 @@ export function RichText({ configKey }: EmbedPreviewControllerProps) {
           max={9}
           value={[Number(state.size)]}
           onValueChange={([value]) => {
-            mutateEmbedState((draft) => {
+            EmbedState.mutate((draft) => {
               (
                 draft[
                   configKey
-                ] as EmbedConfigItemType<EmbedItemType.RichText>['default']
+                ] as EmbedConfigItemType<EmbedItemType.RichText>["default"]
               ).size = `${value}` as RadixSizeWithout0;
             });
           }}
@@ -66,11 +63,11 @@ export function RichText({ configKey }: EmbedPreviewControllerProps) {
           max={radixTextWeights.length - 1}
           value={[radixTextWeights.indexOf(state.weight)]}
           onValueChange={([value]) => {
-            mutateEmbedState((draft) => {
+            EmbedState.mutate((draft) => {
               (
                 draft[
                   configKey
-                ] as EmbedConfigItemType<EmbedItemType.RichText>['default']
+                ] as EmbedConfigItemType<EmbedItemType.RichText>["default"]
               ).weight = radixTextWeights[value];
             });
           }}

packages/website/src/components/Embeds/Size.tsx

@@ -1,10 +1,8 @@
-import { Slider } from '@radix-ui/themes';
+import { Slider } from "@radix-ui/themes";
-import type { EmbedPreviewControllerProps } from '../../pages/[...locale]/embed/[embed]/_index';
+import type { EmbedPreviewControllerProps } from "../../pages/[...locale]/embed/[embed]/_index";
-import { EmbedState, type RadixSize } from '../../stores/embedState';
+import { EmbedState, type RadixSize } from "../../stores/embedState";
 
 export function Size({ configKey }: EmbedPreviewControllerProps) {
-  const mutateEmbedState = EmbedState.useMutation();
-
   return (
     <Slider
       variant="classic"
@@ -14,7 +12,7 @@ export function Size({ configKey }: EmbedPreviewControllerProps) {
         EmbedState.use((state) => parseInt(state[configKey] as RadixSize)),
       ]}
       onValueChange={([value]) => {
-        mutateEmbedState((draft) => {
+        EmbedState.mutate((draft) => {
           draft[configKey] = `${value}`;
         });
       }}

packages/website/src/components/Embeds/SizeWithout0.tsx

@@ -1,10 +1,8 @@
-import { Slider } from '@radix-ui/themes';
+import { Slider } from "@radix-ui/themes";
-import type { EmbedPreviewControllerProps } from '../../pages/[...locale]/embed/[embed]/_index';
+import type { EmbedPreviewControllerProps } from "../../pages/[...locale]/embed/[embed]/_index";
-import { EmbedState, type RadixSizeWithout0 } from '../../stores/embedState';
+import { EmbedState, type RadixSizeWithout0 } from "../../stores/embedState";
 
 export function SizeWithout0({ configKey }: EmbedPreviewControllerProps) {
-  const mutateEmbedState = EmbedState.useMutation();
-
   return (
     <Slider
       variant="classic"
@@ -12,11 +10,11 @@ export function SizeWithout0({ configKey }: EmbedPreviewControllerProps) {
       max={9}
       value={[
         EmbedState.use((state) =>
-          parseInt(state[configKey] as RadixSizeWithout0),
+          parseInt(state[configKey] as RadixSizeWithout0)
         ),
       ]}
       onValueChange={([value]) => {
-        mutateEmbedState((draft) => {
+        EmbedState.mutate((draft) => {
           draft[configKey] = `${value}`;
         });
       }}

packages/website/src/components/Embeds/Slider.tsx

@@ -1,10 +1,10 @@
-import { Slider as RadixSlider } from '@radix-ui/themes';
+import { Slider as RadixSlider } from "@radix-ui/themes";
-import type { EmbedPreviewControllerProps } from '../../pages/[...locale]/embed/[embed]/_index';
+import type { EmbedPreviewControllerProps } from "../../pages/[...locale]/embed/[embed]/_index";
-import { EmbedState, type RadixSize } from '../../stores/embedState';
+import { EmbedState, type RadixSize } from "../../stores/embedState";
 import type {
   EmbedConfigItemType,
   EmbedItemType,
-} from '../../stores/embedState/constants';
+} from "../../stores/embedState/constants";
 
 export function Slider({
   configKey,
@@ -12,8 +12,6 @@ export function Slider({
 }: EmbedPreviewControllerProps & {
   config: EmbedConfigItemType<EmbedItemType.Slider>;
 }) {
-  const mutateEmbedState = EmbedState.useMutation();
-
   return (
     <RadixSlider
       variant="classic"
@@ -23,7 +21,7 @@ export function Slider({
         EmbedState.use((state) => parseInt(state[configKey] as RadixSize)),
       ]}
       onValueChange={([value]) => {
-        mutateEmbedState((draft) => {
+        EmbedState.mutate((draft) => {
           draft[configKey] = value;
         });
       }}

packages/website/src/components/Embeds/TextController.tsx

@@ -1,17 +1,15 @@
-import { TextField } from '@radix-ui/themes';
+import { TextField } from "@radix-ui/themes";
-import type { EmbedPreviewControllerProps } from '../../pages/[...locale]/embed/[embed]/_index';
+import type { EmbedPreviewControllerProps } from "../../pages/[...locale]/embed/[embed]/_index";
-import { EmbedState } from '../../stores/embedState';
+import { EmbedState } from "../../stores/embedState";
 
 export function TextController({ configKey }: EmbedPreviewControllerProps) {
-  const mutateEmbedState = EmbedState.useMutation();
-
   return (
     <TextField.Root
       variant="classic"
       placeholder="Empty"
       value={EmbedState.use((state) => state[configKey] as string)}
       onChange={(event) => {
-        mutateEmbedState((draft) => {
+        EmbedState.mutate((draft) => {
           draft[configKey] = event.target.value;
         });
       }}

packages/website/src/components/Embeds/breakdown.tsx

@@ -7,17 +7,17 @@ import {
   idToRegion,
   sumCompositeStats,
   type IndividualTankStats,
-} from '@blitzkit/core';
+} from "@blitzkit/core";
-import { STRINGS } from '@blitzkit/i18n';
+import { STRINGS } from "@blitzkit/i18n";
-import { ReloadIcon } from '@radix-ui/react-icons';
+import { ReloadIcon } from "@radix-ui/react-icons";
-import { ContextMenu } from '@radix-ui/themes';
+import { ContextMenu } from "@radix-ui/themes";
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from "react";
-import { breakdownConfig } from '../../constants/embeds';
+import { breakdownConfig } from "../../constants/embeds";
-import { awaitableAverageDefinitions } from '../../core/awaitables/averageDefinitions';
+import { awaitableAverageDefinitions } from "../../core/awaitables/averageDefinitions";
-import { awaitableTankDefinitions } from '../../core/awaitables/tankDefinitions';
+import { awaitableTankDefinitions } from "../../core/awaitables/tankDefinitions";
-import { EmbedBreakdownPersistent } from '../../stores/embedBreakdownPersistent';
+import { EmbedBreakdown } from "../../stores/embedBreakdown";
-import { useEmbedStateCurry } from '../../stores/embedState/utilities';
+import { useEmbedStateCurry } from "../../stores/embedState/utilities";
-import { BreakdownEmbedCard, BreakdownEmbedWrapper } from '../TanksEmbed';
+import { BreakdownEmbedCard, BreakdownEmbedWrapper } from "../TanksEmbed";
 
 export const compositeStatsKeysOptions = compositeStatsKeys.map((value) => ({
   value,
@@ -55,7 +55,7 @@ export const fakeCompositeStats = compositeStats(
     wins: 30,
     xp: 1230 * 50,
   },
-  averageDefinitions.averages[7297].mu,
+  averageDefinitions.averages[7297].mu
 );
 
 export function BreakdownPreview() {
@@ -64,11 +64,11 @@ export function BreakdownPreview() {
 
   return (
     <BreakdownEmbedWrapper>
-      {useEmbedState('showTotal') && (
+      {useEmbedState("showTotal") && (
         <BreakdownEmbedCard composite={fakeCompositeStats} tank={null} />
       )}
 
-      {tanks.slice(0, useEmbedState('listMaxTanks')).map((tank) => (
+      {tanks.slice(0, useEmbedState("listMaxTanks")).map((tank) => (
         <BreakdownEmbedCard
           composite={fakeCompositeStats}
           key={tank.id}
@@ -80,26 +80,17 @@ export function BreakdownPreview() {
 }
 
 export function BreakdownRenderer() {
-  return (
-    <EmbedBreakdownPersistent.Provider>
-      <BreakdownRendererContent />
-    </EmbedBreakdownPersistent.Provider>
-  );
-}
-
-function BreakdownRendererContent() {
   const { useEmbedState } = useEmbedStateCurry<typeof breakdownConfig>();
   const params = new URLSearchParams(window.location.search);
-  const mutateEmbedBreakdownPersistent = EmbedBreakdownPersistent.useMutation();
+  const id = Number(params.get("id"));
-  const id = Number(params.get('id'));
+  const tankStatsA = EmbedBreakdown.use((state) => state[id] ?? []);
-  const tankStatsA = EmbedBreakdownPersistent.use((state) => state[id] ?? []);
   const [tankStatsB, setTankStatsB] = useState<IndividualTankStats[]>([]);
   const diff = useMemo(
     () =>
       deltaTankStats(tankStatsA, tankStatsB).sort(
-        (a, b) => b.last_battle_time - a.last_battle_time,
+        (a, b) => b.last_battle_time - a.last_battle_time
       ),
-    [tankStatsB],
+    [tankStatsB]
   );
   const compositeStats = diff
     .map((diff) => {
@@ -109,14 +100,14 @@ function BreakdownRendererContent() {
 
       const compositeStats = calculateCompositeStats(
         { battle_life_time: diff.battle_life_time, ...diff.all },
-        average.mu,
+        average.mu
       );
 
       return { id: diff.tank_id, compositeStats };
     })
     .filter((stats) => stats !== null);
   const sum = sumCompositeStats(
-    compositeStats.map(({ compositeStats }) => compositeStats),
+    compositeStats.map(({ compositeStats }) => compositeStats)
   );
 
   useEffect(() => {
@@ -135,12 +126,12 @@ function BreakdownRendererContent() {
     <ContextMenu.Root>
       <ContextMenu.Trigger>
         <BreakdownEmbedWrapper>
-          {useEmbedState('showTotal') && (
+          {useEmbedState("showTotal") && (
             <BreakdownEmbedCard composite={sum} tank={null} />
           )}
 
           {compositeStats
-            .slice(0, useEmbedState('listMaxTanks'))
+            .slice(0, useEmbedState("listMaxTanks"))
             .map(({ id, compositeStats }) => {
               const tank = tankDefinitions.tanks[id];
 
@@ -163,7 +154,7 @@ function BreakdownRendererContent() {
 
             if (newA === null) return;
 
-            mutateEmbedBreakdownPersistent((draft) => {
+            EmbedBreakdown.mutate((draft) => {
               draft[id] = newA;
             });
           }}

packages/website/src/components/Gallery/List.tsx

@@ -1,15 +1,15 @@
-import locales from '@blitzkit/i18n/locales.json';
+import locales from "@blitzkit/i18n/locales.json";
-import { literals } from '@blitzkit/i18n/src/literals';
+import { literals } from "@blitzkit/i18n/src/literals";
-import { Flex, Text } from '@radix-ui/themes';
+import { Flex, Text } from "@radix-ui/themes";
-import fuzzysort from 'fuzzysort';
+import fuzzysort from "fuzzysort";
-import { times } from 'lodash-es';
+import { times } from "lodash-es";
-import { useMemo, useState } from 'react';
+import { useMemo, useState } from "react";
-import { awaitableGallery } from '../../core/awaitables/gallery';
+import { awaitableGallery } from "../../core/awaitables/gallery";
-import { useLocale } from '../../hooks/useLocale';
+import { useLocale } from "../../hooks/useLocale";
-import { GalleryEphemeral } from '../../stores/galleryEphemeral';
+import { Gallery } from "../../stores/gallery";
-import type { MaybeSkeletonComponentProps } from '../../types/maybeSkeletonComponentProps';
+import type { MaybeSkeletonComponentProps } from "../../types/maybeSkeletonComponentProps";
-import { InlineSkeleton } from '../InlineSkeleton';
+import { InlineSkeleton } from "../InlineSkeleton";
-import { GalleryCard } from './Card';
+import { GalleryCard } from "./Card";
 
 export interface Avatar {
   name: string;
@@ -22,7 +22,7 @@ const DEFAULT_LOADED = 42;
 const PREVIEW_COUNT = 28;
 
 export function GalleryList({ skeleton }: MaybeSkeletonComponentProps) {
-  const search = GalleryEphemeral.use((state) => state.search);
+  const search = Gallery.use((state) => state.search);
   const [loadedCards, setLoadedCards] = useState(DEFAULT_LOADED);
   const { locale, strings } = useLocale();
   const filtered = useMemo(() => {
@@ -35,9 +35,9 @@ export function GalleryList({ skeleton }: MaybeSkeletonComponentProps) {
         .go(search, gallery.avatars, {
           keys: [
             ...locales.supported.map(
-              (supported) => `name.locales.${supported.locale}`,
+              (supported) => `name.locales.${supported.locale}`
             ),
-            'id',
+            "id",
           ],
         })
         .map((result) => result.obj);
@@ -72,7 +72,7 @@ export function GalleryList({ skeleton }: MaybeSkeletonComponentProps) {
               skeleton
               onIntersection={() => setLoadedCards((state) => state + 2)}
             />
-          ),
+          )
         )}
       </Flex>
     </>

packages/website/src/components/Gallery/Search.tsx

@@ -1,13 +1,12 @@
-import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
+import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
-import { TextField } from '@radix-ui/themes';
+import { TextField } from "@radix-ui/themes";
-import { useRef } from 'react';
+import { useRef } from "react";
-import { useLocale } from '../../hooks/useLocale';
+import { useLocale } from "../../hooks/useLocale";
-import { GalleryEphemeral } from '../../stores/galleryEphemeral';
+import { Gallery } from "../../stores/gallery";
-import type { MaybeSkeletonComponentProps } from '../../types/maybeSkeletonComponentProps';
+import type { MaybeSkeletonComponentProps } from "../../types/maybeSkeletonComponentProps";
 
 export function GallerySearch({ skeleton }: MaybeSkeletonComponentProps) {
   const input = useRef<HTMLInputElement>(null);
-  const mutateGalleryEphemeral = GalleryEphemeral.useMutation();
   const { strings } = useLocale();
 
   return (
@@ -17,7 +16,7 @@ export function GallerySearch({ skeleton }: MaybeSkeletonComponentProps) {
       placeholder={strings.website.tools.gallery.search.hint}
       ref={input}
       onChange={(event) => {
-        mutateGalleryEphemeral((draft) => {
+        Gallery.mutate((draft) => {
           const trimmed = event.target.value.trim();
           draft.search = trimmed.length === 0 ? undefined : trimmed;
         });

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

@@ -1,13 +1,13 @@
-import { Box } from '@radix-ui/themes';
+import { Box } from "@radix-ui/themes";
-import { useEffect } from 'react';
+import { useEffect } from "react";
-import { awaitableModelDefinitions } from '../../core/awaitables/modelDefinitions';
+import { awaitableModelDefinitions } from "../../core/awaitables/modelDefinitions";
-import { awaitableProvisionDefinitions } from '../../core/awaitables/provisionDefinitions';
+import { awaitableProvisionDefinitions } from "../../core/awaitables/provisionDefinitions";
-import { tankToDuelMember } from '../../core/blitzkit/tankToDuelMember';
+import { tankToDuelMember } from "../../core/blitzkit/tankToDuelMember";
-import { Var } from '../../core/radix/var';
+import { Var } from "../../core/radix/var";
-import { Duel } from '../../stores/duel';
+import { Duel } from "../../stores/duel";
-import { GuessEphemeral } from '../../stores/guessEphemeral';
+import { Guess, GuessState } from "../../stores/guess";
-import { TankopediaEphemeral } from '../../stores/tankopediaEphemeral';
+import { Tankopedia } from "../../stores/tankopedia";
-import './index.css';
+import "./index.css";
 
 const [modelDefinitions, provisionDefinitions] = await Promise.all([
   awaitableModelDefinitions,
@@ -15,17 +15,14 @@ const [modelDefinitions, provisionDefinitions] = await Promise.all([
 ]);
 
 export function GuessBackground() {
-  const guessState = GuessEphemeral.use((state) => state.guessState);
+  const guessState = Guess.use((state) => state.guessState);
-  const tank = GuessEphemeral.use((state) => state.tank);
+  const tank = Guess.use((state) => state.tank);
-  const mutateDuel = Duel.useMutation();
-  const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
 
   useEffect(() => {
-    mutateDuel((state) => {
+    Duel.mutate((state) => {
-      const model = modelDefinitions.models[tank.id];
+      state.protagonist = tankToDuelMember(tank, provisionDefinitions);
-      state.protagonist = tankToDuelMember(tank, model, provisionDefinitions);
     });
-    mutateTankopediaEphemeral((state) => {
+    Tankopedia.mutate((state) => {
       state.model = modelDefinitions.models[tank.id];
     });
   }, [tank]);
@@ -39,13 +36,13 @@ export function GuessBackground() {
         top="0"
         left="0"
         style={{
-          transitionDuration: '2s',
+          transitionDuration: "2s",
           backgroundColor: Var(
-            guessState === null
+            guessState === GuessState.NotGuessed
-              ? 'accent-2'
+              ? "accent-2"
-              : guessState
+              : guessState === GuessState.Correct
-                ? 'jade-3'
+                ? "jade-3"
-                : 'tomato-3',
+                : "tomato-3"
           ),
         }}
       >
@@ -53,7 +50,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 +64,13 @@ export function GuessBackground() {
         left="0"
         style={{
           backgroundImage: `
-            radial-gradient(circle, ${Var('white-a1')} 20%, transparent 20%),
+            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 0 0, ${Var("white-a1")} 10%, transparent 10%),
-            radial-gradient(circle at 100% 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 0 100%, ${Var("white-a1")} 10%, transparent 10%),
-            radial-gradient(circle at 100% 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 { Guess, GuessState } from "../stores/guess";
-import { GuessEphemeral } from '../stores/guessEphemeral';
+import { SmartCanvas } from "./SmartCanvas";
-import { TankopediaDisplay } from '../stores/tankopediaPersistent/constants';
+import { Controls } from "./Tankopedia/HeroSection/components/TankSandbox/components/Control";
-import { Controls } from './Tankopedia/HeroSection/components/TankSandbox/components/Control';
+import { Lighting } from "./Tankopedia/HeroSection/components/TankSandbox/components/Lighting";
-import { Lighting } from './Tankopedia/HeroSection/components/TankSandbox/components/Lighting';
+import { TankModel } from "./Tankopedia/HeroSection/components/TankSandbox/components/TankModel";
-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;
+  const isRevealed = guessState !== GuessState.NotGuessed;
 
   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,
-        transitionDuration: isRevealed ? '2s' : undefined,
+        transitionProperty: "filter",
-        transitionProperty: 'filter',
       }}
       camera={{ position: [-5, 5, -5] }}
     >
-      <Controls distanceScale={2} zoomable={false} />
+      <Controls zoomable={false} />
-      <Lighting display={TankopediaDisplay.Model} />
+      <Lighting />
       <TankModel />
-    </Canvas>
+    </SmartCanvas>
   );
 }

packages/website/src/components/Guesser.tsx

@@ -2,13 +2,13 @@ import {
   SEARCH_KEYS,
   TankDefinition,
   TIER_ROMAN_NUMERALS,
-} from '@blitzkit/core';
+} from "@blitzkit/core";
-import { literals } from '@blitzkit/i18n';
+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';
+} from "@radix-ui/themes";
-import fuzzysort from 'fuzzysort';
+import fuzzysort from "fuzzysort";
-import { debounce } from 'lodash-es';
+import { debounce } from "lodash-es";
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from "react";
-import { awaitableTankDefinitions } from '../core/awaitables/tankDefinitions';
+import { awaitableTankDefinitions } from "../core/awaitables/tankDefinitions";
-import { awaitableTankNames } from '../core/awaitables/tankNames';
+import { awaitableTankNames } from "../core/awaitables/tankNames";
-import { useLocale } from '../hooks/useLocale';
+import { useLocale } from "../hooks/useLocale";
-import { GuessEphemeral } from '../stores/guessEphemeral';
+import { Guess, GuessState } from "../stores/guess";
-import { classIcons } from './ClassIcon';
+import { classIcons } from "./ClassIcon";
-import { SearchResults } from './SearchResults';
+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 tank = Guess.use((state) => state.tank);
-  const guessState = GuessEphemeral.use((state) => state.guessState);
+  const guessState = Guess.use((state) => state.guessState);
-  const correctGuesses = GuessEphemeral.use((state) => state.correctGuesses);
+  const correctGuesses = Guess.use((state) => state.correctGuesses);
-  const totalGuesses = GuessEphemeral.use((state) => state.totalGuesses);
+  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,14 +71,14 @@ export function Guesser() {
       });
 
       setResults(
-        searchResults.map((result) => tankDefinitions.tanks[result.obj.id]),
+        searchResults.map((result) => tankDefinitions.tanks[result.obj.id])
       );
     }, 500),
-    [],
+    []
   );
 
   useEffect(() => {
-    if (guessState !== null) setSelected(null);
+    if (guessState !== GuessState.NotGuessed) setSelected(null);
   }, [guessState]);
 
   return (
@@ -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}`,
@@ -149,7 +148,7 @@ export function Guesser() {
 
       <Flex gap="3">
         <TextField.Root
-          disabled={guessState !== null}
+          disabled={guessState !== GuessState.NotGuessed}
           ref={input}
           onChange={requestSearch}
           style={{ flex: 1 }}
@@ -164,13 +163,19 @@ export function Guesser() {
 
         <Button
           size="3"
-          color={guessState === null && selected === null ? 'red' : undefined}
+          color={
+            guessState === GuessState.NotGuessed && selected === null
+              ? "red"
+              : undefined
+          }
           onClick={() => {
-            if (guessState === null) {
+            if (guessState === GuessState.NotGuessed) {
               const correct = selected !== null && selected.id === tank.id;
 
-              mutateGuessEphemeral((draft) => {
+              Guess.mutate((draft) => {
-                draft.guessState = correct;
+                draft.guessState = correct
+                  ? GuessState.Correct
+                  : GuessState.Incorrect;
                 draft.totalGuesses++;
                 draft.correctGuesses += correct ? 1 : 0;
               });
@@ -178,21 +183,22 @@ 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;
+                draft.guessState = GuessState.NotGuessed;
-                input.current.value = '';
+
+                input.current.value = "";
               });
             }
           }}
         >
-          {guessState === null ? (
+          {guessState === GuessState.NotGuessed ? (
             <>
               {
                 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/HomePageHotTanks.tsx

@@ -1,15 +1,14 @@
-import { literals } from '@blitzkit/i18n/src/literals';
+import { literals } from "@blitzkit/i18n/src/literals";
-import { EyeOpenIcon } from '@radix-ui/react-icons';
+import { EyeOpenIcon } from "@radix-ui/react-icons";
-import { Box, Flex, Heading, Text } from '@radix-ui/themes';
+import { Box, Flex, Heading, Text } from "@radix-ui/themes";
-import { awaitablePopularTanks } from '../core/awaitables/popularTanks';
+import { awaitablePopularTanks } from "../core/awaitables/popularTanks";
-import { awaitableTankDefinitions } from '../core/awaitables/tankDefinitions';
+import { awaitableTankDefinitions } from "../core/awaitables/tankDefinitions";
 import {
   LocaleProvider,
   useLocale,
   type LocaleAcceptorProps,
-} from '../hooks/useLocale';
+} from "../hooks/useLocale";
-import { TankopediaPersistent } from '../stores/tankopediaPersistent';
+import { TankCard } from "./TankCard";
-import { TankCard } from './TankCard';
 
 const [tankDefinitions, popularTanks] = await Promise.all([
   awaitableTankDefinitions,
@@ -19,9 +18,7 @@ const [tankDefinitions, popularTanks] = await Promise.all([
 export function HomePageHotTanks({ locale }: LocaleAcceptorProps) {
   return (
     <LocaleProvider locale={locale}>
-      <TankopediaPersistent.Provider>
+      <Content />
-        <Content />
-      </TankopediaPersistent.Provider>
     </LocaleProvider>
   );
 }
@@ -35,7 +32,7 @@ function Content() {
         {strings.website.home.hot_tanks.title}
       </Heading>
       <Text color="gray" align="center" mb="5" size="2">
-        {literals(strings.website.home.hot_tanks.subtitle, ['7'])}
+        {literals(strings.website.home.hot_tanks.subtitle, ["7"])}
       </Text>
 
       <Flex justify="center" gap="4" wrap="wrap">

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={
+        discriminator={TIER_ROMAN_NUMERALS[modules.gun.tier]}
-          TIER_ROMAN_NUMERALS[modules.gun.gun_type!.value.base.tier]
-        }
         onClick={() => setGunMenuOpen(true)}
       />
 
@@ -95,18 +93,16 @@ export function ModuleManager({
         </DropdownMenu.Trigger>
 
         <DropdownMenu.Content>
-          <DropdownMenu.RadioGroup
+          <DropdownMenu.RadioGroup value={`${modules.gun.id}`}>
-            value={`${modules.gun.gun_type!.value.base.id}`}
-          >
             {[...modules.turret.guns].reverse().map((gun) => {
               return (
                 <DropdownMenu.RadioItem
-                  key={gun.gun_type!.value.base.id}
+                  key={gun.id}
-                  value={`${gun.gun_type!.value.base.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={
+                    discriminator={TIER_ROMAN_NUMERALS[gun.tier]}
-                      TIER_ROMAN_NUMERALS[gun.gun_type!.value.base.tier]
-                    }
                   />{' '}
-                  {unwrap(gun.gun_type!.value.base.name)}
+                  {unwrap(gun.name)}
                 </DropdownMenu.RadioItem>
               );
             })}

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

@@ -1,4 +1,4 @@
-import { PersonIcon } from '@radix-ui/react-icons';
+import { PersonIcon } from "@radix-ui/react-icons";
 import {
   Button,
   Flex,
@@ -6,91 +6,78 @@ import {
   Popover,
   Skeleton,
   Text,
-} from '@radix-ui/themes';
+} from "@radix-ui/themes";
-import { Suspense } from 'react';
+import { Suspense } from "react";
-import { App } from '../../stores/app';
+import { App } from "../../stores/app";
-import { BlitzKitTheme } from '../BlitzKitTheme';
+import { BlitzKitTheme } from "../BlitzKitTheme";
-import { WargamingAccountName } from '../WargamingAccountName';
+import { WargamingAccountName } from "../WargamingAccountName";
-import { WargamingIcon } from '../WargamingIcon';
+import { WargamingIcon } from "../WargamingIcon";
-import { WargamingLoginButton } from '../WargamingLoginButton';
+import { WargamingLoginButton } from "../WargamingLoginButton";
 
 export function NavbarAccount() {
-  return (
-    <App.Provider>
-      <Content />
-    </App.Provider>
-  );
-}
-
-function Content() {
   const logins = App.use((state) => state.logins);
-  const mutateApp = App.useMutation();
 
   return (
-    <App.Provider>
+    <Popover.Root>
-      <Popover.Root>
+      <Popover.Trigger>
-        <Popover.Trigger>
+        <IconButton variant="ghost" color="gray">
-          <IconButton variant="ghost" color="gray">
+          <PersonIcon />
-            <PersonIcon />
+        </IconButton>
-          </IconButton>
+      </Popover.Trigger>
-        </Popover.Trigger>
 
-        <BlitzKitTheme style={{ display: 'contents' }}>
+      <BlitzKitTheme style={{ display: "contents" }}>
-          <Popover.Content
+        <Popover.Content
-            align="end"
+          align="end"
-            width="320px"
+          width="320px"
-            onOpenAutoFocus={(event) => event.preventDefault()}
+          onOpenAutoFocus={(event) => event.preventDefault()}
-          >
+        >
-            {logins.wargaming && (
+          {logins.wargaming && (
-              <Flex direction="column" gap="2">
+            <Flex direction="column" gap="2">
-                <Text align="center" color="gray">
+              <Text align="center" color="gray">
-                  Logged in accounts
+                Logged in accounts
-                </Text>
+              </Text>
 
-                {logins.wargaming && (
+              {logins.wargaming && (
-                  <Flex align="center" gap="2" justify="center">
+                <Flex align="center" gap="2" justify="center">
-                    <WargamingIcon width={15} height={15} />
+                  <WargamingIcon width={15} height={15} />
-                    <Text>
+                  <Text>
-                      <Suspense
+                    <Suspense fallback={<Skeleton height="1em" width="5rem" />}>
-                        fallback={<Skeleton height="1em" width="5rem" />}
+                      <WargamingAccountName />
-                      >
+                    </Suspense>
-                        <WargamingAccountName />
+                  </Text>
-                      </Suspense>
+                  <Button
-                    </Text>
+                    color="red"
-                    <Button
+                    variant="ghost"
-                      color="red"
+                    onClick={() => {
-                      variant="ghost"
+                      App.mutate((draft) => {
-                      onClick={() => {
+                        draft.logins.wargaming = undefined;
-                        mutateApp((draft) => {
+                      });
-                          draft.logins.wargaming = undefined;
+                    }}
-                        });
+                  >
-                      }}
+                    Logout
-                    >
+                  </Button>
-                      Logout
+                </Flex>
-                    </Button>
+              )}
-                  </Flex>
+            </Flex>
-                )}
+          )}
-              </Flex>
-            )}
 
-            {/* {!logins. !== !logins.wargaming && (
+          {/* {!logins. !== !logins.wargaming && (
               <Inset side="x">
                 <Separator my="4" size="4" />
               </Inset>
             )} */}
 
-            {!logins.wargaming && (
+          {!logins.wargaming && (
-              <Flex direction="column" gap="2">
+            <Flex direction="column" gap="2">
-                <Text align="center" color="gray">
+              <Text align="center" color="gray">
-                  Log in with...
+                Log in with...
-                </Text>
+              </Text>
 
-                {!logins.wargaming && <WargamingLoginButton />}
+              {!logins.wargaming && <WargamingLoginButton />}
-              </Flex>
+            </Flex>
-            )}
+          )}
-          </Popover.Content>
+        </Popover.Content>
-        </BlitzKitTheme>
+      </BlitzKitTheme>
-      </Popover.Root>
+    </Popover.Root>
-    </App.Provider>
   );
 }

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

@@ -2,16 +2,15 @@ import {
   CaretDownIcon,
   CaretSortIcon,
   CaretUpIcon,
-} from '@radix-ui/react-icons';
+} from "@radix-ui/react-icons";
-import { Button, Flex, Table } from '@radix-ui/themes';
+import { Button, Flex, Table } from "@radix-ui/themes";
-import { useLocale } from '../../hooks/useLocale';
+import { useLocale } from "../../hooks/useLocale";
-import { TankPerformanceSort } from '../../stores/tankPerformanceSort';
+import { TankPerformanceSort } from "../../stores/tankPerformanceSort";
-import { TankPerformanceSortTypeNamesArray } from '../../stores/tankPerformanceSort/constants';
+import { TankPerformanceSortTypeNamesArray } from "../../stores/tankPerformanceSort/constants";
-import { StickyColumnHeaderCell } from '../StickyColumnHeaderCell';
+import { StickyColumnHeaderCell } from "../StickyColumnHeaderCell";
 
 export function Header() {
   const sort = TankPerformanceSort.use();
-  const store = TankPerformanceSort.useStore();
   const { strings } = useLocale();
 
   return (
@@ -34,13 +33,18 @@ export function Header() {
               <Flex align="center" gap="1">
                 <Button
                   variant="ghost"
-                  color={isSelected ? undefined : 'gray'}
+                  color={isSelected ? undefined : "gray"}
                   highContrast={!isSelected}
                   onClick={() => {
                     if (isSelected) {
-                      store.setState({ direction: -sort.direction as 1 | -1 });
+                      TankPerformanceSort.mutate((draft) => {
+                        draft.direction *= -1;
+                      });
                     } else {
-                      store.setState({ type, direction: -1 });
+                      TankPerformanceSort.mutate((draft) => {
+                        draft.type = type;
+                        draft.direction = -1;
+                      });
                     }
                   }}
                 >

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 {
+import { Performance, type PlayerCountPeriod } from '../../stores/performance';
-  TankPerformanceEphemeral,
-  type PlayerCountPeriod,
-} from '../../stores/tankPerformanceEphemeral';
 
 export function PlayerCountControl() {
-  const playerCountPeriod = TankPerformanceEphemeral.use(
+  const playerCountPeriod = Performance.use((state) => state.playerCountPeriod);
-    (state) => state.playerCountPeriod,
-  );
-  const mutateTankPerformanceSort = TankPerformanceEphemeral.useMutation();
   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 { Table } from '@radix-ui/themes';
+import { times } from "lodash-es";
-import { times } from 'lodash-es';
+import { Fragment, Suspense, useEffect, useMemo, useState } from "react";
-import { Fragment, Suspense, useEffect, useMemo, useState } from 'react';
+import { awaitableAverageDefinitions } from "../../core/awaitables/averageDefinitions";
-import { awaitableAverageDefinitions } from '../../core/awaitables/averageDefinitions';
+import { awaitableTankDefinitions } from "../../core/awaitables/tankDefinitions";
-import { awaitableTankDefinitions } from '../../core/awaitables/tankDefinitions';
+import { filterTank } from "../../core/blitzkit/filterTank";
-import { filterTank } from '../../core/blitzkit/filterTank';
+import { Performance } from "../../stores/performance";
-import { $tankFilters } from '../../stores/tankFilters';
+import { TankFilters } from "../../stores/tankFilters";
-import { TankPerformanceEphemeral } from '../../stores/tankPerformanceEphemeral';
+import { TankPerformanceSort } from "../../stores/tankPerformanceSort";
-import { TankPerformanceSort } from '../../stores/tankPerformanceSort';
+import type { MaybeSkeletonComponentProps } from "../../types/maybeSkeletonComponentProps";
-import type { MaybeSkeletonComponentProps } from '../../types/maybeSkeletonComponentProps';
+import { RowLoader } from "./RowLoader";
-import { RowLoader } from './RowLoader';
+import { TankRow } from "./TankRow";
-import { TankRow } from './TankRow';
+import { Total } from "./Total";
-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/Plugs.tsx

@@ -1,20 +1,11 @@
-import { assertSecret } from '@blitzkit/core';
+import { assertSecret } from "@blitzkit/core";
-import { ArrowRightIcon } from '@radix-ui/react-icons';
+import { ArrowRightIcon } from "@radix-ui/react-icons";
-import { Button, Code, Flex, Link, Text } from '@radix-ui/themes';
+import { Button, Code, Flex, Link, Text } from "@radix-ui/themes";
-import { App } from '../stores/app';
 
 export function Plugs() {
-  return (
-    <App.Provider>
-      <Content />
-    </App.Provider>
-  );
-}
-
-function Content() {
   const promoteOpentest =
-    assertSecret(import.meta.env.PUBLIC_PROMOTE_OPENTEST) === 'true' &&
+    assertSecret(import.meta.env.PUBLIC_PROMOTE_OPENTEST) === "true" &&
-    assertSecret(import.meta.env.PUBLIC_BRANCH) !== 'opentest';
+    assertSecret(import.meta.env.PUBLIC_BRANCH) !== "opentest";
   const promotions = [promoteOpentest];
 
   if (promotions.every((promotion) => !promotion)) return null;
@@ -31,11 +22,11 @@ function Content() {
       {promoteOpentest && (
         <Flex direction="column" gap="3" align="center">
           <Text size="5">
-            BlitzKit{' '}
+            BlitzKit{" "}
             <Code variant="outline" size="4" color="gray">
               opentest
-            </Code>{' '}
+            </Code>{" "}
-            is available now{' '}
+            is available now{" "}
           </Text>
 
           <Link href="https://opentest.blitzkit.app/" target="_blank">

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/TankCard/index.tsx

@@ -3,16 +3,16 @@ import {
   fetchTankDefinitions,
   TankType,
   type TankDefinition,
-} from '@blitzkit/core';
+} from "@blitzkit/core";
-import { Flex, Text, type TextProps } from '@radix-ui/themes';
+import { Flex, Text, type TextProps } from "@radix-ui/themes";
-import { uniq } from 'lodash-es';
+import { uniq } from "lodash-es";
-import { forwardRef, type ReactNode } from 'react';
+import { forwardRef, type ReactNode } from "react";
-import { useLocale } from '../../hooks/useLocale';
+import { useLocale } from "../../hooks/useLocale";
-import { TankopediaPersistent } from '../../stores/tankopediaPersistent';
+import { TankopediaPersistent } from "../../stores/tankopediaPersistent";
-import { classIcons } from '../ClassIcon';
+import { classIcons } from "../ClassIcon";
-import { LinkI18n } from '../LinkI18n';
+import { LinkI18n } from "../LinkI18n";
-import { MAX_RECENTLY_VIEWED } from '../TankSearch/constants';
+import { MAX_RECENTLY_VIEWED } from "../TankSearch/constants";
-import './index.css';
+import "./index.css";
 
 type TankCardProps = TextProps & {
   tank: TankDefinition;
@@ -33,11 +33,11 @@ export const TankCard = forwardRef<HTMLSpanElement, TankCardProps>(
       style,
       ...props
     }: TankCardProps,
-    ref,
+    ref
   ) => {
     const { unwrap, locale } = useLocale();
     const provideLink = !noLink && onSelect === undefined;
-    const mutateTankopediaPersistent = TankopediaPersistent.useMutation();
+
     const Icon = classIcons[tank.class];
 
     return (
@@ -47,15 +47,15 @@ export const TankCard = forwardRef<HTMLSpanElement, TankCardProps>(
         size="2"
         color={
           tank.type === TankType.COLLECTOR
-            ? 'blue'
+            ? "blue"
             : tank.type === TankType.PREMIUM
-              ? 'amber'
+              ? "amber"
-              : 'gray'
+              : "gray"
         }
         highContrast={tank.type === TankType.RESEARCHABLE}
         onClick={() => {
           onSelect?.(tank);
-          mutateTankopediaPersistent((draft) => {
+          TankopediaPersistent.mutate((draft) => {
             draft.recentlyViewed = uniq([tank.id, ...draft.recentlyViewed])
               .filter((id) => id in tankDefinitions.tanks)
               .slice(0, MAX_RECENTLY_VIEWED);
@@ -73,7 +73,7 @@ export const TankCard = forwardRef<HTMLSpanElement, TankCardProps>(
           locale={locale}
           className="link"
           underline="hover"
-          href={provideLink ? `/tanks/${tank.slug}` : '#'}
+          href={provideLink ? `/tanks/${tank.slug}` : "#"}
           onClick={(event) => {
             if (!provideLink) event.preventDefault();
           }}
@@ -104,9 +104,9 @@ export const TankCard = forwardRef<HTMLSpanElement, TankCardProps>(
               color="gray"
               align="center"
               style={{
-                whiteSpace: 'nowrap',
+                whiteSpace: "nowrap",
-                overflow: 'hidden',
+                overflow: "hidden",
-                textOverflow: 'ellipsis',
+                textOverflow: "ellipsis",
               }}
             >
               {discriminator}
@@ -115,5 +115,5 @@ export const TankCard = forwardRef<HTMLSpanElement, TankCardProps>(
         </LinkI18n>
       </Text>
     );
-  },
+  }
 );

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 shell0 = gun.shells[0];
-    const shell1 = gun.gun_type!.value.base.shells[1];
+    const shell1 = gun.shells[1];
-    const shell2 = gun.gun_type!.value.base.shells[2];
+    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 =
+    const gunModelDefinition = turretModelDefinition.guns[gun.id];
-      turretModelDefinition.guns[gun.gun_type!.value.base.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 (
+        return (tank.camouflage_still * gun.camouflage_loss * 100).toFixed(0);
-          tank.camouflage_still *
-          gun.gun_type!.value.base.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';
+} from "@blitzkit/core";
-import { useStore } from '@nanostores/react';
 import {
   Box,
   Flex,
@@ -14,29 +13,22 @@ import {
   Link,
   Popover,
   Text,
-} from '@radix-ui/themes';
+} from "@radix-ui/themes";
-import { isEqual, times } from 'lodash-es';
+import { isEqual, times } from "lodash-es";
-import { awaitableGameDefinitions } from '../../../core/awaitables/gameDefinitions';
+import { awaitableGameDefinitions } from "../../../core/awaitables/gameDefinitions";
-import { Var } from '../../../core/radix/var';
+import { Var } from "../../../core/radix/var";
-import { useLocale } from '../../../hooks/useLocale';
+import { useLocale } from "../../../hooks/useLocale";
-import {
+import { TankFilters } from "../../../stores/tankFilters";
-  $tankFilters,
+import { TankSort } from "../../../stores/tankopediaSort";
-  initialTankFilters,
+import { classIcons } from "../../ClassIcon";
-  type TankFilters,
+import { ExperimentIcon } from "../../ExperimentIcon";
-} from '../../../stores/tankFilters';
+import { GunAutoloaderIcon } from "../../GunAutoloaderIcon";
-import {
+import { GunAutoreloaderIcon } from "../../GunAutoreloaderIcon";
-  $tankopediaSort,
+import { GunRegularIcon } from "../../GunRegularIcon";
-  initialTankopediaSort,
+import { MissingShellIcon } from "../../MissingShellIcon";
-} from '../../../stores/tankopediaSort';
+import { ResearchedIcon } from "../../ResearchedIcon";
-import { classIcons } from '../../ClassIcon';
+import { ScienceIcon } from "../../ScienceIcon";
-import { ExperimentIcon } from '../../ExperimentIcon';
+import { ScienceOffIcon } from "../../ScienceOffIcon";
-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.AP]: "ap",
-  [ShellType.APCR]: 'ap_cr',
+  [ShellType.APCR]: "ap_cr",
-  [ShellType.HE]: 'he',
+  [ShellType.HE]: "he",
-  [ShellType.HEAT]: 'hc',
+  [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 && (
+          {shells[index] === null && (
-            <Text color="gray" style={{ display: 'contents' }}>
+            <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 = [
+                    const mutated = [...shells] as TankFilters["shells"];
-                      tankFilters.shells[0],
-                      tankFilters.shells[1],
-                      tankFilters.shells[2],
-                    ] 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(
+                      TankFilters.mutate((draft) => {
-                        'tiers',
+                        draft.tiers = draft.tiers.filter((t) => t !== tier);
-                        tankFilters.tiers.filter((t) => t !== tier),
+                      });
-                      );
                     } else {
-                      $tankFilters.setKey('tiers', [
+                      TankFilters.mutate((draft) => {
-                        ...tankFilters.tiers,
+                        draft.tiers = [...draft.tiers, tier];
-                        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'),
+              height: Var("space-1"),
-              backgroundColor: Var('gray-a3'),
+              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(
+                      TankFilters.mutate((draft) => {
-                        'tiers',
+                        draft.tiers = draft.tiers.filter((t) => t !== tier);
-                        tankFilters.tiers.filter((t) => t !== tier),
+                      });
-                      );
                     } else {
-                      $tankFilters.setKey('tiers', [
+                      TankFilters.mutate((draft) => {
-                        ...tankFilters.tiers,
+                        draft.tiers = [...draft.tiers, tier];
-                        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'}
+                    variant={selected ? "solid" : "soft"}
-                    color={selected ? undefined : 'gray'}
+                    color={selected ? undefined : "gray"}
                     highContrast
                     radius="none"
                     onClick={() => {
-                      if (tankFilters.nations.includes(nation)) {
+                      TankFilters.mutate((draft) => {
-                        $tankFilters.setKey(
+                        if (tankFilters.nations.includes(nation)) {
-                          'nations',
+                          draft.nations = draft.nations.filter(
-                          tankFilters.nations.filter((n) => n !== nation),
+                            (n) => n !== nation
-                        );
+                          );
-                      } else {
+                        } else {
-                        $tankFilters.setKey('nations', [
+                          draft.nations = [...draft.nations, nation];
-                          ...tankFilters.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'),
+              height: Var("space-1"),
-              backgroundColor: Var('gray-a3'),
+              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'}
+                    variant={selected ? "solid" : "soft"}
-                    color={selected ? undefined : 'gray'}
+                    color={selected ? undefined : "gray"}
                     highContrast
                     radius="none"
                     onClick={() => {
-                      if (tankFilters.nations.includes(nation)) {
+                      TankFilters.mutate((draft) => {
-                        $tankFilters.setKey(
+                        if (tankFilters.nations.includes(nation)) {
-                          'nations',
+                          draft.nations = draft.nations.filter(
-                          tankFilters.nations.filter((n) => n !== nation),
+                            (n) => n !== nation
-                        );
+                          );
-                      } else {
+                        } else {
-                        $tankFilters.setKey('nations', [
+                          draft.nations = [...draft.nations, nation];
-                          ...tankFilters.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)' }}
+              style={{ borderRadius: "var(--radius-full)" }}
-              direction={compact ? 'column' : { md: 'row', initial: 'column' }}
+              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.mutate((draft) => {
-                        $tankFilters.setKey(
+                        if (tankFilters.classes.includes(tankClass)) {
-                          'classes',
+                          draft.classes = draft.classes.filter(
-                          tankFilters.classes.filter((c) => c !== tankClass),
+                            (c) => c !== tankClass
-                        );
+                          );
-                      } else {
+                        } else {
-                        $tankFilters.setKey('classes', [
+                          draft.classes = [...draft.classes, tankClass];
-                          ...tankFilters.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)' }}
+              style={{ borderRadius: "var(--radius-full)" }}
-              direction={compact ? 'column' : { md: 'row', initial: 'column' }}
+              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.mutate((draft) => {
-                    $tankFilters.setKey(
+                    if (tankFilters.gunType.includes("regular")) {
-                      'gunType',
+                      draft.gunType = draft.gunType.filter(
-                      tankFilters.gunType.filter((t) => t !== 'regular'),
+                        (t) => t !== "regular"
-                    );
+                      );
-                  } else {
+                    } else {
-                    $tankFilters.setKey('gunType', [
+                      draft.gunType = [...draft.gunType, "regular"];
-                      ...tankFilters.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.mutate((draft) => {
-                    $tankFilters.setKey(
+                    if (tankFilters.gunType.includes("auto_loader")) {
-                      'gunType',
+                      draft.gunType = draft.gunType.filter(
-                      tankFilters.gunType.filter((t) => t !== 'auto_loader'),
+                        (t) => t !== "auto_loader"
-                    );
+                      );
-                  } else {
+                    } else {
-                    $tankFilters.setKey('gunType', [
+                      draft.gunType = [...draft.gunType, "auto_loader"];
-                      ...tankFilters.gunType,
+                    }
-                      'auto_loader',
+                  });
-                    ]);
-                  }
                 }}
               >
-                <GunAutoloaderIcon style={{ width: '1em', height: '1em' }} />
+                <GunAutoloaderIcon style={{ width: "1em", height: "1em" }} />
               </IconButton>
               <IconButton
                 variant={
-                  tankFilters.gunType.includes('auto_reloader')
+                  tankFilters.gunType.includes("auto_reloader")
-                    ? 'solid'
+                    ? "solid"
-                    : 'soft'
+                    : "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.mutate((draft) => {
-                    $tankFilters.setKey(
+                    if (tankFilters.gunType.includes("auto_reloader")) {
-                      'gunType',
+                      draft.gunType = draft.gunType.filter(
-                      tankFilters.gunType.filter((t) => t !== 'auto_reloader'),
+                        (t) => t !== "auto_reloader"
-                    );
+                      );
-                  } else {
+                    } else {
-                    $tankFilters.setKey('gunType', [
+                      draft.gunType = [...draft.gunType, "auto_reloader"];
-                      ...tankFilters.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)' }}
+              style={{ borderRadius: "var(--radius-full)" }}
-              direction={compact ? 'column' : { md: 'row', initial: 'column' }}
+              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)' }}
+              style={{ borderRadius: "var(--radius-full)" }}
-              direction={compact ? 'column' : { md: 'row', initial: 'column' }}
+              direction={compact ? "column" : { md: "row", initial: "column" }}
             >
               <IconButton
                 variant={
                   tankFilters.types?.includes(TankType.RESEARCHABLE)
-                    ? 'solid'
+                    ? "solid"
-                    : 'soft'
+                    : "soft"
                 }
                 radius="none"
                 color={
                   tankFilters.types?.includes(TankType.RESEARCHABLE)
                     ? undefined
-                    : 'gray'
+                    : "gray"
                 }
                 highContrast
                 onClick={() => {
-                  if (tankFilters.types.includes(TankType.RESEARCHABLE)) {
+                  TankFilters.mutate((draft) => {
-                    $tankFilters.setKey(
+                    if (tankFilters.types.includes(TankType.RESEARCHABLE)) {
-                      'types',
+                      draft.types = draft.types.filter(
-                      tankFilters.types.filter(
+                        (t) => t !== TankType.RESEARCHABLE
-                        (t) => t !== TankType.RESEARCHABLE,
+                      );
-                      ),
+                    } else {
-                    );
+                      draft.types = [...draft.types, TankType.RESEARCHABLE];
-                  } else {
+                    }
-                    $tankFilters.setKey('types', [
+                  });
-                      ...tankFilters.types,
-                      TankType.RESEARCHABLE,
-                    ]);
-                  }
                 }}
               >
-                <ResearchedIcon style={{ width: '1em', height: '1em' }} />
+                <ResearchedIcon style={{ width: "1em", height: "1em" }} />
               </IconButton>
               <IconButton
                 variant={
                   tankFilters.types?.includes(TankType.PREMIUM)
-                    ? 'solid'
+                    ? "solid"
-                    : 'soft'
+                    : "soft"
                 }
                 radius="none"
                 color={
                   tankFilters.types?.includes(TankType.PREMIUM)
-                    ? 'amber'
+                    ? "amber"
-                    : 'gray'
+                    : "gray"
                 }
                 highContrast
                 onClick={() => {
-                  if (tankFilters.types.includes(TankType.PREMIUM)) {
+                  TankFilters.mutate((draft) => {
-                    $tankFilters.setKey(
+                    if (tankFilters.types.includes(TankType.PREMIUM)) {
-                      'types',
+                      draft.types = draft.types.filter(
-                      tankFilters.types.filter((t) => t !== TankType.PREMIUM),
+                        (t) => t !== TankType.PREMIUM
-                    );
+                      );
-                  } else {
+                    } else {
-                    $tankFilters.setKey('types', [
+                      draft.types = [...draft.types, TankType.PREMIUM];
-                      ...tankFilters.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'
+                    ? "solid"
-                    : 'soft'
+                    : "soft"
                 }
                 radius="none"
                 color={
                   tankFilters.types?.includes(TankType.COLLECTOR)
-                    ? 'blue'
+                    ? "blue"
-                    : 'gray'
+                    : "gray"
                 }
                 highContrast
                 onClick={() => {
-                  if (tankFilters.types.includes(TankType.COLLECTOR)) {
+                  TankFilters.mutate((draft) => {
-                    $tankFilters.setKey(
+                    if (tankFilters.types.includes(TankType.COLLECTOR)) {
-                      'types',
+                      draft.types = draft.types.filter(
-                      tankFilters.types.filter((t) => t !== TankType.COLLECTOR),
+                        (t) => t !== TankType.COLLECTOR
-                    );
+                      );
-                  } else {
+                    } else {
-                    $tankFilters.setKey('types', [
+                      draft.types = [...draft.types, TankType.COLLECTOR];
-                      ...tankFilters.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)' }}
+              style={{ borderRadius: "var(--radius-full)" }}
-              direction={compact ? 'column' : { md: 'row', initial: 'column' }}
+              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);
+            TankFilters.set(TankFilters.initial);
-            $tankopediaSort.set(initialTankopediaSort);
+            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 { Flex, Link, Text } from "@radix-ui/themes";
-import { useLocale } from '../../../hooks/useLocale';
+import { useLocale } from "../../../hooks/useLocale";
-import { $tankFilters, initialTankFilters } from '../../../stores/tankFilters';
+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 { type TankDefinition } from "@blitzkit/core";
-import { useStore } from '@nanostores/react';
+import { CaretRightIcon } from "@radix-ui/react-icons";
-import { CaretRightIcon } from '@radix-ui/react-icons';
+import { Button, TextField } from "@radix-ui/themes";
-import { Button, TextField } from '@radix-ui/themes';
+import { useLocale } from "../../../hooks/useLocale";
-import { useLocale } from '../../../hooks/useLocale';
+import { TankFilters } from "../../../stores/tankFilters";
-import { $tankFilters } from '../../../stores/tankFilters';
+import { LinkI18n } from "../../LinkI18n";
-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,36 @@
-import { useStore } from '@nanostores/react';
+import { Flex, Separator, Text } from "@radix-ui/themes";
-import { Flex, Separator, Text } from '@radix-ui/themes';
+import { isEqual } from "lodash-es";
-import { isEqual } from 'lodash-es';
+import { useMemo } from "react";
-import { useMemo } from 'react';
+import { awaitableTankDefinitions } from "../../../core/awaitables/tankDefinitions";
-import { awaitableTankDefinitions } from '../../../core/awaitables/tankDefinitions';
+import { useLocale } from "../../../hooks/useLocale";
-import { useLocale } from '../../../hooks/useLocale';
+import { TankFilters } from "../../../stores/tankFilters";
-import { $tankFilters, initialTankFilters } from '../../../stores/tankFilters';
+import { TankopediaPersistent } from "../../../stores/tankopediaPersistent";
-import { TankopediaPersistent } from '../../../stores/tankopediaPersistent';
+import { TankSort } from "../../../stores/tankopediaSort";
-import { $tankopediaSort } from '../../../stores/tankopediaSort';
+import { TankCard } from "../../TankCard";
-import { TankCard } from '../../TankCard';
+import { TankCardWrapper } from "./TankCardWrapper";
-import { TankCardWrapper } from './TankCardWrapper';
 
 const tankDefinitions = await awaitableTankDefinitions;
 
 export function RecentlyViewed() {
-  const tankopediaPersistentStore = TankopediaPersistent.useStore();
+  const filters = TankFilters.use();
-  const filters = useStore($tankFilters);
   // non-reactive because it is a little weird that it updates instantly even before the page loads
-  const recentlyViewed = tankopediaPersistentStore
+  const recentlyViewed = TankopediaPersistent.state.recentlyViewed.filter(
-    .getState()
+    (id) => id in tankDefinitions.tanks
-    .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 type { TankDefinition } from "@blitzkit/core";
-import { useStore } from '@nanostores/react';
+import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
-import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
+import { Flex, Spinner, TextField } from "@radix-ui/themes";
-import { Flex, Spinner, TextField } from '@radix-ui/themes';
+import { debounce } from "lodash-es";
-import { debounce } from 'lodash-es';
+import { type KeyboardEventHandler, useCallback, useRef } from "react";
-import { type KeyboardEventHandler, useCallback, useRef } from 'react';
+import { useLocale } from "../../../hooks/useLocale";
-import { useLocale } from '../../../hooks/useLocale';
+import { TankFilters } from "../../../stores/tankFilters";
-import { $tankFilters } from '../../../stores/tankFilters';
+import type { MaybeSkeletonComponentProps } from "../../../types/maybeSkeletonComponentProps";
-import type { MaybeSkeletonComponentProps } from '../../../types/maybeSkeletonComponentProps';
+import { QuickLink } from "./QuickLink";
-import { QuickLink } from './QuickLink';
+import { Sort } from "./Sort";
-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) {
+    if (!searching) {
-      $tankFilters.setKey('searching', true);
+      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(
+            TankSort.mutate((draft) => {
-              'direction',
+              draft.direction = value as TankopediaSortDirection;
-              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 { TIER_ROMAN_NUMERALS } from "@blitzkit/core";
-import { useStore } from '@nanostores/react';
+import { Flex, IconButton, Text } from "@radix-ui/themes";
-import { Flex, IconButton, Text } from '@radix-ui/themes';
+import { times } from "lodash-es";
-import { times } from 'lodash-es';
+import { memo } from "react";
-import { memo } from 'react';
+import { TankFilters } from "../../../stores/tankFilters";
-import { $tankFilters } from '../../../stores/tankFilters';
+import { TankSort } from "../../../stores/tankopediaSort";
-import { $tankopediaSort } from '../../../stores/tankopediaSort';
 
 export const TierFilter = memo(() => {
-  const tankFilters = useStore($tankFilters);
+  const by = TankSort.use((state) => state.by);
-  const tankopediaSort = useStore($tankopediaSort);
+  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.mutate((draft) => {
-                  $tankFilters.setKey(
+                  if (tiers.includes(tier)) {
-                    'tiers',
+                    draft.tiers = tiers.filter((t) => t !== tier);
-                    tankFilters.tiers.filter((t) => t !== tier),
+                  } else {
-                  );
+                    draft.tiers = [...tiers, tier];
-                } else {
+                  }
-                  $tankFilters.setKey('tiers', [...tankFilters.tiers, tier]);
+                });
-                }
               }}
             >
               <Text size="2">{TIER_ROMAN_NUMERALS[tier]}</Text>