Merge branch 'main' into data-driven

packages/core/src/blitzkit/api/server/1_tanks.ts

@@ -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,

packages/core/src/blitzkit/metaSortTank.ts

@@ -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),

packages/core/src/blitzkit/tankDefinitions/constants.ts

@@ -54,6 +54,7 @@ export const TIER_ROMAN_NUMERALS: Record<number, string> = {
   8: "VIII",
   9: "IX",
   10: "X",
+  11: "XI",
 };
 
 export const flags: Record<string, string> = {

packages/core/src/types/vehicleDefinitions.ts

@@ -34,6 +34,8 @@ export interface VehicleDefinitions {
       };
       level: number;
       hullPosition: string;
+      hysteresisHealth: number;
+      healthRegenPerSec: number;
       armor: {
         leftTrack:
           | number

packages/i18n/strings/en.json

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

packages/i18n/strings/es.json

@@ -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",

packages/i18n/strings/fr.json

@@ -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",

packages/i18n/strings/ja.json

@@ -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": "移動時",

packages/i18n/strings/pl.json

@@ -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",

packages/i18n/strings/pt.json

@@ -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",

packages/i18n/strings/ru.json

@@ -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": "В движении",

packages/i18n/strings/uk.json

@@ -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": "У русі",

packages/i18n/strings/zh.json

@@ -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": "移动时",

packages/scripts/src/discoverIds/index.ts

@@ -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;
     }

packages/scripts/src/discoverIds/time.ts

@@ -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;
   }
 }

packages/website/src/components/Guesser.tsx

@@ -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);
@@ -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 (

packages/website/src/components/Lighting.tsx

@@ -82,6 +82,7 @@ export function Lighting({ hasPbr }: Props) {
         blur={2 ** 1}
         resolution={2 ** 9}
         depthWrite={false}
+        renderOrder={1}
       />
 
       {animate && (

packages/website/src/components/LocaleRedirector.astro

@@ -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>

packages/website/src/components/PlaylistGenerator.tsx

@@ -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={() => {

packages/website/src/components/ShotDisplayCard.tsx

@@ -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) => {

packages/website/src/components/SpacedArmorSceneComponent.tsx

@@ -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;
                   });

packages/website/src/components/TankModel.tsx

@@ -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>) {

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

@@ -1,10 +1,12 @@
 import { TIER_ROMAN_NUMERALS } from "@blitzkit/core";
 import { Flex, IconButton, Text } from "@radix-ui/themes";
-import { times } from "lodash-es";
 import { memo } from "react";
+import { 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);
@@ -19,8 +21,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 (

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

@@ -153,7 +153,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 (

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

@@ -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"

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

@@ -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

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

@@ -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)",

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

@@ -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",
       }}

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

@@ -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);
 
@@ -283,7 +284,7 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) {
           <SpallLinerSwitcher />
         </Flex>
 
-        {!skeleton && (
+        {!skeleton && modelRequested && (
           <Suspense>
             <DynamicArmorSwitcher />
           </Suspense>

packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/Title/index.tsx

@@ -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>
   );
 }

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

@@ -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}

packages/website/src/components/Tankopedia/TechTreeSection/components/Node.tsx

@@ -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 &&

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

@@ -192,7 +192,7 @@ export function TechTreeSection({ skeleton }: MaybeSkeletonComponentProps) {
             );
           })}
 
-          {master.tier < 10 && (
+          {master.successors.length > 0 && (
             <>
               <Arrow />
               {master.successors!.map((id, index) => (

packages/website/src/core/awaitables/tiers.ts

@@ -0,0 +1,12 @@
+import { times } from "lodash-es";
+import { api } from "../blitzkit/api";
+
+export const awaitableTiers = api.tankDefinitions().then((tankDefinitions) => {
+  let max = 0;
+
+  for (const tank of Object.values(tankDefinitions.tanks)) {
+    if (tank.tier > max) max = tank.tier;
+  }
+
+  return times(max, (index) => max - index);
+});

packages/website/src/core/blitzkit/tankCharacteristics.ts

@@ -119,6 +119,7 @@ export function tankCharacteristics(
   const hasImprovedVerticalStabilizer = equipment(122);
   const hasDownImprovedVerticalStabilizer = equipment(124);
   const hasImprovedSuspension = equipment(123);
+  const hasToolbox = equipment(113);
 
   const hasTungsten = consumable(45);
   const hasAdrenaline = consumable(18);
@@ -518,6 +519,12 @@ export function tankCharacteristics(
   }
 
   const fireChance = engine.fire_chance * fireChanceCoefficient;
+  const trackRepairTime = track.repair_time
+    ? track.repair_time /
+      ((hasToolbox ? 1.2 : 1) *
+        (1 + (crewSkills.repair ?? 0) * 0.04) *
+        (hasProtectiveKit ? 1.1 : 1))
+    : undefined;
   const viewRange = turret.view_range * viewRangeCoefficient;
   const camouflageStill = tank.camouflage_still * camouflageCoefficientStill;
   const camouflageMoving =
@@ -602,6 +609,7 @@ export function tankCharacteristics(
     hullTraverseSoftTerrain,
     health,
     fireChance,
+    trackRepairTime,
     viewRange,
     camouflageStill,
     camouflageMoving,

packages/website/src/hooks/useStableProgress.ts

@@ -3,11 +3,13 @@ import { useRef } from "react";
 
 export function useStableProgress() {
   const { loaded, total } = useProgress();
+  const baseline = useRef(loaded);
   const progress = useRef(0);
+  const pending = total - baseline.current;
 
   progress.current = Math.max(
     progress.current,
-    total === 0 ? 0 : (loaded / total) * 100
+    pending <= 0 ? 0 : ((loaded - baseline.current) / pending) * 100
   );
 
   return progress.current;

packages/website/src/pages/[...chunk_api]/flags/fade/[id].webp.ts

@@ -1,3 +1,4 @@
+import sharp from "sharp";
 import type { APIContext, GetStaticPathsItem } from "astro";
 import { mixStaticPaths } from "../../../../astro/mixStaticPaths";
 import { vfs } from "../../../../core/blitzkit/vfs";
@@ -29,7 +30,10 @@ export const getStaticPaths = mixStaticPaths(_getStaticPaths, async () => {
 });
 
 export async function GET({ props }: APIContext<{ path: string }>) {
-  const bytes = new Uint8Array(await vfs.file(props.path));
+  const bytes = await sharp(new Uint8Array(await vfs.file(props.path)))
+    .trim({ background: { r: 0, g: 0, b: 0, alpha: 0 }, threshold: 1 })
+    .webp()
+    .toBuffer();
 
-  return new Response(bytes);
+  return new Response(new Uint8Array(bytes));
 }

packages/website/src/pages/[...chunk_default]/[...locale]/mixer/_index.tsx

@@ -94,7 +94,7 @@ function ModuleChooser({
         <Dialog.Trigger>
           <Button
             variant="surface"
-            size={{ initial: "3", md: "4" }}
+            size={{ initial: "2", xs: "3", md: "4" }}
             style={{
               overflow: "clip",
               borderTopRightRadius: subSelector ? 0 : undefined,
@@ -137,7 +137,7 @@ function ModuleChooser({
           <Popover.Trigger>
             <IconButton
               variant="surface"
-              size={{ initial: "3", md: "4" }}
+              size={{ initial: "2", xs: "3", md: "4" }}
               style={{
                 overflow: "clip",
                 borderTopLeftRadius: 0,
@@ -204,7 +204,7 @@ function ModuleChooser({
 
 function ModuleSeparator() {
   return (
-    <Text size="5" color="gray" trim="end">
+    <Text size={{ initial: "3", xs: "5" }} color="gray" trim="end">
       <CaretRightIcon width="1em" height="1em" />
     </Text>
   );
@@ -260,7 +260,7 @@ function Content({ skeleton }: MaybeSkeletonComponentProps) {
           </Button>
         </Flex>
 
-        <Flex gap="2" align="center">
+        <Flex gap={{ initial: "1", xs: "2" }} align="center">
           <ModuleChooser
             skeleton={skeleton}
             tank={hullTankId.id}

packages/website/src/pages/[...chunk_default]/[...locale]/settings/_index.tsx

@@ -18,6 +18,10 @@ export function Page({ locale }: LocaleAcceptorProps) {
 
 function Content({ locale }: LocaleAcceptorProps) {
   const developerMode = App.useDeferred((state) => state.developerMode, false);
+  const autoLoadModels = App.useDeferred(
+    (state) => state.autoLoadModels,
+    true,
+  );
   const { strings } = useLocale();
 
   return (
@@ -36,6 +40,19 @@ function Content({ locale }: LocaleAcceptorProps) {
           />
         </Flex>
 
+        <Flex align="center" gap="2" justify="between">
+          <Text>{strings.website.settings.auto_load_models}</Text>
+          <Switch
+            variant="classic"
+            checked={autoLoadModels}
+            onCheckedChange={(checked) =>
+              App.mutate((draft) => {
+                draft.autoLoadModels = checked;
+              })
+            }
+          />
+        </Flex>
+
         <Flex align="center" gap="2" justify="between">
           <Text>{strings.website.settings.language}</Text>
           <LocaleSwitcher locale={locale} />

packages/website/src/stores/app/index.ts

@@ -8,6 +8,7 @@ export interface WargamingLogin {
 
 export interface App {
   developerMode: boolean;
+  autoLoadModels: boolean;
   policiesAgreementIndex: number;
   logins: {
     wargaming?: WargamingLogin;
@@ -17,6 +18,7 @@ export interface App {
 export const App = new Soapstone<App>(
   {
     developerMode: false,
+    autoLoadModels: true,
     policiesAgreementIndex: -1,
     logins: {},
   },

packages/website/src/stores/guess.ts

@@ -1,6 +1,8 @@
-import type { TankDefinition } from "@blitzkit/protos";
-import { times } from "lodash-es";
-import { Soapstone } from "soapstone";
+import type { TankDefinition } from "@blitzkit/core";
+import { Varuna } from "varuna";
+import { awaitableTiers } from "../core/awaitables/tiers";
+
+const tiers = await awaitableTiers;
 
 export enum GuessState {
   Correct,
@@ -25,5 +27,5 @@ export const Guess = new Soapstone<Guess, [TankDefinition]>((tank) => ({
   correctGuesses: 0,
   streak: 0,
   helpingReveal: false,
-  tiers: times(10, (index) => index + 1),
+  tiers,
 }));

packages/website/src/stores/tankopedia.ts

@@ -41,6 +41,7 @@ export type Shot = {
   containsGaps: boolean;
   damage: number;
   splashRadius?: number;
+  penetrationChance?: number;
 
   in: {
     surfaceNormal: Vector3;
@@ -88,6 +89,7 @@ interface Tankopedia {
   antagonist: TankState;
   environment: TankEnvironment;
 
+  modelRequested: boolean;
   shot?: Shot;
   skills: Record<string, number>;
   relativeAgainst: TankopediaRelativeAgainst;
@@ -127,6 +129,8 @@ export const Tankopedia = new Soapstone<Tankopedia, [TankDefinition]>(
 
     environment: { equalize: false, distance: 0 },
 
+    modelRequested: false,
+
     relativeAgainst: TankopediaRelativeAgainst.Class,
     editStatic: false,
     skills: createDefaultSkills(skills),