sorting

ui shit
revive sandbox
2026-10-21 18:57:03 +02:00 · 2026-10-15 00:38:01 -05:00 · 2026-10-13 21:14:42 -05:00 · 2026-10-13 21:03:06 -05:00 · 2026-10-13 20:53:15 -05:00 · 2026-10-13 20:40:47 -05:00
134 changed files with 4364 additions and 1960 deletions
@@ -96,6 +96,7 @@
    "fullstats",
    "fuzzysort",
    "gamemode",
+    "gamemodes",
    "gameplay",
    "glsl",
    "GLTF",
@@ -157,6 +158,7 @@
    "ownedtanks",
    "padder",
    "partytown",
+    "passability",
    "patchnotes",
    "PIXELFORMAT",
    "playerachievements",
@@ -1,11 +0,0 @@
-{
-  "words": [
-    "Debuff",
-    "gamemodes",
-    "Passability",
-    "Recoverkit",
-    "Repairkit",
-    "Respawns",
-    "Tankopedia"
-  ]
-}
@@ -5,10 +5,10 @@ Thank you to [Mark Greene](https://github.com/Hitjack007) for your contributions
 ## Features

 - Combined game mode passive and active abilities into a single dropdown
- [Mark Greene] Added tier filters to the Guess game
+- Added tier filters to the Guess game [Mark Greene]
  - Changing tiers will break your streak

 ## Fixes

- [Mark Greene] module damage is now properly shown when sorting with it in the tank search
+- module damage is now properly shown when sorting with it in the tank search [Mark Greene]
 - Duplicate abilities in the tank filters are now removed
@@ -4,7 +4,7 @@ Thank you to [GonnaHetzMe](https://github.com/karelpak1) for your contributions

 ## Fixes

- [GonnaHetzMe] The turret for Centurion I is no longer offset from the body
+- The turret for Centurion I is no longer offset from the body [GonnaHetzMe]
  - Please allow up to 24 hours for the model to update
 - Vertical Stabilizers now give the correct 12% buff instead of 15%
 - Re-ordering tanks in Compare now works once again
@@ -15,5 +15,5 @@ Thank you to [Mark Greene](https://github.com/Hitjack007) for your contributions
 ## Fixes

 - The Tankopedia now smoothly resizes when enlarging on interaction
- [Mark Greene] Stock turrets now correctly mount the corresponding stock gun
+- Stock turrets now correctly mount the corresponding stock gun [Mark Greene]
 - The consumable and provision buttons in Compare are no longer tiny
@@ -5,10 +5,10 @@ Thank you to [Mark Greene](https://github.com/Hitjack007) for your contributions
 ## Features

 - Reworked tank search filters to be far more compact to make way for new filters
- [Mark Greene] Added the ability to filter tanks by consumables
+- Added the ability to filter tanks by consumables [Mark Greene]
 - Added the ability to filter tanks by provisions and game-mode abilities and powers

 ## Fixes

 - Consumable and provision icons in Compare are now properly sized
- [Mark Greene] Provisions now properly affect terrain resistances
+- Provisions now properly affect terrain resistances [Mark Greene]
@@ -13,11 +13,11 @@ Thank you to [GonnaHetzMe](https://github.com/karelpak1) for your contributions

 ## Technical Features

- [GonnaHetzMe] Enabling dev mode now displays the tank's non-numerical id
- [GonnaHetzMe] The dev id and the new dev name are now copyable on click
+- Enabling dev mode now displays the tank's non-numerical id [GonnaHetzMe]
+- The dev id and the new dev name are now copyable on click [GonnaHetzMe]

 ## Fixes

- [GonnaHetzMe] Tech trees that start at tiers higher than tier 1 like the Blitz Nation ones now properly render their trees in Tankopedia
- [GonnaHetzMe] The tank pitch/yaw inputs in the Tank Sandbox now initialize with the correct values instead of 0
- [GonnaHetzMe] Large Repair Kits once again use the correct modern icon
+- Tech trees that start at tiers higher than tier 1 like the Blitz Nation ones now properly render their trees in Tankopedia [GonnaHetzMe]
+- The tank pitch/yaw inputs in the Tank Sandbox now initialize with the correct values instead of 0 [GonnaHetzMe]
+- Large Repair Kits once again use the correct modern icon [GonnaHetzMe]
@@ -4,5 +4,5 @@ Thank you to [GonnaHetzMe](https://github.com/karelpak1) for your contributions

 ## Fixes

- [GonnaHetzMe] Tank hit points in Equalizer mode is now accurate to the game
+- Tank hit points in Equalizer mode is now accurate to the game [GonnaHetzMe]
 - Armor highlighting now reflects the actual thicknesses of tanks in Equalizer mode
@@ -4,9 +4,9 @@ Thank you to [GonnaHetzMe](https://github.com/karelpak1) for your contributions

 ## Fixes

- [GonnaHetzMe] Tungsten shells are now properly cropped
+- Tungsten shells are now properly cropped [GonnaHetzMe]
 - Equalizer no longer gives insanely high penetration values
 - The tank reveal animation no longer repeats when you scroll away and back to the tank sandbox
- [GonnaHetzMe] The RHM. Pzw.'s turret no longer has the floating plate
+- The RHM. Pzw.'s turret no longer has the floating plate [GonnaHetzMe]
  - Please give BlitzKit up to 1 hour to update the model
- [GonnaHetzMe] Tanks with inclined turret rings like the Minotauro now display the correct pitch in the tank sandbox inputs
+- Tanks with inclined turret rings like the Minotauro now display the correct pitch in the tank sandbox inputs [GonnaHetzMe]
@@ -4,7 +4,7 @@ Thank you to [GonnaHetzMe](https://github.com/karelpak1) for your contributions

 ## Features

- [GonnaHetzMe] Added tooltips to the module selector in Tankopedia
+- Added tooltips to the module selector in Tankopedia [GonnaHetzMe]

 ## Fixes

@@ -12,7 +12,7 @@ Thank you to [GonnaHetzMe](https://github.com/karelpak1) for your contributions
 - Removed tank visual and collision model caching
 - Guesser once again breaks streaks if not all tiers are selected
 - BlitzKit now properly unloads tank models from memory when visually hidden in Guesser
- [GonnaHetzMe] Tanks with complex transparency like the Herdbreaker once again handle opacity correctly
- [GonnaHetzMe] Pieces of tank models that have transparency now handle culling properly (they're visible from both sides)
- [GonnaHetzMe] Tanks with "cardboard" textures have been fixed, thanks to better PVR file parsing
- [GonnaHetzMe] Tank icons are now scaled correctly so small tanks are now properly zoomed out in contrast to bigger ones
+- Tanks with complex transparency like the Herdbreaker once again handle opacity correctly [GonnaHetzMe]
+- Pieces of tank models that have transparency now handle culling properly (they're visible from both sides) [GonnaHetzMe]
+- Tanks with "cardboard" textures have been fixed, thanks to better PVR file parsing [GonnaHetzMe]
+- Tank icons are now scaled correctly so small tanks are now properly zoomed out in contrast to bigger ones [GonnaHetzMe]
@@ -8,13 +8,13 @@ Thank you to [Mark Greene](https://github.com/Hitjack007) for your contributions

 ## Fixes

- [Mark Greene] Clicking on the armor multiple times with HE no longer crashes BlitzKit
- [Mark Greene] Ricochets that later intersect with external modules no longer falsely claim a successful damaging penetration
+- Clicking on the armor multiple times with HE no longer crashes BlitzKit [Mark Greene]
+- Ricochets that later intersect with external modules no longer falsely claim a successful damaging penetration [Mark Greene]
 - The lighting animation no longer stops prematurely when BlitzKit is unfocused
 - The spot light angle has been increased to more evenly light up larger tanks
 - BlitzKit once again uses soft shadows, reducing the pixelated shadows
 - Fixed the weird patterns that formed on the tracks of tanks under self-shadows
 - Increased the floor size and light decay to create the illusion that the floor is infinite
- [Mark Greene] Safari no longer crashes when unloading textures for unloaded tanks
+- Safari no longer crashes when unloading textures for unloaded tanks [Mark Greene]
 - The gun depression transition between two constraints (like often behind tanks) now uses a gentler zoned and can never be 0
- [Mark Greene] Armor plate names in Static Armor are now properly capitalized in English and translated to other languages
+- Armor plate names in Static Armor are now properly capitalized in English and translated to other languages [Mark Greene]
@@ -1,41 +0,0 @@
-# BlitzKit 1.31.4
-
-Thank you to [Mark Greene](https://github.com/Hitjack007) for your contributions this update.
-
-## Features
-
- [Mark Greene] Added Peekaboo DPM
-  - Your Peekaboo DPM is lower than your normal DPM if your reload is faster than 10s as you'll have to wait for the remaining 10s for you to get unspotted before you can poke and shoot
- [Mark Greene] The test and owned tank filters are now more intuitive as clicking on them now turns the clicked option on instead of off
- [Mark Greene] Added a spall liner button to the Tankopedia beside the other equipment
-
-## Fixes
-
- [Mark Greene] BlitzKit Session now properly handles tanks removed from the game
- [Mark Greene] Removed the Beta badge from the Equalizer button
- Updated the background image for the Equalizer button to the actual banner of the new game mode
- [Mark Greene] The armor no longer disappears when you turn on Dynamic Armor System
- [Mark Greene] Camouflage values in Tankopedia are now more descriptive when shooting
- [Mark Greene] The contact shadows on the ground no longer grow & darken when switching between tabs
- The "Help Translate BlitzKit" text on the home page is now properly centered vertically
- [Mark Greene] The footer now says "Branch" instead of "CDN"
- [Mark Greene] The game version in the footer now displays a shorthand version instead of the entire version number
- [Mark Greene] The reload visualizer now displays just 1 decimal place
- [Mark Greene] The search bar no longer redirects to a seemingly random tank when clicking enter when searching
- [Mark Greene] Tank search now properly handles the full names of tanks like the Super Pershing
- [Mark Greene] The loading bar below the name of the tanks in Tankopedia is now sufficiently spaced below
- [Mark Greene] The gun depression visualizer now properly handles the inherent tilt of tanks like the Minotauro
-
-## Technical Features
-
- Added documentation to the README on setting up and developing BlitzKit locally
- Added bug report and feature request forms to GitHub
- Switched to the GNU AGPLv3 license
-
-## Technical Fixes
-
- BlitzKit now handles the new ID system for game-modes in WoTB
- The directory which preview versions of the game are downloaded to are now created properly
-  - This was the last bug standing in the way of BlitzKit Previews
-  - Welcome back, BlitzKit Previews!
- Removed some dead code from the BlitzKit model mangler
@@ -0,0 +1,98 @@
+# BlitzKit 1.32.0
+
+Thank you to [Mark Greene](https://github.com/Hitjack007) for your contributions this update.
+
+## Features
+
+### Tankopedia & Armor
+
+- Added a spall liner button to the Tankopedia beside the other equipment [Mark Greene]
+- Listed track repair times in the Tankopedia [Mark Greene]
+- The penetration chance is now displayed when penetration testing armor [Mark Greene]
+- Added a new setting to disable automatically loading tanks in Tankopedia [Mark Greene]
+
+### Tank Performance & Mechanics
+
+- Added Peekaboo DPM [Mark Greene]
+  - Your Peekaboo DPM is lower than your normal DPM if your reload is faster than 10s as you'll have to wait for the remaining 10s for you to get unspotted before you can poke and shoot
+
+### Tank Filters
+
+- The test and owned tank filters are now more intuitive as clicking on them now turns the clicked option on instead of off [Mark Greene]
+
+### Game Compatibility
+
+- Added compatibility for tier XI tanks [Mark Greene]
+
+## Fixes
+
+### Tankopedia & Armor
+
+- The armor no longer disappears when you turn on Dynamic Armor System [Mark Greene]
+- Camouflage values in Tankopedia are now more descriptive when shooting [Mark Greene]
+- The penetration chance is now displayed when penetration testing armor [Mark Greene]
+- Listed track repair times in the Tankopedia [Mark Greene]
+- Added a spall liner button to the Tankopedia beside the other equipment [Mark Greene]
+- The flags in the Tankopedia tech tree are no longer offset to the top left [Mark Greene]
+- The loading bar below the name of the tanks in Tankopedia is now sufficiently spaced below [Mark Greene]
+- Removed the vertical sliver of pixels found to the right of the Equalizer toggle in Tankopedia
+
+### Tank Search & Filters
+
+- The search bar no longer redirects to a seemingly random tank when clicking enter when searching [Mark Greene]
+- Tank search now properly handles the full names of tanks like the Super Pershing [Mark Greene]
+- The tank search now remains consistent in order even when an added filter does not add/remove tanks from the list [Mark Greene]
+- The test and owned tank filters are now more intuitive as clicking on them now turns the clicked option on instead of off [Mark Greene]
+
+### Visuals & UI
+
+- Removed the Beta badge from the Equalizer button [Mark Greene]
+- Updated the background image for the Equalizer button to the actual banner of the new game mode
+- The contact shadows on the ground no longer grow & darken when switching between tabs [Mark Greene]
+- Additionally, the contact shadows stays visible at low angles [Mark Greene]
+- The "Help Translate BlitzKit" text on the home page is now properly centered vertically
+- The footer now says "Branch" instead of "CDN" [Mark Greene]
+- The game version in the footer now displays a shorthand version instead of the entire version number [Mark Greene]
+- The reload visualizer now displays just 1 decimal place [Mark Greene]
+- Plot controls for the Static armor tab no longer pokes in from the right on non-Static armor tabs in some languages [Mark Greene]
+- Mixer's controllers now scale better on smaller screens [Mark Greene]
+- The list of available tanks in the Playlist is no longer excessively wide [Mark Greene]
+
+### Tank Mechanics & Models
+
+- The gun depression visualizer now properly handles the inherent tilt of tanks like the Minotauro [Mark Greene]
+- When moving the tracks of tanks, the textures no longer move at different rates [Mark Greene]
+
+### Localization
+
+- Users with a preference on a language are once again redirected to the correct localized pages [Mark Greene]
+
+### Session & Game Compatibility
+
+- BlitzKit Session now properly handles tanks removed from the game [Mark Greene]
+
+## Technical Fixes
+
+- BlitzKit now handles the new ID system for game-modes in WoTB
+- The directory which preview versions of the game are downloaded to are now created properly
+  - This was the last bug standing in the way of BlitzKit Previews
+  - Welcome back, BlitzKit Previews!
+- Removed some dead code from the BlitzKit model mangler
+- The player discovery loop now persists for longer than 1 iteration [Mark Greene]
+- Bun is now forced to run scripts with the `--bun` flag
+
+## Technical Features
+
+- Added documentation to the README on setting up and developing BlitzKit locally
+- Added bug report and feature request forms to GitHub
+- Switched to the GNU AGPLv3 license
+
+## Technical Fixes
+
+- BlitzKit now handles the new ID system for game-modes in WoTB
+- The directory which preview versions of the game are downloaded to are now created properly
+  - This was the last bug standing in the way of BlitzKit Previews
+  - Welcome back, BlitzKit Previews!
+- Removed some dead code from the BlitzKit model mangler
+- The player discovery loop now persists for longer than 1 iteration [Mark Greene]
+- Bun is now forced to run scripts with the `--bun` flag
@@ -1,9 +0,0 @@
-# Timezones
-
-What is considered a "day's worth of games" is determined by the reset time. The reset time is generally at midnight everyday after which newer games are counted towards the next day. Reset times vary from region to region:
-
- North America: `UTC-5:00` (Central North American Time midnight)
- Europe: `UTC+1:00` (Central European Time midnight)
- Asia: `UTC+7:00` (Central Asia Standard Time midnight)
-
-**Reset times are different from Blitz Stars** (Blitz Stars resets at 5:00 am locally relative to the user opening their website). Inconsistencies with Blitz Stars only occur with sleep-deprived players and players who play in the wrong region.
@@ -1,45 +0,0 @@
-# Blitzkit Rating Leaderboard
-
-A straightforward way of storing the entire World of Tanks Blitz rating leaderboard to disk.
-
-```cpp
-primary BlitzkitRatingLeaderboard {
-  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;
-  };
-}
-```
@@ -1,18 +0,0 @@
-# Discovered Ids
-
-```c
-primary DiscoveredIds {
-  utf8"DIDS" magic;
-  Header header;
-  primary Body body;
-}
-
-Header {
-  uint16 version; // always 1
-}
-
-Body {
-  uint32 count;
-  uint32[count] ids;
-}
-```
@@ -1,172 +1,3 @@
 # KitScore

-## Memo
-
-KitScore is a performance metric that makes sense. This metric can be applied to any game, virtual or real. Specific pieces of information relating directly to World of Tanks Blitz will be provided within parentheses and with a "WoTB:" prefix.
-
-## Consumption of Observations
-
-KitScore is driven solely by the behavior of other players and finding meaning of a new observation within a pool of condensed data based on previously observed data. Generally, we will be provided with a number of statistics (the $x_i$ of an observation) per player (WoTB: $x_\text{frags}$, $x_\text{xp}$, $x_\text{spots}$, etc.) including a target statistic (the $x_j$ of an observation) that all other statistics try to maximize (WoTB: "winrate" which we will defined later as $x_j$).
-
-If the statistics are cumulative, they will have to be normalized (WoTB: statistics fetched from Wargaming are indeed cumulative even for a single player; $x_\text{frags}=\frac{\Sigma x_\text{frags}}{\Sigma x_\text{battles}}$, $x_\text{spots}=\frac{\Sigma x_\text{spots}}{\Sigma x_\text{battles}}$, $x_j=\frac{\Sigma x_\text{wins}}{\Sigma x_\text{battles}}$, etc.). Each player will have such average statistics, giving us many points of data to work with. If the statistics are not cumulative, then you will be dealing with multiple observations per player which will only help improve accuracy.
-
-## It's Impossible to "Find What Makes the Metric Tick"
-
-WN8, a widely adopted metric in the World of Tanks and World of Tanks Blitz communities is plagued with problems. One of them being that people often find and exploit "what makes the metric tick." In other words, people easily exploit the rudimentary nature of WN8 to score undeservedly high.
-
-In WN8, the gains of some rewarding categories overshadow the losses of others though that may not necessarily be in the best interest in maximizing winrate. KitScore makes this nearly impossible as it punishes a player for scoring well solely high in a certain category. You will never exploit KitScore. Period.
-
-## Generating Reasonable Values
-
-TODO: there's like no runaway cases
-
-## Symbol Interpretation
-
-| Symbol           | Interpretation                                                                                                                                         |
-| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| $A_\text{human}$ | The human readable version of the raw score $A$.                                                                                                       |
-| $A$              | The raw KitScore.                                                                                                                                      |
-| $C$              | An arbitrary coefficient.                                                                                                                              |
-| $I$              | The number of statistics including the target statistic. This means that there are $I-1$ entries for $x_i$ and $1$ entry for $y$ for each observation. |
-| $i$              | The statistic index of where there are $I$ entries.                                                                                                    |
-| $j$              | A discriminator for the target statistic. There may never be more than $1$ entries for $j$.                                                            |
-| $m$              | The degree of the polynomial regression.                                                                                                               |
-| $n$              | The number of observations.                                                                                                                            |
-| $a$              | An "atomic" score which is a function of the $i$th statistic.                                                                                          |
-| $w$              | The weight of the $i$th atomic statistic.                                                                                                              |
-
-## Computing the Score
-
-The final metric $A_\text{human}$ is an arbitrarily scaled value of the raw score $A$ where $C$ is any coefficient of your liking. BlitzKit uses $C=10^3$.
-
-$$
-A_\text{human}=CA
-$$
-
-The final metric $A$ is the weighted average of individual scores $a$ which are functions of the $i$th statistic excluding the target statistic $j$ itself.
-
-$$
-A=\frac{\sum_{i \neq j} w_{i}a_{i}}{\sum_{i \neq j} w_{i}}
-$$
-
-The "atomic" score $a$ is the difference between the predicted target statistic $P_{i \leftrightarrow j}(x_i)$ acquired using a polynomial regression of degree $m$ and the actual newly observed $x_j$.
-
-$$
-a_i=x_j-P_{i \leftrightarrow j}(x_i)
-$$
-
-The polynomial regression of $m$th degree can be written as follows:
-
-$$
-P(x)=\beta_0x^0+\beta_1x^1+\beta_2x^2+\dots+\beta_mx^m
-$$
-
-Polynomial regression coefficients $\beta$ can be acquired through basic linear algebra where an $m \times m$ of constants is multiplied with $m \times 1$ of unknowns which equals another $m \times 1$ of constants.
-
-```math
-\begin{bmatrix}
-\sum_{k=1}^n x_i^0 & \sum_{k=1}^n x_i^1 & \sum_{k=1}^n x_i^2 & \dots & \sum_{k=1}^n x_i^m \\
-\sum_{k=1}^n x_i^1 & \sum_{k=1}^n x_i^2 & \sum_{k=1}^n x_i^3 & \dots & \sum_{k=1}^n x_i^{m+1} \\
-\sum_{k=1}^n x_i^2 & \sum_{k=1}^n x_i^3 & \sum_{k=1}^n x_i^4 & \dots & \sum_{k=1}^n x_i^{m+2} \\
-\vdots & \vdots & \vdots & \ddots & \vdots \\
-\sum_{k=1}^n x_i^m & \sum_{k=1}^n x_i^{m+1} & \sum_{k=1}^n x_i^{m+1} & \dots & \sum_{k=1}^n x_i^{2m} \\
-\end{bmatrix}
-
-\begin{bmatrix}
-\beta_0 \\
-\beta_1 \\
-\beta_2 \\
-\vdots \\
-\beta_m
-\end{bmatrix}
-
-=
-
-\begin{bmatrix}
-\sum_{k=1}^n x_jx_i^0 \\
-\sum_{k=1}^n x_jx_i^1 \\
-\sum_{k=1}^n x_jx_i^2 \\
-\vdots \\
-\sum_{k=1}^n x_jx_i^m
-\end{bmatrix}
-```
-
-The weight $w$ is a slice of the Pearson corelation matrix. The numerator is the corelation between the $i$th statistic and the target statistic $j$ while the denominator the sum of the corelations between the $i$th statistic and all statistics but the target statistic $j$.
-
-$$
-w_{i}=\frac{r_{i\leftrightarrow j}^2}{\sum_{i_{k}\neq j}r_{i\leftrightarrow i_{k}}^2}
-$$
-
-## Understanding the Corelation Matrix
-
-Forming the corelation matrix will create an $I \times I$ matrix where. This matrix is best represented as a table. The example below illustrates a matrix/table for $I=4$ which includes $3$ entries for $i$ statistics and $1$ entry for the $j$ target statistic.
-
-|       | $x_1$                       | $x_2$                       | $x_3$                       | $x_j$                       |
-| ----- | --------------------------- | --------------------------- | --------------------------- | --------------------------- |
-| $x_1$ | $1$                         | $r_{1 \leftrightarrow 2}^2$ | $r_{1 \leftrightarrow 3}^2$ | $r_{1 \leftrightarrow j}^2$ |
-| $x_2$ | $r_{1 \leftrightarrow 2}^2$ | $1$                         | $r_{2 \leftrightarrow 3}^2$ | $r_{2 \leftrightarrow j}^2$ |
-| $x_3$ | $r_{1 \leftrightarrow 3}^2$ | $r_{2 \leftrightarrow 3}^2$ | $1$                         | $r_{3 \leftrightarrow j}^2$ |
-| $x_j$ | $r_{1 \leftrightarrow j}^2$ | $r_{2 \leftrightarrow j}^2$ | $r_{3 \leftrightarrow j}^2$ | $1$                         |
-
-It should not be a surprise to find $r_{i \leftrightarrow i}^2=1$ which forms a neat diagonal across the table. Note that there are many duplicates within the $I^2$ entries. The "bottom-right triangle" can be eliminated to remove redundancies leaving us with only $\frac{I(I+1)}{2}$ fields occupied.
-
-|       | $x_1$ | $x_2$                       | $x_3$                       | $x_j$                       |
-| ----- | ----- | --------------------------- | --------------------------- | --------------------------- |
-| $x_1$ | $1$   | $r_{1 \leftrightarrow 2}^2$ | $r_{1 \leftrightarrow 3}^2$ | $r_{1 \leftrightarrow j}^2$ |
-| $x_2$ |       | $1$                         | $r_{2 \leftrightarrow 3}^2$ | $r_{2 \leftrightarrow j}^2$ |
-| $x_3$ |       |                             | $1$                         | $r_{3 \leftrightarrow j}^2$ |
-| $x_j$ |       |                             |                             | $1$                         |
-
-When programming this matrix into an array, $r_{i \leftrightarrow i}^2=1$ will be redundant. I recommend condensing the matrix into an array of size $\frac{I(I+1)}{2}+I=\frac{I(I-1)}{2}$ to avoid all redundant entries. For $I=4$, the array will look something like the one illustrated below (here, $j=4$).
-
-$$
-[r_{1 \leftrightarrow 2}^2, r_{1 \leftrightarrow 3}^2, r_{1 \leftrightarrow 4}^2, r_{2 \leftrightarrow 3}^2, r_{2 \leftrightarrow 4}^2, r_{3 \leftrightarrow 4}^2]
-$$
-
-## Understanding the Weights
-
-Some may find the weight equation arbitrary; it evidently isn't. The goal of $w$ is to eliminate over-rewarding the same behavior represented in multiple statistics. It makes all atomic statistics concurrent by leveraging the Pearson corelation matrix.
-
-A simplified example will clarify the idea. First, we compute a Pearson corelation matrix for $I=3$ statistics. We have $x_1$ and $x_2$, the statistics that are trying to maximize $x_j$. Reminder: a Pearson corelation matrix finds the $r$ value not only between $x_i$ and $x_j$ but also between all combinations of $x_i$ and themselves. Here, $r^2$ is calculated using polynomial regression corelation analysis to the $m$th degree.
-
-|       | $x_1$ | $x_2$       | $x_3$ | $x_j$ |
-| ----- | ----- | ----------- | ----- | ----- |
-| $x_1$ | $1$   | $\boxed{0}$ | $0$   | $1$   |
-| $x_2$ |       | $1$         | $0$   | $1$   |
-| $x_3$ |       |             | $1$   | $1$   |
-| $x_j$ |       |             |       | $1$   |
-
-In the case above, $r^2_{1 \leftrightarrow 2}=0$ meaning that both statistics have absolutely nothing to do with each other. Hence, the player will be awarded for optimizing both individually. And since $r^2_{1 \leftrightarrow j}=r^2_{2 \leftrightarrow j}$, they should both be rewarded equally; in other words, they should have equal weights.
-
-$$
-w_{1}=\frac{1}{1 + 0 + 0}=1
-$$
-
-$$
-w_{2}=\frac{1}{0 + 1 + 0}=1
-$$
-
-$$
-w_{3}=\frac{1}{0 + 0 + 1}=1
-$$
-
-Now consider a case where $x_1$ and $x_2$ are fully correlated. It would be a bad idea to reward them equally; hence, their weights suffer.
-
-|       | $x_1$ | $x_2$       | $x_3$ | $x_j$ |
-| ----- | ----- | ----------- | ----- | ----- |
-| $x_1$ | $1$   | $\boxed{1}$ | $0$   | $1$   |
-| $x_2$ |       | $1$         | $0$   | $1$   |
-| $x_3$ |       |             | $1$   | $1$   |
-| $x_j$ |       |             |       | $1$   |
-
-$$
-w_{1}=\frac{1}{1 + 1 + 0}=0.5
-$$
-
-$$
-w_{2}=\frac{1}{1 + 1 + 0}=0.5
-$$
-
-$$
-w_{3}=\frac{1}{0 + 0 + 1}=1
-$$
+Remind me to write out the linearized model!
@@ -1,71 +0,0 @@
-# BlitzKit Regular Tank Stats
-
-A straightforward way of storing the entire World of Tanks Blitz tank statistics for players to disk.
-
-## Manifest `manifest.rtsm`
-
-```cpp
-primary RegularTankStatisticsManifest {
-  utf8"RTSM" magic;
-  Header header;
-  primary Body body;
-}
-
-Header {
-  uint16 version; // always 1
-}
-
-Body {
-  uint32 time;
-  uint8 base;
-}
-```
-
-## Chunk `*.rtsc`
-
-```cpp
-primary RegularTankStatisticsChunk {
-  utf8"RTSC" magic;
-  Header header;
-  primary Body body<header.playerCount>;
-}
-
-Header {
-  uint16 version; // always 1
-  uint32 playerCount;
-}
-
-Body<uint32 playerCount> {
-  Player[playerCount] players;
-}
-
-Player {
-  uint32 id;
-  uint16 tankCount;
-  Tank[tankCount] tanks;
-}
-
-Tank {
-  uint32 id;
-  uint32 battleLifeTime;
-  uint32 lastBattleTime;
-  uint8 markOfMastery;
-  uint32 battles;
-  uint32 capturePoints;
-  uint32 damageDealt;
-  uint32 damageReceived;
-  uint32 droppedCapturePoints;
-  uint32 frags;
-  uint32 frags8p;
-  uint32 hits;
-  uint32 losses;
-  uint8 maxFrags;
-  uint16 maxXp;
-  uint32 shots;
-  uint32 spotted;
-  uint32 survivedBattles;
-  uint32 winAndSurvived;
-  uint32 wins;
-  uint32 xp;
-}
-```
@@ -1,15 +1,16 @@
 {
  "name": "blitzkit",
-  "version": "1.31.4",
+  "version": "1.32.0",
  "license": "BlitzKit License",
  "private": true,
  "scripts": {
-    "dev": "cd packages/website && bun run dev",
+    "dev": "cd packages/website && bun --bun run dev",
    "build": "cd packages/website && bun run build",
    "discover-ids": "cd packages/scripts && bun run discover-ids",
    "build-protos": "cd packages/scripts && bun run build-protos",
    "record-performance": "cd packages/scripts && bun run record-performance",
-    "download-client": "cd packages/scripts && bun run download-client"
+    "download-client": "cd packages/scripts && bun run download-client",
+    "clean-astro": "rm -rf packages/website/.astro packages/website/node_modules/.astro packages/website/node_modules/.vite"
  },
  "type": "module",
  "workspaces": [
@@ -112,6 +112,9 @@ export abstract class ServerBlitzKitAPI0 extends AbstractBlitzKitAPI {
  }

  async init() {
+    const { existsSync } = await import("fs");
+    const { readFile, writeFile, mkdir } = await import("fs/promises");
+
    console.log("Initializing virtual file system...");

    const path = await import("node:path");
@@ -160,31 +163,39 @@ export abstract class ServerBlitzKitAPI0 extends AbstractBlitzKitAPI {

    console.log("Fetching game localizations...");

-    if (import.meta.env.DEV) {
-      locales.supported = [locales.supported[0]];
-    }
-
-    let fetchedLocalizations = 0;
    await Promise.all(
-      locales.supported.map(async (locale) => {
-        const blitzLocale = locale.variant_blitz_cdn ?? locale.locale;
-        const cache = await fetch(
+      locales.supported.map(async ({ locale }) => {
+        const root = "../../temp/game-strings";
+        const cachePath = `${root}/${locale}.json`;
+
+        if (existsSync(cachePath)) {
+          console.log(`  Cache hit for ${locale}`);
+
+          const content = await readFile(cachePath, "utf-8");
+          this.stringsI18n[locale] = JSON.parse(content) as BlitzStrings;
+
+          return;
+        }
+
+        console.log(`  Cache miss for ${locale} (this will take a while...)`);
+
+        const blitzLocale = locales.supported.find(
+          (l) => l.locale === locale,
+        )!.variant_blitz_local;
+        const networkStrings = (await fetch(
          `https://stufficons.wgcdn.co/localizations/${blitzLocale}.yaml`,
        )
          .then((response) => response.text())
-          .then((string) => parseYaml(string) as BlitzStrings);
-        const preInstalled = await this.vfs.yaml<BlitzStrings>(
+          .then(parseYaml)) as BlitzStrings;
+        const localStrings = await this.vfs.yaml<BlitzStrings>(
          `Data/Strings/${blitzLocale}.yaml`,
        );
+        const combined = { ...networkStrings, ...localStrings };

-        this.stringsI18n[locale.locale] = {
-          ...cache,
-          ...preInstalled,
-        };
+        await mkdir(root, { recursive: true });
+        await writeFile(cachePath, JSON.stringify(combined));

-        console.log(
-          `Fetched localizations for ${locale} (${++fetchedLocalizations}/${locales.supported.length})`,
-        );
+        this.stringsI18n[locale] = combined;
      }),
    );

@@ -437,6 +437,7 @@ export abstract class ServerBlitzKitAPI1 extends ServerBlitzKitAPI0 {
            resistance_hard: terrainResistances[0],
            resistance_medium: terrainResistances[1],
            resistance_soft: terrainResistances[2],
+            repair_time: track.hysteresisHealth / track.healthRegenPerSec,
            tier: track.level,
            unlocks: resolveUnlocks(
              this.blitzModuleTypeToBlitzkit,
@@ -0,0 +1,11 @@
+import { SkillDefinitions } from "@blitzkit/protos";
+import { createDefaultSkills } from "./createDefaultSkills";
+import { TankEnvironment } from "./tankEnvironment";
+
+export function createDefaultEnvironment(skills: SkillDefinitions) {
+  return {
+    equalize: false,
+    distance: 0,
+    skills: createDefaultSkills(skills),
+  } satisfies TankEnvironment;
+}
@@ -1,12 +1,13 @@
-import { SkillDefinitions } from "..";
+import { SkillDefinitions } from "@blitzkit/protos";
 import { permanentSkills } from "../blitz/permanentSkills";
+import { MAX_SKILL_LEVEL } from "../config/skills";

 export function createDefaultSkills(skillDefinitions: SkillDefinitions) {
  const skills: Record<string, number> = {};

  Object.values(skillDefinitions.classes).forEach((tankSkills) => {
    tankSkills.skills.forEach((skill) => {
-      skills[skill] = permanentSkills.includes(skill) ? 7 : 0;
+      skills[skill] = permanentSkills.includes(skill) ? MAX_SKILL_LEVEL : 0;
    });
  });

@@ -1,3 +1,3 @@
 export function degressiveStat(crew: number) {
-  return 0.875 / (0.00375 * 100 * crew + 0.5) - 1;
+  return 0.875 / (0.00375 * 100 * crew + 0.5);
 }
@@ -3,6 +3,7 @@ export * from "./api";
 export * from "./assertSecret";
 export * from "./availableProvisions";
 export * from "./coefficient";
+export * from "./createDefaultEnvironment";
 export * from "./createDefaultProvisions";
 export * from "./createDefaultSkills";
 export * from "./degressiveStat";
@@ -17,7 +18,6 @@ export * from "./normalizeBoundingBox";
 export * from "./patientFetchJSON";
 export * from "./popularTanks";
 export * from "./progressiveStat";
-export * from "./resolveDpm";
 export * from "./resolvePenetrationCoefficient";
 export * from "./reviews";
 export * from "./romanize";
@@ -25,6 +25,7 @@ export * from "./sluggify";
 export * from "./staticAsset";
 export * from "./sum";
 export * from "./tankDefinitions";
+export * from "./tankEnvironment";
 export * from "./tankIcon";
 export * from "./tankNames";
 export * from "./unionBoundingBox";
@@ -7,6 +7,7 @@ export function metaSortTank(
  gameDefinitions: GameDefinitions,
 ) {
  return tanks
+    .sort((a, b) => a.id - b.id)
    .sort((a, b) => b.tier - a.tier)
    .sort(
      (a, b) => treeTypeOrder.indexOf(b.type) - treeTypeOrder.indexOf(a.type),
@@ -1,3 +1,3 @@
 export function progressiveStat(crew: number) {
-  return (0.00375 * 100 * crew + 0.5) / 0.875 - 1;
+  return (0.00375 * 100 * crew + 0.5) / 0.875;
 }
@@ -1,63 +0,0 @@
-import {
-  GunDefinition,
-  GunDefinitionAutoReloader,
-  ShellDefinition,
-} from '../protos';
-
-export function resolveDpm(
-  gun: GunDefinition,
-  shell: ShellDefinition,
-  damageCoefficient = 1,
-  reloadCoefficient = 1,
-  intraClipCoefficient = 1,
-) {
-  const alpha = shell.armor_damage * damageCoefficient;
-  let dps: number;
-
-  if (gun.gun_type!.$case === 'regular') {
-    dps = alpha / (reloadCoefficient * gun.gun_type!.value.reload);
-  } else if (gun.gun_type!.$case === 'auto_loader') {
-    const damage = alpha * gun.gun_type!.value.shell_count;
-    let time = gun.gun_type!.value.clip_reload * reloadCoefficient;
-
-    if (gun.burst) {
-      time +=
-        (gun.gun_type!.value.shell_count / gun.burst.count - 1) *
-        gun.gun_type!.value.intra_clip *
-        intraClipCoefficient;
-
-      time +=
-        (gun.gun_type!.value.shell_count / gun.burst.count) *
-        (gun.burst.count - 1) *
-        gun.burst.interval;
-    } else {
-      time +=
-        (gun.gun_type!.value.shell_count - 1) *
-        gun.gun_type!.value.intra_clip *
-        intraClipCoefficient;
-    }
-
-    dps = damage / time;
-  } else {
-    const mostOptimalShell = gun.gun_type!.value.shell_reloads.reduce<null | {
-      index: number;
-      reload: number;
-    }>((current, reloadRaw, index) => {
-      const reload =
-        reloadRaw * reloadCoefficient +
-        (index > 0
-          ? (gun.gun_type!.value as GunDefinitionAutoReloader).intra_clip *
-            intraClipCoefficient
-          : 0);
-
-      if (current === null || reload < current.reload) {
-        return { index, reload };
-      }
-      return current;
-    }, null)!;
-
-    dps = alpha / mostOptimalShell?.reload;
-  }
-
-  return dps * 60;
-}
@@ -43,18 +43,6 @@ export const TANK_ICONS_COLLECTOR: Record<TankClass, string> = {
  [TankClass.TANK_CLASS_HEAVY]: "https://i.imgur.com/8xRf3nc.png",
 };
 export const TIERS = times(10, (index) => index + 1);
-export const TIER_ROMAN_NUMERALS: Record<number, string> = {
-  1: "I",
-  2: "II",
-  3: "III",
-  4: "IV",
-  5: "V",
-  6: "VI",
-  7: "VII",
-  8: "VIII",
-  9: "IX",
-  10: "X",
-};

 export const flags: Record<string, string> = {
  ussr: "<:ussr:1218421042033197197>",
@@ -0,0 +1,5 @@
+export interface TankEnvironment {
+  equalize: boolean;
+  distance: number;
+  skills: Record<string, number>;
+}
@@ -1,3 +1,4 @@
 export * from "./gunTypeOrder";
+export * from "./skills";
 export * from "./tankClassOrder";
 export * from "./treeTypeOrder";
@@ -0,0 +1 @@
+export const MAX_SKILL_LEVEL = 7;
@@ -34,6 +34,8 @@ export interface VehicleDefinitions {
      };
      level: number;
      hullPosition: string;
+      hysteresisHealth: number;
+      healthRegenPerSec: number;
      armor: {
        leftTrack:
          | number
@@ -8,11 +8,46 @@
    "s": "{value}s",
    "percentage": "{value}%",
    "deg_s": "{value}°/s",
-    "plus": "+{value}"
+    "m_s": "{value}m/s",
+    "km_h": "{value}km/h",
+    "t": "{value}t",
+    "bhp": "{value}bhp",
+    "bhp_t": "{value}bhp/t",
+    "kN": "{value}kN",
+    "hp_s": "{value}hp/s",
+    "plus": "+{value}",
+    "fraction": "{numerator} / {denominator}"
  },

  "tanks": {
+    "toys": {
+      "ricochet": {
+        "angle": "Angle",
+        "normalization": "Normalization",
+        "effective": "Effective",
+        "armor": "Armor",
+        "no_ricochet": "Explosive shells don't ricochet"
+      },
+
+      "traverse": {
+        "effective": "Effective",
+        "hull": "Hull",
+        "turret": "Turret"
+      },
+
+      "reload": {
+        "skip": "Skip"
+      }
+    },
+
    "characteristics": {
+      "compare": {
+        "label": "Compare against",
+        "class": "Tier {tier} {class}",
+        "tier": "All tier {tier}",
+        "all": "All tanks"
+      },
+
      "titles": {
        "gun": "Gun",
        "clip": "Clip",
@@ -38,11 +73,11 @@
        "burst_size": "Burst size",
        "intra_burst": "Intra-burst",
        "penetration": "Penetration",
-        "penetration_loss_by_distance": "Penetration loss by distance",
-        "penetration_loss_after_ricochet": "Penetration loss after ricochet",
-        "shell_velocity": "Shell velocity",
-        "shell_range": "Shell range",
-        "shell_capacity": "Shell capacity",
+        "penetration_loss_by_distance": "Loss by 500m",
+        "penetration_loss_after_ricochet": "Loss after ricochet",
+        "shell_velocity": "Velocity",
+        "shell_range": "Range",
+        "shell_capacity": "Capacity",
        "caliber": "Caliber",
        "normalization": "Normalization",
        "ricochet": "Ricochet",
@@ -51,16 +86,32 @@
        "dispersion_angle": "Dispersion angle",
        "gun_depression": "Gun depression",
        "gun_elevation": "Gun elevation",
+        "gun_frontal_depression": "Frontal depression",
+        "gun_frontal_elevation": "Frontal elevation",
+        "gun_rear_depression": "Rear depression",
+        "gun_rear_elevation": "Rear elevation",
        "azimuth_left": "Azimuth left",
        "azimuth_right": "Azimuth right",
-        "speed_forward": "Speed forward",
-        "speed_backward": "Speed backward",
+        "speed_forward": "Forward",
+        "speed_backward": "Backward",
+        "speeds": "Speed",
        "engine_power": "Engine power",
        "brake_force": "Brake force",
        "weight": "Weight",
        "power_to_weight": "Power to weight",
-        "terrain_coefficient": "Terrain coefficient",
+        "terrain_coefficient": "Terrain coefficients",
+        "raw_terrain_coefficient": "Raw terrain coefficients",
+        "hard_terrain_coefficient": "Hard",
+        "medium_terrain_coefficient": "Medium",
+        "soft_terrain_coefficient": "Soft",
+        "hard_terrain_coefficient_raw": "Hard",
+        "medium_terrain_coefficient_raw": "Medium",
+        "soft_terrain_coefficient_raw": "Soft",
        "hull_traverse_speed": "Hull traverse speed",
+        "hull_traverse_speeds": "Hull traverse speed",
+        "hull_traverse_speed_hard": "Hard",
+        "hull_traverse_speed_medium": "Medium",
+        "hull_traverse_speed_soft": "Soft",
        "turret_traverse_speed": "Turret traverse speed",
        "gun_traverse_speed": "Gun traverse speed",
        "health": "Health",
@@ -75,6 +126,10 @@
      }
    },

+    "game_modes": {
+      "title": "Game mode abilities"
+    },
+
    "navigation": {
      "tank": "Tank",
      "characteristics": "Characteristics"
@@ -87,6 +142,10 @@
      "provisions": "Provisions",
      "modules": "Modules",
      "equipment": "Equipment",
+      "shells": "Shells",
+      "clear": "Clear",
+      "maximize": "Maximize",
+      "skills": "Crew skills",
      "alternative": "Alt"
    },

@@ -387,6 +446,7 @@
      "title": "Settings",
      "description": "Change BlitzKit settings",
      "dev_mode": "Development mode",
+      "auto_load_models": "Auto-load models",
      "language": "Language"
    },

@@ -424,53 +484,15 @@
        },

        "sort": {
-          "meta.none": "none",
-          "survivability.health": "health",
-          "survivability.viewRange": "view range",
-          "survivability.camouflageStill": "camouflage still",
-          "survivability.camouflageMoving": "camouflage moving",
-          "survivability.camouflageShooting": "camouflage shooting",
-          "survivability.volume": "volume",
-          "survivability.length": "length",
-          "fire.dpm": "standard DPM",
-          "fire.dpmPremium": "premium DPM",
-          "fire.reload": "reload",
-          "fire.caliber": "caliber",
-          "fire.standardPenetration": "standard penetration",
-          "fire.premiumPenetration": "premium penetration",
-          "fire.tertiaryPenetration": "tertiary penetration",
-          "fire.damage": "damage",
-          "fire.moduleDamage": "module damage",
-          "fire.shellVelocity": "shell velocity",
-          "fire.shellRange": "shell range",
-          "fire.shellCapacity": "shell capacity",
-          "fire.aimTime": "aim time",
-          "fire.dispersionStill": "dispersion still",
-          "fire.dispersionMoving": "dispersion moving",
-          "fire.gunDepression": "gun depression",
-          "fire.gunElevation": "gun elevation",
-          "maneuverability.forwardsSpeed": "forwards speed",
-          "maneuverability.backwardsSpeed": "backwards speed",
-          "maneuverability.power": "power",
-          "maneuverability.powerToWeight": "power to weight",
-          "maneuverability.weight": "weight",
-          "maneuverability.traverseSpeed": "traverse speed"
-        },
-        "sort_dropdown": {
          "label": "Sort",
-          "groups": {
-            "sort": {
-              "no_sort": "No sort",
-              "label": "Sort by",
-              "fire": "Fire",
-              "maneuverability": "Maneuverability",
-              "survivability": "Survivability"
-            },
-            "direction": {
-              "label": "Direction",
-              "ascending": "Ascending",
-              "descending": "Descending"
-            }
+
+          "none": "None",
+          "by": "Sort by",
+
+          "direction": {
+            "label": "Direction",
+            "ascending": "Ascending",
+            "descending": "Descending"
          }
        }
      },
@@ -194,6 +194,7 @@
      "title": "Settings",
      "description": "Change BlitzKit settings",
      "dev_mode": "Modo de desarrollador",
+      "auto_load_models": "Auto-load models",
      "language": "Idioma"
    },
    "common": {
@@ -412,6 +413,7 @@
          }
        },
        "sandbox": {
+          "load_model": "Load model",
          "poses": {
            "hull_down": "Hull down",
            "face_hug": "Cara a cara",
@@ -621,6 +623,7 @@
            "hullTraverseSoftTerrain": "Suave",
            "health": "Salud",
            "fireChance": "Probabilidad de incendio",
+            "trackRepairTime": "Track repair time",
            "viewRange": "Rango de visión",
            "camouflageStill": "Quieto",
            "camouflageMoving": "En movimiento",
@@ -194,6 +194,7 @@
      "title": "Paramètres",
      "description": "Modifier les paramètres de BlitzKit",
      "dev_mode": "Mode développement",
+      "auto_load_models": "Auto-load models",
      "language": "Langue"
    },
    "common": {
@@ -412,6 +413,7 @@
          }
        },
        "sandbox": {
+          "load_model": "Load model",
          "poses": {
            "hull_down": "Hull down",
            "face_hug": "Face hug",
@@ -621,6 +623,7 @@
            "hullTraverseSoftTerrain": "Soft",
            "health": "Health",
            "fireChance": "Fire chance",
+            "trackRepairTime": "Track repair time",
            "viewRange": "View range",
            "camouflageStill": "Still",
            "camouflageMoving": "Moving",
@@ -194,6 +194,7 @@
      "title": "Settings",
      "description": "Change BlitzKit settings",
      "dev_mode": "開発者モード",
+      "auto_load_models": "Auto-load models",
      "language": "言語 / Language"
    },
    "common": {
@@ -412,6 +413,7 @@
          }
        },
        "sandbox": {
+          "load_model": "Load model",
          "poses": {
            "hull_down": "ハルダウン",
            "face_hug": "密着",
@@ -621,6 +623,7 @@
            "hullTraverseSoftTerrain": "軟弱地",
            "health": "耐久値",
            "fireChance": "火災発生率",
+            "trackRepairTime": "Track repair time",
            "viewRange": "視認範囲",
            "camouflageStill": "静止時",
            "camouflageMoving": "移動時",
@@ -194,6 +194,7 @@
      "title": "Settings",
      "description": "Change BlitzKit settings",
      "dev_mode": "Development mode",
+      "auto_load_models": "Auto-load models",
      "language": "Language"
    },
    "common": {
@@ -412,6 +413,7 @@
          }
        },
        "sandbox": {
+          "load_model": "Load model",
          "poses": {
            "hull_down": "Hull down",
            "face_hug": "Face hug",
@@ -621,6 +623,7 @@
            "hullTraverseSoftTerrain": "Soft",
            "health": "Health",
            "fireChance": "Fire chance",
+            "trackRepairTime": "Track repair time",
            "viewRange": "View range",
            "camouflageStill": "Still",
            "camouflageMoving": "Moving",
@@ -194,6 +194,7 @@
      "title": "Settings",
      "description": "Change BlitzKit settings",
      "dev_mode": "Modo de desenvolvimento",
+      "auto_load_models": "Auto-load models",
      "language": "Idioma"
    },
    "common": {
@@ -412,6 +413,7 @@
          }
        },
        "sandbox": {
+          "load_model": "Load model",
          "poses": {
            "hull_down": "Casco para baixo",
            "face_hug": "Abraço facial",
@@ -621,6 +623,7 @@
            "hullTraverseSoftTerrain": "Macio",
            "health": "Vida",
            "fireChance": "Chance de incêndio",
+            "trackRepairTime": "Track repair time",
            "viewRange": "Alcance de visão",
            "camouflageStill": "Parado",
            "camouflageMoving": "Em movimento",
@@ -194,6 +194,7 @@
      "title": "Настройки",
      "description": "Изменить настройки BlitzKit",
      "dev_mode": "Режим разработчика",
+      "auto_load_models": "Auto-load models",
      "language": "Язык"
    },
    "common": {
@@ -412,6 +413,7 @@
          }
        },
        "sandbox": {
+          "load_model": "Load model",
          "poses": {
            "hull_down": "За холмом",
            "face_hug": "В упор",
@@ -621,6 +623,7 @@
            "hullTraverseSoftTerrain": "На мягком грунте",
            "health": "Прочность",
            "fireChance": "Вероятность возгорания",
+            "trackRepairTime": "Track repair time",
            "viewRange": "Радиус обзора",
            "camouflageStill": "Когда неподвижен",
            "camouflageMoving": "В движении",
@@ -194,6 +194,7 @@
      "title": "Налаштування",
      "description": "Змінити налаштування BlitzKit ",
      "dev_mode": "Режим розробника",
+      "auto_load_models": "Auto-load models",
      "language": "Мова"
    },
    "common": {
@@ -412,6 +413,7 @@
          }
        },
        "sandbox": {
+          "load_model": "Load model",
          "poses": {
            "hull_down": "Від башти",
            "face_hug": "Клінч",
@@ -621,6 +623,7 @@
            "hullTraverseSoftTerrain": "Soft",
            "health": "Здоров'я",
            "fireChance": "Fire chance",
+            "trackRepairTime": "Track repair time",
            "viewRange": "View range",
            "camouflageStill": "Нерухомо",
            "camouflageMoving": "У русі",
@@ -194,6 +194,7 @@
      "title": "设置",
      "description": "更改 BlitzKit 设置",
      "dev_mode": "开发者模式",
+      "auto_load_models": "Auto-load models",
      "language": "语言"
    },
    "common": {
@@ -412,6 +413,7 @@
          }
        },
        "sandbox": {
+          "load_model": "Load model",
          "poses": {
            "hull_down": "俯角视角",
            "face_hug": "顶牛视角",
@@ -621,6 +623,7 @@
            "hullTraverseSoftTerrain": "水面上车转速率",
            "health": "血量",
            "fireChance": "发动机受击时着火概率",
+            "trackRepairTime": "Track repair time",
            "viewRange": "视野范围",
            "camouflageStill": "静止隐蔽",
            "camouflageMoving": "移动时",
@@ -135,7 +135,7 @@ let regionI = 0;

 console.log("Starting discovery loop...");

-atMaxRate(async ({ _break: break1 }) => {
+await atMaxRate(async ({ _break: break1 }) => {
  if (regions.length === 0) {
    console.log("All regions exhausted, exiting discovery loop...");
    return break1();
@@ -166,18 +166,19 @@ atMaxRate(async ({ _break: break1 }) => {
    fields
  }&account_id=${accountIds}`;

-  atMaxRate(async ({ _break: break2 }) => {
-    if (idRange.length < MAX_IDS_PER_CALL) {
-      console.log(
-        `Removing region ${region.domain} removed due to ID range exhaustion...`,
-      );
-      regions.splice(regionI, 1);
-    }
+  if (idRange.length < MAX_IDS_PER_CALL) {
+    console.log(
+      `Removing region ${region.domain} removed due to ID range exhaustion...`,
+    );
+    regions.splice(regionI, 1);
+  }

-    const response = await fetch(url);
-    const data = (await response.json()) as QuickInfo;
+  await atMaxRate(async ({ _break: break2 }) => {
+    const data = await fetch(url)
+      .then((response) => response.json() as Promise<QuickInfo>)
+      .catch(() => null);

-    if (data.status !== "ok") {
+    if (data === null || data.status !== "ok") {
      console.warn("Failed API call; trying again...");
      return;
    }
@@ -20,7 +20,9 @@ interface MethodContext {
 let lastT = 0;
 const maxDelta = 1000 / API_RATE;
 const DELTA_BUFFER = 0;
-export async function atMaxRate(method: (context: MethodContext) => void) {
+export async function atMaxRate(
+  method: (context: MethodContext) => void | Promise<void>,
+) {
  let isBroken = false;

  const context: MethodContext = {
@@ -39,7 +41,7 @@ export async function atMaxRate(method: (context: MethodContext) => void) {
      await sleep(maxDelta - delta + DELTA_BUFFER);
    }

-    method(context);
+    await method(context);
    lastT = t;
  }
 }
@@ -16,6 +16,11 @@

  cursor: pointer;

+  &[data-disabled="true"] {
+    cursor: default;
+    opacity: 0.5;
+  }
+
  &[data-size="minor"] {
    font-size: 0.7em;
    padding: var(--space-2) var(--space-3);
@@ -45,6 +50,8 @@
  img {
    width: 1em;
    height: 1em;
+
+    object-fit: contain;
  }

  &[data-light-text="true"] {
@@ -79,5 +86,9 @@
  &[data-variant="surface"],
  &[data-variant="outline"] {
    outline: var(--space-1) solid var(--accent-6);
+
+    &[data-high-contrast="true"] {
+      outline: var(--space-1) solid var(--accent-11);
+    }
  }
 }
@@ -8,7 +8,7 @@ export interface ButtonProps extends ComponentProps<"button"> {
  radius?: `${1 | 2 | 3}` | "max";
  variant?: "solid" | "surface" | "soft" | "inverted" | "ghost" | "outline";
  size?: "regular" | "minor" | "major";
-  highContrast?: boolean; // TODO: add high contrast
+  highContrast?: boolean;

  listChild?: boolean;
  parentListChild?: boolean;
@@ -39,6 +39,8 @@ export function Button({

  listChild,
  parentListChild,
+  disabled,
+  highContrast,
  ...props
 }: ButtonProps) {
  return (
@@ -51,6 +53,9 @@ export function Button({
      data-size={size}
      data-list-child={listChild}
      data-parent-list-child={parentListChild}
+      data-high-contrast={highContrast}
+      data-disabled={disabled}
+      disabled={disabled}
      {...props}
    />
  );
@@ -0,0 +1,19 @@
+.checkbox {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+
+  .control {
+    width: 1.25em;
+    height: 1.25em;
+
+    margin: 0;
+
+    accent-color: var(--accent-9);
+  }
+
+  &,
+  * {
+    cursor: pointer;
+  }
+}
@@ -0,0 +1,35 @@
+import { useId, type ReactNode } from "react";
+import { Text } from "../Text";
+import styles from "./index.module.css";
+
+export interface CheckboxProps {
+  checked: boolean;
+  onCheckedChange(checked: boolean): void;
+  children?: ReactNode;
+}
+
+export function Checkbox({
+  checked,
+  onCheckedChange,
+  children,
+}: CheckboxProps) {
+  const id = useId();
+
+  return (
+    <div className={styles.checkbox}>
+      <input
+        className={styles.control}
+        type="checkbox"
+        id={id}
+        checked={checked}
+        onChange={(event) => onCheckedChange(event.target.checked)}
+      />
+
+      {children && (
+        <label htmlFor={id}>
+          <Text lowContrast>{children}</Text>
+        </label>
+      )}
+    </div>
+  );
+}
@@ -1,4 +1,9 @@
-import { alias, availableProvisions, permanentSkills } from "@blitzkit/core";
+import {
+  alias,
+  availableProvisions,
+  MAX_SKILL_LEVEL,
+  permanentSkills,
+} from "@blitzkit/core";
 import { checkConsumableProvisionInclusivity } from "@blitzkit/core/src/blitzkit/checkConsumableProvisionInclusivity";
 import { ComponentPlaceholderIcon } from "@radix-ui/react-icons";
 import {
@@ -153,7 +158,7 @@ export function CompareTable({ stats }: CompareTableProps) {
                      onClick={() => {
                        CompareEphemeral.mutate((draft) => {
                          Object.keys(draft.crewSkills).forEach((skill) => {
-                            draft.crewSkills[skill] = 7;
+                            draft.crewSkills[skill] = MAX_SKILL_LEVEL;
                          });
                        });
                      }}
@@ -1,4 +1,9 @@
-import { alias, permanentSkills, romanize } from "@blitzkit/core";
+import {
+  alias,
+  MAX_SKILL_LEVEL,
+  permanentSkills,
+  romanize,
+} from "@blitzkit/core";
 import { Flex } from "@radix-ui/themes";
 import { api } from "../api/dynamic";
 import { GenericTankComponentButton } from "./ModuleButtons/GenericTankComponentButton";
@@ -34,10 +39,10 @@ export function CrewSkillManager({
                  const draft = { ...skillLevels };

                  if (event.shiftKey) {
-                    draft[skill] = draft[skill] === 0 ? 7 : 0;
+                    draft[skill] = draft[skill] === 0 ? MAX_SKILL_LEVEL : 0;
                  } else {
                    draft[skill] = level - 1;
-                    if (draft[skill] < 0) draft[skill] = 7;
+                    if (draft[skill] < 0) draft[skill] = MAX_SKILL_LEVEL;
                  }

                  onChange(draft);
@@ -1,4 +1,4 @@
-import { alias, SEARCH_KEYS, TIER_ROMAN_NUMERALS } from "@blitzkit/core";
+import { alias, romanize, SEARCH_KEYS } from "@blitzkit/core";
 import { literals } from "@blitzkit/i18n";
 import { TankDefinition } from "@blitzkit/protos";
 import {
@@ -23,10 +23,12 @@ import {
  TextField,
 } from "@radix-ui/themes";
 import fuzzysort from "fuzzysort";
-import { debounce, times } from "lodash-es";
+import { debounce } from "lodash-es";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { api } from "../api/dynamic";
 import { awaitableTankNames } from "../core/awaitables/tankNames";
+import { awaitableTiers } from "../core/awaitables/tiers";
+import { api } from "../core/blitzkit/api";
 import { useLocale } from "../hooks/useLocale";
 import { Guess, GuessState } from "../stores/guess";
 import { classIcons } from "./ClassIcon";
@@ -34,9 +36,10 @@ import { SearchResults } from "./SearchResults";

 const { go } = fuzzysort;

-const [tankNames, tankDefinitions] = await Promise.all([
+const [tankNames, tankDefinitions, TIERS] = await Promise.all([
  awaitableTankNames,
-  api.tanks(),
+  api.tankDefinitions(),
+  awaitableTiers,
 ]);

 const ids = Object.keys(tankDefinitions.tanks);
@@ -160,7 +163,7 @@ export function Guesser() {
                          justify="center"
                        >
                          <Icon width="1em" height="1em" />
-                          {TIER_ROMAN_NUMERALS[result.tier]}
+                          {romanize(result.tier)}
                        </Flex>
                      }
                    />
@@ -189,8 +192,7 @@ export function Guesser() {
          </DropdownMenu.Trigger>

          <DropdownMenu.Content>
-            {times(10, (index) => {
-              const tier = 10 - index;
+            {TIERS.map((tier) => {
              const isSelected = tiers.includes(tier);

              return (
@@ -213,7 +215,7 @@ export function Guesser() {
                  }}
                >
                  {literals(strings.website.tools.guess.tier, {
-                    tier: TIER_ROMAN_NUMERALS[tier],
+                    tier: romanize(tier),
                  })}
                </DropdownMenu.CheckboxItem>
              );
@@ -82,6 +82,7 @@ export function Lighting({ hasPbr }: Props) {
        blur={2 ** 1}
        resolution={2 ** 9}
        depthWrite={false}
+        renderOrder={1}
      />

      {animate && (
@@ -1,3 +1,27 @@
 <script>
+  import locales from "@blitzkit/i18n/locales.json";
+  import { getBestLocale } from "../core/i18n/getBestLocale";

+  const pathname = window.location.pathname;
+  const hasPreference = localStorage.getItem("preferred-locale") !== null;
+  const bestLocale = getBestLocale();
+  const currentLocale =
+    locales.supported.find(
+      ({ locale }) =>
+        pathname === `/${locale}` || pathname.startsWith(`/${locale}/`),
+    )?.locale ?? locales.default;
+
+  if (
+    bestLocale !== currentLocale &&
+    (hasPreference || currentLocale === locales.default)
+  ) {
+    const rawPath =
+      currentLocale === locales.default
+        ? pathname
+        : pathname.slice(`/${currentLocale}`.length) || "/";
+
+    window.location.pathname = `${
+      bestLocale === locales.default ? "" : `/${bestLocale}`
+    }${rawPath}`;
+  }
 </script>
@@ -1,4 +1,4 @@
-import { TIER_ROMAN_NUMERALS } from "@blitzkit/core";
+import { romanize } from "@blitzkit/core";
 import type {
  EngineDefinition,
  GunDefinition,
@@ -42,7 +42,7 @@ export function ModuleManager({
    <Flex gap="1" wrap="wrap">
      <ModuleButton
        module="turret"
-        discriminator={TIER_ROMAN_NUMERALS[modules.turret.tier]}
+        discriminator={romanize(modules.turret.tier)}
        onClick={() => setTurretMenuOpen(true)}
      />

@@ -71,7 +71,7 @@ export function ModuleManager({
                  <ModuleButton
                    variant="ghost"
                    module="turret"
-                    discriminator={TIER_ROMAN_NUMERALS[turret.tier]}
+                    discriminator={romanize(turret.tier)}
                  />{" "}
                  {unwrap(turret.name!)}
                </DropdownMenu.RadioItem>
@@ -83,7 +83,7 @@ export function ModuleManager({

      <ModuleButton
        module="gun"
-        discriminator={TIER_ROMAN_NUMERALS[modules.gun.tier]}
+        discriminator={romanize(modules.gun.tier)}
        onClick={() => setGunMenuOpen(true)}
      />

@@ -111,7 +111,7 @@ export function ModuleManager({
                  <ModuleButton
                    variant="ghost"
                    module="gun"
-                    discriminator={TIER_ROMAN_NUMERALS[gun.tier]}
+                    discriminator={romanize(gun.tier)}
                  />{" "}
                  {unwrap(gun.name!)}
                </DropdownMenu.RadioItem>
@@ -123,7 +123,7 @@ export function ModuleManager({

      <ModuleButton
        module="engine"
-        discriminator={TIER_ROMAN_NUMERALS[modules.engine.tier]}
+        discriminator={romanize(modules.engine.tier)}
        onClick={() => setEngineMenuOpen(true)}
      />

@@ -150,7 +150,7 @@ export function ModuleManager({
                  <ModuleButton
                    variant="ghost"
                    module="engine"
-                    discriminator={TIER_ROMAN_NUMERALS[engine.tier]}
+                    discriminator={romanize(engine.tier)}
                  />{" "}
                  {unwrap(engine.name!)}
                </DropdownMenu.RadioItem>
@@ -162,7 +162,7 @@ export function ModuleManager({

      <ModuleButton
        module="chassis"
-        discriminator={TIER_ROMAN_NUMERALS[modules.track.tier]}
+        discriminator={romanize(modules.track.tier)}
        onClick={() => setTrackMenuOpen(true)}
      />

@@ -189,7 +189,7 @@ export function ModuleManager({
                  <ModuleButton
                    variant="ghost"
                    module="chassis"
-                    discriminator={TIER_ROMAN_NUMERALS[track.tier]}
+                    discriminator={romanize(track.tier)}
                  />{" "}
                  {unwrap(track.name!)}
                </DropdownMenu.RadioItem>
@@ -25,6 +25,7 @@ import { TankSearchFilters } from "./TankSearchFilters";
 const tankDefinitions = await api.tanks();

 const POOL_HEIGHT = "16rem";
+const FILTERS_WIDTH = "32rem";

 export function PlaylistGenerator({ skeleton }: MaybeSkeletonComponentProps) {
  const [largeWarningOpen, setLargeWarningOpen] = useState(false);
@@ -80,14 +81,20 @@ export function PlaylistGenerator({ skeleton }: MaybeSkeletonComponentProps) {
      <Flex justify="center" width="100%" align="center" px="4">
        <Flex
          flexGrow="1"
-          gap="9"
+          gap="6"
          align="center"
          justify="center"
          maxWidth="80rem"
          direction={{ initial: "column-reverse", md: "row" }}
        >
-          <Flex direction="column" gap="4" align="center">
-            <TankSearchFilters />
+          <Flex
+            direction="column"
+            gap="4"
+            align="center"
+            flexShrink="0"
+            width={{ initial: "100%", md: FILTERS_WIDTH }}
+          >
+            <FilterControl />

            <Button
              onClick={() => {
@@ -33,7 +33,7 @@ export function RecentlyViewedTanks() {
  const strings = useStrings();
  const by = TankSort.use((state) => state.by);

-  if (recentlyViewed.length === 0 || by !== "meta.none" || hasFilters) {
+  if (recentlyViewed.length === 0 || by !== null || hasFilters) {
    return null;
  }

@@ -0,0 +1,102 @@
+.scroller {
+  --scroller-curtain-color: var(--gray-1);
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+
+  position: relative;
+
+  .content {
+    overflow: auto;
+
+    padding-bottom: var(--space-4);
+
+    transition: scrollbar-color var(--duration-brief);
+    scrollbar-color: transparent transparent;
+
+    &:hover {
+      scrollbar-color: var(--gray-7) var(--gray-3);
+    }
+  }
+
+  &:hover,
+  &:focus-within {
+    .bar-wrapper {
+      opacity: 1;
+    }
+  }
+
+  &[data-orientation="horizontal"] {
+    .curtain {
+      width: min(25%, var(--space-7));
+      height: calc(100% - var(--space-3) - 2 * var(--space-1));
+
+      position: absolute;
+      top: 0;
+
+      &[data-side="start"] {
+        left: 0;
+        background: linear-gradient(
+          90deg,
+          var(--scroller-curtain-color),
+          transparent
+        );
+      }
+
+      &[data-side="end"] {
+        right: 0;
+        background: linear-gradient(
+          90deg,
+          transparent,
+          var(--scroller-curtain-color)
+        );
+      }
+    }
+  }
+
+  &[data-orientation="vertical"] {
+    min-height: 0;
+
+    .content {
+      flex: 1 1 auto;
+      min-height: 0;
+
+      overflow-x: hidden;
+      overflow-y: auto;
+
+      padding-bottom: 0;
+    }
+
+    .curtain {
+      width: calc(100% - var(--space-3) - 2 * var(--space-1));
+      height: min(25%, var(--space-7));
+
+      position: absolute;
+      left: 0;
+
+      &[data-side="start"] {
+        top: 0;
+        background: linear-gradient(
+          180deg,
+          var(--scroller-curtain-color),
+          transparent
+        );
+      }
+
+      &[data-side="end"] {
+        bottom: 0;
+        background: linear-gradient(
+          180deg,
+          transparent,
+          var(--scroller-curtain-color)
+        );
+      }
+    }
+  }
+
+  .curtain {
+    opacity: 0;
+    pointer-events: none;
+  }
+}
@@ -0,0 +1,78 @@
+import { useEffect, useRef, type ComponentProps } from "react";
+import { clamp } from "three/src/math/MathUtils.js";
+import { classNames } from "../../ui/classNames";
+import styles from "./index.module.css";
+
+interface ScrollerProps extends ComponentProps<"div"> {
+  orientation?: "horizontal" | "vertical";
+}
+
+export function Scroller({
+  children,
+  className,
+  orientation = "horizontal",
+  ...props
+}: ScrollerProps) {
+  const content = useRef<HTMLDivElement>(null!);
+  const curtainStart = useRef<HTMLDivElement>(null!);
+  const curtainEnd = useRef<HTMLDivElement>(null!);
+
+  const isHorizontal = orientation === "horizontal";
+
+  useEffect(() => {
+    function syncCurtains() {
+      const maxScroll = isHorizontal
+        ? content.current.scrollWidth - content.current.clientWidth
+        : content.current.scrollHeight - content.current.clientHeight;
+      const scrollPosition = isHorizontal
+        ? content.current.scrollLeft
+        : content.current.scrollTop;
+
+      if (maxScroll <= 0) {
+        curtainStart.current.style.opacity = "0";
+        curtainEnd.current.style.opacity = "0";
+
+        return;
+      }
+
+      const dimension = isHorizontal
+        ? content.current.clientWidth
+        : content.current.clientHeight;
+      const fadeDistance = Math.min(60, dimension * 0.15);
+      const startOpacity = clamp(scrollPosition / fadeDistance, 0, 1);
+      const endOpacity = clamp(
+        (maxScroll - scrollPosition) / fadeDistance,
+        0,
+        1,
+      );
+
+      curtainStart.current.style.opacity = `${startOpacity}`;
+      curtainEnd.current.style.opacity = `${endOpacity}`;
+    }
+
+    syncCurtains();
+
+    window.addEventListener("resize", syncCurtains);
+    content.current.addEventListener("scroll", syncCurtains);
+
+    return () => {
+      window.removeEventListener("resize", syncCurtains);
+      content.current.removeEventListener("scroll", syncCurtains);
+    };
+  }, [orientation]);
+
+  return (
+    <div
+      className={classNames(styles.scroller, className)}
+      {...props}
+      data-orientation={orientation}
+    >
+      <div className={styles.content} ref={content}>
+        {children}
+      </div>
+
+      <div ref={curtainStart} data-side="start" className={styles.curtain} />
+      <div ref={curtainEnd} data-side="end" className={styles.curtain} />
+    </div>
+  );
+}
@@ -1,4 +1,6 @@
 .section {
+  padding: var(--space-5);
+
  display: flex;
  justify-content: center;

@@ -0,0 +1,84 @@
+.options {
+  width: max-content;
+
+  position: relative;
+  display: grid;
+
+  border-radius: var(--radius-max);
+
+  &[data-size="minor"] {
+    .option {
+      padding: var(--space-2) var(--space-3);
+      font-size: 0.75em;
+    }
+  }
+
+  .indicator {
+    position: absolute;
+    top: 0;
+    height: 100%;
+
+    outline: var(--outline-focus);
+    border-radius: var(--radius-max);
+
+    transition: var(--duration-brief);
+  }
+
+  &[data-variant="solid"] {
+    background-color: var(--gray-3);
+
+    .indicator {
+      background-color: var(--accent-3);
+    }
+  }
+
+  &[data-variant="underline"] {
+    border-radius: 0;
+
+    .indicator {
+      top: auto;
+      bottom: 0;
+
+      background: linear-gradient(transparent, var(--accent-a2));
+
+      outline: none;
+      border-radius: 0;
+
+      border-bottom: var(--space-1) solid var(--accent-9);
+    }
+  }
+
+  .option {
+    position: relative;
+
+    display: flex;
+    justify-content: center;
+
+    padding: var(--space-3) var(--space-4);
+
+    color: var(--gray-11);
+    cursor: pointer;
+
+    input {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      margin: 0;
+      opacity: 0;
+    }
+
+    .label {
+      white-space: nowrap;
+    }
+
+    &:has(input:checked) {
+      color: var(--gray-12);
+    }
+
+    &:has(input:focus-visible) {
+      outline: 2px solid var(--accent-8);
+      outline-offset: 2px;
+      border-radius: var(--radius-max);
+    }
+  }
+}
@@ -0,0 +1,59 @@
+import { type ReactNode } from "react";
+import styles from "./index.module.css";
+
+export interface SegmentedControlOption {
+  value: string;
+  label: ReactNode;
+}
+
+export interface SegmentedControlProps {
+  options: readonly SegmentedControlOption[];
+  value: string;
+  onValueChange(value: string): void;
+  size?: "regular" | "minor";
+  variant?: "solid" | "underline";
+}
+
+export function SegmentedControl({
+  options,
+  value,
+  onValueChange,
+  size = "regular",
+  variant = "solid",
+}: SegmentedControlProps) {
+  const selectedIndex = options.findIndex((option) => option.value === value);
+  const segmentWidth = 100 / options.length;
+
+  return (
+    <div
+      className={styles.options}
+      role="radiogroup"
+      data-size={size}
+      data-variant={variant}
+      style={{
+        gridTemplateColumns: `repeat(${options.length}, minmax(0, 1fr))`,
+      }}
+    >
+      <div
+        className={styles.indicator}
+        style={{
+          left: `${Math.max(selectedIndex, 0) * segmentWidth}%`,
+          width: `${segmentWidth}%`,
+        }}
+        aria-hidden="true"
+      />
+
+      {options.map((option) => (
+        <label className={styles.option} key={option.value}>
+          <input
+            type="radio"
+            value={option.value}
+            checked={option.value === value}
+            onChange={() => onValueChange(option.value)}
+          />
+          <span className={styles.label}>{option.label}</span>
+        </label>
+      ))}
+    </div>
+  );
+}
@@ -128,19 +128,30 @@ export function ShotDisplayCard({ shot, ...props }: ShotDisplayCardProps) {
    ? shotStatusColors[shot.out.status]
    : undefined;
  const inTitleColor = shotStatusColors[shot.in.status];
+  const hasOutLayers = shot.out !== undefined && shot.out.layers.length > 0;
+  const penetrationChance = shot.penetrationChance !== undefined && (
+    <Text color="gray" weight="bold">
+      {literals(strings.common.units.percentage, {
+        value: (shot.penetrationChance * 100).toFixed(0),
+      })}
+    </Text>
+  );

  return (
    <Card variant="classic" {...props}>
      <Flex direction="column" gap="2">
        <Flex direction="column" gap="1">
-          <Text color={inTitleColor} weight="bold">
-            {literals(
-              strings.website.tools.tankopedia.sandbox.dynamic.shot_card.status[
-                shot.in.status
-              ],
-              { damage: Math.round(shot.damage).toLocaleString(locale) }
-            )}
-          </Text>
+          <Flex justify="between" align="center" gap="4">
+            <Text color={inTitleColor} weight="bold">
+              {literals(
+                strings.website.tools.tankopedia.sandbox.dynamic.shot_card
+                  .status[shot.in.status],
+                { damage: Math.round(shot.damage).toLocaleString(locale) }
+              )}
+            </Text>
+
+            {!hasOutLayers && penetrationChance}
+          </Flex>

          <table
            style={{
@@ -204,13 +215,17 @@ export function ShotDisplayCard({ shot, ...props }: ShotDisplayCardProps) {
              </Flex>
            </Inset>

-            <Text color={outTitleColor} weight="bold">
-              {literals(
-                strings.website.tools.tankopedia.sandbox.dynamic.shot_card
-                  .status[shot.out.status],
-                { damage: Math.round(shot.damage).toLocaleString(locale) }
-              )}
-            </Text>
+            <Flex justify="between" align="center" gap="4">
+              <Text color={outTitleColor} weight="bold">
+                {literals(
+                  strings.website.tools.tankopedia.sandbox.dynamic.shot_card
+                    .status[shot.out.status],
+                  { damage: Math.round(shot.damage).toLocaleString(locale) }
+                )}
+              </Text>
+
+              {penetrationChance}
+            </Flex>

            <Flex direction="column">
              {shot.out.layers.map((layer, index) => {
@@ -56,6 +56,36 @@ export type ArmorUserData = {
    }
 );

+const PENETRATION_RANDOMIZATION = 0.05;
+
+function resolvePenetrationChance(shoot: (scale: number) => Shot | null) {
+  function penetrates(scale: number) {
+    const shot = shoot(scale);
+
+    return (shot?.out ?? shot?.in)?.status === "penetration";
+  }
+
+  let low = 1 - PENETRATION_RANDOMIZATION;
+  let high = 1 + PENETRATION_RANDOMIZATION;
+
+  if (penetrates(low)) return 1;
+  if (!penetrates(high)) return 0;
+
+  for (let iteration = 0; iteration < 16; iteration++) {
+    const middle = (low + high) / 2;
+
+    if (penetrates(middle)) {
+      high = middle;
+    } else {
+      low = middle;
+    }
+  }
+
+  return (
+    (1 + PENETRATION_RANDOMIZATION - high) / (2 * PENETRATION_RANDOMIZATION)
+  );
+}
+
 const omitMaterial = new MeshBasicMaterial({
  colorWrite: false,
  depthWrite: true,
@@ -82,6 +112,7 @@ export function SpacedArmorSceneComponent({
      intersections: Intersection[],
      allowRicochet: boolean,
      remainingPenetrationInput?: number,
+      penetrationScale = 1,
    ) => {
      const protagonist = getDuel("protagonist", DuelModule.Tank);
      const antagonist = getDuel("antagonist", DuelModule.Tank);
@@ -119,6 +150,7 @@ export function SpacedArmorSceneComponent({
        Tankopedia.state.protagonist.equipment,
      );
      const penetration =
+        penetrationScale *
        shell.penetration!.near *
        resolvePenetrationCoefficient(
          hasCalibratedShells,
@@ -361,6 +393,7 @@ export function SpacedArmorSceneComponent({
              ricochetIntersections,
              false,
              remainingPenetration,
+              penetrationScale,
            );

            shot.in.status = "ricochet";
@@ -416,6 +449,16 @@ export function SpacedArmorSceneComponent({

                  const shot = shoot(event.point, event.intersections, true)!;

+                  shot.penetrationChance = resolvePenetrationChance((scale) =>
+                    shoot(
+                      event.point,
+                      event.intersections,
+                      true,
+                      undefined,
+                      scale,
+                    ),
+                  );
+
                  Tankopedia.mutate((draft) => {
                    draft.shot = shot;
                  });
@@ -40,4 +40,10 @@
      overflow: hidden;
    }
  }
+
+  .discriminator {
+    display: flex;
+    justify-content: center;
+    gap: var(--space-2);
+  }
 }
@@ -82,7 +82,7 @@ export const TankCard = (props: MaybeSkeletonComponentProps<TankCardProps>) => {

      {props.discriminator && (
        <Text lowContrast align="center">
-          {props.discriminator}
+          <div className={styles.discriminator}>{props.discriminator}</div>
        </Text>
      )}
    </Flex>
@@ -62,11 +62,17 @@ export function TankModel() {

          invalidate();

-          if (material.map) material.map.offset.y += offset;
-          if (material.aoMap) material.aoMap.offset.y += offset;
-          if (material.normalMap) material.normalMap.offset.y += offset;
-          if (material.roughnessMap) material.roughnessMap.offset.y += offset;
-          if (material.metalnessMap) material.metalnessMap.offset.y += offset;
+          const textures = new Set([
+            material.map,
+            material.aoMap,
+            material.normalMap,
+            material.roughnessMap,
+            material.metalnessMap,
+          ]);
+
+          for (const texture of textures) {
+            if (texture) texture.offset.y += offset;
+          }
        }

        function onPointerDown(event: ThreeEvent<PointerEvent>) {
@@ -1,145 +0,0 @@
-import {
-  normalizeBoundingBox,
-  resolveDpm,
-  unionBoundingBox,
-} from "@blitzkit/core";
-import type { TankDefinition } from "@blitzkit/protos";
-import { useMemo } from "react";
-import { api } from "../../../api/dynamic";
-import { resolveReload } from "../../../core/blitzkit/resolveReload";
-import { TankSort } from "../../../stores/tankopediaSort";
-import { TankCard } from "../../TankCard";
-
-interface TankSearchCardProps {
-  tank: TankDefinition;
-  onSelect?: (tank: TankDefinition) => void;
-}
-
-const modelDefinitions = await api.models();
-
-export function TankSearchCard({ tank, onSelect }: TankSearchCardProps) {
-  const by = TankSort.use((state) => state.by);
-  const discriminator = useMemo(() => {
-    if (by.startsWith("meta")) return undefined;
-
-    const turret = tank.turrets.at(-1)!;
-    const gun = turret.guns.at(-1)!;
-    const shell0 = gun.shells[0];
-    const shell1 = gun.shells[1];
-    const shell2 = gun.shells[2];
-    const tracks = tank.tracks.at(-1)!;
-    const engine = tank.engines.at(-1)!;
-    const tankModelDefinition = modelDefinitions.models[tank.id];
-    const turretModelDefinition = tankModelDefinition.turrets[turret.id];
-    const gunModelDefinition = turretModelDefinition.guns[gun.id];
-
-    switch (by) {
-      case "fire.aimTime":
-        return gun.aim_time.toFixed(2);
-      case "fire.caliber":
-        return shell0.caliber.toFixed(0);
-      case "fire.damage":
-        return shell0.armor_damage.toFixed(0);
-      case "fire.moduleDamage":
-        return shell0.module_damage.toFixed(0);
-      case "fire.dispersionMoving":
-        return tracks.dispersion_move.toFixed(3);
-      case "fire.dispersionStill":
-        return gun.dispersion_base.toFixed(3);
-      case "fire.dpm":
-        return resolveDpm(gun, shell0).toFixed(0);
-      case "fire.dpmPremium":
-        return shell1 ? resolveDpm(gun, shell1).toFixed(0) : "--";
-      case "fire.reload":
-        return resolveReload(gun).toFixed(2);
-      case "fire.standardPenetration":
-        return shell0?.penetration!.near.toFixed(0);
-      case "fire.premiumPenetration":
-        return shell1 ? shell1?.penetration!.near.toFixed(0) : "--";
-      case "fire.tertiaryPenetration":
-        return shell1 ? shell2?.penetration!.near.toFixed(0) : "--";
-      case "fire.shellVelocity":
-        return shell0.velocity.toFixed(0);
-      case "fire.shellCapacity":
-        return gun.shell_capacity.toFixed(0);
-      case "fire.shellRange":
-        return shell0.range.toFixed(0);
-      case "fire.gunDepression":
-        return (
-          gunModelDefinition.pitch!.max +
-          (tankModelDefinition.initial_turret_rotation?.pitch ?? 0)
-        ).toFixed(1);
-      case "fire.gunElevation":
-        return (
-          -gunModelDefinition.pitch!.min -
-          (tankModelDefinition.initial_turret_rotation?.pitch ?? 0)
-        ).toFixed(1);
-      case "maneuverability.forwardsSpeed":
-        return tank.speed_forwards.toFixed(0);
-      case "maneuverability.backwardsSpeed":
-        return tank.speed_backwards.toFixed(0);
-      case "maneuverability.power":
-        return engine.power.toFixed(0);
-      case "maneuverability.powerToWeight":
-        return (
-          (1000 * engine.power) /
-          (tank.weight +
-            engine.weight +
-            tracks.weight +
-            turret.weight +
-            gun.weight)
-        ).toFixed(1);
-      case "maneuverability.weight":
-        return (
-          (tank.weight +
-            engine.weight +
-            tracks.weight +
-            turret.weight +
-            gun.weight) /
-          1000
-        ).toFixed(1);
-      case "maneuverability.traverseSpeed":
-        return tracks.traverse_speed.toFixed(1);
-      case "survivability.health":
-        return (tank.health + turret.health).toFixed(0);
-      case "survivability.viewRange":
-        return turret.view_range.toFixed(0);
-      case "survivability.camouflageStill":
-        return (tank.camouflage_still * 100).toFixed(0);
-      case "survivability.camouflageMoving":
-        return (tank.camouflage_moving * 100).toFixed(0);
-      case "survivability.camouflageShooting":
-        return (tank.camouflage_still * gun.camouflage_loss * 100).toFixed(0);
-      case "survivability.volume": {
-        const dimensions = normalizeBoundingBox(
-          unionBoundingBox(
-            tankModelDefinition.bounding_box!,
-            turretModelDefinition.bounding_box!,
-          ),
-        );
-
-        return (dimensions.x * dimensions.y * dimensions.z).toFixed(0);
-      }
-
-      case "survivability.length": {
-        const bounds = normalizeBoundingBox(
-          unionBoundingBox(
-            tankModelDefinition.bounding_box!,
-            turretModelDefinition.bounding_box!,
-          ),
-        );
-
-        return Math.max(bounds.x, bounds.y, bounds.z).toFixed(0);
-      }
-    }
-  }, [by]);
-
-  return (
-    <TankCard
-      key={tank.id}
-      onTankSelect={onSelect}
-      tank={tank}
-      discriminator={discriminator}
-    />
-  );
-}
@@ -1,40 +1,37 @@
 import { CaretDownIcon } from "@radix-ui/react-icons";
+import { characteristicsGroups } from "../../../config/characteristicsGroups";
 import { useStrings } from "../../../hooks/useStrings";
-import type {
-  TankopediaSortBy,
-  TankopediaSortDirection,
-} from "../../../stores/tankopediaPersistent";
+import { TankopediaSortDirection } from "../../../stores/tankopediaPersistent";
 import { TankSort } from "../../../stores/tankopediaSort";
+import { sortableCharacteristics } from "../../../tankopedia/sortableCharacteristics";
+import type { CharacteristicName } from "../../../types/characteristics";
 import { Button } from "../../Button";
 import { DropdownMenu } from "../../DropdownMenu";

 interface ItemProps {
-  by: TankopediaSortBy;
-}
-
-interface ItemProps {
-  by: TankopediaSortBy;
+  by: CharacteristicName;
 }

 function Item({ by }: ItemProps) {
  const strings = useStrings();
-  const _by = TankSort.use((state) => state.by);
+  const selectedBy = TankSort.use((state) => state.by);

  return (
    <DropdownMenu.CheckboxItem
-      checked={_by === by}
+      checked={selectedBy === by}
      onClick={() => {
        TankSort.mutate((draft) => {
          draft.by = by;
        });
      }}
    >
-      {strings.website.common.tank_search.sort[by]}
+      {strings.tanks.characteristics.items[by]}
    </DropdownMenu.CheckboxItem>
  );
 }

 export function Sort() {
+  const by = TankSort.use((state) => state.by);
  const direction = TankSort.use((state) => state.direction);
  const strings = useStrings();

@@ -42,103 +39,79 @@ export function Sort() {
    <DropdownMenu.Root>
      <DropdownMenu.Trigger asChild>
        <Button variant="surface" color="gray">
-          {strings.website.common.tank_search.sort_dropdown.label}
+          {strings.website.common.tank_search.sort.label}
          <CaretDownIcon />
        </Button>
      </DropdownMenu.Trigger>

      <DropdownMenu.Content align="end">
        <DropdownMenu.Label>
-          {strings.website.common.tank_search.sort_dropdown.groups.sort.label}
+          {strings.website.common.tank_search.sort.direction.label}
        </DropdownMenu.Label>

-        <Item by="meta.none" />
+        <DropdownMenu.CheckboxItem
+          checked={by === null || !sortableCharacteristics.has(by)}
+          onClick={() => {
+            TankSort.mutate((draft) => {
+              draft.by = null;
+            });
+          }}
+        >
+          {strings.website.common.tank_search.sort.none}
+        </DropdownMenu.CheckboxItem>

-        <DropdownMenu.Sub>
-          <DropdownMenu.SubTrigger>
-            {strings.website.common.tank_search.sort_dropdown.groups.sort.fire}
-          </DropdownMenu.SubTrigger>
-          <DropdownMenu.SubContent>
-            <Item by="fire.dpm" />
-            <Item by="fire.dpmPremium" />
-            <Item by="fire.reload" />
-            <Item by="fire.caliber" />
-            <Item by="fire.standardPenetration" />
-            <Item by="fire.premiumPenetration" />
-            <Item by="fire.tertiaryPenetration" />
-            <Item by="fire.damage" />
-            <Item by="fire.moduleDamage" />
-            <Item by="fire.shellVelocity" />
-            <Item by="fire.shellRange" />
-            <Item by="fire.shellCapacity" />
-            <Item by="fire.aimTime" />
-            <Item by="fire.dispersionStill" />
-            <Item by="fire.dispersionMoving" />
-            <Item by="fire.gunDepression" />
-            <Item by="fire.gunElevation" />
-          </DropdownMenu.SubContent>
-        </DropdownMenu.Sub>
+        {characteristicsGroups.map((group) => {
+          const items = group.order.filter(
+            (item) => "name" in item && sortableCharacteristics.has(item.name),
+          );

-        <DropdownMenu.Sub>
-          <DropdownMenu.SubTrigger>
-            {
-              strings.website.common.tank_search.sort_dropdown.groups.sort
-                .maneuverability
-            }
-          </DropdownMenu.SubTrigger>
-          <DropdownMenu.SubContent>
-            <Item by="maneuverability.forwardsSpeed" />
-            <Item by="maneuverability.backwardsSpeed" />
-            <Item by="maneuverability.power" />
-            <Item by="maneuverability.powerToWeight" />
-            <Item by="maneuverability.weight" />
-            <Item by="maneuverability.traverseSpeed" />
-          </DropdownMenu.SubContent>
-        </DropdownMenu.Sub>
+          return (
+            <DropdownMenu.Sub key={group.name}>
+              <DropdownMenu.SubTrigger>
+                {
+                  (
+                    strings.tanks.characteristics.titles as Record<
+                      string,
+                      string
+                    >
+                  )[group.name]
+                }
+              </DropdownMenu.SubTrigger>

-        <DropdownMenu.Sub>
-          <DropdownMenu.SubTrigger>
-            {
-              strings.website.common.tank_search.sort_dropdown.groups.sort
-                .survivability
-            }
-          </DropdownMenu.SubTrigger>
-          <DropdownMenu.SubContent>
-            <Item by="survivability.health" />
-            <Item by="survivability.viewRange" />
-            <Item by="survivability.camouflageStill" />
-            <Item by="survivability.camouflageMoving" />
-            <Item by="survivability.camouflageShooting" />
-            <Item by="survivability.volume" />
-            <Item by="survivability.length" />
-          </DropdownMenu.SubContent>
-        </DropdownMenu.Sub>
+              <DropdownMenu.SubContent>
+                {items.map((item) => {
+                  if (!("name" in item)) return null;
+
+                  return <Item key={item.name} by={item.name} />;
+                })}
+              </DropdownMenu.SubContent>
+            </DropdownMenu.Sub>
+          );
+        })}

        <DropdownMenu.Label>
-          {
-            strings.website.common.tank_search.sort_dropdown.groups.direction
-              .label
-          }
+          {strings.website.common.tank_search.sort.direction.label}
        </DropdownMenu.Label>
        <DropdownMenu.RadioGroup
          value={direction}
          onValueChange={(value) => {
+            if (
+              value !== TankopediaSortDirection.Ascending &&
+              value !== TankopediaSortDirection.Descending
+            ) {
+              throw new Error(`Unknown tankopedia sort direction: ${value}`);
+            }
+
            TankSort.mutate((draft) => {
-              draft.direction = value as TankopediaSortDirection;
+              draft.direction = value;
            });
          }}
        >
-          <DropdownMenu.RadioItem value="ascending">
-            {
-              strings.website.common.tank_search.sort_dropdown.groups.direction
-                .ascending
-            }
+          <DropdownMenu.RadioItem value={TankopediaSortDirection.Ascending}>
+            {strings.website.common.tank_search.sort.direction.ascending}
          </DropdownMenu.RadioItem>
-          <DropdownMenu.RadioItem value="descending">
-            {
-              strings.website.common.tank_search.sort_dropdown.groups.direction
-                .descending
-            }
+          <DropdownMenu.RadioItem value={TankopediaSortDirection.Descending}>
+            {strings.website.common.tank_search.sort.direction.descending}
          </DropdownMenu.RadioItem>
        </DropdownMenu.RadioGroup>
      </DropdownMenu.Content>
@@ -1,16 +1,20 @@
-import { TIER_ROMAN_NUMERALS } from "@blitzkit/core";
+import { romanize } from "@blitzkit/core";
 import { Flex, IconButton, Text } from "@radix-ui/themes";
-import { times } from "lodash-es";
 import { memo } from "react";
+import { awaitableTiers } from "../../../core/awaitables/tiers";
 import { TankFilters } from "../../../stores/tankFilters";
 import { TankSort } from "../../../stores/tankopediaSort";

+const TIERS = await awaitableTiers;
+
 export const TierFilter = memo(() => {
  const by = TankSort.use((state) => state.by);
  const search = TankFilters.use((state) => state.search);
  const tiers = TankFilters.use((state) => state.tiers);

-  if (by !== "meta.none" || search) return null;
+  if (by !== null || search) {
+    return null;
+  }

  return (
    <Flex justify="center">
@@ -19,8 +23,7 @@ export const TierFilter = memo(() => {
        overflow="hidden"
        style={{ borderRadius: "var(--radius-full)" }}
      >
-        {times(10, (index) => {
-          const tier = 10 - index;
+        {TIERS.map((tier) => {
          const selected = tiers.includes(tier);

          return (
@@ -40,7 +43,7 @@ export const TierFilter = memo(() => {
                });
              }}
            >
-              <Text size="2">{TIER_ROMAN_NUMERALS[tier]}</Text>
+              <Text size="2">{romanize(tier)}</Text>
            </IconButton>
          );
        })}
@@ -1,10 +1,4 @@
-import {
-  metaSortTank,
-  normalizeBoundingBox,
-  resolveDpm,
-  SEARCH_KEYS,
-  unionBoundingBox,
-} from "@blitzkit/core";
+import { metaSortTank, SEARCH_KEYS } from "@blitzkit/core";
 import { literals } from "@blitzkit/i18n/src/literals";
 import type { TankDefinition } from "@blitzkit/protos";
 import fuzzysort from "fuzzysort";
@@ -12,16 +6,26 @@ import { uniq } from "lodash-es";
 import { memo, useMemo } from "react";
 import usePromise from "react-promise-suspense";
 import { api } from "../../api/dynamic";
+import { characteristics } from "../../config/characteristics";
+import { characteristicRenderConfigs } from "../../config/characteristicsGroups";
 import { awaitableTankNames } from "../../core/awaitables/tankNames";
 import { filterTanks } from "../../core/blitzkit/filterTanks";
-import { resolveReload } from "../../core/blitzkit/resolveReload";
+import { useCharacteristicRenderer } from "../../hooks/useCharacteristicRenderer";
+import { computeDefaultCharacteristics } from "../../hooks/useCharacteristics";
 import { useLocale } from "../../hooks/useLocale";
 import { useStrings } from "../../hooks/useStrings";
 import { App } from "../../stores/app";
 import { TankFilters } from "../../stores/tankFilters";
-import { TankopediaPersistent } from "../../stores/tankopediaPersistent";
-import { SORT_UNITS } from "../../stores/tankopediaPersistent/constants";
+import {
+  TankopediaPersistent,
+  TankopediaSortDirection,
+} from "../../stores/tankopediaPersistent";
 import { TankSort } from "../../stores/tankopediaSort";
+import { sortableCharacteristics } from "../../tankopedia/sortableCharacteristics";
+import {
+  CharacteristicType,
+  type ComputedCharacteristics,
+} from "../../types/characteristics";
 import type { MaybeSkeletonComponentProps } from "../../types/maybeSkeletonComponentProps";
 import { Callout } from "../Callout";
 import { ExperimentIcon } from "../ExperimentIcon";
@@ -44,386 +48,170 @@ export type TankSearchProps = MaybeSkeletonComponentProps & {
  onSelectAll?: (tanks: TankDefinition[]) => void;
 };

-const [gameDefinitions, modelDefinitions, tankDefinitions, tankNames] =
-  await Promise.all([
-    api.game(),
-    api.models(),
-    api.tanks(),
-    awaitableTankNames,
-  ]);
+const [gameDefinitions, tankDefinitions, tankNames] = await Promise.all([
+  api.game(),
+  api.tanks(),
+  awaitableTankNames,
+]);
+const tankDefinitionsArray = Object.values(tankDefinitions.tanks);

 export const TankSearch = memo<TankSearchProps>(
  ({ compact, onSelect, onSelectAll, skeleton }) => {
    const strings = useStrings();
    const locale = useLocale();
+
    const wargaming = App.use((state) => state.logins.wargaming);
-    const awaitedTanksDefinitionsArray = Object.values(tankDefinitions.tanks);
+
    const tankopediaSort = TankSort.use();
    const tankFilters = TankFilters.use();

+    const defaultCharacteristics = useMemo(() => {
+      const computed = new Map<number, ComputedCharacteristics>();
+
+      for (const tank of tankDefinitionsArray) {
+        computed.set(tank.id, computeDefaultCharacteristics(tank));
+      }
+
+      return computed;
+    }, []);
+
    const filtered = usePromise(
-      () => {
-        if (tankFilters.search === null) {
-          return filterTanks(
-            tankFilters,
-            awaitedTanksDefinitionsArray,
-            wargaming?.id,
-          );
-        } else {
-          return Promise.resolve(
-            fuzzysort
-              .go(tankFilters.search, tankNames, { keys: SEARCH_KEYS })
-              .map((result) => tankDefinitions.tanks[result.obj.id]),
+      async () => {
+        let filtered = tankDefinitionsArray;
+
+        console.log("A");
+
+        if (tankopediaSort.by !== null) {
+          console.log("B", filtered.length);
+
+          filtered = filtered.filter((tank) =>
+            defaultCharacteristics.get(tank.id)!.has(tankopediaSort.by!),
          );
+
+          console.log("C", filtered.length);
        }
+
+        if (tankFilters.search === null) {
+          filtered = await filterTanks(tankFilters, filtered, wargaming?.id);
+        } else {
+          filtered = fuzzysort
+            .go(tankFilters.search, tankNames, { keys: SEARCH_KEYS })
+            .map((result) => tankDefinitions.tanks[result.obj.id]);
+        }
+
+        return filtered;
      },
      // react-promise-suspense has awful type annotations
-      [tankFilters] as any,
+      [tankFilters, tankopediaSort.by] as any,
    );
+
    const sorted = useMemo(() => {
-      if (tankFilters.search === null) {
-        let sorted: TankDefinition[];
+      if (tankFilters.search !== null) return filtered;

-        switch (tankopediaSort.by) {
-          case "meta.none":
-            sorted = metaSortTank(filtered, gameDefinitions);
-            break;
+      if (
+        tankopediaSort.by === null ||
+        !sortableCharacteristics.has(tankopediaSort.by)
+      ) {
+        const byMeta = metaSortTank([...filtered], gameDefinitions);

-          case "survivability.health": {
-            sorted = filtered.sort((a, b) => {
-              const aHealth = a.health + a.turrets.at(-1)!.health;
-              const bHealth = b.health + b.turrets.at(-1)!.health;
+        return tankopediaSort.direction === TankopediaSortDirection.Ascending
+          ? byMeta
+          : byMeta.reverse();
+      }
+
+      const values = new Map<number, number | undefined>();
+      const by = tankopediaSort.by;
+      const characteristic = characteristics[by];
+
+      for (const tank of filtered) {
+        const computedCharacteristics = defaultCharacteristics.get(tank.id)!;
+        if (!computedCharacteristics.has(by)) {
+          values.set(tank.id, undefined);
+          continue;
+        }
+
+        const value = computedCharacteristics.get(by);
+
+        let sortValue: number | undefined;
+
+        switch (characteristic.type) {
+          case CharacteristicType.Number: {
+            sortValue = value as number;

-              return aHealth - bHealth;
-            });
            break;
          }

-          case "survivability.viewRange":
-            sorted = filtered.sort(
-              (a, b) =>
-                a.turrets.at(-1)!.view_range - b.turrets.at(-1)!.view_range,
+          case CharacteristicType.NumberList: {
+            const values = value as number[];
+            if (values.length === 0) {
+              sortValue = undefined;
+              break;
+            }
+
+            let sum = 0;
+
+            for (const item of values) {
+              sum += item;
+            }
+
+            sortValue = sum / values.length;
+
+            break;
+          }
+
+          default:
+            throw new Error(
+              `Unsortable characteristic type ${characteristic.type}`,
            );
-            break;
-
-          case "survivability.camouflageStill":
-            sorted = filtered.sort(
-              (a, b) => a.camouflage_still - b.camouflage_still,
-            );
-            break;
-
-          case "survivability.camouflageMoving":
-            sorted = filtered.sort(
-              (a, b) => a.camouflage_moving - b.camouflage_moving,
-            );
-            break;
-
-          case "survivability.camouflageShooting":
-            sorted = filtered.sort(
-              (a, b) =>
-                a.camouflage_still *
-                  a.turrets.at(-1)!.guns.at(-1)!.camouflage_loss -
-                b.camouflage_still *
-                  b.turrets.at(-1)!.guns.at(-1)!.camouflage_loss,
-            );
-            break;
-
-          case "survivability.volume":
-            sorted = filtered.sort((a, b) => {
-              const aTankModelDefinition = modelDefinitions.models[a.id];
-              const bTankModelDefinition = modelDefinitions.models[b.id];
-              const aTurretModelDefinition =
-                aTankModelDefinition.turrets[a.turrets.at(-1)!.id];
-              const bTurretModelDefinition =
-                bTankModelDefinition.turrets[b.turrets.at(-1)!.id];
-              const aSize = normalizeBoundingBox(
-                unionBoundingBox(
-                  aTankModelDefinition.bounding_box!,
-                  aTurretModelDefinition.bounding_box!,
-                ),
-              );
-              const bSize = normalizeBoundingBox(
-                unionBoundingBox(
-                  bTankModelDefinition.bounding_box!,
-                  bTurretModelDefinition.bounding_box!,
-                ),
-              );
-              const aVolume = aSize.x * aSize.y * aSize.z;
-              const bVolume = bSize.x * bSize.y * bSize.z;
-
-              return aVolume - bVolume;
-            });
-            break;
-
-          case "survivability.length":
-            sorted = filtered.sort((a, b) => {
-              const aTankModelDefinition = modelDefinitions.models[a.id];
-              const bTankModelDefinition = modelDefinitions.models[b.id];
-              const aTurretModelDefinition =
-                aTankModelDefinition.turrets[a.turrets.at(-1)!.id];
-              const bTurretModelDefinition =
-                bTankModelDefinition.turrets[b.turrets.at(-1)!.id];
-              const aSize = normalizeBoundingBox(
-                unionBoundingBox(
-                  aTankModelDefinition.bounding_box!,
-                  aTurretModelDefinition.bounding_box!,
-                ),
-              );
-              const bSize = normalizeBoundingBox(
-                unionBoundingBox(
-                  bTankModelDefinition.bounding_box!,
-                  bTurretModelDefinition.bounding_box!,
-                ),
-              );
-              const aLength = Math.max(aSize.x, aSize.y, aSize.z);
-              const bLength = Math.max(bSize.x, bSize.y, bSize.z);
-
-              return aLength - bLength;
-            });
-            break;
-
-          case "fire.dpm":
-            sorted = filtered.sort(
-              (a, b) =>
-                resolveDpm(
-                  a.turrets.at(-1)!.guns.at(-1)!,
-                  a.turrets.at(-1)!.guns.at(-1)!.shells[0],
-                ) -
-                resolveDpm(
-                  b.turrets.at(-1)!.guns.at(-1)!,
-                  b.turrets.at(-1)!.guns.at(-1)!.shells[0],
-                ),
-            );
-            break;
-
-          case "fire.dpmPremium":
-            sorted = filtered.sort(
-              (a, b) =>
-                (a.turrets.at(-1)!.guns.at(-1)!.shells[1]
-                  ? resolveDpm(
-                      a.turrets.at(-1)!.guns.at(-1)!,
-                      a.turrets.at(-1)!.guns.at(-1)!.shells[1],
-                    )
-                  : 0) -
-                (b.turrets.at(-1)!.guns.at(-1)!.shells[1]
-                  ? resolveDpm(
-                      b.turrets.at(-1)!.guns.at(-1)!,
-                      b.turrets.at(-1)!.guns.at(-1)!.shells[1],
-                    )
-                  : 0),
-            );
-            break;
-
-          case "fire.reload":
-            sorted = filtered.sort(
-              (a, b) =>
-                resolveReload(a.turrets.at(-1)!.guns.at(-1)!) -
-                resolveReload(b.turrets.at(-1)!.guns.at(-1)!),
-            );
-            break;
-
-          case "fire.caliber":
-            sorted = filtered.sort(
-              (a, b) =>
-                a.turrets.at(-1)!.guns.at(-1)!.shells[0].caliber -
-                b.turrets.at(-1)!.guns.at(-1)!.shells[0].caliber,
-            );
-            break;
-
-          case "fire.standardPenetration":
-            sorted = filtered.sort(
-              (a, b) =>
-                a.turrets.at(-1)!.guns.at(-1)!.shells[0].penetration!.near -
-                b.turrets.at(-1)!.guns.at(-1)!.shells[0].penetration!.near,
-            );
-            break;
-
-          case "fire.premiumPenetration":
-            sorted = filtered.sort(
-              (a, b) =>
-                (a.turrets.at(-1)!.guns.at(-1)!.shells[1]?.penetration!.near ??
-                  0) -
-                (b.turrets.at(-1)!.guns.at(-1)!.shells[1]?.penetration!.near ??
-                  0),
-            );
-            break;
-
-          case "fire.tertiaryPenetration":
-            sorted = filtered.sort(
-              (a, b) =>
-                (a.turrets.at(-1)!.guns.at(-1)!.shells[2]?.penetration!.near ??
-                  0) -
-                (b.turrets.at(-1)!.guns.at(-1)!.shells[2]?.penetration!.near ??
-                  0),
-            );
-            break;
-
-          case "fire.damage":
-            sorted = filtered.sort(
-              (a, b) =>
-                a.turrets.at(-1)!.guns.at(-1)!.shells[0].armor_damage -
-                b.turrets.at(-1)!.guns.at(-1)!.shells[0].armor_damage,
-            );
-            break;
-
-          case "fire.moduleDamage":
-            sorted = filtered.sort(
-              (a, b) =>
-                a.turrets.at(-1)!.guns.at(-1)!.shells[0].module_damage -
-                b.turrets.at(-1)!.guns.at(-1)!.shells[0].module_damage,
-            );
-            break;
-
-          case "fire.shellVelocity":
-            sorted = filtered.sort(
-              (a, b) =>
-                a.turrets.at(-1)!.guns.at(-1)!.shells[0].velocity -
-                b.turrets.at(-1)!.guns.at(-1)!.shells[0].velocity,
-            );
-            break;
-
-          case "fire.shellRange":
-            sorted = filtered.sort(
-              (a, b) =>
-                a.turrets.at(-1)!.guns.at(-1)!.shells[0].range -
-                b.turrets.at(-1)!.guns.at(-1)!.shells[0].range,
-            );
-            break;
-
-          case "fire.shellCapacity":
-            sorted = filtered.sort(
-              (a, b) =>
-                a.turrets.at(-1)!.guns.at(-1)!.shell_capacity -
-                b.turrets.at(-1)!.guns.at(-1)!.shell_capacity,
-            );
-            break;
-
-          case "fire.aimTime":
-            sorted = filtered.sort(
-              (a, b) =>
-                a.turrets.at(-1)!.guns.at(-1)!.aim_time -
-                b.turrets.at(-1)!.guns.at(-1)!.aim_time,
-            );
-            break;
-
-          case "fire.dispersionStill":
-            sorted = filtered.sort(
-              (a, b) =>
-                a.turrets.at(-1)!.guns.at(-1)!.dispersion_base -
-                b.turrets.at(-1)!.guns.at(-1)!.dispersion_base,
-            );
-            break;
-
-          case "fire.dispersionMoving":
-            sorted = filtered.sort(
-              (a, b) =>
-                a.tracks.at(-1)!.dispersion_move -
-                b.tracks.at(-1)!.dispersion_move,
-            );
-            break;
-
-          case "fire.gunDepression":
-            sorted = filtered.sort(
-              (a, b) =>
-                modelDefinitions.models[a.id].turrets[a.turrets.at(-1)!.id]
-                  .guns[a.turrets.at(-1)!.guns.at(-1)!.id].pitch!.max +
-                (modelDefinitions.models[a.id].initial_turret_rotation?.pitch ??
-                  0) -
-                modelDefinitions.models[b.id].turrets[b.turrets.at(-1)!.id]
-                  .guns[b.turrets.at(-1)!.guns.at(-1)!.id].pitch!.max -
-                (modelDefinitions.models[b.id].initial_turret_rotation?.pitch ??
-                  0),
-            );
-            break;
-
-          case "fire.gunElevation":
-            sorted = filtered.sort(
-              (a, b) =>
-                modelDefinitions.models[b.id].turrets[b.turrets.at(-1)!.id]
-                  .guns[b.turrets.at(-1)!.guns.at(-1)!.id].pitch!.min +
-                (modelDefinitions.models[b.id].initial_turret_rotation?.pitch ??
-                  0) -
-                modelDefinitions.models[a.id].turrets[a.turrets.at(-1)!.id]
-                  .guns[a.turrets.at(-1)!.guns.at(-1)!.id].pitch!.min -
-                (modelDefinitions.models[a.id].initial_turret_rotation?.pitch ??
-                  0),
-            );
-            break;
-
-          case "maneuverability.forwardsSpeed":
-            sorted = filtered.sort(
-              (a, b) => a.speed_forwards - b.speed_forwards,
-            );
-            break;
-
-          case "maneuverability.backwardsSpeed":
-            sorted = filtered.sort(
-              (a, b) => a.speed_backwards - b.speed_backwards,
-            );
-            break;
-
-          case "maneuverability.power":
-            sorted = filtered.sort(
-              (a, b) => a.engines.at(-1)!.power - b.engines.at(-1)!.power,
-            );
-            break;
-
-          case "maneuverability.powerToWeight":
-            sorted = filtered.sort(
-              (a, b) =>
-                a.engines.at(-1)!.power /
-                  (a.weight +
-                    a.engines.at(-1)!.weight +
-                    a.tracks.at(-1)!.weight +
-                    a.turrets.at(-1)!.weight +
-                    a.turrets.at(-1)!.guns.at(-1)!.weight) -
-                b.engines.at(-1)!.power /
-                  (b.weight +
-                    b.engines.at(-1)!.weight +
-                    b.tracks.at(-1)!.weight +
-                    b.turrets.at(-1)!.weight +
-                    b.turrets.at(-1)!.guns.at(-1)!.weight),
-            );
-            break;
-
-          case "maneuverability.weight":
-            sorted = filtered.sort(
-              (a, b) =>
-                a.weight +
-                a.engines.at(-1)!.weight +
-                a.tracks.at(-1)!.weight +
-                a.turrets.at(-1)!.weight +
-                a.turrets.at(-1)!.guns.at(-1)!.weight -
-                (b.weight +
-                  b.engines.at(-1)!.weight +
-                  b.tracks.at(-1)!.weight +
-                  b.turrets.at(-1)!.weight +
-                  b.turrets.at(-1)!.guns.at(-1)!.weight),
-            );
-            break;
-
-          case "maneuverability.traverseSpeed":
-            sorted = filtered.sort(
-              (a, b) =>
-                a.tracks.at(-1)!.traverse_speed -
-                b.tracks.at(-1)!.traverse_speed,
-            );
-            break;
        }

-        return tankopediaSort.direction === "ascending"
-          ? sorted
-          : sorted.reverse();
-      } else {
-        return filtered;
+        values.set(tank.id, sortValue);
      }
+
+      const direction =
+        tankopediaSort.direction === TankopediaSortDirection.Ascending ? 1 : -1;
+
+      return [...filtered].sort((a, b) => {
+        const aValue = values.get(a.id);
+        const bValue = values.get(b.id);
+
+        if (aValue === undefined) return bValue === undefined ? 0 : 1;
+        if (bValue === undefined) return -1;
+
+        if (aValue === bValue) return 0;
+
+        return (aValue < bValue ? -1 : 1) * direction;
+      });
    }, [tankFilters, tankopediaSort]);

-    const data = sorted.map((tank) => ({
-      key: `${tank.id}`,
-      tank,
-      onTankSelect: onSelect,
-    }));
+    console.log("V", sorted.length);
+
+    const sortConfig =
+      tankopediaSort.by !== null &&
+      sortableCharacteristics.has(tankopediaSort.by)
+        ? tankopediaSort.by
+        : undefined;
+
+    const renderCharacteristic = useCharacteristicRenderer();
+
+    const data = sorted.map((tank) => {
+      const tankDefaultCharacteristics = defaultCharacteristics.get(tank.id)!;
+      const shouldRenderDiscriminator =
+        tankopediaSort.by !== null &&
+        tankDefaultCharacteristics.has(tankopediaSort.by);
+
+      return {
+        key: `${tank.id}`,
+        tank,
+        discriminator: shouldRenderDiscriminator
+          ? renderCharacteristic(
+              tankDefaultCharacteristics.get(tankopediaSort.by!)!,
+              characteristicRenderConfigs.get(tankopediaSort.by!)!,
+            )
+          : null,
+        onTankSelect: onSelect,
+      };
+    });

    return (
      <Flex className={styles.container} column gap="4">
@@ -470,16 +258,16 @@ export const TankSearch = memo<TankSearchProps>(
              )}
            </div>

-            {tankopediaSort.by !== "meta.none" && (
+            {sortConfig && (
              <Text color="gray">
                {literals(strings.website.common.tank_search.sorting_by, {
-                  name: strings.website.common.tank_search.sort[
-                    tankopediaSort.by
-                  ],
+                  name: (
+                    strings.tanks.characteristics.items as Record<
+                      string,
+                      string
+                    >
+                  )[sortConfig],
                })}
-                {SORT_UNITS[tankopediaSort.by] === undefined
-                  ? ""
-                  : ` (${SORT_UNITS[tankopediaSort.by]})`}
                , {tankopediaSort.direction}
              </Text>
            )}
@@ -1,9 +1,4 @@
-import {
-  alias,
-  gunTypeOrder,
-  TIER_ROMAN_NUMERALS,
-  treeTypeOrder,
-} from "@blitzkit/core";
+import { alias, gunTypeOrder, romanize, treeTypeOrder } from "@blitzkit/core";
 import { tankClassOrder } from "@blitzkit/core/src/config/tankClassOrder";
 import { literals } from "@blitzkit/i18n";
 import locales from "@blitzkit/i18n/locales.json";
@@ -14,9 +9,9 @@ import {
  ResetIcon,
  TrashIcon,
 } from "@radix-ui/react-icons";
-import { times } from "lodash-es";
 import { Fragment } from "react";
 import { api } from "../../api/dynamic";
+import { awaitableTiers } from "../../core/awaitables/tiers";
 import { useStrings } from "../../hooks/useStrings";
 import { useUnwrapper } from "../../hooks/useUnwrapper";
 import { App } from "../../stores/app";
@@ -153,7 +148,7 @@ const TANK_TYPE_COLORS: Record<TankType, string> = {

 const MAX_ICONS = 4;

-const TIERS = times(10, (i) => 10 - i);
+const TIERS = await awaitableTiers;

 export function TankSearchFilters() {
  return (
@@ -203,7 +198,7 @@ function TiersFilter() {
          <Flex gap="1">
            {tiers.slice(0, MAX_ICONS).map((tier) => (
              <Text size="minor" key={tier}>
-                {TIER_ROMAN_NUMERALS[tier]}
+                {romanize(tier)}
              </Text>
            ))}

@@ -239,7 +234,7 @@ function TiersFilter() {
              key={tier}
            >
              {literals(strings.website.common.tank_search.tier, {
-                tier: TIER_ROMAN_NUMERALS[tier],
+                tier: romanize(tier),
              })}
            </DropdownMenu.CheckboxItem>
          );
@@ -620,13 +615,7 @@ function IndividualShellFilter({
  return (
    <DropdownMenu.Root modal={false}>
      <DropdownMenu.Trigger asChild>
-        <IconButton
-          listChild
-          size="minor"
-          variant="surface"
-          color="gray"
-          highContrast
-        >
+        <IconButton listChild size="minor" variant="surface" color="gray">
          {shells[index] === null && (
            <Text lowContrast className={styles["shell-icon"]}>
              <MissingShellIcon width="1em" height="1em" />
@@ -739,10 +728,10 @@ function OwnershipFilterInternal() {
          borderTopRightRadius: 0,
          borderBottomRightRadius: 0,
        }}
+        listChild
        disabled={!wargaming}
        variant={showOwned ? "solid" : "surface"}
        color={showOwned ? undefined : "gray"}
-        highContrast
        onClick={() => {
          TankFilters.mutate((draft) => {
            draft.showOwned = !draft.showOwned;
@@ -759,10 +748,10 @@ function OwnershipFilterInternal() {
          borderBottomLeftRadius: 0,
          marginLeft: "-1px",
        }}
+        listChild
        disabled={!wargaming}
        variant={showUnowned ? "solid" : "surface"}
        color={showUnowned ? undefined : "gray"}
-        highContrast
        onClick={() => {
          TankFilters.mutate((draft) => {
            draft.showUnowned = !draft.showUnowned;
@@ -789,7 +778,7 @@ function TestFilter() {
        }}
        variant={showNonTesting ? "solid" : "surface"}
        color={showNonTesting ? undefined : "gray"}
-        highContrast
+        listChild
        onClick={() => {
          TankFilters.mutate((draft) => {
            draft.showNonTesting = !draft.showNonTesting;
@@ -810,7 +799,7 @@ function TestFilter() {
        }}
        variant={showTesting ? "solid" : "surface"}
        color={showTesting ? undefined : "gray"}
-        highContrast
+        listChild
        onClick={() => {
          TankFilters.mutate((draft) => {
            draft.showTesting = !draft.showTesting;
@@ -1,60 +0,0 @@
-import { TIER_ROMAN_NUMERALS } from "@blitzkit/core";
-import { literals } from "@blitzkit/i18n/src/literals";
-import { Flex, SegmentedControl, Text, type FlexProps } from "@radix-ui/themes";
-import { useLocale } from "../../../../../../hooks/useLocale";
-import { Duel } from "../../../../../../stores/duel";
-import {
-  Tankopedia,
-  TankopediaRelativeAgainst,
-} from "../../../../../../stores/tankopedia";
-
-export function CompareOptions(props: FlexProps) {
-  const relativeAgainst = Tankopedia.use((state) => state.relativeAgainst);
-  const tank = Duel.use((state) => state.protagonist.tank);
-  const { strings } = useLocale();
-
-  return (
-    <Flex
-      align="center"
-      gap="2"
-      justify="center"
-      direction={{ initial: "column", sm: "row" }}
-      {...props}
-    >
-      <Text color="gray">
-        {strings.website.tools.tankopedia.characteristics.compare.label}
-      </Text>
-
-      <SegmentedControl.Root
-        variant="classic"
-        size="1"
-        value={`${relativeAgainst}`}
-        onValueChange={(value) => {
-          Tankopedia.mutate((draft) => {
-            draft.relativeAgainst = Number(value) as TankopediaRelativeAgainst;
-          });
-        }}
-      >
-        <SegmentedControl.Item value={`${TankopediaRelativeAgainst.Class}`}>
-          {literals(
-            strings.website.tools.tankopedia.characteristics.compare.class,
-            {
-              tier: TIER_ROMAN_NUMERALS[tank.tier],
-              class:
-                strings.common.tank_class_short_plural_lowercase[tank.class],
-            }
-          )}
-        </SegmentedControl.Item>
-        <SegmentedControl.Item value={`${TankopediaRelativeAgainst.Tier}`}>
-          {literals(
-            strings.website.tools.tankopedia.characteristics.compare.tier,
-            { tier: TIER_ROMAN_NUMERALS[tank.tier] }
-          )}
-        </SegmentedControl.Item>
-        <SegmentedControl.Item value={`${TankopediaRelativeAgainst.All}`}>
-          {strings.website.tools.tankopedia.characteristics.compare.all}
-        </SegmentedControl.Item>
-      </SegmentedControl.Root>
-    </Flex>
-  );
-}
@@ -13,6 +13,7 @@ import { modelTransformEvent } from "../../../../../../../core/blitzkit/modelTra
 import { Var } from "../../../../../../../core/radix/var";
 import { useLocale } from "../../../../../../../hooks/useLocale";
 import { Duel } from "../../../../../../../stores/duel";
+import { Tankopedia } from "../../../../../../../stores/tankopedia";
 import type { MaybeSkeletonComponentProps } from "../../../../../../../types/maybeSkeletonComponentProps";
 import { VisualizerCard } from "../VisualizerCard";
 import { VisualizerCornerStat } from "../VisualizerCornerStat";
@@ -43,6 +44,7 @@ export function GunFlexibilityVisualizer({
  const tank = Duel.use((state) => state.protagonist.tank);
  const turret = Duel.use((state) => state.protagonist.turret);
  const gun = Duel.use((state) => state.protagonist.gun);
+  const modelRequested = Tankopedia.use((state) => state.modelRequested);

  const tankModel = modelDefinition.models[tank.id];
  const turretModel = tankModel.turrets[turret.id];
@@ -193,7 +195,7 @@ export function GunFlexibilityVisualizer({
            top="0"
            left="0"
          >
-            {!skeleton && <FlexibilityCanvas />}
+            {!skeleton && modelRequested && <FlexibilityCanvas />}

            <Box
              position="absolute"
@@ -294,7 +296,7 @@ export function GunFlexibilityVisualizer({
            height="100%"
            style={{
              opacity: 2 ** -3,
-              backgroundImage: `url(/assets/images/tankopedia/visualizers/ricochet/armor-hash.png)`,
+              backgroundImage: `url(/media/toys/armor-hash.png)`,
              boxShadow: "inset 0 0 4rem 1rem black",
            }}
          />
@@ -1,185 +0,0 @@
-import { createDefaultSkills } from "@blitzkit/core";
-import { Flex, Progress, Text } from "@radix-ui/themes";
-import { clamp } from "lodash-es";
-import { memo, useMemo, type ComponentProps, type ReactNode } from "react";
-import { api } from "../../../../../../api/dynamic";
-import {
-  tankCharacteristics,
-  type TankCharacteristics,
-} from "../../../../../../core/blitzkit/tankCharacteristics";
-import { tankToDuelMember } from "../../../../../../core/blitzkit/tankToDuelMember";
-import { useDelta } from "../../../../../../hooks/useDelta";
-import { useLocale } from "../../../../../../hooks/useLocale";
-import { Duel } from "../../../../../../stores/duel";
-import {
-  Tankopedia,
-  TankopediaRelativeAgainst,
-} from "../../../../../../stores/tankopedia";
-import { Info, type InfoProps } from "./Info";
-
-type InfoWithDeltaProps = Omit<InfoProps, "name"> & {
-  stats: TankCharacteristics;
-  noRanking?: boolean;
-} & (
-    | {
-        value: keyof TankCharacteristics;
-      }
-    | {
-        value: (tank: TankCharacteristics) => number | undefined;
-        name: ReactNode;
-      }
-  );
-
-const [
-  tankDefinitions,
-  provisionDefinitions,
-  equipmentDefinitions,
-  modelDefinitions,
-  skillDefinitions,
-] = await Promise.all([
-  api.tanks(),
-  api.provisions(),
-  api.equipment(),
-  api.models(),
-  api.skills(),
-]);
-
-export const InfoWithDelta = memo<InfoWithDeltaProps>(
-  ({ stats, indent, noRanking, deltaType, ...props }) => {
-    const { strings } = useLocale();
-    const relativeAgainst = Tankopedia.use((state) => state.relativeAgainst);
-    const uhWhatDoICallThisVariable =
-      typeof props.value === "function"
-        ? props.value(stats)!
-        : (stats[props.value] as number);
-    const delta = useDelta(uhWhatDoICallThisVariable);
-    const protagonistTank = Duel.use((state) => state.protagonist.tank);
-    const shellIndex = Duel.use((state) =>
-      state.protagonist.gun.shells.indexOf(state.protagonist.shell),
-    );
-    const equipmentMatrix = Duel.use(
-      (state) => state.protagonist.equipmentMatrix,
-    );
-    const equalize = Duel.use((state) => state.equalize);
-    const others = useMemo(() => {
-      const defaultSkills = createDefaultSkills(skillDefinitions);
-
-      return Object.values(tankDefinitions.tanks)
-        .filter(
-          (tank) =>
-            (relativeAgainst === TankopediaRelativeAgainst.Class &&
-              tank.tier === protagonistTank.tier &&
-              tank.class === protagonistTank.class) ||
-            (relativeAgainst === TankopediaRelativeAgainst.Tier &&
-              tank.tier === protagonistTank.tier) ||
-            relativeAgainst === TankopediaRelativeAgainst.All,
-        )
-        .map((tank) => {
-          const member = tankToDuelMember(tank, provisionDefinitions);
-
-          if (member.gun.shells[shellIndex] === undefined) {
-            return undefined;
-          }
-
-          return tankCharacteristics(
-            {
-              applyDynamicArmor: false,
-              applyReactiveArmor: false,
-              applySpallLiner: false,
-              camouflage: member.camouflage,
-              consumables: member.consumables,
-              crewSkills: defaultSkills,
-              provisions: member.provisions,
-              engine: member.engine,
-              gun: member.gun,
-              equipmentMatrix: equipmentMatrix,
-              shell: member.gun.shells[shellIndex],
-              stockEngine: tank.engines[0],
-              stockGun: tank.turrets[0].guns[0],
-              stockTrack: tank.tracks[0],
-              stockTurret: tank.turrets[0],
-              tank,
-              track: member.track,
-              turret: member.turret,
-              assaultDistance: member.assaultDistance,
-              equalize,
-            },
-            {
-              equipmentDefinitions,
-              provisionDefinitions,
-              tankModelDefinition: modelDefinitions.models[tank.id],
-            },
-          );
-        })
-        .filter((tank) => {
-          if (tank === undefined) return false;
-
-          const othersValue =
-            typeof props.value === "function"
-              ? props.value(tank)!
-              : (tank[props.value] as number);
-
-          return othersValue !== undefined;
-        }) as TankCharacteristics[];
-    }, [relativeAgainst, shellIndex, equipmentMatrix, equalize]);
-    const betterTanks = others.filter((tank) => {
-      const othersValue =
-        typeof props.value === "function"
-          ? props.value(tank)!
-          : (tank[props.value] as number);
-
-      if (othersValue === undefined) return false;
-      return deltaType === "lowerIsBetter"
-        ? othersValue < uhWhatDoICallThisVariable
-        : othersValue > uhWhatDoICallThisVariable;
-    });
-    const goodness = (others.length - betterTanks.length) / others.length;
-    let color: ComponentProps<typeof Progress>["color"];
-
-    if (goodness <= 0.25) color = "red";
-    else if (goodness <= 0.5) color = "orange";
-    else if (goodness <= 0.75) color = "yellow";
-    else color = "green";
-
-    return (
-      <Flex direction="column">
-        <Info
-          deltaType={deltaType}
-          indent={indent}
-          name={
-            "name" in props
-              ? props.name
-              : strings.website.tools.tankopedia.characteristics.values[
-                  props.value
-                ]
-          }
-          delta={delta}
-          {...props}
-        >
-          {uhWhatDoICallThisVariable}
-        </Info>
-
-        {!noRanking && (
-          <Flex pl={indent ? "2" : "0"} align="center" gap="2">
-            <Progress
-              variant="soft"
-              size="1"
-              value={goodness * 100}
-              color={color}
-              style={{ height: "0.125rem", opacity: 0.5 }}
-            />
-
-            <Text color="gray" size="1">
-              {clamp(betterTanks.length + 1, 1, others.length)} /{" "}
-              {others.length}
-            </Text>
-          </Flex>
-        )}
-      </Flex>
-    );
-  },
-
-  (a, b) =>
-    (typeof a.value === "function" ? a.value(a.stats) : a.stats[a.value]) ===
-    (typeof b.value === "function" ? b.value(b.stats) : b.stats[b.value]),
-);
@@ -69,7 +69,7 @@ export function Shell({ index, stats }: ShellProps & StatsAcceptorProps) {
            borderRadius: '0.25rem',
            overflow: 'hidden',
            maskImage:
-              'url(/assets/images/tankopedia/visualizers/reload/shell.png)',
+              'url(/media/toys/shell.png)',
            maskSize: 'contain',
            maskRepeat: 'no-repeat',
            maskPosition: 'center',
@@ -5,7 +5,7 @@ export function Target() {
    <Box
      style={{
        background:
-          'url(/assets/images/tankopedia/visualizers/reload/background.jpg)',
+          'url(/media/toys/background.jpg)',
        backgroundSize: '25rem',
        backgroundPosition: 'center',
        position: 'absolute',
@@ -60,7 +60,7 @@ export function RicochetVisualizer({ stats }: StatsAcceptorProps) {
            height="100%"
            style={{
              opacity: 2 ** -3,
-              backgroundImage: `url(/assets/images/tankopedia/visualizers/ricochet/armor-hash.png)`,
+              backgroundImage: `url(/media/toys/armor-hash.png)`,
            }}
          />
        </Box>
@@ -24,6 +24,14 @@ export function Survivability({ stats }: StatsAcceptorProps) {
        decimals={0}
        value={(stats) => stats.fireChance * 100}
      />
+      {stats.trackRepairTime !== undefined && (
+        <InfoWithDelta
+          value="trackRepairTime"
+          stats={stats}
+          deltaType="lowerIsBetter"
+          decimals={2}
+        />
+      )}
      <InfoWithDelta value="viewRange" stats={stats} decimals={0} />
      <ViewRangeVisualizer stats={stats} />
      <Info
@@ -28,23 +28,17 @@ export function Equalizer() {
        width="100%"
        style={{
          cursor: "pointer",
-          borderRadius: "var(--radius-3)",
-          backgroundImage: `url(${alias("api", `/gamemodes/Insanity/banner.webp`)})`,
-          backgroundSize: "cover",
+          borderRadius: "var(--radius-3) 0 0  var(--radius-3)",
+          backgroundImage: `
+            linear-gradient(90deg, var(--black-a3), var(--gray-1)),
+            url(${alias("api", `/gamemodes/Insanity/banner.webp`)})
+          `,
+          backgroundSize: "auto, fit",
          backgroundPosition: "50% 25%",
          overflow: "hidden",
        }}
      >
-        <Flex
-          align="center"
-          width="100%"
-          justify="between"
-          p="4"
-          style={{
-            background:
-              "linear-gradient(90deg, var(--black-a3), var(--gray-1))",
-          }}
-        >
+        <Flex align="center" width="100%" justify="between" p="4" style={{}}>
          <Text
            style={{
              textShadow: "0 0 var(--space-1) var(--black-a12)",
@@ -2,7 +2,7 @@ import {
  alias,
  formatCompact,
  tankIcon,
-  TIER_ROMAN_NUMERALS,
+  romanize,
 } from "@blitzkit/core";
 import {
  EngineDefinition,
@@ -93,7 +93,7 @@ function ModuleButton({
          top: isTank ? 8 : 4,
        }}
      >
-        {TIER_ROMAN_NUMERALS[tier]}
+        {romanize(tier)}
      </Text>

      {unlock.cost!.value > 0 && (
@@ -1,3 +1,4 @@
+import { MAX_SKILL_LEVEL } from "@blitzkit/core";
 import { InfoCircledIcon } from "@radix-ui/react-icons";
 import {
  Button,
@@ -59,7 +60,7 @@ export function Skills() {
          onClick={() => {
            Tankopedia.mutate((draft) => {
              Object.keys(draft.skills).forEach((skill) => {
-                draft.skills[skill] = 7;
+                draft.skills[skill] = MAX_SKILL_LEVEL;
              });
            });
          }}
@@ -1,122 +0,0 @@
-import { alias } from "@blitzkit/core";
-import { Box, Flex, Heading, Text } from "@radix-ui/themes";
-import { api } from "../../api/dynamic";
-import { useLocale } from "../../hooks/useLocale";
-import { Duel } from "../../stores/duel";
-
-const [gameDefinitions, consumableDefinitions, provisionDefinitions] =
-  await Promise.all([api.game(), api.consumables(), api.provisions()]);
-
-export function GameModeSection() {
-  const { unwrap, strings } = useLocale();
-  const tank = Duel.use((state) => state.protagonist.tank);
-  const roles = Object.entries(tank.roles);
-
-  if (roles.length === 0) return null;
-
-  return (
-    <Flex direction="column" gap="4" align="center">
-      <Heading size="6">
-        {strings.website.tools.tankopedia.game_modes.title}
-      </Heading>
-
-      <Flex justify="center" gap="4" wrap="wrap" px="4">
-        {roles.map(([id, value]) => {
-          const gameMode = gameDefinitions.gameModes[id];
-
-          return (
-            <Flex
-              key={id}
-              width="16rem"
-              height="20rem"
-              overflow="hidden"
-              direction="column"
-              style={{
-                borderRadius: "var(--radius-3)",
-                background: `url(${alias(
-                  "api",
-                  `/gamemodes/${id}/banner.webp`,
-                )})`,
-                backgroundSize: "cover",
-                backgroundPosition: "center",
-              }}
-            >
-              <Box
-                flexGrow="1"
-                style={{
-                  background: `url(${alias(
-                    "api",
-                    `/gamemodes/${id}/banner.webp`,
-                  )})`,
-                  backgroundSize: "cover",
-                  backgroundPosition: "center",
-                }}
-              />
-
-              <Flex
-                p="3"
-                direction="column"
-                height="98px"
-                flexShrink="0"
-                style={{
-                  backdropFilter: "blur(4rem)",
-                  WebkitBackdropFilter: "blur(4rem)",
-                }}
-                align="center"
-                justify="center"
-              >
-                <Text size="4" weight="bold">
-                  {unwrap(gameMode.name!)}
-                </Text>
-
-                <Flex direction="column">
-                  {gameDefinitions.roles[value].provisions.map((id) => {
-                    const provisions = provisionDefinitions.provisions[id];
-
-                    return (
-                      <Text color="gray" wrap="nowrap" key={id}>
-                        <Flex align="center" gap="1">
-                          <img
-                            style={{
-                              width: "1.5em",
-                              height: "1.5em",
-                              objectFit: "contain",
-                            }}
-                            src={alias("api", `/icons/provisions/${id}.webp`)}
-                            alt={unwrap(provisions.name!)}
-                          />
-                          {unwrap(provisions.name!)}
-                        </Flex>
-                      </Text>
-                    );
-                  })}
-
-                  {gameDefinitions.roles[value].consumables.map((id) => {
-                    const consumable = consumableDefinitions.consumables[id];
-
-                    return (
-                      <Text color="gray" wrap="nowrap" key={id}>
-                        <Flex align="center" gap="1">
-                          <img
-                            style={{
-                              width: "1.5em",
-                              height: "1.5em",
-                              objectFit: "contain",
-                            }}
-                            src={alias("api", `/icons/consumables/${id}.webp`)}
-                            alt={unwrap(consumable.name!)}
-                          />
-                          {unwrap(consumable.name!)}
-                        </Flex>
-                      </Text>
-                    );
-                  })}
-                </Flex>
-              </Flex>
-            </Flex>
-          );
-        })}
-      </Flex>
-    </Flex>
-  );
-}
@@ -31,11 +31,11 @@ export function Thicknesses({ thicknessRange, skeleton }: ThicknessesProps) {
  return (
    <Flex
      position="absolute"
-      right={display === TankopediaDisplay.StaticArmor ? "0" : "-6rem"}
+      right="0"
      top="50%"
      mr="4"
      style={{
-        transform: "translateY(-50%)",
+        transform: `translate(${display === TankopediaDisplay.StaticArmor ? "0" : "calc(100% + var(--space-4))"}, -50%)`,
        userSelect: "none",
        transitionDuration: "200ms",
      }}
@@ -1,7 +1,7 @@
 import {
  alias,
  resolvePenetrationCoefficient,
-  TIER_ROMAN_NUMERALS,
+  romanize,
  uniqueGuns,
 } from "@blitzkit/core";
 import { literals } from "@blitzkit/i18n/src/literals";
@@ -77,6 +77,7 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) {
  const revealed = Tankopedia.use((state) => state.revealed);
  const disturbed = Tankopedia.use((state) => state.disturbed);
  const highGraphics = TankopediaPersistent.use((state) => state.highGraphics);
+  const modelRequested = Tankopedia.use((state) => state.modelRequested);
  const equalize = Duel.use((state) => state.equalize);
  const equalizer = Duel.use((state) => state.antagonist.tank.equalizer);

@@ -136,7 +137,7 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) {
                  mr="2"
                  mb="1"
                >
-                  {TIER_ROMAN_NUMERALS[antagonistGun.tier]}
+                  {romanize(antagonistGun.tier)}
                </Text>

                <img
@@ -165,7 +166,7 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) {
                      })
                    }
                    selected={gun.id === antagonistGun.id}
-                    discriminator={TIER_ROMAN_NUMERALS[gun.tier]}
+                    discriminator={romanize(gun.tier)}
                    secondaryDiscriminator={
                      <Text style={{ fontSize: "0.75em" }}>
                        {literals(strings.common.units.mm, {
@@ -283,7 +284,7 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) {
          <SpallLinerSwitcher />
        </Flex>

-        {!skeleton && (
+        {!skeleton && modelRequested && (
          <Suspense>
            <DynamicArmorSwitcher />
          </Suspense>
@@ -1,11 +1,14 @@
-import { Flex, Heading } from "@radix-ui/themes";
+import { UpdateIcon } from "@radix-ui/react-icons";
+import { Button, Flex, Heading } from "@radix-ui/themes";
 import { useLocale } from "../../../../../../hooks/useLocale";
 import { Duel } from "../../../../../../stores/duel";
 import { Tankopedia } from "../../../../../../stores/tankopedia";
+import type { MaybeSkeletonComponentProps } from "../../../../../../types/maybeSkeletonComponentProps";
 import { Tracker } from "./components/Tracker";

-export function Title() {
-  const { unwrap } = useLocale();
+export function Title({ skeleton }: MaybeSkeletonComponentProps) {
+  const { unwrap, strings } = useLocale();
+  const modelRequested = Tankopedia.use((state) => state.modelRequested);
  const protagonist = Duel.use((state) => state.protagonist.tank);
  const revealed = Tankopedia.use((state) => state.revealed);
  const disturbed = Tankopedia.use((state) => state.disturbed);
@@ -21,6 +24,8 @@ export function Title() {
      onPointerDown={(event) => {
        event.preventDefault();

+        if (!modelRequested) return;
+
        Tankopedia.mutate((draft) => {
          draft.revealed = true;
        });
@@ -60,7 +65,36 @@ export function Title() {
        {name}
      </Heading>

-      {!revealed && <Tracker fontSize={fontSize} />}
+      {!skeleton && !revealed && modelRequested && (
+        <Tracker fontSize={fontSize} />
+      )}
+
+      {!skeleton && !modelRequested && (
+        <Flex
+          position="absolute"
+          left="50%"
+          top="50%"
+          width="min(100%, 16rem)"
+          justify="center"
+          style={{
+            transform: `translate(-50%, calc(${fontSize} * 0.75 + var(--space-4) - 50%))`,
+          }}
+        >
+          <Button
+            variant="solid"
+            highContrast
+            onPointerDown={(event) => event.stopPropagation()}
+            onClick={() => {
+              Tankopedia.mutate((draft) => {
+                draft.modelRequested = true;
+              });
+            }}
+          >
+            <UpdateIcon />
+            {strings.website.tools.tankopedia.sandbox.load_model}
+          </Button>
+        </Flex>
+      )}
    </Flex>
  );
 }
@@ -20,6 +20,7 @@ export function HeroSection({ skeleton }: MaybeSkeletonComponentProps) {
  const canvas = useRef<HTMLCanvasElement>(null!);
  const isFullScreen = useFullScreen();
  const protagonist = Duel.use((state) => state.protagonist.tank);
+  const modelRequested = Tankopedia.use((state) => state.modelRequested);
  const thicknessRange = useMemo(() => {
    const entries = Object.values(tankDefinitions.tanks);
    const filtered = entries.filter(
@@ -131,13 +132,15 @@ export function HeroSection({ skeleton }: MaybeSkeletonComponentProps) {
                top="0"
                left="0"
              >
-                {!skeleton && (
-                  <TankSandbox ref={canvas} thicknessRange={thicknessRange} />
+                {!skeleton && modelRequested && (
+                  <Suspense>
+                    <TankSandbox ref={canvas} thicknessRange={thicknessRange} />
+                  </Suspense>
                )}
              </Box>
            </Box>

-            <Title />
+            <Title skeleton={skeleton} />

            <Options
              skeleton={skeleton}
@@ -1,4 +1,4 @@
-import { alias, TIER_ROMAN_NUMERALS } from "@blitzkit/core";
+import { alias, romanize } from "@blitzkit/core";
 import { TankPriceType, TankType } from "@blitzkit/protos";
 import { Box, Flex } from "@radix-ui/themes";
 import { Var } from "../../../core/radix/var";
@@ -80,7 +80,7 @@ export function MetaSection() {
                    </Flex>
                  </Listing>
                  <Listing label={strings.website.tools.tankopedia.meta.tier}>
-                    {TIER_ROMAN_NUMERALS[protagonist.tier]}
+                    {romanize(protagonist.tier)}
                  </Listing>
                  <Listing
                    label={strings.website.tools.tankopedia.meta.type}
@@ -1,4 +1,4 @@
-import { alias, formatCompact, TIER_ROMAN_NUMERALS } from "@blitzkit/core";
+import { alias, formatCompact, romanize } from "@blitzkit/core";
 import { literals } from "@blitzkit/i18n/src/literals";
 import { Box, Flex, Skeleton, Text } from "@radix-ui/themes";
 import { api } from "../../../../api/dynamic";
@@ -90,7 +90,7 @@ export function Node({ id, highlight, nextIds, skeleton }: NodeProps) {
          <Flex direction="column" align="center">
            <Flex gap="2" align="center">
              <Text color="gray" size="1">
-                {TIER_ROMAN_NUMERALS[tank.tier]}
+                {romanize(tank.tier)}
              </Text>
              <Text wrap="nowrap">{unwrap(tank.name!)}</Text>
            </Flex>
@@ -127,7 +127,7 @@ export function Node({ id, highlight, nextIds, skeleton }: NodeProps) {
              </Text>
            </Flex>

-            {averages && nextTanks && tank.tier !== 10 && (
+            {averages && nextTanks && (
              <Text color="gray" size="1" mt="2">
                {skeleton && <Skeleton height="1em" width="4em" />}
                {!skeleton &&
@@ -192,7 +192,7 @@ export function TechTreeSection({ skeleton }: MaybeSkeletonComponentProps) {
            );
          })}

-          {master.tier < 10 && (
+          {master.successors.length > 0 && (
            <>
              <Arrow />
              {master.successors!.map((id, index) => (
@@ -1,16 +1,29 @@
 .characteristics-wrapper {
+  display: flex;
+  flex-direction: column;
+
+  container-type: inline-size;
+
+  gap: var(--space-4);
  margin: var(--space-4);

  --base-cell-width: 20rem;
  --group-span: 7;

-  container-type: inline-size;
+  .compare-options {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-4);
+  }

  .characteristics {
    --N: round(down, 100cqw / var(--base-cell-width));
    --cell-width: calc(100cqw / var(--N));
    --cell-height: calc(var(--cell-width) / var(--group-span));

+    margin-bottom: calc(-1 * var(--cell-height));
+
    display: grid;
    grid-template-columns: repeat(
      auto-fill,
@@ -35,7 +48,7 @@

        display: flex;
        align-items: center;
-        margin: 0 calc(var(--space-4));
+        margin: 0 calc(var(--space-3));

        .center {
          flex: 1;
@@ -67,8 +80,6 @@
        grid-auto-rows: inherit;

        .item {
-          padding: 0 var(--space-3);
-
          grid-row: span 1;

          display: flex;
@@ -76,6 +87,10 @@
          justify-content: center;
          gap: var(--space-2);

+          &[data-indent="true"] {
+            padding-left: var(--space-4);
+          }
+
          .value {
            display: flex;
            justify-content: space-between;
@@ -102,11 +117,19 @@

              .bar {
                height: 100%;
+                transition: var(--duration-brief);
              }
            }
          }
        }

+        .label {
+          grid-row: span 1;
+
+          display: flex;
+          align-items: center;
+        }
+
        .toy {
          grid-row: span var(--group-span);
          padding: var(--space-4) 0;
@@ -115,10 +138,6 @@
            width: 100%;
            height: 100%;

-            display: flex;
-            align-items: center;
-            justify-content: center;
-
            background-color: var(--gray-2);
            outline: var(--gray-5) solid var(--space-1);
            border-radius: var(--space-3);
@@ -1,13 +1,24 @@
+import { romanize } from "@blitzkit/core";
+import { literals } from "@blitzkit/i18n/src/literals";
+import { useRef } from "react";
 import { characteristicsGroups } from "../../config/characteristicsGroups";
+import { toys } from "../../config/toys";
 import { useCharacteristicRenderer } from "../../hooks/useCharacteristicRenderer";
+import { DuelModule, useDuel } from "../../hooks/useDuel";
+import { useRankings } from "../../hooks/useRankings";
 import { useStrings } from "../../hooks/useStrings";
+import { Tankopedia, TankopediaRelativeAgainst } from "../../stores/tankopedia";
+import type { CharacteristicRank } from "../../tankopedia/calculateRankings";
 import type {
+  CharacteristicName,
  CharacteristicRenderConfig,
  CharacteristicReturnType,
  CharacteristicsGroup,
  ComputedCharacteristics,
+  ToyName,
 } from "../../types/characteristics";
 import { Heading } from "../Heading";
+import { SegmentedControl } from "../SegmentedControl";
 import { Text } from "../Text";
 import styles from "./index.module.css";

@@ -18,8 +29,12 @@ interface TankopediaCharacteristicsProps {
 export function TankopediaCharacteristics({
  characteristics,
 }: TankopediaCharacteristicsProps) {
+  const rankings = useRankings(characteristics);
+
  return (
    <div className={styles["characteristics-wrapper"]}>
+      <CompareOptions />
+
      <div className={styles.characteristics}>
        {characteristicsGroups.map((group) => {
          const items = group.order.filter(
@@ -34,6 +49,7 @@ export function TankopediaCharacteristics({
              key={group.name}
              group={group}
              characteristics={characteristics}
+              rankings={rankings}
            />
          );
        })}
@@ -45,14 +61,20 @@ export function TankopediaCharacteristics({
 interface GroupProps {
  group: CharacteristicsGroup;
  characteristics: ComputedCharacteristics;
+  rankings: Map<CharacteristicName, CharacteristicRank>;
 }

-function Group({ group, characteristics }: GroupProps) {
+function Group({ group, characteristics, rankings }: GroupProps) {
  const strings = useStrings();
  const toys = group.order.filter((item) => "toy" in item).length;
-  const items = group.order.filter(
+  const characteristicsCount = group.order.filter(
    (item) => "name" in item && characteristics.has(item.name),
  ).length;
+  const labelsCount =
+    characteristicsCount > 0
+      ? group.order.filter((item) => "label" in item).length
+      : 0;
+  const items = characteristicsCount + labelsCount;
  const groupSpan = `calc(${toys} * var(--group-span) + ${items} + 2)`;
  const contentSpan = `calc(${toys} * var(--group-span) + ${items})`;

@@ -87,9 +109,16 @@ function Group({ group, characteristics }: GroupProps) {
      >
        {group.order.map((item) => (
          <>
-            {"toy" in item && <Toy {...item} />}
-            {"name" in item && characteristics.get(item.name) && (
-              <Item config={item} value={characteristics.get(item.name)!} />
+            {"toy" in item && (
+              <ToyAssigner characteristics={characteristics} {...item} />
+            )}
+            {"label" in item && <Label {...item} />}
+            {"name" in item && characteristics.has(item.name) && (
+              <Item
+                config={item}
+                value={characteristics.get(item.name)!}
+                ranking={rankings.get(item.name)}
+              />
            )}
          </>
        ))}
@@ -100,18 +129,35 @@ function Group({ group, characteristics }: GroupProps) {
  );
 }

+interface LabelProps {
+  label: string;
+}
+
+function Label({ label }: LabelProps) {
+  const strings = useStrings();
+
+  return (
+    <div className={styles.label}>
+      <Text lowContrast>
+        {(strings.tanks.characteristics.items as Record<string, string>)[label]}
+      </Text>
+    </div>
+  );
+}
+
 interface ItemProps {
  config: CharacteristicRenderConfig;
  value: CharacteristicReturnType;
+  ranking?: CharacteristicRank;
 }

-function Item({ config, value }: ItemProps) {
+function Item({ config, value, ranking }: ItemProps) {
  const strings = useStrings();
  const renderCharacteristic = useCharacteristicRenderer();
  const hasUnits = config.units !== undefined;

  return (
-    <span className={styles.item}>
+    <span className={styles.item} data-indent={config.indent}>
      <div className={styles.value}>
        <Text lowContrast>
          {
@@ -128,17 +174,67 @@ function Item({ config, value }: ItemProps) {
        </Text>
      </div>

-      <div className={styles.ranking}>
-        <Bar value={0.5} />
+      {ranking && (
+        <div className={styles.ranking}>
+          <Bar value={ranking.score} />

-        <Text lowContrast size="minor" className={styles.number}>
-          1 / 132
-        </Text>
-      </div>
+          <Text lowContrast size="minor" className={styles.number}>
+            {literals(strings.units.fraction, {
+              numerator: ranking.rank,
+              denominator: ranking.total,
+            })}
+          </Text>
+        </div>
+      )}
    </span>
  );
 }

+function CompareOptions() {
+  const tank = useDuel("protagonist", DuelModule.Tank);
+  const relativeAgainst = Tankopedia.use((state) => state.relative_against);
+
+  const strings = useStrings();
+
+  const options = useRef([
+    {
+      value: `${TankopediaRelativeAgainst.ClassAndTier}`,
+      relativeAgainst: TankopediaRelativeAgainst.ClassAndTier,
+      label: literals(strings.tanks.characteristics.compare.class, {
+        tier: romanize(tank.tier),
+        class: strings.common.tank_class_short_plural_lowercase[tank.class],
+      }),
+    },
+    {
+      value: `${TankopediaRelativeAgainst.Tier}`,
+      relativeAgainst: TankopediaRelativeAgainst.Tier,
+      label: literals(strings.tanks.characteristics.compare.tier, {
+        tier: romanize(tank.tier),
+      }),
+    },
+    {
+      value: `${TankopediaRelativeAgainst.All}`,
+      relativeAgainst: TankopediaRelativeAgainst.All,
+      label: strings.tanks.characteristics.compare.all,
+    },
+  ]);
+
+  return (
+    <div className={styles["compare-options"]}>
+      <Text lowContrast>{strings.tanks.characteristics.compare.label}</Text>
+      <SegmentedControl
+        options={options.current}
+        value={`${relativeAgainst}`}
+        onValueChange={(value) => {
+          Tankopedia.mutate((draft) => {
+            draft.relative_against = Number(value);
+          });
+        }}
+      />
+    </div>
+  );
+}
+
 interface BarProps {
  value: number;
 }
@@ -168,15 +264,22 @@ function Bar({ value }: BarProps) {
  );
 }

-interface ToyProps {
-  toy: string;
+interface ToyAssignerProps {
+  toy: ToyName;
+  characteristics: ComputedCharacteristics;
 }

-function Toy({ toy }: ToyProps) {
+function ToyAssigner({ toy, characteristics }: ToyAssignerProps) {
+  const Toy = toys[toy];
+
  return (
    <div className={styles.toy}>
      <div className={styles.sandbox}>
-        <Text lowContrast>{toy} toy</Text>
+        {Toy ? (
+          <Toy characteristics={characteristics} />
+        ) : (
+          <Text lowContrast>{toy}</Text>
+        )}
      </div>
    </div>
  );
@@ -0,0 +1,64 @@
+.section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-5);
+  padding: var(--space-4);
+
+  .cards {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: var(--space-4);
+    width: 100%;
+
+    .card {
+      width: 16rem;
+      height: 20rem;
+      display: flex;
+      flex: 0 0 auto;
+      flex-direction: column;
+      overflow: hidden;
+      border-radius: var(--space-3);
+      background-size: cover;
+      background-position: center;
+
+      .banner {
+        flex: 1;
+        background-size: cover;
+        background-position: center;
+      }
+
+      .info {
+        display: flex;
+        min-height: 6.125rem;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: var(--space-2);
+        padding: var(--space-3);
+        backdrop-filter: blur(4rem);
+        -webkit-backdrop-filter: blur(4rem);
+
+        .abilities {
+          display: flex;
+          flex-direction: column;
+          align-items: flex-start;
+
+          .ability {
+            display: flex;
+            align-items: center;
+            gap: var(--space-1);
+            white-space: nowrap;
+
+            img {
+              width: 1.5em;
+              height: 1.5em;
+              object-fit: contain;
+            }
+          }
+        }
+      }
+    }
+  }
+}
@@ -0,0 +1,93 @@
+import { alias } from "@blitzkit/core";
+import { api } from "../../api/dynamic";
+import { DuelModule, useDuel } from "../../hooks/useDuel";
+import { useStrings } from "../../hooks/useStrings";
+import { useUnwrapper } from "../../hooks/useUnwrapper";
+import { Heading } from "../Heading";
+import { Text } from "../Text";
+import styles from "./index.module.css";
+
+const [gameDefinitions, consumableDefinitions, provisionDefinitions, tanks] =
+  await Promise.all([
+    api.game(),
+    api.consumables(),
+    api.provisions(),
+    api.tanks(),
+  ]);
+
+export function TankopediaGameModeAbilities() {
+  const unwrap = useUnwrapper();
+  const strings = useStrings();
+  const tank = useDuel("protagonist", DuelModule.Tank);
+  const roles = Object.entries(tank.roles);
+
+  if (roles.length === 0) return null;
+
+  return (
+    <section className={styles.section}>
+      <Heading size="3">{strings.tanks.game_modes.title}</Heading>
+
+      <div className={styles.cards}>
+        {roles.map(([id, value]) => {
+          const gameMode = gameDefinitions.gameModes[id];
+          const role = gameDefinitions.roles[value];
+          const banner = alias("api", `/gamemodes/${id}/banner.webp`);
+
+          return (
+            <article
+              key={id}
+              className={styles.card}
+              style={{ backgroundImage: `url(${banner})` }}
+            >
+              <div
+                className={styles.banner}
+                style={{ backgroundImage: `url(${banner})` }}
+              />
+
+              <div className={styles.info}>
+                <Text size="major" weight="bold" align="center">
+                  {unwrap(gameMode.name!)}
+                </Text>
+
+                <div className={styles.abilities}>
+                  {role.provisions.map((id) => {
+                    const provisions = provisionDefinitions.provisions[id];
+
+                    return (
+                      <Ability
+                        key={`provision-${id}`}
+                        icon={alias("api", `/icons/provisions/${id}.webp`)}
+                        name={unwrap(provisions.name!)}
+                      />
+                    );
+                  })}
+
+                  {role.consumables.map((id) => {
+                    const consumable = consumableDefinitions.consumables[id];
+
+                    return (
+                      <Ability
+                        key={`consumable-${id}`}
+                        icon={alias("api", `/icons/consumables/${id}.webp`)}
+                        name={unwrap(consumable.name!)}
+                      />
+                    );
+                  })}
+                </div>
+              </div>
+            </article>
+          );
+        })}
+      </div>
+    </section>
+  );
+}
+
+function Ability({ icon, name }: { icon: string; name: string }) {
+  return (
+    <Text lowContrast className={styles.ability}>
+      <img src={icon} alt={name} />
+      {name}
+    </Text>
+  );
+}
@@ -1,6 +1,4 @@
 .section {
-  max-width: 21rem;
-
  display: flex;
  flex-direction: column;
  align-items: flex-start;
@@ -13,6 +11,31 @@

    .upgrade-buttons {
      display: flex;
+      gap: var(--space-2);
+    }
+  }
+
+  .crew-skills {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+
+    .row {
+      display: flex;
+      gap: inherit;
+    }
+
+    .skill {
+      position: relative;
+
+      .level {
+        position: absolute;
+
+        right: var(--space-1);
+        bottom: var(--space-1);
+
+        font-size: var(--font-size-minor);
+      }
    }
  }

@@ -22,6 +45,10 @@
    gap: var(--space-2);
  }

+  .shells {
+    display: flex;
+  }
+
  .status {
    display: flex;
    flex-direction: column;
@@ -51,8 +78,8 @@
  }

  .consumables {
-    display: flex;
-    flex-wrap: wrap;
+    display: grid;
+    grid-template-columns: repeat(3, max-content);
    gap: var(--space-3);

    .consumable-wrapper {
Author	SHA1	Message	Date
tresabhi	b00a63a9f8	sorting	2026-10-15 00:38:01 -05:00
tresabhi	8ec7fcb90a	ui shit	2026-10-13 21:14:42 -05:00
tresabhi	830e1597e7	revive sandbox	2026-10-13 21:03:06 -05:00
tresabhi	3131217600	custom scroller for loadout	2026-10-13 20:53:15 -05:00
tresabhi	0b740e3f60	port scroller	2026-10-13 20:40:47 -05:00
tresabhi	1416d64e34	add skills	2026-10-13 20:37:53 -05:00
tresabhi	bc6257a0c3	reloads	2026-10-12 10:47:00 -05:00
tresabhi	3d8cfc3aeb	reload visualizer	2026-10-12 10:34:01 -05:00
tresabhi	1c4ef7c129	add container type to get container widht	2026-10-12 00:28:03 -05:00
tresabhi	a649995cdc	nest styles	2026-10-12 00:08:11 -05:00
tresabhi	df53f687f7	bar trans	2026-10-12 00:06:02 -05:00
tresabhi	cae63a70b0	traverse toy	2026-10-12 00:04:47 -05:00
tresabhi	de80519f06	ricochet toy	2026-10-11 16:49:54 -05:00
tresabhi	f935adb70e	start of port	2026-10-11 16:27:53 -05:00
tresabhi	3902c63a65	rename	2026-10-11 16:02:08 -05:00
tresabhi	e7b81f39b8	shell selector	2026-10-11 16:01:02 -05:00
tresabhi	9692110733	invert logic	2026-10-11 15:47:02 -05:00
tresabhi	ae2839cb83	ranks	2026-10-11 15:44:42 -05:00
tresabhi	eb0c35d6c6	max cons and provs	2026-10-11 14:00:09 -05:00
tresabhi	1f0392681a	shell params	2026-10-11 13:42:20 -05:00
tresabhi	53eebc7a43	game mode abilities	2026-10-11 13:28:38 -05:00
tresabhi	5c482e0bac	speed	2026-10-11 01:41:18 -05:00
tresabhi	fe28738fe4	reorder	2026-10-11 01:38:20 -05:00
tresabhi	e1bc11644d	hull traverse speeds	2026-10-11 01:36:34 -05:00
tresabhi	e7708ce01b	indent	2026-10-11 01:14:08 -05:00
tresabhi	9a66fb5115	terrain coeffs	2026-10-11 01:03:35 -05:00
tresabhi	62da186a25	frontal and back depression	2026-10-11 00:47:00 -05:00
tresabhi	95318d0a99	woohoo more data driven stats!	2026-10-11 00:43:08 -05:00
tresabhi	9c67fd3204	a few imports	2026-10-11 00:37:39 -05:00
tresabhi	1b08393f65	Merge branch 'main' into data-driven	2026-10-11 00:34:39 -05:00
tresabhi	7f7d0cc499	remove outdated docs	2026-10-10 16:41:57 -05:00
TrèsAbhi	0c91ee3600	New Crowdin updates (#389 ) * New translations en.json (Ukrainian) [ci skip] * New translations en.json (Chinese Simplified) [ci skip] * New translations en.json (French) [ci skip] * New translations en.json (Spanish) [ci skip] * New translations en.json (Japanese) [ci skip] * New translations en.json (Polish) [ci skip] * New translations en.json (Portuguese) [ci skip] * New translations en.json (Russian) [ci skip]	2026-10-09 23:33:06 -05:00
tresabhi	1988ecff92	smaller titles	2026-10-09 18:20:11 -05:00
tresabhi	ff03f8ffb2	remove bold	2026-10-09 18:17:56 -05:00
tresabhi	d050776628	format	2026-10-09 18:14:59 -05:00
tresabhi	78bff2cdd2	logs	2026-10-09 18:13:22 -05:00
tresabhi	072174ad45	promote version	2026-10-09 18:01:10 -05:00
TrèsAbhi	03f2bcdc1a	Merge pull request #366 from Hitjack007/track-repair-time	2026-10-09 17:29:38 -05:00
TrèsAbhi	b6ae34dafa	Merge pull request #377 from Hitjack007/armor-penetration-chance	2026-10-09 17:28:05 -05:00
TrèsAbhi	2e10052732	Merge pull request #282 from Hitjack007/armor-controls-edge	2026-10-09 17:06:22 -05:00
TrèsAbhi	9a95306b37	Merge pull request #284 from Hitjack007/mixer-mobile	2026-10-09 17:03:52 -05:00
tresabhi	fbc4355984	remove clamped vw	2026-10-09 17:02:54 -05:00
TrèsAbhi	24026a95ee	Merge pull request #359 from Hitjack007/flag-offset	2026-10-09 16:57:27 -05:00
TrèsAbhi	8f4a43fc8a	Merge pull request #357 from Hitjack007/playlist-filters-layout	2026-10-09 16:55:20 -05:00
tresabhi	646d6fa7d5	center align and max width 32rem	2026-10-09 16:54:37 -05:00
TrèsAbhi	37fae7477d	Merge branch 'main' into playlist-filters-layout	2026-10-09 16:53:35 -05:00
Mark Greene	940c3c537b	Feature: track repair time in Tankopedia Adds track repair time to the Tankopedia survivability stats, matching the value the game lists. - Added a required `repair_time` to track definitions, filled from each chassis's hysteresis health divided by its health regen per second - Applied the toolbox, the repair crew skill and the protective kit as multiplicative repair speed bonuses - Added a Track repair time row under fire chance; it appears once the definitions are regenerated on the next build Fixes #308	2026-10-08 18:02:05 +13:00
Mark Greene	fbdfa2c063	Feature: Penetration chance in the armor shot card Shows the chance a shot penetrates in the dynamic armor shot card, right-aligned on the shot's result line. - Penetration varies by ±5% (the same randomisation the armor highlighter shader uses), so the chance is the share of that range where the shot's final outcome is a penetration - Re-runs the existing shot calculation at different penetration values, so spaced armor, HEAT gap losses and ricochets are taken into account - For ricochets the chance is shown on the ricocheted shot's line; HE splashes don't count as penetrations - Adds the `shot_card.stats.penetration_chance` string Fixes #342	2026-10-08 18:00:57 +13:00
tresabhi	7234c39ad8	move credits back	2026-10-07 21:32:38 -05:00
TrèsAbhi	c292adac41	Merge pull request #356 from Hitjack007/track-texture-scroll-rates	2026-10-07 17:05:52 -05:00
TrèsAbhi	1af104d4d6	Merge branch 'main' into track-texture-scroll-rates	2026-10-07 17:01:58 -05:00
TrèsAbhi	7b7513f227	Merge pull request #355 from Hitjack007/restore-locale-redirect	2026-10-07 17:01:01 -05:00
tresabhi	02f5cc0686	remove redundant logic	2026-10-07 17:00:47 -05:00
TrèsAbhi	6f1d653d54	Merge branch 'main' into restore-locale-redirect	2026-10-07 16:59:43 -05:00
tresabhi	92c8b90bb3	remove api check	2026-10-07 16:56:40 -05:00
TrèsAbhi	1b807e6d0e	Merge pull request #360 from Hitjack007/equalizer-background-sliver	2026-10-07 16:48:29 -05:00
tresabhi	0e7b020d60	fix sliver	2026-10-07 16:48:08 -05:00
TrèsAbhi	eda5d10290	Merge branch 'main' into equalizer-background-sliver	2026-10-07 16:37:48 -05:00
TrèsAbhi	85e93cd827	Merge pull request #361 from Hitjack007/contact-shadows-low-angles	2026-10-07 16:36:58 -05:00
TrèsAbhi	bc2dd8c7b7	Merge branch 'main' into contact-shadows-low-angles	2026-10-07 16:35:43 -05:00
TrèsAbhi	904d50f4c3	New Crowdin updates (#379 )	2026-10-07 16:35:15 -05:00
TrèsAbhi	112472762d	Merge pull request #362 from Hitjack007/discover-ids-await-loop	2026-10-07 16:34:49 -05:00
TrèsAbhi	f6e5fabb65	Merge pull request #363 from Hitjack007/stable-tank-sort-order	2026-10-07 16:33:25 -05:00
tresabhi	e19d0d5895	revert tank exclusion	2026-10-07 16:32:48 -05:00
TrèsAbhi	aa6268a86b	Merge branch 'main' into stable-tank-sort-order	2026-10-07 16:30:42 -05:00
TrèsAbhi	0f878485b3	Merge pull request #364 from Hitjack007/tier-eleven-compatibility	2026-10-07 16:28:33 -05:00
tresabhi	0e119b6ba8	optimize awaitable tiers	2026-10-07 16:27:38 -05:00
tresabhi	3397e7f67b	truthy array	2026-10-07 16:25:34 -05:00
TrèsAbhi	de03a2ab95	Merge branch 'main' into tier-eleven-compatibility	2026-10-07 16:23:11 -05:00
tresabhi	d4e649804e	add astro cleaning script	2026-10-07 16:15:07 -05:00
TrèsAbhi	c31d5705eb	Merge pull request #367 from Hitjack007/tank-model-auto-load	2026-10-07 16:11:04 -05:00
tresabhi	16be5faae6	use UpdateIcon	2026-10-07 16:08:56 -05:00
tresabhi	e1b079ca02	high contrast button	2026-10-07 16:06:52 -05:00
tresabhi	00149a3d9d	simplify strings	2026-10-07 16:03:41 -05:00
TrèsAbhi	e3e94e2b49	Merge branch 'main' into tank-model-auto-load	2026-10-07 15:59:34 -05:00
tresabhi	5ce927be4e	force bun even with node installed	2026-10-07 10:14:44 -05:00
tresabhi	f5dc3684d2	some of reload	2026-10-05 17:45:56 -05:00
tresabhi	03b8ffe7e5	Merge branch 'main' into data-driven	2026-10-05 11:35:26 -05:00
tresabhi	c70fae8162	game strings	2026-10-05 11:24:29 -05:00
tresabhi	d79e0ddb5d	caching for strings	2026-10-05 11:24:01 -05:00
tresabhi	448e36492d	contain icons in buttons	2026-10-05 10:41:44 -05:00
Mark Greene	541da65bfc	Feature: option to turn off automatic tank model loading Lets people on limited data stop the Tankopedia from downloading 3D models automatically. - Added an Automatically load 3D models switch to the settings page, on by default - When off, the tank page hero shows a Load 3D model button where the loading bar sits - Held back every model download on the tank page until requested, including the dynamic armor switcher and the gun flexibility visualizer - Wrapped the tank sandbox in its own suspense boundary so the loading bar shows real progress instead of the whole page waiting on the model - Measured loading progress from when each loading bar appears so it always starts empty - Added the English strings; other languages fall back until translated Fixes #311	2026-10-05 19:52:46 +13:00
Mark Greene	e4e92d76b4	Feature: tier XI compatibility Prepares BlitzKit for tier XI tanks ahead of their release. Tier X was hardcoded as the maximum in the tank search filters, the guesser and the tech tree, and had no roman numeral beyond X. - Added `XI` to `TIER_ROMAN_NUMERALS` - Added an awaitable tier list derived from the highest tier in the tank definitions, so nothing changes until tier XI tanks exist - Used it for the tank search tier filters and the guesser tier picker and defaults - Made the tech tree check for successors instead of assuming tier X is the last tier Fixes #302	2026-10-05 18:18:19 +13:00
Mark Greene	273881c460	Fix: keep tank order stable on select Tanks sharing the same tier, nation, class and type were shown in an arbitrary order that changed after selecting a tank. The meta sort had no tiebreaker, and the filtered list was sorted and reversed in place, so each re-sort started from the previous reversed order and flipped tied tanks around. - Added tank ID as the first sort key in `metaSortTank` so tied tanks always come out in the same order - Sorted a copy of the tank search results, pre-sorted by ID, instead of the cached list - Added an `exclude` option to tank search and used it in Compare so tanks already being compared can't be added again, including through select all or by swapping another slot Fixes #313	2026-10-05 18:00:43 +13:00
Mark Greene	3aefe7d985	Fix: await the ID discovery loop so it runs to completion The ID discovery script exited about a second after starting. Since the switch to `atMaxRate`, neither the discovery loop nor the request loop was awaited, and `atMaxRate` didn't await its callback, so the script went straight to `save()`, committed and exited while overlapping duplicate requests failed in the background. - Awaited both `atMaxRate` loops and the callback inside `atMaxRate` - Moved the ID range exhaustion check out of the retry loop so retries can't remove extra regions - Treated network and JSON errors as failed API calls so a long run retries instead of crashing without saving Fixes #306	2026-10-05 17:33:01 +13:00
Mark Greene	bfe31053a9	Fix: keep contact shadows visible at low camera angles Contact shadows under the tank disappeared when the camera orbited low enough to look up at it. The shadow plane and the ground disc are both transparent and centred on the origin, so three.js sorts them by camera depth. Looking upward flips that order, and because the shadow doesn't write depth, the ground disc was drawn over it. - Gave `ContactShadows` a `renderOrder` of 1 so it always renders after the ground disc Fixes #299	2026-10-05 17:28:01 +13:00
Mark Greene	a5eac5572e	Fix: remove background sliver under equalizer toggle gradient On some browsers a thin sliver of the Insanity banner showed through along the rounded edges of the equalizer toggle, most visibly on the right where the gradient is opaque. The banner and the gradient were painted on two separately clipped elements, so their anti-aliased edges didn't line up. - Moved the gradient onto the outer box as the top layer of its `backgroundImage`, above the banner - Removed the separate gradient layer from the inner flex Fixes #297	2026-10-05 17:20:52 +13:00
Mark Greene	643e1dd352	Fix: crop transparent padding from fade flags The fade flag images are 2:1 but the flag only fills the left part, with the rest transparent. That made `cover` + `center` in the tech tree node crop and offset the visible flag. - Trim the transparent border from the fade flag in the `/flags/fade/[id].webp` route using `sharp` - Revert the tech tree node back to `cover` + `center`, since the image is now just the flag	2026-10-05 08:10:52 +13:00
Mark Greene	fbba0bf13b	Fix: constrain playlist filter width The filters on the playlist page stretched into one long strip beside the tank pool, squeezing the pool into the remaining space. Changes - Place the filters and the generate button in a fixed-width column (`22rem`) on medium screens and up so the filter buttons wrap compactly - Stretch the generate button to the column width - Let the tank pool take the remaining width - Tighten the gap between the two columns - Keep the existing stacked layout on small screens	2026-10-04 20:07:52 +13:00
Mark Greene	c2c586c2e7	Fix: scroll track textures at the same rate Dragging a tank's track scrolled its roughness/metalness texture at twice the speed of the base color and normal textures, so highlights drifted off the track links. Cause - `translateTexture` added the scroll offset to `roughnessMap` and `metalnessMap` separately - glTF has a single metallic-roughness texture, and the loader assigns that same texture object to both slots, so it received the offset twice Changes - Collect the track's maps in a `Set` before scrolling so a texture shared between slots is offset exactly once	2026-10-04 20:00:51 +13:00
Mark Greene	aaf0e52be4	Fix: restore redirect to the user's preferred locale Users were no longer sent to their preferred locale. `LocaleRedirector` was emptied in `115fa5aca` after its previous versions caused repeated redirects, and nothing replaced it. Cause - The earlier logic compared the best locale (a string) against the current locale entry (an object), so the check was always true on non-default locale pages - That made the redirect fire repeatedly, which led to the logic being removed entirely Changes - Derive the current locale from the URL, treating the default locale as unprefixed to match how pages are generated - Redirect only when the best locale differs from the current locale, so it stops after one hop - Redirect users with a saved `preferred-locale` from any page - Redirect users without a saved preference from default-locale URLs only, using their browser language, so shared locale links are respected - Preserve the rest of the path when swapping the locale prefix - Skip `/api` paths	2026-10-04 19:47:20 +13:00
Mark Greene	6907e5fb7a	Fix: mixer buttons clipping at the screen edges on small phones The mixer's hull/turret/gun row is about 440px wide at its fixed sizes and is centered with `left: 50%` and `translateX(-50%)`, so on phones narrower than that it overflowed past both edges. Use smaller button sizes on phones and scale the tank images with the viewport (`clamp(2rem, 11vw, 4em)`), with smaller separators and gaps. From 520px up the layout is unchanged.	2026-10-04 15:17:51 +13:00
Mark Greene	e5e2f2505c	Fix: static armor controls peeking in at the screen edge The static armor panel hid itself with a fixed `right: -6rem`. In languages with longer labels (e.g. Spanish) the panel is wider than that, so part of it stayed visible at the edge. Anchor the panel at `right: 0` and slide it out with a transform based on its own width (`translateX(calc(100% + var(--space-4)))`) when static armor isn't active, so it always clears the edge regardless of label length.	2026-10-04 14:50:10 +13:00