feat: migration 2

packages/website/public/protos/BattleResultsClient.proto

@@ -1,298 +0,0 @@
-syntax = "proto3";
-
-package BattleResultsGenerated;
-
-import "PlayerAvatarImage.proto";
-
-message Int32List {
-  repeated int32 values = 1;
-}
-
-message PlayerInfo {
-  message AvatarEntry {
-    int32 key = 1;
-    .PlayerAvatarInfo value = 2;
-  }
-
-  string name = 1;
-  int32 prebattleID = 2;
-  int32 team = 3;
-  int64 clanID = 4;
-  string clanTag = 5;
-  repeated int32 chatMessageCount = 6;
-  repeated .BattleResultsGenerated.PlayerInfo.AvatarEntry avatar = 7;
-  int32 profileBackground = 8;
-  int32 vehicleRank = 9;
-}
-
-message TeamInfo {
-  string title = 1;
-  string icon = 2;
-}
-
-message VehiclePublicResults {
-  message ExtVehAchievementsEntry {
-    int32 key = 1;
-    int32 value = 2;
-  }
-
-  message ExtAccAchievementsEntry {
-    int32 key = 1;
-    int32 value = 2;
-  }
-
-  int32 health = 1;
-  int32 credits = 2;
-  int32 xp = 3;
-  int32 shots = 4;
-  int32 directHits = 5;
-  int32 explosionHits = 6;
-  int32 piercings = 7;
-  int32 damageDealt = 8;
-  int32 damageAssistedRadio = 9;
-  int32 damageAssistedTrack = 10;
-  int32 damageReceived = 11;
-  int32 directHitsReceived = 12;
-  int32 noDamageDirectHitsReceived = 13;
-  int32 explosionHitsReceived = 14;
-  int32 piercingsReceived = 15;
-  int32 spotted = 16;
-  int32 damaged = 17;
-  int32 kills = 18;
-  int32 tdamageDealt = 19;
-  int32 tkills = 20;
-  int32 capturePoints = 21;
-  int32 droppedCapturePoints = 22;
-  int32 mileage = 23;
-  int32 lifeTime = 24;
-  int32 killerID = 25;
-  repeated int32 achievements = 26;
-  repeated .BattleResultsGenerated.VehiclePublicResults.ExtVehAchievementsEntry extVehAchievements = 27;
-  repeated .BattleResultsGenerated.VehiclePublicResults.ExtAccAchievementsEntry extAccAchievements = 28;
-  int32 xpDamage = 29;
-  int32 xpAssist = 30;
-  int32 xpTeamBonus = 31;
-  int32 wpEarned = 32;
-  int32 wpStolen = 33;
-  int32 heroCreditsBonus = 34;
-  int32 heroXpBonus = 35;
-  int64 accountDBID = 101;
-  int32 team = 102;
-  int32 serializedVehType = 103;
-  int32 gold = 104;
-  int32 deathReason = 105;
-  int32 camouflage = 106;
-  float mmr = 107;
-  float mmrDiff = 108;
-  int32 calibrationBattlesLeft = 109;
-  int32 healedHP = 114;
-  int32 wasHealedFor = 115;
-  int32 xpActivity = 36;
-  int32 customization = 116;
-  int32 potentialEnemyDamage = 117;
-  int32 rammingDamage = 118;
-  int32 helpedToKill = 119;
-}
-
-message BattleResultsFinalXp {
-  int32 xpDamagePure = 1;
-  int32 xpDamagePrem = 2;
-  int32 xpAssistPure = 3;
-  int32 xpAssistPrem = 4;
-  int32 xpActivityPure = 5;
-  int32 xpActivityPrem = 6;
-  int32 xpTeamBonusPure = 7;
-  int32 xpTeamBonusPrem = 8;
-  int32 healingXpPure = 9;
-  int32 healingXpPrem = 10;
-  int32 heroXpBonusPure = 11;
-  int32 heroXpBonusPrem = 12;
-  int32 earnedFreeXpPure = 13;
-  int32 earnedFreeXpPrem = 14;
-  int32 earnedAvatarXpPure = 15;
-  int32 earnedAvatarXpPrem = 16;
-  int32 xpNoModifiers = 17;
-  int32 xpPure = 18;
-  int32 xpPrem = 19;
-  int32 totalFreeXpPure = 20;
-  int32 totalFreeXpPrem = 21;
-  int32 totalAvatarXpPure = 22;
-  int32 totalAvatarXpPrem = 23;
-}
-
-message Ribbons {
-  int32 id = 1;
-  int32 grade = 2;
-  int32 amount = 3;
-  int32 value = 4;
-}
-
-message BattleResultsUpdate {
-  message ExcellentBattleDataEntry {
-    string key = 1;
-    int32 value = 2;
-  }
-
-  message StuffEntry {
-    int32 key = 1;
-    int32 value = 2;
-  }
-
-  message RatingBattleStuffBonusEntry {
-    int32 key = 1;
-    int32 value = 2;
-  }
-
-  int32 avatarXP = 1;
-  int32 eventCredits = 2;
-  int32 eventGold = 3;
-  int32 eventXP = 4;
-  int32 eventFreeXP = 5;
-  int32 eventAvatarXP = 6;
-  int32 autoRepairCost = 7;
-  repeated int32 autoLoadCost = 8;
-  repeated int32 autoEquipCost = 9;
-  repeated int32 autoProvCost = 10;
-  bool isPremium = 12;
-  int32 premiumXPFactor10 = 13;
-  int32 premiumCreditsFactor10 = 14;
-  int32 xpFactor10 = 15;
-  int32 creditsFactor10 = 16;
-  int32 aogasFactor10 = 17;
-  int32 markOfMastery = 18;
-  repeated .BattleResultsGenerated.BattleResultsUpdate.ExcellentBattleDataEntry excellentBattleData = 19;
-  bytes vehDossier = 20;
-  bytes accDossier = 21;
-  bytes vehDossierPrev = 22;
-  bytes accDossierPrev = 23;
-  int32 autoRepairDiscount = 24;
-  repeated int32 autoEquipDiscount = 25;
-  repeated int32 autoProvDiscount = 26;
-  repeated .BattleResultsGenerated.BattleResultsUpdate.StuffEntry stuff = 27;
-  int32 boosterCredits = 29;
-  int32 boosterXp = 30;
-  int32 boosterFreeXp = 31;
-  int32 boosterAvatarXp = 32;
-  int32 complimentsLimit = 33;
-  repeated int32 autoAbilsCost = 34;
-  repeated int32 autoAbilsDiscount = 35;
-  bool hasHealingReward = 36;
-  int32 healingCredits = 37;
-  int32 healingXp = 38;
-  int32 healingFreeXp = 39;
-  int32 healingAvatarXp = 40;
-  float mmr = 107;
-  float mmrDiff = 108;
-  int32 calibrationBattlesLeft = 109;
-  int32 ratingBattleXp = 110;
-  int32 ratingBattleFreeXp = 111;
-  int32 ratingBattleAvatarXp = 112;
-  repeated .BattleResultsGenerated.BattleResultsUpdate.RatingBattleStuffBonusEntry ratingBattleStuffBonus = 113;
-  repeated .BattleResultsGenerated.Ribbons ribbons = 114;
-}
-
-message DropData {
-  message StuffEntry {
-    int32 key = 1;
-    int32 value = 2;
-  }
-
-  int32 credits = 1;
-  int32 gold = 2;
-  int32 xp = 3;
-  int32 freeXP = 4;
-  int32 avatarXP = 5;
-  repeated .BattleResultsGenerated.DropData.StuffEntry stuff = 27;
-}
-
-message VehicleInteractionDetails {
-  message DamagedModulesEntry {
-    int32 key = 1;
-    int32 value = 2;
-  }
-
-  message DestroyedModulesEntry {
-    int32 key = 1;
-    int32 value = 2;
-  }
-
-  bool spotted = 1;
-  int32 deathReason = 2;
-  int32 directHits = 3;
-  int32 directHitWithoutDamage = 4;
-  int32 explosionHits = 5;
-  int32 piercings = 6;
-  int32 damageDealt = 7;
-  int32 damageAssistedTrack = 8;
-  int32 damageAssistedRadio = 9;
-  int32 fire = 10;
-  repeated .BattleResultsGenerated.VehicleInteractionDetails.DamagedModulesEntry damagedModules = 11;
-  repeated .BattleResultsGenerated.VehicleInteractionDetails.DestroyedModulesEntry destroyedModules = 12;
-  int32 ricochetHitWithoutDamage = 13;
-}
-
-message InteractionDetails {
-  message VehiclesEntry {
-    int32 key = 1;
-    .BattleResultsGenerated.VehicleInteractionDetails value = 2;
-  }
-
-  repeated .BattleResultsGenerated.InteractionDetails.VehiclesEntry vehicles = 1;
-}
-
-message PrebattleStats {
-  int32 freeXp = 1;
-  int32 vehicleXp = 2;
-}
-
-message BattleResultsClient {
-  message QuestsProgressEntry {
-    string key = 1;
-    .BattleResultsGenerated.Int32List value = 2;
-  }
-
-  message DropCategoriesEntry {
-    string key = 1;
-    .BattleResultsGenerated.DropData value = 2;
-  }
-
-  message PlayersEntry {
-    int64 key = 1;
-    .BattleResultsGenerated.PlayerInfo value = 2;
-  }
-
-  message VehiclesEntry {
-    int32 key = 1;
-    .BattleResultsGenerated.VehiclePublicResults value = 2;
-  }
-
-  int32 arenaTypeID = 1;
-  int32 arenaCreateTime = 2;
-  int32 winnerTeam = 3;
-  int32 finishReason = 4;
-  int32 duration = 5;
-  int32 bonusType = 6;
-  int32 vehLockMode = 7;
-  .BattleResultsGenerated.VehiclePublicResults public = 8;
-  int32 gameModeID = 9;
-  int32 observerMode = 10;
-  .BattleResultsGenerated.BattleResultsFinalXp finalXp = 11;
-  int32 repair = 136;
-  int32 freeXP = 137;
-  int32 xpPenalty = 145;
-  int32 creditsPenalty = 146;
-  int32 creditsContributionIn = 147;
-  int32 creditsContributionOut = 148;
-  .BattleResultsGenerated.BattleResultsUpdate update = 150;
-  int32 originalXP = 181;
-  int32 originalFreeXP = 182;
-  int32 originalCredits = 183;
-  repeated .BattleResultsGenerated.BattleResultsClient.QuestsProgressEntry questsProgress = 184;
-  repeated .BattleResultsGenerated.BattleResultsClient.DropCategoriesEntry dropCategories = 185;
-  .BattleResultsGenerated.TeamInfo teamInfo = 186;
-  repeated .BattleResultsGenerated.BattleResultsClient.PlayersEntry players = 201;
-  repeated .BattleResultsGenerated.BattleResultsClient.VehiclesEntry vehicles = 301;
-  .BattleResultsGenerated.InteractionDetails interactionDetails = 302;
-  .BattleResultsGenerated.PrebattleStats prebattleStats = 303;
-}
-

packages/website/public/protos/PlayerAvatarImage.proto

@@ -1,8 +0,0 @@
-syntax = "proto3";
-
-message PlayerAvatarInfo {
-  uint32 id = 1;
-  string image = 2;
-  string image_retina = 3;
-  string grade = 4;
-}

packages/website/public/protos/average_definitions.proto

@@ -1,47 +0,0 @@
-syntax = "proto3";
-
-package blitzkit;
-
-message AverageDefinitions {
-  map<uint32, AverageDefinitionsEntry> averages = 1;
-  Samples samples = 2;
-  uint64 time = 3;
-}
-
-message AverageDefinitionsEntry {
-  AverageDefinitionsAllStats mu = 1;
-  AverageDefinitionsAllStats sigma = 2;
-  AverageDefinitionsAllStats r = 3;
-  Samples samples = 4;
-}
-
-message AverageDefinitionsAllStats {
-  float battles = 1;
-  float capture_points = 2;
-  float damage_dealt = 3;
-  float damage_received = 4;
-  float dropped_capture_points = 5;
-  float frags = 6;
-  float frags8p = 7;
-  float hits = 8;
-  float losses = 9;
-  float max_frags = 10;
-  float max_xp = 11;
-  float shots = 12;
-  float spotted = 13;
-  float survived_battles = 14;
-  float win_and_survived = 15;
-  float wins = 16;
-  float xp = 17;
-  float battle_life_time = 18;
-}
-
-message Samples {
-  uint32 d_1 = 1;
-  uint32 d_7 = 2;
-  uint32 d_30 = 3;
-  uint32 d_60 = 4;
-  uint32 d_90 = 5;
-  uint32 d_120 = 6;
-  uint32 total = 7;
-}

packages/website/public/protos/reviews.proto

@@ -1,17 +0,0 @@
-syntax = "proto3";
-
-package blitzkit;
-
-message Reviews {
-  map<uint32, Review> reviews = 1;
-}
-
-message Review {
-  float last_updated = 1;
-  repeated Video videos = 2;
-}
-
-message Video {
-  string id = 1;
-  string author = 2;
-}

packages/website/src/app/tools/compare/components/CompareTable.tsx

@@ -1,3 +1,4 @@
+import { permanentSkills } from '@blitzkit/core/src/blitz/permanentSkills';
 import { ComponentPlaceholderIcon } from '@radix-ui/react-icons';
 import { Button, Flex, Popover, Slider, Table, Text } from '@radix-ui/themes';
 import { debounce, times } from 'lodash';
@@ -21,7 +22,6 @@ import { BlitzkitButtonGray } from '../../../../icons/BlitzkitButtonGray';
 import { theme } from '../../../../stitches.config';
 import * as CompareEphemeral from '../../../../stores/compareEphemeral';
 import { EquipmentMatrix } from '../../../../stores/duel';
-import { permanentSkills } from '../../tankopedia/[id]/components/Characteristics/components/Skills/constants';
 import { Body } from './Body';
 import { InsertionMarker } from './IntersectionMarker';
 import { TankCard } from './TankCard';
@@ -101,8 +101,8 @@ export function CompareTable({ stats }: CompareTableProps) {
                                     crewSkills[skill] === 0
                                       ? theme.colors.textLowContrast
                                       : permanentSkills.includes(skill)
-                                        ? theme.colors.textLowContrast_crimson
-                                        : theme.colors.textLowContrast_amber,
+                                      ? theme.colors.textLowContrast_crimson
+                                      : theme.colors.textLowContrast_amber,
                                 }}
                               />
                             ))}

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

@@ -1,3 +1,7 @@
+import {
+  checkConsumableProvisionInclusivity,
+  consumableDefinitions,
+} from '@blitzkit/core';
 import { InfoCircledIcon } from '@radix-ui/react-icons';
 import {
   Button,
@@ -9,8 +13,6 @@ import {
 } from '@radix-ui/themes';
 import { use } from 'react';
 import { ConsumablesManager } from '../../../../../../../components/ConsumablesManager';
-import { checkConsumableProvisionInclusivity } from '../../../../../../../core/blitzkit/checkConsumableProvisionInclusivity';
-import { consumableDefinitions } from '../../../../../../../core/blitzkit/consumableDefinitions';
 import { useEquipment } from '../../../../../../../hooks/useEquipment';
 import * as Duel from '../../../../../../../stores/duel';
 import { ConfigurationChildWrapper } from './ConfigurationChildWrapper';

packages/website/src/app/tools/tankopedia/[id]/components/Characteristics/components/Equipment.tsx

@@ -1,7 +1,7 @@
+import { equipmentDefinitions } from '@blitzkit/core';
 import { Button, Flex, Heading } from '@radix-ui/themes';
 import { use } from 'react';
 import { EquipmentManager } from '../../../../../../../components/EquipmentManager';
-import { equipmentDefinitions } from '../../../../../../../core/blitzkit/equipmentDefinitions';
 import * as Duel from '../../../../../../../stores/duel';
 import { ConfigurationChildWrapper } from './ConfigurationChildWrapper';
 

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

@@ -1,14 +1,12 @@
 import { CaretDownIcon, CaretUpIcon } from '@radix-ui/react-icons';
 import { Flex, Text } from '@radix-ui/themes';
 import { ReactNode } from 'react';
-import { theme } from '../../../../../../../stitches.config';
 
 export interface InfoProps {
   name: ReactNode;
   children?: ReactNode;
   unit?: string;
   indent?: boolean;
-  highlight?: boolean;
   delta?: number;
   decimals?: number;
   prefix?: string;
@@ -20,7 +18,6 @@ export function Info({
   children,
   unit,
   indent = false,
-  highlight,
   delta,
   decimals,
   prefix,
@@ -32,7 +29,7 @@ export function Info({
       style={{ width: '100%', paddingLeft: indent ? 24 : 0 }}
       gap="4"
     >
-      <Text color={highlight ? 'amber' : 'gray'}>
+      <Text color="gray">
         {name}
         {unit != undefined && (
           <>
@@ -49,9 +46,7 @@ export function Info({
           style={{
             flex: 1,
             height: 1,
-            backgroundColor: highlight
-              ? theme.colors.componentCallToActionInteractive_amberAlpha
-              : theme.colors.componentCallToActionInteractive_alpha,
+            backgroundColor: 'red',
           }}
         />
       )}
@@ -82,7 +77,7 @@ export function Info({
               </Text>
             </>
           )}
-          <Text color={highlight ? 'amber' : undefined}>
+          <Text>
             {prefix}
             {decimals !== undefined && typeof children === 'number'
               ? children.toFixed(decimals)

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

@@ -1,8 +1,8 @@
+import { asset } from '@blitzkit/core';
 import { Flex, Heading, Slider, TextField } from '@radix-ui/themes';
 import { clamp, debounce } from 'lodash';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { GenericTankComponentButton } from '../../../../../../../components/ModuleButtons/GenericTankComponentButton';
-import { asset } from '../../../../../../../core/blitzkit/asset';
 import * as Duel from '../../../../../../../stores/duel';
 import { ConfigurationChildWrapper } from './ConfigurationChildWrapper';
 
@@ -61,10 +61,10 @@ export function Miscellaneous() {
             cooldownBooster === 0
               ? undefined
               : cooldownBooster === 1
-                ? '#afb0abc0'
-                : cooldownBooster === 2
-                  ? '#5f72cbc0'
-                  : '#9b3cc0c0'
+              ? '#afb0abc0'
+              : cooldownBooster === 2
+              ? '#5f72cbc0'
+              : '#9b3cc0c0'
           }
           iconStyles={{
             transform: 'translate(-50%, -50%) scale(0.8)',

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

@@ -1,3 +1,10 @@
+import {
+  asset,
+  formatCompact,
+  tankDefinitions,
+  tankIcon,
+  TIER_ROMAN_NUMERALS,
+} from '@blitzkit/core';
 import {
   Button,
   ChevronDownIcon,
@@ -8,18 +15,6 @@ import {
   Text,
 } from '@radix-ui/themes';
 import { use } from 'react';
-import { asset } from '../../../../../../../core/blitzkit/asset';
-import {
-  ModuleDefinition,
-  ModuleType,
-  TankDefinition,
-  tankDefinitions,
-  Tier,
-  Unlock,
-} from '../../../../../../../core/blitzkit/tankDefinitions';
-import { TIER_ROMAN_NUMERALS } from '../../../../../../../core/blitzkit/tankDefinitions/constants';
-import { tankIcon } from '../../../../../../../core/blitzkit/tankIcon';
-import { formatCompact } from '../../../../../../../core/math/formatCompact';
 import * as Duel from '../../../../../../../stores/duel';
 import { ConfigurationChildWrapper } from './ConfigurationChildWrapper';
 
@@ -222,7 +217,9 @@ export function Modules() {
                     <div
                       style={{
                         backgroundColor: 'currentcolor',
-                        width: `calc(${central ? 100 : 50}% + ${central ? 8 : 4}px)`,
+                        width: `calc(${central ? 100 : 50}% + ${
+                          central ? 8 : 4
+                        }px)`,
                         height: 1,
                         position: 'absolute',
                         right: first ? 0 : undefined,
@@ -262,23 +259,23 @@ export function Modules() {
                   (unlock.type === 'turret'
                     ? turret.id
                     : unlock.type === 'gun'
-                      ? gun.id
-                      : unlock.type === 'engine'
-                        ? engine.id
-                        : unlock.type === 'chassis'
-                          ? track.id
-                          : -1) === unlock.id
+                    ? gun.id
+                    : unlock.type === 'engine'
+                    ? engine.id
+                    : unlock.type === 'chassis'
+                    ? track.id
+                    : -1) === unlock.id
                 }
                 top={
                   unlock.type === 'turret'
                     ? module.id == topTurret.id
                     : unlock.type === 'gun'
-                      ? module.id === topGun.id
-                      : unlock.type === 'engine'
-                        ? module.id === topEngine.id
-                        : unlock.type === 'chassis'
-                          ? module.id === topTrack.id
-                          : false
+                    ? module.id === topGun.id
+                    : unlock.type === 'engine'
+                    ? module.id === topEngine.id
+                    : unlock.type === 'chassis'
+                    ? module.id === topTrack.id
+                    : false
                 }
                 onClick={() => setByUnlock(unlock)}
               />

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

@@ -1,8 +1,7 @@
+import { availableProvisions, provisionDefinitions } from '@blitzkit/core';
 import { Button, Flex, Heading } from '@radix-ui/themes';
 import { use } from 'react';
 import { ProvisionsManager } from '../../../../../../../components/ProvisionsManager';
-import { availableProvisions } from '../../../../../../../core/blitzkit/availableProvisions';
-import { provisionDefinitions } from '../../../../../../../core/blitzkit/provisionDefinitions';
 import * as Duel from '../../../../../../../stores/duel';
 import { ConfigurationChildWrapper } from './ConfigurationChildWrapper';
 

packages/website/src/app/tools/tankopedia/[id]/components/Characteristics/components/Skills/constants.tsx

@@ -1,8 +0,0 @@
-export const permanentSkills = [
-  'smooth_turn',
-  'soft_recoil',
-  'smooth_driving',
-  'smooth_turret',
-  'virtuoso',
-  'camouflage',
-];

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

@@ -1,3 +1,4 @@
+import { createDefaultSkills, skillDefinitions } from '@blitzkit/core';
 import { InfoCircledIcon } from '@radix-ui/react-icons';
 import {
   Button,
@@ -10,8 +11,6 @@ import {
 } from '@radix-ui/themes';
 import { use } from 'react';
 import { CrewSkillManager } from '../../../../../../../../components/CrewSkillManager';
-import { createDefaultSkills } from '../../../../../../../../core/blitzkit/createDefaultSkills';
-import { skillDefinitions } from '../../../../../../../../core/blitzkit/skillDefinitions';
 import * as TankopediaEphemeral from '../../../../../../../../stores/tankopediaEphemeral';
 import { ConfigurationChildWrapper } from '../ConfigurationChildWrapper';
 

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

@@ -1,3 +1,14 @@
+import {
+  asset,
+  coefficient,
+  CREW_MEMBER_NAMES,
+  equipmentDefinitions,
+  GUN_TYPE_NAMES,
+  isExplosive,
+  provisionDefinitions,
+  resolvePenetrationCoefficient,
+  tankCharacteristics,
+} from '@blitzkit/core';
 import { AccessibilityIcon, InfoCircledIcon } from '@radix-ui/react-icons';
 import {
   Flex,
@@ -13,18 +24,6 @@ import { debounce } from 'lodash';
 import { Fragment, use, useEffect, useRef, useState } from 'react';
 import { lerp } from 'three/src/math/MathUtils';
 import { Ad, AdType } from '../../../../../../components/Ad';
-import { applyPitchYawLimits } from '../../../../../../core/blitz/applyPitchYawLimits';
-import { isExplosive } from '../../../../../../core/blitz/isExplosive';
-import { resolvePenetrationCoefficient } from '../../../../../../core/blitz/resolvePenetrationCoefficient';
-import { asset } from '../../../../../../core/blitzkit/asset';
-import { coefficient } from '../../../../../../core/blitzkit/coefficient';
-import { equipmentDefinitions } from '../../../../../../core/blitzkit/equipmentDefinitions';
-import { provisionDefinitions } from '../../../../../../core/blitzkit/provisionDefinitions';
-import { tankCharacteristics } from '../../../../../../core/blitzkit/tankCharacteristics';
-import {
-  CREW_MEMBER_NAMES,
-  GUN_TYPE_NAMES,
-} from '../../../../../../core/blitzkit/tankDefinitions/constants';
 import { useAdExempt } from '../../../../../../hooks/useAdExempt';
 import { useEquipment } from '../../../../../../hooks/useEquipment';
 import { useTankModelDefinition } from '../../../../../../hooks/useTankModelDefinition';
@@ -463,7 +462,9 @@ export function Characteristics() {
               <Fragment key={member.type}>
                 <InfoWithDelta
                   key={`${member.type}-root`}
-                  name={`${CREW_MEMBER_NAMES[member.type]}${count > 1 ? ` x ${count}` : ''}`}
+                  name={`${CREW_MEMBER_NAMES[member.type]}${
+                    count > 1 ? ` x ${count}` : ''
+                  }`}
                   unit="%"
                   decimals={0}
                 >

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

@@ -1,12 +1,9 @@
+import { Pose } from '@blitzkit/core';
 import { OrbitControls } from '@react-three/drei';
 import { useThree } from '@react-three/fiber';
 import { useEffect, useRef, useState } from 'react';
 import { Vector3 } from 'three';
 import { OrbitControls as OrbitControlsClass } from 'three-stdlib';
-import { applyPitchYawLimits } from '../../../../../core/blitz/applyPitchYawLimits';
-import { hasEquipment } from '../../../../../core/blitzkit/hasEquipment';
-import { modelDefinitions } from '../../../../../core/blitzkit/modelDefinitions';
-import { Pose, poseEvent } from '../../../../../core/blitzkit/pose';
 import { useAwait } from '../../../../../hooks/useAwait';
 import * as Duel from '../../../../../stores/duel';
 import * as TankopediaEphemeral from '../../../../../stores/tankopediaEphemeral';

packages/website/src/app/tools/tankopedia/[id]/components/Model/GameModeSection.tsx

@@ -1,9 +1,11 @@
+import {
+  asset,
+  consumableDefinitions,
+  gameDefinitions,
+  provisionDefinitions,
+} from '@blitzkit/core';
 import { Box, Flex, Heading, Text } from '@radix-ui/themes';
 import { use } from 'react';
-import { asset } from '../../../../../../core/blitzkit/asset';
-import { consumableDefinitions } from '../../../../../../core/blitzkit/consumableDefinitions';
-import { gameDefinitions } from '../../../../../../core/blitzkit/gameDefinitions';
-import { provisionDefinitions } from '../../../../../../core/blitzkit/provisionDefinitions';
 import * as Duel from '../../../../../../stores/duel';
 
 export function GameModeSection() {
@@ -33,7 +35,9 @@ export function GameModeSection() {
               direction="column"
               style={{
                 borderRadius: 'var(--radius-3)',
-                background: `url(${asset(`icons/game_mode_banners/${id}.webp`)})`,
+                background: `url(${asset(
+                  `icons/game_mode_banners/${id}.webp`,
+                )})`,
                 backgroundSize: 'cover',
                 backgroundPosition: 'center',
               }}
@@ -41,7 +45,9 @@ export function GameModeSection() {
               <Box
                 flexGrow="1"
                 style={{
-                  background: `url(${asset(`icons/game_mode_banners/${id}.webp`)})`,
+                  background: `url(${asset(
+                    `icons/game_mode_banners/${id}.webp`,
+                  )})`,
                   backgroundSize: 'cover',
                   backgroundPosition: 'center',
                 }}

packages/website/src/app/tools/tankopedia/[id]/components/Model/HeroSection.tsx

@@ -1,11 +1,8 @@
+import { resolveNearPenetration, tankDefinitions, Var } from '@blitzkit/core';
 import { Box, Flex, Heading, Text } from '@radix-ui/themes';
 import { Suspense, use, useEffect, useMemo, useRef, useState } from 'react';
-import { ThicknessRange } from '../../../../../../components/Armor/components/StaticArmor';
 import { classIcons } from '../../../../../../components/ClassIcon';
 import { NAVBAR_HEIGHT } from '../../../../../../components/Navbar/index.css';
-import { resolveNearPenetration } from '../../../../../../core/blitz/resolveNearPenetration';
-import { tankDefinitions } from '../../../../../../core/blitzkit/tankDefinitions';
-import { Var } from '../../../../../../core/blitzkit/var';
 import { useFullScreen } from '../../../../../../hooks/useFullScreen';
 import * as Duel from '../../../../../../stores/duel';
 import { TankSandbox } from './TankSandbox';
@@ -22,8 +19,8 @@ export function HeroSection() {
     protagonist.treeType === 'collector'
       ? 'blue'
       : protagonist.treeType === 'premium'
-        ? 'amber'
-        : undefined;
+      ? 'amber'
+      : undefined;
   const awaitedTankDefinitions = use(tankDefinitions);
   const thicknessRange = useMemo(() => {
     const entries = Object.values(awaitedTankDefinitions);

packages/website/src/app/tools/tankopedia/[id]/components/Model/MetaSection/index.tsx

@@ -1,15 +1,16 @@
+import {
+  assertSecret,
+  asset,
+  modelDefinitions,
+  provisionDefinitions,
+} from '@blitzkit/core';
+import strings from '@blitzkit/core/lang/en-US.json';
 import { ChevronLeftIcon, MixIcon, UpdateIcon } from '@radix-ui/react-icons';
 import { Button, Code, Dialog, Flex } from '@radix-ui/themes';
 import { use, useState } from 'react';
 import { classIcons } from '../../../../../../../components/ClassIcon';
 import { Link } from '../../../../../../../components/Link';
 import { ScienceIcon } from '../../../../../../../components/ScienceIcon';
-import { asset } from '../../../../../../../core/blitzkit/asset';
-import { modelDefinitions } from '../../../../../../../core/blitzkit/modelDefinitions';
-import { provisionDefinitions } from '../../../../../../../core/blitzkit/provisionDefinitions';
-import { assertSecret } from '../../../../../../../core/blitzkit/secret';
-import { tankToDuelMember } from '../../../../../../../core/blitzkit/tankToDuelMember';
-import strings from '../../../../../../../lang/en-US.json';
 import * as App from '../../../../../../../stores/app';
 import * as Duel from '../../../../../../../stores/duel';
 import * as TankopediaEphemeral from '../../../../../../../stores/tankopediaEphemeral';
@@ -132,8 +133,8 @@ export function MetaSection() {
                 protagonist.treeType === 'collector'
                   ? 'blue'
                   : protagonist.treeType === 'premium'
-                    ? 'amber'
-                    : undefined
+                  ? 'amber'
+                  : undefined
               }
             >
               {strings.common.tree_type[protagonist.treeType]}
@@ -159,7 +160,11 @@ export function MetaSection() {
               </Listing>
             )}
             <Listing
-              label={`${protagonist.treeType === 'researchable' ? 'Purchase' : 'Restoration'} price`}
+              label={`${
+                protagonist.treeType === 'researchable'
+                  ? 'Purchase'
+                  : 'Restoration'
+              } price`}
             >
               <Flex align="center" gap="1">
                 {protagonist.price.value.toLocaleString()}
@@ -167,7 +172,9 @@ export function MetaSection() {
                   style={{ width: '1em', height: '1em' }}
                   alt={protagonist.price.type}
                   src={asset(
-                    `icons/currencies/${protagonist.price.type === 'gold' ? 'gold' : 'silver'}.webp`,
+                    `icons/currencies/${
+                      protagonist.price.type === 'gold' ? 'gold' : 'silver'
+                    }.webp`,
                   )}
                 />
               </Flex>
@@ -179,7 +186,9 @@ export function MetaSection() {
                   style={{ width: '1em', height: '1em' }}
                   alt={protagonist.price.type}
                   src={asset(
-                    `icons/currencies/${protagonist.price.type === 'gold' ? 'gold' : 'silver'}.webp`,
+                    `icons/currencies/${
+                      protagonist.price.type === 'gold' ? 'gold' : 'silver'
+                    }.webp`,
                   )}
                 />
               </Flex>

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

@@ -9,13 +9,7 @@ import {
 import { Armor } from '../../../../../../components/Armor';
 import { ArmorPlateDisplay } from '../../../../../../components/Armor/components/ArmorPlateDisplay';
 import { ShotDisplay } from '../../../../../../components/Armor/components/ShotDisplay';
-import {
-  StaticArmor,
-  ThicknessRange,
-} from '../../../../../../components/Armor/components/StaticArmor';
-import { applyPitchYawLimits } from '../../../../../../core/blitz/applyPitchYawLimits';
-import { modelTransformEvent } from '../../../../../../core/blitzkit/modelTransform';
-import { Pose, poseEvent } from '../../../../../../core/blitzkit/pose';
+import { StaticArmor } from '../../../../../../components/Armor/components/StaticArmor';
 import { useEquipment } from '../../../../../../hooks/useEquipment';
 import useOnScreen from '../../../../../../hooks/useOnScreen';
 import { useTankModelDefinition } from '../../../../../../hooks/useTankModelDefinition';

packages/website/src/app/tools/tankopedia/[id]/components/Model/TankSandboxLoader.tsx

@@ -1,6 +1,6 @@
+import { tankIcon } from '@blitzkit/core';
 import { Flex, FlexProps, Progress } from '@radix-ui/themes';
 import { useProgress } from '@react-three/drei';
-import { tankIcon } from '../../../../../../core/blitzkit/tankIcon';
 
 type TankSandboxLoaderProps = Omit<FlexProps, 'id'> & {
   id: number;

packages/website/src/app/tools/tankopedia/[id]/components/Model/TechTreeSection/components/Node.tsx

@@ -1,11 +1,13 @@
+import {
+  asset,
+  averageDefinitions,
+  formatCompact,
+  tankDefinitions,
+  TIER_ROMAN_NUMERALS,
+} from '@blitzkit/core';
 import { Box, Flex, Text } from '@radix-ui/themes';
 import Link from 'next/link';
 import { use } from 'react';
-import { asset } from '../../../../../../../../core/blitzkit/asset';
-import { averageDefinitions } from '../../../../../../../../core/blitzkit/averageDefinitions';
-import { tankDefinitions } from '../../../../../../../../core/blitzkit/tankDefinitions';
-import { TIER_ROMAN_NUMERALS } from '../../../../../../../../core/blitzkit/tankDefinitions/constants';
-import { formatCompact } from '../../../../../../../../core/math/formatCompact';
 import * as TankopediaEphemeral from '../../../../../../../../stores/tankopediaEphemeral';
 
 interface NodeProps {

packages/website/src/app/tools/tankopedia/[id]/components/Model/TechTreeSection/index.tsx

@@ -1,9 +1,7 @@
+import { asset, imgur, tankDefinitions } from '@blitzkit/core';
 import { CaretLeftIcon, CaretRightIcon, PlusIcon } from '@radix-ui/react-icons';
 import { Flex, Heading, IconButton, ScrollArea, Text } from '@radix-ui/themes';
 import { Fragment, use, useEffect, useMemo, useRef, useState } from 'react';
-import { asset } from '../../../../../../../core/blitzkit/asset';
-import { imgur } from '../../../../../../../core/blitzkit/imgur';
-import { tankDefinitions } from '../../../../../../../core/blitzkit/tankDefinitions';
 import * as Duel from '../../../../../../../stores/duel';
 import * as TankopediaEphemeral from '../../../../../../../stores/tankopediaEphemeral';
 import { Arrow } from './components/Arrow';

packages/website/src/app/tools/tankopedia/[id]/components/Model/components/Options/components/DynamicArmorSwitcher.tsx

@@ -1,6 +1,5 @@
 import { IconButton } from '@radix-ui/themes';
 import { invalidate } from '@react-three/fiber';
-import { asset } from '../../../../../../../../../core/blitzkit/asset';
 import { useArmor } from '../../../../../../../../../hooks/useArmor';
 import * as Duel from '../../../../../../../../../stores/duel';
 import * as TankopediaEphemeral from '../../../../../../../../../stores/tankopediaEphemeral';

packages/website/src/app/tools/tankopedia/[id]/components/Model/components/Options/index.tsx

@@ -1,3 +1,4 @@
+import { imgur, uniqueGuns } from '@blitzkit/core';
 import {
   CameraIcon,
   CopyIcon,
@@ -21,17 +22,6 @@ import {
 } from '@radix-ui/themes';
 import { invalidate } from '@react-three/fiber';
 import { RefObject, useEffect, useState } from 'react';
-import { ThicknessRange } from '../../../../../../../../components/Armor/components/StaticArmor';
-import { ModuleButton } from '../../../../../../../../components/ModuleButtons/ModuleButton';
-import { SmallTankIcon } from '../../../../../../../../components/SmallTankIcon';
-import { resolveNearPenetration } from '../../../../../../../../core/blitz/resolveNearPenetration';
-import { resolvePenetrationCoefficient } from '../../../../../../../../core/blitz/resolvePenetrationCoefficient';
-import { asset } from '../../../../../../../../core/blitzkit/asset';
-import { imgur } from '../../../../../../../../core/blitzkit/imgur';
-import { Pose, poseEvent } from '../../../../../../../../core/blitzkit/pose';
-import { TIER_ROMAN_NUMERALS } from '../../../../../../../../core/blitzkit/tankDefinitions/constants';
-import { uniqueGuns } from '../../../../../../../../core/blitzkit/uniqueGuns';
-import { useArmor } from '../../../../../../../../hooks/useArmor';
 import { useEquipment } from '../../../../../../../../hooks/useEquipment';
 import { useFullScreen } from '../../../../../../../../hooks/useFullScreen';
 import { useFullscreenAvailability } from '../../../../../../../../hooks/useFullscreenAvailability';

packages/website/src/app/tools/tankopedia/[id]/components/Model/components/TankModel.tsx

@@ -1,12 +1,6 @@
 import { invalidate, ThreeEvent, useThree } from '@react-three/fiber';
 import { memo, useRef } from 'react';
 import { Group, Mesh, MeshStandardMaterial, Vector2 } from 'three';
-import { ModelTankWrapper } from '../../../../../../../components/Armor/components/ModelTankWrapper';
-import { applyPitchYawLimits } from '../../../../../../../core/blitz/applyPitchYawLimits';
-import { hasEquipment } from '../../../../../../../core/blitzkit/hasEquipment';
-import { jsxTree } from '../../../../../../../core/blitzkit/jsxTree';
-import { modelTransformEvent } from '../../../../../../../core/blitzkit/modelTransform';
-import { normalizeAngleRad } from '../../../../../../../core/math/normalizeAngleRad';
 import { useModel } from '../../../../../../../hooks/useModel';
 import { useTankModelDefinition } from '../../../../../../../hooks/useTankModelDefinition';
 import { useTankTransform } from '../../../../../../../hooks/useTankTransform';

packages/website/src/app/tools/tankopedia/[id]/components/QuickInputs/index.tsx

@@ -1,12 +1,8 @@
+import { modelTransformEvent, ModelTransformEventData } from '@blitzkit/core';
 import { HeightIcon, WidthIcon } from '@radix-ui/react-icons';
 import { Flex, TextField } from '@radix-ui/themes';
 import { useEffect, useRef } from 'react';
 import { degToRad, radToDeg } from 'three/src/math/MathUtils';
-import { applyPitchYawLimits } from '../../../../../../core/blitz/applyPitchYawLimits';
-import {
-  modelTransformEvent,
-  ModelTransformEventData,
-} from '../../../../../../core/blitzkit/modelTransform';
 import { useEquipment } from '../../../../../../hooks/useEquipment';
 import { useTankModelDefinition } from '../../../../../../hooks/useTankModelDefinition';
 import * as Duel from '../../../../../../stores/duel';
@@ -23,11 +19,6 @@ export function QuickInputs() {
   const gunModelDefinition = turretModelDefinition.guns[protagonist.gun.id];
   const initialGunPitch = tankModelDefinition.turretRotation?.pitch ?? 0;
   const hasImprovedVerticalStabilizer = useEquipment(122);
-  const antagonist = Duel.use((state) => state.antagonist.tank);
-  const compareTanks =
-    protagonist.tank.id === antagonist.id
-      ? [protagonist.tank.id]
-      : [protagonist.tank.id, antagonist.id];
 
   useEffect(() => {
     yawInput.current!.value = radToDeg(protagonist.yaw).toFixed(1);

packages/website/src/app/tools/tankopedia/[id]/components/ShotDisplaySection.tsx

@@ -1,5 +1,4 @@
 import { Flex } from '@radix-ui/themes';
-import { ShotDisplayCard } from '../../../../../components/Armor/components/ShotDisplayCard';
 import * as TankEphemeral from '../../../../../stores/tankopediaEphemeral';
 
 export function ShotDisplaySection() {

packages/website/src/app/tools/tankopedia/[id]/components/VideoSection.tsx

@@ -1,11 +1,9 @@
+import { reviews, Var, youtubers } from '@blitzkit/core';
 import { Box, Flex, Heading, Text } from '@radix-ui/themes';
 import { use } from 'react';
 import { Link } from '../../../../../components/Link';
 import PageWrapper from '../../../../../components/PageWrapper';
 import { VerifiedIcon } from '../../../../../components/VerifiedIcon';
-import { youtubers } from '../../../../../constants/youtubers';
-import { reviews } from '../../../../../core/blitzkit/reviews';
-import { Var } from '../../../../../core/blitzkit/var';
 import * as Duel from '../../../../../stores/duel';
 
 export function VideoSection() {

packages/website/src/app/tools/tankopedia/[id]/layout.tsx

@@ -1,10 +1,12 @@
+import {
+  modelDefinitions,
+  provisionDefinitions,
+  tankDefinitions,
+  tankIcon,
+  TIER_ROMAN_NUMERALS,
+} from '@blitzkit/core';
+import strings from '@blitzkit/core/lang/en-US.json';
 import { ReactNode } from 'react';
-import { modelDefinitions } from '../../../../core/blitzkit/modelDefinitions';
-import { provisionDefinitions } from '../../../../core/blitzkit/provisionDefinitions';
-import { tankDefinitions } from '../../../../core/blitzkit/tankDefinitions';
-import { TIER_ROMAN_NUMERALS } from '../../../../core/blitzkit/tankDefinitions/constants';
-import { tankIcon } from '../../../../core/blitzkit/tankIcon';
-import strings from '../../../../lang/en-US.json';
 import * as Duel from '../../../../stores/duel';
 import * as TankopediaEphemeral from '../../../../stores/tankopediaEphemeral';
 

packages/website/src/app/tools/tankopedia/[id]/page.tsx

@@ -1,12 +1,12 @@
 'use client';
 
+import { TIER_ROMAN_NUMERALS } from '@blitzkit/core';
+import strings from '@blitzkit/core/lang/en-US.json';
 import { invalidate } from '@react-three/fiber';
 import { useEffect } from 'react';
 import { AdMidSectionResponsive } from '../../../../components/AdMidSectionResponsive';
 import PageWrapper from '../../../../components/PageWrapper';
-import { TIER_ROMAN_NUMERALS } from '../../../../core/blitzkit/tankDefinitions/constants';
 import { useAdExempt } from '../../../../hooks/useAdExempt';
-import strings from '../../../../lang/en-US.json';
 import * as Duel from '../../../../stores/duel';
 import * as TankopediaEphemeral from '../../../../stores/tankopediaEphemeral';
 import { CalloutsSection } from './components/CalloutsSection';

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

@@ -0,0 +1,189 @@
+import { ReloadIcon } from '@radix-ui/react-icons';
+import {
+  Card,
+  Code,
+  Flex,
+  IconButton,
+  Text,
+  TextField,
+} from '@radix-ui/themes';
+import { Html } from '@react-three/drei';
+import { useRef } from 'react';
+import { radToDeg } from 'three/src/math/MathUtils';
+import * as App from '../../../stores/app';
+import * as Duel from '../../../stores/duel';
+import * as TankopediaEphemeral from '../../../stores/tankopediaEphemeral';
+import { layerTypeNames } from './ShotDisplayCard';
+import { ArmorType } from './SpacedArmorScene';
+
+export function ArmorPlateDisplay() {
+  const highlightArmor = TankopediaEphemeral.use(
+    (state) => state.highlightArmor,
+  );
+  const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
+  const developerMode = App.useDeferred(false, (state) => state.developerMode);
+  const duelStore = Duel.useStore();
+  const input = useRef<HTMLInputElement>(null);
+  const tankopediaEphemeralStore = TankopediaEphemeral.useStore();
+
+  if (highlightArmor === undefined) return null;
+
+  return (
+    <group position={highlightArmor.point}>
+      <Html
+        center
+        style={{ pointerEvents: highlightArmor.editingPlate ? 'auto' : 'none' }}
+      >
+        <Card
+          mb="4"
+          style={{
+            whiteSpace: 'nowrap',
+            color: highlightArmor.color,
+            transform: 'translateY(-50%)',
+          }}
+        >
+          <Flex direction="column">
+            <Text weight="bold">
+              {layerTypeNames[highlightArmor.type]}{' '}
+              {highlightArmor.thickness.toFixed(0)}
+              <Text size="1" weight="regular">
+                mm
+              </Text>
+            </Text>
+
+            {highlightArmor.type !== ArmorType.External && (
+              <Text size="2" color="gray">
+                {highlightArmor.thicknessAngled.toFixed(0)}
+                <Text size="1">
+                  mm {radToDeg(highlightArmor.angle).toFixed(0)}°
+                </Text>
+              </Text>
+            )}
+
+            {developerMode && (
+              <>
+                <Text mt="2" color="gray" size="2">
+                  <b>DEV:</b> <Code>{highlightArmor.name}</Code>
+                </Text>
+              </>
+            )}
+
+            {highlightArmor.editingPlate && (
+              <Flex gap="2" align="center">
+                <TextField.Root
+                  style={{ width: 96 }}
+                  mt="2"
+                  ref={input}
+                  key={highlightArmor.name}
+                  type="number"
+                  autoFocus
+                  onFocus={(event) => event.target.select()}
+                  onKeyDown={(event) => {
+                    if (!highlightArmor.editingPlate) return;
+
+                    const index = resolveArmorIndex(highlightArmor.name);
+
+                    if (index === undefined) return;
+
+                    const thickness = event.currentTarget.valueAsNumber;
+
+                    if (isNaN(thickness) || thickness < 0) return;
+
+                    if (event.key === 'Enter') {
+                      input.current?.blur();
+
+                      mutateTankopediaEphemeral((draft) => {
+                        draft.highlightArmor = undefined;
+                        const { protagonist } = duelStore.getState();
+                        const tank = draft.model;
+                        const turret = tank.turrets[protagonist.turret.id];
+                        const gun = turret.guns[protagonist.gun.id];
+                        const track = tank.tracks[protagonist.track.id];
+
+                        console.log(highlightArmor.name);
+                        if (highlightArmor.name.startsWith('hull_')) {
+                          tank.armor.thickness[index] = thickness;
+                        } else if (highlightArmor.name.startsWith('turret_')) {
+                          turret.armor.thickness[index] = thickness;
+                        } else if (highlightArmor.name.startsWith('gun_')) {
+                          if (highlightArmor.name.includes('_armor_')) {
+                            gun.armor.thickness[index] = thickness;
+                          } else {
+                            gun.thickness = thickness;
+                          }
+                        } else if (highlightArmor.name.startsWith('chassis_')) {
+                          track.thickness = thickness;
+                        }
+                      });
+                    } else if (event.key === 'Escape') {
+                      input.current?.blur();
+                      mutateTankopediaEphemeral((draft) => {
+                        draft.highlightArmor = undefined;
+                      });
+                    }
+                  }}
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    event.preventDefault();
+                  }}
+                  defaultValue={highlightArmor.thickness.toFixed(0)}
+                >
+                  <TextField.Slot side="right">mm</TextField.Slot>
+                </TextField.Root>
+
+                <IconButton
+                  mt="2"
+                  color="red"
+                  onClick={() => {
+                    mutateTankopediaEphemeral((draft) => {
+                      if (!highlightArmor.editingPlate) return;
+
+                      const index = resolveArmorIndex(highlightArmor.name);
+
+                      if (index === undefined) return;
+
+                      draft.highlightArmor = undefined;
+                      const initialState =
+                        tankopediaEphemeralStore.getInitialState();
+                      const { protagonist } = duelStore.getState();
+                      const tank = draft.model;
+                      const initialTank = initialState.model;
+                      const turret = tank.turrets[protagonist.turret.id];
+                      const initialTurret =
+                        initialTank.turrets[protagonist.turret.id];
+                      const gun = turret.guns[protagonist.gun.id];
+                      const initialGun = initialTurret.guns[protagonist.gun.id];
+                      const track = tank.tracks[protagonist.track.id];
+                      const initialTrack =
+                        initialTank.tracks[protagonist.track.id];
+
+                      console.log(highlightArmor.name);
+                      if (highlightArmor.name.startsWith('hull_')) {
+                        tank.armor.thickness[index] =
+                          initialTank.armor.thickness[index];
+                      } else if (highlightArmor.name.startsWith('turret_')) {
+                        turret.armor.thickness[index] =
+                          initialTurret.armor.thickness[index];
+                      } else if (highlightArmor.name.startsWith('gun_')) {
+                        if (highlightArmor.name.includes('_armor_')) {
+                          gun.armor.thickness[index] =
+                            initialGun.armor.thickness[index];
+                        } else {
+                          gun.thickness = initialGun.thickness;
+                        }
+                      } else if (highlightArmor.name.startsWith('chassis_')) {
+                        track.thickness = initialTrack.thickness;
+                      }
+                    });
+                  }}
+                >
+                  <ReloadIcon />
+                </IconButton>
+              </Flex>
+            )}
+          </Flex>
+        </Card>
+      </Html>
+    </group>
+  );
+}

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

@@ -0,0 +1,7 @@
+import { GroupProps } from '@react-three/fiber';
+import { forwardRef } from 'react';
+import { Group } from 'three';
+
+export const ModelTankWrapper = forwardRef<Group, GroupProps>((props, ref) => {
+  return <group rotation={[-Math.PI / 2, 0, 0]} ref={ref} {...props} />;
+});

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

@@ -0,0 +1,138 @@
+import { memo, useRef } from 'react';
+import { Group } from 'three';
+import { useArmor } from '../../../hooks/useArmor';
+import { useTankModelDefinition } from '../../../hooks/useTankModelDefinition';
+import { useTankTransform } from '../../../hooks/useTankTransform';
+import * as Duel from '../../../stores/duel';
+import { ModelTankWrapper } from './ModelTankWrapper';
+import { PrimaryArmorSceneComponent } from './PrimaryArmorSceneComponent';
+
+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);
+  const gun = Duel.use((state) => state.protagonist.gun);
+  const armorGltf = useArmor(tank.id).gltf;
+  const armorNodes = Object.values(armorGltf.nodes);
+  const tankModelDefinition = useTankModelDefinition();
+  const trackModelDefinition = tankModelDefinition.tracks[track.id];
+  const turretModelDefinition = tankModelDefinition.turrets[turret.id];
+  const gunModelDefinition = turretModelDefinition.guns[gun.id];
+  const hullOrigin = correctZYTuple(trackModelDefinition.origin);
+  const turretOrigin = correctZYTuple(tankModelDefinition.turretOrigin);
+  const gunOrigin = correctZYTuple(turretModelDefinition.gunOrigin);
+  const isDynamicArmorActive = Duel.use((state) =>
+    state.protagonist.consumables.includes(73),
+  );
+
+  useTankTransform(protagonist, turretContainer, gunContainer);
+
+  return (
+    <ModelTankWrapper ref={wrapper}>
+      <group position={hullOrigin}>
+        {armorNodes.map((node) => {
+          const isHull = node.name.startsWith('hull_');
+          const isVisible = isHull;
+          const armorId = nameToArmorId(node.name);
+          const { spaced, thickness } = resolveArmor(
+            tankModelDefinition.armor,
+            armorId,
+          );
+
+          if (
+            !isVisible ||
+            spaced ||
+            thickness === undefined ||
+            (isDynamicArmorActive && node.name.includes('state_01')) ||
+            (!isDynamicArmorActive && node.name.includes('state_00'))
+          )
+            return null;
+
+          return (
+            <PrimaryArmorSceneComponent
+              key={node.uuid}
+              thickness={thickness}
+              node={node}
+            />
+          );
+        })}
+      </group>
+
+      <group ref={turretContainer}>
+        {armorNodes.map((node) => {
+          const isCurrentTurret = node.name.startsWith(
+            `turret_${turretModelDefinition.model.toString().padStart(2, '0')}`,
+          );
+          const isVisible = isCurrentTurret;
+          const armorId = nameToArmorId(node.name);
+          const { spaced, thickness } = resolveArmor(
+            turretModelDefinition.armor,
+            armorId,
+          );
+
+          if (
+            !isVisible ||
+            spaced ||
+            thickness === undefined ||
+            (isDynamicArmorActive && node.name.includes('state_01')) ||
+            (!isDynamicArmorActive && node.name.includes('state_00'))
+          )
+            return null;
+
+          return (
+            <group position={hullOrigin}>
+              <group key={node.uuid} position={turretOrigin}>
+                <PrimaryArmorSceneComponent
+                  key={node.uuid}
+                  thickness={thickness}
+                  node={node}
+                />
+              </group>
+            </group>
+          );
+        })}
+
+        <group ref={gunContainer}>
+          {armorNodes.map((node) => {
+            const isCurrentGun = node.name.startsWith(
+              `gun_${gunModelDefinition.model.toString().padStart(2, '0')}`,
+            );
+            const isVisible = isCurrentGun;
+            const armorId = nameToArmorId(node.name);
+            const { spaced, thickness } = resolveArmor(
+              gunModelDefinition.armor,
+              armorId,
+            );
+
+            if (
+              !isVisible ||
+              spaced ||
+              thickness === undefined ||
+              (isDynamicArmorActive && node.name.includes('state_01')) ||
+              (!isDynamicArmorActive && node.name.includes('state_00'))
+            )
+              return null;
+
+            return (
+              <group position={hullOrigin}>
+                <group
+                  key={node.uuid}
+                  position={turretOrigin.clone().add(gunOrigin)}
+                >
+                  <PrimaryArmorSceneComponent
+                    thickness={thickness}
+                    node={node}
+                  />
+                </group>
+              </group>
+            );
+          })}
+        </group>
+      </group>
+    </ModelTankWrapper>
+  );
+});

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

@@ -0,0 +1,164 @@
+import { isExplosive } from '@blitzkit/core/src/blitzkit/isExplosive';
+import { resolvePenetrationCoefficient } from '@blitzkit/core/src/blitzkit/resolvePenetrationCoefficient';
+import { useFrame } from '@react-three/fiber';
+import { useEffect } from 'react';
+import { MeshBasicMaterial, Object3D, ShaderMaterial, Vector2 } from 'three';
+import { degToRad } from 'three/src/math/MathUtils';
+import * as Duel from '../../../../stores/duel';
+import * as TankopediaPersistent from '../../../../stores/tankopediaPersistent';
+import fragmentShader from './shaders/fragment.glsl';
+import vertexShader from './shaders/vertex.glsl';
+import { spacedArmorRenderTarget } from './target';
+
+interface PrimaryArmorSceneComponentProps {
+  thickness: number;
+  node: Object3D;
+}
+
+const excludeMaterial = new MeshBasicMaterial({
+  colorWrite: false,
+});
+
+export function PrimaryArmorSceneComponent({
+  node,
+  thickness,
+}: PrimaryArmorSceneComponentProps) {
+  const tankopediaPersistentStore = TankopediaPersistent.useStore();
+  const duelStore = Duel.useStore();
+  const material = new ShaderMaterial({
+    fragmentShader,
+    vertexShader,
+
+    transparent: true,
+
+    uniforms: {
+      thickness: { value: null },
+      penetration: { value: null },
+      caliber: { value: null },
+      ricochet: { value: null },
+      normalization: { value: null },
+      isExplosive: { value: null },
+      canSplash: { value: null },
+      damage: { value: null },
+      explosionRadius: { value: null },
+      greenPenetration: { value: null },
+      opaque: { value: null },
+
+      inverseProjectionMatrix: { value: null },
+      resolution: { value: new Vector2() },
+      spacedArmorBuffer: { value: null },
+      spacedArmorDepth: { value: null },
+    },
+  });
+
+  useEffect(() => {
+    async function handleShellChange(shell: ShellDefinition) {
+      material.uniforms.caliber.value = shell.caliber;
+      material.uniforms.ricochet.value = degToRad(
+        isExplosive(shell.type) ? 90 : shell.ricochet!,
+      );
+      material.uniforms.normalization.value = degToRad(
+        shell.normalization ?? 0,
+      );
+      material.uniforms.isExplosive.value = isExplosive(shell.type);
+      material.uniforms.canSplash.value = canSplash(shell.type);
+      material.uniforms.damage.value = shell.damage.armor;
+      material.uniforms.explosionRadius.value = shell.explosionRadius;
+
+      const duel = duelStore.getState();
+      await handleProtagonistEquipmentChange(duel.protagonist.equipmentMatrix);
+      await handleAntagonistEquipmentChange(duel.antagonist.equipmentMatrix);
+    }
+    function handleVisualChange(
+      visual: TankopediaPersistent.TankopediaPersistent['model']['visual'],
+    ) {
+      material.uniforms.greenPenetration.value = visual.greenPenetration;
+      material.uniforms.opaque.value = visual.opaque || visual.wireframe;
+      material.wireframe = visual.wireframe;
+    }
+    async function handleProtagonistEquipmentChange(
+      equipment: Duel.EquipmentMatrix,
+    ) {
+      const duel = duelStore.getState();
+      const hasEnhancedArmor = await hasEquipment(
+        110,
+        duel.protagonist.tank.equipment,
+        equipment,
+      );
+      material.uniforms.thickness.value = hasEnhancedArmor
+        ? thickness * 1.03
+        : thickness;
+    }
+    async function handleAntagonistEquipmentChange(
+      equipment: Duel.EquipmentMatrix,
+    ) {
+      const duel = duelStore.getState();
+      const shell = duel.antagonist.shell;
+      const penetration = resolveNearPenetration(shell.penetration);
+      const hasCalibratedShells = await hasEquipment(
+        103,
+        duel.antagonist.tank.equipment,
+        equipment,
+      );
+
+      material.uniforms.penetration.value =
+        penetration *
+        resolvePenetrationCoefficient(hasCalibratedShells, shell.type);
+    }
+
+    handleShellChange(duelStore.getState().antagonist.shell);
+    handleVisualChange(tankopediaPersistentStore.getState().model.visual);
+    handleProtagonistEquipmentChange(
+      duelStore.getState().protagonist.equipmentMatrix,
+    );
+    handleAntagonistEquipmentChange(
+      duelStore.getState().antagonist.equipmentMatrix,
+    );
+
+    const unsubscribes = [
+      duelStore.subscribe((state) => state.antagonist.shell, handleShellChange),
+      tankopediaPersistentStore.subscribe(
+        (state) => state.model.visual,
+        handleVisualChange,
+      ),
+      duelStore.subscribe(
+        (state) => state.protagonist.equipmentMatrix,
+        handleProtagonistEquipmentChange,
+      ),
+      duelStore.subscribe(
+        (state) => state.antagonist.equipmentMatrix,
+        handleAntagonistEquipmentChange,
+      ),
+    ];
+
+    return () => {
+      unsubscribes.forEach((unsubscribe) => unsubscribe());
+    };
+  });
+
+  useFrame(({ gl, camera }) => {
+    gl.getSize(material.uniforms.resolution.value).multiplyScalar(
+      gl.getPixelRatio(),
+    );
+    material.uniforms.spacedArmorBuffer.value = spacedArmorRenderTarget.texture;
+    material.uniforms.spacedArmorDepth.value =
+      spacedArmorRenderTarget.depthTexture;
+    material.uniforms.inverseProjectionMatrix.value =
+      camera.projectionMatrixInverse;
+  });
+
+  return (
+    <>
+      {jsxTree(
+        node,
+        { mesh: { renderOrder: 0, material: excludeMaterial } },
+        `${node.uuid}-exclude`,
+      )}
+      {jsxTree(
+        node,
+        { mesh: { renderOrder: 1, material } },
+        `${node.uuid}-include`,
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1,93 @@
+varying vec3 vNormal;
+varying vec3 vViewPosition;
+
+uniform float thickness;
+uniform float penetration;
+uniform float caliber;
+uniform float ricochet;
+uniform float normalization;
+uniform vec2 resolution;
+uniform bool isExplosive;
+uniform bool canSplash;
+uniform float damage;
+uniform float explosionRadius;
+uniform bool greenPenetration;
+uniform bool opaque;
+uniform mat4 inverseProjectionMatrix;
+
+uniform highp sampler2D spacedArmorBuffer;
+uniform highp sampler2D spacedArmorDepth;
+
+float depthToDistance(float depth) {
+  vec4 clipPosition = vec4(gl_FragCoord.xy / resolution * 2.0 - 1.0, depth * 2.0 - 1.0, 1.0);
+  vec4 eyePosition = inverseProjectionMatrix * clipPosition;
+  return length(eyePosition.xyz / eyePosition.w);
+}
+
+void main() {
+  float penetrationChance = -1.0;
+  float splashChance = -1.0;
+
+  vec2 screenCoordinates = gl_FragCoord.xy / resolution;
+  float angle = acos(dot(vNormal, -vViewPosition) / length(vViewPosition));
+
+  vec4 spacedArmorBufferFragment = texture2D(spacedArmorBuffer, screenCoordinates);
+  bool isUnderSpacedArmor = spacedArmorBufferFragment.a != 0.0;
+
+  bool threeCalibersRule = caliber > thickness * 3.0 || isUnderSpacedArmor;
+  if (!threeCalibersRule && angle >= ricochet) {
+    penetrationChance = 0.0;
+  } else {
+    bool twoCalibersRule = caliber > thickness * 2.0 && thickness > 0.0;
+    float finalNormalization = twoCalibersRule ? ((1.4 * normalization * caliber) / (2.0 * thickness)) : normalization;
+    float finalThickness = thickness / cos(max(0.0, angle - finalNormalization));
+
+    // world space in meters
+    vec4 spacedArmorDepthFragment = texture2D(spacedArmorDepth, screenCoordinates);
+    float spacedArmorDistance = depthToDistance(spacedArmorDepthFragment.r);
+    float primaryArmorDistance = depthToDistance(gl_FragCoord.z);
+    float distanceFromSpacedArmor = primaryArmorDistance - spacedArmorDistance;
+
+    if (canSplash && isUnderSpacedArmor) {
+      float spacedArmorThickness = spacedArmorBufferFragment.r * penetration;
+      float finalDamage = 0.5 * damage * (1.0 - distanceFromSpacedArmor / explosionRadius) - 1.1 * (finalThickness + spacedArmorThickness);
+
+      penetrationChance = 0.0;
+      splashChance = finalDamage > 0.0 ? 1.0 : 0.0;
+    } else {
+      float remainingPenetration = penetration;
+
+      if (isUnderSpacedArmor) {
+        float spacedArmorThickness = spacedArmorBufferFragment.r * penetration;
+        remainingPenetration -= spacedArmorThickness;
+
+        if (isExplosive && remainingPenetration > 0.0) {
+          remainingPenetration -= 0.5 * remainingPenetration * distanceFromSpacedArmor;
+        }
+      }
+
+      remainingPenetration = max(0.0, remainingPenetration);
+      float delta = finalThickness - remainingPenetration;
+      float randomization = remainingPenetration * 0.05;
+      penetrationChance = clamp(1.0 - (delta + randomization) / (2.0 * randomization), 0.0, 1.0);
+
+      if (canSplash) {
+        float splashDamage = 0.5 * damage - 1.1 * finalThickness;
+        splashChance = splashDamage > 0.0 ? 1.0 : 0.0;
+      } else {
+        splashChance = 0.0;
+      }
+    }
+  }
+
+  float alpha = opaque ? 1.0 : 0.5;
+  vec3 color = vec3(1.0, splashChance * 0.392, 0.0);
+  if (greenPenetration) {
+    // non-trigonometric red-green mixing: https://www.desmos.com/calculator/ceo1oq7l67
+    float falling = -pow(penetrationChance, 2.0) + 1.0;
+    float gaining = -pow(penetrationChance - 1.0, 2.0) + 1.0;
+    gl_FragColor = vec4(falling * color + gaining * vec3(0.0, 1.0, 0.0), alpha);
+  } else {
+    gl_FragColor = vec4(color, (1.0 - penetrationChance) * alpha);
+  }
+}

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

@@ -0,0 +1,11 @@
+varying vec3 vNormal;
+varying vec3 vViewPosition;
+
+void main() {
+  vec4 vViewPosition4 = modelViewMatrix * vec4(position, 1.0);
+
+  vViewPosition = vViewPosition4.xyz;
+  vNormal = normalMatrix * normal;
+
+  gl_Position = projectionMatrix * vViewPosition4;
+}

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

@@ -0,0 +1,3 @@
+import { WebGLRenderTarget } from 'three';
+
+export const spacedArmorRenderTarget = new WebGLRenderTarget();

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

@@ -0,0 +1,279 @@
+import { Box, Flex, Text } from '@radix-ui/themes';
+import { Html } from '@react-three/drei';
+import { useFrame } from '@react-three/fiber';
+import { clamp } from 'lodash';
+import { ComponentProps, useEffect, useRef } from 'react';
+import {
+  BufferGeometry,
+  DoubleSide,
+  Euler,
+  Group,
+  Line,
+  LineDashedMaterial,
+  Mesh,
+  MeshBasicMaterial,
+  Path,
+  Quaternion,
+} from 'three';
+import { useFullScreen } from '../../../hooks/useFullScreen';
+import { ShotDisplayCard } from './ShotDisplayCard';
+
+export const shotStatusColors: Record<
+  TankopediaEphemeral.ShotStatus,
+  ComponentProps<typeof Text>['color']
+> = {
+  blocked: 'red',
+  penetration: 'green',
+  ricochet: 'yellow',
+  splash: 'orange',
+};
+
+const SURFACE_POINT_SIZE = 12;
+export const SHOT_DISPLAY_LENGTH_INFINITY = 4;
+const TRACER_THICK = 1 / 32;
+const TRACER_THIN = TRACER_THICK / 2;
+
+export function ShotDisplay() {
+  const isFullscreen = useFullScreen();
+  const shot = TankopediaEphemeral.use((state) => state.shot);
+  const inTracer = useRef<Mesh>(null);
+  const outTracer = useRef<Mesh>(null);
+  const splashRadiusWrapper = useRef<Group>(null);
+  const splashRadiusMaterial = useRef<MeshBasicMaterial>(null);
+  let animationStartTime: number | null = null;
+
+  useEffect(() => {
+    if (shot?.splashRadius !== undefined) {
+      const outlineGeometry = new BufferGeometry().setFromPoints(
+        new Path().absarc(0, 0, 1, 0, Math.PI * 2).getSpacedPoints(50),
+      );
+      const outlineMaterial = new LineDashedMaterial({
+        color: 'orange',
+        dashSize: 0.05,
+        gapSize: 0.025,
+      });
+      const outline = new Line(
+        outlineGeometry,
+        outlineMaterial,
+      ).computeLineDistances();
+
+      splashRadiusWrapper.current?.add(outline);
+
+      return () => {
+        splashRadiusWrapper.current?.remove(outline);
+      };
+    }
+  });
+
+  useEffect(() => {
+    const data = new Date();
+    const isHalloween = data.getMonth() === 9 && data.getDate() === 31;
+
+    if (
+      isHalloween &&
+      shot?.splashRadius !== undefined &&
+      shot.in.status === 'penetration'
+    ) {
+      const audio = new Audio('/assets/audio/lotta-damage.mp3');
+
+      audio.currentTime = 0.7;
+      audio.volume = 0.25;
+      audio.play();
+    }
+  }, [shot]);
+
+  useFrame(({ clock }) => {
+    if (!shot) return;
+
+    const t = clock.elapsedTime;
+
+    if (inTracer.current) {
+      const tracerT1 = t % 1;
+      const tracerT2 = (t + 0.5) % 1;
+
+      inTracer.current.scale.set(1, 1 - 2 * Math.abs(tracerT1 - 0.5), 1);
+      inTracer.current.position.set(0, (1 - tracerT1) * inLength, 0);
+
+      if (outTracer.current) {
+        outTracer.current.scale.set(1, 1 - 2 * Math.abs(tracerT2 - 0.5), 1);
+        outTracer.current.position.set(0, tracerT2 * outLength, 0);
+      }
+    }
+
+    if (
+      shot.splashRadius !== undefined &&
+      splashRadiusWrapper.current &&
+      splashRadiusMaterial.current
+    ) {
+      if (animationStartTime === null) animationStartTime = t;
+
+      const scale =
+        clamp(4 * (t - animationStartTime), 0, 1) * shot.splashRadius;
+      const opacity = 1 - clamp(2 * (t - animationStartTime), 0, 1);
+
+      splashRadiusWrapper.current.scale.set(scale, scale, scale);
+      splashRadiusMaterial.current.opacity = opacity;
+    }
+  });
+
+  if (!shot) return null;
+
+  const inLength =
+    shot.in.layers.reduce((accumulator, layer) => {
+      if (layer.type === null) return accumulator + layer.distance;
+      return accumulator;
+    }, 0) + SHOT_DISPLAY_LENGTH_INFINITY;
+  const outLength =
+    shot.out && shot.out.layers.length > 0
+      ? (
+          shot.in.layers.at(-1) as TankopediaEphemeral.ShotLayerNonExternal
+        ).point.distanceTo(
+          (shot.out.layers.at(-1) as TankopediaEphemeral.ShotLayerNonExternal)
+            .point,
+        )
+      : SHOT_DISPLAY_LENGTH_INFINITY;
+  const inLast = shot.in.layers.findLast(
+    (layer) => layer.type !== null,
+  ) as TankopediaEphemeral.ShotLayerNonExternal;
+  const outTitleColor = shot.out
+    ? shotStatusColors[shot.out.status]
+    : undefined;
+  const inTitleColor = shotStatusColors[shot.in.status];
+  const tracerGoingUp =
+    shot.in.surfaceNormal.y + (shot.out?.surfaceNormal.y ?? 0) > 0;
+
+  return (
+    <group>
+      {shot.splashRadius && (
+        <group
+          position={inLast.point}
+          ref={splashRadiusWrapper}
+          rotation={new Euler().setFromQuaternion(
+            new Quaternion().setFromUnitVectors(K_HAT, shot.in.surfaceNormal),
+          )}
+        >
+          <mesh>
+            <circleGeometry />
+            <meshBasicMaterial
+              side={DoubleSide}
+              color="orange"
+              transparent
+              ref={splashRadiusMaterial}
+            />
+          </mesh>
+        </group>
+      )}
+
+      <Html position={inLast.point} center>
+        <Box
+          display={isFullscreen ? undefined : { initial: 'none', sm: 'block' }}
+          style={{
+            pointerEvents: 'none',
+            transform: `translateY(${tracerGoingUp ? 50 : -50}%)`,
+          }}
+          mb={tracerGoingUp ? '0' : '9'}
+          pb={tracerGoingUp ? '0' : '4'}
+          mt={tracerGoingUp ? '9' : '0'}
+          pt={tracerGoingUp ? '4' : '0'}
+        >
+          <ShotDisplayCard shot={shot} />
+        </Box>
+      </Html>
+
+      {[...shot.in.layers, ...(shot.out?.layers ?? [])].map((layer, index) => {
+        if (layer.type === null) return null;
+
+        const shotStatusColor =
+          shot.in.status === 'splash'
+            ? shotStatusColors.splash
+            : shotStatusColors[layer.status];
+
+        return (
+          <Html
+            position={layer.point}
+            key={index}
+            style={{
+              pointerEvents: 'none',
+              transform: 'translateY(-50%)',
+            }}
+          >
+            <Flex
+              style={{
+                marginLeft: -SURFACE_POINT_SIZE / 2,
+              }}
+            >
+              <div
+                style={{
+                  width: SURFACE_POINT_SIZE,
+                  height: SURFACE_POINT_SIZE,
+                  backgroundColor: shotStatusColor,
+                  opacity: 0.75,
+                  borderRadius: SURFACE_POINT_SIZE / 2,
+                }}
+              />
+            </Flex>
+          </Html>
+        );
+      })}
+
+      <group
+        position={inLast.point}
+        rotation={new Euler().setFromQuaternion(
+          new Quaternion().setFromUnitVectors(J_HAT, shot.in.surfaceNormal),
+        )}
+      >
+        <mesh position={[0, inLength / 2, 0]} renderOrder={2}>
+          <cylinderGeometry
+            args={[TRACER_THIN / 2, TRACER_THIN / 2, inLength]}
+          />
+          <meshBasicMaterial depthTest={false} transparent />
+        </mesh>
+
+        <mesh ref={inTracer} position={[0, inLength / 2, 0]} renderOrder={3}>
+          <cylinderGeometry
+            args={[TRACER_THICK / 2, TRACER_THICK / 2, inLength]}
+          />
+          <meshBasicMaterial
+            color={inTitleColor}
+            depthTest={false}
+            transparent
+          />
+        </mesh>
+      </group>
+
+      {shot.out && (
+        <group
+          position={inLast.point}
+          rotation={new Euler().setFromQuaternion(
+            new Quaternion().setFromUnitVectors(
+              J_HAT,
+              shot.out.surfaceNormal.clone(),
+            ),
+          )}
+        >
+          <mesh position={[0, outLength / 2, 0]} renderOrder={2}>
+            <cylinderGeometry
+              args={[TRACER_THIN / 2, TRACER_THIN / 2, outLength]}
+            />
+            <meshBasicMaterial depthTest={false} transparent />
+          </mesh>
+
+          <mesh
+            ref={outTracer}
+            position={[0, outLength / 2, 0]}
+            renderOrder={3}
+          >
+            <cylinderGeometry
+              args={[TRACER_THICK / 2, TRACER_THICK / 2, outLength]}
+            />
+            <meshBasicMaterial
+              color={outTitleColor}
+              depthTest={false}
+              transparent
+            />
+          </mesh>
+        </group>
+      )}
+    </group>
+  );
+}

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

@@ -0,0 +1,229 @@
+import {
+  Card,
+  CardProps,
+  Flex,
+  Inset,
+  Separator,
+  Text,
+} from '@radix-ui/themes';
+import { ComponentProps } from 'react';
+import { radToDeg } from 'three/src/math/MathUtils';
+import * as TankopediaEphemeral from '../../../stores/tankopediaEphemeral';
+import { shotStatusColors } from './ShotDisplay';
+import { ArmorType } from './SpacedArmorScene';
+import { ExternalModuleVariant } from './SpacedArmorSceneComponent';
+
+export const layerTypeNames: Record<ArmorType | 'null', string> = {
+  [ArmorType.Primary]: 'Primary',
+  [ArmorType.Spaced]: 'Spaced',
+  [ArmorType.External]: 'External',
+  null: 'Gap',
+};
+
+const externalLayerNames: Record<ExternalModuleVariant, string> = {
+  gun: 'Gun',
+  track: 'Tracks',
+};
+
+const shotStatusNames: Record<TankopediaEphemeral.ShotStatus, string> = {
+  blocked: 'Blocked',
+  ricochet: 'Ricochet',
+  penetration: 'penetration',
+  splash: 'splash',
+};
+
+function LayerEntry({
+  layerIndex,
+  shotStatusColor,
+  layerName,
+  layer,
+  angle,
+}: {
+  layerIndex?: string;
+  shotStatusColor: ComponentProps<typeof Text>['color'];
+  layerName: string;
+  layer: TankopediaEphemeral.ShotLayer;
+  angle?: number;
+}) {
+  return (
+    <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>
+
+      {layer.type === null && (
+        <>
+          <Text size="2" color={shotStatusColor} style={{ width: 64 }}>
+            {Math.round(layer.distance * 1000).toLocaleString()}
+            <Text size="1">mm</Text>
+          </Text>
+
+          <Text size="2" color="gray">
+            {Math.max(-100, Math.round(-50 * layer.distance))}% penetration
+          </Text>
+        </>
+      )}
+
+      {layer.type === ArmorType.External && (
+        <Text size="2" color={shotStatusColor} style={{ width: 64 }}>
+          {Math.round(layer.thickness).toLocaleString()}
+          <Text size="1">mm</Text>
+        </Text>
+      )}
+
+      {(layer.type === ArmorType.Primary ||
+        layer.type === ArmorType.Spaced) && (
+        <>
+          <Text size="2" color={shotStatusColor} style={{ width: 80 }}>
+            {Math.round(layer.thicknessAngled).toLocaleString()}
+            <Text size="1">{`mm${
+              angle === undefined ? '' : ` ${Math.round(radToDeg(angle))}°`
+            }`}</Text>
+          </Text>
+
+          <Text size="2" color="gray">
+            {Math.round(layer.thickness).toLocaleString()}
+            <Text size="1">mm</Text> nominal
+          </Text>
+        </>
+      )}
+    </Flex>
+  );
+}
+
+interface ShotDisplayCardProps extends CardProps {
+  shot: TankopediaEphemeral.Shot;
+}
+
+export function ShotDisplayCard({ shot, ...props }: ShotDisplayCardProps) {
+  if (!shot) return null;
+
+  const outTitleColor = shot.out
+    ? shotStatusColors[shot.out.status]
+    : undefined;
+  const inTitleColor = shotStatusColors[shot.in.status];
+
+  return (
+    <Card style={{ width: 300 }} {...props}>
+      <Flex direction="column" gap="2">
+        <Flex direction="column" gap="1">
+          <Text color={inTitleColor} weight="bold">
+            {shot.in.status !== 'blocked' && shot.in.status !== 'ricochet' && (
+              <>
+                {Math.round(shot.damage).toLocaleString()}
+                <Text size="1">hp</Text>
+              </>
+            )}
+            {` ${shotStatusNames[shot.in.status]} `}
+          </Text>
+
+          <Flex direction="column">
+            {shot.in.layers.map((layer, index) => {
+              const layerName =
+                layer.type === ArmorType.External
+                  ? externalLayerNames[layer.variant]
+                  : layerTypeNames[`${layer.type}`];
+              const layerIndex =
+                layer.type === null
+                  ? undefined
+                  : `${(shot.containsGaps ? index / 2 : index) + 1}.`;
+              const shotStatusColor =
+                shot.in.status === 'splash'
+                  ? shotStatusColors.splash
+                  : shotStatusColors[layer.status];
+
+              return (
+                <LayerEntry
+                  key={index}
+                  layer={layer}
+                  layerIndex={layerIndex}
+                  layerName={layerName}
+                  shotStatusColor={shotStatusColor}
+                  angle={
+                    layer.type === ArmorType.Primary ||
+                    layer.type === ArmorType.Spaced
+                      ? layer.angle
+                      : undefined
+                  }
+                />
+              );
+            })}
+          </Flex>
+        </Flex>
+
+        {shot.out && shot.out.layers.length > 0 && (
+          <>
+            <Inset side="x">
+              <Flex align="center" gap="2">
+                <Separator
+                  style={{
+                    flex: 1,
+                  }}
+                />
+                <Text size="1" color="gray">
+                  ricochet (-25% penetration)
+                </Text>
+                <Separator
+                  style={{
+                    flex: 1,
+                  }}
+                />
+              </Flex>
+            </Inset>
+
+            <Text color={outTitleColor} weight="bold">
+              {shot.out.status !== 'blocked' &&
+                shot.out.status !== 'ricochet' && (
+                  <>
+                    {Math.round(shot.damage).toLocaleString()}
+                    <Text size="1">hp</Text>
+                  </>
+                )}
+              {` ${shotStatusNames[shot.out.status]} `}
+            </Text>
+
+            <Flex direction="column">
+              {shot.out.layers.map((layer, index) => {
+                const layerName =
+                  layer.type === ArmorType.External
+                    ? externalLayerNames[layer.variant]
+                    : layerTypeNames[`${layer.type}`];
+                const shiftedIndex = index + shot.out!.layers.length;
+                const layerIndex =
+                  layer.type === null
+                    ? undefined
+                    : `${
+                        (shot.containsGaps ? shiftedIndex / 2 : shiftedIndex) +
+                        1
+                      }.`;
+                const shotStatusColor =
+                  shot.out!.status === 'splash'
+                    ? shotStatusColors.splash
+                    : shotStatusColors[layer.status];
+
+                return (
+                  <LayerEntry
+                    key={index}
+                    layer={layer}
+                    layerIndex={layerIndex}
+                    layerName={layerName}
+                    shotStatusColor={shotStatusColor}
+                    angle={
+                      layer.type === ArmorType.Primary ||
+                      layer.type === ArmorType.Spaced
+                        ? layer.angle
+                        : undefined
+                    }
+                  />
+                );
+              })}
+            </Flex>
+          </>
+        )}
+      </Flex>
+    </Card>
+  );
+}

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

@@ -0,0 +1,205 @@
+import { memo, useRef } from 'react';
+import { Group, Plane, Scene, Vector3 } from 'three';
+import { useArmor } from '../../../hooks/useArmor';
+import { useModel } from '../../../hooks/useModel';
+import { useTankModelDefinition } from '../../../hooks/useTankModelDefinition';
+import { useTankTransform } from '../../../hooks/useTankTransform';
+import * as Duel from '../../../stores/duel';
+import { ModelTankWrapper } from './ModelTankWrapper';
+import { SpacedArmorSceneComponent } from './SpacedArmorSceneComponent';
+
+export enum ArmorType {
+  Primary,
+  Spaced,
+  External,
+}
+
+interface SpacedArmorSceneProps {
+  scene: Scene;
+}
+
+export const SpacedArmorScene = memo<SpacedArmorSceneProps>(({ scene }) => {
+  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);
+  const gun = Duel.use((state) => state.protagonist.gun);
+  const { gltf: armorGltf } = useArmor(tank.id);
+  const { gltf: modelGltf } = useModel(tank.id);
+  const armorNodes = Object.values(armorGltf.nodes);
+  const modelNodes = Object.values(modelGltf.nodes);
+  const tankModelDefinition = useTankModelDefinition();
+  const trackModelDefinition = tankModelDefinition.tracks[track.id];
+  const turretModelDefinition = tankModelDefinition.turrets[turret.id];
+  const gunModelDefinition = turretModelDefinition.guns[gun.id];
+  const hullOrigin = correctZYTuple(trackModelDefinition.origin);
+  const turretOrigin = correctZYTuple(tankModelDefinition.turretOrigin);
+  const gunOrigin = correctZYTuple(turretModelDefinition.gunOrigin);
+  const maskOrigin =
+    gunModelDefinition.mask === undefined
+      ? undefined
+      : gunModelDefinition.mask + hullOrigin.y + turretOrigin.y + gunOrigin.y;
+  const isDynamicArmorActive = Duel.use((state) =>
+    state.protagonist.consumables.includes(73),
+  );
+
+  useTankTransform(protagonist, turretContainer, gunContainer);
+
+  return (
+    <ModelTankWrapper ref={wrapper}>
+      <group position={hullOrigin}>
+        {armorNodes.map((node) => {
+          const isHull = node.name.startsWith('hull_');
+          const isVisible = isHull;
+          const armorId = nameToArmorId(node.name);
+          const { spaced, thickness } = resolveArmor(
+            tankModelDefinition.armor,
+            armorId,
+          );
+
+          if (
+            !isVisible ||
+            thickness === undefined ||
+            (isDynamicArmorActive && node.name.includes('state_00')) ||
+            (!isDynamicArmorActive && node.name.includes('state_01'))
+          )
+            return null;
+
+          return (
+            <SpacedArmorSceneComponent
+              scene={scene}
+              key={node.uuid}
+              type={spaced ? ArmorType.Spaced : ArmorType.Primary}
+              thickness={thickness}
+              node={node}
+            />
+          );
+        })}
+      </group>
+
+      {modelNodes.map((node) => {
+        const isWheel = node.name.startsWith('chassis_wheel_');
+        const isTrack = node.name.startsWith('chassis_track_');
+        const isVisible = isWheel || isTrack;
+
+        if (!isVisible) return null;
+
+        return (
+          <SpacedArmorSceneComponent
+            scene={scene}
+            key={node.uuid}
+            type={ArmorType.External}
+            thickness={trackModelDefinition.thickness}
+            variant="track"
+            node={node}
+          />
+        );
+      })}
+
+      <group ref={turretContainer}>
+        {armorNodes.map((node) => {
+          const isCurrentTurret = node.name.startsWith(
+            `turret_${turretModelDefinition.model.toString().padStart(2, '0')}`,
+          );
+          const isVisible = isCurrentTurret;
+          const armorId = nameToArmorId(node.name);
+          const { spaced, thickness } = resolveArmor(
+            turretModelDefinition.armor,
+            armorId,
+          );
+
+          if (
+            !isVisible ||
+            thickness === undefined ||
+            (isDynamicArmorActive && node.name.includes('state_00')) ||
+            (!isDynamicArmorActive && node.name.includes('state_01'))
+          )
+            return null;
+
+          return (
+            <group position={hullOrigin}>
+              <group key={node.uuid} position={turretOrigin}>
+                <SpacedArmorSceneComponent
+                  scene={scene}
+                  key={node.uuid}
+                  type={spaced ? ArmorType.Spaced : ArmorType.Primary}
+                  thickness={thickness}
+                  node={node}
+                />
+              </group>
+            </group>
+          );
+        })}
+
+        <group ref={gunContainer}>
+          {armorNodes.map((node) => {
+            const isCurrentGun = node.name.startsWith(
+              `gun_${gunModelDefinition.model.toString().padStart(2, '0')}`,
+            );
+            const isVisible = isCurrentGun;
+            const armorId = nameToArmorId(node.name);
+            const { spaced, thickness } = resolveArmor(
+              gunModelDefinition.armor,
+              armorId,
+            );
+
+            if (
+              !isVisible ||
+              thickness === undefined ||
+              (isDynamicArmorActive && node.name.includes('state_00')) ||
+              (!isDynamicArmorActive && node.name.includes('state_01'))
+            )
+              return null;
+
+            return (
+              <group position={hullOrigin}>
+                <group
+                  key={node.uuid}
+                  position={turretOrigin.clone().add(gunOrigin)}
+                >
+                  <SpacedArmorSceneComponent
+                    scene={scene}
+                    type={spaced ? ArmorType.Spaced : ArmorType.Primary}
+                    thickness={thickness}
+                    node={node}
+                  />
+                </group>
+              </group>
+            );
+          })}
+
+          {modelNodes.map((node) => {
+            const gunString = `gun_${gunModelDefinition.model
+              .toString()
+              .padStart(2, '0')}`;
+            const isCurrentGun = gunModelDefinition.mask
+              ? node.name.startsWith(gunString)
+              : node.name === gunString;
+            const isVisible = isCurrentGun;
+
+            if (!isVisible) return null;
+
+            return (
+              <SpacedArmorSceneComponent
+                scene={scene}
+                key={node.uuid}
+                type={ArmorType.External}
+                thickness={gunModelDefinition.thickness}
+                variant="gun"
+                node={node}
+                clip={
+                  maskOrigin === undefined
+                    ? undefined
+                    : new Plane(new Vector3(0, 0, -1), -maskOrigin)
+                }
+              />
+            );
+          })}
+        </group>
+      </group>
+    </ModelTankWrapper>
+  );
+});

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

@@ -0,0 +1,138 @@
+import { resolvePenetrationCoefficient } from '@blitzkit/core/src/blitzkit/resolvePenetrationCoefficient';
+import { useEffect } from 'react';
+import {
+  AdditiveBlending,
+  MeshBasicMaterial,
+  Object3D,
+  Plane,
+  ShaderMaterial,
+} from 'three';
+import { ArmorUserData, ExternalModuleVariant } from '../..';
+import * as Duel from '../../../../../../stores/duel';
+import { ArmorType } from '../../../SpacedArmorScene';
+import fragmentShader from './shaders/fragment.glsl';
+import vertexShader from './shaders/vertex.glsl';
+
+interface SpacedArmorSubExternalProps {
+  node: Object3D;
+  thickness: number;
+  variant: ExternalModuleVariant;
+  clip?: Plane;
+}
+
+export function SpacedArmorSubExternal({
+  node,
+  thickness,
+  variant,
+  clip,
+}: SpacedArmorSubExternalProps) {
+  const duelStore = Duel.useStore();
+  const material = new ShaderMaterial({
+    fragmentShader,
+    vertexShader,
+
+    depthTest: true,
+    depthWrite: false,
+    blending: AdditiveBlending,
+    clipping: clip !== undefined,
+    ...(clip ? { clippingPlanes: [clip] } : {}),
+
+    uniforms: {
+      thickness: { value: null },
+      penetration: { value: null },
+    },
+  });
+
+  useEffect(() => {
+    function handleShellChange(shell: ShellDefinition) {
+      material.uniforms.penetration.value = resolveNearPenetration(
+        shell.penetration,
+      );
+    }
+    async function handleProtagonistEquipmentChange(
+      equipment: Duel.EquipmentMatrix,
+    ) {
+      const duel = duelStore.getState();
+      const hasEnhancedArmor = await hasEquipment(
+        110,
+        duel.protagonist.tank.equipment,
+        equipment,
+      );
+      material.uniforms.thickness.value = hasEnhancedArmor
+        ? thickness * 1.03
+        : thickness;
+    }
+    async function handleAntagonistEquipmentChange(
+      equipment: Duel.EquipmentMatrix,
+    ) {
+      const duel = duelStore.getState();
+      const shell = duel.antagonist.shell;
+      const penetration = resolveNearPenetration(shell.penetration);
+      const hasCalibratedShells = await hasEquipment(
+        103,
+        duel.antagonist.tank.equipment,
+        equipment,
+      );
+
+      material.uniforms.penetration.value =
+        penetration *
+        resolvePenetrationCoefficient(hasCalibratedShells, shell.type);
+    }
+
+    handleShellChange(duelStore.getState().antagonist.shell);
+    handleProtagonistEquipmentChange(
+      duelStore.getState().protagonist.equipmentMatrix,
+    );
+    handleAntagonistEquipmentChange(
+      duelStore.getState().antagonist.equipmentMatrix,
+    );
+
+    const unsubscribes = [
+      duelStore.subscribe((state) => state.antagonist.shell, handleShellChange),
+      duelStore.subscribe(
+        (state) => state.protagonist.equipmentMatrix,
+        handleProtagonistEquipmentChange,
+      ),
+      duelStore.subscribe(
+        (state) => state.antagonist.equipmentMatrix,
+        handleAntagonistEquipmentChange,
+      ),
+    ];
+
+    return () => {
+      unsubscribes.forEach((unsubscribe) => unsubscribe());
+    };
+  });
+
+  return (
+    <>
+      {jsxTree(
+        node,
+        {
+          mesh: {
+            renderOrder: 3,
+            material: new MeshBasicMaterial({
+              colorWrite: false,
+              depthTest: true,
+              depthWrite: true,
+              ...(clip ? { clippingPlanes: [clip] } : {}),
+            }),
+            onClick() {},
+            userData: {
+              type: ArmorType.External,
+              thickness,
+              variant,
+            } satisfies ArmorUserData,
+          },
+        },
+        `${node.uuid}-exclude`,
+      )}
+
+      {jsxTree(
+        node,
+        { mesh: { renderOrder: 4, material } },
+        `${node.uuid}-include`,
+      )}
+    </>
+  );
+}

packages/website/src/components/Armor/components/SpacedArmorSceneComponent/components/SpacedArmorSubExternal/shaders/fragment.glsl

@@ -0,0 +1,10 @@
+uniform float thickness;
+uniform float penetration;
+
+#include <clipping_planes_pars_fragment>
+
+void main() {
+  #include <clipping_planes_fragment>
+
+  gl_FragColor = vec4(thickness / penetration, 0.0, 0.0, 1.0);
+}

packages/website/src/components/Armor/components/SpacedArmorSceneComponent/components/SpacedArmorSubExternal/shaders/vertex.glsl

@@ -0,0 +1,7 @@
+#include <clipping_planes_pars_vertex>
+
+void main() {
+  #include <begin_vertex>
+  #include <project_vertex>
+  #include <clipping_planes_vertex>
+}

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

@@ -0,0 +1,147 @@
+import { isExplosive } from '@blitzkit/core/src/blitzkit/isExplosive';
+import { resolvePenetrationCoefficient } from '@blitzkit/core/src/blitzkit/resolvePenetrationCoefficient';
+import { useEffect } from 'react';
+import {
+  AdditiveBlending,
+  MeshBasicMaterial,
+  Object3D,
+  ShaderMaterial,
+} from 'three';
+import { degToRad } from 'three/src/math/MathUtils';
+import { ArmorUserData } from '../..';
+import * as Duel from '../../../../../../stores/duel';
+import { ArmorType } from '../../../SpacedArmorScene';
+import fragmentShader from './shaders/fragment.glsl';
+import vertexShader from './shaders/vertex.glsl';
+
+interface SpacedArmorSubSpacedProps {
+  node: Object3D;
+  thickness: number;
+}
+
+const depthWriteMaterial = new MeshBasicMaterial({
+  depthWrite: true,
+  colorWrite: false,
+});
+
+export function SpacedArmorSubSpaced({
+  node,
+  thickness,
+}: SpacedArmorSubSpacedProps) {
+  const duelStore = Duel.useStore();
+  const material = new ShaderMaterial({
+    fragmentShader,
+    vertexShader,
+
+    depthTest: true,
+    depthWrite: false,
+    blending: AdditiveBlending,
+
+    uniforms: {
+      thickness: { value: null },
+      penetration: { value: null },
+      caliber: { value: null },
+      ricochet: { value: null },
+      normalization: { value: null },
+    },
+  });
+
+  useEffect(() => {
+    function handleShellChange(shell: ShellDefinition) {
+      material.uniforms.penetration.value = resolveNearPenetration(
+        shell.penetration,
+      );
+      material.uniforms.caliber.value = shell.caliber;
+      material.uniforms.ricochet.value = degToRad(
+        isExplosive(shell.type) ? 90 : shell.ricochet!,
+      );
+      material.uniforms.normalization.value = degToRad(
+        shell.normalization ?? 0,
+      );
+    }
+    async function handleProtagonistEquipmentChange(
+      equipment: Duel.EquipmentMatrix,
+    ) {
+      const duel = duelStore.getState();
+      const hasEnhancedArmor = await hasEquipment(
+        110,
+        duel.protagonist.tank.equipment,
+        equipment,
+      );
+      material.uniforms.thickness.value = hasEnhancedArmor
+        ? thickness * 1.03
+        : thickness;
+    }
+    async function handleAntagonistEquipmentChange(
+      equipment: Duel.EquipmentMatrix,
+    ) {
+      const duel = duelStore.getState();
+      const shell = duelStore.getState().antagonist.shell;
+      const penetration = resolveNearPenetration(shell.penetration);
+      const hasCalibratedShells = await hasEquipment(
+        103,
+        duel.antagonist.tank.equipment,
+        equipment,
+      );
+
+      material.uniforms.penetration.value =
+        penetration *
+        resolvePenetrationCoefficient(hasCalibratedShells, shell.type);
+    }
+
+    handleShellChange(duelStore.getState().antagonist.shell);
+    handleProtagonistEquipmentChange(
+      duelStore.getState().protagonist.equipmentMatrix,
+    );
+    handleAntagonistEquipmentChange(
+      duelStore.getState().antagonist.equipmentMatrix,
+    );
+
+    const unsubscribes = [
+      duelStore.subscribe((state) => state.antagonist.shell, handleShellChange),
+      duelStore.subscribe(
+        (state) => state.protagonist.equipmentMatrix,
+        handleProtagonistEquipmentChange,
+      ),
+      duelStore.subscribe(
+        (state) => state.antagonist.equipmentMatrix,
+        handleAntagonistEquipmentChange,
+      ),
+    ];
+
+    return () => {
+      unsubscribes.forEach((unsubscribe) => unsubscribe());
+    };
+  });
+
+  return (
+    <>
+      {jsxTree(
+        node,
+        {
+          mesh: {
+            renderOrder: 2,
+            material,
+            onClick() {},
+            userData: {
+              type: ArmorType.Spaced,
+              thickness,
+            } satisfies ArmorUserData,
+          },
+        },
+        `${node.uuid}-exclude`,
+      )}
+
+      {jsxTree(
+        node,
+        {
+          mesh: {
+            renderOrder: 5,
+            material: depthWriteMaterial,
+          },
+        },
+        `${node.uuid}-include`,
+      )}
+    </>
+  );
+}

packages/website/src/components/Armor/components/SpacedArmorSceneComponent/components/SpacedArmorSubSpaced/shaders/fragment.glsl

@@ -0,0 +1,24 @@
+varying vec3 vNormal;
+varying vec3 vViewPosition;
+
+uniform float thickness;
+uniform float penetration;
+uniform float caliber;
+uniform float ricochet;
+uniform float normalization;
+
+void main() {
+  float angle = acos(dot(vNormal, -vViewPosition) / length(vViewPosition));
+
+  bool threeCalibersRule = caliber > thickness * 3.0;
+  if (!threeCalibersRule && angle >= ricochet) {
+    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
+    return;
+  }
+
+  bool twoCalibersRule = caliber > thickness * 2.0 && thickness > 0.0;
+  float finalNormalization = twoCalibersRule ? ((1.4 * normalization * caliber) / (2.0 * thickness)) : normalization;
+  float finalThickness = thickness / cos(max(0.0, angle - finalNormalization));
+
+  gl_FragColor = vec4(finalThickness / penetration, 0.0, 0.0, 1.0);
+}

packages/website/src/components/Armor/components/SpacedArmorSceneComponent/components/SpacedArmorSubSpaced/shaders/vertex.glsl

@@ -0,0 +1,11 @@
+varying vec3 vNormal;
+varying vec3 vViewPosition;
+
+void main() {
+  vec4 vViewPosition4 = modelViewMatrix * vec4(position, 1.0);
+
+  vViewPosition = vViewPosition4.xyz;
+  vNormal = normalMatrix * normal;
+
+  gl_Position = projectionMatrix * vViewPosition4;
+}

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

@@ -0,0 +1,404 @@
+import { isExplosive } from '@blitzkit/core/src/blitzkit/isExplosive';
+import { resolvePenetrationCoefficient } from '@blitzkit/core/src/blitzkit/resolvePenetrationCoefficient';
+import { useThree } from '@react-three/fiber';
+import { useCallback } from 'react';
+import {
+  Intersection,
+  MeshBasicMaterial,
+  Object3D,
+  Plane,
+  Quaternion,
+  Raycaster,
+  Scene,
+  Vector3,
+} from 'three';
+import { degToRad } from 'three/src/math/MathUtils';
+import * as Duel from '../../../../stores/duel';
+import * as TankopediaEphemeral from '../../../../stores/tankopediaEphemeral';
+import { ArmorType } from '../SpacedArmorScene';
+import { SpacedArmorSubExternal } from './components/SpacedArmorSubExternal';
+import { SpacedArmorSubSpaced } from './components/SpacedArmorSubSpaced';
+
+type SpacedArmorSceneComponentProps = {
+  node: Object3D;
+  thickness: number;
+  clip?: Plane;
+  scene: Scene;
+} & (
+  | {
+      type: Exclude<ArmorType, ArmorType.External>;
+    }
+  | {
+      type: ArmorType.External;
+      variant: ExternalModuleVariant;
+    }
+);
+
+export type ExternalModuleVariant = 'gun' | 'track';
+export type ArmorUserData = {
+  thickness: number;
+} & (
+  | {
+      type: Exclude<ArmorType, ArmorType.External>;
+    }
+  | {
+      type: ArmorType.External;
+      variant: ExternalModuleVariant;
+    }
+);
+
+const omitMaterial = new MeshBasicMaterial({
+  colorWrite: false,
+  depthWrite: true,
+});
+
+/**
+ * Render orders allocations:
+ * - 0  : core omission
+ * - 1-2: spaced without depth buffer write but do test to allow additive blending
+ * - 3-4: external with depth buffer write in first pass and read in second to simplify geometry
+ * - 5  : spaced depth write
+ */
+export function SpacedArmorSceneComponent({
+  node,
+  thickness,
+  clip,
+  ...props
+}: SpacedArmorSceneComponentProps) {
+  const tankopediaEphemeralStore = TankopediaEphemeral.useStore();
+  const duelStore = Duel.useStore();
+  const camera = useThree((state) => state.camera);
+
+  const shoot = useCallback(
+    async (
+      point: Vector3,
+      intersections: Intersection[],
+      allowRicochet: boolean,
+      remainingPenetrationInput?: number,
+    ) => {
+      const { antagonist, protagonist } = duelStore.getState();
+      const shell = antagonist.shell;
+      const cameraNormal = camera.position.clone().sub(point).normalize();
+      const shot: TankopediaEphemeral.Shot = {
+        splashRadius: shell.explosionRadius,
+        damage: -1,
+        containsGaps: shell.type === ShellType.HEAT,
+        in: {
+          surfaceNormal: cameraNormal,
+          layers: [],
+          status: 'blocked',
+        },
+      };
+
+      const hasCalibratedShells = await hasEquipment(
+        103,
+        antagonist.tank.equipment,
+        antagonist.equipmentMatrix,
+      );
+      const hasEnhancedArmor = await hasEquipment(
+        110,
+        protagonist.tank.equipment,
+        protagonist.equipmentMatrix,
+      );
+      const penetration =
+        resolveNearPenetration(shell.penetration) *
+        resolvePenetrationCoefficient(hasCalibratedShells, shell.type);
+      const thicknessCoefficient = hasEnhancedArmor ? 1.03 : 1;
+      const filteredIntersections = intersections.filter(
+        (intersection) =>
+          'type' in intersection.object.userData &&
+          !discardClippingPlane(intersection.object, intersection.point),
+      ) as unknown as Intersection<Object3D & { userData: ArmorUserData }>[];
+      const encounteredExternalModuleVariants: ExternalModuleVariant[] = [];
+      const noDuplicateIntersections: typeof filteredIntersections = [];
+
+      for (const intersection of filteredIntersections) {
+        if (intersection.object.userData.type === ArmorType.External) {
+          if (
+            !encounteredExternalModuleVariants.includes(
+              intersection.object.userData.variant,
+            )
+          ) {
+            noDuplicateIntersections.push(intersection);
+            encounteredExternalModuleVariants.push(
+              intersection.object.userData.variant,
+            );
+          }
+        } else {
+          noDuplicateIntersections.push(intersection);
+
+          if (intersection.object.userData.type === ArmorType.Primary) {
+            break;
+          }
+        }
+      }
+
+      if (
+        !allowRicochet &&
+        noDuplicateIntersections.every((intersection) => {
+          intersection.object.userData.type !== ArmorType.Primary;
+        })
+      ) {
+        return null;
+      }
+
+      let remainingPenetration = remainingPenetrationInput ?? penetration;
+      let index = 0;
+      for (const intersection of noDuplicateIntersections) {
+        const layer = intersection.object.userData;
+        const surfaceNormal = intersection
+          .normal!.clone()
+          .applyQuaternion(
+            intersection.object.getWorldQuaternion(new Quaternion()),
+          );
+
+        if (shell.type === ShellType.HEAT && index > 0) {
+          const lastLayer = shot.in.layers.at(
+            -1,
+          ) as TankopediaEphemeral.ShotLayerBase;
+          const distance = lastLayer.point.distanceTo(intersection.point);
+          remainingPenetration -= 0.5 * remainingPenetration * distance;
+          const blocked = remainingPenetration <= 0;
+
+          shot.in.layers.push({
+            type: null,
+            distance,
+            status: blocked ? 'blocked' : 'penetration',
+          });
+
+          if (blocked) break;
+        }
+
+        if (layer.type === ArmorType.External) {
+          const thickness = layer.thickness * thicknessCoefficient;
+          remainingPenetration -= thickness;
+          const blocked =
+            remainingPenetration <= 0 || shell.type === ShellType.HE;
+
+          shot.in.layers.push({
+            type: ArmorType.External,
+            index,
+            thickness,
+            point: intersection.point,
+            surfaceNormal,
+            status:
+              shell.type === ShellType.HE
+                ? 'blocked'
+                : blocked
+                ? 'blocked'
+                : 'penetration',
+            variant: layer.variant,
+          });
+        } else {
+          const thickness = layer.thickness;
+          const ricochet = degToRad(
+            isExplosive(shell.type) ? 90 : shell.ricochet!,
+          );
+          const angle = surfaceNormal.angleTo(cameraNormal);
+
+          const threeCalibersRule =
+            shell.caliber > thickness * 3 || index > 0 || !allowRicochet;
+          const twoCalibersRule = shell.caliber > thickness * 2;
+          const normalization = degToRad(shell.normalization ?? 0);
+          const finalNormalization = twoCalibersRule
+            ? (1.4 * normalization * shell.caliber) / (2.0 * thickness)
+            : normalization;
+          const finalThickness =
+            thickness / Math.cos(Math.max(0, angle - finalNormalization));
+
+          if (!threeCalibersRule && angle >= ricochet) {
+            remainingPenetration *= 0.75;
+
+            shot.in.layers.push({
+              type: layer.type,
+              index,
+              thickness,
+              thicknessAngled: finalThickness,
+              point: intersection.point,
+              surfaceNormal,
+              status: 'ricochet',
+              angle,
+            });
+
+            break;
+          } else {
+            remainingPenetration -= finalThickness;
+            const blocked = remainingPenetration <= 0;
+
+            shot.in.layers.push({
+              type: layer.type,
+              index,
+              thickness,
+              thicknessAngled: finalThickness,
+              point: intersection.point,
+              surfaceNormal: intersection.face!.normal,
+              status:
+                shell.type === ShellType.HE && layer.type !== ArmorType.Primary
+                  ? 'blocked'
+                  : blocked
+                  ? 'blocked'
+                  : 'penetration',
+              angle,
+            });
+          }
+        }
+
+        if (shell.type !== ShellType.HE && remainingPenetration <= 0) {
+          break;
+        }
+
+        index++;
+      }
+
+      const lastLayer = shot.in.layers.at(-1) as
+        | TankopediaEphemeral.ShotLayerNonExternal
+        | undefined;
+      const firstLayer = shot.in.layers[0] as
+        | TankopediaEphemeral.ShotLayerBase
+        | undefined;
+
+      if (!lastLayer || !firstLayer) {
+        return null;
+      } else {
+        if (shell.type === ShellType.HE) {
+          const totalSpacedArmorThickness = shot.in.layers.reduce(
+            (acc, layer) => {
+              if (layer.type === null || layer.type === ArmorType.Primary) {
+                return acc;
+              }
+
+              if (layer.type === ArmorType.External) {
+                return acc + layer.thickness;
+              }
+
+              return acc + layer.thicknessAngled;
+            },
+            0,
+          );
+          const distanceFromSpacedArmor = firstLayer.point.distanceTo(
+            lastLayer.point,
+          );
+          const finalDamage = Math.max(
+            0,
+            0.5 *
+              shell.damage.armor *
+              (1 - distanceFromSpacedArmor / shell.explosionRadius!) -
+              1.1 *
+                (lastLayer.thicknessAngled +
+                  Math.min(penetration, totalSpacedArmorThickness)),
+          );
+
+          /**
+           * Above is some peculiar math. We're multiplying 1.1 by the
+           * thickness of the core plate plus the total spaced armor
+           * thickness capped to the penetration itself. This is because
+           * the shader is normalized by the penetration value; hence,
+           * the total spaced armor thickness cannot ever be thicker
+           * than the penetration. This is a precision error on the
+           * shader-side and I do not intend on fixing it. Instead,
+           * for parity's sake, I am capping the value here.
+           */
+
+          if (shot.in.layers.length > 1 || lastLayer.status === 'blocked') {
+            shot.in.status = finalDamage > 0 ? 'splash' : 'blocked';
+            shot.damage = finalDamage;
+          } else {
+            shot.in.status = 'penetration';
+            shot.damage = shell.damage.armor;
+          }
+        } else {
+          if (lastLayer.status === 'blocked') {
+            shot.in.status = 'blocked';
+            shot.damage = 0;
+          } else if (lastLayer.status === 'penetration') {
+            shot.in.status = 'penetration';
+            shot.damage = shell.damage.armor;
+          } else {
+            const caster = new Raycaster();
+            // https://math.stackexchange.com/a/13263/1222875
+            const shellNormal = cameraNormal.clone().multiplyScalar(-1);
+            const ricochetNormal = shellNormal
+              .clone()
+              .sub(
+                lastLayer.surfaceNormal
+                  .clone()
+                  .multiplyScalar(2 * shellNormal.dot(lastLayer.surfaceNormal)),
+              );
+
+            caster.set(lastLayer.point, ricochetNormal);
+
+            const ricochetIntersections = caster.intersectObjects(
+              props.scene.children,
+              true,
+            );
+            const outShot = await shoot(
+              lastLayer.point,
+              ricochetIntersections,
+              false,
+              remainingPenetration,
+            );
+
+            shot.in.status = 'ricochet';
+            if (outShot === null) {
+              shot.damage = 0;
+              shot.out = {
+                surfaceNormal: ricochetNormal,
+                layers: [],
+                status: 'ricochet',
+              };
+            } else {
+              shot.damage = outShot.damage;
+              shot.out = outShot.in;
+              shot.out.surfaceNormal = ricochetNormal;
+            }
+          }
+        }
+      }
+
+      return shot;
+    },
+    [camera],
+  );
+
+  return (
+    <>
+      {props.type === ArmorType.Primary &&
+        jsxTree(
+          node,
+          {
+            mesh: {
+              renderOrder: 0,
+              material: omitMaterial,
+              userData: {
+                type: ArmorType.Primary,
+                thickness,
+              } satisfies ArmorUserData,
+              async onClick(event) {
+                event.stopPropagation();
+                const shot = (await shoot(
+                  event.point,
+                  event.intersections,
+                  true,
+                ))!;
+                tankopediaEphemeralStore.setState({ shot });
+              },
+            },
+          },
+          node.uuid,
+        )}
+
+      {props.type === ArmorType.Spaced && (
+        <SpacedArmorSubSpaced node={node} thickness={thickness} />
+      )}
+
+      {props.type === ArmorType.External && (
+        <SpacedArmorSubExternal
+          node={node}
+          thickness={thickness}
+          variant={props.variant}
+          clip={clip}
+        />
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1,406 @@
+import { normalizeAngleRad } from '@blitzkit/core/src/math/normalizeAngleRad';
+import { ThreeEvent, useThree } from '@react-three/fiber';
+import { memo, useRef } from 'react';
+import { Group, Plane, Vector2, Vector3 } from 'three';
+import { useArmor } from '../../../hooks/useArmor';
+import { useModel } from '../../../hooks/useModel';
+import { useTankModelDefinition } from '../../../hooks/useTankModelDefinition';
+import { useTankTransform } from '../../../hooks/useTankTransform';
+import * as Duel from '../../../stores/duel';
+import * as TankopediaEphemeral from '../../../stores/tankopediaEphemeral';
+import * as TankopediaPersistent from '../../../stores/tankopediaPersistent';
+import { ModelTankWrapper } from './ModelTankWrapper';
+import { ArmorType } from './SpacedArmorScene';
+import { StaticArmorSceneComponent } from './StaticArmorSceneComponent';
+
+interface ArmorSceneProps {
+  thicknessRange: ThicknessRange;
+}
+
+export interface ThicknessRange {
+  value: number;
+}
+
+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);
+  const gun = Duel.use((state) => state.protagonist.gun);
+  const { gltf: armorGltf } = useArmor(tank.id);
+  const { gltf: modelGltf } = useModel(tank.id);
+  const armorNodes = Object.values(armorGltf.nodes);
+  const modelNodes = Object.values(modelGltf.nodes);
+  const tankModelDefinition = useTankModelDefinition();
+  const trackModelDefinition = tankModelDefinition.tracks[track.id];
+  const turretModelDefinition = tankModelDefinition.turrets[turret.id];
+  const gunModelDefinition = turretModelDefinition.guns[gun.id];
+  const hullOrigin = correctZYTuple(trackModelDefinition.origin);
+  const turretOrigin = correctZYTuple(tankModelDefinition.turretOrigin);
+  const gunOrigin = correctZYTuple(turretModelDefinition.gunOrigin);
+  const mutateDuel = Duel.useMutation();
+  const canvas = useThree((state) => state.gl.domElement);
+  const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
+  const duelStore = Duel.useStore();
+  const maskOrigin =
+    gunModelDefinition.mask === undefined
+      ? undefined
+      : gunModelDefinition.mask + hullOrigin.y + turretOrigin.y + gunOrigin.y;
+  const showPrimaryArmor = TankopediaPersistent.use(
+    (state) => state.model.visual.showPrimaryArmor,
+  );
+  const showSpacedArmor = TankopediaPersistent.use(
+    (state) => state.model.visual.showSpacedArmor,
+  );
+  const showExternalModules = TankopediaPersistent.use(
+    (state) => state.model.visual.showExternalModules,
+  );
+  const isDynamicArmorActive = Duel.use((state) =>
+    state.protagonist.consumables.includes(73),
+  );
+
+  useTankTransform(protagonist, turretContainer, gunContainer);
+
+  return (
+    <ModelTankWrapper ref={wrapper}>
+      <group position={hullOrigin}>
+        {armorNodes.map((node) => {
+          const isHull = node.name.startsWith('hull_');
+          const isVisible = isHull;
+          const armorId = nameToArmorId(node.name);
+          const { spaced, thickness } = resolveArmor(
+            tankModelDefinition.armor,
+            armorId,
+          );
+
+          if (
+            !isVisible ||
+            thickness === undefined ||
+            (!showPrimaryArmor && !spaced) ||
+            (!showSpacedArmor && spaced) ||
+            (isDynamicArmorActive && node.name.includes('state_00')) ||
+            (!isDynamicArmorActive && node.name.includes('state_01'))
+          )
+            return null;
+
+          return (
+            <StaticArmorSceneComponent
+              name={node.name}
+              thicknessRange={thicknessRange}
+              key={node.uuid}
+              type={spaced ? ArmorType.Spaced : ArmorType.Primary}
+              thickness={thickness}
+              node={node}
+              onPointerDown={(event) => event.stopPropagation()}
+            />
+          );
+        })}
+      </group>
+
+      {modelNodes.map((node) => {
+        const isWheel = node.name.startsWith('chassis_wheel_');
+        const isTrack = node.name.startsWith('chassis_track_');
+        const isVisible = isWheel || isTrack;
+
+        if (!isVisible || !showExternalModules) return null;
+
+        return (
+          <StaticArmorSceneComponent
+            name={node.name}
+            thicknessRange={thicknessRange}
+            key={node.uuid}
+            type={ArmorType.External}
+            thickness={trackModelDefinition.thickness}
+            variant="track"
+            node={node}
+            onPointerDown={(event) => event.stopPropagation()}
+          />
+        );
+      })}
+
+      <group ref={turretContainer}>
+        {armorNodes.map((node) => {
+          const isCurrentTurret = node.name.startsWith(
+            `turret_${turretModelDefinition.model.toString().padStart(2, '0')}`,
+          );
+          const isVisible = isCurrentTurret;
+          const armorId = nameToArmorId(node.name);
+          const { spaced, thickness } = resolveArmor(
+            turretModelDefinition.armor,
+            armorId,
+          );
+
+          if (
+            !isVisible ||
+            thickness === undefined ||
+            (!showPrimaryArmor && !spaced) ||
+            (!showSpacedArmor && spaced) ||
+            (isDynamicArmorActive && node.name.includes('state_00')) ||
+            (!isDynamicArmorActive && node.name.includes('state_01'))
+          ) {
+            return null;
+          }
+
+          const position = new Vector2();
+          const delta = new Vector2();
+          let pitch = 0;
+          let yaw = 0;
+
+          function onPointerDown(event: ThreeEvent<PointerEvent>) {
+            event.stopPropagation();
+
+            position.set(event.clientX, event.clientY);
+            yaw = protagonist.yaw;
+            pitch = protagonist.pitch;
+
+            mutateTankopediaEphemeral((draft) => {
+              draft.controlsEnabled = false;
+            });
+            mutateTankopediaEphemeral((draft) => {
+              draft.shot = undefined;
+              draft.highlightArmor = undefined;
+            });
+            window.addEventListener('pointermove', handlePointerMove);
+            window.addEventListener('pointerup', handlePointerUp);
+          }
+          async function handlePointerMove(event: PointerEvent) {
+            const duel = duelStore.getState();
+            const hasImprovedVerticalStabilizer = await hasEquipment(
+              122,
+              duel.protagonist.tank.equipment,
+              duel.protagonist.equipmentMatrix,
+            );
+            const boundingRect = canvas.getBoundingClientRect();
+
+            delta.set(event.clientX, event.clientY).sub(position);
+            position.set(event.clientX, event.clientY);
+
+            [pitch, yaw] = applyPitchYawLimits(
+              pitch,
+              yaw + delta.x * (Math.PI / boundingRect.width),
+              gunModelDefinition.pitch,
+              turretModelDefinition.yaw,
+              hasImprovedVerticalStabilizer,
+            );
+            modelTransformEvent.emit({ pitch, yaw });
+          }
+          function handlePointerUp() {
+            mutateDuel((draft) => {
+              draft.protagonist.pitch = normalizeAngleRad(pitch);
+              draft.protagonist.yaw = normalizeAngleRad(yaw);
+            });
+            mutateTankopediaEphemeral((draft) => {
+              draft.controlsEnabled = true;
+            });
+            window.removeEventListener('pointermove', handlePointerMove);
+            window.removeEventListener('pointerup', handlePointerUp);
+          }
+
+          return (
+            <group position={hullOrigin}>
+              <group key={node.uuid} position={turretOrigin}>
+                <StaticArmorSceneComponent
+                  name={node.name}
+                  thicknessRange={thicknessRange}
+                  key={node.uuid}
+                  type={spaced ? ArmorType.Spaced : ArmorType.Primary}
+                  thickness={thickness}
+                  node={node}
+                  onPointerDown={onPointerDown}
+                />
+              </group>
+            </group>
+          );
+        })}
+
+        <group ref={gunContainer}>
+          {armorNodes.map((node) => {
+            const isCurrentGun = node.name.startsWith(
+              `gun_${gunModelDefinition.model.toString().padStart(2, '0')}`,
+            );
+            const isVisible = isCurrentGun;
+            const armorId = nameToArmorId(node.name);
+            const { spaced, thickness } = resolveArmor(
+              gunModelDefinition.armor,
+              armorId,
+            );
+
+            if (
+              !isVisible ||
+              thickness === undefined ||
+              (!showPrimaryArmor && !spaced) ||
+              (!showSpacedArmor && spaced) ||
+              (isDynamicArmorActive && node.name.includes('state_00')) ||
+              (!isDynamicArmorActive && node.name.includes('state_01'))
+            )
+              return null;
+
+            const position = new Vector2();
+            const delta = new Vector2();
+            let pitch = 0;
+            let yaw = 0;
+
+            function onPointerDown(event: ThreeEvent<PointerEvent>) {
+              event.stopPropagation();
+
+              mutateTankopediaEphemeral((draft) => {
+                draft.controlsEnabled = false;
+              });
+              mutateTankopediaEphemeral((draft) => {
+                draft.shot = undefined;
+                draft.highlightArmor = undefined;
+              });
+
+              position.set(event.clientX, event.clientY);
+              pitch = protagonist.pitch;
+              yaw = protagonist.yaw;
+
+              window.addEventListener('pointermove', handlePointerMove);
+              window.addEventListener('pointerup', handlePointerUp);
+            }
+            async function handlePointerMove(event: PointerEvent) {
+              const duel = duelStore.getState();
+              const hasImprovedVerticalStabilizer = await hasEquipment(
+                122,
+                duel.protagonist.tank.equipment,
+                duel.protagonist.equipmentMatrix,
+              );
+              const boundingRect = canvas.getBoundingClientRect();
+              delta.set(event.clientX, event.clientY).sub(position);
+              position.set(event.clientX, event.clientY);
+
+              [pitch, yaw] = applyPitchYawLimits(
+                pitch - delta.y * (Math.PI / boundingRect.height),
+                yaw + delta.x * (Math.PI / boundingRect.width),
+                gunModelDefinition.pitch,
+                turretModelDefinition.yaw,
+                hasImprovedVerticalStabilizer,
+              );
+              modelTransformEvent.emit({ pitch, yaw });
+            }
+            function handlePointerUp() {
+              mutateTankopediaEphemeral((draft) => {
+                draft.controlsEnabled = true;
+              });
+              mutateDuel((draft) => {
+                draft.protagonist.pitch = normalizeAngleRad(pitch);
+                draft.protagonist.yaw = normalizeAngleRad(yaw);
+              });
+              window.removeEventListener('pointermove', handlePointerMove);
+              window.removeEventListener('pointerup', handlePointerUp);
+            }
+
+            return (
+              <group position={hullOrigin}>
+                <group
+                  key={node.uuid}
+                  position={turretOrigin.clone().add(gunOrigin)}
+                >
+                  <StaticArmorSceneComponent
+                    name={node.name}
+                    thicknessRange={thicknessRange}
+                    type={spaced ? ArmorType.Spaced : ArmorType.Primary}
+                    thickness={thickness}
+                    node={node}
+                    onPointerDown={onPointerDown}
+                  />
+                </group>
+              </group>
+            );
+          })}
+
+          {modelNodes.map((node) => {
+            const gunString = `gun_${gunModelDefinition.model
+              .toString()
+              .padStart(2, '0')}`;
+            const isCurrentGun = gunModelDefinition.mask
+              ? node.name.startsWith(gunString)
+              : node.name === gunString;
+            const isVisible = isCurrentGun;
+
+            if (!isVisible || !showExternalModules) return null;
+
+            const position = new Vector2();
+            const delta = new Vector2();
+            let pitch = 0;
+            let yaw = 0;
+
+            function onPointerDown(event: ThreeEvent<PointerEvent>) {
+              event.stopPropagation();
+
+              mutateTankopediaEphemeral((draft) => {
+                draft.controlsEnabled = false;
+              });
+              mutateTankopediaEphemeral((draft) => {
+                draft.shot = undefined;
+                draft.highlightArmor = undefined;
+              });
+
+              position.set(event.clientX, event.clientY);
+              pitch = protagonist.pitch;
+              yaw = protagonist.yaw;
+
+              window.addEventListener('pointermove', handlePointerMove);
+              window.addEventListener('pointerup', handlePointerUp);
+            }
+            async function handlePointerMove(event: PointerEvent) {
+              const duel = duelStore.getState();
+              const hasImprovedVerticalStabilizer = await hasEquipment(
+                122,
+                duel.protagonist.tank.equipment,
+                duel.protagonist.equipmentMatrix,
+              );
+              const boundingRect = canvas.getBoundingClientRect();
+              delta.set(event.clientX, event.clientY).sub(position);
+              position.set(event.clientX, event.clientY);
+
+              [pitch, yaw] = applyPitchYawLimits(
+                pitch - delta.y * (Math.PI / boundingRect.height),
+                yaw + delta.x * (Math.PI / boundingRect.width),
+                gunModelDefinition.pitch,
+                turretModelDefinition.yaw,
+                hasImprovedVerticalStabilizer,
+              );
+              modelTransformEvent.emit({ pitch, yaw });
+            }
+            function handlePointerUp() {
+              mutateTankopediaEphemeral((draft) => {
+                draft.controlsEnabled = true;
+              });
+              mutateDuel((draft) => {
+                draft.protagonist.pitch = normalizeAngleRad(pitch);
+                draft.protagonist.yaw = normalizeAngleRad(yaw);
+              });
+              window.removeEventListener('pointermove', handlePointerMove);
+              window.removeEventListener('pointerup', handlePointerUp);
+            }
+
+            return (
+              <StaticArmorSceneComponent
+                name={node.name}
+                thicknessRange={thicknessRange}
+                key={node.uuid}
+                type={ArmorType.External}
+                thickness={gunModelDefinition.thickness}
+                variant="gun"
+                node={node}
+                clip={
+                  maskOrigin === undefined
+                    ? undefined
+                    : new Plane(new Vector3(0, 0, -1), -maskOrigin)
+                }
+                hullOrigin={hullOrigin}
+                turretOrigin={turretOrigin}
+                gunOrigin={gunOrigin}
+                onPointerDown={onPointerDown}
+              />
+            );
+          })}
+        </group>
+      </group>
+    </ModelTankWrapper>
+  );
+});

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

@@ -0,0 +1,265 @@
+import { I_HAT, J_HAT } from '@blitzkit/core/src/math/axis';
+import { MeshProps, useThree } from '@react-three/fiber';
+import { clamp } from 'lodash';
+import { useEffect, useMemo } from 'react';
+import {
+  Box3,
+  Color,
+  DoubleSide,
+  FrontSide,
+  LineBasicMaterial,
+  Mesh,
+  MeshStandardMaterial,
+  Object3D,
+  Plane,
+  Quaternion,
+  Vector3,
+} from 'three';
+import * as TankopediaEphemeral from '../../../stores/tankopediaEphemeral';
+import { ArmorType } from './SpacedArmorScene';
+import {
+  ArmorUserData,
+  ExternalModuleVariant,
+} from './SpacedArmorSceneComponent';
+import { ThicknessRange } from './StaticArmor';
+
+type StaticArmorSceneComponentProps = {
+  name: string;
+  thickness: number;
+  thicknessRange: ThicknessRange;
+  node: Object3D;
+  onPointerDown?: MeshProps['onPointerDown'];
+} & (
+  | {
+      type: Exclude<ArmorType, ArmorType.External>;
+    }
+  | {
+      type: ArmorType.External;
+      variant: ExternalModuleVariant;
+    }
+) &
+  (
+    | {
+        clip?: undefined;
+      }
+    | {
+        clip: Plane;
+        hullOrigin: Vector3;
+        turretOrigin: Vector3;
+        gunOrigin: Vector3;
+      }
+  );
+
+const unselectedColor = new Color(0x404040);
+const externalModuleColor = new Color(0, 1 / 4, 1 / 2);
+
+export function StaticArmorSceneComponent({
+  name,
+  thickness,
+  thicknessRange,
+  node,
+  onPointerDown,
+  ...props
+}: StaticArmorSceneComponentProps) {
+  const mutateTankopediaEphemeralStore = TankopediaEphemeral.useMutation();
+  const tankopediaEphemeralStore = TankopediaEphemeral.useStore();
+  const camera = useThree((state) => state.camera);
+  const x = thickness / thicknessRange.value;
+  const xClamped = clamp(x, 0, 1);
+  let color: Color;
+  let opacity: number;
+  let depthWrite = true;
+
+  switch (props.type) {
+    case ArmorType.Primary:
+      if (x > 1) {
+        color = new Color(clamp(2 - x, 0.5, 1), 0, 0);
+      } else {
+        color = new Color(-((1 - x) ** 2) + 1, -(x ** 2) + 1, 0);
+      }
+      opacity = 1;
+      break;
+
+    case ArmorType.Spaced:
+      color = new Color(
+        clamp(1 - (7 / 8) * xClamped, 0, 1),
+        0,
+        clamp(1 - (1 / 8) * xClamped, 0, 1),
+      );
+      opacity = clamp(x + 1 / 2, 0, 1);
+      break;
+
+    case ArmorType.External:
+      color = externalModuleColor;
+      opacity = 1 / 8;
+      depthWrite = false;
+      break;
+  }
+
+  opacity = clamp(opacity, 0, 1);
+
+  const surfaceMaterial = useMemo(
+    () =>
+      new MeshStandardMaterial({
+        color,
+        opacity,
+        transparent: opacity < 1,
+        depthWrite,
+        ...(props.clip ? { clippingPlanes: [props.clip] } : {}),
+      }),
+    [thickness],
+  );
+  const outlineMaterial = useMemo(
+    () =>
+      new LineBasicMaterial({
+        color: color
+          .clone()
+          .multiplyScalar(props.type === ArmorType.Spaced ? 2 ** 2 : 2 ** -1),
+      }),
+    [thickness],
+  );
+
+  useEffect(() => {
+    function handleHighlightArmor(selectedName?: string) {
+      if (selectedName === undefined) {
+        // nothing selected, go back to defaults
+        surfaceMaterial.opacity = opacity;
+        surfaceMaterial.transparent = opacity < 1;
+        surfaceMaterial.color = color;
+        surfaceMaterial.depthWrite = props.type !== ArmorType.External;
+        surfaceMaterial.side = FrontSide;
+        outlineMaterial.visible = true;
+      } else if (
+        selectedName === name ||
+        (name.startsWith('chassis_') && selectedName.startsWith('chassis_')) ||
+        (name.startsWith('gun_') &&
+          selectedName.startsWith('gun_') &&
+          !name.includes('_armor_') &&
+          !selectedName.includes('_armor_'))
+      ) {
+        // this selected, stand out!
+        surfaceMaterial.opacity = 1;
+        surfaceMaterial.transparent = false;
+        surfaceMaterial.color = color;
+        surfaceMaterial.depthWrite = true;
+        surfaceMaterial.side = DoubleSide;
+        outlineMaterial.visible = true;
+      } else {
+        // something else selected, become background
+        surfaceMaterial.opacity = 1 / 4;
+        surfaceMaterial.transparent = true;
+        surfaceMaterial.color = unselectedColor;
+        surfaceMaterial.depthWrite = props.type !== ArmorType.External;
+        surfaceMaterial.side = FrontSide;
+        outlineMaterial.visible = false;
+      }
+
+      surfaceMaterial.needsUpdate = true;
+    }
+
+    const unsubscribes = [
+      tankopediaEphemeralStore.subscribe(
+        (state) => state.highlightArmor?.name,
+        handleHighlightArmor,
+      ),
+    ];
+
+    if (props.clip) {
+      /**
+       * hook inside an if statement?? don't panic! I assure you the clip prop
+       * never mutates :)
+       */
+
+      const { clip } = props;
+      const gunOrigin = unrotateDavaVector(props.gunOrigin.clone());
+      const neckOrigin = unrotateDavaVector(props.hullOrigin.clone()).add(
+        unrotateDavaVector(props.turretOrigin.clone()),
+      );
+      const barrelOrigin = neckOrigin.clone().add(gunOrigin);
+      const distanceToBarrel = clip.distanceToPoint(barrelOrigin);
+      const point = new Vector3();
+
+      function handleModelTransform(data: ModelTransformEventData) {
+        clip.normal
+          .set(0, 0, -1)
+          .applyAxisAngle(I_HAT, data.pitch)
+          .applyAxisAngle(J_HAT, data.yaw ?? 0);
+        clip.constant = 0;
+
+        point
+          .copy(gunOrigin)
+          .applyAxisAngle(J_HAT, data.yaw ?? 0)
+          .add(clip.normal.multiplyScalar(-distanceToBarrel))
+          .add(neckOrigin);
+        clip.normal.normalize();
+        clip.constant -= clip.distanceToPoint(point);
+      }
+
+      modelTransformEvent.on(handleModelTransform);
+
+      unsubscribes.push(() => modelTransformEvent.off(handleModelTransform));
+    }
+
+    return () => {
+      unsubscribes.forEach((unsubscribe) => unsubscribe());
+    };
+  }, [thickness]);
+
+  return (
+    <>
+      {jsxTree(node, {
+        mesh: {
+          material: surfaceMaterial,
+          onPointerDown,
+          userData: {
+            type: props.type,
+            variant: props.type === ArmorType.External ? props.variant : 'gun',
+            thickness,
+          } satisfies ArmorUserData,
+
+          onClick(event) {
+            if (discardClippingPlane(event.object, event.point)) return;
+
+            event.stopPropagation();
+
+            const { editStatic } = tankopediaEphemeralStore.getState();
+
+            const bounds = new Box3().setFromObject(event.object);
+            const point = bounds.min
+              .clone()
+              .add(bounds.max)
+              .divideScalar(2)
+              .setY(bounds.max.y);
+            const cameraNormal = camera.position.clone().sub(point).normalize();
+            const surfaceNormal = event
+              .normal!.clone()
+              .applyQuaternion(
+                event.object.getWorldQuaternion(new Quaternion()),
+              );
+            const angle = surfaceNormal.angleTo(cameraNormal);
+            const thicknessAngled = thickness / Math.sin(Math.PI / 2 - angle);
+
+            mutateTankopediaEphemeralStore((draft) => {
+              draft.highlightArmor = {
+                type: props.type,
+                name,
+                point,
+                thickness,
+                thicknessAngled,
+                angle,
+                color: `#${color.getHexString()}`,
+                editingPlate: editStatic,
+              };
+            });
+          },
+        },
+      })}
+
+      {node instanceof Mesh && (
+        <lineSegments material={outlineMaterial}>
+          <edgesGeometry args={[node.geometry, 45]} />
+        </lineSegments>
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1,55 @@
+import { createPortal, useFrame } from '@react-three/fiber';
+import { memo, useState } from 'react';
+import { DepthTexture, Scene, Vector2 } from 'three';
+import { PrimaryArmorScene } from './components/PrimaryArmorScene';
+import { spacedArmorRenderTarget } from './components/PrimaryArmorSceneComponent/target';
+import { SpacedArmorScene } from './components/SpacedArmorScene';
+
+export const Armor = memo(() => {
+  const [spacedArmorScene] = useState(() => new Scene());
+  const [primaryArmorScene] = useState(() => new Scene());
+  const spacedArmorPortal = createPortal(
+    <SpacedArmorScene scene={spacedArmorScene} />,
+    spacedArmorScene,
+  );
+  const primaryArmorPortal = createPortal(
+    <PrimaryArmorScene />,
+    primaryArmorScene,
+  );
+
+  const renderSize = new Vector2();
+  const newRenderSize = new Vector2();
+
+  useFrame(({ gl, camera, scene }) => {
+    gl.autoClear = true;
+
+    gl.getSize(newRenderSize).multiplyScalar(gl.getPixelRatio());
+
+    if (!newRenderSize.equals(renderSize)) {
+      renderSize.copy(newRenderSize);
+      spacedArmorRenderTarget.depthTexture = new DepthTexture(
+        renderSize.x,
+        renderSize.y,
+      );
+    }
+
+    spacedArmorRenderTarget.setSize(renderSize.x, renderSize.y);
+    gl.setRenderTarget(spacedArmorRenderTarget);
+    gl.render(spacedArmorScene, camera);
+
+    gl.autoClear = false;
+
+    gl.setRenderTarget(null);
+    gl.render(scene, camera);
+
+    gl.clearDepth();
+    gl.render(primaryArmorScene, camera);
+  }, 1);
+
+  return (
+    <>
+      {spacedArmorPortal}
+      {primaryArmorPortal}
+    </>
+  );
+});

packages/website/src/components/ConsumablesManager.tsx

@@ -0,0 +1,71 @@
+import { ConsumableEntry } from '@blitzkit/core/src/blitzkit/consumableDefinitions';
+import { Flex, FlexProps } from '@radix-ui/themes';
+import { ConsumableButton } from './ModuleButtons/ConsumableButton';
+
+type ConsumablesManagerProps = FlexProps & {
+  consumables: ConsumableEntry[];
+  selected: number[];
+  onConsumablesChange?: (consumables: number[]) => void;
+  disabled?: boolean;
+  timers?: boolean;
+  hasHighEndConsumables?: boolean;
+  hasConsumableDeliverySystem?: boolean;
+  cooldownBooster?: number;
+};
+
+export function ConsumablesManager({
+  consumables,
+  selected,
+  onConsumablesChange,
+  disabled,
+  timers,
+  hasConsumableDeliverySystem,
+  cooldownBooster,
+  hasHighEndConsumables,
+  ...props
+}: ConsumablesManagerProps) {
+  return (
+    <Flex wrap="wrap" gap="2" {...props}>
+      {consumables.map((consumable) => {
+        const isSelected = selected.some((id) => id === consumable.id);
+
+        return (
+          <ConsumableButton
+            special={consumable.duration === undefined}
+            duration={
+              timers
+                ? consumable.duration === undefined
+                  ? undefined
+                  : consumable.duration * (hasHighEndConsumables ? 1.7 : 1)
+                : undefined
+            }
+            cooldown={
+              timers
+                ? consumable.cooldown *
+                  (hasConsumableDeliverySystem ? 0.88 : 1) *
+                  (1 - cooldownBooster! * 0.1)
+                : undefined
+            }
+            key={consumable.id}
+            disabled={disabled && !isSelected}
+            consumable={consumable.id}
+            selected={isSelected}
+            onClick={() => {
+              if (!onConsumablesChange) return;
+
+              const draft = [...selected];
+
+              if (draft.some((id) => id === consumable.id)) {
+                draft.splice(draft.indexOf(consumable.id), 1);
+              } else {
+                draft.push(consumable.id);
+              }
+
+              onConsumablesChange(draft);
+            }}
+          />
+        );
+      })}
+    </Flex>
+  );
+}

packages/website/src/components/CrewSkillManager.tsx

@@ -0,0 +1,58 @@
+import { asset, Tier, TIER_ROMAN_NUMERALS } from '@blitzkit/core';
+import { permanentSkills } from '@blitzkit/core/src/blitz/permanentSkills';
+import { skillDefinitions } from '@blitzkit/core/src/blitzkit/skillDefinitions';
+import { Flex } from '@radix-ui/themes';
+import { use } from 'react';
+import { GenericTankComponentButton } from './ModuleButtons/GenericTankComponentButton';
+
+interface CrewSkillManagerProps {
+  skillLevels: Record<string, number>;
+  onChange?: (skillLevels: Record<string, number>) => void;
+}
+
+export function CrewSkillManager({
+  skillLevels,
+  onChange,
+}: CrewSkillManagerProps) {
+  const awaitedSkillDefinitions = use(skillDefinitions);
+
+  return (
+    <Flex direction="column" gap="2">
+      {Object.entries(awaitedSkillDefinitions.classes).map(
+        ([tankClass, skills]) => (
+          <Flex gap="2" key={tankClass}>
+            {skills.map((skill) => {
+              const level = skillLevels[skill];
+
+              return (
+                <GenericTankComponentButton
+                  key={skill}
+                  special={!permanentSkills.includes(skill)}
+                  selected={level > 0}
+                  discriminator={
+                    level === 0 ? undefined : TIER_ROMAN_NUMERALS[level as Tier]
+                  }
+                  icon={asset(`icons/skills/${skill}.webp`)}
+                  onClick={(event) => {
+                    if (!onChange) return;
+
+                    const draft = { ...skillLevels };
+
+                    if (event.shiftKey) {
+                      draft[skill] = draft[skill] === 0 ? 7 : 0;
+                    } else {
+                      draft[skill] = level - 1;
+                      if (draft[skill] < 0) draft[skill] = 7;
+                    }
+
+                    onChange(draft);
+                  }}
+                />
+              );
+            })}
+          </Flex>
+        ),
+      )}
+    </Flex>
+  );
+}

packages/website/src/components/EquipmentManager.tsx

@@ -0,0 +1,67 @@
+import { EquipmentPreset } from '@blitzkit/core/src/blitzkit/equipmentDefinitions';
+import { Flex } from '@radix-ui/themes';
+import { cloneDeep } from 'lodash';
+import { EquipmentButton } from './ModuleButtons/EquipmentButton';
+
+interface EquipmentManagerProps {
+  preset: EquipmentPreset;
+  matrix: EquipmentMatrix;
+  onChange: (matrix: EquipmentMatrix) => void;
+}
+
+export function EquipmentManager({
+  preset,
+  matrix,
+  onChange,
+}: EquipmentManagerProps) {
+  return (
+    <Flex direction="column" gap="2">
+      {preset.map((equipmentRow, rowIndex) => (
+        <Flex gap="2" key={rowIndex}>
+          {equipmentRow.map((equipment, columnIndex) => (
+            <Flex key={columnIndex}>
+              <EquipmentButton
+                equipment={equipment[0]}
+                style={{
+                  borderTopRightRadius: 0,
+                  borderBottomRightRadius: 0,
+                }}
+                selected={matrix[rowIndex][columnIndex] === -1}
+                onClick={() => {
+                  const draft = cloneDeep(matrix);
+
+                  if (draft[rowIndex][columnIndex] === -1) {
+                    draft[rowIndex][columnIndex] = 0;
+                  } else {
+                    draft[rowIndex][columnIndex] = -1;
+                  }
+
+                  onChange(draft);
+                }}
+              />
+              <EquipmentButton
+                equipment={equipment[1]}
+                style={{
+                  borderTopLeftRadius: 0,
+                  borderBottomLeftRadius: 0,
+                }}
+                selected={matrix[rowIndex][columnIndex] === 1}
+                onClick={() => {
+                  const draft = cloneDeep(matrix);
+
+                  if (draft[rowIndex][columnIndex] === 1) {
+                    draft[rowIndex][columnIndex] = 0;
+                  } else {
+                    draft[rowIndex][columnIndex] = 1;
+                  }
+
+                  onChange(draft);
+                }}
+              />
+            </Flex>
+          ))}
+        </Flex>
+      ))}
+    </Flex>
+  );
+}

packages/website/src/components/ModuleButtons/ConsumableButton.tsx

@@ -0,0 +1,73 @@
+import { asset } from '@blitzkit/core';
+import { consumableDefinitions } from '@blitzkit/core/src/blitzkit/consumableDefinitions';
+import { ClockIcon, ReloadIcon } from '@radix-ui/react-icons';
+import { Flex, Text } from '@radix-ui/themes';
+import { use } from 'react';
+import { useDelta } from '../../hooks/useDelta';
+import { GenericTankComponentButton } from './GenericTankComponentButton';
+import { TankComponentButtonProps } from './TankComponentButton';
+
+interface ConsumableButtonProps extends TankComponentButtonProps {
+  consumable: number;
+  duration?: number;
+  cooldown?: number;
+}
+
+export function ConsumableButton({
+  consumable,
+  cooldown,
+  duration,
+  ...props
+}: ConsumableButtonProps) {
+  const awaitedConsumableDefinitions = use(consumableDefinitions);
+  const cooldownDelta = useDelta(cooldown ?? 0);
+  const durationDelta = useDelta(duration ?? 0);
+
+  return (
+    <GenericTankComponentButton
+      style={{ width: '6rem' }}
+      tooltip={awaitedConsumableDefinitions[consumable].name}
+      icon={asset(`icons/consumables/${consumable}.webp`)}
+      {...props}
+    >
+      {(cooldown || duration) && (
+        <Flex direction="column" gap="1" ml="-2" mr="2">
+          {duration && (
+            <Text
+              size="1"
+              color={
+                durationDelta > 0
+                  ? 'green'
+                  : durationDelta < 0
+                  ? 'tomato'
+                  : undefined
+              }
+            >
+              <Flex align="center" gap="1" style={{ marginBottom: -4 }}>
+                <ClockIcon width={12} height={12} />
+                {Math.round(duration)}s
+              </Flex>
+            </Text>
+          )}
+          {cooldown && (
+            <Text
+              size="1"
+              color={
+                cooldownDelta < 0
+                  ? 'green'
+                  : cooldownDelta > 0
+                  ? 'tomato'
+                  : undefined
+              }
+            >
+              <Flex align="center" gap="1">
+                <ReloadIcon width={12} height={12} />
+                {Math.round(cooldown)}s
+              </Flex>
+            </Text>
+          )}
+        </Flex>
+      )}
+    </GenericTankComponentButton>
+  );
+}

packages/website/src/components/ModuleButtons/EquipmentButton.tsx

@@ -0,0 +1,21 @@
+import { asset } from '@blitzkit/core';
+import { equipmentDefinitions } from '@blitzkit/core/src/blitzkit/equipmentDefinitions';
+import { use } from 'react';
+import { GenericTankComponentButton } from './GenericTankComponentButton';
+import { TankComponentButtonProps } from './TankComponentButton';
+
+interface EquipmentButtonProps extends TankComponentButtonProps {
+  equipment: number;
+}
+
+export function EquipmentButton({ equipment, ...props }: EquipmentButtonProps) {
+  const awaitedEquipmentDefinitions = use(equipmentDefinitions);
+
+  return (
+    <GenericTankComponentButton
+      tooltip={awaitedEquipmentDefinitions.equipments[equipment].name}
+      icon={asset(`icons/equipment/${equipment}.webp`)}
+      {...props}
+    />
+  );
+}

packages/website/src/components/ModuleButtons/GenericTankComponentButton.tsx

@@ -0,0 +1,48 @@
+import { HTMLAttributes } from 'react';
+import {
+  TankComponentButton,
+  TankComponentButtonProps,
+} from './TankComponentButton';
+
+interface GenericTankComponentButtonProps extends TankComponentButtonProps {
+  icon: string;
+  iconStyles?: HTMLAttributes<HTMLImageElement>['style'];
+}
+
+export function GenericTankComponentButton({
+  icon,
+  iconStyles,
+  children,
+  ...props
+}: GenericTankComponentButtonProps) {
+  return (
+    <TankComponentButton {...props}>
+      <div
+        style={{
+          width: 48,
+          height: 40,
+          position: 'relative',
+        }}
+      >
+        <img
+          alt={icon}
+          draggable={false}
+          src={icon}
+          style={{
+            objectFit: 'contain',
+            width: 32,
+            height: 32,
+            position: 'absolute',
+            opacity: props.disabled ? 0.5 : 1,
+            transform: 'translate(-50%, -50%) scale(0.75)',
+            top: '50%',
+            left: '50%',
+            ...iconStyles,
+          }}
+        />
+      </div>
+
+      {children}
+    </TankComponentButton>
+  );
+}

packages/website/src/components/ModuleButtons/ModuleButton.tsx

@@ -0,0 +1,21 @@
+import { asset } from '../../core/blitzkit/asset';
+import { GenericTankComponentButton } from './GenericTankComponentButton';
+import { TankComponentButtonProps } from './TankComponentButton';
+
+interface ModuleProps extends TankComponentButtonProps {
+  module: string;
+}
+
+export function ModuleButton({ module, ...props }: ModuleProps) {
+  return (
+    <GenericTankComponentButton
+      icon={asset(`icons/modules/${module}.webp`)}
+      iconStyles={{
+        top: '50%',
+        left: '50%',
+        transform: 'translate(calc(-50% + 2px), calc(-50% + 2px))',
+      }}
+      {...props}
+    />
+  );
+}

packages/website/src/components/ModuleButtons/ProvisionButton.tsx

@@ -0,0 +1,21 @@
+import { asset } from '@blitzkit/core';
+import { provisionDefinitions } from '@blitzkit/core/src/blitzkit/provisionDefinitions';
+import { use } from 'react';
+import { GenericTankComponentButton } from './GenericTankComponentButton';
+import { TankComponentButtonProps } from './TankComponentButton';
+
+interface ProvisionButtonProps extends TankComponentButtonProps {
+  provision: number;
+}
+
+export function ProvisionButton({ provision, ...props }: ProvisionButtonProps) {
+  const awaitedProvisionDefinitions = use(provisionDefinitions);
+
+  return (
+    <GenericTankComponentButton
+      tooltip={awaitedProvisionDefinitions[provision].name}
+      icon={asset(`icons/provisions/${provision}.webp`)}
+      {...props}
+    />
+  );
+}

packages/website/src/components/ModuleButtons/ShellButton.tsx

@@ -0,0 +1,16 @@
+import { asset } from '@blitzkit/core/src/blitzkit/asset';
+import { GenericTankComponentButton } from './GenericTankComponentButton';
+import { TankComponentButtonProps } from './TankComponentButton';
+
+interface ShellButtonProps extends TankComponentButtonProps {
+  shell: string;
+}
+
+export function ShellButton({ shell, ...props }: ShellButtonProps) {
+  return (
+    <GenericTankComponentButton
+      icon={asset(`icons/shells/${shell}.webp`)}
+      {...props}
+    />
+  );
+}

packages/website/src/components/ModuleButtons/TankComponentButton.tsx

@@ -0,0 +1,81 @@
+import { Button, Text, Tooltip } from '@radix-ui/themes';
+import { ComponentProps, ReactNode } from 'react';
+
+export interface TankComponentButtonProps
+  extends ComponentProps<typeof Button> {
+  selected?: boolean;
+  children?: ReactNode;
+  discriminator?: ReactNode;
+  disabled?: boolean;
+  banner?: string;
+  special?: boolean;
+  tooltip?: string;
+}
+
+export function TankComponentButton({
+  variant,
+  selected,
+  discriminator,
+  special,
+  children,
+  banner,
+  disabled,
+  style,
+  tooltip,
+  ...props
+}: TankComponentButtonProps) {
+  const button = (
+    <Button
+      radius="medium"
+      color={selected ? (special ? 'amber' : undefined) : 'gray'}
+      variant={variant ?? (selected ? 'surface' : 'soft')}
+      style={{
+        padding: 0,
+        minWidth: 48,
+        height: 40,
+        position: 'relative',
+        overflow: 'hidden',
+        cursor: 'unset',
+        pointerEvents: variant === 'ghost' ? 'none' : undefined,
+        ...style,
+      }}
+      disabled={variant === 'ghost' || disabled}
+      {...props}
+    >
+      {banner !== undefined && (
+        <div
+          style={{
+            position: 'absolute',
+            width: '200%',
+            height: 12,
+            backgroundColor: banner,
+            top: '50%',
+            left: '-50%',
+            transform: 'translateY(-50%) rotate(-22.5deg)',
+          }}
+        />
+      )}
+
+      {children}
+
+      {discriminator !== undefined && (
+        <Text
+          size="1"
+          style={{
+            textShadow: '0 0 4px black',
+            position: 'absolute',
+            top: '50%',
+            right: 8,
+            textAlign: 'right',
+          }}
+          color={variant === 'ghost' ? 'gray' : undefined}
+        >
+          {discriminator}
+        </Text>
+      )}
+    </Button>
+  );
+
+  if (tooltip) return <Tooltip content={tooltip}>{button}</Tooltip>;
+  return button;
+}

packages/website/src/components/ModuleManager.tsx

@@ -0,0 +1,201 @@
+import { DropdownMenu, Flex } from '@radix-ui/themes';
+import { useState } from 'react';
+import {
+  EngineDefinition,
+  GunDefinition,
+  ShellDefinition,
+  TankDefinition,
+  TrackDefinition,
+  TurretDefinition,
+} from '../core/blitzkit/tankDefinitions';
+import { TIER_ROMAN_NUMERALS } from '../core/blitzkit/tankDefinitions/constants';
+import { ModuleButton } from './ModuleButtons/ModuleButton';
+
+interface ModuleManagerProps {
+  tank: TankDefinition;
+  turret: TurretDefinition;
+  gun: GunDefinition;
+  shell: ShellDefinition;
+  engine: EngineDefinition;
+  track: TrackDefinition;
+  onChange?: (modules: {
+    turret: TurretDefinition;
+    gun: GunDefinition;
+    engine: EngineDefinition;
+    track: TrackDefinition;
+  }) => void;
+}
+
+export function ModuleManager({
+  tank,
+  onChange,
+  ...modules
+}: ModuleManagerProps) {
+  const [turretMenuOpen, setTurretMenuOpen] = useState(false);
+  const [gunMenuOpen, setGunMenuOpen] = useState(false);
+  const [engineMenuOpen, setEngineMenuOpen] = useState(false);
+  const [trackMenuOpen, setTrackMenuOpen] = useState(false);
+
+  return (
+    <Flex gap="1" wrap="wrap">
+      <ModuleButton
+        module="turret"
+        discriminator={TIER_ROMAN_NUMERALS[modules.turret.tier]}
+        onClick={() => setTurretMenuOpen(true)}
+      />
+
+      <DropdownMenu.Root open={turretMenuOpen} onOpenChange={setTurretMenuOpen}>
+        <DropdownMenu.Trigger>
+          <div />
+        </DropdownMenu.Trigger>
+
+        <DropdownMenu.Content>
+          <DropdownMenu.RadioGroup value={`${modules.turret.id}`}>
+            {[...tank.turrets].reverse().map((turret) => {
+              return (
+                <DropdownMenu.RadioItem
+                  key={turret.id}
+                  value={`${turret.id}`}
+                  onClick={() => {
+                    const draft = { ...modules };
+                    draft.turret = turret;
+                    draft.gun = draft.turret.guns.at(-1)!;
+                    draft.shell = draft.gun.shells[0];
+
+                    onChange?.(draft);
+                    setTurretMenuOpen(false);
+                  }}
+                >
+                  <ModuleButton
+                    variant="ghost"
+                    module="turret"
+                    discriminator={TIER_ROMAN_NUMERALS[turret.tier]}
+                  />{' '}
+                  {turret.name}
+                </DropdownMenu.RadioItem>
+              );
+            })}
+          </DropdownMenu.RadioGroup>
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
+
+      <ModuleButton
+        module="gun"
+        discriminator={TIER_ROMAN_NUMERALS[modules.gun.tier]}
+        onClick={() => setGunMenuOpen(true)}
+      />
+
+      <DropdownMenu.Root open={gunMenuOpen} onOpenChange={setGunMenuOpen}>
+        <DropdownMenu.Trigger>
+          <div />
+        </DropdownMenu.Trigger>
+
+        <DropdownMenu.Content>
+          <DropdownMenu.RadioGroup value={`${modules.gun.id}`}>
+            {[...modules.turret.guns].reverse().map((gun) => {
+              return (
+                <DropdownMenu.RadioItem
+                  key={gun.id}
+                  value={`${gun.id}`}
+                  onClick={() => {
+                    const draft = { ...modules };
+                    draft.gun = gun;
+                    draft.shell = draft.gun.shells[0];
+
+                    onChange?.(draft);
+                    setGunMenuOpen(false);
+                  }}
+                >
+                  <ModuleButton
+                    variant="ghost"
+                    module="gun"
+                    discriminator={TIER_ROMAN_NUMERALS[gun.tier]}
+                  />{' '}
+                  {gun.name}
+                </DropdownMenu.RadioItem>
+              );
+            })}
+          </DropdownMenu.RadioGroup>
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
+
+      <ModuleButton
+        module="engine"
+        discriminator={TIER_ROMAN_NUMERALS[modules.engine.tier]}
+        onClick={() => setEngineMenuOpen(true)}
+      />
+
+      <DropdownMenu.Root open={engineMenuOpen} onOpenChange={setEngineMenuOpen}>
+        <DropdownMenu.Trigger>
+          <div />
+        </DropdownMenu.Trigger>
+
+        <DropdownMenu.Content>
+          <DropdownMenu.RadioGroup value={`${modules.engine.id}`}>
+            {[...tank.engines].reverse().map((engine) => {
+              return (
+                <DropdownMenu.RadioItem
+                  key={engine.id}
+                  value={`${engine.id}`}
+                  onClick={() => {
+                    const draft = { ...modules };
+                    draft.engine = engine;
+
+                    onChange?.(draft);
+                    setEngineMenuOpen(false);
+                  }}
+                >
+                  <ModuleButton
+                    variant="ghost"
+                    module="engine"
+                    discriminator={TIER_ROMAN_NUMERALS[engine.tier]}
+                  />{' '}
+                  {engine.name}
+                </DropdownMenu.RadioItem>
+              );
+            })}
+          </DropdownMenu.RadioGroup>
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
+
+      <ModuleButton
+        module="chassis"
+        discriminator={TIER_ROMAN_NUMERALS[modules.track.tier]}
+        onClick={() => setTrackMenuOpen(true)}
+      />
+
+      <DropdownMenu.Root open={trackMenuOpen} onOpenChange={setTrackMenuOpen}>
+        <DropdownMenu.Trigger>
+          <div />
+        </DropdownMenu.Trigger>
+
+        <DropdownMenu.Content>
+          <DropdownMenu.RadioGroup value={`${modules.track.id}`}>
+            {[...tank.tracks].reverse().map((track) => {
+              return (
+                <DropdownMenu.RadioItem
+                  key={track.id}
+                  value={`${track.id}`}
+                  onClick={() => {
+                    const draft = { ...modules };
+                    draft.track = track;
+
+                    onChange?.(draft);
+                    setTrackMenuOpen(false);
+                  }}
+                >
+                  <ModuleButton
+                    variant="ghost"
+                    module="chassis"
+                    discriminator={TIER_ROMAN_NUMERALS[track.tier]}
+                  />{' '}
+                  {track.name}
+                </DropdownMenu.RadioItem>
+              );
+            })}
+          </DropdownMenu.RadioGroup>
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
+    </Flex>
+  );
+}

packages/website/src/components/Navbar/components/WargamingAccountName.tsx

@@ -1,7 +1,6 @@
 import { idToRegion } from '@blitzkit/core';
 import { Text } from '@radix-ui/themes';
 import { use, useMemo } from 'react';
-import { getAccountInfo } from '../../../../../../src/core/blitz/getAccountInfo';
 import * as App from '../../../stores/app';
 
 export function WargamingAccountName() {

packages/website/src/components/ProvisionsManager.tsx

@@ -0,0 +1,46 @@
+import { Flex } from '@radix-ui/themes';
+import { ProvisionButton } from './ModuleButtons/ProvisionButton';
+
+interface ProvisionsManagerProps {
+  provisions: number[];
+  selected: number[];
+  disabled?: boolean;
+  onChange?: (provisions: number[]) => void;
+}
+
+export function ProvisionsManager({
+  provisions,
+  selected,
+  onChange,
+  disabled,
+}: ProvisionsManagerProps) {
+  return (
+    <Flex wrap="wrap" gap="2">
+      {provisions.map((provision, index) => {
+        const isSelected = selected.includes(provision);
+
+        return (
+          <ProvisionButton
+            key={provision}
+            disabled={disabled && !isSelected}
+            provision={provision}
+            selected={isSelected}
+            onClick={() => {
+              if (!onChange) return;
+
+              const draft = [...selected];
+
+              if (isSelected) {
+                draft.splice(draft.indexOf(provision), 1);
+              } else {
+                draft.push(provision);
+              }
+
+              onChange(draft);
+            }}
+          />
+        );
+      })}
+    </Flex>
+  );
+}

packages/website/src/core/blitz/applyPitchYawLimits.ts

@@ -0,0 +1,84 @@
+import {
+  PitchLimits,
+  YawLimits,
+} from '@blitzkit/core/src/blitzkit/modelDefinitions';
+import { normalizeAngleRad } from '@blitzkit/core/src/math/normalizeAngleRad';
+import { clamp } from 'lodash';
+import { degToRad } from 'three/src/math/MathUtils';
+
+export function applyPitchYawLimits(
+  pitch: number, // rad
+  yaw: number, // rad
+  pitchLimits: PitchLimits, // deg
+  yawLimits?: YawLimits, // deg
+  verticalStabilizer = false,
+) {
+  let newPitch = pitch;
+  let newYaw = yaw;
+
+  if (yawLimits) {
+    newYaw = normalizeAngleRad(
+      clamp(newYaw, -degToRad(yawLimits.max), -degToRad(yawLimits.min)),
+    );
+  }
+
+  const depressionBuff = verticalStabilizer ? degToRad(3) : 0;
+  const elevationBuff = verticalStabilizer ? degToRad(4) : 0;
+  let lowerPitch = -degToRad(pitchLimits.max) - depressionBuff;
+  let upperPitch = -degToRad(pitchLimits.min) + elevationBuff;
+  const transition = degToRad(pitchLimits.transition ?? 10);
+
+  if (pitchLimits.back) {
+    const range = degToRad(pitchLimits.back.range);
+    const yawRotatedAbs = Math.abs(normalizeAngleRad(newYaw - Math.PI));
+
+    if (yawRotatedAbs <= range + transition) {
+      if (yawRotatedAbs <= range) {
+        // inside range
+        lowerPitch = -degToRad(pitchLimits.back.max);
+        upperPitch = -degToRad(pitchLimits.back.min);
+      } else {
+        // inside transition
+        const transitionProgress = (yawRotatedAbs - range) / transition;
+        const maxInterpolatedPitch =
+          (1 - transitionProgress) * pitchLimits.back.max +
+          transitionProgress * pitchLimits.max;
+        const minInterpolatedPitch =
+          (1 - transitionProgress) * pitchLimits.back.min +
+          transitionProgress * pitchLimits.min;
+
+        lowerPitch = -degToRad(maxInterpolatedPitch);
+        upperPitch = -degToRad(minInterpolatedPitch);
+      }
+    }
+  }
+
+  if (pitchLimits.front) {
+    const range = degToRad(pitchLimits.front.range);
+    const yawAbs = Math.abs(normalizeAngleRad(newYaw));
+
+    if (yawAbs <= range + transition) {
+      if (yawAbs <= range) {
+        // inside range
+        lowerPitch = -degToRad(pitchLimits.front.max);
+        upperPitch = -degToRad(pitchLimits.front.min);
+      } else {
+        // inside transition
+        const transitionProgress = (yawAbs - range) / transition;
+        const maxInterpolatedPitch =
+          (1 - transitionProgress) * pitchLimits.front.max +
+          transitionProgress * pitchLimits.max;
+        const minInterpolatedPitch =
+          (1 - transitionProgress) * pitchLimits.front.min +
+          transitionProgress * pitchLimits.min;
+
+        lowerPitch = -degToRad(maxInterpolatedPitch);
+        upperPitch = -degToRad(minInterpolatedPitch);
+      }
+    }
+  }
+
+  newPitch = clamp(newPitch, lowerPitch, upperPitch);
+
+  return [newPitch, newYaw];
+}

packages/website/src/core/blitz/canSplash.ts

@@ -0,0 +1,3 @@
+export function canSplash(type: ShellDefinition['type']): type is ShellType.HE {
+  return type === ShellType.HE;
+}

packages/website/src/core/blitz/correctZYTuple.ts

@@ -0,0 +1,6 @@
+import { Vector3, Vector3Tuple } from 'three';
+import { rotateDavaVector } from './rotateDavaVector';
+
+export function correctZYTuple(tuple: Vector3Tuple) {
+  return rotateDavaVector(new Vector3(tuple[0], tuple[1], -tuple[2]));
+}

packages/website/src/core/blitz/extractArmor.ts

@@ -0,0 +1,141 @@
+import { Accessor, Document, Node, Scene } from '@gltf-transform/core';
+import { times } from 'lodash';
+import { Hierarchy, Sc2ReadStream } from '../streams/sc2';
+import { ScgReadStream } from '../streams/scg';
+import { VertexAttribute } from '../streams/scpg';
+import {
+  vertexAttributeGLTFName,
+  vertexAttributeGltfVectorSizes,
+} from './extractModel/constants';
+import { readDVPLFile } from './readDVPLFile';
+
+export async function extractArmor(data: string, fileName: string) {
+  const sc2Path = `${data}/3d/Tanks/CollisionMeshes/${fileName}.sc2.dvpl`;
+  const scgPath = `${data}/3d/Tanks/CollisionMeshes/${fileName}.scg.dvpl`;
+  const sc2 = new Sc2ReadStream(
+    (await readDVPLFile(sc2Path)).buffer as ArrayBuffer,
+  ).sc2();
+  const scg = new ScgReadStream(
+    (await readDVPLFile(scgPath)).buffer as ArrayBuffer,
+  ).scg();
+  const document = new Document();
+  const scene = document.createScene();
+  const buffer = document.createBuffer();
+
+  function parseHierarchies(hierarchies: Hierarchy[], parent: Scene | Node) {
+    hierarchies.forEach((hierarchy) => {
+      const components = times(
+        hierarchy.components.count,
+        (index) => hierarchy.components[index.toString().padStart(4, '0')],
+      );
+
+      components.forEach((component) => {
+        switch (component['comp.typename']) {
+          case 'TransformComponent':
+            break;
+
+          case 'RenderComponent': {
+            const batch = component['rc.renderObj']['ro.batches']['0000'];
+            const polygonGroup = scg.get(batch['rb.datasource']);
+
+            if (!polygonGroup) {
+              console.warn(
+                `Missing polygon group ${batch['rb.datasource']} (${hierarchy.name}); skipping...`,
+              );
+
+              break;
+            }
+
+            const hardJointIndices = new Set<number>();
+            const vertexHardJointIndices = new Map<number, number>();
+            const attributes = new Map<VertexAttribute, number[][]>();
+
+            polygonGroup.vertices.forEach((vertex, index) => {
+              vertex.forEach(({ attribute, value }) => {
+                if (!attributes.has(attribute)) {
+                  attributes.set(attribute, []);
+                }
+
+                attributes.get(attribute)!.push(value);
+
+                if (attribute === VertexAttribute.HARD_JOINTINDEX) {
+                  hardJointIndices.add(value[0]);
+                  vertexHardJointIndices.set(index, value[0]);
+                }
+              });
+            });
+
+            if (attributes.has(VertexAttribute.TANGENT)) {
+              attributes.set(
+                VertexAttribute.TANGENT,
+                attributes
+                  .get(VertexAttribute.TANGENT)!
+                  .map((tangent) => [...tangent, 1]),
+              );
+            }
+
+            const accessors = new Map<string, Accessor>();
+
+            attributes.forEach((value, attribute) => {
+              const name = vertexAttributeGLTFName[attribute];
+              if (!name || accessors.has(name)) return;
+              const vertexSize = vertexAttributeGltfVectorSizes[attribute];
+              const accessor = document
+                .createAccessor(name)
+                .setType(vertexSize === 1 ? 'SCALAR' : `VEC${vertexSize}`)
+                .setArray(new Float32Array(value.flat()))
+                .setBuffer(buffer);
+
+              accessors.set(name, accessor);
+            });
+
+            hardJointIndices.forEach((hardJointIndex) => {
+              const node = document.createNode(
+                `${hierarchy.name}_armor_${hardJointIndex}`,
+              );
+              const mesh = document.createMesh(batch['##name']);
+              const indicesAccessor = document
+                .createAccessor()
+                .setType('SCALAR')
+                .setArray(
+                  new Uint16Array(
+                    polygonGroup.indices.filter(
+                      (index) =>
+                        vertexHardJointIndices.get(index) === hardJointIndex,
+                    ),
+                  ),
+                )
+                .setBuffer(buffer);
+              const primitive = document
+                .createPrimitive()
+                .setIndices(indicesAccessor);
+
+              accessors.forEach((accessor, name) => {
+                primitive.setAttribute(name, accessor);
+              });
+
+              mesh.addPrimitive(primitive);
+              node.setMesh(mesh);
+              parent.addChild(node);
+            });
+
+            break;
+          }
+
+          default:
+            throw new TypeError(
+              `Unhandled component type: ${component['comp.typename']}`,
+            );
+        }
+      });
+
+      if (hierarchy['#hierarchy']) {
+        parseHierarchies(hierarchy['#hierarchy'], parent);
+      }
+    });
+  }
+
+  parseHierarchies(sc2['#hierarchy'], scene);
+
+  return document;
+}

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

@@ -0,0 +1,19 @@
+import { vertexAttributeVectorSizes } from '../../streams/scg';
+import { VertexAttribute } from '../../streams/scpg';
+
+export const vertexAttributeGLTFName: Partial<Record<VertexAttribute, string>> =
+  {
+    [VertexAttribute.VERTEX]: 'POSITION',
+    [VertexAttribute.NORMAL]: 'NORMAL',
+    [VertexAttribute.TEXCOORD0]: 'TEXCOORD_0',
+    [VertexAttribute.TEXCOORD1]: 'TEXCOORD_0',
+    [VertexAttribute.TEXCOORD2]: 'TEXCOORD_0',
+    [VertexAttribute.TEXCOORD3]: 'TEXCOORD_0',
+    [VertexAttribute.TANGENT]: 'TANGENT',
+    [VertexAttribute.JOINTINDEX]: 'JOINT_0',
+    [VertexAttribute.JOINTWEIGHT]: 'WEIGHT_0',
+  };
+export const vertexAttributeGltfVectorSizes = {
+  ...vertexAttributeVectorSizes,
+  [VertexAttribute.TANGENT]: 4,
+} as const;

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

@@ -0,0 +1,288 @@
+import { Document, Material, Node, Scene } from '@gltf-transform/core';
+import { times } from 'lodash';
+import { dirname } from 'path';
+import { Matrix4, Quaternion, Vector3, Vector4Tuple } from 'three';
+import { readTexture } from '../../blitzkit/readTexture';
+import { TextureMutation } from '../../blitzkit/readTexture/constants';
+import { Hierarchy, Sc2ReadStream, Textures } from '../../streams/sc2';
+import { ScgReadStream } from '../../streams/scg';
+import { VertexAttribute } from '../../streams/scpg';
+import { readDVPLFile } from '../readDVPLFile';
+import {
+  vertexAttributeGLTFName,
+  vertexAttributeGltfVectorSizes,
+} from './constants';
+
+const ERROR_ON_UNKNOWN_COMPONENT = false;
+
+const omitMeshNames = {
+  start: ['chassis_chassis_', 'chassis_track_crash_', 'HP_'],
+  end: ['_POINT'],
+};
+
+export async function extractModel(data: string, path: string) {
+  const sc2Path = `${data}/3d/${path}.sc2.dvpl`;
+  const scgPath = `${data}/3d/${path}.scg.dvpl`;
+  const sc2 = new Sc2ReadStream(
+    (await readDVPLFile(sc2Path)).buffer as ArrayBuffer,
+  ).sc2();
+  const scg = new ScgReadStream(
+    (await readDVPLFile(scgPath)).buffer as ArrayBuffer,
+  ).scg();
+  const document = new Document();
+  const scene = document.createScene();
+  const buffer = document.createBuffer();
+  const materials = new Map<bigint, Material | bigint | undefined>();
+
+  // create materials
+  await Promise.all(
+    sc2['#dataNodes'].map(async (node) => {
+      const id = new DataView(node['#id']).getBigUint64(0, true);
+
+      if (node.parentMaterialKey !== undefined) {
+        /**
+         * material depends on a parent and doesn't seem to have any
+         * properties so we just point it to the parent
+         */
+        materials.set(id, node.parentMaterialKey);
+        return;
+      }
+
+      const material = document.createMaterial(node.materialName);
+      let textures: Textures | undefined = undefined;
+
+      if (node.textures) {
+        textures = node.textures;
+      } else if (typeof node.configCount === 'number') {
+        textures = node.configArchive_0.textures;
+      }
+
+      if (textures) {
+        material.setBaseColorTexture(
+          document
+            .createTexture(node.materialName)
+            .setMimeType('image/jpeg')
+            .setImage(
+              await readTexture(
+                `${data}/3d/${dirname(path)}/${textures.albedo}`,
+                TextureMutation.Albedo,
+              ),
+            ),
+        );
+
+        if (textures.baseRMMap) {
+          material.setMetallicRoughnessTexture(
+            document
+              .createTexture(node.materialName)
+              .setMimeType('image/jpeg')
+              .setImage(
+                await readTexture(
+                  `${data}/3d/${dirname(path)}/${textures.baseRMMap}`,
+                  TextureMutation.RoughnessMetallicness,
+                ),
+              ),
+          );
+        }
+
+        if (textures.baseNormalMap ?? textures.normalmap) {
+          const isBase = textures.baseNormalMap !== undefined;
+
+          material.setNormalTexture(
+            document
+              .createTexture(node.materialName)
+              .setMimeType('image/jpeg')
+              .setImage(
+                await readTexture(
+                  `${data}/3d/${dirname(path)}/${
+                    textures.baseNormalMap ?? textures.normalmap
+                  }`,
+                  isBase ? TextureMutation.Normal : undefined,
+                ),
+              ),
+          );
+        }
+
+        if (textures.miscMap) {
+          material.setOcclusionTexture(
+            document
+              .createTexture(node.materialName)
+              .setMimeType('image/jpeg')
+              .setImage(
+                await readTexture(
+                  `${data}/3d/${dirname(path)}/${textures.miscMap}`,
+                  TextureMutation.Miscellaneous,
+                ),
+              ),
+          );
+        }
+
+        materials.set(
+          new DataView(node['#id']).getBigUint64(0, true),
+          material,
+        );
+      }
+    }),
+  );
+
+  // replace children materials with parents
+  materials.forEach((material, id) => {
+    if (typeof material !== 'bigint') return;
+
+    let resolvedMaterial: Material | bigint | undefined = material;
+
+    while (typeof resolvedMaterial === 'bigint') {
+      const linkedParentMaterial = materials.get(resolvedMaterial);
+
+      resolvedMaterial = linkedParentMaterial;
+    }
+
+    materials.set(id, resolvedMaterial);
+  });
+
+  function parseHierarchies(hierarchies: Hierarchy[], parent: Scene | Node) {
+    hierarchies.forEach((hierarchy) => {
+      if (
+        omitMeshNames.start.some((omit) => hierarchy.name.startsWith(omit)) ||
+        omitMeshNames.end.some((omit) => hierarchy.name.endsWith(omit))
+      )
+        return;
+
+      const node = document.createNode(hierarchy.name);
+      const components = times(
+        hierarchy.components.count,
+        (index) => hierarchy.components[index.toString().padStart(4, '0')],
+      );
+
+      components.forEach((component) => {
+        switch (component['comp.typename']) {
+          case 'LodComponent':
+            // found and used later by transform component
+            // TODO: lod component always shows up before transform component; cache it before parsing transform
+            break;
+
+          case 'TransformComponent': {
+            const translation = new Vector3();
+            const rotation = new Quaternion();
+            const scale = new Vector3();
+
+            new Matrix4()
+              .multiplyMatrices(
+                new Matrix4().compose(
+                  new Vector3().fromArray(component['tc.worldTranslation']),
+                  new Quaternion().fromArray(component['tc.worldRotation']),
+                  new Vector3().fromArray(component['tc.worldScale']),
+                ),
+                new Matrix4().compose(
+                  new Vector3().fromArray(component['tc.localTranslation']),
+                  new Quaternion().fromArray(component['tc.localRotation']),
+                  new Vector3().fromArray(component['tc.localScale']),
+                ),
+              )
+              .decompose(translation, rotation, scale);
+
+            node.setTranslation(translation.toArray());
+            node.setRotation(rotation.toArray() as Vector4Tuple);
+            node.setScale(scale.toArray());
+
+            break;
+          }
+
+          case 'RenderComponent': {
+            const renderObject = component['rc.renderObj'];
+
+            times(renderObject['ro.batchCount'], (batchIndex): void => {
+              const lodIndex = renderObject[`rb${batchIndex}.lodIndex`];
+
+              if (lodIndex !== 0) return;
+
+              const batchKey = batchIndex.toString().padStart(4, '0');
+              const batch = renderObject['ro.batches'][batchKey];
+              const material = materials.get(batch['rb.nmatname']);
+              const polygonGroup = scg.get(batch['rb.datasource']);
+
+              if (!(material instanceof Material)) {
+                // probably shadow material
+                return;
+              }
+              if (polygonGroup === undefined) {
+                throw new Error(
+                  `Missing polygon group ${batch['rb.datasource']}`,
+                );
+              }
+
+              const lodNode = document.createNode(batchKey);
+              const indicesAccessor = document
+                .createAccessor()
+                .setType('SCALAR')
+                .setArray(new Uint16Array(polygonGroup.indices))
+                .setBuffer(buffer);
+              const primitive = document
+                .createPrimitive()
+                .setIndices(indicesAccessor)
+                .setMaterial(material);
+              const attributes = new Map<VertexAttribute, number[][]>();
+
+              polygonGroup.vertices.forEach((vertex) => {
+                vertex.forEach(({ attribute, value }) => {
+                  if (!attributes.has(attribute)) {
+                    attributes.set(attribute, []);
+                  }
+
+                  attributes.get(attribute)!.push(value);
+                });
+              });
+
+              if (attributes.has(VertexAttribute.TANGENT)) {
+                attributes.set(
+                  VertexAttribute.TANGENT,
+                  attributes
+                    .get(VertexAttribute.TANGENT)!
+                    .map((tangent) => [...tangent, 1]),
+                );
+              }
+
+              attributes.forEach((value, attribute) => {
+                const name = vertexAttributeGLTFName[attribute];
+                if (!name || primitive.getAttribute(name)) return;
+                const vertexSize = vertexAttributeGltfVectorSizes[attribute];
+
+                const attributeAccessor = document
+                  .createAccessor(name)
+                  .setType(vertexSize === 1 ? 'SCALAR' : `VEC${vertexSize}`)
+                  .setArray(new Float32Array(value.flat()))
+                  .setBuffer(buffer);
+                primitive.setAttribute(name, attributeAccessor);
+              });
+
+              const mesh = document
+                .createMesh(batch['##name'])
+                .addPrimitive(primitive);
+              lodNode.setMesh(mesh);
+              node.addChild(lodNode);
+            });
+
+            break;
+          }
+
+          default: {
+            if (ERROR_ON_UNKNOWN_COMPONENT) {
+              throw new Error(
+                `Unhandled component type: ${component['comp.typename']}`,
+              );
+            }
+          }
+        }
+      });
+
+      if (hierarchy['#hierarchy']) {
+        parseHierarchies(hierarchy['#hierarchy'], node);
+      }
+
+      parent.addChild(node);
+    });
+  }
+
+  parseHierarchies(sc2['#hierarchy'], scene);
+
+  return document;
+}

packages/website/src/core/blitz/fetchBlitz.ts

@@ -0,0 +1,88 @@
+import { assertSecret } from '@blitzkit/core';
+import { EventManager } from '@blitzkit/core/src/blitzkit/eventManager';
+import { Region } from '../../constants/regions';
+import { patientFetch } from '../blitzkit/patientFetch';
+
+const RETRY_ERRORS = ['REQUEST_LIMIT_EXCEEDED', 'SOURCE_NOT_AVAILABLE'];
+
+export const retryAbleBlitzFetchEvent = new EventManager();
+export const blitzFetchQueueAvailableEvent = new EventManager();
+
+type BlitzResponse<Data extends object> =
+  | {
+      status: 'error';
+      error: { field: string; message: string; code: 402; value: null };
+    }
+  | {
+      status: 'ok';
+      data: Data;
+    };
+
+const MAX_CALLS_PER_SECOND = 10;
+
+const queue: { url: string; resolve: (data: object) => void }[] = [];
+let inProgress = 0;
+
+function decrement() {
+  inProgress--;
+  blitzFetchQueueAvailableEvent.emit(undefined);
+  manageQueue();
+}
+
+async function manageQueue() {
+  if (queue.length > 0 && inProgress < MAX_CALLS_PER_SECOND) {
+    inProgress++;
+
+    const timeout = setTimeout(decrement, 1000);
+    const request = queue.shift()!;
+    const data = (await patientFetch(request.url)
+      .then((response) => response.json())
+      .catch((error) => ({ status: 'error', error }))) as BlitzResponse<
+      typeof request.resolve
+    >;
+
+    if (data.status === 'ok') {
+      request.resolve(data.data);
+    } else {
+      if (RETRY_ERRORS.includes(data.error.message)) {
+        retryAbleBlitzFetchEvent.emit(undefined);
+        clearTimeout(timeout);
+        setTimeout(() => {
+          queue.push(request);
+          decrement();
+        }, 1000 / MAX_CALLS_PER_SECOND);
+      } else {
+        clearTimeout(timeout);
+        decrement();
+
+        throw new Error(`Wargaming response error status: "${data.status}"`, {
+          cause: `Message: "${data.error.message}"\nURL: "${request.url}"`,
+        });
+      }
+    }
+  }
+}
+
+export type FetchBlitzParams = Record<string, string | number | undefined>;
+
+export default function fetchBlitz<Data extends object>(
+  region: Region,
+  path: string,
+  params: FetchBlitzParams = {},
+) {
+  return new Promise<Data>((resolve) => {
+    queue.push({
+      url: `https://api.wotblitz.${region}/wotb/${path}/?${Object.entries({
+        application_id: assertSecret(process.env.WARGAMING_APPLICATION_ID),
+        ...params,
+      })
+        .filter(([_, value]) => value !== undefined)
+        .map(([key, value]) => `${key}=${encodeURIComponent(value!)}`)
+        .join('&')}`,
+      resolve(data) {
+        resolve(data as Data);
+      },
+    });
+    manageQueue();
+  });
+}

packages/website/src/core/blitz/generateStats.ts

@@ -0,0 +1,58 @@
+import calculateWN8 from '../statistics/calculateWN8';
+import { BlitzStats } from '../statistics/compositeStats/constants';
+
+export type Stat = keyof ReturnType<typeof generateStats>;
+
+export const STAT_NAMES: Record<Stat, string> = {
+  battles: 'Battles',
+  winrate: 'Winrate',
+  wn8: 'WN8',
+  averageDamage: 'Damage',
+  damage: 'Accumulated damage',
+  wins: 'Wins',
+};
+
+export const STAT_KEYS = Object.keys(STAT_NAMES) as Stat[];
+
+export function generateStats(s: BlitzStats, e?: BlitzStats) {
+  return {
+    battles: s.battles,
+    wins: s.wins,
+    winrate: s.wins / s.battles,
+    wn8: e ? calculateWN8(e, s) : null,
+    damage: s.damage_dealt,
+    averageDamage: s.damage_dealt / s.battles,
+  };
+}
+
+export function prettifyStats(s: ReturnType<typeof generateStats>) {
+  return {
+    battles: `${s.battles}`,
+    wins: `${s.wins}`,
+    winrate: `${(s.winrate * 100).toFixed(0)}%`,
+    wn8: s.wn8 ? s.wn8.toFixed(0) : '--',
+    damage: `${s.damage}`,
+    averageDamage: s.averageDamage.toFixed(0),
+  } satisfies Record<Stat, string>;
+}
+
+export function sumStats(s: ReturnType<typeof generateStats>[]) {
+  function sum(slice: (stat: ReturnType<typeof generateStats>) => number) {
+    return s.reduce((a, b) => a + slice(b), 0);
+  }
+
+  const battles = sum((s) => s.battles);
+  const wins = sum((s) => s.wins);
+  const damage = sum((s) => s.damage);
+
+  return {
+    battles,
+    wins,
+    winrate: wins / battles,
+    damage,
+    averageDamage: damage / battles,
+    wn8:
+      sum((s) => (s.wn8 ? s.wn8 * s.battles : 0)) /
+      sum((s) => (s.wn8 ? s.battles : 0)),
+  } satisfies ReturnType<typeof generateStats>;
+}

packages/website/src/core/blitz/getAccountAchievements.ts

@@ -0,0 +1,35 @@
+import { Region } from '../../constants/regions';
+import fetchBlitz from './fetchBlitz';
+import { normalizeIds } from './normalizeIds';
+
+interface IndividualAccountAchievements {
+  achievements: {
+    [achievement: string]: number;
+  };
+  max_series: {
+    [achievement: string]: number;
+  };
+}
+
+export interface AccountAchievements {
+  [id: number]: IndividualAccountAchievements;
+}
+
+export async function getAccountAchievements<
+  Ids extends number | number[],
+  ReturnType = Ids extends number
+    ? IndividualAccountAchievements
+    : IndividualAccountAchievements[],
+>(region: Region, ids: Ids) {
+  const object = await fetchBlitz<AccountAchievements>(
+    region,
+    'account/achievements',
+    { account_id: normalizeIds(ids) },
+  );
+
+  if (typeof ids === 'number') {
+    return object[ids as number] as ReturnType;
+  } else {
+    return ids.map((id) => object[id]) as ReturnType;
+  }
+}

packages/website/src/core/blitz/getAccountInfo.ts

@@ -0,0 +1,96 @@
+import { Region } from '../../constants/regions';
+import { BlitzStats } from '../statistics/compositeStats/constants';
+import fetchBlitz, { FetchBlitzParams } from './fetchBlitz';
+import { normalizeIds } from './normalizeIds';
+
+export interface SupplementaryStats {
+  WN8?: number;
+  tier?: number;
+}
+
+export interface ClanStats {
+  spotted: number;
+  max_frags_tank_id: number;
+  hits: number;
+  frags: number;
+  max_xp: number;
+  max_xp_tank_id: number;
+  wins: number;
+  losses: number;
+  capture_points: number;
+  battles: number;
+  damage_dealt: number;
+  damage_received: number;
+  max_frags: number;
+  shots: number;
+  frags8p: number;
+  xp: number;
+  win_and_survived: number;
+  survived_battles: number;
+  dropped_capture_points: number;
+}
+
+export interface RatingStats {
+  spotted: number;
+  calibration_battles_left: number;
+  hits: number;
+  frags: number;
+  recalibration_start_time: number;
+  mm_rating: number;
+  wins: number;
+  losses: number;
+  is_recalibration: boolean;
+  capture_points: number;
+  battles: number;
+  damage_dealt: number;
+  damage_received: number;
+  shots: number;
+  frags8p: number;
+  xp: number;
+  win_and_survived: number;
+  survived_battles: number;
+  dropped_capture_points: number;
+}
+
+export interface IndividualAccountInfo {
+  account_id: number;
+  created_at: number;
+  updated_at: number;
+  private: null;
+  last_battle_time: number;
+  nickname: string;
+  statistics: {
+    all: BlitzStats;
+    clan: ClanStats;
+    rating?: RatingStats;
+    frags: null | number;
+  };
+}
+
+export interface AccountInfo {
+  [accountId: number]: IndividualAccountInfo;
+}
+
+export async function getAccountInfo<
+  Ids extends number | number[],
+  ReturnType = Ids extends number
+    ? IndividualAccountInfo
+    : IndividualAccountInfo[],
+>(
+  region: Region,
+  ids: Ids,
+  extra: string[] = [],
+  params: FetchBlitzParams = {},
+) {
+  const object = await fetchBlitz<AccountInfo>(region, 'account/info', {
+    account_id: normalizeIds(ids),
+    extra: extra.length === 0 ? undefined : extra.join(','),
+    ...params,
+  });
+
+  if (typeof ids === 'number') {
+    return object[ids as number] as ReturnType;
+  } else {
+    return ids.map((id) => object[id]) as ReturnType;
+  }
+}

packages/website/src/core/blitz/getClanAccountInfo.ts

@@ -0,0 +1,46 @@
+import { Region } from '../../constants/regions';
+import fetchBlitz from './fetchBlitz';
+import { normalizeIds } from './normalizeIds';
+
+type IndividualClanAccountInfo = {
+  account_id: number;
+  joined_at: number;
+  clan_id: number;
+  role: string;
+  account_name: string;
+
+  clan?: {
+    members_count: number;
+    name: string;
+    created_at: number;
+    tag: string;
+    clan_id: number;
+    emblem_set_id: number;
+  };
+} | null;
+
+interface ClanAccountInfo {
+  [accountId: number]: IndividualClanAccountInfo;
+}
+
+export async function getClanAccountInfo<
+  Ids extends number | number[],
+  ReturnType = Ids extends number
+    ? IndividualClanAccountInfo
+    : IndividualClanAccountInfo[],
+>(region: Region, ids: Ids, extra: string[] = []) {
+  const object = await fetchBlitz<ClanAccountInfo>(
+    region,
+    'clans/accountinfo',
+    {
+      account_id: normalizeIds(ids),
+      extra: extra.length === 0 ? undefined : extra.join(','),
+    },
+  );
+
+  if (typeof ids === 'number') {
+    return object[ids as number] as ReturnType;
+  } else {
+    return ids.map((id) => object[id]) as ReturnType;
+  }
+}

packages/website/src/core/blitz/getClanInfo.ts

@@ -0,0 +1,51 @@
+import { Region } from '../../constants/regions';
+import fetchBlitz from './fetchBlitz';
+import { normalizeIds } from './normalizeIds';
+
+interface IndividualClanInfo {
+  recruiting_options: {
+    vehicles_level: number;
+    wins_ratio: number;
+    average_battles_per_day: number;
+    battles: number;
+    average_damage: number;
+  };
+  members_count: number;
+  name: string;
+  creator_name: string;
+  clan_id: number;
+  created_at: number;
+  updated_at: number;
+  leader_name: string;
+  members_ids: number[];
+  recruiting_policy: string;
+  tag: string;
+  is_clan_disbanded: boolean;
+  old_name: string;
+  emblem_set_id: number;
+  creator_id: number;
+  motto: string;
+  renamed_at: number;
+  old_tag: null;
+  leader_id: number;
+  description: string;
+}
+
+interface ClanInfo {
+  [clanId: number]: IndividualClanInfo;
+}
+
+export async function getClanInfo<
+  Ids extends number | number[],
+  ReturnType = Ids extends number ? IndividualClanInfo : IndividualClanInfo[],
+>(region: Region, ids: Ids) {
+  const object = await fetchBlitz<ClanInfo>(region, 'clans/info', {
+    clan_id: normalizeIds(ids),
+  });
+
+  if (typeof ids === 'number') {
+    return object[ids as number] as ReturnType;
+  } else {
+    return ids.map((id) => object[id]) as ReturnType;
+  }
+}

packages/website/src/core/blitz/getLeagueFromScore.ts

@@ -0,0 +1,5 @@
+import { LEAGUES } from '../../constants/leagues';
+
+export function getLeagueFromScore(score: number) {
+  return LEAGUES.find(({ minScore }) => score >= minScore)!;
+}

packages/website/src/core/blitz/getRatingInfo.ts

@@ -0,0 +1,25 @@
+import { RatingInfo } from '../../commands/ratingLeaderboard';
+import { Region } from '../../constants/regions';
+import { context } from '../blitzkit/context';
+import { patientFetch } from '../blitzkit/patientFetch';
+import regionToRegionSubdomain from './regionToRegionSubdomain';
+
+const cache: Partial<Record<Region, RatingInfo>> = {};
+
+export default async function getRatingInfo(region: Region) {
+  if (cache[region]) return cache[region]!;
+
+  const response = await patientFetch(
+    context === 'website'
+      ? `/api/${region}/rating/current/info`
+      : `https://${regionToRegionSubdomain(
+          region,
+        )}.wotblitz.com/en/api/rating-leaderboards/season/`,
+    undefined,
+  );
+  const data = (await response.json()) as RatingInfo;
+
+  cache[region] = data;
+
+  return data;
+}

packages/website/src/core/blitz/getRatingLeague.ts

@@ -0,0 +1,28 @@
+import { LeagueTop, RatingPlayer } from '../../commands/ratingLeaderboard';
+import { Region } from '../../constants/regions';
+import { context } from '../blitzkit/context';
+import { patientFetch } from '../blitzkit/patientFetch';
+import regionToRegionSubdomain from './regionToRegionSubdomain';
+
+export async function getRatingLeague(
+  region: Region,
+  league: number,
+  usePatientFetcher = false,
+) {
+  const fetcher = (url: string) =>
+    usePatientFetcher
+      ? patientFetch(url, undefined, { cache: 'no-store' })
+      : fetch(url, { cache: 'no-store' });
+  const response = await fetcher(
+    context === 'website'
+      ? `/api/${region}/rating/current/league/${league}`
+      : `https://${regionToRegionSubdomain(
+          region,
+        )}.wotblitz.com/en/api/rating-leaderboards/league/${league}/top/`,
+  );
+  const json = await response.json();
+
+  return context === 'website'
+    ? (json as RatingPlayer[])
+    : (json as LeagueTop).result;
+}

packages/website/src/core/blitz/getRatingNeighbors.ts

@@ -0,0 +1,27 @@
+import { RatingNeighbors } from '../../commands/ratingLeaderboard';
+import { Region } from '../../constants/regions';
+import { patientFetch } from '../blitzkit/patientFetch';
+import { withCORSProxy } from '../blitzkit/withCORSProxy';
+import regionToRegionSubdomain from './regionToRegionSubdomain';
+
+export async function getRatingNeighbors(
+  region: Region,
+  id: number,
+  count: number,
+  usePatientFetcher = false,
+) {
+  const fetcher = (url: string) =>
+    usePatientFetcher
+      ? patientFetch(url, undefined, { cache: 'no-store' })
+      : fetch(url, { cache: 'no-store' });
+  const response = await fetcher(
+    withCORSProxy(
+      `https://${regionToRegionSubdomain(
+        region,
+      )}.wotblitz.com/en/api/rating-leaderboards/user/${id}/?neighbors=${count}`,
+    ),
+  );
+  const json = (await response.json()) as RatingNeighbors;
+
+  return json;
+}

packages/website/src/core/blitz/getTankStats.ts

@@ -0,0 +1,16 @@
+import { Region } from '../../constants/regions';
+import { TanksStats } from '../../types/tanksStats';
+import fetchBlitz, { FetchBlitzParams } from './fetchBlitz';
+
+export default async function getTankStats(
+  region: Region,
+  id: number,
+  params?: FetchBlitzParams,
+) {
+  const tankStats = await fetchBlitz<TanksStats>(region, 'tanks/stats', {
+    account_id: id,
+    ...params,
+  });
+
+  return tankStats[id];
+}

packages/website/src/core/blitz/isOnGoingRatingSeason.ts

@@ -0,0 +1,6 @@
+import getRatingInfo from './getRatingInfo';
+
+export async function isOnGoingRatingSeason() {
+  const ratingInfo = await getRatingInfo('com');
+  return ratingInfo.detail === undefined;
+}

packages/website/src/core/blitz/isValidBlitzId.ts

@@ -0,0 +1,32 @@
+import { Region } from '../../constants/regions';
+import { WARGAMING_APPLICATION_ID } from '../../constants/wargamingApplicationID';
+import { idToRegion } from './idToRegion';
+
+export async function isValidBlitzId(id: number, token?: string) {
+  let region: Region;
+
+  try {
+    region = idToRegion(id);
+  } catch (error) {
+    return false;
+  }
+
+  const json = await fetch(
+    `https://api.wotblitz.${region}/wotb/account/info/?account_id=${
+      id
+    }&application_id=${WARGAMING_APPLICATION_ID}${
+      token === undefined ? '' : `&access_token=${token}`
+    }&fields=account_id%2C-account_id`,
+  ).then(
+    (response) =>
+      response.json() as Promise<
+        | {
+            status: 'ok';
+            data: Record<number, {} | null>;
+          }
+        | { status: 'error' }
+      >,
+  );
+
+  return json.status === 'ok' && json.data[id] !== null;
+}

packages/website/src/core/blitz/normalizeExtra.ts

@@ -0,0 +1,3 @@
+export function normalizeExtra(extra?: string[]) {
+  return extra ? `&extra=${extra.join(',')}` : '';
+}

packages/website/src/core/blitz/normalizeIds.ts

@@ -0,0 +1,3 @@
+export function normalizeIds(ids: number | number[]): string {
+  return typeof ids === 'number' ? ids.toString() : ids.join(',');
+}

packages/website/src/core/blitz/normalizeLeagueIcon.ts

@@ -0,0 +1,3 @@
+export function normalizeLeagueIcon(url: string) {
+  return url.startsWith('http') ? url : `https:${url}`;
+}

packages/website/src/core/blitz/readBase64DVPL.ts

@@ -0,0 +1,6 @@
+import { readDVPLFile } from './readDVPLFile';
+
+export async function readBase64DVPL(file: string) {
+  const buffer = await readDVPLFile(file);
+  return buffer.toString('base64');
+}

packages/website/src/core/blitz/readDVPL.ts

@@ -0,0 +1,60 @@
+import { crc32 } from 'crc';
+import { decompressBlock } from 'lz4js';
+
+/**
+ * Thanks Maddoxkkm! Modified heavily to be modern.
+ * https://github.com/Maddoxkkm/dvpl_converter/
+ */
+export function readDVPL(buffer: Buffer) {
+  const footerBuffer = buffer.subarray(buffer.length - 20, buffer.length);
+
+  if (
+    footerBuffer.toString('utf8', 16, 20) !== 'DVPL' ||
+    footerBuffer.length !== 20
+  ) {
+    throw new SyntaxError('Invalid DVPL footer');
+  }
+
+  const footerData = {
+    oSize: footerBuffer.readUInt32LE(0),
+    cSize: footerBuffer.readUInt32LE(4),
+    crc32: footerBuffer.readUInt32LE(8),
+    type: footerBuffer.readUInt32LE(12),
+  };
+  const targetBlock = buffer.subarray(0, buffer.length - 20);
+
+  if (targetBlock.length !== footerData.cSize) {
+    throw new RangeError('DVPL size mismatch');
+  }
+  if (crc32(targetBlock) !== footerData.crc32) {
+    throw new TypeError('DVPL CRC32 mismatch');
+  }
+
+  if (footerData.type === 0) {
+    if (!(footerData.oSize === footerData.cSize && footerData.type === 0)) {
+      throw new RangeError('DVPL type and size mismatch');
+    }
+
+    return targetBlock;
+  } else if (footerData.type === 1 || footerData.type === 2) {
+    const source = new Uint8Array(targetBlock);
+    const destination = new Uint8Array(footerData.oSize);
+    const decompressedSize = decompressBlock(
+      source,
+      destination,
+      0,
+      source.length,
+      0,
+    );
+
+    if (decompressedSize !== footerData.oSize) {
+      throw new RangeError(
+        `Decompressed DVPL size mismatch (${decompressedSize} vs ${footerData.oSize})`,
+      );
+    }
+
+    return Buffer.from(destination);
+  } else {
+    throw new SyntaxError('Unknown DVPL format');
+  }
+}

packages/website/src/core/blitz/readDVPLFile.ts

@@ -0,0 +1,6 @@
+import { readFile } from 'fs/promises';
+import { readDVPL } from './readDVPL';
+
+export async function readDVPLFile(file: string) {
+  return readDVPL(await readFile(file));
+}

packages/website/src/core/blitz/readStringDVPL.ts

@@ -0,0 +1,6 @@
+import { readDVPLFile } from './readDVPLFile';
+
+export async function readStringDVPL(file: string) {
+  const buffer = await readDVPLFile(file);
+  return buffer.toString();
+}

packages/website/src/core/blitz/readXMLDVPL.ts

@@ -0,0 +1,9 @@
+import { XMLParser } from 'fast-xml-parser';
+import { readStringDVPL } from './readStringDVPL';
+
+export async function readXMLDVPL<Type>(file: string) {
+  const parser = new XMLParser();
+  const xml = await readStringDVPL(file);
+
+  return parser.parse(xml) as Type;
+}

packages/website/src/core/blitz/readYAML.ts

@@ -0,0 +1,7 @@
+import { readFile } from 'fs/promises';
+import { parse } from 'yaml';
+
+export async function readYAML<Type>(file: string) {
+  const yaml = (await readFile(file)).toString();
+  return parse(yaml) as Type;
+}

packages/website/src/core/blitz/readYAMLDVPL.ts

@@ -0,0 +1,8 @@
+import { parse } from 'yaml';
+import { readStringDVPL } from './readStringDVPL';
+
+export async function readYAMLDVPL<Type>(file: string) {
+  const yaml = await readStringDVPL(file);
+
+  return parse(yaml) as Type;
+}

packages/website/src/core/blitz/regionSubdomainToRegion.ts

@@ -0,0 +1,7 @@
+import { Region, RegionSubdomain } from '../../constants/regions';
+
+export default function regionSubdomainToRegion(
+  regionDomain: RegionSubdomain,
+): Region {
+  return regionDomain === 'na' ? 'com' : regionDomain;
+}

packages/website/src/core/blitz/regionToRegionSubdomain.ts

@@ -0,0 +1,7 @@
+import { Region, RegionSubdomain } from '../../constants/regions';
+
+export default function regionToRegionSubdomain(
+  regionDomain: Region,
+): RegionSubdomain {
+  return regionDomain === 'com' ? 'na' : regionDomain;
+}

packages/website/src/core/blitz/resolveTankId.ts

@@ -0,0 +1,46 @@
+import { Locale } from 'discord.js';
+import { go } from 'fuzzysort';
+import markdownEscape from 'markdown-escape';
+import { UserError } from '../../hooks/userError';
+import { tankDefinitions } from '../blitzkit/tankDefinitions';
+import { tankNames } from '../blitzkit/tankDefinitions/tankNames';
+import { tankNamesTechTreeOnly } from '../discord/autocompleteTanks';
+import { translator } from '../localization/translator';
+
+export default async function resolveTankId(
+  tank: string | number,
+  locale: Locale,
+  techTreeOnly = false,
+) {
+  const { translate } = translator(locale);
+  const number = typeof tank === 'string' ? Number(tank) : tank;
+
+  if (Number.isNaN(number)) {
+    const searchResult = go(
+      `${tank}`,
+      await (techTreeOnly ? tankNamesTechTreeOnly : tankNames),
+      {
+        keys: ['searchableName', 'searchableNameDeburr', 'camouflages'],
+        limit: 1,
+      },
+    );
+
+    if (searchResult.length === 0) {
+      throw new UserError(
+        translate('bot.common.errors.tank_name_not_found', [
+          markdownEscape(`${tank}`),
+        ]),
+      );
+    } else {
+      return searchResult[0].obj.id;
+    }
+  } else {
+    if ((await tankDefinitions)[number]) {
+      return number;
+    } else {
+      throw new UserError(
+        translate('bot.common.errors.tank_id_not_found', [`${number}`]),
+      );
+    }
+  }
+}

packages/website/src/core/blitz/rotateDavaVector.ts

@@ -0,0 +1,6 @@
+import { I_HAT } from '@blitzkit/core/src/math/axis';
+import { Vector3 } from 'three';
+
+export function rotateDavaVector(vector: Vector3) {
+  return vector.applyAxisAngle(I_HAT, Math.PI / 2);
+}

packages/website/src/core/blitz/searchClansAcrossRegions.ts

@@ -0,0 +1,54 @@
+import { Region } from '../../constants/regions';
+import { ClanList } from '../../types/clanList';
+import fetchBlitz from './fetchBlitz';
+
+export default async function searchClansAcrossRegions(
+  search: string,
+  limit = 25,
+) {
+  const trimmed = search.trim();
+  if (trimmed.length < 3 && trimmed.length > 100) return [];
+  const normalizedLimit = Math.floor(limit / 3);
+
+  // TODO: remove splice once wargaming fixes the functionality of the limit felid
+
+  return (
+    await Promise.all([
+      fetchBlitz<ClanList>('com', 'clans/list', {
+        search,
+        limit: normalizedLimit,
+      }).then((value) =>
+        value
+          .map((account) => ({
+            ...account,
+            region: 'com' as Region,
+          }))
+          .splice(0, normalizedLimit),
+      ),
+      fetchBlitz<ClanList>('eu', 'clans/list', {
+        search,
+        limit: normalizedLimit,
+      }).then((value) =>
+        value
+          .map((account) => ({
+            ...account,
+            region: 'eu' as Region,
+          }))
+          .splice(0, normalizedLimit),
+      ),
+      fetchBlitz<ClanList>('asia', 'clans/list', {
+        search,
+        limit: normalizedLimit,
+      }).then((value) =>
+        value
+          .map((account) => ({
+            ...account,
+            region: 'asia' as Region,
+          }))
+          .splice(0, normalizedLimit),
+      ),
+    ])
+  )
+    .filter(Boolean)
+    .flat();
+}

packages/website/src/core/blitz/searchCurrentRatingPlayers.ts

@@ -0,0 +1,40 @@
+import { Region } from '../../constants/regions';
+import { context } from '../blitzkit/context';
+import regionToRegionSubdomain from './regionToRegionSubdomain';
+
+type CurrentRatingPlayerSearch = Record<
+  number,
+  {
+    spa_id: number;
+    nickname: string;
+    clan_tag: string;
+  } & (
+    | {
+        skip: true;
+      }
+    | {
+        skip: false;
+        mmr: number;
+        season_number: number;
+        calibrationBattlesLeft: number;
+        number: number;
+        updated_at: string;
+        neighbors: [];
+      }
+  )
+>;
+
+export async function searchCurrentRatingPlayers(region: Region, name: string) {
+  const encodedSearch = encodeURIComponent(name);
+  const response = await fetch(
+    context === 'website'
+      ? `/api/${region}/rating/current/search/${encodedSearch}`
+      : `https://${regionToRegionSubdomain(
+          region,
+        )}.wotblitz.com/en/api/rating-leaderboards/search/?prefix=${encodedSearch}`,
+    { cache: 'no-store' },
+  );
+  const accountList = (await response.json()) as CurrentRatingPlayerSearch;
+
+  return accountList;
+}

packages/website/src/core/blitz/searchPlayersAcrossRegions/constants.ts

@@ -0,0 +1,2 @@
+export const usernamePattern = /^[a-zA-Z0-9_]{3,24}$/;
+export const usernamePatternWithoutPosition = /[a-zA-Z0-9_]{3,24}/;

packages/website/src/core/blitz/searchPlayersAcrossRegions/index.ts

@@ -0,0 +1,64 @@
+import { Region } from '../../../constants/regions';
+import fetchBlitz from '../fetchBlitz';
+import { usernamePattern } from './constants';
+
+export interface AccountListItem {
+  nickname: string;
+  account_id: number;
+}
+export type AccountList = AccountListItem[];
+export type AccountListWithServer = (AccountListItem & {
+  region: Region;
+})[];
+
+export default async function searchPlayersAcrossRegions(
+  search: string,
+  limit = 25,
+) {
+  const trimmedSearch = search.trim();
+  const normalizedLimit = Math.floor(limit / 3);
+
+  if (usernamePattern.test(trimmedSearch)) {
+    return (
+      await Promise.all([
+        fetchBlitz<AccountList>('com', 'account/list', {
+          search,
+          limit: normalizedLimit,
+        }).then(
+          (value) =>
+            value &&
+            value.map((account) => ({
+              ...account,
+              region: 'com' as Region,
+            })),
+        ),
+        fetchBlitz<AccountList>('eu', 'account/list', {
+          search,
+          limit: normalizedLimit,
+        }).then(
+          (value) =>
+            value &&
+            value.map((account) => ({
+              ...account,
+              region: 'eu' as Region,
+            })),
+        ),
+        fetchBlitz<AccountList>('asia', 'account/list', {
+          search,
+          limit: normalizedLimit,
+        }).then(
+          (value) =>
+            value &&
+            value.map((account) => ({
+              ...account,
+              region: 'asia' as Region,
+            })),
+        ),
+      ])
+    )
+      .filter(Boolean)
+      .flat() as AccountListWithServer;
+  } else {
+    return [] as AccountListWithServer;
+  }
+}