New translations en.json (Russian)

.github/workflows/host-bot.yml

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

docs/changelogs/1.27.17.md

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

docs/changelogs/1.27.18.md

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

docs/changelogs/1.27.19.md

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

package.json

@@ -1,7 +1,7 @@
 {
   "name": "blitzkit",
   "private": true,
-  "version": "1.27.19",
+  "version": "1.27.16",
   "description": "🎉 Tools for everything World of Tanks Blitz",
   "type": "module",
   "types": "./types.d.ts",

packages/i18n/strings/en.json

@@ -861,13 +861,6 @@
     },
 
     "tools": {
-      "mixer": {
-        "name": "Mixer",
-        "button": "Mix and match",
-        "description": "Mix tank modules",
-        "seo_description": "Mix and match hulls, turrets, and guns of tanks in World of Tanks Blitz"
-      },
-
       "guess": {
         "name": "Guess the tank",
         "button": "Guess away",
@@ -894,10 +887,6 @@
         "tank_seo_description": "%s1 armor, statistics, equipment, provisions, and more. %s2 DPM, %s3hp alpha, %s4mm penetration, %s5kph top speed, %s6hp health.",
 
         "visualizers": {
-          "reload": {
-            "skip": "Skip"
-          },
-
           "assault": {
             "title": "Assault shells"
           },
@@ -946,7 +935,9 @@
             "green_penetration": "Green penetration",
             "hide_model_under_armor": "Hide model under armor",
             "opaque": "Opaque",
-            "dev_wireframe": "DEV: wireframe"
+            "dev_wireframe": "DEV: wireframe",
+            "environment": "Environment",
+            "show_grid": "Show grid"
           },
 
           "screenshot": {

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

@@ -14,6 +14,7 @@ export const PrimaryArmorScene = memo(() => {
   const wrapper = useRef<Group>(null);
   const turretContainer = useRef<Group>(null);
   const gunContainer = useRef<Group>(null);
+  // const protagonist = Duel.use((draft) => draft.protagonist);
   const tank = Duel.use((state) => state.protagonist.tank);
   const track = Duel.use((state) => state.protagonist.track);
   const turret = Duel.use((state) => state.protagonist.turret);

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

@@ -80,7 +80,7 @@ export function PrimaryArmorSceneComponent({
   });
 
   useEffect(() => {
-    function handleShellChange() {
+    async function handleShellChange() {
       const duel = duelStore.getState();
       const tankopediaEphemeral = tankopediaEphemeralStore.getState();
       const shell = tankopediaEphemeral.customShell ?? duel.antagonist.shell;
@@ -97,8 +97,14 @@ export function PrimaryArmorSceneComponent({
       material.uniforms.damage.value = shell.armor_damage;
       material.uniforms.explosionRadius.value = shell.explosion_radius;
 
-      handleProtagonistEquipmentChange(duel.protagonist.equipmentMatrix, true);
-      handleAntagonistEquipmentChange(duel.antagonist.equipmentMatrix, true);
+      await handleProtagonistEquipmentChange(
+        duel.protagonist.equipmentMatrix,
+        true,
+      );
+      await handleAntagonistEquipmentChange(
+        duel.antagonist.equipmentMatrix,
+        true,
+      );
 
       invalidate();
     }
@@ -115,12 +121,12 @@ export function PrimaryArmorSceneComponent({
     function handleWireframeChange(wireframe: boolean) {
       material.wireframe = wireframe;
     }
-    function handleProtagonistEquipmentChange(
+    async function handleProtagonistEquipmentChange(
       equipment: EquipmentMatrix,
       noInvalidate = false,
     ) {
       const duel = duelStore.getState();
-      const hasEnhancedArmor = hasEquipment(
+      const hasEnhancedArmor = await hasEquipment(
         110,
         duel.protagonist.tank.equipment_preset,
         equipment,
@@ -131,7 +137,7 @@ export function PrimaryArmorSceneComponent({
 
       if (!noInvalidate) invalidate();
     }
-    function handleAntagonistEquipmentChange(
+    async function handleAntagonistEquipmentChange(
       equipment: EquipmentMatrix,
       noInvalidate = false,
     ) {
@@ -139,7 +145,7 @@ export function PrimaryArmorSceneComponent({
       const tankopediaEphemeral = tankopediaEphemeralStore.getState();
       const shell = tankopediaEphemeral.customShell ?? duel.antagonist.shell;
       const penetration = shell.penetration.near;
-      const hasCalibratedShells = hasEquipment(
+      const hasCalibratedShells = await hasEquipment(
         103,
         duel.antagonist.tank.equipment_preset,
         equipment,

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

@@ -37,7 +37,7 @@ float getDistance(vec2 coord, float depth) {
 
 vec3 getPenetrationColor(bool isThreeCalibersRule, bool couldHaveRicochet) {
   if (advancedHighlighting && couldHaveRicochet) {
-    return vec3(0.0, 1.0, isThreeCalibersRule ? 1.0 : 0.0);
+    return vec3(0.0, 1.0, isThreeCalibersRule ? 0.5 : 0.0);
   }
 
   return vec3(0.0, 1.0, 0.0);
@@ -107,7 +107,7 @@ void main() {
   vec3 baseColor = vec3(1.0, splashChance * GREEN_VALUE, 0.0);
 
   if (advancedHighlighting && didRicochet) {
-    baseColor = vec3(1.0, baseColor.g, 1.0);
+    baseColor = vec3(1.0, baseColor.g, 0.5);
   }
 
   if (greenPenetration || advancedHighlighting) {

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

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

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

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

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

@@ -54,9 +54,11 @@ export function SpacedArmorSubExternal({
       const shell = tankopediaEphemeral.customShell ?? duel.antagonist.shell;
       material.uniforms.penetration.value = shell.penetration.near;
     }
-    function handleProtagonistEquipmentChange(equipment: EquipmentMatrix) {
+    async function handleProtagonistEquipmentChange(
+      equipment: EquipmentMatrix,
+    ) {
       const duel = duelStore.getState();
-      const hasEnhancedArmor = hasEquipment(
+      const hasEnhancedArmor = await hasEquipment(
         110,
         duel.protagonist.tank.equipment_preset,
         equipment,
@@ -65,12 +67,12 @@ export function SpacedArmorSubExternal({
         ? thickness * 1.03
         : thickness;
     }
-    function handleAntagonistEquipmentChange(equipment: EquipmentMatrix) {
+    async function handleAntagonistEquipmentChange(equipment: EquipmentMatrix) {
       const duel = duelStore.getState();
       const tankopediaEphemeral = tankopediaEphemeralStore.getState();
       const shell = tankopediaEphemeral.customShell ?? duel.antagonist.shell;
       const penetration = shell.penetration.near;
-      const hasCalibratedShells = hasEquipment(
+      const hasCalibratedShells = await hasEquipment(
         103,
         duel.antagonist.tank.equipment_preset,
         equipment,
@@ -123,7 +125,6 @@ export function SpacedArmorSubExternal({
           return (
             <mesh
               {...props}
-              onClick={() => {}}
               key={`${key}-spaced-sub-external-exclude`}
               renderOrder={3}
               material={

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

@@ -64,9 +64,11 @@ export function SpacedArmorSubSpaced({
         shell.normalization ?? 0,
       );
     }
-    function handleProtagonistEquipmentChange(equipment: EquipmentMatrix) {
+    async function handleProtagonistEquipmentChange(
+      equipment: EquipmentMatrix,
+    ) {
       const duel = duelStore.getState();
-      const hasEnhancedArmor = hasEquipment(
+      const hasEnhancedArmor = await hasEquipment(
         110,
         duel.protagonist.tank.equipment_preset,
         equipment,
@@ -75,12 +77,12 @@ export function SpacedArmorSubSpaced({
         ? thickness * 1.03
         : thickness;
     }
-    function handleAntagonistEquipmentChange(equipment: EquipmentMatrix) {
+    async function handleAntagonistEquipmentChange(equipment: EquipmentMatrix) {
       const duel = duelStore.getState();
       const tankopediaEphemeral = tankopediaEphemeralStore.getState();
       const shell = tankopediaEphemeral.customShell ?? duel.antagonist.shell;
       const penetration = shell.penetration.near;
-      const hasCalibratedShells = hasEquipment(
+      const hasCalibratedShells = await hasEquipment(
         103,
         duel.antagonist.tank.equipment_preset,
         equipment,

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

@@ -81,7 +81,7 @@ export function SpacedArmorSceneComponent({
   const camera = useThree((state) => state.camera);
 
   const shoot = useCallback(
-    (
+    async (
       point: Vector3,
       intersections: Intersection[],
       allowRicochet: boolean,
@@ -103,12 +103,12 @@ export function SpacedArmorSceneComponent({
         },
       };
 
-      const hasCalibratedShells = hasEquipment(
+      const hasCalibratedShells = await hasEquipment(
         103,
         antagonist.tank.equipment_preset,
         antagonist.equipmentMatrix,
       );
-      const hasEnhancedArmor = hasEquipment(
+      const hasEnhancedArmor = await hasEquipment(
         110,
         protagonist.tank.equipment_preset,
         protagonist.equipmentMatrix,
@@ -340,7 +340,7 @@ export function SpacedArmorSceneComponent({
               props.scene.children,
               true,
             );
-            const outShot = shoot(
+            const outShot = await shoot(
               lastLayer.point,
               ricochetIntersections,
               false,
@@ -386,11 +386,13 @@ export function SpacedArmorSceneComponent({
                     thickness,
                   } satisfies ArmorUserData
                 }
-                onClick={(event) => {
+                onClick={async (event) => {
                   event.stopPropagation();
-
-                  const shot = shoot(event.point, event.intersections, true)!;
-
+                  const shot = (await shoot(
+                    event.point,
+                    event.intersections,
+                    true,
+                  ))!;
                   tankopediaEphemeralStore.setState({ shot });
                 }}
               />

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

@@ -30,6 +30,7 @@ export const StaticArmor = memo<ArmorSceneProps>(({ thicknessRange }) => {
   const wrapper = useRef<Group>(null);
   const turretContainer = useRef<Group>(null);
   const gunContainer = useRef<Group>(null);
+  const protagonist = Duel.use((draft) => draft.protagonist);
   const tank = Duel.use((state) => state.protagonist.tank);
   const track = Duel.use((state) => state.protagonist.track);
   const turret = Duel.use((state) => state.protagonist.turret);
@@ -45,6 +46,7 @@ export const StaticArmor = memo<ArmorSceneProps>(({ thicknessRange }) => {
   const hullOrigin = correctZYTuple(trackModelDefinition.origin);
   const turretOrigin = correctZYTuple(tankModelDefinition.turret_origin);
   const gunOrigin = correctZYTuple(turretModelDefinition.gun_origin);
+  const mutateDuel = Duel.useMutation();
   const canvas = useThree((state) => state.gl.domElement);
   const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
   const duelStore = Duel.useStore();
@@ -165,14 +167,14 @@ export const StaticArmor = memo<ArmorSceneProps>(({ thicknessRange }) => {
             window.addEventListener('pointermove', handlePointerMove);
             window.addEventListener('pointerup', handlePointerUp);
           }
-          function handlePointerMove(event: PointerEvent) {
+          async function handlePointerMove(event: PointerEvent) {
             const duel = duelStore.getState();
-            const hasImprovedVerticalStabilizer = hasEquipment(
+            const hasImprovedVerticalStabilizer = await hasEquipment(
               122,
               duel.protagonist.tank.equipment_preset,
               duel.protagonist.equipmentMatrix,
             );
-            const hasDownImprovedVerticalStabilizer = hasEquipment(
+            const hasDownImprovedVerticalStabilizer = await hasEquipment(
               124,
               duel.protagonist.tank.equipment_preset,
               duel.protagonist.equipmentMatrix,
@@ -207,6 +209,7 @@ export const StaticArmor = memo<ArmorSceneProps>(({ thicknessRange }) => {
                 <StaticArmorSceneComponent
                   name={node.name}
                   thicknessRange={thicknessRange}
+                  key={node.uuid}
                   type={spaced ? ArmorType.Spaced : ArmorType.Primary}
                   thickness={thickness}
                   node={node}
@@ -258,14 +261,14 @@ export const StaticArmor = memo<ArmorSceneProps>(({ thicknessRange }) => {
               window.addEventListener('pointermove', handlePointerMove);
               window.addEventListener('pointerup', handlePointerUp);
             }
-            function handlePointerMove(event: PointerEvent) {
+            async function handlePointerMove(event: PointerEvent) {
               const duel = duelStore.getState();
-              const hasImprovedVerticalStabilizer = hasEquipment(
+              const hasImprovedVerticalStabilizer = await hasEquipment(
                 122,
                 duel.protagonist.tank.equipment_preset,
                 duel.protagonist.equipmentMatrix,
               );
-              const hasDownImprovedVerticalStabilizer = hasEquipment(
+              const hasDownImprovedVerticalStabilizer = await hasEquipment(
                 124,
                 duel.protagonist.tank.equipment_preset,
                 duel.protagonist.equipmentMatrix,
@@ -339,14 +342,14 @@ export const StaticArmor = memo<ArmorSceneProps>(({ thicknessRange }) => {
               window.addEventListener('pointermove', handlePointerMove);
               window.addEventListener('pointerup', handlePointerUp);
             }
-            function handlePointerMove(event: PointerEvent) {
+            async function handlePointerMove(event: PointerEvent) {
               const duel = duelStore.getState();
-              const hasImprovedVerticalStabilizer = hasEquipment(
+              const hasImprovedVerticalStabilizer = await hasEquipment(
                 122,
                 duel.protagonist.tank.equipment_preset,
                 duel.protagonist.equipmentMatrix,
               );
-              const hasDownImprovedVerticalStabilizer = hasEquipment(
+              const hasDownImprovedVerticalStabilizer = await hasEquipment(
                 124,
                 duel.protagonist.tank.equipment_preset,
                 duel.protagonist.equipmentMatrix,

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

@@ -10,7 +10,7 @@ import {
   FrontSide,
   LineBasicMaterial,
   Mesh,
-  MeshBasicMaterial,
+  MeshStandardMaterial,
   Object3D,
   Plane,
   Quaternion,
@@ -108,7 +108,7 @@ export function StaticArmorSceneComponent({
 
   const surfaceMaterial = useMemo(
     () =>
-      new MeshBasicMaterial({
+      new MeshStandardMaterial({
         color,
         opacity,
         transparent: opacity < 1,

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

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

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

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

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

@@ -22,7 +22,8 @@ export function GuessBackground() {
 
   useEffect(() => {
     mutateDuel((state) => {
-      state.protagonist = tankToDuelMember(tank, provisionDefinitions);
+      const model = modelDefinitions.models[tank.id];
+      state.protagonist = tankToDuelMember(tank, model, provisionDefinitions);
     });
     mutateTankopediaEphemeral((state) => {
       state.model = modelDefinitions.models[tank.id];

packages/website/src/components/GuessRenderer.tsx

@@ -1,10 +1,11 @@
 import { GuessEphemeral } from '../stores/guessEphemeral';
+import { TankopediaDisplay } from '../stores/tankopediaPersistent/constants';
 import { SmartCanvas } from './SmartCanvas';
 import { Controls } from './Tankopedia/HeroSection/components/TankSandbox/components/Control';
 import { Lighting } from './Tankopedia/HeroSection/components/TankSandbox/components/Lighting';
 import { TankModel } from './Tankopedia/HeroSection/components/TankSandbox/components/TankModel';
 
-const BRIGHTNESS = 2 ** -5.5;
+const BRIGHTNESS = 2 ** -5;
 const CONTRAST = 2 ** 2;
 
 export function GuessRenderer() {
@@ -15,13 +16,14 @@ export function GuessRenderer() {
     <SmartCanvas
       style={{
         filter: `grayscale(${isRevealed ? 0 : 1}) contrast(${isRevealed ? 1 : CONTRAST}) brightness(${isRevealed ? 1 : BRIGHTNESS})`,
+        // filter: `drop-shadow(0 0 1rem ${Var('black-a11')})`,
         transitionDuration: isRevealed ? '2s' : undefined,
         transitionProperty: 'filter',
       }}
       camera={{ position: [-5, 5, -5] }}
     >
-      <Controls zoomable={false} />
-      <Lighting />
+      <Controls distanceScale={2} zoomable={false} />
+      <Lighting display={TankopediaDisplay.Model} />
       <TankModel />
     </SmartCanvas>
   );

packages/website/src/components/Guesser.tsx

@@ -138,7 +138,7 @@ export function Guesser() {
         </Card>
       )}
 
-      <Flex justify="center" style={{ userSelect: 'none' }}>
+      <Flex justify="center">
         <Text>
           {literals(strings.website.tools.guess.stats, [
             `${correctGuesses}`,

packages/website/src/components/HelpingSpotLight.tsx

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

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

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

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

@@ -1,25 +0,0 @@
-import { OrbitControls } from '@react-three/drei';
-import { Canvas } from '@react-three/fiber';
-import { Suspense } from 'react';
-import { Model } from './components/Model';
-
-export function MixerScene() {
-  return (
-    <Canvas
-      shadows
-      camera={{
-        fov: 45,
-        position: [5, 5, -5],
-      }}
-    >
-      <OrbitControls />
-
-      <directionalLight position={[10, 10, 10]} intensity={5} castShadow />
-      <directionalLight position={[-10, -10, -10]} intensity={3} castShadow />
-
-      <Suspense fallback={null}>
-        <Model />
-      </Suspense>
-    </Canvas>
-  );
-}

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

@@ -307,7 +307,7 @@ export function FilterControl({ compact }: FilterControlProps) {
         </Flex>
 
         <Flex
-          direction={compact ? 'row' : { initial: 'row', md: 'column' }}
+          direction={{ initial: 'row', md: 'column' }}
           align="start"
           gap={{ initial: '2', md: '1' }}
         >

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

@@ -1,6 +1,14 @@
-import { asset, isExplosive } from '@blitzkit/core';
+import {
+  asset,
+  coefficient,
+  isExplosive,
+  resolvePenetrationCoefficient,
+} from '@blitzkit/core';
 import { literals } from '@blitzkit/i18n';
 import { Flex, Heading, IconButton, Tooltip } from '@radix-ui/themes';
+import { debounce } from 'lodash-es';
+import { useEffect, useRef, useState } from 'react';
+import { useEquipment } from '../../../../../../hooks/useEquipment';
 import { useLocale } from '../../../../../../hooks/useLocale';
 import { useTankModelDefinition } from '../../../../../../hooks/useTankModelDefinition';
 import { Duel } from '../../../../../../stores/duel';
@@ -20,13 +28,34 @@ export function Firepower({
 }: StatsAcceptorProps & MaybeSkeletonComponentProps) {
   const mutateDuel = Duel.useMutation();
   const { strings, unwrap } = useLocale();
+  const [penetrationDistance, setPenetrationDistance] = useState(250);
+  const setPenetrationDistanceDebounced = debounce((value: number) => {
+    setPenetrationDistance(value);
+  }, 500);
   const turret = Duel.use((state) => state.protagonist.turret);
   const gun = Duel.use((state) => state.protagonist.gun);
   const shell = Duel.use((state) => state.protagonist.shell);
+  const penetrationDistanceInput = useRef<HTMLInputElement>(null);
+  const hasSupercharger = useEquipment(107);
+  const hasCalibratedShells = useEquipment(103);
+  const penetrationCoefficient = coefficient([
+    hasCalibratedShells,
+    resolvePenetrationCoefficient(true, shell.type) - 1,
+  ]);
+  const penetrationLossOverDistanceCoefficient = coefficient([
+    hasSupercharger,
+    -0.6,
+  ]);
   const tankModelDefinition = useTankModelDefinition();
   const turretModelDefinition = tankModelDefinition.turrets[turret.id];
   const gunModelDefinition = turretModelDefinition.guns[gun.id];
 
+  useEffect(() => {
+    if (penetrationDistanceInput.current) {
+      penetrationDistanceInput.current.value = `${penetrationDistance}`;
+    }
+  }, [penetrationDistance]);
+
   return (
     <StatsTableWrapper>
       <Flex align="center" gap="4">

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

@@ -80,7 +80,12 @@ export const InfoWithDelta = memo<InfoWithDeltaProps>(
             relativeAgainst === TankopediaRelativeAgainst.All,
         )
         .map((tank) => {
-          const member = tankToDuelMember(tank, provisionDefinitions);
+          const thisTankModel = modelDefinitions.models[tank.id];
+          const member = tankToDuelMember(
+            tank,
+            thisTankModel,
+            provisionDefinitions,
+          );
 
           if (member.gun.shells[shellIndex] === undefined) {
             return undefined;

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

@@ -1,10 +1,8 @@
-import { DoubleArrowRightIcon } from '@radix-ui/react-icons';
-import { Box, Button, Code } from '@radix-ui/themes';
+import { Box, Code } from '@radix-ui/themes';
 import { times } from 'lodash-es';
 import { Quicklime, type QuicklimeCallback } from 'quicklime';
 import { useCallback, useEffect, useRef } from 'react';
 import { Var } from '../../../../../../../core/radix/var';
-import { useLocale } from '../../../../../../../hooks/useLocale';
 import type { StatsAcceptorProps } from '../TraverseVisualizer';
 import { VisualizerCard } from '../VisualizerCard';
 import { Shell } from './components/Shell';
@@ -21,8 +19,6 @@ export interface ReloadUpdateData {
 export const reloadUpdate = new Quicklime<ReloadUpdateData>();
 
 export function ReloadVisualizer({ stats }: StatsAcceptorProps) {
-  const { strings } = useLocale();
-
   const reloadCircle = useRef<HTMLDivElement>(null);
   const reloadCore = useRef<HTMLDivElement>(null);
   const reloadGlow = useRef<HTMLDivElement>(null);
@@ -250,7 +246,7 @@ export function ReloadVisualizer({ stats }: StatsAcceptorProps) {
 
       <Code
         ref={progressTime}
-        size="2"
+        size="1"
         variant="ghost"
         weight="bold"
         color="gray"
@@ -259,14 +255,14 @@ export function ReloadVisualizer({ stats }: StatsAcceptorProps) {
           position: 'absolute',
           top: '50%',
           right: 'calc(50% + var(--space-8))',
-          transform: 'translate(50%, -50%)',
+          transform: 'translateX(50%)',
         }}
       >
         0.00
       </Code>
       <Code
         ref={totalTime}
-        size="2"
+        size="1"
         variant="ghost"
         weight="bold"
         color="gray"
@@ -274,7 +270,7 @@ export function ReloadVisualizer({ stats }: StatsAcceptorProps) {
           position: 'absolute',
           top: '50%',
           left: 'calc(50% + var(--space-8))',
-          transform: 'translate(-50%, -50%)',
+          transform: 'translateX(-50%)',
         }}
       >
         0.00
@@ -294,25 +290,6 @@ export function ReloadVisualizer({ stats }: StatsAcceptorProps) {
         width="100%"
         height="100%"
       />
-
-      <Button
-        size="1"
-        variant="outline"
-        color="gray"
-        highContrast
-        style={{
-          position: 'absolute',
-          top: '68%',
-          left: '50%',
-          transform: 'translate(-50%, -50%)',
-        }}
-        onClick={() => {
-          state.current = Math.floor(state.current + 1);
-        }}
-      >
-        {strings.website.tools.tankopedia.visualizers.reload.skip}
-        <DoubleArrowRightIcon />
-      </Button>
     </VisualizerCard>
   );
 }

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

@@ -21,6 +21,7 @@ const [equipmentDefinitions, provisionDefinitions] = await Promise.all([
 ]);
 
 export function Characteristics({ skeleton }: MaybeSkeletonComponentProps) {
+  const mutateDuel = Duel.useMutation();
   const crewSkills = TankopediaEphemeral.use((state) => state.skills);
   const provisions = Duel.use((state) => state.protagonist.provisions);
   const consumables = Duel.use((state) => state.protagonist.consumables);

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

@@ -14,6 +14,7 @@ import { Duel } from '../../../../../../../stores/duel';
 import './index.css';
 
 export function QuickInputs() {
+  const mutateDuel = Duel.useMutation();
   const protagonist = Duel.use((state) => state.protagonist);
   const yawInput = useRef<HTMLInputElement>(null);
   const pitchInput = useRef<HTMLInputElement>(null);

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

@@ -12,6 +12,7 @@ import {
   EnterFullScreenIcon,
   ExitFullScreenIcon,
   EyeOpenIcon,
+  GearIcon,
 } from '@radix-ui/react-icons';
 import {
   Button,
@@ -32,6 +33,7 @@ import { useEquipment } from '../../../../../hooks/useEquipment';
 import { useFullScreen } from '../../../../../hooks/useFullScreen';
 import { useFullscreenAvailability } from '../../../../../hooks/useFullscreenAvailability';
 import { useLocale } from '../../../../../hooks/useLocale';
+import { App } from '../../../../../stores/app';
 import { Duel } from '../../../../../stores/duel';
 import { TankopediaEphemeral } from '../../../../../stores/tankopediaEphemeral';
 import { TankopediaPersistent } from '../../../../../stores/tankopediaPersistent';
@@ -41,7 +43,6 @@ import type { ThicknessRange } from '../../../../Armor/components/StaticArmor';
 import { ModuleButton } from '../../../../ModuleButtons/ModuleButton';
 import { SmallTankIcon } from '../../../../SmallTankIcon';
 import { TankSearch } from '../../../../TankSearch';
-import { screenshotReadyEvent } from '../TankSandbox/components/SceneProps';
 import { CustomShellButton } from './components/CustomShellButton';
 import { DynamicArmorSwitcher } from './components/DynamicArmorSwitcher';
 import { QuickInputs } from './components/QuickInputs';
@@ -58,10 +59,20 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) {
   );
   const display = TankopediaEphemeral.use((state) => state.display);
   const isFullScreen = useFullScreen();
+  const showGrid = TankopediaPersistent.use((state) => state.showGrid);
+  const greenPenetration = TankopediaPersistent.use(
+    (state) => state.greenPenetration,
+  );
+  const hideTankModelUnderArmor = TankopediaPersistent.use(
+    (state) => state.hideTankModelUnderArmor,
+  );
   const advancedHighlighting = TankopediaPersistent.use(
     (state) => state.advancedHighlighting,
   );
+  const wireframe = TankopediaPersistent.use((state) => state.wireframe);
+  const opaque = TankopediaPersistent.use((state) => state.opaque);
   const fullScreenAvailable = useFullscreenAvailability(true);
+  const developerMode = App.use((state) => state.developerMode);
   const protagonistTank = Duel.use((state) => state.protagonist.tank);
   const antagonistGun = Duel.use((state) => state.antagonist.gun);
   const antagonistShell = Duel.use((state) => state.antagonist.shell);
@@ -319,7 +330,6 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) {
             <Text color="gray" size="2">
               {strings.website.tools.tankopedia.sandbox.dynamic.shooter}
             </Text>
-
             <Dialog.Root
               open={antagonistSelectorOpen}
               onOpenChange={setAntagonistSelectorOpen}
@@ -441,6 +451,106 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) {
                 </DropdownMenu.Content>
               </DropdownMenu.Root>
 
+              <DropdownMenu.Root>
+                <DropdownMenu.Trigger>
+                  <IconButton variant="ghost" color="gray">
+                    <GearIcon />
+                  </IconButton>
+                </DropdownMenu.Trigger>
+
+                <DropdownMenu.Content>
+                  {display === TankopediaDisplay.DynamicArmor && (
+                    <>
+                      <DropdownMenu.Label>
+                        {
+                          strings.website.tools.tankopedia.sandbox.settings
+                            .armor
+                        }
+                      </DropdownMenu.Label>
+
+                      <DropdownMenu.CheckboxItem
+                        checked={greenPenetration}
+                        onCheckedChange={(checked) => {
+                          mutateTankopediaPersistent((draft) => {
+                            draft.greenPenetration = checked;
+                          });
+                        }}
+                      >
+                        {
+                          strings.website.tools.tankopedia.sandbox.settings
+                            .green_penetration
+                        }
+                      </DropdownMenu.CheckboxItem>
+
+                      <DropdownMenu.CheckboxItem
+                        checked={hideTankModelUnderArmor}
+                        onCheckedChange={(checked) => {
+                          mutateTankopediaPersistent((draft) => {
+                            draft.hideTankModelUnderArmor = checked;
+                          });
+                        }}
+                      >
+                        {
+                          strings.website.tools.tankopedia.sandbox.settings
+                            .hide_model_under_armor
+                        }
+                      </DropdownMenu.CheckboxItem>
+
+                      <DropdownMenu.CheckboxItem
+                        checked={opaque}
+                        onCheckedChange={(checked) => {
+                          mutateTankopediaPersistent((draft) => {
+                            draft.opaque = checked;
+                          });
+                        }}
+                      >
+                        {
+                          strings.website.tools.tankopedia.sandbox.settings
+                            .opaque
+                        }
+                      </DropdownMenu.CheckboxItem>
+
+                      {developerMode && (
+                        <DropdownMenu.CheckboxItem
+                          checked={wireframe}
+                          onCheckedChange={(checked) => {
+                            mutateTankopediaPersistent((draft) => {
+                              draft.wireframe = checked;
+                            });
+                          }}
+                        >
+                          {
+                            strings.website.tools.tankopedia.sandbox.settings
+                              .dev_wireframe
+                          }
+                        </DropdownMenu.CheckboxItem>
+                      )}
+                    </>
+                  )}
+
+                  <DropdownMenu.Label>
+                    {
+                      strings.website.tools.tankopedia.sandbox.settings
+                        .environment
+                    }
+                  </DropdownMenu.Label>
+
+                  <DropdownMenu.CheckboxItem
+                    checked={showGrid}
+                    onCheckedChange={(checked) => {
+                      mutateTankopediaPersistent((draft) => {
+                        draft.showGrid = checked;
+                      });
+                    }}
+                  >
+                    {
+                      strings.website.tools.tankopedia.sandbox.settings
+                        .show_grid
+                    }
+                  </DropdownMenu.CheckboxItem>
+                </DropdownMenu.Content>
+              </DropdownMenu.Root>
+
               <Popover.Root>
                 <Popover.Trigger>
                   <IconButton color="gray" variant="ghost">
@@ -453,25 +563,19 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) {
                     <Popover.Close>
                       <Button
                         onClick={() => {
-                          screenshotReadyEvent.dispatch(true);
+                          if (!canvas.current) return;
 
-                          requestAnimationFrame(() => {
-                            if (!canvas.current) return;
+                          const anchor = document.createElement('a');
 
-                            const anchor = document.createElement('a');
-
-                            anchor.setAttribute(
-                              'download',
-                              `${protagonistTank.name}.png`,
-                            );
-                            anchor.setAttribute(
-                              'href',
-                              canvas.current.toDataURL('image/png'),
-                            );
-                            anchor.click();
-
-                            screenshotReadyEvent.dispatch(false);
-                          });
+                          anchor.setAttribute(
+                            'download',
+                            `${protagonistTank.name}.png`,
+                          );
+                          anchor.setAttribute(
+                            'href',
+                            canvas.current.toDataURL('image/png'),
+                          );
+                          anchor.click();
                         }}
                       >
                         <DownloadIcon />
@@ -485,20 +589,14 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) {
                       <Button
                         variant="outline"
                         onClick={() => {
-                          screenshotReadyEvent.dispatch(true);
+                          if (!canvas.current) return;
 
-                          requestAnimationFrame(() => {
-                            if (!canvas.current) return;
+                          canvas.current.toBlob((blob) => {
+                            if (!blob) return;
 
-                            canvas.current.toBlob((blob) => {
-                              if (!blob) return;
-
-                              navigator.clipboard.write([
-                                new ClipboardItem({ 'image/png': blob }),
-                              ]);
-                            });
-
-                            screenshotReadyEvent.dispatch(false);
+                            navigator.clipboard.write([
+                              new ClipboardItem({ 'image/png': blob }),
+                            ]);
                           });
                         }}
                       >

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

@@ -13,10 +13,10 @@ export function Tracker({ fontSize }: Props) {
     <Box
       position="absolute"
       left="50%"
-      top="50%"
+      bottom="0"
       width="min(100%, 16rem)"
       style={{
-        transform: `translate(-50%, calc(${fontSize} / 2 + var(--space-4)))`,
+        transform: `translate(-50%, calc(${fontSize} / 2))`,
       }}
     >
       <Progress color="gray" value={progress} />

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

@@ -1,19 +1,92 @@
+import { TankType } from '@blitzkit/core';
 import { Flex, Heading } from '@radix-ui/themes';
+import { Var } from '../../../../../../core/radix/var';
 import { useLocale } from '../../../../../../hooks/useLocale';
 import { Duel } from '../../../../../../stores/duel';
+import type { RadixColor } from '../../../../../../stores/embedState';
 import { TankopediaEphemeral } from '../../../../../../stores/tankopediaEphemeral';
 import { Tracker } from './components/Tracker';
 
-export function Title() {
+interface TitleProps {
+  foreground?: boolean;
+}
+
+export const NATION_COLORS: Record<
+  string,
+  {
+    text: RadixColor;
+    background: RadixColor[];
+    tint: RadixColor;
+  }
+> = {
+  france: {
+    text: 'mint',
+    tint: 'purple',
+    background: ['mint', 'cyan', 'jade'],
+  },
+  germany: {
+    text: 'sage',
+    tint: 'blue',
+    background: ['slate', 'sage', 'mauve'],
+  },
+  usa: {
+    text: 'gold',
+    tint: 'red',
+    background: ['brown', 'gold', 'gray'],
+  },
+  european: {
+    text: 'sky',
+    tint: 'violet',
+    background: ['cyan', 'blue', 'indigo'],
+  },
+  ussr: {
+    text: 'bronze',
+    tint: 'red',
+    background: ['bronze', 'tomato', 'bronze'],
+  },
+  uk: {
+    text: 'gold',
+    tint: 'red',
+    background: ['bronze', 'gold', 'brown'],
+  },
+  japan: {
+    text: 'mint',
+    tint: 'violet',
+    background: ['green', 'teal', 'jade'],
+  },
+  china: {
+    text: 'mint',
+    tint: 'pink',
+    background: ['green', 'teal', 'jade'],
+  },
+  other: {
+    text: 'amber',
+    tint: 'sky',
+    background: ['amber', 'yellow', 'gray'],
+  },
+};
+
+export function Title({ foreground }: TitleProps) {
   const { unwrap } = useLocale();
   const protagonist = Duel.use((state) => state.protagonist.tank);
+  const disturbed = TankopediaEphemeral.use((state) => state.disturbed);
   const revealed = TankopediaEphemeral.use((state) => state.revealed);
+  const nationColors = NATION_COLORS[protagonist.nation];
+  const color = Var(
+    disturbed
+      ? protagonist.type === TankType.COLLECTOR
+        ? 'blue-11'
+        : protagonist.type === TankType.PREMIUM
+          ? 'amber-11'
+          : 'gray-12'
+      : `${nationColors.text}-12`,
+  );
   const name = unwrap(protagonist.name);
   const fontSize = revealed
-    ? revealed
+    ? disturbed
       ? '2rem'
-      : `min(16vh, ${125 / name.length}vw)`
-    : `min(12vh, ${75 / name.length}vw)`;
+      : `min(65vh, ${125 / name.length}vw)`
+    : `min(48vh, ${75 / name.length}vw)`;
   const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
 
   return (
@@ -22,19 +95,19 @@ export function Title() {
         event.preventDefault();
 
         mutateTankopediaEphemeral((draft) => {
-          draft.revealed = true;
+          draft.disturbed = true;
         });
       }}
       direction="column"
       position="absolute"
       align="center"
       justify="center"
-      top={revealed ? '6rem' : '50%'}
+      top={disturbed ? '6rem' : '50%'}
       left="50%"
       width="100%"
-      height={revealed ? fontSize : '100%'}
+      height={disturbed ? fontSize : '100%'}
       style={{
-        pointerEvents: revealed ? 'none' : undefined,
+        pointerEvents: disturbed ? 'none' : undefined,
         transitionDuration: '1s',
         transform: 'translate(-50%, -50%)',
       }}
@@ -46,10 +119,11 @@ export function Title() {
           pointerEvents: 'none',
           fontSize,
           whiteSpace: 'nowrap',
-          opacity: revealed ? 1 : 0.5,
-          letterSpacing: revealed || !revealed ? 0 : '-0.03em',
+          color: foreground ? Var('gray-a10') : color,
+          opacity: foreground && disturbed ? 0 : 1,
+          letterSpacing: disturbed || !revealed ? 0 : '-0.03em',
           transition: `
-            letter-spacing 1.5s ${revealed ? '' : 'cubic-bezier(0.81, -2, 0.68, 1)'},
+            letter-spacing 1.5s ${disturbed ? '' : 'cubic-bezier(0.81, -2, 0.68, 1)'},
             font-size 1s,
             -webkit-text-stroke 2s,
             opacity 1s

packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/Control.tsx

@@ -24,6 +24,7 @@ interface ControlsProps {
   autoRotate?: boolean;
   zoomable?: boolean;
   enableRotate?: boolean;
+  distanceScale?: number;
 }
 
 export function Controls({
@@ -31,6 +32,7 @@ export function Controls({
   autoRotate = true,
   zoomable = true,
   enableRotate = true,
+  distanceScale = 1,
 }: ControlsProps) {
   const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
   const duelStore = Duel.useStore();
@@ -82,9 +84,9 @@ export function Controls({
     protagonistGunOrigin.y;
   const inspectModeInitialPosition = new Vector3(
     -8,
-    naked ? gunHeight + 10 : 2,
+    gunHeight + (naked ? 10 : 2),
     -13,
-  );
+  ).multiplyScalar(distanceScale);
 
   const t0 = useRef(Date.now() / 1000);
   useFrame(() => {
@@ -109,14 +111,14 @@ export function Controls({
       },
     );
 
-    function handlePoseEvent(event: Pose) {
+    async function handlePoseEvent(event: Pose) {
       const duel = duelStore.getState();
-      const hasImprovedVerticalStabilizer = hasEquipment(
+      const hasImprovedVerticalStabilizer = await hasEquipment(
         122,
         duel.protagonist.tank.equipment_preset,
         duel.protagonist.equipmentMatrix,
       );
-      const hasDownImprovedVerticalStabilizer = hasEquipment(
+      const hasDownImprovedVerticalStabilizer = await hasEquipment(
         124,
         duel.protagonist.tank.equipment_preset,
         duel.protagonist.equipmentMatrix,
@@ -238,11 +240,7 @@ export function Controls({
       orbitControls.current.rotateSpeed = 0.25;
 
       camera.position.copy(inspectModeInitialPosition);
-      orbitControls.current.target.set(
-        0,
-        gunHeight * (naked ? 1 / 4 : 3 / 4),
-        0,
-      );
+      orbitControls.current.target.set(0, gunHeight / (naked ? 4 : 2), 0);
       orbitControls.current.enablePan = true;
       orbitControls.current.enableZoom = true;
       camera.fov = naked ? 20 : 25;

packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/Lighting.tsx

@@ -0,0 +1,34 @@
+import { Environment } from '@react-three/drei';
+import { Euler } from 'three';
+import { degToRad } from 'three/src/math/MathUtils.js';
+import { useModel } from '../../../../../../hooks/useModel';
+import { Duel } from '../../../../../../stores/duel';
+import { TankopediaDisplay } from '../../../../../../stores/tankopediaPersistent/constants';
+
+const LIGHTS_COUNT = 5;
+
+interface LightingProps {
+  display: TankopediaDisplay;
+}
+
+export function Lighting({ display }: LightingProps) {
+  const protagonist = Duel.use((state) => state.protagonist);
+  const { hasPbr } = useModel(protagonist.tank.id);
+  const isBrighterLighting =
+    !hasPbr && display !== TankopediaDisplay.StaticArmor;
+
+  return (
+    <>
+      {display !== TankopediaDisplay.StaticArmor && (
+        <Environment
+          files="https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/1k/winter_river_1k.hdr"
+          environmentIntensity={isBrighterLighting ? 1.5 : 1.25}
+          environmentRotation={new Euler(0, degToRad(180), 0)}
+        />
+      )}
+      {display === TankopediaDisplay.StaticArmor && (
+        <Environment preset="lobby" />
+      )}
+    </>
+  );
+}

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

@@ -1,49 +0,0 @@
-import { useHelper } from '@react-three/drei';
-import { times } from 'lodash-es';
-import { useRef } from 'react';
-import { Color, SpotLight, SpotLightHelper } from 'three';
-import { degToRad } from 'three/src/math/MathUtils.js';
-import { isHalloween } from '../../../../../../../core/blitzkit/isHalloween';
-import { HelpingSpotLight } from '../../../../../../HelpingSpotLight';
-
-const LIGHTS_COUNT = 5;
-const LIGHT_DISTANCE = 13;
-const LIGHT_HEIGHT_0 = 4;
-const LIGHT_HEIGHT_1 = 2;
-const INTENSITY = 30;
-
-export function Lighting() {
-  const topLight = useRef<SpotLight>(null!);
-  const frontLight = useRef<SpotLight>(null!);
-
-  useHelper(topLight, SpotLightHelper, 'red');
-  useHelper(frontLight, SpotLightHelper, 'green');
-
-  return (
-    <>
-      {times(LIGHTS_COUNT, (index) => {
-        const x = index / (LIGHTS_COUNT - 1);
-        const theta = 2 * Math.PI * (index / LIGHTS_COUNT) - degToRad(152);
-        const position = [
-          LIGHT_DISTANCE * Math.sin(theta),
-          LIGHT_HEIGHT_0 * (1 - x) + LIGHT_HEIGHT_1 * x,
-          LIGHT_DISTANCE * Math.cos(theta),
-        ] as const;
-        const color = new Color();
-
-        if (isHalloween()) color.set(1, 0.25, 0.25);
-
-        return (
-          <HelpingSpotLight
-            position={position}
-            intensity={INTENSITY}
-            penumbra={1}
-            castShadow
-            decay={1}
-            color={color}
-          />
-        );
-      })}
-    </>
-  );
-}

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

@@ -1,50 +1,240 @@
-import { invalidate, useFrame } from '@react-three/fiber';
+import { asset, I_HAT, J_HAT } from '@blitzkit/core';
+import { useFrame, useLoader } from '@react-three/fiber';
 import { clamp } from 'lodash-es';
-import { Quicklime, type QuicklimeEvent } from 'quicklime';
-import { useEffect, useRef } from 'react';
-import { Mesh, MeshStandardMaterial } from 'three';
+import { useRef } from 'react';
+import {
+  Group,
+  MeshStandardMaterial,
+  PerspectiveCamera,
+  TextureLoader,
+  Vector2,
+  Vector3,
+} from 'three';
+import { GLTFLoader } from 'three/examples/jsm/Addons.js';
+import { degToRad, radToDeg } from 'three/src/math/MathUtils.js';
+import { awaitableEquipmentDefinitions } from '../../../../../../../core/awaitables/equipmentDefinitions';
+import { awaitableModelDefinitions } from '../../../../../../../core/awaitables/modelDefinitions';
+import { awaitableProvisionDefinitions } from '../../../../../../../core/awaitables/provisionDefinitions';
+import { applyPitchYawLimits } from '../../../../../../../core/blitz/applyPitchYawLimits';
+import { modelTransformEvent } from '../../../../../../../core/blitzkit/modelTransform';
+import { tankCharacteristics } from '../../../../../../../core/blitzkit/tankCharacteristics';
+import { Duel } from '../../../../../../../stores/duel';
+import { TankopediaEphemeral } from '../../../../../../../stores/tankopediaEphemeral';
+import { aimTarget } from './constants';
 
-const SIZE = 2 ** 5;
+const [modelDefinitions, equipmentDefinitions, provisionDefinitions] =
+  await Promise.all([
+    awaitableModelDefinitions,
+    awaitableEquipmentDefinitions,
+    awaitableProvisionDefinitions,
+  ]);
 
-export const screenshotReadyEvent = new Quicklime(false);
+const emptyVector = new Vector2();
 
 export function SceneProps() {
-  const mesh = useRef<Mesh>(null!);
+  const disturbed = TankopediaEphemeral.use((state) => state.disturbed);
+  const targetCircleWrapper = useRef<Group>(null);
+  const clientTargetCircle = useRef<HTMLDivElement>(null);
+  const serverTargetCircle = useRef<HTMLDivElement>(null);
   const material = useRef<MeshStandardMaterial>(null);
+  const playground = useRef<Group>(null);
+
+  const turret = Duel.use((state) => state.protagonist.turret);
+  const track = Duel.use((state) => state.protagonist.track);
+  const tank = Duel.use((state) => state.protagonist.tank);
+  const gun = Duel.use((state) => state.protagonist.gun);
+  const shell = Duel.use((state) => state.protagonist.shell);
+  const engine = Duel.use((state) => state.protagonist.engine);
+  const tankModelDefinition = modelDefinitions.models[tank.id];
+  const trackModelDefinition =
+    modelDefinitions.models[tank.id].tracks[track.id];
+  const gunModelDefinition =
+    tankModelDefinition.turrets[turret.id].guns[gun.id];
+  const turretModelDefinition = tankModelDefinition.turrets[turret.id];
+  const hullOrigin = new Vector3(
+    trackModelDefinition.origin.x,
+    trackModelDefinition.origin.y,
+    -trackModelDefinition.origin.z,
+  );
+  const turretOrigin = new Vector3(
+    tankModelDefinition.turret_origin.x,
+    tankModelDefinition.turret_origin.y,
+    -tankModelDefinition.turret_origin.z,
+  );
+  const gunOriginOnlyY = new Vector3(0, turretModelDefinition.gun_origin.y, 0);
+  const shellOrigin = hullOrigin.clone().add(turretOrigin).add(gunOriginOnlyY);
+  const camouflage = Duel.use((state) => state.protagonist.camouflage);
+  const crewSkills = TankopediaEphemeral.use((state) => state.skills);
+  const consumables = Duel.use((state) => state.protagonist.consumables);
+  const provisions = Duel.use((state) => state.protagonist.provisions);
+  const assaultDistance = Duel.use(
+    (state) => state.protagonist.assaultDistance,
+  );
+  const equipmentMatrix = Duel.use(
+    (state) => state.protagonist.equipmentMatrix,
+  );
+  const characteristics = tankCharacteristics(
+    {
+      tank,
+      turret,
+      gun,
+      shell,
+      consumables,
+      applyDynamicArmor: false,
+      applyReactiveArmor: false,
+      applySpallLiner: false,
+      camouflage,
+      crewSkills,
+      engine,
+      equipmentMatrix,
+      provisions,
+      stockEngine: tank.engines[0],
+      stockGun: tank.turrets[0].guns[0],
+      stockTurret: tank.turrets[0],
+      stockTrack: tank.tracks[0],
+      track,
+      assaultDistance,
+    },
+    { equipmentDefinitions, provisionDefinitions, tankModelDefinition },
+  );
+  let { dispersion } = characteristics;
+  const gunRotationSpeed = degToRad(characteristics.gunTraverseSpeed);
+  const mockTank = useLoader(GLTFLoader, asset(`3d/tanks/models/6929.glb`));
+  const texture = useLoader(TextureLoader, '/assets/images/3d/grid.png');
+  const path = new Vector3();
+  const direction = new Vector3();
+  texture.anisotropy = 2;
 
   useFrame(({ camera }) => {
     if (!material.current) return;
     material.current.opacity = clamp(0.5 * camera.position.y, 0, 1);
   });
 
-  useEffect(() => {
-    function handleScreenshotReady(event: QuicklimeEvent<boolean>) {
-      mesh.current.visible = !event.data;
-      invalidate();
+  let lastTime = 0;
+  let DEBUG_disable = false;
+
+  useFrame(({ raycaster, camera, clock, gl }) => {
+    if (
+      !playground.current ||
+      !targetCircleWrapper.current ||
+      DEBUG_disable ||
+      !clientTargetCircle.current ||
+      !serverTargetCircle.current
+    ) {
+      return;
     }
 
-    screenshotReadyEvent.on(handleScreenshotReady);
+    raycaster.setFromCamera(emptyVector, camera);
 
-    return () => {
-      screenshotReadyEvent.off(handleScreenshotReady);
-    };
-  }, []);
+    const cameraIntersections = raycaster.intersectObjects(
+      playground.current.children,
+      true,
+    );
+
+    let length: number;
+
+    if (cameraIntersections.length === 0) {
+      length = characteristics.shellRange;
+      direction.set(0, 0, -1).applyQuaternion(camera.quaternion);
+      aimTarget.copy(shellOrigin).addScaledVector(direction, length);
+    } else {
+      aimTarget.copy(cameraIntersections[0].point);
+      path.copy(aimTarget).sub(shellOrigin);
+      length = path.length();
+      direction.copy(path).normalize();
+    }
+
+    const deltaT = clock.elapsedTime - lastTime;
+    lastTime = clock.elapsedTime;
+
+    const desiredPitch = Math.asin(direction.y);
+    const desiredYaw = Math.atan2(-direction.x, -direction.z);
+    const deltaPitch = desiredPitch - modelTransformEvent.last!.pitch;
+    const deltaYaw = desiredYaw - modelTransformEvent.last!.yaw;
+    const deltaAngle = Math.sqrt(deltaPitch ** 2 + deltaYaw ** 2);
+    const maxPossibleRotationInTime = gunRotationSpeed * deltaT;
+    const clampedDeltaAngle = Math.min(maxPossibleRotationInTime, deltaAngle);
+    const clampedDeltaPitch =
+      deltaAngle === 0 ? 0 : deltaPitch * (clampedDeltaAngle / deltaAngle);
+    const clampedDeltaYaw =
+      deltaAngle === 0 ? 0 : deltaYaw * (clampedDeltaAngle / deltaAngle);
+
+    const [pitch, yaw] = applyPitchYawLimits(
+      modelTransformEvent.last!.pitch + clampedDeltaPitch,
+      modelTransformEvent.last!.yaw + clampedDeltaYaw,
+      gunModelDefinition.pitch,
+      turretModelDefinition.yaw,
+    );
+
+    const actualDeltaPitch = pitch - modelTransformEvent.last!.pitch;
+    const actualDeltaYaw = yaw - modelTransformEvent.last!.yaw;
+    const deltaRotation = Math.abs(actualDeltaPitch) + Math.abs(actualDeltaYaw);
+    const rotationSpeed = deltaRotation / deltaT;
+    const turretTraversePenalty =
+      characteristics.dispersionTurretTraversing * radToDeg(rotationSpeed);
+
+    const penalty = Math.sqrt(1 + turretTraversePenalty ** 2);
+
+    if (penalty === 1) {
+      const dispersionMod = dispersion - characteristics.dispersion;
+      const dispersionModDischarged =
+        dispersionMod * Math.exp(-deltaT / characteristics.aimTime) -
+        dispersionMod;
+
+      dispersion += dispersionModDischarged;
+    } else {
+      dispersion = Math.max(characteristics.dispersion * penalty, dispersion);
+    }
+
+    modelTransformEvent.dispatch({ pitch, yaw });
+
+    const gunDirection = new Vector3(0, 0, -1)
+      .applyAxisAngle(I_HAT, pitch)
+      .applyAxisAngle(J_HAT, yaw);
+
+    raycaster.set(shellOrigin, gunDirection);
+
+    const gunIntersections = raycaster.intersectObjects(
+      playground.current.children,
+      true,
+    );
+
+    let gunTarget: Vector3;
+
+    if (gunIntersections.length === 0) {
+      gunTarget = shellOrigin
+        .clone()
+        .add(gunDirection.multiplyScalar(characteristics.shellRange));
+    } else {
+      gunTarget = gunIntersections[0].point;
+    }
+
+    targetCircleWrapper.current.position.copy(gunTarget);
+
+    const distanceToTarget = gunTarget.distanceTo(shellOrigin);
+    const dispersionRadius = dispersion * (distanceToTarget / 100);
+    const dispersionSize = 2 * dispersionRadius;
+    const targetDistanceFromCamera = gunTarget.distanceTo(camera.position);
+    const angularSize =
+      2 * Math.atan(dispersionSize / (2 * targetDistanceFromCamera));
+    const verticalScreenSize =
+      2 * Math.tan(degToRad((camera as PerspectiveCamera).fov) / 2);
+    const screenSpaceSize =
+      gl.domElement.clientHeight * (angularSize / verticalScreenSize);
+    const targetCircleDotsSize = `${screenSpaceSize}px`;
+
+    clientTargetCircle.current.style.width = targetCircleDotsSize;
+    clientTargetCircle.current.style.height = targetCircleDotsSize;
+    serverTargetCircle.current.style.width = targetCircleDotsSize;
+    serverTargetCircle.current.style.height = targetCircleDotsSize;
+  });
+
+  if (!disturbed) return null;
 
   return (
-    <mesh
-      rotation={[-Math.PI / 2, 0, 0]}
-      receiveShadow
-      visible={!screenshotReadyEvent.last!}
-      ref={mesh}
-    >
-      <planeGeometry args={[SIZE, SIZE]} />
-      <meshStandardMaterial
-        transparent
-        ref={material}
-        color="black"
-        roughness={1}
-        metalness={1}
-      />
+    <mesh rotation={[-Math.PI / 2, 0, 0]}>
+      <planeGeometry args={[10, 10]} />
+      <meshStandardMaterial ref={material} map={texture} transparent />
     </mesh>
   );
 }

packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/TankModel.tsx

@@ -14,6 +14,7 @@ import { TankopediaDisplay } from '../../../../../../stores/tankopediaPersistent
 import { ModelTankWrapper } from '../../../../../Armor/components/ModelTankWrapper';
 
 export function TankModel() {
+  const mutateDuel = Duel.useMutation();
   const duelStore = Duel.useStore();
   const protagonist = Duel.use((draft) => draft.protagonist);
   const tankopediaEphemeralStore = TankopediaEphemeral.useStore();
@@ -104,7 +105,6 @@ export function TankModel() {
                 key={key}
                 onPointerDown={onPointerDown}
                 castShadow
-                receiveShadow
               />
             );
           },
@@ -140,14 +140,14 @@ export function TankModel() {
             window.addEventListener('pointermove', handlePointerMove);
             window.addEventListener('pointerup', handlePointerUp);
           }
-          function handlePointerMove(event: PointerEvent) {
+          async function handlePointerMove(event: PointerEvent) {
             const duel = duelStore.getState();
-            const hasImprovedVerticalStabilizer = hasEquipment(
+            const hasImprovedVerticalStabilizer = await hasEquipment(
               122,
               duel.protagonist.tank.equipment_preset,
               duel.protagonist.equipmentMatrix,
             );
-            const hasDownImprovedVerticalStabilizer = hasEquipment(
+            const hasDownImprovedVerticalStabilizer = await hasEquipment(
               124,
               duel.protagonist.tank.equipment_preset,
               duel.protagonist.equipmentMatrix,
@@ -184,7 +184,6 @@ export function TankModel() {
                   key={key}
                   onPointerDown={onPointerDown}
                   castShadow
-                  receiveShadow
                 />
               );
             },
@@ -228,14 +227,14 @@ export function TankModel() {
               window.addEventListener('pointermove', handlePointerMove);
               window.addEventListener('pointerup', handlePointerUp);
             }
-            function handlePointerMove(event: PointerEvent) {
+            async function handlePointerMove(event: PointerEvent) {
               const duel = duelStore.getState();
-              const hasImprovedVerticalStabilizer = hasEquipment(
+              const hasImprovedVerticalStabilizer = await hasEquipment(
                 122,
                 duel.protagonist.tank.equipment_preset,
                 duel.protagonist.equipmentMatrix,
               );
-              const hasDownImprovedVerticalStabilizer = hasEquipment(
+              const hasDownImprovedVerticalStabilizer = await hasEquipment(
                 124,
                 duel.protagonist.tank.equipment_preset,
                 duel.protagonist.equipmentMatrix,
@@ -270,7 +269,6 @@ export function TankModel() {
                     key={key}
                     onPointerDown={onPointerDown}
                     castShadow
-                    receiveShadow
                   />
                 );
               },

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

@@ -55,6 +55,7 @@ export const TankSandbox = forwardRef<HTMLCanvasElement, TankSandboxProps>(
     const hasDownImprovedVerticalStabilizer = useEquipment(124);
     const protagonistGun = Duel.use((state) => state.protagonist.gun);
     const protagonistTurret = Duel.use((state) => state.protagonist.turret);
+    const mutateDuel = Duel.useMutation();
     const tankModelDefinition = useTankModelDefinition();
     const turretModelDefinition =
       tankModelDefinition.turrets[protagonistTurret.id];
@@ -198,7 +199,7 @@ export const TankSandbox = forwardRef<HTMLCanvasElement, TankSandboxProps>(
           localClippingEnabled: true,
           preserveDrawingBuffer: true,
         }}
-        shadows="soft"
+        shadows
         onPointerDown={handlePointerDown}
         onPointerMissed={() => {
           mutateTankopediaEphemeral((draft) => {
@@ -231,7 +232,7 @@ export const TankSandbox = forwardRef<HTMLCanvasElement, TankSandboxProps>(
           {display === TankopediaDisplay.StaticArmor && (
             <StaticArmor thicknessRange={thicknessRange} />
           )}
-          <Lighting />
+          <Lighting display={display} />
         </Suspense>
 
         <InitialAligner />

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

@@ -2,6 +2,7 @@ import { Box, Flex } from '@radix-ui/themes';
 import { times } from 'lodash-es';
 import { Suspense, useEffect, useMemo, useRef } from 'react';
 import { awaitableTankDefinitions } from '../../../core/awaitables/tankDefinitions';
+import { Var } from '../../../core/radix/var';
 import { useFullScreen } from '../../../hooks/useFullScreen';
 import { Duel } from '../../../stores/duel';
 import { TankopediaEphemeral } from '../../../stores/tankopediaEphemeral';
@@ -9,7 +10,7 @@ import type { MaybeSkeletonComponentProps } from '../../../types/maybeSkeletonCo
 import type { ThicknessRange } from '../../Armor/components/StaticArmor';
 import { Options } from './components/Options';
 import { TankSandbox } from './components/TankSandbox';
-import { Title } from './components/TankSandbox/Title';
+import { NATION_COLORS, Title } from './components/TankSandbox/Title';
 
 const tankDefinitions = await awaitableTankDefinitions;
 
@@ -39,6 +40,7 @@ export function HeroSection({ skeleton }: MaybeSkeletonComponentProps) {
   const duelStore = Duel.useStore();
   const mutateDuel = Duel.useMutation();
   const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
+  const nationColors = NATION_COLORS[protagonist.nation];
 
   useEffect(() => {
     if (disturbed) {
@@ -83,7 +85,9 @@ export function HeroSection({ skeleton }: MaybeSkeletonComponentProps) {
         left="0"
         style={{
           opacity: disturbed ? 0 : 1,
-          background: 'black',
+          background: `linear-gradient(${nationColors.background
+            .map((color) => Var(`${color}-2`))
+            .join(',')})`,
           transitionDuration: '1s',
         }}
       />
@@ -97,16 +101,8 @@ export function HeroSection({ skeleton }: MaybeSkeletonComponentProps) {
           transitionDuration: '1s',
           background: isFullScreen ? 'black' : undefined,
         }}
-        height={
-          isFullScreen
-            ? '100vh'
-            : disturbed
-              ? 'calc(100svh - 6rem)'
-              : {
-                  initial: '28rem',
-                  md: 'calc(100svh - 12rem)',
-                }
-        }
+        height={!isFullScreen ? 'calc(100svh - 6rem)' : '100vh'}
+        maxHeight={isFullScreen ? undefined : '60rem'}
         maxWidth={isFullScreen ? undefined : '120rem'}
         flexGrow="1"
         width={isFullScreen ? '100vw' : undefined}
@@ -122,6 +118,8 @@ export function HeroSection({ skeleton }: MaybeSkeletonComponentProps) {
           position="relative"
         >
           <Box position="absolute" width="100%" height="100%" overflow="hidden">
+            <Title />
+
             <Box
               width="100%"
               height="100%"
@@ -147,7 +145,7 @@ export function HeroSection({ skeleton }: MaybeSkeletonComponentProps) {
               </Box>
             </Box>
 
-            <Title />
+            <Title foreground />
 
             <Options
               skeleton={skeleton}

packages/website/src/constants/tools.ts

@@ -127,18 +127,11 @@ export const guessTool: Tool = {
   branches: ['main', 'dev', 'opentest', 'preview'],
 };
 
-export const mixerTool: Tool = {
-  id: 'mixer',
-  button: { color: 'red' },
-  branches: ['main', 'dev', 'opentest', 'preview'],
-};
-
 export const TOOLS: Tool[] = [
   tankopediaTool,
   compareTool,
   performanceTool,
-  guessTool,
-  // mixerTool,
+  // guessTool,
   // chartsTool,
   galleryTool,
   sessionTool,

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

@@ -1,4 +0,0 @@
-export function isHalloween() {
-  const data = new Date();
-  return data.getMonth() === 9 && data.getDate() === 31;
-}

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

@@ -1,14 +1,19 @@
-import type { ProvisionDefinitions, TankDefinition } from '@blitzkit/core';
+import type {
+  ModelDefinition,
+  ProvisionDefinitions,
+  TankDefinition,
+} from '@blitzkit/core';
 import { uniqueId } from 'lodash-es';
 import type { CompareMember } from '../../stores/compareEphemeral';
 import { tankToDuelMember } from './tankToDuelMember';
 
 export function tankToCompareMember(
   tank: TankDefinition,
+  model: ModelDefinition,
   provisionDefinitions: ProvisionDefinitions,
 ) {
   return {
-    ...tankToDuelMember(tank, provisionDefinitions),
+    ...tankToDuelMember(tank, model, provisionDefinitions),
     key: uniqueId(),
   } satisfies CompareMember;
 }

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

@@ -1,5 +1,6 @@
 import {
   createDefaultProvisions,
+  ModelDefinition,
   type ProvisionDefinitions,
   type TankDefinition,
 } from '@blitzkit/core';
@@ -8,6 +9,7 @@ import { genericDefaultEquipmentMatrix } from '../../stores/duel/constants';
 
 export function tankToDuelMember(
   tank: TankDefinition,
+  model: ModelDefinition,
   provisionDefinitions: ProvisionDefinitions,
 ) {
   const turret = tank.turrets.at(-1)!;

packages/website/src/hooks/useTankTransform.ts

@@ -15,6 +15,7 @@ import {
   modelTransformEvent,
   type ModelTransformEventData,
 } from '../core/blitzkit/modelTransform';
+import { Duel } from '../stores/duel';
 import { useTankModelDefinition } from './useTankModelDefinition';
 
 export function useTankTransform(
@@ -24,6 +25,7 @@ export function useTankTransform(
   gunContainer: RefObject<Group>,
 ) {
   const tankModelDefinition = useTankModelDefinition();
+  const duelStore = Duel.useStore();
 
   useEffect(() => {
     const trackModelDefinition = tankModelDefinition.tracks[track.id];

packages/website/src/pages/[...locale]/compare/_index.tsx

@@ -114,7 +114,11 @@ function Content() {
 
         if (tank === undefined) return;
 
-        draft.members.push(tankToCompareMember(tank, provisionDefinitions));
+        const model = modelDefinitions.models[tank.id];
+
+        draft.members.push(
+          tankToCompareMember(tank, model, provisionDefinitions),
+        );
       });
     });
   }, []);

packages/website/src/pages/[...locale]/guess/_index.tsx

@@ -7,6 +7,7 @@ import { GuessRendererLoader } from '../../../components/GuessRendererLoader';
 import { awaitableModelDefinitions } from '../../../core/awaitables/modelDefinitions';
 import { awaitableProvisionDefinitions } from '../../../core/awaitables/provisionDefinitions';
 import { awaitableTankDefinitions } from '../../../core/awaitables/tankDefinitions';
+import { Var } from '../../../core/radix/var';
 import {
   type LocaleAcceptorProps,
   LocaleProvider,
@@ -32,13 +33,13 @@ export function Page({ locale }: LocaleAcceptorProps) {
   return (
     <GuessEphemeral.Provider data={initialTank}>
       <LocaleProvider locale={locale}>
-        <Container />
+        <Page2 />
       </LocaleProvider>
     </GuessEphemeral.Provider>
   );
 }
 
-function Container() {
+function Page2() {
   const tank = GuessEphemeral.use((state) => state.tank);
   const model = modelDefinitions.models[tank.id];
 
@@ -56,62 +57,65 @@ function Content() {
   const tank = GuessEphemeral.use((state) => state.tank);
   const guessState = GuessEphemeral.use((state) => state.guessState);
   const isRevealed = guessState !== null;
-  const name = unwrap(tank.name);
-  const fontSize = `min(48vh, ${55 / name.length}vw)`;
-  const transitionDuration = isRevealed ? '2s' : undefined;
 
   return (
     <Flex flexGrow="1" position="relative" overflow="hidden">
       <GuessBackground />
 
-      <Heading
+      <Flex
+        position="absolute"
+        left="50%"
+        top="50%"
+        ml="9"
         style={{
-          transitionDuration,
           opacity: isRevealed ? 1 : 0,
-          fontWeight: 900,
-          position: 'absolute',
-          left: '50%',
-          top: '50%',
-          transform: 'translate(-50%, -50%)',
-          fontSize,
-          userSelect: 'none',
-          whiteSpace: 'nowrap',
-          pointerEvents: 'none',
+          transitionDuration: isRevealed ? '2s' : undefined,
+          transform: 'translateY(-50%)',
         }}
       >
-        {name}
-      </Heading>
+        <Heading weight="medium" size="9">
+          {unwrap(tank.name)}
+        </Heading>
+      </Flex>
 
       <Box
         position="absolute"
-        top="0"
-        left="0"
         width="100%"
         height="100%"
-        style={{ transitionDuration }}
+        top="0"
+        right={isRevealed ? '16rem' : '0'}
+        style={{
+          transitionDuration: isRevealed ? '2s' : undefined,
+        }}
       >
         <Suspense fallback={<GuessRendererLoader />}>
           <GuessRenderer />
         </Suspense>
       </Box>
 
-      <Heading
+      <Flex
+        position="absolute"
+        left="50%"
+        top="50%"
+        ml="9"
         style={{
-          transitionDuration,
-          opacity: isRevealed ? 0.5 : 0,
-          fontWeight: 900,
-          position: 'absolute',
-          left: '50%',
-          top: '50%',
-          transform: 'translate(-50%, -50%)',
-          fontSize,
-          userSelect: 'none',
-          whiteSpace: 'nowrap',
-          pointerEvents: 'none',
+          opacity: isRevealed ? 1 : 0,
+          transitionDuration: isRevealed ? '2s' : undefined,
+          transform: 'translateY(-50%)',
+          color: 'transparent',
+          WebkitTextStroke: `1px ${Var('gray-12')}`,
         }}
       >
-        {name}
-      </Heading>
+        <Heading
+          style={{
+            WebkitTextStroke: `1px inherit`,
+          }}
+          weight="medium"
+          size="9"
+        >
+          {unwrap(tank.name)}
+        </Heading>
+      </Flex>
 
       <Guesser />
     </Flex>

packages/website/src/pages/[...locale]/index.astro

@@ -7,6 +7,7 @@ import { Box, Flex, Heading, Link } from '@radix-ui/themes';
 import type { GetStaticPaths } from 'astro';
 import { AesonPlug } from '../../components/AesonPlug';
 import HomeHero from '../../components/HomeHero.astro';
+import { HomePageHotTanks } from '../../components/HomePageHotTanks';
 import { Plugs } from '../../components/Plugs';
 import ToolCard from '../../components/ToolCard.astro';
 import {
@@ -14,7 +15,6 @@ import {
   discordTool,
   embedTool,
   galleryTool,
-  guessTool,
   moreTool,
   performanceTool,
   sessionTool,
@@ -25,6 +25,7 @@ import { getStrings } from '../../core/i18n/getStrings';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 
 const PUBLIC_ASSET_BRANCH = assertSecret(import.meta.env.PUBLIC_BRANCH);
+const MODE = assertSecret(import.meta.env.MODE);
 const locale = Astro.params.locale ?? DEFAULT_LOCALE;
 const strings = getStrings(Astro.params.locale);
 
@@ -109,22 +110,22 @@ export const getStaticPaths = (() => {
 
       <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
         <!-- <ToolCard tool={chartsTool} /> -->
-        <ToolCard tool={guessTool} />
+        <!-- <ToolCard tool={guessTool} /> -->
         <ToolCard tool={galleryTool} />
-      </Flex>
-
-      <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
         <ToolCard tool={sessionTool} />
+      </Flex>
+
+      <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
         <ToolCard tool={discordTool} />
-      </Flex>
-
-      <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
         <ToolCard tool={tierListTool} />
-        <ToolCard tool={embedTool} />
       </Flex>
 
       <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
+        <ToolCard tool={embedTool} />
         <ToolCard tool={moreTool} />
+      </Flex>
+
+      <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
         <Box flexGrow="1" />
       </Flex>
 

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

@@ -1,64 +0,0 @@
-import { Box } from '@radix-ui/themes';
-import { useRef } from 'react';
-import { MixerScene } from '../../../components/MixerScene';
-import { PageWrapper } from '../../../components/PageWrapper';
-import { awaitableTankDefinitions } from '../../../core/awaitables/tankDefinitions';
-import {
-  LocaleProvider,
-  type LocaleAcceptorProps,
-} from '../../../hooks/useLocale';
-import { MixerEphemeral } from '../../../stores/mixerEphemeral';
-
-const tankDefinitions = await awaitableTankDefinitions;
-const tanks = Object.values(tankDefinitions.tanks);
-
-export function Page({ locale }: LocaleAcceptorProps) {
-  const hull = useRef(tanks[Math.floor(Math.random() * tanks.length)]);
-  const turretTank = useRef(tanks[Math.floor(Math.random() * tanks.length)]);
-  const turret = useRef(
-    turretTank.current.turrets[
-      Math.floor(Math.random() * turretTank.current.turrets.length)
-    ],
-  );
-  const gunTank = useRef(tanks[Math.floor(Math.random() * tanks.length)]);
-  const gunTurret = useRef(
-    gunTank.current.turrets[
-      Math.floor(Math.random() * gunTank.current.turrets.length)
-    ],
-  );
-  const gun = useRef(
-    gunTurret.current.guns[
-      Math.floor(Math.random() * gunTurret.current.guns.length)
-    ],
-  );
-
-  return (
-    <LocaleProvider locale={locale}>
-      <MixerEphemeral.Provider
-        data={{
-          hull: hull.current,
-          turret: { tank: turretTank.current, turret: turret.current },
-          gun: {
-            tank: gunTank.current,
-            turret: gunTurret.current,
-            gun: gun.current,
-          },
-        }}
-      >
-        <Content />
-      </MixerEphemeral.Provider>
-    </LocaleProvider>
-  );
-}
-
-function Content() {
-  return (
-    <PageWrapper p="0">
-      <Box flexGrow="1" position="relative">
-        <Box position="absolute" width="100%" height="100%" top="0" left="0">
-          <MixerScene />
-        </Box>
-      </Box>
-    </PageWrapper>
-  );
-}

packages/website/src/pages/[...locale]/mixer/index.astro

@@ -1,15 +0,0 @@
----
-import { PageWrapper } from '../../../components/PageWrapper';
-import BaseLayout from '../../../layouts/BaseLayout.astro';
-import { Page } from './_index';
-
-export { getStaticPaths } from '../index.astro';
-
-const { locale } = Astro.params;
----
-
-<BaseLayout>
-  <PageWrapper p="0" maxWidth="unset">
-    <Page {locale} client:load />
-  </PageWrapper>
-</BaseLayout>

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

@@ -55,7 +55,7 @@ export const Duel = createContextualStore(
     model: ModelDefinition;
     provisionDefinitions: ProvisionDefinitions;
   }) => {
-    const protagonist = tankToDuelMember(tank, provisionDefinitions);
+    const protagonist = tankToDuelMember(tank, model, provisionDefinitions);
 
     return create<DuelStore>()(
       subscribeWithSelector<DuelStore>(() => ({

packages/website/src/stores/mixerEphemeral.ts

@@ -1,24 +0,0 @@
-import type {
-  GunDefinition,
-  TankDefinition,
-  TurretDefinition,
-} from '@blitzkit/core';
-import { create } from 'zustand';
-import { createContextualStore } from '../core/zustand/createContextualStore';
-
-export interface MixerEphemeral {
-  hull: TankDefinition;
-  turret: {
-    tank: TankDefinition;
-    turret: TurretDefinition;
-  };
-  gun: {
-    tank: TankDefinition;
-    turret: TurretDefinition;
-    gun: GunDefinition;
-  };
-}
-
-export const MixerEphemeral = createContextualStore((data: MixerEphemeral) =>
-  create<MixerEphemeral>()(() => data),
-);

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

@@ -12,6 +12,7 @@ export interface TankopediaPersistentStore {
   wireframe: boolean;
   opaque: boolean;
   advancedHighlighting: boolean;
+  showGrid: boolean;
   greenPenetration: boolean;
   showSpacedArmor: boolean;
   showExternalModules: boolean;
@@ -33,6 +34,7 @@ export const TankopediaPersistent = createContextualStore(() =>
         wireframe: false,
         opaque: false,
         advancedHighlighting: false,
+        showGrid: true,
         greenPenetration: false,
         showSpacedArmor: true,
         showExternalModules: true,