Merge branch 'dev' of https://github.com/tresabhi/blitzkrieg into dev

New Crowdin updates

.github/workflows/cd-assets.yml

@@ -0,0 +1,65 @@
+name: CD Build Assets
+
+on:
+  push:
+    branches: main
+  workflow_dispatch:
+  schedule:
+    - cron: '0 2 * * *'
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  build:
+    runs-on: windows-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          submodules: recursive
+          token: ${{ secrets.GH_TOKEN }}
+
+      - name: Use node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18
+          cache: 'npm'
+
+      - name: Install Yarn
+        run: npm install --location=global yarn
+
+      - name: Use node_modules cache
+        uses: actions/cache@v3
+        with:
+          path: '**/node_modules'
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+
+      - name: Install dependencies
+        run: yarn
+
+      - name: Add fixed sharp
+        run: yarn add [email protected] --ignore-engines
+
+      - name: Setup DepotDownloader
+        run: yarn setup:depotdownloader
+
+      - name: Run DepotDownloader
+        run: ./temp/depotDownloader/DepotDownloader.exe -app 444200 -username ${{ secrets.DEPOT_DOWNLOADER_USERNAME }} -password "${{ secrets.DEPOT_DOWNLOADER_PASSWORD }}"
+
+      - name: Apply patches
+        run: |
+          $env:GH_TOKEN = "${{ secrets.GH_TOKEN }}"
+          $env:DISCORD_TOKEN = "${{ secrets.DISCORD_TOKEN }}"
+          $env:DISCORD_BLITZ_DB = "${{ secrets.DISCORD_BLITZ_DB }}"
+          $env:WOTB_DLC_CDN = "${{ secrets.WOTB_DLC_CDN }}"
+          yarn setup:patches --depot
+
+      - name: Build assets
+        run: |
+          $env:GH_TOKEN = "${{ secrets.GH_TOKEN }}"
+          $env:DISCORD_TOKEN = "${{ secrets.DISCORD_TOKEN }}"
+          $env:DISCORD_BLITZ_DB = "${{ secrets.DISCORD_BLITZ_DB }}"
+          yarn build:assets --all-targets --depot ${{ github.ref == 'refs/heads/main' && '--production' || '' }}

.github/workflows/cd-docs.yml

@@ -18,10 +18,10 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Use node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 18
           cache: 'npm'
@@ -54,7 +54,7 @@ jobs:
         uses: actions/deploy-pages@v1
 
       - name: Archive build
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: dist
           path: docs/.vitepress/dist

.github/workflows/cd-host.yml

@@ -1,9 +1,13 @@
 name: CD Host
 
 on:
+  push:
+    branches: main
   schedule:
-    - cron: '0 */6 * * *'
+    - cron: '0 */5 * * *'
   workflow_dispatch:
+  release:
+    types: [created, published, released, edited]
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
@@ -15,7 +19,7 @@ jobs:
 
     steps:
       - name: Use node
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
           node-version: 18
 

.github/workflows/cd-rating-asia.yml

@@ -1,11 +1,7 @@
-name: CD Asia Ratings
-
-# latest: '0 0 * * *'
-# asia midnight: '0 17 * * *'
+name: CD Rating Asia
 
 on:
   schedule:
-    - cron: '0 0 * * *'
     - cron: '0 17 * * *'
 
 jobs:
@@ -14,10 +10,10 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Use node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 18
           cache: 'npm'
@@ -35,4 +31,4 @@ jobs:
         run: yarn
 
       - name: Generate leaderboard
-        run: GH_TOKEN=${{ secrets.GH_TOKEN }} yarn publish:ratingsleaderboard --region=asia --target=${{ github.event.schedule == '0 0 * * *' && 'latest' || 'midnight' }}
+        run: GH_TOKEN=${{ secrets.GH_TOKEN }} DISCORD_TOKEN=${{ secrets.DISCORD_TOKEN }} DISCORD_BLITZ_DB=${{ secrets.DISCORD_BLITZ_DB }} yarn publish:ratingleaderboard --region=asia --target=midnight --production

.github/workflows/cd-rating-eu.yml

@@ -1,11 +1,7 @@
-name: CD Europe Ratings
-
-# latest: '0 0 * * *'
-# eu midnight: '0 23 * * *'
+name: CD Rating Europe
 
 on:
   schedule:
-    - cron: '0 0 * * *'
     - cron: '0 23 * * *'
 
 jobs:
@@ -14,10 +10,10 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Use node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 18
           cache: 'npm'
@@ -35,4 +31,4 @@ jobs:
         run: yarn
 
       - name: Generate leaderboard
-        run: GH_TOKEN=${{ secrets.GH_TOKEN }} yarn publish:ratingsleaderboard --region=eu --target=${{ github.event.schedule == '0 0 * * *' && 'latest' || 'midnight' }}
+        run: GH_TOKEN=${{ secrets.GH_TOKEN }} DISCORD_TOKEN=${{ secrets.DISCORD_TOKEN }} DISCORD_BLITZ_DB=${{ secrets.DISCORD_BLITZ_DB }} yarn publish:ratingleaderboard --region=eu --target=midnight --production

.github/workflows/cd-rating-latest.yml

@@ -1,6 +1,8 @@
-name: CI Version
+name: CD Rating North America
 
-on: push
+on:
+  schedule:
+    - cron: '0 0 * * *'
 
 jobs:
   host:
@@ -8,10 +10,10 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Use node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 18
           cache: 'npm'
@@ -28,5 +30,5 @@ jobs:
       - name: Install dependencies
         run: yarn
 
-      - name: Generate leaderboard
-        run: yarn lint:version
+      - name: Generate all leaderboards
+        run: GH_TOKEN=${{ secrets.GH_TOKEN }} DISCORD_TOKEN=${{ secrets.DISCORD_TOKEN }} DISCORD_BLITZ_DB=${{ secrets.DISCORD_BLITZ_DB }} yarn publish:ratingleaderboard --region=na,asia,eu --target=latest --production

.github/workflows/cd-rating-na.yml

@@ -1,11 +1,7 @@
-name: CD North America Ratings
-
-# latest: '0 0 * * *'
-# na midnight: '0 5 * * *'
+name: CD Rating North America
 
 on:
   schedule:
-    - cron: '0 0 * * *'
     - cron: '0 5 * * *'
 
 jobs:
@@ -14,10 +10,10 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Use node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 18
           cache: 'npm'
@@ -35,4 +31,4 @@ jobs:
         run: yarn
 
       - name: Generate leaderboard
-        run: GH_TOKEN=${{ secrets.GH_TOKEN }} yarn publish:ratingsleaderboard --region=na --target=${{ github.event.schedule == '0 0 * * *' && 'latest' || 'midnight' }}
+        run: GH_TOKEN=${{ secrets.GH_TOKEN }} DISCORD_TOKEN=${{ secrets.DISCORD_TOKEN }} DISCORD_BLITZ_DB=${{ secrets.DISCORD_BLITZ_DB }} yarn publish:ratingleaderboard --region=na --target=midnight --production

.github/workflows/ci-build-bot.yml

@@ -13,10 +13,10 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Use node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 18
           cache: 'npm'
@@ -33,11 +33,14 @@ jobs:
       - name: Install dependencies
         run: yarn
 
+      - name: Add fixed sharp
+        run: yarn add [email protected] --ignore-engines
+
       - name: Build
         run: yarn build:bot
 
       - name: Archive build
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: bot
           path: dist/bot

.github/workflows/ci-build-docs.yml

@@ -13,10 +13,10 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Use node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 18
           cache: 'npm'
@@ -37,7 +37,7 @@ jobs:
         run: yarn build:docs
 
       - name: Archive build
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: docs
           path: dist/docs

.github/workflows/ci-build-website.yml

@@ -13,10 +13,10 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Use node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 18
           cache: 'npm'
@@ -37,7 +37,7 @@ jobs:
         run: yarn build:website
 
       - name: Archive build
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: website
           path: dist/website

.gitignore

@@ -8,10 +8,15 @@ dist/
 dist.*
 yarn-error.log
 /test.*
-test.*
 /docs/.vitepress/dist
 /docs/.vitepress/cache
 servers.csv
 .next/
 tsconfig.tsbuildinfo
-temp/
+temp/
+/.yarn
+/.VSCodeCounter
+/.yarn
+depots
+public/sitemap*.xml
+public/robots.txt

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "submodules/closedkrieg"]
+	path = submodules/closedkrieg
+	url = https://github.com/tresabhi/closedkrieg

.vscode/settings.json

@@ -1,58 +1,159 @@
 {
   "cSpell.words": [
+    "AABBOX",
     "Abhi",
     "accountinfo",
+    "aeson",
+    "alphatest",
+    "APAC",
+    "apcr",
+    "applypatches",
+    "artefacts",
+    "atgm",
+    "AYUV",
+    "bbox",
     "bepaint",
+    "betakrieg",
+    "BINORMAL",
+    "Binormals",
+    "BKRL",
+    "bkwd",
     "blitzstars",
+    "Camo",
+    "CDON",
+    "classname",
     "cleandist",
+    "closedkrieg",
     "cockroackdb",
+    "Coef",
+    "cooldown",
     "corsproxy",
+    "CUBEMAP",
+    "CUBETEXCOORD",
     "customperiod",
+    "datasource",
+    "Ddpf",
+    "Ddsd",
+    "debugflags",
     "deburr",
+    "decalmask",
+    "defence",
+    "degressive",
+    "devkrieg",
     "diacriticless",
+    "donotremove",
+    "drei",
+    "Droodles",
+    "dvpd",
+    "dvpl",
+    "DVPLCRC",
+    "dvpm",
+    "dxgi",
     "Everytime",
+    "FASTNAME",
+    "FOURCC",
+    "fsformat",
+    "Fullscreen",
     "fullstats",
     "fuzzysort",
+    "gamemode",
+    "glsl",
+    "GLTF",
+    "haha",
+    "highp",
+    "iife",
     "immer",
+    "Inclusivity",
+    "JOINTINDEX",
+    "JOINTWEIGHT",
     "kranvagn",
     "krieg",
     "Leaderboard",
     "leaderboards",
+    "lerp",
+    "LINEARSIZE",
+    "loddist",
+    "lods",
+    "metallicness",
+    "minitelrose",
+    "Minotauro",
+    "MIPMAPCOUNT",
+    "modeltransform",
     "MURICA",
+    "NEGATIVEX",
+    "NEGATIVEY",
+    "NEGATIVEZ",
+    "nmatname",
+    "noout",
+    "normalmap",
     "Oopsy",
+    "OPTML",
     "outdir",
     "outfile",
     "ownedtanks",
+    "PIXELFORMAT",
     "playerachievements",
     "playerinfo",
-    "ratingsleaderboard",
+    "pngjs",
+    "POSITIVEX",
+    "POSITIVEY",
+    "POSITIVEZ",
+    "Promisable",
+    "Pyogenics",
+    "ratingleaderboard",
+    "raycaster",
+    "researchable",
     "Resvg",
     "roboto",
+    "SCPG",
     "searchclans",
     "searchplayers",
     "searchtanks",
+    "SHAREDEXP",
     "SKLLD",
     "Smri",
+    "Specularity",
+    "SSAO",
     "startcase",
     "statsfull",
+    "steamapps",
     "Stringifying",
+    "struct",
+    "structs",
     "strvk",
     "subnation",
+    "Synx",
     "tankaverages",
+    "Tankerch",
     "tankopedia",
     "tankopedias",
     "tankstats",
+    "texconv",
+    "TEXCOORD",
     "tresabhi",
+    "tungstentip",
+    "TYPELESS",
+    "ubjson",
     "Unicum",
+    "UNLOCALIZED",
+    "UNORM",
     "Unregistering",
     "vickers",
     "vitepress",
+    "Vovko",
     "wargaming",
     "webp",
     "winrate",
+    "wireframe",
+    "WOTB",
     "wotblitz",
+    "xffn",
+    "xkdkw",
+    "XMLDVPL",
+    "YAMLDVPL",
     "zustand"
   ],
   "deno.enable": false,
-  "deno.unstable": false
+  "deno.unstable": false,
+  "cSpell.enableFiletypes": ["glsl"]
 }

README.md

@@ -14,31 +14,10 @@ Go to [application directory for Blitzkrieg](https://discord.com/application-dir
 
 ### https://blitz-krieg.vercel.app/
 
-![Blitzkrieg website](https://i.imgur.com/QOXUP63.png)
+![Blitzkrieg website](https://i.imgur.com/eRIZe5P.png)
 
 ## Visit the documentation website
 
 ### https://tresabhi.github.io/blitzkrieg/
 
-![Blitzkrieg documentation website](https://i.imgur.com/mCZCZEI.png)
-
-## Run the bot
-
-### Install dependencies
-
-```bash
-yarn
-```
-
-### Create `.env`
-
-```env
-GH_TOKEN={YOUR_GITHUB_TOKEN_HERE}
-DISCORD_TOKEN={YOUR_DISCORD_TOKE_HERE}
-```
-
-### Run the command
-
-```bash
-yarn dev:bot
-```
+![Blitzkrieg documentation website](https://i.imgur.com/TOt5fMx.png)

crowdin.yml

@@ -0,0 +1,3 @@
+files:
+  - source: /src/lang/en-US.json
+    translation: /src/lang/%locale%.json

docs/changelogs/1.15.10.md

@@ -0,0 +1,23 @@
+# Blitzkrieg 1.15.10
+
+The 10th patch for the `1.15` update is here, breaking the record of the most patches for a single update!
+
+## Features
+
+- Added `/today`
+  - This is a direct alias for `/breakdown today`
+- Drastically simplified ratings command
+  - `/ratings current` and `/ratings archive` have been now merged
+  - Where the data is fetched from is now decided directly from the chosen season number
+- Simplified many error messages
+- Title bar description text is now centered when there is no image
+  - It always felt awkward when there was no image on the left but the left still aligned to the right
+- Removed `/link`'s requirement to select a username explicitly from the search results
+- Full names for regions are now used in the `/link` command
+  - So "NA" turns into "North America"
+
+## Fixes
+
+- Fixed contrast issues with WN8 percentile colors behind white text
+- Archived ratings neighbors now functions once again
+- Disabled tankopedia; this feature isn't finished yet and the changes were accidentally leaked

docs/changelogs/1.15.11.md

@@ -0,0 +1,11 @@
+# Blitzkrieg 1.15.11
+
+There's an easter egg somewhere in this update 🤔
+
+## Features
+
+- Added `/permissions` which lists all permissions required to run the bot and checks if the bot has them or not
+
+## Changes
+
+- Error messages now do no use embeds, instead utilize simple headings and paragraphs

docs/changelogs/1.15.12.md

@@ -0,0 +1,8 @@
+# Blitzkrieg 1.15.12
+
+Sometimes embeds need love too.
+
+## Changes
+
+- Session embeds are now translucent by default
+  - Session embed titles are now the username of the player by default

docs/changelogs/1.15.13.md

@@ -0,0 +1,7 @@
+# Blitzkrieg 1.15.13
+
+I have run out of things to say here. This patch fixes like 1 thing haha.
+
+# Technical Fixes
+
+- Tank deltas are now filtered by last battle time

docs/changelogs/1.15.4.md

@@ -0,0 +1,13 @@
+# Blitzkrieg 1.15.4
+
+Unlocking future potential
+
+## Technical Changes
+
+- Moved the word "Ratings" to the front of the workflow name
+- Renamed `blitzkrieg-db` to `blitzkrieg-assets`
+- Moved the region folders from the root to `regions`
+
+## Technical Fixes
+
+- The ratings leaderboard archiver now correctly skips undefined players

docs/changelogs/1.15.5.md

@@ -0,0 +1,7 @@
+# Blitzkrieg 1.15.5
+
+Oops, this should've been in the last patch.
+
+## Fixes
+
+- User and channel cache is now guild cache exhaustive

docs/changelogs/1.15.6.md

@@ -0,0 +1,11 @@
+# Blitzkrieg 1.15.6
+
+This should have also been in the last update lol.
+
+## Changes
+
+- Changed the format of `/about creators` and added one more person
+
+## Fixes
+
+- Archived ratings leaderboards are now fetched from the correct URL path

docs/changelogs/1.15.7.md

@@ -0,0 +1,20 @@
+# Blitzkrieg 1.15.7
+
+Simple yet powerful theming options for the session tracker
+
+## Features
+
+- The accent color of the session tracker (hence the embed too) can now be tweaked
+  - Access this setting via the dropdown from Options > Accent color
+
+## Fixes
+
+- Reimplemented the commas for last numbers in the overflow count of the ratings leaderboard
+  - For example, "+1234567 more" will now read "+1,234,567 more"
+
+## Technical Features
+
+- Added class names for more in-depth customization for those who are comfortable with CSS
+  - `session-tracker-root`
+  - `session-tracker-row`
+  - `session-tracker-row-stat`

docs/changelogs/1.15.8.md

@@ -0,0 +1,9 @@
+# Blitzkrieg 1.15.8
+
+A request fulfilled \:\)
+
+## Features
+
+- Added custom titles in session tracker
+  - Change the title through Options > Edit title...
+- Colors are shown when selecting a theme color for the session tracker

docs/changelogs/1.15.9.md

@@ -0,0 +1,13 @@
+# Blitzkrieg 1.15.9
+
+~~Curiosity killed the cat~~ Ratings killed the Blitzkrieg
+
+## Fixes
+
+- Deleted ratings players are now handled properly
+
+## Technical Fixes
+
+- Latest archived season number
+  - Is now cached properly
+  - Is now fetched in a chaining fashion correctly

docs/changelogs/1.16.0.md

@@ -0,0 +1,72 @@
+# Blitzkrieg 1.16.0
+
+This version introduces the long awaited (and desperately needed) Blitzkrieg Tankopedia.
+
+## Credits
+
+- [Pyogenics](https://github.com/pyogenics): technical documentation on WoTB 3d models
+- [aeson](https://discord.gg/WHdER7ZPAD): human encyclopedia on WoTB file layout
+- [\[OPTML\]](https://discord.gg/Su8w9KtEVE), [\_34](https://www.twitch.tv/34wotb), [Droodles_YT](https://www.youtube.com/@DroodlesBlitz): Tankopedia beta-testing
+- Minitelrose, ChickenMan7777: external module exceptions
+
+## Features
+
+- Added Tankopedia
+  - Check out the tool here: https://blitz-krieg.vercel.app/tools/tankopedia
+  - The root page features a search engine for efficiently finding tanks
+    - Search bar: lets you search tanks via it's name
+    - Sort: lets you sort tanks by their statistics and generic things like names and tiers
+    - Reset button (trash icon): resets all filters and sorts
+    - Test tanks: lets you control wether you want to include test tanks
+    - Tree type filter: filters tech tree, premium, and collector tanks
+    - Nations: filters tanks by nation
+    - Tank type filter: filters tanks by tank designation
+    - Tier filter: filters tanks by tier
+    - The search result itself displays the national flag, tier, type, image, and name of the tank
+      - Clicking on the tank redirects you to the tank's page
+  - Tankopedia page
+    - Tank sandbox: the first thing you'll see is a 3D model of the tank
+      - On slim mobile devices, click "Load model" to reveal it
+      - Model tab
+        - This model has all PBR features and is identical to the one in the game
+        - You can click and drag the turret to rotate it
+        - You can do the same with the gun but with the added control of elevating and depressing it
+      - Armor tab
+        - Shows red where the tank (the protagonist) cannot be penetrated
+        - You can switch the shells that the shooter (the antagonist) shoots
+        - By default, the antagonist tank is the same as the protagonist
+        - You can change antagonists using the antagonist bar
+          - Searching through antagonists is identical to the root search page
+          - You may also swap the protagonist and antagonist using the swap button
+        - Click on the tank's armor anywhere to get intimate details about it
+          - Shows spaced armor, gaps between layers of armor, ricochets, penetration losses over events, thickness, angled thicknesses, and angles
+      - View button (eye icon): allows you to pose the tank in a few preset configurations
+      - Sandbox settings
+        - Green penetration: shows the penetrable parts of the tank as green instead of using transparency
+        - Show grid: shows a grid under the tank
+        - View environment: shows the lighting environment around the tank
+        - Lighting: preset lighting environments
+        - Wireframe: displays armor as vertices instead of faces
+      - Fullscreen button: toggles fullscreen
+        - Note that some functionalities are disabled in fullscreen
+    - Modules: switch around modules to view it change live in the 3D model and affect stats
+    - Provisions, equipments, miscellaneous, and consumables also affect stats
+    - Stats
+      - As you switch around the configurations of the tank, the change in stats are displayed using green and red arrows with delta numbers
+      - Statistics also display their units
+      - Fire section
+        - This deals with statistics relating to the firepower of the tank
+        - You can switch shells that the stats are based on using the buttons to the right of the title
+        - You can also view the penetration loss over distance using the slider if available under the penetration section
+      - Statistics for maneuverability, survivability, and crew training are also displayed
+
+## Changes
+
+- Navigation bar
+  - Added credit to myself along with the logo and moved the whole thing to the left side
+  - Added a link to the discord icon to the right
+- Removed polka dots from the background
+
+## Fixes
+
+- The `/ratings` command once again has the username field as an optional parameter

docs/changelogs/1.16.1.md

@@ -0,0 +1,28 @@
+# Blitzkrieg 1.16.1
+
+Armor sandbox gains 25% rendering speed and 40% memory efficiency with added accuracy and features.
+
+## Features
+
+- Multiple layers of spaced armors are now calculated properly by the visual armor highlighting
+- Added opaque mode to view armor highlighting without any transparency
+- Added breakdown on layers of armor penetrated
+  - Penetration of each layer is shown represented by a color and an index
+    - Green: penetration
+    - Red: blocked
+    - Yellow: ricochet
+  - This also shows layers encountered after a ricochet
+
+## Fixes
+
+- Accuracy now doesn't drop the further the shot is placed from the origin
+- HE shells no longer loose penetration like how HEAT shells do when traveling between layers of armor
+- Persistent settings are now merged in the correct order making them truly persistent now
+- Enhanced armor and calibrated shells are now properly synced from the get go
+
+## Technical Changes
+
+- Spaced armor and external module scenes have been merged
+  - They now use additive blending
+  - Colors are now normalized by the penetration value instead of maximum armor plate thickness
+- Shell normalization now doesn't violate arccosine's domain

docs/changelogs/1.16.2.md

@@ -0,0 +1,36 @@
+# Blitzkrieg 1.16.2
+
+¡Hola desde el mundo del español!
+
+## Features
+
+- Added translations for Spanish to the bot
+  - Your language will be inferred automatically from your Discord settings
+  - Any untranslated languages and words we forgot to translate will be left in English
+  - If you have your language set to Spanish and see English in any places, please let us know on [the official Discord server](https://discord.gg/nDt7AjGJQH)
+  - All `/about` commands except for `commands` remain in English
+  - Tank names are still in English
+  - The website remains unchanged
+- The title bar (featured as the big text on top of most commands) has now been made more compact
+
+## Changes
+
+- "Tank type" is now called "tank class"
+- Removed `/player-achievements` and `search-tanks`
+  - They will be reintroduced in the future in a far better way
+  - Also removed a `SKLLD` server exclusive `/eligible` command
+    - This will be generalized for all clans in the future
+
+## Fixes
+
+- Fixed the red glowing floor underneath the tank sandbox
+  - This has been replaced with a static image
+- The refresh button is now properly removed when lacking permissions
+- Tank names that start with a number are now properly inferred from command inputs
+
+## Technical Changes
+
+- Command registration is now error tolerant meaning that if a single command fails to initiate, it will be discarded until the next restart
+  - We are currently looking into how we can allow the command to retry registration after a fixed amount of time
+- Due to the implications of the code added which can be very easily exploited by hackers, a single file has been added to the repository as a closed source submodule and will remain closed unless a third party open-source implementation is made public
+- Removed preview commands

docs/changelogs/1.16.3.md

@@ -0,0 +1,21 @@
+# Blitzkrieg 1.16.3
+
+Further polishing and corrections for the Tankopedia.
+
+## Features
+
+- Added a few more stats to view for the Tankopedia
+  - Added the count of shells in the magazine for auto-reloaders
+    - The optimal shell index was moved below this stats
+  - Shell reloads for auto-reloaders now abide crew stats
+  - Intra-clip is now also shown for auto-reloaders
+- Added 1 more decimal place worth of precision when viewing and changing gun pitch and yaw
+
+## Fixes
+
+- "Inter-clip" is now correctly spelled as "intra-clip"
+- Tanks with initial gun pitches (like the Minotauro) are now handled correctly
+  - The stats now reflect the fact that the gun is naturally pitched downwards
+  - The view model now compensates for the natural pitch
+- Tanks with the improved vertical stabilizer equipment are now handled correctly
+  - The view model now allows you to pitch the gun further as intended when the equipment is on

docs/changelogs/1.16.4.md

@@ -0,0 +1,19 @@
+# Blitzkrieg 1.16.4
+
+A few issues here and there addressed for good measure.
+
+## Changes
+
+- Armor layer penetration indices are now much more compact.
+
+## Fixes
+
+- Reverted splash mechanics changes from `1.16.1` as it made them less accurate.
+- Auto-reloaders now report their DPM stats correctly with crew training.
+
+## Technical Changes
+
+- All files in the project were reviewed and constant exports were isolated.
+- The downloaded game in the workflow now also includes the latest patches.
+- Asset building now uses sharp under the hood which should in theory be faster.
+- Fetching CDON LZ4 files now uses `no-store` instead of `no-cache`

docs/changelogs/1.17.0.md

@@ -0,0 +1,13 @@
+# Blitzkrieg 1.17.0
+
+A preview command and a touchup.
+
+## Features
+
+- Added `/research` in preview only accessible in the official Discord server.
+  - More details will be posted when the command is made public.
+
+## Changes
+
+- `/owned-tanks` now returns a simple text message listing all the tanks instead of an image.
+  - This is meant to improve the readability and ease of copying.

docs/changelogs/1.17.1.md

@@ -0,0 +1,8 @@
+# Blitzkrieg 1.17.1
+
+Some stability fixes.
+
+## Technical Changes
+
+- `sharp` is now included in the build instead of having being installed before runtime.
+- Png converter cache is now more memory efficient.

docs/changelogs/1.17.2.md

@@ -0,0 +1,13 @@
+# Blitzkrieg 1.17.2
+
+Introducing the new `/research` command!
+
+## Features
+
+- Added the `/research` command
+  - Type in the name of a tech tree tank you desire to research and this command will list all the expenses in researching all tanks in that line
+  - The starting tank is inferred automatically by the tanks you own
+    - This may be a bit inaccurate because of the lack of accurate information Wargaming provides about owned tanks
+  - You are also manually provide a starting tank and a user to see the progress on a line for
+- Replaced Vercel Analytics (which collapsed under the insane amount of traffic on the website) with Google Analytics
+- Spaced armor can now be toggled in the Tankopedia armor sandbox

docs/changelogs/1.18.0.md

@@ -0,0 +1,19 @@
+# Blitzkrieg 1.18.0
+
+Introducing the new `/rating` command!
+
+## Features
+
+- `/rating` command
+  - Features statistics on today's performance in ratings
+  - The included stats are battles, winrate, damage, survival, and kills
+  - This command also features the score, rank, and league you are at plus the reward you'll get if you are high enough on the leaderboard
+- `/ratings`, the old leaderboard command, has been renamed `/rating-leaderboard`
+  - Reward icons have been removed from the leaderboard
+
+## Technical Changes
+
+- Rating leaderboards are now built in a more action-efficient manner.
+  - This version also introduces the BKRL (Blitzkrieg rating leaderboard) file format which is an efficient way to store entire leaderboards of regions to disk (1 MB per 40,000 users).
+  - Latest archival actions now build all regions at once in a single action.
+- The sharp module is now included in the build.

docs/guide/bkrl.md

@@ -0,0 +1,45 @@
+# Blitzkrieg Rating Leaderboard
+
+A straightforward way of storing the entire World of Tanks Blitz rating leaderboard to disk.
+
+```cpp
+primary BlitzkriegRatingLeaderboard {
+  utf8"BKRL" magic;
+  Header header;
+  primary Body<header> body;
+}
+
+Header {
+  uint16 version; // always 1
+  Format format;
+  uint32 count;
+}
+
+Format enum<uint8> {
+  Base,
+  Superset1,
+}
+
+Body<Header header> match<header.format> {
+  Base {
+    primary {
+      uint32 id;
+      uint16 score;
+    }[header.count] entries;
+  };
+
+  Superset1 {
+    primary {
+      uint32 id;
+      uint16 score;
+
+      uint32 battles;
+      uint32 wins;
+      uint32 survived;
+
+      uint32 damage;
+      uint32 kills;
+    }[header.count] entries;
+  };
+}
+```

docs/guide/cdon.md

@@ -0,0 +1,99 @@
+# Cedilla Object Notation
+
+1. JSON compressed as CDON, written directly to disk (a direct 50% reduction).
+2. CDON further compressed with LZ4 (a clean 90% reduction).
+3. The raw JSON file as fetched from a random data source.
+4. CDON decompressed once again to JSON. Note that this file is a little larger than the original JSON file as it contains a lot more decimal places due to float precision (this shouldn't affect the size in memory).
+
+![an image of file sizes](https://i.imgur.com/AHJiFpq.png)
+
+FS stands for "Fast String".
+
+```cpp
+primary CedillaObjectNotation {
+  utf8"CDON" magic;
+  Header header;
+  primary Body<header.fsFormat> body;
+}
+
+Header {
+  uint16 version; // always 1
+  FSFormat fsFormat;
+  StringTable<fsFormat> stringTable;
+}
+
+FSFormat enum<uint8> {
+  Format8,
+  Format16,
+  Format32,
+}
+
+FSPrimitive<FSFormat fsFormat> match(fsFormat) {
+  Format8: uint8;
+  Format16: uint16;
+  Format32: uint32;
+}
+
+StringTable<FSFormat fsFormat> {
+  FSPrimitive<fsFormat> count;
+  String[count] strings;
+}
+
+Body<FSFormat fsFormat> {
+  primary Value<fsFormat> object;
+}
+
+ValueType enum<uint8> {
+  Null,
+  Boolean,
+  Uint8,
+  Uint16,
+  Uint32,
+  Uint64,
+  Int8,
+  Int16,
+  Int32,
+  Int64,
+  Float32,
+  Float64,
+  String,
+  FS,
+  Array,
+  Object,
+}
+
+String {
+  uint32 length;
+  primary utf8<length> value;
+}
+
+StringValue Value & { (ValueType.String | ValueType.FS) type }
+
+Value<FSFormat fsFormat> {
+  ValueType type;
+  match<type> {
+    Boolean: { uint8 value; }
+    Uint8: { uint8 value; }
+    Uint16: { uint16 value; }
+    Uint32: { uint32 value; }
+    Uint64: { uint64 value; }
+    Int8: { int8 value; }
+    Int16: { int16 value; }
+    Int32: { int32 value; }
+    Int64: { int64 value; }
+    Float32: { float32 value; }
+    Float64: { float64 value; }
+    String: { String value; }
+    FS: { FSPrimitive<fsFormat> index; }
+    Array: {
+      uint32 count;
+      Value[count] values;
+    }
+    Object: {
+      uint32 count;
+      StringValue[count] keys;
+      Value[count] values;
+    }
+  }
+}
+```

docs/guide/creators.md

@@ -1,6 +1,15 @@
-# Creators
+# Team
 
-- TrèsAbhi `@tresabhi`
-  - Creator & main programmer; _I do it all!_
-- Prince_NA `@prince_na`
-  - Advisor & tester
+- TrèsAbhi: creator & programmer
+- Prince_NA: game advisor & tester
+
+# Contributors
+
+- S0AP: bot verification process & initial advertizement platform
+- Vovko: discord bot rendering pipeline
+- Maddox: game file decompression
+- Pyogenics: tank model decompression
+- Aeson: game files layout
+- Minitelrose, ChickenMan7777: 3-caliber rule edge cases
+- \_34, HisRoyalFatness, Synx, xkdkw: embed UX
+- [OPTML], Aeson, \_34, Droodles: beta testing tankopedia

docs/guide/dpm.md

@@ -0,0 +1,17 @@
+# Damage Per Minute (DPM)
+
+The damage per minute of a tank is the average damage that can be dealt in that tank with the first shell (usually AP) in 60 seconds.
+
+## Regular and Auto Loaders
+
+The damage per minute for these types of guns are calculated by allowing the gun to shoot as soon as the shell is loaded (and in the case of auto loaders, the clip is dumped as fast as the inter-clip time will allow).
+
+## Auto Reloaders
+
+These types of guns have 3 DPM values.
+
+- Damage per minute: calculated if you were to treat the shells like a normal auto loader where you dump all shells, wait for all shells to reload, and repeat.
+- Maximum: some tanks gain DPM the deeper they go into the clip and others maintain a higher DPM the less shells used. The "maximum" DPM is calculated if you were to treat the gun as a single-shot regular gun with the shell with the lowest reload. The shell with the highest DPM is listed as "Optimal shell index."
+- Effective: this is the maximum DPM tacked on with dumping the remaining shells at the beginning or the end of the 60 seconds.
+  - If "Optimal shell index" is 1, the clip must be dumped first then used as a single shot.
+  - If "Optimal shell index" is any other number, the gun should be treated as a single shot then dumped for the highest effective DPM.

docs/guide/introduction.md

@@ -18,5 +18,5 @@ Blitzkrieg is available as a Discord bot and can be [installed very easily](/gui
 Provides a bunch of very helpful tools; https://blitz-krieg.vercel.app/
 
 - Session tracker
-- Ratings leaderboard
+- Rating leaderboard
 - Way more to come

docs/guide/permissions.md

@@ -1,7 +0,0 @@
-# Permissions
-
-The following Discord permissions are required by the bot to ensure full functionality:
-
-- Manage nicknames
-- Read messages / view channels
-- Attach files

next-sitemap.config.cjs

@@ -0,0 +1,6 @@
+/** @type {import('next-sitemap').IConfig} */
+module.exports = {
+  siteUrl: process.env.SITE_URL || 'https://blitz-krieg.vercel.app',
+  generateRobotsTxt: true,
+  sourceDir: 'dist/website',
+};

next.config.js

@@ -1,10 +1,18 @@
 import { createVanillaExtractPlugin } from '@vanilla-extract/next-plugin';
 
-const withVanillaExtract = createVanillaExtractPlugin();
+const withVanillaExtract = createVanillaExtractPlugin({ tests: /\.css$/ });
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  ...withVanillaExtract(),
+  ...withVanillaExtract({
+    webpack: (config) => {
+      config.module.rules.push({
+        test: /\.glsl$/,
+        type: 'asset/source',
+      });
+      return config;
+    },
+  }),
 
   distDir: 'dist/website',
   reactStrictMode: false,

package.dist.json

@@ -1,7 +0,0 @@
-{
-  "main": "server.js",
-  "type": "module",
-  "scripts": {
-    "start": "node --enable-source-maps server.cjs"
-  }
-}

package.json

@@ -1,38 +1,46 @@
 {
   "name": "blitzkrieg",
-  "version": "1.15.3",
+  "version": "1.18.0",
   "description": "🎉 Tools for everything World of Tanks Blitz",
   "main": "src/server.ts",
   "type": "module",
   "scripts": {
-    "build:bot": "vite-node --script scripts/build",
-    "build:website": "next build",
+    "build:bot": "vite-node --script scripts/build --production",
+    "build:website": "next build && next-sitemap --config next-sitemap.config.cjs",
     "build:docs": "vitepress build docs",
-    "build:ratingsleaderboard": "vite-node --script scripts/buildRatingsLeaderboard",
-    "build:tankopedia": "vite-node --script scripts/buildTankopedia",
-    "dev:bot": "yarn build:bot && yarn start:bot",
+    "build:ratingleaderboard": "vite-node --script scripts/buildRatingLeaderboard",
+    "build:assets": "vite-node --max_old_space_size=16384 --script scripts/buildAssets/index",
+    "build:test": "vite-node --script scripts/buildTest",
+    "dev:bot": "vite-node --script scripts/build --production && yarn start:bot",
     "dev:docs": "vitepress dev docs",
     "dev:website": "next dev",
     "start:bot": "node --enable-source-maps dist/bot/index.cjs",
     "start:website": "next start",
     "host:docs": "vitepress preview docs",
-    "publish:ratingsleaderboard": "vite-node --script scripts/buildRatingsLeaderboard --publish",
-    "zip": "zip -r dist.zip dist",
+    "publish:ratingleaderboard": "vite-node --script scripts/buildRatingLeaderboard --publish",
+    "setup:patches": "vite-node --script scripts/applyPatches",
     "lint": "npx tsc",
     "lint:website": "next lint",
     "format": "prettier --write \"**/*.@(json|js|jsx|css|md|ts|tsx|html|xml|yml|gltf)\"",
     "lint:version": "vite-node --script scripts/checkVersionMissMatch",
     "knip": "knip",
-    "update": "yarn upgrade --latest"
+    "update": "yarn upgrade --latest",
+    "setup:depotdownloader": "vite-node --script scripts/setupDepotDownloader",
+    "tunnel": "cloudflared tunnel --url http://localhost:3000"
   },
   "license": "MIT",
   "dependencies": {
+    "@gltf-transform/core": "^3.9.0",
+    "@octokit/plugin-throttling": "^8.1.3",
     "@octokit/rest": "^20.0.1",
     "@prisma/client": "^5.4.1",
-    "@radix-ui/colors": "^3.0.0-rc.4",
+    "@radix-ui/colors": "^3.0.0",
     "@radix-ui/react-icons": "^1.3.0",
-    "@radix-ui/themes": "^1.1.2",
+    "@radix-ui/themes": "^2.0.1",
+    "@react-three/drei": "^9.93.0",
+    "@react-three/fiber": "^8.15.14",
     "@resvg/resvg-js": "^2.4.1",
+    "@types/three": "^0.160.0",
     "@vanilla-extract/css": "^1.13.0",
     "bepaint": "^0.1.0-beta.3",
     "decompress": "^4.2.1",
@@ -40,37 +48,55 @@
     "dotenv": "^16.3.1",
     "esbuild": "^0.19.3",
     "express": "^4.18.2",
+    "false": "^0.0.4",
     "fuzzysort": "^2.0.4",
     "immer": "^10.0.2",
     "js-yaml": "^4.1.0",
     "lodash": "^4.17.21",
+    "lz4js": "^0.2.0",
     "markdown-escape": "^2.0.0",
-    "next": "^13.5.2",
+    "next": "^14.1.0",
+    "next-sitemap": "^4.2.3",
+    "parse-dds": "^1.2.1",
+    "postprocessing": "^6.34.1",
     "react": "^18.2.0",
+    "react-device-detect": "^2.2.3",
     "react-dom": "^18.2.0",
     "react-fuzzysort": "^1.0.1",
-    "satori": "^0.10.8",
+    "react-promise-suspense": "^0.3.4",
+    "react-spinners": "^0.13.8",
+    "satori": "^0.10.13",
+    "sharp": "0.33.1",
+    "three": "0.159.0",
+    "three-stdlib": "^2.29.4",
     "vite-node": "^0.34.5",
     "vitepress": "^1.0.0-rc.20",
     "vitepress-plugin-auto-sidebar": "^1.1.0",
-    "xml-js": "^1.6.11",
+    "yaml": "^2.3.4",
     "zustand": "^4.4.1"
   },
   "devDependencies": {
     "@total-typescript/ts-reset": "^0.5.1",
-    "@types/decompress": "^4.2.6",
+    "@types/decompress": "^4.2.7",
     "@types/escape-html": "^1.0.2",
     "@types/express": "^4.17.18",
     "@types/js-yaml": "^4.0.8",
     "@types/lodash": "^4.14.199",
+    "@types/lz4": "^0.6.4",
     "@types/markdown-escape": "^1.1.0",
     "@types/node": "^20.6.5",
+    "@types/parse-dds": "^1.0.3",
+    "@types/pngjs": "^6.0.4",
     "@types/react": "^18.2.22",
     "@vanilla-extract/next-plugin": "^2.3.1",
     "compare-versions": "^6.1.0",
-    "knip": "^2.27.1",
+    "crc": "^4.3.2",
+    "fast-xml-parser": "^4.3.2",
+    "knip": "^3.4.0",
+    "lz4": "^0.6.5",
     "prettier": "^3.0.3",
     "prisma": "^5.4.1",
     "typescript": "^5.2.2"
-  }
+  },
+  "packageManager": "[email protected]"
 }

scripts/applyPatches.ts

@@ -0,0 +1,48 @@
+import { mkdir, writeFile } from 'fs/promises';
+import { parse as parsePath } from 'path';
+import { parse as parseYaml } from 'yaml';
+import { readStringDVPL } from '../src/core/blitz/readStringDVPL';
+import { writeDVPL } from '../src/core/blitz/writeDVPL';
+import { secrets } from '../src/core/blitzkrieg/secrets';
+import { dvp } from '../submodules/closedkrieg/src/dvp';
+import { DATA } from './buildAssets/constants';
+
+const versionTextFile = await readStringDVPL(`${DATA}/version.txt.dvpl`);
+const currentVersion = versionTextFile
+  .split(' ')[0]
+  .split('.')
+  .slice(0, 3)
+  .join('.');
+
+console.log(`Installing patches for ${currentVersion}...`);
+
+let patchIndex = 1;
+while (true) {
+  const response = await fetch(
+    `${secrets.WOTB_DLC_CDN}/dlc/s${currentVersion}_${patchIndex}.yaml`,
+  );
+
+  if (response.status === 200) {
+    console.log(`Applying patch ${patchIndex}...`);
+
+    const data = parseYaml(await response.text());
+    const dvpm = await fetch(`${secrets.WOTB_DLC_CDN}/dlc/${data.dx11}`).then(
+      (response) => response.arrayBuffer(),
+    );
+    const dvpd = await fetch(
+      `${secrets.WOTB_DLC_CDN}/dlc/${data.dx11.replace('.dvpm', '.dvpd')}`,
+    ).then((response) => response.arrayBuffer());
+    const files = await dvp(dvpm, dvpd);
+
+    await Promise.all(
+      files.map(async ({ path, data }) => {
+        const { dir } = parsePath(path);
+
+        await mkdir(`${DATA}/${dir}`, { recursive: true });
+        await writeFile(`${DATA}/${path}.dvpl`, writeDVPL(Buffer.from(data)));
+      }),
+    );
+
+    patchIndex++;
+  } else break;
+}

scripts/build.ts

@@ -1,5 +1,9 @@
+import { exec } from 'child_process';
 import { build } from 'esbuild';
 import { cp, readdir } from 'fs/promises';
+import { argv } from 'process';
+
+const isProduction = argv.includes('--production');
 
 readdir('src/workers').then((workers) => {
   const files = [
@@ -25,6 +29,7 @@ readdir('src/workers').then((workers) => {
       '.js': '.cjs',
     },
 
+    external: ['sharp'],
     bundle: true,
     sourcemap: true,
     minifyIdentifiers: false, // causes goofy errors
@@ -42,3 +47,11 @@ readdir('node_modules/prisma').then((files) =>
     .filter((file) => file.endsWith('.node'))
     .map((file) => cp(`node_modules/prisma/${file}`, `dist/bot/${file}`)),
 );
+
+if (isProduction) {
+  // install fixed sharp
+  console.log('Installing fixed sharp...');
+  exec('yarn init -y && yarn add [email protected] --ignore-engines', {
+    cwd: 'dist/bot',
+  });
+}

scripts/buildAssets/boosterIcons.ts

@@ -0,0 +1,48 @@
+import { readdir } from 'fs/promises';
+import sharp from 'sharp';
+import { readDVPLFile } from '../../src/core/blitz/readDVPLFile';
+import { readStringDVPL } from '../../src/core/blitz/readStringDVPL';
+import { commitAssets } from '../../src/core/blitzkrieg/commitAssets';
+import { FileChange } from '../../src/core/blitzkrieg/commitMultipleFiles';
+import { DATA, POI } from './constants';
+
+export async function boosterIcons(production: boolean) {
+  const boosterFiles = (await readdir(`${DATA}/${POI.boosterIcons}`)).filter(
+    (file) => !file.endsWith('@2x.txt.dvpl') && !file.startsWith('texture0'),
+  );
+  const image = sharp(
+    await readDVPLFile(`${DATA}/${POI.boosterIcons}/texture0.packed.webp.dvpl`),
+  );
+  const changes: FileChange[] = [];
+
+  await Promise.all(
+    boosterFiles.map(async (file) => {
+      const name = file.match(/booster_(.+).txt.dvpl/)![1];
+      const sizes = (
+        await readStringDVPL(`${DATA}/${POI.boosterIcons}/${file}`)
+      )
+        .split('\n')[4]
+        .split(' ')
+        .map(Number);
+      const content = (
+        await image
+          .clone()
+          .extract({
+            left: sizes[0],
+            top: sizes[1],
+            width: sizes[2],
+            height: sizes[3],
+          })
+          .toBuffer()
+      ).toString('base64');
+
+      changes.push({
+        path: `icons/boosters/${name}.webp`,
+        content,
+        encoding: 'base64',
+      });
+    }),
+  );
+
+  await commitAssets('booster icons', changes, production);
+}

scripts/buildAssets/camouflageIcons.ts

@@ -0,0 +1,20 @@
+import { readDVPLFile } from '../../src/core/blitz/readDVPLFile';
+import { commitAssets } from '../../src/core/blitzkrieg/commitAssets';
+import { FileChange } from '../../src/core/blitzkrieg/commitMultipleFiles';
+import { DATA, POI } from './constants';
+
+export async function camouflageIcons(production: boolean) {
+  console.log('Building camouflage icons...');
+  const content = await readDVPLFile(
+    `${DATA}/${POI.defaultCamoIcon.replace('.webp', '.packed.webp.dvpl')}`,
+  ).then((content) => content.toString('base64'));
+  const changes: FileChange[] = [
+    {
+      content,
+      encoding: 'base64',
+      path: 'icons/camo.webp',
+    },
+  ];
+
+  await commitAssets('camo icons', changes, production);
+}

scripts/buildAssets/circleFlags.ts

@@ -0,0 +1,29 @@
+import { readdir } from 'fs/promises';
+import { readBase64DVPL } from '../../src/core/blitz/readBase64DVPL';
+import { commitAssets } from '../../src/core/blitzkrieg/commitAssets';
+import { FileChange } from '../../src/core/blitzkrieg/commitMultipleFiles';
+import { DATA, POI } from './constants';
+
+export async function circleFlags(production: boolean) {
+  const flags = await readdir(`${DATA}/${POI.flags}`);
+  const changes = await Promise.all(
+    flags
+      .filter(
+        (flag) =>
+          flag.startsWith('flag_profile-stat_') &&
+          !flag.endsWith('@2x.packed.webp.dvpl'),
+      )
+      .map(async (flag) => {
+        const content = await readBase64DVPL(`${DATA}/${POI.flags}/${flag}`);
+        const name = flag.match(/flag_profile-stat_(.+)\.packed\.webp/)![1];
+
+        return {
+          content,
+          encoding: 'base64',
+          path: `flags/circle/${name}.webp`,
+        } satisfies FileChange;
+      }),
+  );
+
+  await commitAssets('circle flags', changes, production);
+}

scripts/buildAssets/constants.ts

@@ -0,0 +1,40 @@
+import { readdir } from 'fs/promises';
+import { argv } from 'process';
+
+const isDepot = argv.includes('--depot');
+export const WOTB_WIN32_DEPOT = 444202;
+export const DATA = isDepot
+  ? await (async () => {
+      const [installationVersion] = await readdir(`depots/${WOTB_WIN32_DEPOT}`);
+      return `depots/${WOTB_WIN32_DEPOT}/${installationVersion}/Data`;
+    })()
+  : 'C:/Program Files (x86)/Steam/steamapps/common/World of Tanks Blitz/Data';
+
+export const POI = {
+  vehicleDefinitions: 'XML/item_defs/vehicles',
+  strings: 'Strings',
+  cachedStrings: 'https://stufficons.wgcdn.co/localizations/en.yaml',
+  tankParameters: '3d/Tanks/Parameters',
+  smallIcons: 'Gfx/UI/BattleScreenHUD/SmallTankIcons',
+  bigIcons: 'Gfx/UI/BigTankIcons',
+  flags: 'Gfx/Lobby/flags',
+  '3d': '3d',
+  bigShellIcons: 'Gfx/Shared/tank-supply/ammunition/big',
+  moduleIcons: 'Gfx/UI/ModulesTechTree',
+  collisionMeshes: '3d/Tanks/CollisionMeshes',
+  optionalDevices: 'XML/item_defs/vehicles/common/optional_devices.xml',
+  optionalDeviceSlots:
+    'XML/item_defs/vehicles/common/optional_device_slots.xml',  
+  optionalDeviceImageMappings:
+    'UI/Screens3/Lobby/Inventory/OptionalDevices/OptionalDevicesItemImage.style.yaml',
+  optionalDevicesImage:
+    'Gfx/UI/InventoryIcons/Big/OptionalDevices/texture0.packed.webp',
+  consumablesCommon: 'XML/item_defs/vehicles/common/consumables/common.xml',
+  consumableIcons: 'Gfx/UI/InventoryIcons/Big/Consumables',
+  provisionIcons: 'Gfx/UI/InventoryIcons/Big/Provisions',
+  equipmentItemImageMappings:
+    'UI/Screens3/Lobby/Inventory/Equipment/EquipmentItemImage.style.yaml',
+  provisionsCommon: 'XML/item_defs/vehicles/common/provisions/common.xml',
+  defaultCamoIcon: 'Gfx/UI/Hangar/IconCamouflage.webp',
+  boosterIcons: 'Gfx/Shared/boosters',
+} as const;

scripts/buildAssets/consumableProvisionIcons.ts

@@ -0,0 +1,164 @@
+import sharp from 'sharp';
+import { readDVPLFile } from '../../src/core/blitz/readDVPLFile';
+import { readStringDVPL } from '../../src/core/blitz/readStringDVPL';
+import { readXMLDVPL } from '../../src/core/blitz/readXMLDVPL';
+import { readYAMLDVPL } from '../../src/core/blitz/readYAMLDVPL';
+import { commitAssets } from '../../src/core/blitzkrieg/commitAssets';
+import { FileChange } from '../../src/core/blitzkrieg/commitMultipleFiles';
+import { DATA, POI } from './constants';
+import { ConsumablesCommon, ProvisionsCommon } from './definitions';
+
+interface Mappings {
+  Header: { version: number };
+  StyleSheets: {
+    selectors: string[];
+    properties: { 'bg-sprite': string };
+  }[];
+}
+
+export async function consumableProvisionIcons(production: boolean) {
+  console.log('Building consumable and provision icons...');
+
+  const changes: FileChange[] = [];
+  const consumablesTexture = sharp(
+    await readDVPLFile(
+      `${DATA}/${POI.consumableIcons}/texture0.packed.webp.dvpl`,
+    ),
+  );
+  const provisionsTexture = sharp(
+    await readDVPLFile(
+      `${DATA}/${POI.provisionIcons}/texture0.packed.webp.dvpl`,
+    ),
+  );
+
+  const equipmentItemImageMappings = await readYAMLDVPL<Mappings>(
+    `${DATA}/${POI.equipmentItemImageMappings}.dvpl`,
+  );
+  const consumablesCommon = await readXMLDVPL<{
+    root: ConsumablesCommon;
+  }>(`${DATA}/${POI.consumablesCommon}.dvpl`);
+  const provisionsCommon = await readXMLDVPL<{
+    root: ProvisionsCommon;
+  }>(`${DATA}/${POI.provisionsCommon}.dvpl`);
+  const styleSheets = Object.values(equipmentItemImageMappings.StyleSheets);
+
+  await Promise.all(
+    Object.values(consumablesCommon.root).map(async (consumable) => {
+      const styleSheet = styleSheets.find((styleSheet) =>
+        styleSheet.selectors.includes(
+          `.equipment_item.${consumable.icon} * .equipment-img`,
+        ),
+      );
+
+      if (!styleSheet) {
+        console.warn(
+          `No style sheet found for consumable ${consumable.icon}; skipping...`,
+        );
+        return;
+      }
+
+      const configPath = styleSheet.properties['bg-sprite']
+        .replace('~res:/', '')
+        .replace('.psd', '')
+        .replace('.txt', '');
+
+      if (configPath.startsWith('Gfx/Shared')) {
+        const image = sharp(
+          await readDVPLFile(`${DATA}/${configPath}.packed.webp.dvpl`),
+        );
+        const content = (
+          await image.trim({ threshold: 100 }).toBuffer()
+        ).toString('base64');
+
+        changes.push({
+          path: `icons/consumables/${consumable.id}.webp`,
+          encoding: 'base64',
+          content,
+        });
+      } else {
+        const sizes = (await readStringDVPL(`${DATA}/${configPath}.txt.dvpl`))
+          .split('\n')[4]
+          .split(' ')
+          .map(Number);
+        const content = (
+          await consumablesTexture
+            .clone()
+            .extract({
+              left: sizes[0],
+              top: sizes[1],
+              width: sizes[2],
+              height: sizes[3],
+            })
+            .toBuffer()
+        ).toString('base64');
+
+        changes.push({
+          path: `icons/consumables/${consumable.id}.webp`,
+          encoding: 'base64',
+          content,
+        });
+      }
+    }),
+  );
+
+  await Promise.all(
+    Object.values(provisionsCommon.root).map(async (provision) => {
+      const styleSheet = styleSheets.find((styleSheet) =>
+        styleSheet.selectors.includes(
+          `.equipment_item.${provision.icon} * .equipment-img`,
+        ),
+      );
+
+      if (!styleSheet) {
+        console.warn(
+          `No style sheet found for provision ${provision.icon}; skipping...`,
+        );
+        return;
+      }
+
+      const configPath = styleSheet.properties['bg-sprite']
+        .replace('~res:/', '')
+        .replace('.psd', '')
+        .replace('.txt', '');
+
+      if (configPath.startsWith('Gfx/Shared')) {
+        const image = sharp(
+          await readDVPLFile(`${DATA}/${configPath}.packed.webp.dvpl`),
+        );
+        const content = (
+          await image.trim({ threshold: 100 }).toBuffer()
+        ).toString('base64');
+
+        changes.push({
+          path: `icons/provisions/${provision.id}.webp`,
+          encoding: 'base64',
+          content,
+        });
+      } else {
+        const sizes = (await readStringDVPL(`${DATA}/${configPath}.txt.dvpl`))
+          .split('\n')[4]
+          .split(' ')
+          .map(Number);
+        const content = (
+          await provisionsTexture
+            .clone()
+            .extract({
+              left: sizes[0],
+              top: sizes[1],
+              width: sizes[2],
+              height: sizes[3],
+            })
+            .toBuffer()
+        ).toString('base64');
+
+        changes.push({
+          path: `icons/provisions/${provision.id}.webp`,
+          encoding: 'base64',
+          content,
+        });
+      }
+    }),
+  );
+
+  await commitAssets('consumable and provision icons', changes, production);
+}

scripts/buildAssets/currencies.ts

@@ -0,0 +1,39 @@
+import sharp from 'sharp';
+import { readDVPLFile } from '../../src/core/blitz/readDVPLFile';
+import { commitAssets } from '../../src/core/blitzkrieg/commitAssets';
+import { FileChange } from '../../src/core/blitzkrieg/commitMultipleFiles';
+import { DATA } from './constants';
+
+const ICONS = [
+  ['currency_silver_m.packed.webp', 'silver'],
+  ['currency_premium_xl.packed.webp', 'premium'],
+  ['currency_gold_m.packed.webp', 'gold'],
+  ['currency_free-xp_xl.packed.webp', 'free-xp'],
+  ['currency_elite-xp_xl.packed.webp', 'elite-xp'],
+  ['currency_crew-xp_xl.packed.webp', 'crew-xp'],
+  ['currency_battle-xp_xl.packed.webp', 'xp'],
+];
+
+export async function currencies(production: boolean) {
+  console.log('Building currency icons...');
+
+  const changes = await Promise.all(
+    ICONS.map(async ([file, name]) => {
+      const content = (
+        await sharp(
+          await readDVPLFile(`${DATA}/Gfx/Lobby/currency/${file}.dvpl`),
+        )
+          .trim()
+          .toBuffer()
+      ).toString('base64');
+
+      return {
+        content,
+        encoding: 'base64',
+        path: `icons/currencies/${name}.webp`,
+      } satisfies FileChange;
+    }),
+  );
+
+  await commitAssets('currency icons', changes, production);
+}

scripts/buildAssets/equipmentIcons.ts

@@ -0,0 +1,93 @@
+import sharp from 'sharp';
+import { readDVPLFile } from '../../src/core/blitz/readDVPLFile';
+import { readStringDVPL } from '../../src/core/blitz/readStringDVPL';
+import { readXMLDVPL } from '../../src/core/blitz/readXMLDVPL';
+import { readYAMLDVPL } from '../../src/core/blitz/readYAMLDVPL';
+import { commitAssets } from '../../src/core/blitzkrieg/commitAssets';
+import { FileChange } from '../../src/core/blitzkrieg/commitMultipleFiles';
+import { DATA, POI } from './constants';
+import { OptionalDevices } from './definitions';
+
+interface Mappings {
+  Header: { version: number };
+
+  StyleSheets: {
+    selectors: string[];
+    properties: { 'bg-sprite': string };
+  }[];
+}
+
+export async function equipmentIcons(production: boolean) {
+  console.log('Building equipment icons...');
+
+  const changes: FileChange[] = [];
+  const optionalDevices = await readXMLDVPL<{ root: OptionalDevices }>(
+    `${DATA}/${POI.optionalDevices}.dvpl`,
+  );
+  const mappings = await readYAMLDVPL<Mappings>(
+    `${DATA}/${POI.optionalDeviceImageMappings}.dvpl`,
+  );
+  const image = sharp(
+    await readDVPLFile(`${DATA}/${POI.optionalDevicesImage}.dvpl`),
+  );
+
+  await Promise.all(
+    Object.entries(optionalDevices.root).map(
+      async ([optionalDeviceKey, optionalDevice]) => {
+        if (optionalDeviceKey === 'nextAvailableId') return;
+
+        const mapping = mappings.StyleSheets.find((mapping) =>
+          mapping.selectors.includes(
+            `.optional_device_item.${optionalDevice.icon} #Img`,
+          ),
+        );
+
+        if (!mapping) {
+          console.warn(
+            `No mapping found for ${optionalDevice.icon}; skipping...`,
+          );
+          return;
+        }
+
+        const configPathRaw = mapping.properties['bg-sprite'];
+        const configPath = configPathRaw.replace('~res:/', '');
+
+        if (configPath.startsWith('Gfx/Lobby')) {
+          const configPathWebp = configPath.replace('.txt', '');
+          const image = sharp(
+            await readDVPLFile(`${DATA}/${configPathWebp}.packed.webp.dvpl`),
+          );
+          const content = (await image.trim().toBuffer()).toString('base64');
+
+          changes.push({
+            path: `icons/equipment/${optionalDevice.id}.webp`,
+            encoding: 'base64',
+            content,
+          });
+        } else {
+          const config = await readStringDVPL(`${DATA}/${configPath}.dvpl`);
+          const sizes = config.split('\n')[4].split(' ').map(Number);
+          const content = (
+            await image
+              .clone()
+              .extract({
+                left: sizes[0],
+                top: sizes[1],
+                width: sizes[2],
+                height: sizes[3],
+              })
+              .toBuffer()
+          ).toString('base64');
+
+          changes.push({
+            path: `icons/equipment/${optionalDevice.id}.webp`,
+            encoding: 'base64',
+            content,
+          });
+        }
+      },
+    ),
+  );
+
+  await commitAssets('equipment icons', changes, production);
+}

scripts/buildAssets/index.ts

@@ -0,0 +1,47 @@
+import { config } from 'dotenv';
+import { argv } from 'process';
+
+config();
+
+const allTargets = argv.includes('--all-targets');
+const targets = argv
+  .find((argument) => argument.startsWith('--target'))
+  ?.split('=')[1]
+  .split(',');
+const production = argv.includes('--production');
+
+import { boosterIcons } from './boosterIcons';
+import { camouflageIcons } from './camouflageIcons';
+import { circleFlags } from './circleFlags';
+import { consumableProvisionIcons } from './consumableProvisionIcons';
+import { currencies } from './currencies';
+import { definitions } from './definitions';
+import { equipmentIcons } from './equipmentIcons';
+import { moduleIcons } from './moduleIcons';
+import { scratchedFlags } from './scratchedFlags';
+import { shellIcons } from './shellIcons';
+import { tankArmors } from './tankArmors';
+import { tankIcons } from './tankIcons';
+import { tankModels } from './tankModels';
+
+if (!targets && !allTargets) throw new Error('No target(s) specified');
+
+const methods = [
+  definitions,
+  tankIcons,
+  scratchedFlags,
+  circleFlags,
+  shellIcons,
+  moduleIcons,
+  equipmentIcons,
+  consumableProvisionIcons,
+  camouflageIcons,
+  boosterIcons,
+  tankArmors,
+  tankModels,
+  currencies,
+];
+
+for (const method of methods) {
+  if (allTargets || targets?.includes(method.name)) await method(production);
+}

scripts/buildAssets/moduleIcons.ts

@@ -0,0 +1,32 @@
+import { readdir } from 'fs/promises';
+import { readBase64DVPL } from '../../src/core/blitz/readBase64DVPL';
+import { commitAssets } from '../../src/core/blitzkrieg/commitAssets';
+import { FileChange } from '../../src/core/blitzkrieg/commitMultipleFiles';
+import { DATA, POI } from './constants';
+
+export async function moduleIcons(production: boolean) {
+  console.log('Building module icons...');
+
+  const changes = await Promise.all(
+    (await readdir(`${DATA}/${POI.moduleIcons}`))
+      .filter(
+        (file) =>
+          !file.endsWith('@2x.packed.webp.dvpl') && file.startsWith('vehicle'),
+      )
+      .map(async (file) => {
+        const nameRaw = file.match(/vehicle(.+)\.packed\.webp\.dvpl/)![1];
+        const name = nameRaw[0].toLowerCase() + nameRaw.slice(1);
+        const content = await readBase64DVPL(
+          `${DATA}/${POI.moduleIcons}/${file}`,
+        );
+
+        return {
+          content,
+          path: `icons/modules/${name}.webp`,
+          encoding: 'base64',
+        } satisfies FileChange;
+      }),
+  );
+
+  await commitAssets('module icons', changes, production);
+}

scripts/buildAssets/scratchedFlags.ts

@@ -0,0 +1,31 @@
+import { readdir } from 'fs/promises';
+import { readBase64DVPL } from '../../src/core/blitz/readBase64DVPL';
+import { commitAssets } from '../../src/core/blitzkrieg/commitAssets';
+import { FileChange } from '../../src/core/blitzkrieg/commitMultipleFiles';
+import { DATA, POI } from './constants';
+
+export async function scratchedFlags(production: boolean) {
+  console.log('Building scratched flags...');
+
+  const flags = await readdir(`${DATA}/${POI.flags}`);
+  const changes = await Promise.all(
+    flags
+      .filter(
+        (flag) =>
+          flag.startsWith('flag_tutor-tank_') &&
+          !flag.endsWith('@2x.packed.webp.dvpl'),
+      )
+      .map(async (flag) => {
+        const content = await readBase64DVPL(`${DATA}/${POI.flags}/${flag}`);
+        const name = flag.match(/flag_tutor-tank_(.+)\.packed\.webp/)![1];
+
+        return {
+          content,
+          encoding: 'base64',
+          path: `flags/scratched/${name}.webp`,
+        } satisfies FileChange;
+      }),
+  );
+
+  await commitAssets('scratched flags', changes, production);
+}

scripts/buildAssets/shellIcons.ts

@@ -0,0 +1,49 @@
+import { readdir } from 'fs/promises';
+import sharp from 'sharp';
+import { readDVPLFile } from '../../src/core/blitz/readDVPLFile';
+import { readStringDVPL } from '../../src/core/blitz/readStringDVPL';
+import { commitAssets } from '../../src/core/blitzkrieg/commitAssets';
+import { FileChange } from '../../src/core/blitzkrieg/commitMultipleFiles';
+import { DATA, POI } from './constants';
+
+export async function shellIcons(production: boolean) {
+  console.log('Building shell icons...');
+
+  const image = sharp(
+    await readDVPLFile(
+      `${DATA}/${POI.bigShellIcons}/texture0.packed.webp.dvpl`,
+    ),
+  );
+
+  const changes = await Promise.all(
+    (await readdir(`${DATA}/${POI.bigShellIcons}`))
+      .filter((file) => file.endsWith('_l.txt.dvpl'))
+      .map(async (file) => {
+        const name = file.match(/(.+)_l\.txt\.dvpl/)![1];
+        const sizes = (
+          await readStringDVPL(`${DATA}/${POI.bigShellIcons}/${file}`)
+        )
+          .split('\n')[4]
+          .split(' ')
+          .map(Number);
+
+        return {
+          content: (
+            await image
+              .clone()
+              .extract({
+                left: sizes[0],
+                top: sizes[1],
+                width: sizes[2],
+                height: sizes[3],
+              })
+              .toBuffer()
+          ).toString('base64'),
+          encoding: 'base64',
+          path: `icons/shells/${name}.webp`,
+        } satisfies FileChange;
+      }),
+  );
+
+  await commitAssets('shell icons', changes, production);
+}

scripts/buildAssets/tankArmors.ts

@@ -0,0 +1,49 @@
+import { NodeIO } from '@gltf-transform/core';
+import { readdir } from 'fs/promises';
+import { extractArmor } from '../../src/core/blitz/extractArmor';
+import { readXMLDVPL } from '../../src/core/blitz/readXMLDVPL';
+import { toUniqueId } from '../../src/core/blitz/toUniqueId';
+import { commitAssets } from '../../src/core/blitzkrieg/commitAssets';
+import { FileChange } from '../../src/core/blitzkrieg/commitMultipleFiles';
+import { DATA, POI } from './constants';
+import { VehicleDefinitionList } from './definitions';
+
+export async function tankArmors(production: boolean) {
+  console.log('Building tank armors...');
+
+  const changes: FileChange[] = [];
+  const nodeIO = new NodeIO();
+  const nations = await readdir(`${DATA}/${POI.vehicleDefinitions}`).then(
+    (nations) => nations.filter((nation) => nation !== 'common'),
+  );
+
+  await Promise.all(
+    nations.map(async (nation) => {
+      const tanks = await readXMLDVPL<{ root: VehicleDefinitionList }>(
+        `${DATA}/${POI.vehicleDefinitions}/${nation}/list.xml.dvpl`,
+      );
+
+      await Promise.all(
+        Object.entries(tanks.root).map(async ([tankKey, tank]) => {
+          if (tankKey.includes('tutorial_bot')) return;
+
+          const id = toUniqueId(nation, tank.id);
+
+          console.log(`Building armor ${id} @ ${nation}/${tankKey}`);
+
+          const model = await extractArmor(DATA, `${nation}-${tankKey}`);
+
+          changes.push({
+            path: `3d/tanks/armor/${id}.glb`,
+            encoding: 'base64',
+            content: Buffer.from(await nodeIO.writeBinary(model)).toString(
+              'base64',
+            ),
+          });
+        }),
+      );
+    }),
+  );
+
+  await commitAssets('tank armor', changes, production);
+}

scripts/buildAssets/tankIcons.ts

@@ -0,0 +1,80 @@
+import { readdir } from 'fs/promises';
+import { Vector3Tuple } from 'three';
+import { NATION_IDS } from '../../src/constants/nations';
+import { readBase64DVPL } from '../../src/core/blitz/readBase64DVPL';
+import { readXMLDVPL } from '../../src/core/blitz/readXMLDVPL';
+import { readYAMLDVPL } from '../../src/core/blitz/readYAMLDVPL';
+import { commitAssets } from '../../src/core/blitzkrieg/commitAssets';
+import { FileChange } from '../../src/core/blitzkrieg/commitMultipleFiles';
+import { DATA, POI } from './constants';
+import { VehicleDefinitionList } from './definitions';
+
+export interface TankParameters {
+  resourcesPath: {
+    smallIconPath: string;
+    bigIconPath: string;
+    blitzModelPath: string;
+  };
+  collision: {
+    [key: string]: {
+      points: Vector3Tuple;
+      bbox: {
+        min: Vector3Tuple;
+        max: Vector3Tuple;
+      };
+      averageThickness?: Record<string, number>;
+    };
+  };
+}
+
+export async function tankIcons(production: boolean) {
+  console.log('Building tank icons...');
+
+  const changes: FileChange[] = [];
+  const nations = await readdir(`${DATA}/${POI.vehicleDefinitions}`).then(
+    (nations) => nations.filter((nation) => nation !== 'common'),
+  );
+
+  await Promise.all(
+    nations.map(async (nation) => {
+      const tanks = await readXMLDVPL<{ root: VehicleDefinitionList }>(
+        `${DATA}/${POI.vehicleDefinitions}/${nation}/list.xml.dvpl`,
+      );
+
+      await Promise.all(
+        Object.entries(tanks.root).map(async ([tankKey, tank]) => {
+          if (tankKey.includes('tutorial_bot')) return;
+
+          const nationVehicleId = tank.id;
+          const id = (nationVehicleId << 8) + (NATION_IDS[nation] << 4) + 1;
+          const parameters = await readYAMLDVPL<TankParameters>(
+            `${DATA}/${POI.tankParameters}/${nation}/${tankKey}.yaml.dvpl`,
+          );
+          const small = `${DATA}/${parameters.resourcesPath.smallIconPath
+            .replace(/~res:\//, '')
+            .replace(/\..+/, '')}.packed.webp.dvpl`;
+          const big = `${DATA}/${parameters.resourcesPath.bigIconPath
+            .replace(/~res:\//, '')
+            .replace(/\..+/, '')}.packed.webp.dvpl`;
+
+          if (big) {
+            changes.push({
+              content: await readBase64DVPL(big),
+              encoding: 'base64',
+              path: `icons/tanks/big/${id}.webp`,
+            });
+          }
+          if (small) {
+            changes.push({
+              content: await readBase64DVPL(small),
+              encoding: 'base64',
+              path: `icons/tanks/small/${id}.webp`,
+            });
+          }
+        }),
+      );
+    }),
+  );
+
+  await commitAssets('tank icons', changes, production);
+}

scripts/buildAssets/tankModels.ts

@@ -0,0 +1,58 @@
+import { NodeIO } from '@gltf-transform/core';
+import { readdir } from 'fs/promises';
+import { extractModel } from '../../src/core/blitz/extractModel';
+import { readXMLDVPL } from '../../src/core/blitz/readXMLDVPL';
+import { readYAMLDVPL } from '../../src/core/blitz/readYAMLDVPL';
+import { toUniqueId } from '../../src/core/blitz/toUniqueId';
+import { commitAssets } from '../../src/core/blitzkrieg/commitAssets';
+import { FileChange } from '../../src/core/blitzkrieg/commitMultipleFiles';
+import { DATA, POI } from './constants';
+import { VehicleDefinitionList } from './definitions';
+import { TankParameters } from './tankIcons';
+
+export async function tankModels(production: boolean) {
+  console.log('Building tank models...');
+
+  const nodeIO = new NodeIO();
+  const nations = await readdir(`${DATA}/${POI.vehicleDefinitions}`).then(
+    (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}/${POI.vehicleDefinitions}/${nation}/list.xml.dvpl`,
+    );
+
+    console.log(`Building models for ${nation}`);
+
+    await Promise.all(
+      Object.entries(tanks.root).map(async ([tankKey, tank]) => {
+        if (tankKey.includes('tutorial_bot')) return;
+
+        const id = toUniqueId(nation, tank.id);
+
+        console.log(`Building model ${id} @ ${nation}/${tankKey}`);
+
+        const parameters = await readYAMLDVPL<TankParameters>(
+          `${DATA}/${POI.tankParameters}/${nation}/${tankKey}.yaml.dvpl`,
+        );
+        const model = await extractModel(
+          DATA,
+          parameters.resourcesPath.blitzModelPath.replace(/\.sc2$/, ''),
+        );
+
+        changes.push({
+          path: `3d/tanks/models/${id}.glb`,
+          content: Buffer.from(await nodeIO.writeBinary(model)).toString(
+            'base64',
+          ),
+          encoding: 'base64',
+        });
+      }),
+    );
+
+    await commitAssets(`tank models ${nation}`, changes, production);
+  }
+}

scripts/buildRatingLeaderboard.ts

@@ -0,0 +1,199 @@
+import { chunk } from 'lodash';
+import { argv } from 'process';
+import {
+  RatingInfo,
+  RatingNeighbors,
+  RatingPlayer,
+} from '../src/commands/ratingLeaderboard';
+import { RegionSubdomain } from '../src/constants/regions';
+import { getAccountInfo } from '../src/core/blitz/getAccountInfo';
+import regionSubdomainToRegion from '../src/core/blitz/regionSubdomainToRegion';
+import { commitAssets } from '../src/core/blitzkrieg/commitAssets';
+import { FileChange } from '../src/core/blitzkrieg/commitMultipleFiles.js';
+import { patientFetchJSON } from '../src/core/blitzkrieg/patientFetchJSON';
+import { superCompress } from '../src/core/blitzkrieg/superCompress';
+import {
+  BkrlBaseEntry,
+  BkrlFormat,
+  BkrlSuperset1Entry,
+  BkrlWriteStream,
+} from '../src/core/streams/bkrl';
+import { CdonValue, CdonWriteStream } from '../src/core/streams/cdon';
+
+/*
+ * Central North American Time (UTC-5): use 0 5 * * *.
+ * Central European Time (UTC+1): use 0 23 * * *.
+ * Central Asia Standard Time (UTC+7): use 0 17 * * *.
+ */
+
+const production = argv.includes('--production');
+const target = argv
+  .find((arg) => arg.startsWith('--target='))
+  ?.split('=')[1] as 'midnight' | 'latest' | undefined;
+const regionSubdomains = argv
+  .find((arg) => arg.startsWith('--region='))
+  ?.split('=')[1];
+
+if (!target) throw new Error('Target parameter not specified');
+if (!regionSubdomains) throw new Error('Region parameter not specified');
+
+regionSubdomains.split(',').forEach(async (regionSubdomain) => {
+  const region = regionSubdomainToRegion(regionSubdomain as RegionSubdomain);
+
+  console.log(`Building ${target} rating leaderboard for ${region}`);
+
+  const NEIGHBORS = 2 ** 8;
+  const PLAYERS = await patientFetchJSON<RatingInfo>(
+    `https://${regionSubdomain}.wotblitz.com/en/api/rating-leaderboards/season/`,
+  ).then((data) => (data.detail === undefined ? data.count : undefined));
+
+  if (PLAYERS === undefined) {
+    throw new Error('No current rating season running');
+  }
+
+  const players: Record<number, RatingPlayer> = {};
+  const leaderboard: BkrlBaseEntry[] = [];
+  let registered = 0;
+
+  async function branchFromPlayer(id: number) {
+    const { neighbors } = await patientFetchJSON<RatingNeighbors>(
+      `https://${regionSubdomain}.wotblitz.com/en/api/rating-leaderboards/user/${id}/?neighbors=${NEIGHBORS}`,
+    );
+
+    const firstPlayer = neighbors[0];
+    const lastPlayer = neighbors[neighbors.length - 1];
+
+    const branches: Promise<void>[] = [];
+    if (!players[firstPlayer.number])
+      branches.push(branchFromPlayer(firstPlayer.spa_id));
+    if (!players[lastPlayer.number])
+      branches.push(branchFromPlayer(lastPlayer.spa_id));
+
+    neighbors.forEach((neighbor) => {
+      if (players[neighbor.number]) return;
+
+      players[neighbor.number] = neighbor;
+      registered++;
+    });
+
+    console.log(
+      `Registered ${registered} / ${PLAYERS} (${(
+        (registered / PLAYERS!) *
+        100
+      ).toFixed(2)}%)`,
+    );
+
+    await Promise.all(branches);
+  }
+
+  async function branchFromLeague(id: number) {
+    const { result } = await patientFetchJSON<{ result: RatingPlayer[] }>(
+      `https://${regionSubdomain}.wotblitz.com/en/api/rating-leaderboards/league/${id}/top/`,
+    );
+
+    const firstPlayer = result[0];
+    const lastPlayer = result.at(-1)!;
+
+    await Promise.all([
+      branchFromPlayer(firstPlayer.spa_id),
+      branchFromPlayer(lastPlayer.spa_id),
+    ]);
+  }
+
+  console.log('Branching from leagues...');
+  await Promise.all([
+    branchFromLeague(0),
+    branchFromLeague(1),
+    branchFromLeague(2),
+    branchFromLeague(3),
+    branchFromLeague(4),
+  ]);
+
+  console.log('Converting to an array...');
+  for (let index = 0; index < PLAYERS; index++) {
+    const listing = players[index + 1];
+    if (listing) {
+      leaderboard[index] = { id: listing.spa_id, score: listing.score };
+    } else {
+      console.warn(`Position ${index + 1} had no player`);
+      leaderboard[index] = { id: 0, score: 0 };
+    }
+  }
+
+  console.log('Requesting further stats...');
+  const comprehensiveLeaderboard: BkrlSuperset1Entry[] = [];
+  let chunkIndex = 0;
+  for (const leaderboardChunk of chunk(leaderboard, 100)) {
+    console.log(
+      `Chunk ${chunkIndex + 1} of ${Math.ceil(leaderboard.length / 100)}`,
+    );
+
+    const stats = await getAccountInfo(
+      region,
+      leaderboardChunk.map(({ id }) => id),
+      ['statistics.rating'],
+    );
+
+    stats.forEach((stat, index) => {
+      const trueIndex = chunkIndex * 100 + index;
+      comprehensiveLeaderboard[trueIndex] =
+        leaderboardChunk[index].id === 0 ||
+        stat?.statistics.rating === undefined
+          ? {
+              battles: 0,
+              damage: 0,
+              id: 0,
+              kills: 0,
+              score: 0,
+              survived: 0,
+              wins: 0,
+            }
+          : {
+              id: leaderboardChunk[index].id,
+              score: leaderboardChunk[index].score,
+              battles: stat.statistics.rating.battles,
+              damage: stat.statistics.rating.damage_dealt,
+              kills: stat.statistics.rating.frags,
+              survived: stat.statistics.rating.survived_battles,
+              wins: stat.statistics.rating.wins,
+            };
+    });
+
+    chunkIndex++;
+  }
+
+  const info = await patientFetchJSON<RatingInfo & { detail: undefined }>(
+    `https://${regionSubdomain}.wotblitz.com/en/api/rating-leaderboards/season/`,
+  );
+  const normalizedServer = regionSubdomain === 'na' ? 'com' : regionSubdomain;
+  const infoContent = new CdonWriteStream().cdon(
+    info as unknown as CdonValue,
+  ).uint8Array;
+  const leaderboardWriteStream = new BkrlWriteStream();
+
+  leaderboardWriteStream.bkrl({
+    format: BkrlFormat.Superset1,
+    entries: comprehensiveLeaderboard,
+  });
+
+  const changes: FileChange[] = [
+    {
+      path: `regions/${normalizedServer}/rating/${info.current_season}/info.cdon.lz4`,
+      content: superCompress(infoContent),
+      encoding: 'base64',
+    },
+    {
+      path: `regions/${normalizedServer}/rating/${info.current_season}/${target}.bkrl`,
+      content: Buffer.from(leaderboardWriteStream.uint8Array).toString(
+        'base64',
+      ),
+      encoding: 'base64',
+    },
+  ];
+
+  commitAssets(
+    `rating leaderboard ${regionSubdomain} ${target}`,
+    changes,
+    production,
+  );
+});

scripts/buildRatingsLeaderboard.ts

@@ -1,142 +0,0 @@
-import { Octokit } from '@octokit/rest';
-import { rm, writeFile } from 'fs/promises';
-import { argv, env } from 'process';
-import {
-  RatingsInfo,
-  RatingsNeighbors,
-  RatingsPlayer,
-} from '../src/commands/ratings';
-import { patientFetchJSON } from '../src/core/blitzkrieg/patientFetchJSON';
-import commitMultipleFiles from './commitMultipleFiles.js';
-
-/*
- * Central North American Time (UTC-5): use 0 5 * * *.
- * Central European Time (UTC+1): use 0 23 * * *.
- * Central Asia Standard Time (UTC+7): use 0 17 * * *.
- *
- * [region]/ratings/[season]/info.json: season info like rewards, start & end time, etc.
- * [region]/ratings/[season]/latest.json: the absolute latest leaderboard recorded at UTC+0 midnight
- * [region]/ratings/[season]/midnight.json: last midnight's leaderboard relative to the region
- */
-
-export type BlitzkriegRatingsLeaderboardEntry = { id: number; score: number };
-export type BlitzkriegRatingsLeaderboard = BlitzkriegRatingsLeaderboardEntry[];
-
-const publish = argv.includes('--publish');
-const target = argv
-  .find((arg) => arg.startsWith('--target='))
-  ?.split('=')[1] as 'midnight' | 'latest' | undefined;
-const server = argv.find((arg) => arg.startsWith('--region='))?.split('=')[1];
-
-if (!target) throw new Error('Target parameter not specified');
-if (!server) throw new Error('Region parameter not specified');
-
-const NEIGHBORS = 2 ** 8;
-const PLAYERS = await patientFetchJSON<RatingsInfo>(
-  `https://${server}.wotblitz.com/en/api/rating-leaderboards/season/`,
-).then((data) => (data.detail === undefined ? data.count : undefined));
-
-if (PLAYERS === undefined) {
-  throw new Error('No current ratings season running');
-}
-
-const players: Record<number, RatingsPlayer> = {};
-const leaderboard: BlitzkriegRatingsLeaderboard = [];
-let registered = 0;
-
-async function branchFromPlayer(id: number) {
-  const { neighbors } = await patientFetchJSON<RatingsNeighbors>(
-    `https://${server}.wotblitz.com/en/api/rating-leaderboards/user/${id}/?neighbors=${NEIGHBORS}`,
-  );
-
-  const firstPlayer = neighbors[0];
-  const lastPlayer = neighbors[neighbors.length - 1];
-
-  const branches: Promise<void>[] = [];
-  if (!players[firstPlayer.number])
-    branches.push(branchFromPlayer(firstPlayer.spa_id));
-  if (!players[lastPlayer.number])
-    branches.push(branchFromPlayer(lastPlayer.spa_id));
-
-  neighbors.forEach((neighbor) => {
-    if (players[neighbor.number]) return;
-
-    players[neighbor.number] = neighbor;
-    registered++;
-  });
-
-  console.log(
-    `Registered ${registered} / ${PLAYERS} (${(
-      (registered / PLAYERS!) *
-      100
-    ).toFixed(2)}%)`,
-  );
-
-  await Promise.all(branches);
-}
-
-async function branchFromLeague(id: number) {
-  const { result } = await patientFetchJSON<{ result: RatingsPlayer[] }>(
-    `https://${server}.wotblitz.com/en/api/rating-leaderboards/league/${id}/top/`,
-  );
-
-  const firstPlayer = result[0];
-  const lastPlayer = result[result.length - 1];
-
-  await Promise.all([
-    branchFromPlayer(firstPlayer.spa_id),
-    branchFromPlayer(lastPlayer.spa_id),
-  ]);
-}
-
-console.log('Branching from leagues...');
-await Promise.all([
-  branchFromLeague(0),
-  branchFromLeague(1),
-  branchFromLeague(2),
-  branchFromLeague(3),
-  branchFromLeague(4),
-]);
-
-console.log('Converting to an array...');
-for (let index = 0; index < PLAYERS; index++) {
-  const listing = players[index + 1];
-  if (!listing) console.warn(`Position ${index + 1} had no player`);
-
-  leaderboard[index] = {
-    id: listing.spa_id,
-    score: listing.score,
-  };
-}
-
-const leaderboardJSON = JSON.stringify(leaderboard);
-
-if (publish) {
-  const octokit = new Octokit({ auth: env.GH_TOKEN });
-
-  const info = await patientFetchJSON<RatingsInfo & { detail: undefined }>(
-    `https://${server}.wotblitz.com/en/api/rating-leaderboards/season/`,
-  );
-  const normalizedServer = server === 'na' ? 'com' : server;
-
-  const infoPath = `${normalizedServer}/ratings/${info.current_season}/info.json`;
-  const leaderboardPath = `${normalizedServer}/ratings/${info.current_season}/${target}.json`;
-  const infoJSON = JSON.stringify(info);
-
-  console.log(`Publishing to season ${info.current_season}...`);
-  commitMultipleFiles(
-    octokit,
-    'tresabhi',
-    'blitzkrieg-db',
-    'main',
-    new Date().toString(),
-    [
-      { path: infoPath, content: infoJSON },
-      { path: leaderboardPath, content: leaderboardJSON },
-    ],
-  );
-} else {
-  console.log('Writing to disk...');
-  await rm('dist.json', { force: true });
-  await writeFile('dist.json', leaderboardJSON);
-}

scripts/buildTankopedia.ts

@@ -1,86 +0,0 @@
-import decompress from 'decompress';
-import { readFile, readdir, rm, writeFile } from 'fs/promises';
-import { load } from 'js-yaml';
-import { ElementCompact, xml2js } from 'xml-js';
-import { NATION_IDS } from '../src/constants/nations';
-
-const REWRITE = false;
-const VEHICLE_DEFS = 'assets/Data/XML/item_defs/vehicles';
-const APK_FILE = 'temp/blitz.apk';
-const STRINGS = 'assets/Data/Strings';
-const LANGUAGE = 'en';
-const DIRECTORIES_OF_INTEREST = [VEHICLE_DEFS, STRINGS];
-
-if (REWRITE) {
-  await rm('temp/blitz', { recursive: true, force: true });
-  decompress(APK_FILE, 'temp/blitz', {
-    filter: (file) =>
-      DIRECTORIES_OF_INTEREST.some((dir) => file.path.startsWith(dir)),
-  });
-}
-
-interface BlitzkriegTankopedia {
-  id: number;
-  nation: string;
-  name: string;
-  name_short?: string;
-  is_premium: boolean;
-  is_collector: boolean;
-  tier: number;
-  type: string;
-}
-
-const strings = await readFile(
-  `temp/blitz/${STRINGS}/${LANGUAGE}.yaml`,
-  'utf-8',
-).then((data) => load(data) as Record<string, string>);
-const tankopedia: Record<number, BlitzkriegTankopedia> = {};
-const nations = await readdir(`temp/blitz/${VEHICLE_DEFS}`);
-
-await Promise.all(
-  nations
-    .filter((nation) => nation !== 'common')
-    .map(async (nation) => {
-      const listXML = await readFile(
-        `temp/blitz/${VEHICLE_DEFS}/${nation}/list.xml`,
-        'utf-8',
-      );
-      const list = xml2js(listXML, { compact: true }) as ElementCompact;
-
-      await Promise.all(
-        Object.entries<ElementCompact>(list.root).map(
-          async ([vehicle, vehicleData]) => {
-            // const vehicleXML = await readFile(
-            //   `temp/blitz/${VEHICLE_DEFS}/${nation}/${vehicle}.xml`,
-            //   'utf-8',
-            // ).then((xml) => xml2js(xml, { compact: true }) as ElementCompact);
-            const nationVehicleId = parseInt(list.root[vehicle].id._text);
-            const id = (nationVehicleId << 8) + (NATION_IDS[nation] << 4) + 1;
-            // TODO: use userString property instead
-            const name = strings[`#${nation}_vehicles:${vehicle}`];
-            const name_short = strings[`#${nation}_vehicles:${vehicle}_short`];
-            const is_premium = 'gold' in vehicleData.price;
-            const is_collector = vehicleData.sellPrice
-              ? 'gold' in vehicleData.sellPrice
-              : false;
-            const tier = parseInt(vehicleData.level._text);
-            const tags = vehicleData.tags._text.split(' ');
-            const type = tags[0];
-
-            tankopedia[id] = {
-              id,
-              name,
-              name_short,
-              nation,
-              is_premium,
-              is_collector,
-              tier,
-              type,
-            };
-          },
-        ),
-      );
-    }),
-);
-
-writeFile('dist/tankopedia.json', JSON.stringify(tankopedia, null, 2));

scripts/commitMultipleFiles.ts

@@ -1,70 +0,0 @@
-import { Octokit } from '@octokit/rest';
-
-export default async function commitMultipleFiles(
-  octokit: Octokit,
-  owner: string,
-  repo: string,
-  branch: string,
-  message: string,
-  changes: { path: string; content: string }[],
-) {
-  // Get the latest commit SHA on the specified branch
-  const { data: refData } = await octokit.git.getRef({
-    owner,
-    repo,
-    ref: `heads/${branch}`,
-  });
-  const latestCommitSha = refData.object.sha;
-
-  // Get the tree SHA for the latest commit
-  const { data: commitData } = await octokit.git.getCommit({
-    owner,
-    repo,
-    commit_sha: latestCommitSha,
-  });
-  const treeSha = commitData.tree.sha;
-
-  // Create blobs for each file
-  const blobs = await Promise.all(
-    changes.map(async (change) => {
-      const { data: blobData } = await octokit.git.createBlob({
-        owner,
-        repo,
-        content: change.content,
-        encoding: 'utf-8',
-      });
-
-      return {
-        sha: blobData.sha,
-        path: change.path,
-        mode: '100644',
-        type: 'blob',
-      } as const;
-    }),
-  );
-
-  // Create a new tree with the new blobs
-  const { data: treeData } = await octokit.git.createTree({
-    owner,
-    repo,
-    base_tree: treeSha,
-    tree: blobs,
-  });
-
-  // Create a new commit with the new tree
-  const { data: newCommitData } = await octokit.git.createCommit({
-    owner,
-    repo,
-    message,
-    tree: treeData.sha,
-    parents: [latestCommitSha],
-  });
-
-  // Update the branch reference to point to the new commit
-  await octokit.git.updateRef({
-    owner,
-    repo,
-    ref: `heads/${branch}`,
-    sha: newCommitData.sha,
-  });
-}

scripts/setupDepotDownloader.ts

@@ -0,0 +1,33 @@
+import decompress from 'decompress';
+import { existsSync } from 'fs';
+import { mkdir, readdir, writeFile } from 'fs/promises';
+
+if (!existsSync('temp')) {
+  console.log('Creating temp directory...');
+  await mkdir('temp');
+}
+
+console.log('Downloading depot downloader...');
+await fetch(
+  'https://api.github.com/repos/SteamRE/DepotDownloader/releases/latest',
+)
+  .then(
+    (response) =>
+      response.json() as Promise<{
+        assets: { browser_download_url: string; name: string }[];
+      }>,
+  )
+  .then(({ assets }) => {
+    const asset = assets.find(({ name }) => name.includes('windows-x64'));
+    if (!asset) throw new Error('No asset found');
+    return fetch(asset.browser_download_url);
+  })
+  .then((response) => response.arrayBuffer())
+  .then((arrayBuffer) =>
+    writeFile('temp/depotDownloader.zip', Buffer.from(arrayBuffer)),
+  );
+
+console.log('Unzipping...');
+await decompress('temp/depotDownloader.zip', 'temp/depotDownloader');
+
+console.log('Download complete; files:', await readdir('temp/depotDownloader'));

scripts/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "resolveJsonModule": true,
+    "jsx": "preserve",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "incremental": true,
+    "isolatedModules": true
+  }
+}

src/app/api/[region]/rating/current/info/route.ts

@@ -1,10 +1,10 @@
 import { NextResponse } from 'next/server';
 import { Region } from '../../../../../../constants/regions';
-import getRatingsInfo from '../../../../../../core/blitz/getRatingsInfo';
+import getRatingInfo from '../../../../../../core/blitz/getRatingInfo';
 
 export async function GET(
   request: Request,
   { params }: { params: { region: Region } },
 ) {
-  return NextResponse.json(await getRatingsInfo(params.region));
+  return NextResponse.json(await getRatingInfo(params.region));
 }

src/app/api/[region]/rating/current/league/[league]/route.ts

@@ -1,12 +1,12 @@
 import { NextResponse } from 'next/server';
 import { Region } from '../../../../../../../constants/regions';
-import { getRatingsLeague } from '../../../../../../../core/blitz/getRatingsLeague';
+import { getRatingLeague } from '../../../../../../../core/blitz/getRatingLeague';
 
 export async function GET(
   request: Request,
   { params }: { params: { region: Region; league: number } },
 ) {
   return NextResponse.json(
-    await getRatingsLeague(params.region, params.league, true),
+    await getRatingLeague(params.region, params.league, true),
   );
 }

src/app/api/[region]/rating/current/search/[username]/route.ts

@@ -1,12 +1,12 @@
 import { NextResponse } from 'next/server';
 import { Region } from '../../../../../../../constants/regions';
-import { searchCurrentRatingsPlayers } from '../../../../../../../core/blitz/searchCurrentRatingsPlayers';
+import { searchCurrentRatingPlayers } from '../../../../../../../core/blitz/searchCurrentRatingPlayers';
 
 export async function GET(
   request: Request,
   { params }: { params: { region: Region; username: string } },
 ) {
   return NextResponse.json(
-    await searchCurrentRatingsPlayers(params.region, params.username),
+    await searchCurrentRatingPlayers(params.region, params.username),
   );
 }

src/app/api/tankopedia/route.ts

@@ -1,6 +0,0 @@
-import { NextResponse } from 'next/server';
-import { tankopedia } from '../../../core/blitzstars/tankopedia';
-
-export async function GET() {
-  return NextResponse.json(await tankopedia);
-}

src/app/embeds/session/page.tsx

@@ -3,25 +3,29 @@
 import { ContextMenu } from '@radix-ui/themes';
 import { useEffect, useState } from 'react';
 import * as Breakdown from '../../../components/Breakdown';
-import { TreeTypeEnum } from '../../../components/Tanks';
 import { WARGAMING_APPLICATION_ID } from '../../../constants/wargamingApplicationID';
 import fetchBlitz from '../../../core/blitz/fetchBlitz';
-import { tankAverages } from '../../../core/blitzstars/tankAverages';
+import { resetSession } from '../../../core/blitzkrieg/resetSession';
 import {
-  TankopediaEntry,
-  tankopedia,
-} from '../../../core/blitzstars/tankopedia';
+  TankDefinition,
+  tankDefinitions,
+} from '../../../core/blitzkrieg/tankDefinitions';
+import { tankAverages } from '../../../core/blitzstars/tankAverages';
 import calculateWN8 from '../../../core/statistics/calculateWN8';
 import { deltaTankStats } from '../../../core/statistics/deltaTankStats';
 import getWN8Percentile from '../../../core/statistics/getWN8Percentile';
-import { resetSession, useSession } from '../../../stores/session';
+import mutateSession, { useSession } from '../../../stores/session';
 import { IndividualTankStats, TanksStats } from '../../../types/tanksStats';
 import { CustomColumnDisplay } from '../../tools/session/components/CustomColumn';
 import { Menu } from '../../tools/session/components/Menu';
 
 const REFRESH_RATE = 1 / 5;
 
-export default function SessionPage() {
+interface SessionPageProps {
+  naked?: boolean;
+}
+
+export default function SessionPage({ naked = true }: SessionPageProps) {
   const session = useSession();
   const since = session.isTracking ? new Date(session.time) : undefined;
   const [diff, setDiff] = useState<
@@ -30,7 +34,7 @@ export default function SessionPage() {
 
         list: {
           stats: IndividualTankStats;
-          tankopedia?: TankopediaEntry;
+          tankDefinitions?: TankDefinition;
           career: IndividualTankStats;
           currentWN8?: number;
           careerWN8?: number;
@@ -72,6 +76,14 @@ export default function SessionPage() {
       0,
     ) / careerBattles;
 
+  useEffect(() => {
+    if (session.title === 'Untitled session') {
+      mutateSession((draft) => {
+        if (draft.isTracking) draft.title = draft.nickname;
+      });
+    }
+  }, [session.title]);
+
   useEffect(() => {
     async function recalculateDiff() {
       if (session.isTracking) {
@@ -88,7 +100,7 @@ export default function SessionPage() {
           }),
           {},
         );
-        const awaitedTankopedia = await tankopedia;
+        const awaitedTankDefinitions = await tankDefinitions;
         const awaitedTankAverages = await tankAverages;
         const careerWN8 =
           careerRaw[id].reduce(
@@ -114,12 +126,12 @@ export default function SessionPage() {
 
           list: (
             Object.values(
-              deltaTankStats(session.tankStats, career),
+              deltaTankStats(session.tankStats, career, session.time / 1000),
             ) as IndividualTankStats[]
           ).map((stats) => {
             return {
               stats,
-              tankopedia: awaitedTankopedia[stats.tank_id],
+              tankDefinitions: awaitedTankDefinitions[stats.tank_id],
               career: career[stats.tank_id],
               currentWN8: awaitedTankAverages[stats.tank_id]
                 ? calculateWN8(
@@ -207,15 +219,10 @@ export default function SessionPage() {
               since !== undefined &&
               diff !== undefined && (
                 <Breakdown.Row
+                  naked={naked}
+                  color={session.color}
                   minimized={!session.showCareer}
-                  title={`Since ${since.toLocaleString(undefined, {
-                    hour: 'numeric',
-                    minute: 'numeric',
-                    hour12: true,
-                    month: 'short',
-                    year: 'numeric',
-                    day: 'numeric',
-                  })}`}
+                  title={session.title}
                   stats={session.customColumns.map((customColumn) => {
                     const rowStat = totalRowStats[customColumn.display];
 
@@ -237,89 +244,91 @@ export default function SessionPage() {
               .sort(
                 (a, b) => b.stats.last_battle_time - a.stats.last_battle_time,
               )
-              .map(({ stats, tankopedia, career, careerWN8, currentWN8 }) => {
-                const rowStats: Record<
-                  CustomColumnDisplay,
-                  Breakdown.RowStatItem | undefined
-                > = {
-                  battles: {
-                    title: 'Battles',
-                    current: stats.all.battles.toLocaleString(),
-                    career: career.all.battles.toLocaleString(),
-                  },
-                  winrate: {
-                    title: 'Winrate',
-                    current: `${(
-                      100 *
-                      (stats.all.wins / stats.all.battles)
-                    ).toFixed(2)}%`,
-                    career: `${(
-                      100 *
-                      (career.all.wins / career.all.battles)
-                    ).toFixed(2)}%`,
-                    delta:
-                      stats.all.wins / stats.all.battles -
-                      career.all.wins / career.all.battles,
-                  },
-                  wn8: {
-                    title: 'WN8',
-                    current:
-                      currentWN8 === undefined
-                        ? undefined
-                        : Math.round(currentWN8).toLocaleString(),
-                    career:
-                      careerWN8 === undefined
-                        ? undefined
-                        : Math.round(careerWN8).toLocaleString(),
-                    percentile:
-                      currentWN8 === undefined
-                        ? undefined
-                        : getWN8Percentile(currentWN8),
-                  },
-                  damage: {
-                    title: 'Damage',
-                    current: Math.round(
-                      stats.all.damage_dealt / stats.all.battles,
-                    ).toLocaleString(),
-                    career: Math.round(
-                      career.all.damage_dealt / career.all.battles,
-                    ).toLocaleString(),
-                    delta:
-                      stats.all.damage_dealt / stats.all.battles -
-                      career.all.damage_dealt / career.all.battles,
-                  },
-                  none: undefined,
-                };
+              .map(
+                ({ stats, tankDefinitions, career, careerWN8, currentWN8 }) => {
+                  const rowStats: Record<
+                    CustomColumnDisplay,
+                    Breakdown.RowStatItem | undefined
+                  > = {
+                    battles: {
+                      title: 'Battles',
+                      current: stats.all.battles.toLocaleString(),
+                      career: career.all.battles.toLocaleString(),
+                    },
+                    winrate: {
+                      title: 'Winrate',
+                      current: `${(
+                        100 *
+                        (stats.all.wins / stats.all.battles)
+                      ).toFixed(2)}%`,
+                      career: `${(
+                        100 *
+                        (career.all.wins / career.all.battles)
+                      ).toFixed(2)}%`,
+                      delta:
+                        stats.all.wins / stats.all.battles -
+                        career.all.wins / career.all.battles,
+                    },
+                    wn8: {
+                      title: 'WN8',
+                      current:
+                        currentWN8 === undefined
+                          ? undefined
+                          : Math.round(currentWN8).toLocaleString(),
+                      career:
+                        careerWN8 === undefined
+                          ? undefined
+                          : Math.round(careerWN8).toLocaleString(),
+                      percentile:
+                        currentWN8 === undefined
+                          ? undefined
+                          : getWN8Percentile(currentWN8),
+                    },
+                    damage: {
+                      title: 'Damage',
+                      current: Math.round(
+                        stats.all.damage_dealt / stats.all.battles,
+                      ).toLocaleString(),
+                      career: Math.round(
+                        career.all.damage_dealt / career.all.battles,
+                      ).toLocaleString(),
+                      delta:
+                        stats.all.damage_dealt / stats.all.battles -
+                        career.all.damage_dealt / career.all.battles,
+                    },
+                    none: undefined,
+                  };
 
-                return (
-                  <Breakdown.Row
-                    key={stats.tank_id}
-                    minimized={!session.showCareer}
-                    title={tankopedia?.name ?? `Unknown tank ${stats.tank_id}`}
-                    type="tank"
-                    tankType={tankopedia?.type}
-                    treeType={(() => {
-                      if (tankopedia?.is_collectible)
-                        return TreeTypeEnum.Collector;
-                      if (tankopedia?.is_premium) return TreeTypeEnum.Premium;
-                    })()}
-                    stats={session.customColumns.map((customColumn) => {
-                      const rowStat = rowStats[customColumn.display];
+                  return (
+                    <Breakdown.Row
+                      naked={naked}
+                      color={session.color}
+                      key={stats.tank_id}
+                      minimized={!session.showCareer}
+                      title={
+                        tankDefinitions?.name ?? `Unknown tank ${stats.tank_id}`
+                      }
+                      type="tank"
+                      tankType={tankDefinitions?.class}
+                      treeType={tankDefinitions?.treeType}
+                      stats={session.customColumns.map((customColumn) => {
+                        const rowStat = rowStats[customColumn.display];
 
-                      if (!rowStat) return undefined;
+                        if (!rowStat) return undefined;
 
-                      return {
-                        ...rowStat,
-                        delta:
-                          customColumn.showDelta &&
-                          rowStat.percentile === undefined
-                            ? rowStat.delta
-                            : undefined,
-                      };
-                    })}
-                  />
-                );
-              })}
+                        return {
+                          ...rowStat,
+                          delta:
+                            customColumn.showDelta &&
+                            rowStat.percentile === undefined
+                              ? rowStat.delta
+                              : undefined,
+                        };
+                      })}
+                    />
+                  );
+                },
+              )}
           </Breakdown.Root>
         </div>
       </ContextMenu.Trigger>

src/app/layout.tsx

@@ -1,15 +1,25 @@
 'use client';
 
-import { Flex, Theme } from '@radix-ui/themes';
+import { CaretRightIcon } from '@radix-ui/react-icons';
+import { AlertDialog, Button, Flex, Text, Theme } from '@radix-ui/themes';
 import '@radix-ui/themes/styles.css';
 import { config } from 'dotenv';
 import { Roboto_Flex } from 'next/font/google';
 import { usePathname } from 'next/navigation';
-import { ReactNode } from 'react';
+import { ReactNode, useEffect, useState } from 'react';
+import { SkyLine } from '../assets/art/SkyLine';
+import { Analytics } from '../components/Analytics';
 import Navbar from '../components/Navbar';
+import PageWrapper from '../components/PageWrapper';
+import isDev from '../core/blitzkrieg/isDev';
+import { isLocalhost } from '../core/blitzkrieg/isLocalhost';
+import { useApp } from '../stores/app';
+import { mintTheme } from '../themes/mint';
 
 config();
 
+const DEV_BUILD_AGREEMENT_COOLDOWN = 8 * 24 * 60 * 60 * 1000;
+
 interface RootLayoutProps {
   children: ReactNode;
 }
@@ -22,6 +32,16 @@ const robotoFlex = Roboto_Flex({
 export default function RootLayout({ children }: RootLayoutProps) {
   const pathname = usePathname();
   const isEmbed = pathname.split('/')[1] === 'embeds';
+  const [showDevBuildAlert, setShowDevBuildAlert] = useState(false);
+
+  useEffect(() => {
+    setShowDevBuildAlert(
+      isDev() &&
+        !isLocalhost() &&
+        Date.now() - useApp.getState().devBuildAgreementTime >=
+          DEV_BUILD_AGREEMENT_COOLDOWN,
+    );
+  }, []);
 
   return (
     <html lang="en" className={robotoFlex.className}>
@@ -31,20 +51,110 @@ export default function RootLayout({ children }: RootLayoutProps) {
           name="description"
           content="🎉 Tools for everything World of Tanks Blitz"
         />
+        <Analytics />
       </head>
 
       <body
         style={{
           margin: 0,
-          background: isEmbed
-            ? 'transparent'
-            : 'url(https://i.imgur.com/PhS06NJ.png)',
+          paddingTop: isEmbed ? 0 : '3.25rem',
+          backgroundColor: isEmbed ? 'transparent' : undefined,
         }}
       >
-        <Theme appearance="dark" panelBackground="translucent" radius="full">
+        <Theme
+          appearance="dark"
+          panelBackground="translucent"
+          radius="full"
+          suppressHydrationWarning
+          suppressContentEditableWarning
+        >
           {!isEmbed && <Navbar />}
+          <AlertDialog.Root open={showDevBuildAlert}>
+            <AlertDialog.Content>
+              <AlertDialog.Title>Experimental version!</AlertDialog.Title>
+              <AlertDialog.Description>
+                This version may have a lot of issues. Report issues to{' '}
+                <a href="https://discord.gg/nDt7AjGJQH" target="_blank">
+                  the official Discord server
+                </a>
+                . Also consider using{' '}
+                <a href="https://blitz-krieg.vercel.app/">
+                  the more stable release version
+                </a>
+                . You will be asked again in 8 days.
+              </AlertDialog.Description>
+
+              <Flex justify="end">
+                <Button
+                  variant="solid"
+                  onClick={() => {
+                    setShowDevBuildAlert(false);
+                    useApp.setState({ devBuildAgreementTime: Date.now() });
+                  }}
+                >
+                  Continue
+                </Button>
+              </Flex>
+            </AlertDialog.Content>
+          </AlertDialog.Root>
 
           <Flex direction="column">{children}</Flex>
+
+          {!isEmbed && (
+            <PageWrapper>
+              <a
+                target="_blank"
+                href="https://ko-fi.com/tresabhi"
+                style={{ textDecoration: 'none' }}
+              >
+                <Flex
+                  align="center"
+                  style={{
+                    padding: 16,
+                    borderRadius: 8,
+                    backgroundColor: mintTheme.colors.componentInteractive,
+                    position: 'relative',
+                    overflow: 'hidden',
+                  }}
+                >
+                  <Flex
+                    direction="column"
+                    gap="1"
+                    style={{
+                      flex: 1,
+                      zIndex: 1,
+                    }}
+                  >
+                    <Text size="4" color="mint">
+                      Blitzkrieg. Free forever. For everyone.
+                    </Text>
+                    <Text color="mint">
+                      <b>Consider supporting today 🍀</b>
+                    </Text>
+                  </Flex>
+
+                  <Text
+                    color="mint"
+                    style={{
+                      zIndex: 1,
+                    }}
+                  >
+                    <Flex>
+                      <CaretRightIcon width={32} height={32} />
+                    </Flex>
+                  </Text>
+
+                  <SkyLine
+                    style={{
+                      position: 'absolute',
+                      right: 'min(8vw, 15%)',
+                      top: '5%',
+                    }}
+                  />
+                </Flex>
+              </a>
+            </PageWrapper>
+          )}
         </Theme>
       </body>
     </html>

src/app/page.css.ts

@@ -3,7 +3,7 @@ import { theme } from '../stitches.config';
 
 export const tool = styleVariants({
   enabled: {
-    boxShadow: `inset 0 -192px 128px -128px ${theme.colors.appBackground1}`,
+    boxShadow: `inset 0 -256px 512px -128px ${theme.colors.appBackground1}`,
 
     ':hover': {
       boxShadow: `inset 0 -160px 128px -128px ${theme.colors.appBackground1}`,

src/app/page.tsx

@@ -30,7 +30,8 @@ export default function Page() {
               ({
                 node: (
                   <Link
-                    href={`/tools/${tool.id}`}
+                    href={tool.href ?? `/tools/${tool.id}`}
+                    target={tool.href ? '_blank' : undefined}
                     className={
                       tool.disabled ? styles.tool.disabled : styles.tool.enabled
                     }

src/app/tools/components/Loader.tsx

@@ -0,0 +1,52 @@
+import { blackA } from '@radix-ui/colors';
+import { Flex, Text } from '@radix-ui/themes';
+import { PuffLoader } from 'react-spinners';
+import { theme } from '../../../stitches.config';
+
+const NAV_HEIGHT = 52.65;
+
+interface LoaderProps {
+  naked?: boolean;
+  color?: string;
+  progress?: number;
+}
+
+export function Loader({ naked, color, progress }: LoaderProps) {
+  const animation = (
+    <div style={{ position: 'relative' }}>
+      {progress !== undefined && (
+        <Text
+          style={{
+            position: 'absolute',
+            left: '50%',
+            top: '50%',
+            transform: 'translate(calc(-50% + 5px), calc(-50% + 5px))',
+          }}
+        >
+          {Math.round(progress * 100)}%
+        </Text>
+      )}
+      <PuffLoader color={color ?? theme.colors.solidBackground} />
+    </div>
+  );
+
+  if (naked) return animation;
+
+  return (
+    <Flex
+      style={{
+        backgroundColor: blackA.blackA10,
+        position: 'fixed',
+        top: NAV_HEIGHT,
+        left: 0,
+        width: '100%',
+        height: `calc(100% - ${NAV_HEIGHT}px)`,
+        padding: theme.spaces.paddingMajor,
+      }}
+      align="center"
+      justify="center"
+    >
+      {animation}
+    </Flex>
+  );
+}

src/app/tools/layout.tsx

@@ -1,9 +1,11 @@
 'use client';
 
+import Link from 'next/link';
 import { usePathname } from 'next/navigation';
-import { ReactNode } from 'react';
+import { ReactNode, Suspense } from 'react';
 import { TOOLS } from '../../constants/tools';
 import { theme } from '../../stitches.config';
+import { Loader } from './components/Loader';
 
 interface ToolsLayoutProps {
   children: ReactNode;
@@ -11,59 +13,67 @@ interface ToolsLayoutProps {
 
 export default function ToolsLayout({ children }: ToolsLayoutProps) {
   const pathname = usePathname();
-  const toolId = pathname.split('/').at(-1);
+  const pathSplit = pathname.split('/');
+  const toolId = pathSplit.at(2);
   const tool = TOOLS.find((tool) => tool.id === toolId);
 
   return (
     <>
-      <div
-        style={{
-          height: 128,
-          boxShadow: `inset 0 -192px 128px -128px ${theme.colors.appBackground1}`,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          gap: 4,
-          flexDirection: 'column',
-          position: 'relative',
-          overflow: 'hidden',
-        }}
-      >
+      {tool && <title>{tool.title}</title>}
+
+      {pathSplit.length === 3 && (
         <div
           style={{
-            position: 'absolute',
-            backgroundImage: `url(/assets/banners/${toolId}.webp)`,
-            backgroundSize: 'cover',
-            backgroundPosition: 'center',
-            width: '100%',
-            height: '100%',
-            top: 0,
-            left: 0,
-            zIndex: -1,
-            filter: 'blur(4px)',
-            transform: 'scale(calc((128 + 8) / 128))',
-          }}
-        />
-
-        <span
-          style={{
-            color: theme.colors.textHighContrast,
-            fontSize: 32,
+            height: 128,
+            boxShadow: `inset 0 -192px 128px -128px ${theme.colors.appBackground1}`,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexDirection: 'column',
+            position: 'relative',
+            overflow: 'hidden',
           }}
         >
-          {tool?.title}
-        </span>
-        <span
-          style={{
-            color: theme.colors.textLowContrast,
-            fontSize: 16,
-          }}
-        >
-          {tool?.description}
-        </span>
-      </div>
+          <div
+            style={{
+              position: 'absolute',
+              backgroundImage: `url(/assets/banners/${toolId}.webp)`,
+              backgroundSize: 'cover',
+              backgroundPosition: 'center',
+              width: '100%',
+              height: '100%',
+              top: 0,
+              left: 0,
+              zIndex: -1,
+              filter: 'blur(4px)',
+              transform: 'scale(calc((128 + 8) / 128))',
+            }}
+          />
 
-      {children}
+          <Link
+            href={`/tools/${toolId}`}
+            style={{
+              textDecoration: 'none',
+              fontWeight: 900,
+              color: theme.colors.textHighContrast,
+              fontSize: 32,
+              letterSpacing: -1,
+            }}
+          >
+            {tool?.title}
+          </Link>
+          <span
+            style={{
+              color: theme.colors.textLowContrast,
+              fontSize: 16,
+            }}
+          >
+            {tool?.description}
+          </span>
+        </div>
+      )}
+
+      <Suspense fallback={<Loader />}>{children}</Suspense>
     </>
   );
 }

src/app/tools/rating/components/PageTurner/index.tsx

@@ -59,6 +59,8 @@ export function PageTurner({
             type="number"
             ref={pageInput}
             style={{ width: 64, textAlign: 'center' }}
+            min={1}
+            max={pages}
             onBlur={(event) => {
               onPageChange(
                 Math.max(

src/app/tools/rating/page.tsx

@@ -15,26 +15,30 @@ import { produce } from 'immer';
 import { debounce, range } from 'lodash';
 import { ChangeEvent, useEffect, useRef, useState } from 'react';
 import { create } from 'zustand';
-import { RatingsInfo, RatingsPlayer } from '../../../commands/ratings';
+import { RatingInfo, RatingPlayer } from '../../../commands/ratingLeaderboard';
 import PageWrapper from '../../../components/PageWrapper';
 import { Skeleton } from '../../../components/Skeleton';
 import { LEAGUES } from '../../../constants/leagues';
-import { FIRST_ARCHIVED_RATINGS_SEASON } from '../../../constants/ratings';
-import { REGIONS, REGION_NAMES, Region } from '../../../constants/regions';
+import { FIRST_MINIMAL_ARCHIVED_RATING_SEASON } from '../../../constants/rating';
+import {
+  REGIONS,
+  Region,
+  UNLOCALIZED_REGION_NAMES,
+} from '../../../constants/regions';
 import { WARGAMING_APPLICATION_ID } from '../../../constants/wargamingApplicationID';
 import fetchBlitz from '../../../core/blitz/fetchBlitz';
 import { getClanAccountInfo } from '../../../core/blitz/getClanAccountInfo';
-import getRatingsInfo from '../../../core/blitz/getRatingsInfo';
-import { getRatingsLeague } from '../../../core/blitz/getRatingsLeague';
-import { getRatingsNeighbors } from '../../../core/blitz/getRatingsNeighbors';
-import { searchCurrentRatingsPlayers } from '../../../core/blitz/searchCurrentRatingsPlayers';
+import getRatingInfo from '../../../core/blitz/getRatingInfo';
+import { getRatingLeague } from '../../../core/blitz/getRatingLeague';
+import { getRatingNeighbors } from '../../../core/blitz/getRatingNeighbors';
+import { searchCurrentRatingPlayers } from '../../../core/blitz/searchCurrentRatingPlayers';
 import {
   AccountList,
   AccountListItem,
 } from '../../../core/blitz/searchPlayersAcrossRegions';
 import { getArchivedLatestSeasonNumber } from '../../../core/blitzkrieg/getArchivedLatestSeasonNumber';
-import getArchivedRatingsInfo from '../../../core/blitzkrieg/getArchivedRatingsInfo';
-import { getArchivedRatingsLeaderboard } from '../../../core/blitzkrieg/getArchivedRatingsLeaderboard';
+import getArchivedRatingInfo from '../../../core/blitzkrieg/getArchivedRatingInfo';
+import { getArchivedRatingLeaderboard } from '../../../core/blitzkrieg/getArchivedRatingLeaderboard';
 import { theme } from '../../../stitches.config';
 import { PageTurner } from './components/PageTurner';
 
@@ -47,7 +51,7 @@ interface NameCacheEntry {
 }
 type NameCache = Record<Region, Record<number, NameCacheEntry | null>>;
 type LeaderboardCache = Record<Region, Record<number, Record<number, number>>>;
-type InfoCache = Record<Region, Record<number, RatingsInfo | undefined>>;
+type InfoCache = Record<Region, Record<number, RatingInfo | undefined>>;
 type ScoreCache = Record<Region, Record<number, Record<number, number>>>;
 
 const useNameCache = create<NameCache>(() => ({
@@ -89,7 +93,7 @@ export default function Page() {
     { type: 'id'; id: number } | { type: 'position'; position: number } | null
   >(null);
 
-  const ratingsInfo = useInfoCache()[region][season];
+  const ratingInfo = useInfoCache()[region][season];
   const [latestArchivedSeasonNumber, setLatestArchivedSeasonNumber] = useState<
     number | null
   >(null);
@@ -107,7 +111,7 @@ export default function Page() {
   });
 
   const pages = Math.ceil(
-    (ratingsInfo && ratingsInfo.detail === undefined ? ratingsInfo?.count : 1) /
+    (ratingInfo && ratingInfo.detail === undefined ? ratingInfo?.count : 1) /
       ROWS_PER_PAGE,
   );
 
@@ -118,8 +122,8 @@ export default function Page() {
     (async () => {
       const newInfo =
         season === 0
-          ? await getRatingsInfo(region)
-          : await getArchivedRatingsInfo(region, season);
+          ? await getRatingInfo(region)
+          : await getArchivedRatingInfo(region, season);
       useInfoCache.setState(
         produce((draft: InfoCache) => {
           draft[region][season] = newInfo;
@@ -136,7 +140,7 @@ export default function Page() {
         const results = (
           await Promise.all(
             range(0, 5).map(async (league: number) => {
-              const data = await getRatingsLeague(region, league);
+              const data = await getRatingLeague(region, league);
               leaguePositionCache.current[region][league] = data[0].number - 1;
 
               return data;
@@ -174,12 +178,12 @@ export default function Page() {
         );
       })();
     } else {
-      getArchivedRatingsLeaderboard(region, season).then((results) => {
+      getArchivedRatingLeaderboard(region, season).then((results) => {
         useLeaderboardCache.setState(
           produce((draft: LeaderboardCache) => {
             if (!(season in draft[region])) draft[region][season] = {};
 
-            results.forEach((result, index) => {
+            results.entries.forEach((result, index) => {
               draft[region][season][index] = result.id;
             });
           }),
@@ -188,7 +192,7 @@ export default function Page() {
           produce((draft: ScoreCache) => {
             if (!(season in draft[region])) draft[region][season] = {};
 
-            results.forEach((result) => {
+            results.entries.forEach((result) => {
               draft[region][season][result.id] = result.score;
             });
           }),
@@ -209,7 +213,7 @@ export default function Page() {
   }, [leaderboard[region]?.[season] && 0 in leaderboard[region][season]]);
   // neighboring page caching for all seasons
   useEffect(() => {
-    if (!ratingsInfo || ratingsInfo?.detail) return;
+    if (!ratingInfo || ratingInfo?.detail) return;
 
     if (season === 0) {
       const middleIndex = page * ROWS_PER_PAGE + ROWS_PER_PAGE / 2;
@@ -232,7 +236,7 @@ export default function Page() {
       const ids = range(
         Math.max(0, (page - 1) * ROWS_PER_PAGE),
         Math.min(
-          ratingsInfo.count - 1,
+          ratingInfo.count - 1,
           (page + 1) * ROWS_PER_PAGE + ROWS_PER_PAGE,
         ),
       )
@@ -261,7 +265,7 @@ export default function Page() {
     page,
     region,
     season,
-    ratingsInfo?.detail,
+    ratingInfo?.detail,
     leaderboard[region][season] !== undefined &&
       0 in leaderboard[region][season],
   ]);
@@ -275,7 +279,7 @@ export default function Page() {
   async function cacheNeighbors(
     id: number,
     size: number,
-  ): Promise<RatingsPlayer[] | null> {
+  ): Promise<RatingPlayer[] | null> {
     const radius = Math.round(size / 2);
     const targetPosition = Object.entries(leaderboard[region][season]).find(
       ([, player]) => id === player,
@@ -299,7 +303,7 @@ export default function Page() {
       }
     }
 
-    const { neighbors } = await getRatingsNeighbors(region, id, size, true);
+    const { neighbors } = await getRatingNeighbors(region, id, size, true);
 
     useLeaderboardCache.setState(
       produce((draft: LeaderboardCache) => {
@@ -337,11 +341,11 @@ export default function Page() {
     return neighbors;
   }
   async function jumpToPosition(position: number) {
-    if (!ratingsInfo || ratingsInfo?.detail) return;
+    if (!ratingInfo || ratingInfo?.detail) return;
 
     const targetPosition = Math.min(
-      ratingsInfo.count - 1,
-      Math.max(0, Math.min(position, ratingsInfo.count - 1)),
+      ratingInfo.count - 1,
+      Math.max(0, Math.min(position, ratingInfo.count - 1)),
     );
 
     if (season === 0) {
@@ -374,7 +378,7 @@ export default function Page() {
       const loadingDirection = Math.sign(targetPosition - closestPosition);
       let seedingPlayer = closestPlayerId as number;
       let targetPositionAcquired = false;
-      let neighbors: RatingsPlayer[] | null;
+      let neighbors: RatingPlayer[] | null;
 
       setLoadingProgress([0, closestPositionDistance]);
 
@@ -419,7 +423,7 @@ export default function Page() {
     }
   }
   async function jumpToScore() {
-    if (!ratingsInfo || ratingsInfo?.detail) return;
+    if (!ratingInfo || ratingInfo?.detail) return;
 
     const targetScore = scoreInput.current!.valueAsNumber;
 
@@ -518,7 +522,7 @@ export default function Page() {
     } else {
       let playerIndex = -1;
 
-      for (let index = ratingsInfo.count; index >= 0; index--) {
+      for (let index = ratingInfo.count; index >= 0; index--) {
         if (!(index in leaderboard[region][season])) continue;
 
         if (scores[leaderboard[region][season][index]] >= targetScore) {
@@ -541,7 +545,7 @@ export default function Page() {
   }
 
   const totalPlayers =
-    !ratingsInfo?.detail && ratingsInfo?.count ? ratingsInfo.count : undefined;
+    !ratingInfo?.detail && ratingInfo?.count ? ratingInfo.count : undefined;
 
   return (
     <PageWrapper color="orange">
@@ -556,7 +560,7 @@ export default function Page() {
             <Select.Content>
               {REGIONS.map((region) => (
                 <Select.Item key={region} value={region}>
-                  {REGION_NAMES[region]}
+                  {UNLOCALIZED_REGION_NAMES[region]}
                 </Select.Item>
               ))}
             </Select.Content>
@@ -569,7 +573,7 @@ export default function Page() {
             <Select.Trigger style={{ flex: 1 }} />
 
             <Select.Content>
-              {ratingsInfo?.detail === undefined && (
+              {ratingInfo?.detail === undefined && (
                 <Select.Item value="0">Current season</Select.Item>
               )}
 
@@ -578,7 +582,7 @@ export default function Page() {
 
                 {latestArchivedSeasonNumber &&
                   range(
-                    FIRST_ARCHIVED_RATINGS_SEASON,
+                    FIRST_MINIMAL_ARCHIVED_RATING_SEASON,
                     latestArchivedSeasonNumber + 1,
                   )
                     .map((season) => (
@@ -677,8 +681,8 @@ export default function Page() {
                   <Select.Trigger />
 
                   <Select.Content>
-                    {ratingsInfo?.detail === undefined &&
-                      ratingsInfo?.leagues.map(({ index, title }) => (
+                    {ratingInfo?.detail === undefined &&
+                      ratingInfo?.leagues.map(({ index, title }) => (
                         <Select.Item key={index} value={`${index}`}>
                           {title}
                         </Select.Item>
@@ -710,11 +714,7 @@ export default function Page() {
                             );
                           }
                         } else {
-                          if (
-                            !ratingsInfo ||
-                            ratingsInfo.detail ||
-                            !leaderboard
-                          )
+                          if (!ratingInfo || ratingInfo.detail || !leaderboard)
                             return;
 
                           const minScore =
@@ -723,7 +723,7 @@ export default function Page() {
 
                           for (
                             let index = 0;
-                            index < ratingsInfo.count;
+                            index < ratingInfo.count;
                             index++
                           ) {
                             if (
@@ -775,7 +775,7 @@ export default function Page() {
                             setSearchLoading(true);
 
                             const accountList =
-                              await searchCurrentRatingsPlayers(
+                              await searchCurrentRatingPlayers(
                                 region,
                                 trimmedSearch,
                               );
@@ -881,12 +881,12 @@ export default function Page() {
                                 id: player.account_id,
                               });
                             } else {
-                              if (!ratingsInfo || ratingsInfo.detail) return;
+                              if (!ratingInfo || ratingInfo.detail) return;
                               let playerIndex = -1;
 
                               for (
                                 let index = 0;
-                                index < ratingsInfo.count;
+                                index < ratingInfo.count;
                                 index++
                               ) {
                                 if (
@@ -947,9 +947,7 @@ export default function Page() {
       </Flex>
 
       <PageTurner
-        totalPlayers={
-          (ratingsInfo?.detail ? undefined : ratingsInfo?.count) ?? 0
-        }
+        totalPlayers={(ratingInfo?.detail ? undefined : ratingInfo?.count) ?? 0}
         leaderboard={leaderboard[region][season] ?? {}}
         rowsPerPage={ROWS_PER_PAGE}
         page={page}
@@ -978,7 +976,7 @@ export default function Page() {
           page * ROWS_PER_PAGE,
           Math.min(
             page * ROWS_PER_PAGE + ROWS_PER_PAGE,
-            ratingsInfo?.detail ? 0 : (ratingsInfo?.count ?? 1) - 1,
+            ratingInfo?.detail ? 0 : (ratingInfo?.count ?? 1) - 1,
           ),
         ).map((index) => {
           const id = leaderboard[region][season]?.[index];
@@ -990,8 +988,8 @@ export default function Page() {
               : highlightedPlayer.position === index
             : false;
           const reward =
-            !ratingsInfo?.detail && ratingsInfo?.rewards
-              ? ratingsInfo.rewards.find(
+            !ratingInfo?.detail && ratingInfo?.rewards
+              ? ratingInfo.rewards.find(
                   (reward) =>
                     reward.from_position <= position &&
                     reward.to_position >= position,
@@ -1086,9 +1084,7 @@ export default function Page() {
       </Table.Root>
 
       <PageTurner
-        totalPlayers={
-          (ratingsInfo?.detail ? undefined : ratingsInfo?.count) ?? 0
-        }
+        totalPlayers={(ratingInfo?.detail ? undefined : ratingInfo?.count) ?? 0}
         rowsPerPage={ROWS_PER_PAGE}
         leaderboard={leaderboard[region][season] ?? {}}
         page={page}

src/app/tools/session/components/CustomColumn.tsx

@@ -23,8 +23,6 @@ export function CustomColumn({ column, Builder }: CustomColumn) {
       <Builder.SubTrigger>Column {column + 1}</Builder.SubTrigger>
 
       <Builder.SubContent>
-        <Builder.Label>Display</Builder.Label>
-
         <Builder.RadioGroup
           value={customColumn.display}
           onValueChange={(event) =>

src/app/tools/session/components/Menu.tsx

@@ -1,4 +1,21 @@
-import { ContextMenu, DropdownMenu } from '@radix-ui/themes';
+import {
+  Button,
+  ContextMenu,
+  Dialog,
+  DropdownMenu,
+  Flex,
+  Heading,
+  TextField,
+} from '@radix-ui/themes';
+import { createColors } from 'bepaint';
+import { useRef, useState } from 'react';
+import {
+  ACCENT_COLORS,
+  AccentColor,
+  GRAY_COLORS,
+  GrayColor,
+  PALETTES,
+} from '../../../../constants/radixColors';
 import { useSession } from '../../../../stores/session';
 import { CustomColumn } from './CustomColumn';
 
@@ -9,38 +26,111 @@ interface ContextMenuProps {
 
 export function Menu({ Builder, reset }: ContextMenuProps) {
   const session = useSession();
+  const [showTitleEditor, setShowTitleEditor] = useState(false);
+  const titleInput = useRef<HTMLInputElement>(null);
 
   return (
-    <Builder.Content>
-      <CustomColumn Builder={Builder} column={0} />
-      <CustomColumn Builder={Builder} column={1} />
-      <CustomColumn Builder={Builder} column={2} />
-      <CustomColumn Builder={Builder} column={3} />
+    <>
+      <Dialog.Root open={showTitleEditor} onOpenChange={setShowTitleEditor}>
+        <Dialog.Content>
+          <Flex direction="column" gap="4">
+            <Heading size="4">Edit title</Heading>
 
-      <Builder.Separator />
+            <Flex gap="2" style={{ width: '100%' }}>
+              <TextField.Root style={{ flex: 1 }}>
+                <TextField.Input
+                  ref={titleInput}
+                  defaultValue={session.title}
+                  placeholder="Enter title..."
+                  onKeyDown={(event) => {
+                    if (event.key === 'Enter' && titleInput.current) {
+                      setShowTitleEditor(false);
+                      useSession.setState({ title: titleInput.current!.value });
+                    }
+                  }}
+                />
+              </TextField.Root>
 
-      <Builder.CheckboxItem
-        checked={session.showTotal}
-        onCheckedChange={(checked) =>
-          useSession.setState({ showTotal: checked })
-        }
-      >
-        Show total
-      </Builder.CheckboxItem>
-      <Builder.CheckboxItem
-        checked={session.showCareer}
-        onCheckedChange={(checked) =>
-          useSession.setState({ showCareer: checked })
-        }
-      >
-        Show career
-      </Builder.CheckboxItem>
+              <Dialog.Close>
+                <Button
+                  onClick={() =>
+                    useSession.setState({ title: titleInput.current!.value })
+                  }
+                >
+                  Set
+                </Button>
+              </Dialog.Close>
+            </Flex>
+          </Flex>
+        </Dialog.Content>
+      </Dialog.Root>
 
-      <Builder.Separator />
+      <Builder.Content>
+        <Builder.Sub>
+          <Builder.SubTrigger>Accent color</Builder.SubTrigger>
 
-      <Builder.Item color="red" onClick={reset}>
-        Reset
-      </Builder.Item>
-    </Builder.Content>
+          <Builder.SubContent>
+            <Builder.RadioGroup
+              value={session.color}
+              onValueChange={(value) =>
+                useSession.setState({ color: value as AccentColor | GrayColor })
+              }
+            >
+              {[...ACCENT_COLORS, ...GRAY_COLORS].map((color) => (
+                <Builder.RadioItem value={color} key={color}>
+                  <Flex gap="2" align="center">
+                    <div
+                      style={{
+                        backgroundColor: createColors(PALETTES[color])
+                          .solidBackground,
+                        width: 16,
+                        height: 16,
+                        borderRadius: '100%',
+                      }}
+                    />
+                    {`${color.charAt(0).toUpperCase()}${color.slice(1)}`}
+                  </Flex>
+                </Builder.RadioItem>
+              ))}
+            </Builder.RadioGroup>
+          </Builder.SubContent>
+        </Builder.Sub>
+
+        <Builder.Separator />
+
+        <Builder.Item onClick={() => setShowTitleEditor(true)}>
+          Edit title...
+        </Builder.Item>
+        <CustomColumn Builder={Builder} column={0} />
+        <CustomColumn Builder={Builder} column={1} />
+        <CustomColumn Builder={Builder} column={2} />
+        <CustomColumn Builder={Builder} column={3} />
+
+        <Builder.Separator />
+
+        <Builder.CheckboxItem
+          checked={session.showTotal}
+          onCheckedChange={(checked) =>
+            useSession.setState({ showTotal: checked })
+          }
+        >
+          Show total
+        </Builder.CheckboxItem>
+        <Builder.CheckboxItem
+          checked={session.showCareer}
+          onCheckedChange={(checked) =>
+            useSession.setState({ showCareer: checked })
+          }
+        >
+          Show career
+        </Builder.CheckboxItem>
+
+        <Builder.Separator />
+
+        <Builder.Item color="red" onClick={reset}>
+          Reset
+        </Builder.Item>
+      </Builder.Content>
+    </>
   );
 }

src/app/tools/session/page.tsx

@@ -18,11 +18,13 @@ import {
 import { debounce } from 'lodash';
 import { ChangeEvent, useEffect, useRef, useState } from 'react';
 import PageWrapper from '../../../components/PageWrapper';
-import { REGION_NAMES } from '../../../constants/regions';
+import { UNLOCALIZED_REGION_NAMES } from '../../../constants/regions';
 import searchPlayersAcrossRegions, {
   AccountListWithServer,
 } from '../../../core/blitz/searchPlayersAcrossRegions';
-import { resetSession, setSession, useSession } from '../../../stores/session';
+import { resetSession } from '../../../core/blitzkrieg/resetSession';
+import { setSession } from '../../../core/blitzkrieg/setSession';
+import { useSession } from '../../../stores/session';
 import SessionPage from '../../embeds/session/page';
 import { Menu } from './components/Menu';
 import * as styles from './page.css';
@@ -107,7 +109,7 @@ export default function Page() {
                         setShowSearchResults(false);
                         setSession(region, id, nickname);
                       }}
-                      shortcut={REGION_NAMES[region]}
+                      shortcut={UNLOCALIZED_REGION_NAMES[region]}
                     >
                       {nickname}
                     </DropdownMenu.Item>
@@ -248,7 +250,7 @@ export default function Page() {
         </div>
       </div>
 
-      <SessionPage />
+      <SessionPage naked={false} />
     </PageWrapper>
   );
 }

src/app/tools/tankopedia/[id]/components/AntagonistBar.tsx

@@ -0,0 +1,274 @@
+import { CaretRightIcon, Cross1Icon, ShuffleIcon } from '@radix-ui/react-icons';
+import {
+  Button,
+  Card,
+  Dialog,
+  Flex,
+  Heading,
+  Tabs,
+  Text,
+  Tooltip,
+} from '@radix-ui/themes';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { ModuleButton } from '../../../../../components/ModuleButtons/ModuleButton';
+import { ShellButton } from '../../../../../components/ModuleButtons/ShellButton';
+import { SmallTankIcon } from '../../../../../components/SmallTankIcon';
+import { resolveNearPenetration } from '../../../../../core/blitz/resolveNearPenetration';
+import { pushTankopediaPath } from '../../../../../core/blitzkrieg/pushTankopediaPath';
+import {
+  SHELL_NAMES,
+  TIER_ROMAN_NUMERALS,
+} from '../../../../../core/blitzkrieg/tankDefinitions/constants';
+import { mutateDuel, useDuel } from '../../../../../stores/duel';
+import {
+  mutateTankopediaTemporary,
+  useTankopediaPersistent,
+} from '../../../../../stores/tankopedia';
+import { TankSearch } from '../../components/TankSearch';
+
+interface AntagonistBarProps {
+  floating?: boolean;
+}
+
+export function AntagonistBar({ floating }: AntagonistBarProps) {
+  const antagonist = useDuel((state) => state.antagonist!);
+  const mode = useTankopediaPersistent((state) => state.mode);
+  const [tab, setTab] = useState('search');
+  const [antagonistSelectorOpen, setAntagonistSelectorVisible] =
+    useState(false);
+  const router = useRouter();
+
+  if (mode !== 'armor') return null;
+
+  return (
+    <Card
+      style={
+        floating
+          ? {
+              position: 'absolute',
+              bottom: 8,
+              left: '50%',
+              transform: 'translateX(-50%)',
+            }
+          : undefined
+      }
+    >
+      <Flex align="center" justify="between" gap="6">
+        <Flex>
+          {antagonist.gun.shells.map((shell, index) => {
+            return (
+              <ShellButton
+                selected={antagonist.shell.id === shell.id}
+                shell={shell.icon}
+                rowChild
+                first={index === 0}
+                key={shell.id}
+                last={index === antagonist.gun.shells.length - 1}
+                onClick={() => {
+                  mutateDuel((draft) => {
+                    draft.antagonist!.shell = shell;
+                    mutateTankopediaTemporary((draft) => {
+                      draft.shot = undefined;
+                    });
+                  });
+                }}
+              />
+            );
+          })}
+        </Flex>
+
+        <Flex align="center" gap="4">
+          {!floating && <Text>Versus</Text>}
+
+          {floating && (
+            <Flex gap="2" align="center">
+              Versus {antagonist.tank.name}
+              <SmallTankIcon id={antagonist.tank.id} size={16} />
+            </Flex>
+          )}
+
+          {!floating && (
+            <Dialog.Root
+              open={antagonistSelectorOpen}
+              onOpenChange={setAntagonistSelectorVisible}
+            >
+              <Dialog.Trigger>
+                <Button variant="ghost">
+                  <Flex gap="2" align="center">
+                    {antagonist.tank.name}
+                    <SmallTankIcon id={antagonist.tank.id} size={16} />
+                    <CaretRightIcon />
+                  </Flex>
+                </Button>
+              </Dialog.Trigger>
+
+              <Dialog.Content>
+                <Tabs.Root
+                  value={tab}
+                  onValueChange={setTab}
+                  style={{ position: 'relative' }}
+                >
+                  <Dialog.Close>
+                    <Button
+                      variant="ghost"
+                      style={{ position: 'absolute', right: 0, top: 8 }}
+                    >
+                      <Cross1Icon />
+                    </Button>
+                  </Dialog.Close>
+
+                  <Flex gap="4" direction="column">
+                    <Tabs.List>
+                      <Tabs.Trigger value="search">Search</Tabs.Trigger>
+                      <Tabs.Trigger value="configure">Configure</Tabs.Trigger>
+                    </Tabs.List>
+
+                    <Tabs.Content value="search">
+                      <Flex
+                        direction="column"
+                        gap="4"
+                        style={{ flex: 1 }}
+                        justify="center"
+                      >
+                        <TankSearch
+                          compact
+                          onSelect={(tank) => {
+                            mutateDuel((draft) => {
+                              draft.antagonist!.tank = tank;
+                              draft.antagonist!.engine = tank.engines.at(-1)!;
+                              draft.antagonist!.track = tank.tracks.at(-1)!;
+                              draft.antagonist!.turret = tank.turrets.at(-1)!;
+                              draft.antagonist!.gun =
+                                draft.antagonist!.turret.guns.at(-1)!;
+                              draft.antagonist!.shell =
+                                draft.antagonist!.gun.shells[0];
+                            });
+                            setAntagonistSelectorVisible(false);
+                          }}
+                        />
+                      </Flex>
+                    </Tabs.Content>
+
+                    <Tabs.Content value="configure">
+                      <Flex direction="column" gap="4">
+                        <Flex direction="column" gap="2" style={{ flex: 1 }}>
+                          <Heading size="4">
+                            {antagonist.tank.name} modules
+                          </Heading>
+
+                          <Flex gap="2" wrap="wrap">
+                            <Flex>
+                              {antagonist.tank.turrets.map((turret, index) => (
+                                <Tooltip content={turret.name} key={turret.id}>
+                                  <ModuleButton
+                                    rowChild
+                                    first={index === 0}
+                                    last={
+                                      index ===
+                                      antagonist.tank.turrets.length - 1
+                                    }
+                                    key={turret.id}
+                                    onClick={() => {
+                                      mutateDuel((draft) => {
+                                        draft.antagonist!.turret = turret;
+                                        draft.antagonist!.gun =
+                                          turret.guns.at(-1)!;
+                                        draft.antagonist!.shell =
+                                          draft.antagonist!.gun.shells[0];
+                                      });
+                                      mutateTankopediaTemporary((draft) => {
+                                        draft.shot = undefined;
+                                      });
+                                    }}
+                                    selected={
+                                      antagonist.turret.id === turret.id
+                                    }
+                                    discriminator={
+                                      TIER_ROMAN_NUMERALS[turret.tier]
+                                    }
+                                    module="turret"
+                                  />
+                                </Tooltip>
+                              ))}
+                            </Flex>
+                            <Flex>
+                              {antagonist.turret.guns.map((gun, index) => (
+                                <Tooltip content={gun.name} key={gun.id}>
+                                  <ModuleButton
+                                    rowChild
+                                    first={index === 0}
+                                    last={
+                                      index ===
+                                      antagonist.turret.guns.length - 1
+                                    }
+                                    onClick={() => {
+                                      mutateDuel((draft) => {
+                                        draft.antagonist!.gun = gun;
+                                        draft.antagonist!.shell = gun.shells[0];
+                                      });
+                                    }}
+                                    selected={antagonist.gun.id === gun.id}
+                                    discriminator={
+                                      TIER_ROMAN_NUMERALS[gun.tier]
+                                    }
+                                    module="gun"
+                                  />
+                                </Tooltip>
+                              ))}
+                            </Flex>
+                          </Flex>
+                        </Flex>
+
+                        <Flex direction="column" style={{ flex: 1 }}>
+                          <Heading size="4">Properties</Heading>
+
+                          <ul>
+                            <li>
+                              Turret: <b>{antagonist.turret.name}</b>
+                            </li>
+                            <li>
+                              Gun: <b>{antagonist.gun.name}</b>
+                            </li>
+                            <li>Shells:</li>
+                            <ul>
+                              {antagonist.gun.shells.map((shell) => (
+                                <li key={shell.id}>
+                                  {SHELL_NAMES[shell.type]}:{' '}
+                                  <b>
+                                    {resolveNearPenetration(shell.penetration)}
+                                    mm
+                                  </b>
+                                  , {shell.damage.armor}HP
+                                </li>
+                              ))}
+                            </ul>
+                          </ul>
+                        </Flex>
+                      </Flex>
+                    </Tabs.Content>
+                  </Flex>
+                </Tabs.Root>
+              </Dialog.Content>
+            </Dialog.Root>
+          )}
+        </Flex>
+
+        <Button
+          variant="ghost"
+          onClick={() => {
+            mutateDuel((draft) => {
+              [draft.protagonist, draft.antagonist] = [
+                draft.antagonist,
+                draft.protagonist,
+              ];
+              pushTankopediaPath(draft.antagonist!.tank.id);
+            });
+          }}
+        >
+          <ShuffleIcon /> Swap
+        </Button>
+      </Flex>
+    </Card>
+  );
+}

src/app/tools/tankopedia/[id]/components/Characteristics/components/ConfigurationChildWrapper.tsx

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import * as styles from '../../../../page.css';
+
+interface ConfigurationChildWrapperProps {
+  children: ReactNode;
+}
+
+export function ConfigurationChildWrapper({
+  children,
+}: ConfigurationChildWrapperProps) {
+  return <div className={styles.configurationChild}>{children}</div>;
+}

src/app/tools/tankopedia/[id]/components/Characteristics/components/Consumables.tsx

@@ -0,0 +1,75 @@
+import { Flex, Heading } from '@radix-ui/themes';
+import { use } from 'react';
+import { ConsumableButton } from '../../../../../../../components/ModuleButtons/ConsumableButton';
+import { checkConsumableProvisionInclusivity } from '../../../../../../../core/blitzkrieg/checkConsumableProvisionInclusivity';
+import { consumableDefinitions } from '../../../../../../../core/blitzkrieg/consumableDefinitions';
+import { useEquipment } from '../../../../../../../hooks/useEquipment';
+import { mutateDuel, useDuel } from '../../../../../../../stores/duel';
+import { ConfigurationChildWrapper } from './ConfigurationChildWrapper';
+
+export function Consumables() {
+  const protagonist = useDuel((state) => state.protagonist!);
+  const awaitedConsumableDefinitions = use(consumableDefinitions);
+  const consumables = useDuel((state) => state.protagonist!.consumables);
+  const consumablesList = Object.values(awaitedConsumableDefinitions).filter(
+    (consumable) =>
+      checkConsumableProvisionInclusivity(
+        consumable,
+        protagonist.tank,
+        protagonist.gun,
+      ),
+  );
+  const cooldownBooster = useDuel(
+    (state) => state.protagonist!.cooldownBooster,
+  );
+  const hasConsumableDeliverySystem = useEquipment(118);
+  const hasHighEndConsumables = useEquipment(101);
+
+  return (
+    <ConfigurationChildWrapper>
+      <Heading size="4">Consumables</Heading>
+
+      <Flex wrap="wrap">
+        {consumablesList.map((consumable, index) => {
+          const selected = consumables.includes(consumable.id);
+
+          return (
+            <ConsumableButton
+              duration={
+                typeof consumable.duration === 'number'
+                  ? consumable.duration * (hasHighEndConsumables ? 0.7 : 1)
+                  : undefined
+              }
+              cooldown={
+                consumable.cooldown *
+                (hasConsumableDeliverySystem ? 0.85 : 1) *
+                (1 - cooldownBooster * 0.1)
+              }
+              key={consumable.id}
+              first={index === 0}
+              last={index === consumablesList.length - 1}
+              rowChild
+              disabled={
+                protagonist.tank.consumables === consumables.length && !selected
+              }
+              consumable={consumable.id}
+              selected={selected}
+              onClick={() => {
+                mutateDuel((draft) => {
+                  if (selected) {
+                    draft.protagonist!.consumables =
+                      draft.protagonist!.consumables.filter(
+                        (id) => id !== consumable.id,
+                      );
+                  } else {
+                    draft.protagonist!.consumables.push(consumable.id);
+                  }
+                });
+              }}
+            />
+          );
+        })}
+      </Flex>
+    </ConfigurationChildWrapper>
+  );
+}

src/app/tools/tankopedia/[id]/components/Characteristics/components/Equipments.tsx

@@ -0,0 +1,62 @@
+import { Flex, Heading } from '@radix-ui/themes';
+import { use } from 'react';
+import { EquipmentButton } from '../../../../../../../components/ModuleButtons/EquipmentButton';
+import { equipmentDefinitions } from '../../../../../../../core/blitzkrieg/equipmentDefinitions';
+import { mutateDuel, useDuel } from '../../../../../../../stores/duel';
+import { ConfigurationChildWrapper } from './ConfigurationChildWrapper';
+
+export function Equipments() {
+  const protagonist = useDuel((state) => state.protagonist!);
+  const awaitedEquipmentDefinitions = use(equipmentDefinitions);
+  const equipmentRows =
+    awaitedEquipmentDefinitions.presets[protagonist.tank.equipment];
+  const equipmentMatrix = useDuel((state) => state.protagonist!.equipment);
+
+  return (
+    <ConfigurationChildWrapper>
+      <Heading size="4">Equipments</Heading>
+
+      <Flex direction="column" gap="2">
+        {equipmentRows.map((equipmentRow, rowIndex) => (
+          <Flex gap="2" key={rowIndex}>
+            {equipmentRow.map((equipment, columnIndex) => (
+              <Flex key={columnIndex}>
+                <EquipmentButton
+                  equipment={equipment[0]}
+                  first
+                  rowChild
+                  selected={equipmentMatrix[rowIndex][columnIndex] === -1}
+                  onClick={() => {
+                    mutateDuel((draft) => {
+                      if (equipmentMatrix[rowIndex][columnIndex] === -1) {
+                        draft.protagonist!.equipment[rowIndex][columnIndex] = 0;
+                      } else {
+                        draft.protagonist!.equipment[rowIndex][columnIndex] =
+                          -1;
+                      }
+                    });
+                  }}
+                />
+                <EquipmentButton
+                  equipment={equipment[1]}
+                  last
+                  rowChild
+                  selected={equipmentMatrix[rowIndex][columnIndex] === 1}
+                  onClick={() => {
+                    mutateDuel((draft) => {
+                      if (equipmentMatrix[rowIndex][columnIndex] === 1) {
+                        draft.protagonist!.equipment[rowIndex][columnIndex] = 0;
+                      } else {
+                        draft.protagonist!.equipment[rowIndex][columnIndex] = 1;
+                      }
+                    });
+                  }}
+                />
+              </Flex>
+            ))}
+          </Flex>
+        ))}
+      </Flex>
+    </ConfigurationChildWrapper>
+  );
+}

src/app/tools/tankopedia/[id]/components/Characteristics/components/Info.tsx

@@ -0,0 +1,95 @@
+import { CaretDownIcon, CaretUpIcon } from '@radix-ui/react-icons';
+import { Flex, Text } from '@radix-ui/themes';
+import { ReactNode } from 'react';
+import { theme } from '../../../../../../../stitches.config';
+
+export interface InfoProps {
+  name: ReactNode;
+  children?: ReactNode;
+  unit?: string;
+  indent?: boolean;
+  highlight?: boolean;
+  delta?: number;
+  decimals?: number;
+  prefix?: string;
+  deltaType?: 'higherIsBetter' | 'lowerIsBetter';
+}
+
+export function Info({
+  name,
+  children,
+  unit,
+  indent = false,
+  highlight,
+  delta,
+  decimals,
+  prefix,
+  deltaType = 'higherIsBetter',
+}: InfoProps) {
+  return (
+    <Flex
+      align="center"
+      style={{ width: '100%', paddingLeft: indent ? 24 : 0 }}
+      gap="4"
+    >
+      <Text color={highlight ? 'amber' : undefined}>
+        {name}
+        {unit != undefined && (
+          <>
+            {' '}
+            <Text color="gray" size="1">
+              {unit}
+            </Text>
+          </>
+        )}
+      </Text>
+
+      {children !== undefined && (
+        <div
+          style={{
+            flex: 1,
+            height: 1,
+            backgroundColor: highlight
+              ? theme.colors.componentCallToActionInteractive_amberAlpha
+              : theme.colors.componentCallToActionInteractive_alpha,
+          }}
+        />
+      )}
+
+      {children !== undefined && (
+        <Flex align="center" gap="1">
+          {delta !== undefined && delta !== 0 && (
+            <>
+              <Text
+                color={
+                  delta * (deltaType === 'lowerIsBetter' ? -1 : 1) > 0
+                    ? 'green'
+                    : 'tomato'
+                }
+              >
+                {decimals !== undefined
+                  ? Math.abs(delta).toFixed(decimals)
+                  : Math.abs(delta)}
+              </Text>
+              <Text
+                color={
+                  delta * (deltaType === 'lowerIsBetter' ? -1 : 1) > 0
+                    ? 'green'
+                    : 'tomato'
+                }
+              >
+                {delta > 0 ? <CaretUpIcon /> : <CaretDownIcon />}
+              </Text>
+            </>
+          )}
+          <Text color={highlight ? 'amber' : undefined}>
+            {prefix}
+            {decimals !== undefined && typeof children === 'number'
+              ? children.toFixed(decimals)
+              : children}
+          </Text>
+        </Flex>
+      )}
+    </Flex>
+  );
+}

src/app/tools/tankopedia/[id]/components/Characteristics/components/InfoWithDelta.tsx

@@ -0,0 +1,16 @@
+import { useDelta } from '../../../../../../../hooks/useDelta';
+import { Info, InfoProps } from './Info';
+
+interface InfoWithDeltaProps extends InfoProps {
+  children: number;
+}
+
+export function InfoWithDelta({ children, ...props }: InfoWithDeltaProps) {
+  const delta = useDelta(children);
+
+  return (
+    <Info {...props} delta={delta}>
+      {children}
+    </Info>
+  );
+}

src/app/tools/tankopedia/[id]/components/Characteristics/components/Miscellaneous.tsx

@@ -0,0 +1,138 @@
+import { Flex, Heading, Slider, TextField } from '@radix-ui/themes';
+import { clamp, debounce } from 'lodash';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { GenericTankComponentButton } from '../../../../../../../components/ModuleButtons/GenericTankComponentButton';
+import { asset } from '../../../../../../../core/blitzkrieg/asset';
+import { mutateDuel, useDuel } from '../../../../../../../stores/duel';
+import { ConfigurationChildWrapper } from './ConfigurationChildWrapper';
+
+export function Miscellaneous() {
+  const camouflage = useDuel((state) => state.protagonist!.camouflage);
+  const cooldownBooster = useDuel(
+    (state) => state.protagonist!.cooldownBooster,
+  );
+  const crewMastery = useDuel((state) => state.protagonist!.crewMastery);
+  const crewInput = useRef<HTMLInputElement>(null);
+  const [crewMasteryDraft, setCrewMasteryDraft] = useState(crewMastery);
+  const { tank } = useDuel((state) => state.protagonist!);
+
+  const debouncedApplyDraft = useMemo(
+    () =>
+      debounce((value) => {
+        mutateDuel((draft) => {
+          draft.protagonist!.crewMastery = value;
+        });
+      }, 500),
+    [],
+  );
+
+  useEffect(() => {
+    setCrewMasteryDraft(crewMastery);
+    if (!crewInput.current) return;
+    crewInput.current.value = `${Math.round(crewMastery * 100)}`;
+  }, [crewMastery]);
+
+  return (
+    <ConfigurationChildWrapper>
+      <Heading size="4">Miscellaneous</Heading>
+
+      <Flex gap="2" align="center">
+        {!tank.fixedCamouflage && (
+          <GenericTankComponentButton
+            icon={asset('icons/camo.webp')}
+            selected={camouflage}
+            iconStyles={{
+              top: '50%',
+              left: '50%',
+              transform: 'translate(calc(-50% + 4px), calc(-50% + 4px))',
+            }}
+            first
+            last
+            onClick={() => {
+              mutateDuel((draft) => {
+                draft.protagonist!.camouflage = !camouflage;
+              });
+            }}
+          />
+        )}
+        <GenericTankComponentButton
+          icon={asset('icons/boosters/equipment.webp')}
+          selected={cooldownBooster > 0}
+          first
+          last
+          banner={
+            cooldownBooster === 0
+              ? undefined
+              : cooldownBooster === 1
+                ? '#afb0abc0'
+                : cooldownBooster === 2
+                  ? '#5f72cbc0'
+                  : '#9b3cc0c0'
+          }
+          iconStyles={{
+            transform: 'translate(-50%, -50%) scale(0.8)',
+          }}
+          onClick={() => {
+            mutateDuel((draft) => {
+              draft.protagonist!.cooldownBooster++;
+              if (draft.protagonist!.cooldownBooster === 4)
+                draft.protagonist!.cooldownBooster = 0;
+            });
+          }}
+        />
+
+        {tank.treeType === 'researchable' && (
+          <Flex
+            align="center"
+            direction="column"
+            gap="1"
+            justify="end"
+            style={{ width: 180 }}
+          >
+            <TextField.Root>
+              <TextField.Slot>Crew</TextField.Slot>
+              <TextField.Input
+                ref={crewInput}
+                defaultValue={Math.round(crewMastery * 100)}
+                style={{ textAlign: 'right' }}
+                onBlur={() => {
+                  const newValue = Number(crewInput.current!.value) / 100;
+
+                  if (isNaN(newValue)) {
+                    crewInput.current!.value = `${Math.round(crewMastery * 100)}`;
+                    return;
+                  }
+
+                  mutateDuel((draft) => {
+                    draft.protagonist!.crewMastery = clamp(
+                      newValue / 100,
+                      0.5,
+                      1,
+                    );
+                  });
+                }}
+                onKeyUp={(event) => {
+                  if (event.key === 'Enter') {
+                    crewInput.current?.blur();
+                  }
+                }}
+              />
+              <TextField.Slot>%</TextField.Slot>
+            </TextField.Root>
+
+            <Slider
+              min={50}
+              max={100}
+              value={[crewMasteryDraft * 100]}
+              style={{ width: '100%' }}
+              onValueChange={([value]) => {
+                setCrewMasteryDraft(value / 100);
+                debouncedApplyDraft(value / 100);
+              }}
+            />
+          </Flex>
+        )}
+      </Flex>
+    </ConfigurationChildWrapper>
+  );
+}

src/app/tools/tankopedia/[id]/components/Characteristics/components/Modules.tsx

@@ -0,0 +1,108 @@
+import { Flex, Heading } from '@radix-ui/themes';
+import { ModuleButton } from '../../../../../../../components/ModuleButtons/ModuleButton';
+import { TIER_ROMAN_NUMERALS } from '../../../../../../../core/blitzkrieg/tankDefinitions/constants';
+import { mutateDuel, useDuel } from '../../../../../../../stores/duel';
+import { mutateTankopediaTemporary } from '../../../../../../../stores/tankopedia';
+import { ConfigurationChildWrapper } from './ConfigurationChildWrapper';
+
+export function Modules() {
+  const protagonist = useDuel((state) => state.protagonist!);
+
+  return (
+    <ConfigurationChildWrapper>
+      <Heading size="4">Modules</Heading>
+
+      <Flex gap="2" wrap="wrap">
+        <Flex>
+          {protagonist.tank.turrets.map((turret, index) => {
+            return (
+              <ModuleButton
+                key={turret.id}
+                selected={protagonist.turret.id === turret.id}
+                module="turret"
+                discriminator={TIER_ROMAN_NUMERALS[turret.tier]}
+                first={index === 0}
+                last={index === protagonist.tank.turrets.length - 1}
+                rowChild
+                onClick={() => {
+                  mutateDuel((draft) => {
+                    draft.protagonist!.turret = turret;
+                    draft.protagonist!.gun = turret.guns.at(-1)!;
+                    draft.protagonist!.shell = turret.guns.at(-1)!.shells[0];
+                  });
+                  mutateTankopediaTemporary((draft) => {
+                    draft.shot = undefined;
+                  });
+                }}
+              />
+            );
+          })}
+        </Flex>
+
+        <Flex>
+          {protagonist.turret.guns.map((gun, index) => {
+            return (
+              <ModuleButton
+                key={gun.id}
+                module="gun"
+                discriminator={TIER_ROMAN_NUMERALS[gun.tier]}
+                selected={protagonist.gun.id === gun.id}
+                first={index === 0}
+                last={index === protagonist.turret.guns.length - 1}
+                rowChild
+                onClick={() => {
+                  mutateDuel((draft) => {
+                    draft.protagonist!.gun = gun;
+                    draft.protagonist!.shell = gun.shells[0];
+                  });
+                }}
+              />
+            );
+          })}
+        </Flex>
+
+        <Flex>
+          {protagonist.tank.engines.map((engine, index) => {
+            return (
+              <ModuleButton
+                key={engine.id}
+                module="engine"
+                discriminator={TIER_ROMAN_NUMERALS[engine.tier]}
+                selected={protagonist.engine.id === engine.id}
+                first={index === 0}
+                last={index === protagonist.tank.engines.length - 1}
+                rowChild
+                onClick={() => {
+                  mutateDuel((draft) => {
+                    draft.protagonist!.engine = engine;
+                  });
+                }}
+              />
+            );
+          })}
+        </Flex>
+
+        <Flex>
+          {protagonist.tank.tracks.map((track, index) => {
+            return (
+              <ModuleButton
+                key={track.id}
+                module="chassis"
+                discriminator={TIER_ROMAN_NUMERALS[track.tier]}
+                selected={protagonist.track.id === track.id}
+                first={index === 0}
+                last={index === protagonist.tank.tracks.length - 1}
+                rowChild
+                onClick={() => {
+                  mutateDuel((draft) => {
+                    draft.protagonist!.track = track;
+                  });
+                }}
+              />
+            );
+          })}
+        </Flex>
+      </Flex>
+    </ConfigurationChildWrapper>
+  );
+}

src/app/tools/tankopedia/[id]/components/Characteristics/components/Provisions.tsx

@@ -0,0 +1,54 @@
+import { Flex, Heading } from '@radix-ui/themes';
+import { use } from 'react';
+import { ProvisionButton } from '../../../../../../../components/ModuleButtons/ProvisionButton';
+import { availableProvisions } from '../../../../../../../core/blitzkrieg/availableProvisions';
+import { provisionDefinitions } from '../../../../../../../core/blitzkrieg/provisionDefinitions';
+import { mutateDuel, useDuel } from '../../../../../../../stores/duel';
+import { ConfigurationChildWrapper } from './ConfigurationChildWrapper';
+
+export function Provisions() {
+  const { tank, gun } = useDuel((state) => state.protagonist!);
+  const provisions = useDuel((state) => state.protagonist!.provisions);
+  const awaitedProvisionDefinitions = use(provisionDefinitions);
+  const provisionsList = availableProvisions(
+    tank,
+    gun,
+    awaitedProvisionDefinitions,
+  );
+
+  return (
+    <ConfigurationChildWrapper>
+      <Heading size="4">Provisions</Heading>
+
+      <Flex wrap="wrap">
+        {provisionsList.map((provision, index) => {
+          const selected = provisions.includes(provision.id);
+
+          return (
+            <ProvisionButton
+              key={provision.id}
+              first={index === 0}
+              last={index === provisionsList.length - 1}
+              rowChild
+              disabled={tank.provisions === provisions.length && !selected}
+              provision={provision.id}
+              selected={selected}
+              onClick={() => {
+                mutateDuel((draft) => {
+                  if (selected) {
+                    draft.protagonist!.provisions =
+                      draft.protagonist!.provisions.filter(
+                        (id) => id !== provision.id,
+                      );
+                  } else {
+                    draft.protagonist!.provisions.push(provision.id);
+                  }
+                });
+              }}
+            />
+          );
+        })}
+      </Flex>
+    </ConfigurationChildWrapper>
+  );
+}

src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx

@@ -0,0 +1,676 @@
+import { AccessibilityIcon } from '@radix-ui/react-icons';
+import { Flex, Heading, Slider, Text, TextField } from '@radix-ui/themes';
+import { debounce } from 'lodash';
+import { use, useEffect, useRef, useState } from 'react';
+import { lerp } from 'three/src/math/MathUtils';
+import { ShellButton } from '../../../../../../components/ModuleButtons/ShellButton';
+import { applyPitchYawLimits } from '../../../../../../core/blitz/applyPitchYawLimits';
+import { isExplosive } from '../../../../../../core/blitz/isExplosive';
+import { resolveNearPenetration } from '../../../../../../core/blitz/resolveNearPenetration';
+import { coefficient } from '../../../../../../core/blitzkrieg/coefficient';
+import { degressiveStat } from '../../../../../../core/blitzkrieg/degressiveStat';
+import { modelDefinitions } from '../../../../../../core/blitzkrieg/modelDefinitions';
+import { normalizeBoundingBox } from '../../../../../../core/blitzkrieg/normalizeBoundingBox';
+import { progressiveStat } from '../../../../../../core/blitzkrieg/progressiveStat';
+import { resolveDpm } from '../../../../../../core/blitzkrieg/resolveDpm';
+import { sum } from '../../../../../../core/blitzkrieg/sum';
+import {
+  CREW_MEMBER_NAMES,
+  GUN_TYPE_NAMES,
+  SHELL_NAMES,
+} from '../../../../../../core/blitzkrieg/tankDefinitions/constants';
+import { unionBoundingBox } from '../../../../../../core/blitzkrieg/unionBoundingBox';
+import { useConsumable } from '../../../../../../hooks/useConsumable';
+import { useEquipment } from '../../../../../../hooks/useEquipment';
+import { useProvision } from '../../../../../../hooks/useProvision';
+import { useProvisions } from '../../../../../../hooks/useProvisions';
+import { mutateDuel, useDuel } from '../../../../../../stores/duel';
+import { Info } from './components/Info';
+import { InfoWithDelta } from './components/InfoWithDelta';
+
+export function Characteristics() {
+  const awaitedModelDefinitions = use(modelDefinitions);
+  const { tank, turret, gun, engine, track, shell } = useDuel(
+    (state) => state.protagonist!,
+  );
+  const hasImprovedVentilation = useEquipment(102);
+  const provisions = useProvisions();
+  const crewMastery = useDuel((state) => state.protagonist!.crewMastery);
+  const provisionCrewBonus =
+    provisions.reduce(
+      (total, provision) =>
+        provision.crew ? total + provision.crew / 100 : total,
+      0,
+    ) + (hasImprovedVentilation ? 0.05 : 0);
+  const commanderMastery = crewMastery + provisionCrewBonus;
+  const crewMemberMastery = commanderMastery * 1.1;
+  const stockEngine = tank.engines[0];
+  const stockTrack = tank.tracks[0];
+  const stockTurret = tank.turrets[0];
+  const stockGun = stockTurret.guns[0];
+  const tankModelDefinition = awaitedModelDefinitions[tank.id];
+  const turretModelDefinition = tankModelDefinition.turrets[turret.id];
+  const gunModelDefinition = turretModelDefinition.guns[gun.id];
+  const size = normalizeBoundingBox(
+    unionBoundingBox(
+      tankModelDefinition.boundingBox,
+      turretModelDefinition.boundingBox,
+    ),
+  );
+  const gunDefaultPitch = tankModelDefinition.turretRotation?.pitch ?? 0;
+  const weight =
+    tank.weight + engine.weight + track.weight + turret.weight + gun.weight;
+  const weightTons = weight / 1000;
+  const stockWeight =
+    tank.weight +
+    stockEngine.weight +
+    stockTrack.weight +
+    stockTurret.weight +
+    stockGun.weight;
+  const [penetrationDistance, setPenetrationDistance] = useState(250);
+  const camouflage = useDuel((state) => state.protagonist!.camouflage);
+  const hasRammer = useEquipment(100);
+  const hasCalibratedShells = useEquipment(103);
+  const hasEnhancedGunLayingDrive = useEquipment(104);
+  const hasSupercharger = useEquipment(107);
+  const hasVerticalStabilizer = useEquipment(105);
+  const hasRefinedGun = useEquipment(106);
+  const hasImprovedAssembly = useEquipment(111);
+  const hasImprovedOptics = useEquipment(114);
+  const hasImprovedControl = useEquipment(116);
+  const hasEngineAccelerator = useEquipment(117);
+  const hasCamouflageNet = useEquipment(115);
+  const hasImprovedVerticalStabilizer = useEquipment(122);
+  const hasImprovedSuspension = useEquipment(123);
+  const penetrationDistanceInput = useRef<HTMLInputElement>(null);
+  const hasEnginePowerBoost = useConsumable(14);
+  const hasImprovedEnginePowerBoost = useConsumable(27);
+  const hasAdrenaline = useConsumable(18);
+  const hasTungsten = useConsumable(45);
+  const hasReticleCalibration = useConsumable(28);
+  const hasShellReloadBoost = useConsumable(29);
+  const hasStandardFuel = useProvision(18);
+  const hasImprovedFuel = useProvision(19);
+  const hasProtectiveKit = useProvision(22);
+  const hasSandbagArmor = useProvision(28);
+  const hasEnhancedSandbagArmor = useProvision(29);
+  const hasImprovedGunPowder = useProvision(46);
+  const hasGearOil = useProvision(44);
+  const hasImprovedGearOil = useProvision(45);
+
+  const healthCoefficient = coefficient(
+    [hasSandbagArmor, 0.03],
+    [hasEnhancedSandbagArmor, 0.06],
+    [hasImprovedAssembly, 0.06],
+  );
+  const reloadCoefficient =
+    (coefficient([hasRammer, -0.07]) *
+      coefficient([true, degressiveStat(crewMemberMastery)])) /
+    coefficient([hasAdrenaline && gun.type === 'regular', 0.2]);
+  const penetrationCoefficient = coefficient([
+    hasCalibratedShells,
+    isExplosive(shell.type) ? 0.1 : 0.05,
+  ]);
+  const damageCoefficient = coefficient(
+    // TODO: add max rolls
+    [hasTungsten, 0.15],
+  );
+  const intraClipCoefficient = coefficient([hasShellReloadBoost, -0.3]);
+  const shellVelocityCoefficient = coefficient(
+    [hasSupercharger, 0.3],
+    [hasImprovedGunPowder, 0.3],
+  );
+  const penetrationLossOverDistanceCoefficient = coefficient([
+    hasSupercharger,
+    -0.5,
+  ]);
+  const aimTimeCoefficient =
+    coefficient(
+      [hasEnhancedGunLayingDrive, -0.1],
+      [hasReticleCalibration, -0.4],
+    ) * coefficient([true, degressiveStat(crewMemberMastery)]);
+  const dispersionStillCoefficient =
+    coefficient([hasRefinedGun, -0.1], [hasReticleCalibration, -0.4]) *
+    coefficient([true, degressiveStat(crewMemberMastery)]);
+  const dispersionMovingCoefficient = coefficient([
+    hasVerticalStabilizer,
+    -0.15,
+  ]);
+  const enginePowerCoefficient = coefficient(
+    [
+      hasEngineAccelerator &&
+        (tank.class === 'lightTank' || tank.class === 'mediumTank'),
+      0.05,
+    ],
+    [
+      hasEngineAccelerator &&
+        (tank.class === 'heavyTank' || tank.class === 'AT-SPG'),
+      0.07,
+    ],
+    [hasEnginePowerBoost, 0.2],
+    [hasImprovedEnginePowerBoost, 0.4],
+    [hasStandardFuel, 0.03],
+    [hasImprovedFuel, 0.1],
+    [hasGearOil, 0.03],
+    [hasImprovedGearOil, 0.06],
+  );
+  const turretTraverseCoefficient =
+    coefficient([hasStandardFuel, 0.03], [hasImprovedFuel, 0.1]) *
+    coefficient([true, progressiveStat(crewMemberMastery)]);
+  const hullTraverseCoefficient =
+    coefficient(
+      [hasImprovedControl, 0.1],
+      [hasImprovedEnginePowerBoost, 0.05],
+    ) * coefficient([true, progressiveStat(crewMemberMastery)]);
+  const resistanceCoefficient = coefficient([hasImprovedSuspension, -0.25]);
+  const viewRangeCoefficient =
+    coefficient([
+      hasImprovedOptics,
+      tank.class === 'AT-SPG' ? 0.05 : tank.class === 'heavyTank' ? 0.07 : 0.1,
+    ]) * coefficient([true, progressiveStat(commanderMastery)]);
+  const fireChanceCoefficient = coefficient([hasProtectiveKit, -0.2]);
+
+  const speedForwardsSum = sum(
+    [hasImprovedEnginePowerBoost, 5],
+    [hasGearOil, 2],
+    [hasImprovedGearOil, 4],
+  );
+  const speedBackwardsSum = sum(
+    [hasImprovedEnginePowerBoost, 10],
+    [hasGearOil, 2],
+    [hasImprovedGearOil, 4],
+  );
+  const camouflageSumMoving = sum(
+    [
+      hasCamouflageNet,
+      tank.class === 'heavyTank' ? 0.03 : tank.class === 'AT-SPG' ? 0.07 : 0.05,
+    ],
+    [
+      camouflage,
+      tank.class === 'AT-SPG' ? 0.04 : tank.class === 'heavyTank' ? 0.03 : 0.02,
+    ],
+  );
+  const camouflageSumStill = sum(
+    [
+      hasCamouflageNet,
+      2 *
+        (tank.class === 'heavyTank'
+          ? 0.03
+          : tank.class === 'AT-SPG'
+            ? 0.07
+            : 0.05),
+    ],
+    [
+      camouflage,
+      tank.class === 'AT-SPG' ? 0.04 : tank.class === 'heavyTank' ? 0.03 : 0.02,
+    ],
+  );
+
+  const resolvedEnginePower = engine.power * enginePowerCoefficient;
+  const dpm = resolveDpm(
+    gun,
+    shell,
+    damageCoefficient,
+    reloadCoefficient,
+    intraClipCoefficient,
+  );
+
+  useEffect(() => {
+    if (penetrationDistanceInput.current) {
+      penetrationDistanceInput.current.value = `${penetrationDistance}`;
+    }
+  }, [penetrationDistance]);
+  useEffect(() => {
+    mutateDuel((draft) => {
+      [draft.protagonist!.pitch, draft.protagonist!.yaw] = applyPitchYawLimits(
+        draft.protagonist!.pitch,
+        draft.protagonist!.yaw,
+        gunModelDefinition.pitch,
+        turretModelDefinition.yaw,
+        hasImprovedVerticalStabilizer,
+      );
+    });
+  }, [hasImprovedVerticalStabilizer]);
+
+  return (
+    <Flex direction="column" gap="8" style={{ width: '100%' }}>
+      <Flex direction="column" gap="2">
+        <Flex align="center" gap="4">
+          <Heading size="5">Fire</Heading>
+
+          <Flex>
+            {gun.shells.map((thisShell, index) => {
+              return (
+                <ShellButton
+                  key={thisShell.id}
+                  shell={thisShell.icon}
+                  discriminator={SHELL_NAMES[thisShell.type]}
+                  selected={thisShell.id === shell.id}
+                  first={index === 0}
+                  last={index === gun.shells.length - 1}
+                  rowChild
+                  onClick={() => {
+                    mutateDuel((draft) => {
+                      draft.protagonist!.shell = thisShell;
+                    });
+                  }}
+                />
+              );
+            })}
+          </Flex>
+        </Flex>
+
+        <Info name="Gun type">{GUN_TYPE_NAMES[gun.type]}</Info>
+        <InfoWithDelta name="DPM" decimals={0} unit="hp / min">
+          {dpm}
+        </InfoWithDelta>
+        {gun.type === 'autoReloader' && (
+          <>
+            <InfoWithDelta decimals={0} indent name="Maximum" unit="hp / min">
+              {gun.reload.at(-1)! < gun.reload.at(-2)!
+                ? ((damageCoefficient * shell.damage.armor) /
+                    (gun.reload.at(-1)! * reloadCoefficient +
+                      gun.intraClip * intraClipCoefficient)) *
+                  60
+                : ((damageCoefficient * shell.damage.armor) /
+                    (gun.reload[0] * reloadCoefficient)) *
+                  60}
+            </InfoWithDelta>
+            <InfoWithDelta
+              decimals={0}
+              indent
+              name="Effective at 60s"
+              unit="hp / min"
+            >
+              {gun.reload.at(-1)! < gun.reload.at(-2)!
+                ? ((damageCoefficient * shell.damage.armor) /
+                    (gun.reload.at(-1)! * reloadCoefficient +
+                      gun.intraClip * intraClipCoefficient)) *
+                    (60 -
+                      (gun.reload.slice(0, -1).length - 1) *
+                        gun.intraClip *
+                        intraClipCoefficient) +
+                  damageCoefficient *
+                    shell.damage.armor *
+                    gun.reload.slice(0, -1).length
+                : ((damageCoefficient * shell.damage.armor) /
+                    (gun.reload[0] * reloadCoefficient +
+                      gun.intraClip * intraClipCoefficient)) *
+                    (60 -
+                      (gun.reload.slice(1).length - 1) *
+                        gun.intraClip *
+                        intraClipCoefficient) +
+                  damageCoefficient *
+                    shell.damage.armor *
+                    gun.reload.slice(1).length}
+            </InfoWithDelta>
+            <Info
+              indent
+              name={
+                <a
+                  target="_blank"
+                  href="https://tresabhi.github.io/blitzkrieg/guide/dpm.html"
+                >
+                  What's the difference?
+                </a>
+              }
+            />
+          </>
+        )}
+        {gun.type === 'autoReloader' ? (
+          <>
+            <InfoWithDelta name="Shells">{gun.reload.length}</InfoWithDelta>
+            <Info indent name="Most optimal">
+              {gun.reload.at(-1)! < gun.reload.at(-2)! ? gun.reload.length : 1}
+            </Info>
+            <Info name="Shell reloads" unit="s" />
+            {gun.reload.map((reload, index) => (
+              <InfoWithDelta
+                key={index}
+                indent
+                name={`Shell ${index + 1}`}
+                decimals={2}
+                deltaType="lowerIsBetter"
+              >
+                {reload * reloadCoefficient}
+              </InfoWithDelta>
+            ))}
+          </>
+        ) : (
+          <InfoWithDelta
+            decimals={2}
+            name="Reload"
+            unit="s"
+            deltaType="lowerIsBetter"
+          >
+            {gun.reload * reloadCoefficient}
+          </InfoWithDelta>
+        )}
+        {gun.type === 'autoLoader' ||
+          (gun.type === 'autoReloader' && (
+            <InfoWithDelta
+              indent
+              decimals={2}
+              name="Intra-clip"
+              unit="s"
+              deltaType="lowerIsBetter"
+            >
+              {gun.intraClip * intraClipCoefficient}
+            </InfoWithDelta>
+          ))}
+        <InfoWithDelta name="Caliber" decimals={0} unit="mm">
+          {shell.caliber}
+        </InfoWithDelta>
+        <InfoWithDelta decimals={0} name="Penetration" unit="mm">
+          {resolveNearPenetration(shell.penetration) * penetrationCoefficient}
+        </InfoWithDelta>
+        {typeof shell.penetration !== 'number' && (
+          <>
+            <InfoWithDelta
+              indent
+              decimals={0}
+              name={`At ${penetrationDistance}m`}
+            >
+              {lerp(
+                shell.penetration[0],
+                shell.penetration[1],
+                (penetrationDistance * penetrationLossOverDistanceCoefficient) /
+                  500,
+              ) * penetrationCoefficient}
+            </InfoWithDelta>
+            <Flex align="center" gap="2" style={{ paddingLeft: 24 }}>
+              <Text>Distance</Text>
+              <Slider
+                key={penetrationDistance}
+                min={0}
+                max={500}
+                style={{ flex: 1 }}
+                defaultValue={[penetrationDistance]}
+                onValueChange={debounce(([value]) => {
+                  setPenetrationDistance(value);
+                }, 500)}
+              />
+              <TextField.Root style={{ width: 64 }}>
+                <TextField.Input
+                  ref={penetrationDistanceInput}
+                  defaultValue={penetrationDistance}
+                  onBlur={() => {
+                    setPenetrationDistance(
+                      Math.min(
+                        parseInt(penetrationDistanceInput.current!.value),
+                        500,
+                      ),
+                    );
+                  }}
+                  onKeyDown={(event) => {
+                    if (event.key === 'Enter') {
+                      event.currentTarget.blur();
+                    }
+                  }}
+                />
+                <TextField.Slot>m</TextField.Slot>
+              </TextField.Root>
+            </Flex>
+          </>
+        )}
+        <InfoWithDelta name="Damage" unit="hp" decimals={0}>
+          {shell.damage.armor * damageCoefficient}
+        </InfoWithDelta>
+        <InfoWithDelta name="Module damage" unit="hp" decimals={0}>
+          {shell.damage.module * damageCoefficient}
+        </InfoWithDelta>
+        <InfoWithDelta name="Shell velocity" unit="m/s" decimals={0}>
+          {shell.speed * shellVelocityCoefficient}
+        </InfoWithDelta>
+        <InfoWithDelta
+          decimals={2}
+          name="Aim time"
+          unit="s"
+          deltaType="lowerIsBetter"
+        >
+          {gun.aimTime * aimTimeCoefficient}
+        </InfoWithDelta>
+        <Info name="Dispersion at 100m" />
+        <InfoWithDelta
+          decimals={3}
+          indent
+          name="Still"
+          unit="m"
+          deltaType="lowerIsBetter"
+        >
+          {gun.dispersion.base * dispersionStillCoefficient}
+        </InfoWithDelta>
+        <InfoWithDelta
+          prefix="+ "
+          decimals={3}
+          indent
+          name="Moving"
+          deltaType="lowerIsBetter"
+        >
+          {track.dispersion.move * dispersionMovingCoefficient}
+        </InfoWithDelta>
+        <InfoWithDelta
+          decimals={3}
+          prefix="+ "
+          indent
+          name="Hull traversing"
+          deltaType="lowerIsBetter"
+        >
+          {track.dispersion.traverse * dispersionMovingCoefficient}
+        </InfoWithDelta>
+        <InfoWithDelta
+          decimals={3}
+          prefix="+ "
+          indent
+          name="Turret traversing"
+          deltaType="lowerIsBetter"
+        >
+          {gun.dispersion.traverse * dispersionMovingCoefficient}
+        </InfoWithDelta>
+        <InfoWithDelta
+          decimals={3}
+          prefix="+ "
+          indent
+          name="After shooting"
+          deltaType="lowerIsBetter"
+        >
+          {gun.dispersion.shot * dispersionMovingCoefficient}
+        </InfoWithDelta>
+        <InfoWithDelta
+          decimals={1}
+          prefix="x "
+          indent
+          name="Gun damaged"
+          unit="scalar"
+          deltaType="lowerIsBetter"
+        >
+          {gun.dispersion.damaged * dispersionMovingCoefficient}
+        </InfoWithDelta>
+        <Info name="Gun flexibility" unit="°" />
+        <InfoWithDelta decimals={1} indent name="Depression">
+          {gunModelDefinition.pitch.max +
+            gunDefaultPitch +
+            (hasImprovedVerticalStabilizer ? 3 : 0)}
+        </InfoWithDelta>
+        <InfoWithDelta decimals={1} indent name="Elevation">
+          {-gunModelDefinition.pitch.min -
+            gunDefaultPitch +
+            (hasImprovedVerticalStabilizer ? 3 : 0)}
+        </InfoWithDelta>
+        {gunModelDefinition.pitch.front && (
+          <>
+            <InfoWithDelta decimals={1} indent name="Frontal depression">
+              {gunModelDefinition.pitch.front.max}
+            </InfoWithDelta>
+            <InfoWithDelta decimals={1} indent name="Frontal elevation">
+              {-gunModelDefinition.pitch.front.min}
+            </InfoWithDelta>
+          </>
+        )}
+        {gunModelDefinition.pitch.back && (
+          <>
+            <InfoWithDelta decimals={1} indent name="Rear depression">
+              {gunModelDefinition.pitch.back.max}
+            </InfoWithDelta>
+            <InfoWithDelta decimals={1} indent name="Rear elevation">
+              {-gunModelDefinition.pitch.back.min}
+            </InfoWithDelta>
+          </>
+        )}
+        {turretModelDefinition.yaw && (
+          <>
+            <InfoWithDelta decimals={1} indent name="Azimuth left">
+              {-turretModelDefinition.yaw.min}
+            </InfoWithDelta>
+            <InfoWithDelta decimals={1} indent name="Azimuth right">
+              {turretModelDefinition.yaw.max}
+            </InfoWithDelta>
+          </>
+        )}
+      </Flex>
+
+      <Flex direction="column" gap="2">
+        <Heading size="5">Maneuverability</Heading>
+        <Info name="Speed" unit="km/hr" />
+        <InfoWithDelta decimals={0} indent name="Forwards">
+          {tank.speed.forwards + speedForwardsSum}
+        </InfoWithDelta>
+        <InfoWithDelta decimals={0} indent name="Backwards">
+          {tank.speed.backwards + speedBackwardsSum}
+        </InfoWithDelta>
+        <InfoWithDelta decimals={0} name="Power" unit="hp">
+          {resolvedEnginePower}
+        </InfoWithDelta>
+        <Info name="Power to weight ratio" unit="hp/tn" />
+        <InfoWithDelta decimals={1} indent name="On hard terrain">
+          {resolvedEnginePower /
+            weightTons /
+            (track.resistance.hard * resistanceCoefficient)}
+        </InfoWithDelta>
+        <InfoWithDelta decimals={1} indent name="On medium terrain">
+          {resolvedEnginePower /
+            weightTons /
+            (track.resistance.medium * resistanceCoefficient)}
+        </InfoWithDelta>
+        <InfoWithDelta decimals={1} indent name="On soft terrain">
+          {resolvedEnginePower /
+            weightTons /
+            (track.resistance.soft * resistanceCoefficient)}
+        </InfoWithDelta>
+        <InfoWithDelta
+          decimals={1}
+          name="Weight"
+          unit="tn"
+          deltaType="lowerIsBetter"
+        >
+          {weightTons}
+        </InfoWithDelta>
+        <InfoWithDelta name="Turret traverse speed" unit="°/s" decimals={0}>
+          {turret.traverseSpeed * turretTraverseCoefficient}
+        </InfoWithDelta>
+        <Info name="Effective traverse speed" unit="°/s" />
+        <InfoWithDelta decimals={1} indent name="On hard terrain">
+          {(resolvedEnginePower / stockEngine.power) *
+            track.traverseSpeed *
+            hullTraverseCoefficient *
+            (track.resistance.hard /
+              (track.resistance.hard * resistanceCoefficient)) *
+            (stockWeight / weight)}
+        </InfoWithDelta>
+        <InfoWithDelta decimals={1} indent name="On medium terrain">
+          {(resolvedEnginePower / stockEngine.power) *
+            track.traverseSpeed *
+            hullTraverseCoefficient *
+            (track.resistance.hard /
+              (track.resistance.medium * resistanceCoefficient)) *
+            (stockWeight / weight)}
+        </InfoWithDelta>
+        <InfoWithDelta decimals={1} indent name="On soft terrain">
+          {(resolvedEnginePower / stockEngine.power) *
+            track.traverseSpeed *
+            hullTraverseCoefficient *
+            (track.resistance.hard /
+              (track.resistance.soft * resistanceCoefficient)) *
+            (stockWeight / weight)}
+        </InfoWithDelta>
+      </Flex>
+
+      <Flex direction="column" gap="2">
+        <Heading size="5">Survivability</Heading>
+        <InfoWithDelta name="Health" unit="hp" decimals={0}>
+          {(tank.health + turret.health) * healthCoefficient}
+        </InfoWithDelta>
+        <InfoWithDelta name="Fire chance" unit="%" deltaType="lowerIsBetter">
+          {Math.round(engine.fireChance * fireChanceCoefficient * 100)}
+        </InfoWithDelta>
+        <InfoWithDelta name="View range" unit="m" decimals={0}>
+          {turret.viewRange * viewRangeCoefficient}
+        </InfoWithDelta>
+        <Info name="Camouflage" unit="%" />
+        <InfoWithDelta indent name="Still" decimals={2}>
+          {(tank.camouflage.still + camouflageSumStill) * 100}
+        </InfoWithDelta>
+        <InfoWithDelta indent name="Moving" decimals={2}>
+          {(tank.camouflage.moving + camouflageSumMoving) * 100}
+        </InfoWithDelta>
+        <InfoWithDelta indent name="Shooting still" decimals={2}>
+          {(tank.camouflage.still * gun.camouflageLoss + camouflageSumStill) *
+            100}
+        </InfoWithDelta>
+        <InfoWithDelta indent name="Shooting on move" decimals={2}>
+          {(tank.camouflage.moving * gun.camouflageLoss + camouflageSumMoving) *
+            100}
+        </InfoWithDelta>
+        <InfoWithDelta indent name="Caught on fire" decimals={2}>
+          {(tank.camouflage.onFire * tank.camouflage.still +
+            camouflageSumStill) *
+            100}
+        </InfoWithDelta>
+        <Info name="Size" unit="m">
+          {size[0].toFixed(2)} x {size[2].toFixed(2)} x {size[1].toFixed(2)}
+        </Info>
+      </Flex>
+
+      <Flex direction="column" gap="2">
+        <Heading size="5">Crew training</Heading>
+
+        {tank.crew.map((member) => {
+          const count = member.count ?? 1;
+
+          return (
+            <>
+              <InfoWithDelta
+                key={`${member.type}-root`}
+                name={`${CREW_MEMBER_NAMES[member.type]}${count > 1 ? ` x ${count}` : ''}`}
+                unit="%"
+                decimals={0}
+              >
+                {(member.type === 'commander'
+                  ? commanderMastery
+                  : crewMemberMastery) * 100}
+              </InfoWithDelta>
+              {member.substitute && (
+                <Info
+                  key={`${member.type}-substitute`}
+                  indent
+                  name={
+                    <>
+                      <Flex align="center" gap="1">
+                        <AccessibilityIcon />
+                        {member.substitute
+                          .map((sub, index) =>
+                            index === 0 ? CREW_MEMBER_NAMES[sub] : sub,
+                          )
+                          .join(', ')}
+                      </Flex>
+                    </>
+                  }
+                />
+              )}
+            </>
+          );
+        })}
+      </Flex>
+    </Flex>
+  );
+}

src/app/tools/tankopedia/[id]/components/Control.tsx

@@ -0,0 +1,170 @@
+import { OrbitControls } from '@react-three/drei';
+import { useThree } from '@react-three/fiber';
+import { useEffect, useRef } from 'react';
+import { Vector3 } from 'three';
+import { OrbitControls as OrbitControlsClass } from 'three-stdlib';
+import { applyPitchYawLimits } from '../../../../../core/blitz/applyPitchYawLimits';
+import { hasEquipment } from '../../../../../core/blitzkrieg/hasEquipment';
+import { modelDefinitions } from '../../../../../core/blitzkrieg/modelDefinitions';
+import { Pose, poseEvent } from '../../../../../core/blitzkrieg/pose';
+import { useAwait } from '../../../../../hooks/useAwait';
+import { useDuel } from '../../../../../stores/duel';
+import { useTankopediaPersistent } from '../../../../../stores/tankopedia';
+
+const poseDistances: Record<Pose, number> = {
+  [Pose.HullDown]: 15,
+  [Pose.FaceHug]: 5,
+  [Pose.Default]: -1,
+};
+
+export function Controls() {
+  const camera = useThree((state) => state.camera);
+  const orbitControls = useRef<OrbitControlsClass>(null);
+  const awaitedModelDefinitions = useAwait(modelDefinitions);
+  const protagonist = useDuel((state) => state.protagonist!);
+  const antagonist = useDuel((state) => state.antagonist!);
+  const protagonistModelDefinition =
+    awaitedModelDefinitions[protagonist.tank.id];
+  const protagonistTrackModelDefinition =
+    awaitedModelDefinitions[protagonist.tank.id].tracks[protagonist.track.id];
+  const antagonistModelDefinition = awaitedModelDefinitions[antagonist.tank.id];
+  const protagonistTurretModelDefinition =
+    protagonistModelDefinition.turrets[protagonist.turret.id];
+  const antagonistTurretModelDefinition =
+    antagonistModelDefinition.turrets[antagonist.turret.id];
+  const protagonistGunModelDefinition =
+    protagonistTurretModelDefinition.guns[protagonist.gun.id];
+  const protagonistHullOrigin = new Vector3(
+    protagonistTrackModelDefinition.origin[0],
+    protagonistTrackModelDefinition.origin[1],
+    -protagonistTrackModelDefinition.origin[2],
+  );
+  const protagonistTurretOrigin = new Vector3(
+    protagonistModelDefinition.turretOrigin[0],
+    protagonistModelDefinition.turretOrigin[1],
+    -protagonistModelDefinition.turretOrigin[2],
+  );
+  const protagonistGunOrigin = new Vector3(
+    protagonistTurretModelDefinition.gunOrigin[0],
+    protagonistTurretModelDefinition.gunOrigin[1],
+    -protagonistTurretModelDefinition.gunOrigin[2],
+  );
+  const antagonistGunHeight =
+    protagonistTrackModelDefinition.origin[1] +
+    antagonistModelDefinition.turretOrigin[1] +
+    antagonistTurretModelDefinition.gunOrigin[1];
+  // const hasSetInitialPose = useRef(false);
+
+  useEffect(() => {
+    camera.position.set(-4, 4, -16);
+    orbitControls.current?.target.set(0, 1.25, 0);
+  }, [camera]);
+
+  useEffect(() => {
+    const unsubscribeTankopedia = useTankopediaPersistent.subscribe(
+      (state) => state.model.visual.controlsEnabled,
+      (enabled) => {
+        if (orbitControls.current) orbitControls.current.enabled = enabled;
+      },
+    );
+
+    async function handlePoseEvent(event: Pose) {
+      const hasImprovedVerticalStabilizer = await hasEquipment(122);
+
+      switch (event) {
+        case Pose.HullDown: {
+          const [pitch] = applyPitchYawLimits(
+            -Infinity,
+            0,
+            protagonistGunModelDefinition.pitch,
+            protagonistTurretModelDefinition.yaw,
+            hasImprovedVerticalStabilizer,
+          );
+
+          camera.position
+            .set(0, 0, 0)
+            .add(protagonistHullOrigin)
+            .add(protagonistTurretOrigin)
+            .add(protagonistGunOrigin)
+            .add(
+              new Vector3(
+                0,
+                poseDistances[event] * Math.sin(pitch),
+                poseDistances[event] * -Math.cos(pitch),
+              ),
+            );
+          camera.lookAt(
+            protagonistHullOrigin
+              .clone()
+              .add(protagonistTurretOrigin)
+              .add(protagonistGunOrigin),
+          );
+          orbitControls.current?.target.set(0, antagonistGunHeight, 0);
+
+          break;
+        }
+
+        case Pose.FaceHug: {
+          const [pitch] = applyPitchYawLimits(
+            0,
+            0,
+            protagonistGunModelDefinition.pitch,
+            protagonistTurretModelDefinition.yaw,
+            hasImprovedVerticalStabilizer,
+          );
+
+          camera.position
+            .set(0, 0, 0)
+            .add(protagonistHullOrigin)
+            .add(protagonistTurretOrigin)
+            .add(protagonistGunOrigin)
+            .add(
+              new Vector3(
+                0,
+                poseDistances[event] * Math.sin(pitch),
+                poseDistances[event] * -Math.cos(pitch),
+              ),
+            );
+          orbitControls.current?.target
+            .set(0, 0, 0)
+            .add(protagonistHullOrigin)
+            .add(protagonistTurretOrigin)
+            .add(protagonistGunOrigin)
+            .add(
+              new Vector3(
+                0,
+                0.5 * poseDistances[event] * Math.sin(pitch),
+                0.5 * poseDistances[event] * -Math.cos(pitch),
+              ),
+            );
+
+          break;
+        }
+
+        case Pose.Default: {
+          camera.position.set(-4, 4, -16);
+          orbitControls.current?.target.set(0, 1.25, 0);
+          break;
+        }
+      }
+    }
+
+    poseEvent.on(handlePoseEvent);
+
+    return () => {
+      unsubscribeTankopedia();
+      poseEvent.off(handlePoseEvent);
+    };
+  }, [camera, protagonist.tank.id, antagonist.tank.id]);
+
+  return (
+    <OrbitControls
+      maxDistance={20}
+      minDistance={5}
+      ref={orbitControls}
+      enabled={useTankopediaPersistent.getState().model.visual.controlsEnabled}
+      rotateSpeed={0.25}
+      enableDamping={false}
+    />
+  );
+}

src/app/tools/tankopedia/[id]/components/Lighting.tsx

@@ -0,0 +1,41 @@
+import { Environment } from '@react-three/drei';
+import { useModel } from '../../../../../hooks/useModel';
+import { useDuel } from '../../../../../stores/duel';
+import { useTankopediaPersistent } from '../../../../../stores/tankopedia';
+
+export const ENVIRONMENTS = [
+  'lobby',
+  'apartment',
+  'warehouse',
+  'dawn',
+  'sunset',
+] as const;
+
+export function Lighting() {
+  const protagonist = useDuel((state) => state.protagonist!);
+  const { hasPbr } = useModel(protagonist.tank.id);
+  const showEnvironment = useTankopediaPersistent(
+    (state) => state.model.visual.showEnvironment,
+  );
+  const environment = useTankopediaPersistent(
+    (state) => state.model.visual.environment,
+  );
+
+  return (
+    <>
+      <Environment preset={environment} background={showEnvironment} blur={0} />
+      <directionalLight
+        position={[1, 1, -1]}
+        intensity={hasPbr ? 1 : 5}
+        castShadow
+        color={'rgb(225, 225, 255)'}
+      />
+      <directionalLight
+        position={[-1, 1, 1]}
+        intensity={hasPbr ? 1 : 4}
+        castShadow
+        color={'rgb(240, 255, 240)'}
+      />
+    </>
+  );
+}

src/app/tools/tankopedia/[id]/components/Model/TankSandbox.tsx

@@ -0,0 +1,262 @@
+import { LightningBoltIcon } from '@radix-ui/react-icons';
+import { Button, Card, Flex, Tabs, Theme } from '@radix-ui/themes';
+import { PerspectiveCamera } from '@react-three/drei';
+import { Canvas } from '@react-three/fiber';
+import { Suspense, use, useEffect, useRef, useState } from 'react';
+import { isMobile } from 'react-device-detect';
+import { Armor } from '../../../../../../components/Armor';
+import { ShotDisplay } from '../../../../../../components/Armor/components/ShotDisplay';
+import { applyPitchYawLimits } from '../../../../../../core/blitz/applyPitchYawLimits';
+import { modelDefinitions } from '../../../../../../core/blitzkrieg/modelDefinitions';
+import { modelTransformEvent } from '../../../../../../core/blitzkrieg/modelTransform';
+import { Pose, poseEvent } from '../../../../../../core/blitzkrieg/pose';
+import { tankIcon } from '../../../../../../core/blitzkrieg/tankIcon';
+import { useEquipment } from '../../../../../../hooks/useEquipment';
+import { useWideFormat } from '../../../../../../hooks/useWideFormat';
+import { mutateDuel, useDuel } from '../../../../../../stores/duel';
+import mutateTankopediaPersistent, {
+  TankopediaMode,
+  mutateTankopediaTemporary,
+  useTankopediaPersistent,
+} from '../../../../../../stores/tankopedia';
+import { AntagonistBar } from '../AntagonistBar';
+import { Controls } from '../Control';
+import { Lighting } from '../Lighting';
+import { RotationInputs } from '../QuickInputs';
+import { SceneProps } from '../SceneProps';
+import { ModelLoader } from './components/ModelLoader';
+import { Options } from './components/Options';
+import { TankModel } from './components/TankModel';
+
+export function TankSandbox() {
+  const canvas = useRef<HTMLCanvasElement>(null);
+  const hasImprovedVerticalStabilizer = useEquipment(122);
+  const awaitedModelDefinitions = use(modelDefinitions);
+  const canvasWrapper = useRef<HTMLDivElement>(null);
+  const [isFullScreen, setIsFullScreen] = useState(false);
+  const mode = useTankopediaPersistent((state) => state.mode);
+  const protagonist = useDuel((state) => state.protagonist!);
+  const tankModelDefinition = awaitedModelDefinitions[protagonist.tank.id];
+  const turretModelDefinition =
+    tankModelDefinition.turrets[protagonist.turret.id];
+  const gunModelDefinition = turretModelDefinition.guns[protagonist.gun.id];
+  const wideFormat = useWideFormat();
+  const [loadModel, setLoadModel] = useState(wideFormat || !isMobile);
+  const duel = useDuel();
+
+  function handlePointerDown() {
+    window.addEventListener('pointermove', handlePointerMove);
+    window.addEventListener('pointerup', handlePointerUp);
+  }
+  function handlePointerMove(event: PointerEvent) {
+    event.preventDefault();
+  }
+  function handlePointerUp(event: PointerEvent) {
+    event.preventDefault();
+
+    window.removeEventListener('pointermove', handlePointerMove);
+    window.removeEventListener('pointerup', handlePointerUp);
+  }
+
+  useEffect(() => {
+    function handleFullScreenChange() {
+      setIsFullScreen(document.fullscreenElement !== null);
+    }
+
+    function handlePoseEvent(pose: Pose) {
+      switch (pose) {
+        case Pose.HullDown: {
+          mutateDuel((draft) => {
+            const [pitch, yaw] = applyPitchYawLimits(
+              -Infinity,
+              0,
+              gunModelDefinition.pitch,
+              turretModelDefinition.yaw,
+              hasImprovedVerticalStabilizer,
+            );
+
+            modelTransformEvent.emit({ pitch, yaw });
+            draft.protagonist!.pitch = pitch;
+            draft.protagonist!.yaw = yaw;
+          });
+
+          break;
+        }
+
+        case Pose.FaceHug: {
+          mutateDuel((draft) => {
+            const [pitch, yaw] = applyPitchYawLimits(
+              Infinity,
+              0,
+              gunModelDefinition.pitch,
+              turretModelDefinition.yaw,
+              hasImprovedVerticalStabilizer,
+            );
+
+            modelTransformEvent.emit({ pitch, yaw });
+            draft.protagonist!.pitch = pitch;
+            draft.protagonist!.yaw = yaw;
+          });
+
+          break;
+        }
+
+        case Pose.Default:
+          mutateDuel((draft) => {
+            const [pitch, yaw] = applyPitchYawLimits(
+              0,
+              0,
+              gunModelDefinition.pitch,
+              turretModelDefinition.yaw,
+              hasImprovedVerticalStabilizer,
+            );
+
+            modelTransformEvent.emit({ pitch, yaw });
+            draft.protagonist!.pitch = pitch;
+            draft.protagonist!.yaw = yaw;
+          });
+
+          break;
+      }
+    }
+
+    poseEvent.on(handlePoseEvent);
+    document.addEventListener('fullscreenchange', handleFullScreenChange);
+
+    return () => {
+      document.removeEventListener('fullscreenchange', handleFullScreenChange);
+      poseEvent.off(handlePoseEvent);
+    };
+  });
+
+  useEffect(() => {
+    mutateDuel((draft) => {
+      [draft.protagonist!.pitch, draft.protagonist!.yaw] = applyPitchYawLimits(
+        draft.protagonist!.pitch,
+        draft.protagonist!.yaw,
+        gunModelDefinition.pitch,
+        turretModelDefinition.yaw,
+        hasImprovedVerticalStabilizer,
+      );
+    });
+  }, [protagonist.gun, protagonist.turret]);
+
+  return (
+    <Theme radius={isFullScreen ? 'none' : undefined}>
+      <Card
+        style={{
+          position: 'relative',
+          border: isFullScreen ? 'none' : 'unset',
+        }}
+        ref={canvasWrapper}
+      >
+        <Theme radius="full" style={{ height: '100%' }}>
+          <Flex
+            style={{
+              height: isFullScreen ? '100%' : '75vh',
+              maxHeight: isFullScreen ? 'unset' : 576,
+            }}
+            direction="column"
+            gap="2"
+          >
+            <Tabs.Root
+              value={mode}
+              onValueChange={(mode) => {
+                mutateTankopediaPersistent((draft) => {
+                  draft.mode = mode as TankopediaMode;
+                });
+              }}
+            >
+              <Tabs.List>
+                <Tabs.Trigger value="model">
+                  <Flex gap="2" align="center">
+                    Model
+                  </Flex>
+                </Tabs.Trigger>
+                <Tabs.Trigger value="armor">Armor</Tabs.Trigger>
+              </Tabs.List>
+            </Tabs.Root>
+
+            <div
+              style={{
+                height: 'calc(100% - 64px)',
+                position: 'absolute',
+                width: '100%',
+                bottom: 0,
+              }}
+            >
+              {loadModel ? (
+                <div style={{ width: '100%', height: '100%' }}>
+                  <Canvas
+                    shadows
+                    ref={canvas}
+                    onPointerDown={handlePointerDown}
+                    onPointerMissed={() => {
+                      mutateTankopediaTemporary((draft) => {
+                        draft.shot = undefined;
+                      });
+                    }}
+                  >
+                    <PerspectiveCamera makeDefault fov={25} far={32} />
+                    <Controls />
+                    <SceneProps />
+
+                    <Suspense fallback={<ModelLoader />}>
+                      {/* TODO: add rotation cube to the top right */}
+                      <Lighting />
+                      <TankModel />
+                      <Armor />
+                      <ShotDisplay />
+                    </Suspense>
+                  </Canvas>
+                </div>
+              ) : (
+                <Flex
+                  align="center"
+                  justify="center"
+                  style={{ height: '100%', position: 'relative' }}
+                >
+                  <Button
+                    style={{
+                      zIndex: 1,
+                    }}
+                    onClick={() => {
+                      setLoadModel(true);
+                    }}
+                  >
+                    <LightningBoltIcon /> Load model
+                  </Button>
+
+                  <Flex
+                    style={{
+                      filter: 'blur(16px)',
+                      width: 256,
+                      height: 128,
+                      display: 'flex',
+                      position: 'absolute',
+                      top: '50%',
+                      left: '50%',
+                      transformOrigin: 'center center',
+                      transform: 'translate(25%, -25%) scale(300%)',
+                    }}
+                  >
+                    <img src={tankIcon(duel.antagonist!.tank.id, 'big')} />
+                  </Flex>
+                </Flex>
+              )}
+            </div>
+
+            <Options
+              canvasWrapper={canvasWrapper}
+              isFullScreen={isFullScreen}
+            />
+
+            {isFullScreen && <AntagonistBar floating />}
+
+            {loadModel && <RotationInputs isFullScreen={isFullScreen} />}
+          </Flex>
+        </Theme>
+      </Card>
+    </Theme>
+  );
+}