Merge branch 'main' into data-driven

packages/core/src/blitzkit/api/server/0_base.ts

@@ -253,6 +253,27 @@ export abstract class ServerBlitzKitAPI0 extends AbstractBlitzKitAPI {
     return this;
   }
 
+  protected getTankFilterIds(
+    name: string,
+    definitionKey: string,
+    filter: "include" | "exclude",
+  ) {
+    const keys = name.trim().split(/\s+/).filter(Boolean);
+
+    return keys.flatMap((key) => {
+      const id = this.tankStringIdMap[key];
+
+      if (id === undefined) {
+        console.warn(
+          `Skipping unavailable tank "${key}" in ${filter} vehicle filter for "${definitionKey}"`,
+        );
+        return [];
+      }
+
+      return [id];
+    });
+  }
+
   protected getString(name: string) {
     const collection: Record<string, string> = {
       [locales.default]: this.stringsI18n[locales.default][name],
@@ -271,6 +292,8 @@ export abstract class ServerBlitzKitAPI0 extends AbstractBlitzKitAPI {
       collection[locale] = localizedString;
     }
 
+    collection[locales.default] = collection[locales.default] ?? name;
+
     return { locales: collection } satisfies I18nString;
   }
 }

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

@@ -390,7 +390,7 @@ export abstract class ServerBlitzKitAPI1 extends ServerBlitzKitAPI0 {
               : TankType.TANK_TYPE_RESEARCHABLE,
           tier: tank.level,
           class: tankClass,
-          testing: tankTags.includes("testTank"),
+          testing: tankTags.includes("testTank") || tank.level === 11,
           deprecated: tankTags.includes("deprecated"),
           price: tankPrice,
           camouflage_still: tankDefinition.root.invisibility.still,
@@ -598,9 +598,25 @@ export abstract class ServerBlitzKitAPI1 extends ServerBlitzKitAPI0 {
             for (const shellKey in gunListEntry.shots) {
               const gunShellEntry = gunListEntry.shots[shellKey];
               const shell = shellList.root[shellKey];
+
+              // Newer client data stores shot properties on the shell rather
+              // than repeating them under every gun's <shots> entry.
+              const speed =
+                typeof gunShellEntry === "string"
+                  ? shell.speed
+                  : gunShellEntry.speed;
+              const maxDistance =
+                typeof gunShellEntry === "string"
+                  ? shell.maxDistance
+                  : gunShellEntry.maxDistance;
+              const piercingPower =
+                typeof gunShellEntry === "string"
+                  ? shell.piercingPower
+                  : gunShellEntry.piercingPower;
+
               const shellId = toUniqueId(nation, shell.id);
               const shellName = this.getString(shell.userString);
-              const penetrationRaw = gunShellEntry.piercingPower
+              const penetrationRaw = piercingPower
                 .split(" ")
                 .filter((penetrationString) => penetrationString !== "")
                 .map(Number);
@@ -610,7 +626,7 @@ export abstract class ServerBlitzKitAPI1 extends ServerBlitzKitAPI0 {
               ].shells.push({
                 id: shellId,
                 name: shellName,
-                velocity: gunShellEntry.speed,
+                velocity: speed,
                 armor_damage: shell.damage.armor,
                 module_damage: shell.damage.devices,
                 caliber: shell.caliber,
@@ -626,7 +642,7 @@ export abstract class ServerBlitzKitAPI1 extends ServerBlitzKitAPI0 {
                   near: penetrationRaw[0],
                   far: penetrationRaw[1],
                 },
-                range: gunShellEntry.maxDistance,
+                range: maxDistance,
               });
             }
 

packages/core/src/blitzkit/api/server/2_camouflages.ts

@@ -1,15 +1,60 @@
 import { CamouflageDefinitions } from "@blitzkit/protos";
+import {
+  Sc2ReadStream,
+  type TankParameters,
+} from "@blitzkit/core";
+import { isEqual, times } from "lodash-es";
 import { Cache } from "./0_base";
 import { ServerBlitzKitAPI1 } from "./1_tanks";
 
 export abstract class ServerBlitzKitAPI2 extends ServerBlitzKitAPI1 {
+  private async skinPresets(vehicle: string) {
+    const [nation, tankKey] = vehicle.split(":");
+    const parameters = await this.vfs.yaml<TankParameters>(
+      `Data/3d/Tanks/Parameters/${nation}/${tankKey}.yaml`,
+    );
+    const sc2 = new Sc2ReadStream(
+      (
+        await this.vfs.file(
+          `Data/3d/${parameters.resourcesPath.blitzModelPath}`,
+        )
+      ).buffer as ArrayBuffer,
+    ).sc2();
+    const presets = new Set<string>();
+
+    for (const node of sc2["#dataNodes"]) {
+      if (typeof node.configCount !== "number") continue;
+
+      times(node.configCount, (index) => node[`configArchive_${index}`])
+        .filter(
+          (archive) =>
+            !isEqual(archive.textures, node.configArchive_0.textures),
+        )
+        .forEach((archive) => presets.add(archive.configName));
+    }
+
+    return presets;
+  }
+
   @Cache()
   async camouflages() {
     const camouflageDefinitions = CamouflageDefinitions.create();
+    const customization = await this.vfs.yaml<
+      Record<string, { Name: string; Path: string }>
+    >("Data/3d/Customization.yaml");
+    const items = new Map(
+      Object.values(customization).map(({ Name, Path }) => [
+        Name,
+        Path.replace("~res:/", "Data/").replace(/\.sc2$/, ""),
+      ]),
+    );
+    const skinPresets = new Map<string, Promise<Set<string>>>();
 
     for (const camoKey in this.camouflagesXml!.root.camouflages) {
       const camo = this.camouflagesXml!.root.camouflages[camoKey];
 
+      if (!(camoKey in this.camouflagesYaml!)) continue;
+
       const yamlEntry = this.camouflagesYaml![camoKey];
       const fullName = yamlEntry.userString
         ? this.getString(yamlEntry.userString)
@@ -20,12 +65,51 @@ export abstract class ServerBlitzKitAPI2 extends ServerBlitzKitAPI1 {
       const resolvedTankName = shortName ?? fullName;
       const resolvedTankNameFull =
         resolvedTankName === fullName ? undefined : fullName;
+      const include = camo.vehicleFilter.include;
+      const vehicle =
+        include && !Array.isArray(include) && "vehicle" in include
+          ? include.vehicle?.name
+          : undefined;
+      let tankId: number | undefined = undefined;
+
+      if (vehicle && vehicle in this.tankStringIdMap) {
+        const resolvedParts = await Promise.all(
+          Object.values(yamlEntry.customEntities ?? {}).map(
+            async ({ item }) => {
+              const path = items.get(item);
+
+              return (
+                path !== undefined &&
+                (await this.vfs.resolve(`${path}.sc2`)) &&
+                (await this.vfs.resolve(`${path}.scg`))
+              );
+            },
+          ),
+        );
+
+        let hasPreset = false;
+
+        if (camo.group === "legendary" && yamlEntry.preset !== undefined) {
+          if (!skinPresets.has(vehicle)) {
+            skinPresets.set(vehicle, this.skinPresets(vehicle));
+          }
+
+          hasPreset = (await skinPresets.get(vehicle)!).has(yamlEntry.preset);
+        }
+
+        if (resolvedParts.some(Boolean) || hasPreset) {
+          tankId = this.tankStringIdMap[vehicle];
+        }
+      }
+
+      const name = this.getString(camo.userString);
 
       camouflageDefinitions.camouflages[camo.id] = {
         id: camo.id,
-        name: this.getString(camo.userString),
+        name,
         tank_name: resolvedTankName,
         tank_name_full: resolvedTankNameFull,
+        tank_id: tankId,
       };
     }
 

packages/core/src/blitzkit/api/server/3_models.ts

@@ -2,15 +2,23 @@ import {
   BlitzCrewType,
   ChassisDefinitionsList,
   GunDefinitionsList,
+  I_HAT,
+  J_HAT,
+  K_HAT,
+  parseHierarchies,
+  Sc2ReadStream,
+  ScgReadStream,
   TankParameters,
   toUniqueId,
   TurretDefinitionsList,
   VehicleDefinitionArmor,
   VehicleDefinitionList,
   VehicleDefinitions,
+  VertexAttribute,
 } from "@blitzkit/core";
 import { Armor, Crew, ModelDefinitions, Vector3 } from "@blitzkit/protos";
-import { Vector3Tuple } from "three";
+import { parse as parsePath } from "path";
+import { MathUtils, Vector3 as THREEVector3, Vector3Tuple } from "three";
 import { Cache } from "./0_base";
 import { ServerBlitzKitAPI2 } from "./2_camouflages";
 
@@ -19,6 +27,81 @@ export abstract class ServerBlitzKitAPI3 extends ServerBlitzKitAPI2 {
     return { x: tuple[0], y: tuple[1], z: -tuple[2] } satisfies Vector3;
   }
 
+  private async collisionBoundingBoxes(
+    nation: string,
+    tankKey: string,
+    turretRotation?: { yaw: number; pitch: number; roll: number },
+  ) {
+    const boundingBoxes: Record<
+      string,
+      { min: Vector3Tuple; max: Vector3Tuple }
+    > = {};
+    const path = `Data/3d/Tanks/CollisionMeshes/${nation}-${tankKey}`;
+
+    if (!(await this.vfs.resolve(`${path}.sc2`))) {
+      throw new Error(`Missing collision mesh for ${nation}-${tankKey}`);
+    }
+
+    const sc2 = new Sc2ReadStream(
+      (await this.vfs.file(`${path}.sc2`)).buffer as ArrayBuffer,
+    ).sc2();
+    const scg = new ScgReadStream(
+      (await this.vfs.file(`${path}.scg`)).buffer as ArrayBuffer,
+    ).scg();
+
+    parseHierarchies(sc2["#hierarchy"], null, (hierarchy, components) => {
+      for (const component of components) {
+        if (component["comp.typename"] !== "RenderComponent") continue;
+
+        const polygonGroup = scg.get(
+          component["rc.renderObj"]["ro.batches"]["0000"]["rb.datasource"],
+        );
+
+        if (!polygonGroup) continue;
+
+        const min: Vector3Tuple = [Infinity, Infinity, Infinity];
+        const max: Vector3Tuple = [-Infinity, -Infinity, -Infinity];
+        const rotate =
+          turretRotation && hierarchy.name.toLowerCase().startsWith("turret");
+
+        polygonGroup.vertices.forEach((vertex) => {
+          vertex.forEach(({ attribute, value }) => {
+            if (attribute !== VertexAttribute.VERTEX) return;
+
+            const position = new THREEVector3(...value);
+
+            if (rotate) {
+              position
+                .applyAxisAngle(
+                  I_HAT,
+                  -MathUtils.degToRad(turretRotation.pitch),
+                )
+                .applyAxisAngle(J_HAT, -MathUtils.degToRad(turretRotation.roll))
+                .applyAxisAngle(K_HAT, -MathUtils.degToRad(turretRotation.yaw));
+            }
+
+            const coordinates = position.toArray();
+
+            for (let axis = 0; axis < 3; axis++) {
+              min[axis] = Math.min(min[axis], coordinates[axis]);
+              max[axis] = Math.max(max[axis], coordinates[axis]);
+            }
+          });
+        });
+
+        boundingBoxes[hierarchy.name.toLowerCase()] = { min, max };
+      }
+
+      return null;
+    });
+
+    if (!boundingBoxes.hull) {
+      throw new Error(`Missing hull collision mesh for ${nation}-${tankKey}`);
+    }
+
+    return boundingBoxes;
+  }
+
   private assignArmor(
     raw: VehicleDefinitionArmor[string],
     id: number,
@@ -63,6 +146,12 @@ export abstract class ServerBlitzKitAPI3 extends ServerBlitzKitAPI2 {
         const tankParameters = await this.vfs.yaml<TankParameters>(
           `Data/3d/Tanks/Parameters/${nation}/${tankKey}.yaml`,
         );
+        const collisionBoundingBoxes = await this.collisionBoundingBoxes(
+          nation,
+          tankKey,
+          tankDefinition.root.hull.turretInitialRotation,
+        );
+        const hullBoundingBox = collisionBoundingBoxes.hull;
         const turretOrigin = tankDefinition.root.hull.turretPositions.turret
           .split(" ")
           .map(Number) as Vector3Tuple;
@@ -137,12 +226,8 @@ export abstract class ServerBlitzKitAPI3 extends ServerBlitzKitAPI2 {
               }
             : undefined,
           bounding_box: {
-            min: this.vector3TupleToBlitzkit(
-              tankParameters.collision.hull.bbox.min,
-            ),
-            max: this.vector3TupleToBlitzkit(
-              tankParameters.collision.hull.bbox.max,
-            ),
+            min: this.vector3TupleToBlitzkit(hullBoundingBox.min),
+            max: this.vector3TupleToBlitzkit(hullBoundingBox.max),
           },
           turrets: {},
           tracks: {},
@@ -204,30 +289,35 @@ export abstract class ServerBlitzKitAPI3 extends ServerBlitzKitAPI2 {
 
           turret.userString;
 
+          const turretCollisionName = parsePath(
+            turret.hitTester.collisionModel,
+          ).name.toLowerCase();
+          const isFullYaw = -turretYaw[0] + turretYaw[1] === 360;
+
+          if (!collisionBoundingBoxes[turretCollisionName] && isFullYaw) {
+            throw new Error(
+              `Missing turret collision mesh for ${nation}-${tankKey} ${turretKey}`,
+            );
+          }
+
+          const turretBoundingBox = collisionBoundingBoxes[
+            turretCollisionName
+          ] ?? {
+            min: [0, 0, 0] as Vector3Tuple,
+            max: [0, 0, 0] as Vector3Tuple,
+          };
+
           modelDefinitions.models[tankId].turrets[turretId] = {
             armor: turretArmor,
             gun_origin: this.vector3TupleToBlitzkit(gunOrigin),
             model_id: turretModel,
-            yaw:
-              -turretYaw[0] + turretYaw[1] === 360
-                ? undefined
-                : { min: turretYaw[0], max: turretYaw[1] },
+            yaw: isFullYaw
+              ? undefined
+              : { min: turretYaw[0], max: turretYaw[1] },
             guns: {},
             bounding_box: {
-              min: this.vector3TupleToBlitzkit(
-                tankParameters.collision[
-                  this.parsePath!(
-                    turret.hitTester.collisionModel,
-                  ).name.toLowerCase()
-                ].bbox.min,
-              ),
-              max: this.vector3TupleToBlitzkit(
-                tankParameters.collision[
-                  this.parsePath!(
-                    turret.hitTester.collisionModel,
-                  ).name.toLowerCase()
-                ].bbox.max,
-              ),
+              min: this.vector3TupleToBlitzkit(turretBoundingBox.min),
+              max: this.vector3TupleToBlitzkit(turretBoundingBox.max),
             },
           };
 

packages/core/src/blitzkit/api/server/6_consumables.ts

@@ -39,9 +39,7 @@ export abstract class ServerBlitzKitAPI6 extends ServerBlitzKitAPI5 {
             filter_type: {
               $case: "ids",
               value: {
-                ids: includeRaw.name.split(/ +/).map((key) => {
-                  return this.tankStringIdMap[key];
-                }),
+                ids: this.getTankFilterIds(includeRaw.name, key, "include"),
               },
             },
           });
@@ -67,9 +65,7 @@ export abstract class ServerBlitzKitAPI6 extends ServerBlitzKitAPI5 {
             filter_type: {
               $case: "ids",
               value: {
-                ids: excludeRaw.name.split(/ +/).map((key) => {
-                  return this.tankStringIdMap[key];
-                }),
+                ids: this.getTankFilterIds(excludeRaw.name, key, "exclude"),
               },
             },
           });

packages/core/src/blitzkit/api/server/7_provisions.ts

@@ -8,7 +8,7 @@ export abstract class ServerBlitzKitAPI7 extends ServerBlitzKitAPI6 {
   async provisions() {
     const provisionDefinitions = ProvisionDefinitions.create();
 
-    Object.entries(this.provisionsCommon).forEach(([, provision]) => {
+    Object.entries(this.provisionsCommon).forEach(([key, provision]) => {
       const entry = Provision.create({
         id: provision.id,
         exclude: [],
@@ -39,9 +39,7 @@ export abstract class ServerBlitzKitAPI7 extends ServerBlitzKitAPI6 {
             filter_type: {
               $case: "ids",
               value: {
-                ids: includeRaw.name.split(/ +/).map((key) => {
-                  return this.tankStringIdMap[key];
-                }),
+                ids: this.getTankFilterIds(includeRaw.name, key, "include"),
               },
             },
           });
@@ -67,9 +65,7 @@ export abstract class ServerBlitzKitAPI7 extends ServerBlitzKitAPI6 {
             filter_type: {
               $case: "ids",
               value: {
-                ids: excludeRaw.name
-                  .split(/ +/)
-                  .map((key) => this.tankStringIdMap[key]),
+                ids: this.getTankFilterIds(excludeRaw.name, key, "exclude"),
               },
             },
           });

packages/core/src/blitzkit/index.ts

@@ -26,6 +26,7 @@ export * from "./staticAsset";
 export * from "./sum";
 export * from "./tankDefinitions";
 export * from "./tankEnvironment";
+export * from "./tankBoundingBox";
 export * from "./tankIcon";
 export * from "./tankNames";
 export * from "./unionBoundingBox";

packages/core/src/blitzkit/tankBoundingBox.ts

@@ -0,0 +1,32 @@
+import { ModelDefinition, TurretModelDefinition } from "../protos";
+import { unionBoundingBox } from "./unionBoundingBox";
+
+export function tankBoundingBox(
+  tankModelDefinition: ModelDefinition,
+  turretModelDefinition: TurretModelDefinition,
+) {
+  const hull = tankModelDefinition.bounding_box!;
+  const turret = turretModelDefinition.bounding_box!;
+  const origin = tankModelDefinition.turret_origin!;
+
+  if (
+    turret.min!.x === turret.max!.x &&
+    turret.min!.y === turret.max!.y &&
+    turret.min!.z === turret.max!.z
+  ) {
+    return unionBoundingBox(hull, hull);
+  }
+
+  return unionBoundingBox(hull, {
+    min: {
+      x: turret.min!.x + origin.x,
+      y: turret.min!.y + origin.z,
+      z: turret.min!.z + origin.y,
+    },
+    max: {
+      x: turret.max!.x + origin.x,
+      y: turret.max!.y + origin.z,
+      z: turret.max!.z + origin.y,
+    },
+  });
+}

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

@@ -1,4 +1,4 @@
-import { CrewType, ShellType, TankClass, TankType } from "@blitzkit/protos";
+import { CrewType, ShellType } from "@blitzkit/protos";
 import { times } from "lodash-es";
 
 export const SHELL_NAMES: Record<ShellType, string> = {
@@ -15,33 +15,6 @@ export const CREW_MEMBER_NAMES = {
   [CrewType.CREW_TYPE_RADIOMAN]: "radioman",
 } as const;
 
-/**
- * @deprecated use svg
- */
-export const TANK_ICONS: Record<TankClass, string> = {
-  [TankClass.TANK_CLASS_TANK_DESTROYER]: "https://i.imgur.com/BIHSEH0.png",
-  [TankClass.TANK_CLASS_LIGHT]: "https://i.imgur.com/CSNha5V.png",
-  [TankClass.TANK_CLASS_MEDIUM]: "https://i.imgur.com/wvf3ltm.png",
-  [TankClass.TANK_CLASS_HEAVY]: "https://i.imgur.com/ECeqlZa.png",
-};
-/**
- * @deprecated use svg
- */
-export const TANK_ICONS_PREMIUM: Record<TankClass, string> = {
-  [TankClass.TANK_CLASS_TANK_DESTROYER]: "https://i.imgur.com/TCu3EdR.png",
-  [TankClass.TANK_CLASS_LIGHT]: "https://i.imgur.com/zdkpTRb.png",
-  [TankClass.TANK_CLASS_MEDIUM]: "https://i.imgur.com/3z7eHX6.png",
-  [TankClass.TANK_CLASS_HEAVY]: "https://i.imgur.com/P3vbmyA.png",
-};
-/**
- * @deprecated use svg
- */
-export const TANK_ICONS_COLLECTOR: Record<TankClass, string> = {
-  [TankClass.TANK_CLASS_TANK_DESTROYER]: "https://i.imgur.com/WTjeirB.png",
-  [TankClass.TANK_CLASS_LIGHT]: "https://i.imgur.com/EwhtKkU.png",
-  [TankClass.TANK_CLASS_MEDIUM]: "https://i.imgur.com/u8YDMBh.png",
-  [TankClass.TANK_CLASS_HEAVY]: "https://i.imgur.com/8xRf3nc.png",
-};
 export const TIERS = times(10, (index) => index + 1);
 
 export const flags: Record<string, string> = {
@@ -55,8 +28,3 @@ export const flags: Record<string, string> = {
   european: "🇪🇺",
   other: "<:other:1218421572243558482>",
 };
-export const TREE_TYPE_ICONS: Record<TankType, Record<TankClass, string>> = {
-  [TankType.TANK_TYPE_RESEARCHABLE]: TANK_ICONS,
-  [TankType.TANK_TYPE_PREMIUM]: TANK_ICONS_PREMIUM,
-  [TankType.TANK_TYPE_COLLECTOR]: TANK_ICONS_COLLECTOR,
-};

packages/core/src/imgur/imgur.ts

@@ -1,50 +0,0 @@
-export enum ImgurSize {
-  /**
-   * The default size
-   */
-  Default = '',
-  /**
-   * Unknown size but really really small
-   */
-  UltraSmall = 'ss',
-  /**
-   * 90x90
-   */
-  SmallSquare = 's',
-  /**
-   * 160x160
-   */
-  BigSquare = 'b',
-  /**
-   * 160x160
-   */
-  SmallThumbnail = 't',
-  /**
-   * 320x320
-   */
-  MediumThumbnail = 'm',
-  /**
-   * 640x640
-   */
-  LargeThumbnail = 'l',
-  /**
-   * 1024x1024
-   */
-  HugeThumbnail = 'h',
-}
-
-interface ImgurOptions {
-  format: 'jpeg' | 'png';
-  size: ImgurSize;
-}
-
-const defaultImgurOptions: ImgurOptions = {
-  format: 'png',
-  size: ImgurSize.Default,
-};
-
-export function imgur(id: string, imgurOptions?: Partial<ImgurOptions>) {
-  const options = { ...defaultImgurOptions, ...imgurOptions };
-
-  return `https://i.imgur.com/${id}${options.size}.${options.format}`;
-}

packages/core/src/imgur/index.ts

@@ -1 +0,0 @@
-export * from './imgur';

packages/core/src/index.ts

@@ -1,8 +1,6 @@
 export * from "./api";
 export * from "./blitz";
 export * from "./blitzkit";
-export * from "./config";
-export * from "./imgur";
 export * from "./math";
 export * from "./patreon";
 export * from "./statistics";

packages/core/src/streams/pvr.ts

@@ -88,6 +88,7 @@ enum PvrChannelType {
 
 enum ResolvedBitRatePixelFormat {
   R4G4B4A4,
+  R8G8B8A8,
   R5G6B5A0,
 }
 
@@ -137,6 +138,27 @@ export class PvrReadStream extends ReadStream {
           };
         }
 
+        case ResolvedBitRatePixelFormat.R8G8B8A8: {
+          const data = Buffer.alloc(pixelCount * 4);
+
+          times(pixelCount, (index) => {
+            const buffer = this.consumeUint8Array(4);
+            const bufferIndex = index * 4;
+
+            data[bufferIndex] = buffer[0]; // R
+            data[bufferIndex + 1] = buffer[1]; // G
+            data[bufferIndex + 2] = buffer[2]; // B
+            data[bufferIndex + 3] = buffer[3]; // A
+          });
+
+          return {
+            data,
+            width: header.width,
+            height: header.height,
+            channels: 4 as const,
+          };
+        }
+
         case ResolvedBitRatePixelFormat.R5G6B5A0: {
           const data = Buffer.alloc(pixelCount * 3);
 
@@ -208,10 +230,13 @@ export class PvrReadStream extends ReadStream {
     if (pixelFormat.order === "rgba") {
       if (isEqual(pixelFormat.bitRates, [4, 4, 4, 4])) {
         return ResolvedBitRatePixelFormat.R4G4B4A4;
-      } else
+      } else if (isEqual(pixelFormat.bitRates, [8, 8, 8, 8])) {
+        return ResolvedBitRatePixelFormat.R8G8B8A8;
+      } else {
         throw new TypeError(
           `Unhandled rgba bit rate ${pixelFormat.bitRates.join(", ")}`,
         );
+      }
     } else if (pixelFormat.order === "rgb\0") {
       if (isEqual(pixelFormat.bitRates, [5, 6, 5, 0])) {
         return ResolvedBitRatePixelFormat.R5G6B5A0;

packages/core/src/streams/sc2.ts

@@ -90,6 +90,28 @@ export interface Hierarchy {
   name: string;
 }
 
+export function parseHierarchies<Parent>(
+  hierarchies: Hierarchy[],
+  parent: Parent,
+  parseHierarchy: (
+    hierarchy: Hierarchy,
+    components: Component[],
+    parent: Parent,
+  ) => Parent | undefined,
+) {
+  for (const hierarchy of hierarchies) {
+    const components = Array.from(
+      { length: hierarchy.components.count },
+      (_, index) => hierarchy.components[index.toString().padStart(4, "0")],
+    );
+    const child = parseHierarchy(hierarchy, components, parent);
+
+    if (child !== undefined && hierarchy["#hierarchy"]) {
+      parseHierarchies(hierarchy["#hierarchy"], child, parseHierarchy);
+    }
+  }
+}
+
 // 0001, 0002, 0003...: Component
 type Components = {
   count: number;

packages/core/src/types/camouflagesYaml.ts

@@ -3,5 +3,7 @@ export type CamouflagesYaml = Record<
   {
     userString?: string;
     shortUserString?: string;
+    preset?: string;
+    customEntities?: Record<string, { item: string }>;
   }
 >;

packages/core/src/types/gunDefinitionsList.ts

@@ -20,11 +20,13 @@ export interface GunDefinitionsList {
       burst?: { count: number; rate: number };
       clip?: { count: number; rate: number };
       shots: {
-        [key: string]: {
-          speed: number;
-          piercingPower: string;
-          maxDistance: number;
-        };
+        [key: string]:
+          | ""
+          | {
+              speed: number;
+              piercingPower: string;
+              maxDistance: number;
+            };
       };
     };
   };

packages/core/src/types/shellDefinitionsList.ts

@@ -10,6 +10,9 @@ export type ShellDefinitionsList = Record<
     normalizationAngle?: number;
     ricochetAngle?: number;
     explosionRadius?: number;
+    speed: number;
+    maxDistance?: number;
+    piercingPower: string;
   }
 > & {
   icons: Record<string, string>;

packages/i18n/strings/en.json

@@ -275,7 +275,7 @@
 
     "branches": {
       "beta": "Beta",
-      "development": "Development",
+      "development": "Post Malone Edition",
       "opentest": "OpenTest",
       "preview": "Preview",
       "production": "Production"
@@ -532,11 +532,10 @@
 
     "footer": {
       "motto": "Everything World of Tanks Blitz",
-      "copyright": "Unaffiliated with Wargaming or any service",
+      "association": "An Open Collective Project",
 
       "about": {
         "title": "About",
-        "credits": "Credits",
         "discord": "Discord",
         "github": "GitHub",
         "patches": "Patches"

packages/i18n/strings/pl.json

@@ -220,190 +220,190 @@
         "clear": "Clear",
         "tier": "Tier {tier}",
         "passive": "{name} (Passive)",
-        "active": "{name} (Active)",
+        "active": "{name} (Aktywne)",
         "no_tanks_found": {
-          "body": "No tanks found.",
+          "body": "Nie znaleziono czołgu.",
           "search_again": "",
           "clear_filters": "Try clearing filters."
         },
         "sort": {
-          "meta.none": "none",
-          "survivability.health": "health",
-          "survivability.viewRange": "view range",
-          "survivability.camouflageStill": "camouflage still",
-          "survivability.camouflageMoving": "camouflage moving",
-          "survivability.camouflageShooting": "camouflage shooting",
-          "survivability.volume": "volume",
-          "survivability.length": "length",
-          "fire.dpm": "standard DPM",
-          "fire.dpmPremium": "premium DPM",
-          "fire.reload": "reload",
-          "fire.caliber": "caliber",
-          "fire.standardPenetration": "standard penetration",
-          "fire.premiumPenetration": "premium penetration",
+          "meta.none": "brak",
+          "survivability.health": "punkty.życia",
+          "survivability.viewRange": "zasięg widzenia",
+          "survivability.camouflageStill": "kamuflaż w bezruchu",
+          "survivability.camouflageMoving": "kamuflaż w trakcie ruchu",
+          "survivability.camouflageShooting": "kamuflaż podczas strzału",
+          "survivability.volume": "wartość",
+          "survivability.length": "długość",
+          "fire.dpm": "DPM pocisków podstawowych",
+          "fire.dpmPremium": "DPM pocisków premium",
+          "fire.reload": "przeładowanie",
+          "fire.caliber": "kaliber",
+          "fire.standardPenetration": "Penetracja pocisków standardowych",
+          "fire.premiumPenetration": "Penetracja pocisków premium",
           "fire.tertiaryPenetration": "tertiary penetration",
-          "fire.damage": "damage",
-          "fire.moduleDamage": "module damage",
-          "fire.shellVelocity": "shell velocity",
-          "fire.shellRange": "shell range",
-          "fire.shellCapacity": "shell capacity",
-          "fire.aimTime": "aim time",
+          "fire.damage": "uszkodzenia",
+          "fire.moduleDamage": "Uszkodzenia modułów",
+          "fire.shellVelocity": "Prędkość pocisku",
+          "fire.shellRange": "Zasięg pocisku",
+          "fire.shellCapacity": "Maksymalna ilość pocisków",
+          "fire.aimTime": "Czas celowania",
           "fire.dispersionStill": "dispersion still",
           "fire.dispersionMoving": "dispersion moving",
-          "fire.gunDepression": "gun depression",
-          "fire.gunElevation": "gun elevation",
-          "maneuverability.forwardsSpeed": "forwards speed",
-          "maneuverability.backwardsSpeed": "backwards speed",
-          "maneuverability.power": "power",
-          "maneuverability.powerToWeight": "power to weight",
-          "maneuverability.weight": "weight",
+          "fire.gunDepression": "Depresja działa",
+          "fire.gunElevation": "Elewacja działa",
+          "maneuverability.forwardsSpeed": "Maksymalna prędkość do przodu",
+          "maneuverability.backwardsSpeed": "Maksymalna prędkość do tyłu",
+          "maneuverability.power": "Moc silnika",
+          "maneuverability.powerToWeight": "Proporcja mocy do masy",
+          "maneuverability.weight": "Masa czołgu",
           "maneuverability.traverseSpeed": "traverse speed"
         },
         "sort_dropdown": {
-          "label": "Sort",
+          "label": "Filtruj",
           "groups": {
             "sort": {
-              "no_sort": "No sort",
-              "label": "Sort by",
-              "fire": "Fire",
-              "maneuverability": "Maneuverability",
-              "survivability": "Survivability"
+              "no_sort": "Brak filtrów",
+              "label": "Filtruj według",
+              "fire": "Siła ognia",
+              "maneuverability": "Mobilność ",
+              "survivability": "Przetrwanie"
             },
             "direction": {
               "label": "Direction",
-              "ascending": "Ascending",
-              "descending": "Descending"
+              "ascending": "Rosnąco",
+              "descending": "Malejąco"
             }
           }
         }
       },
       "warnings": {
-        "test": "Tanks in testing are subject to change and may not represent the final product."
+        "test": "Wartości statystyk czołgów w fazie testowej mogą ulec zmianie."
       }
     },
     "home": {
       "discord": {
-        "join_short": "Join cool people!",
-        "join_long": "Join super duper cool people!",
+        "join_short": "Dołącz do elity!",
+        "join_long": "Dołącz do topowej elity!",
         "action": "Discord"
       },
       "hero": {
-        "credit": "By {name} ❤️"
+        "credit": "Według {name} ♥️"
       },
       "hot_tanks": {
-        "title": "Popular tanks",
-        "subtitle": "Last {days} days"
+        "title": "Popularne czołgi",
+        "subtitle": "Ostatnie {days} dni"
       },
       "other_projects": {
-        "title": "Other cool projects"
+        "title": "Inne epickie projekty"
       },
-      "help_translate": "Please help translate {name} to {language}!",
-      "seo_description": "Tools for everything World of Tanks Blitz"
+      "help_translate": "Proszę pomóż przetłumaczyć {name} na {language}!",
+      "seo_description": "Narzędzia do wszystkiego World of Tanks Blitz"
     },
     "docs": {
       "patches": {
-        "name": "BlitzKit Changelogs",
-        "seo_description": "Changelogs for BlitzKit Discord bot and website"
+        "name": "Zapisy zmian BlitzKit",
+        "seo_description": "Zapisy zmian BlitzKit: Discord bot i strona internetowa"
       }
     },
     "tools": {
       "playlist": {
-        "reset": "Reset",
-        "shuffle": "Shuffle",
-        "remove": "Remove played",
-        "tracking": "BlitzKit is tracking your battles",
+        "reset": "Resetuj",
+        "shuffle": "Wymieszaj",
+        "remove": "Usuń czołgi, którymi grałem",
+        "tracking": "BlitzKit zapisuje twoje bitwy",
         "sort": {
-          "button": "Sort by",
-          "last_played": "Last played",
-          "least_played": "Least played"
+          "button": "Filtruj według",
+          "last_played": "Ostatnio używane czołgi",
+          "least_played": "Najmniej używane czołgi"
         },
         "table": {
           "index": "#",
-          "never": "Never",
-          "tank": "Tank",
-          "last_played": "Last played",
-          "battles": "Career battles",
+          "never": "Nigdy",
+          "tank": "Czołg",
+          "last_played": "Ostatnio używane czołgi",
+          "battles": "Wszystkie bitwy na koncie",
           "unrecorded": "--",
           "wins": "Zwycięstwa"
         },
         "large_warning": {
-          "title": "That's a lot of tanks!",
-          "description": "Are you sure you want to create a playlist of {count} tanks? That's {time} hours of gameplay at 50% winrate!",
-          "cancel": "Cancel",
-          "proceed": "Proceed"
+          "title": "To jest mnóstwo czołgów!",
+          "description": "Czy na pewno chcesz stworzyć playlistę złożoną z {count} czołgów? To {time} godzin gry przy 50% zwycięstw!",
+          "cancel": "Anuluj",
+          "proceed": "Zatwierdź"
         },
-        "generate": "Generate playlist",
-        "name": "Playlist",
-        "description": "Tank playlist generator",
-        "seo_description": "Don't know what to play in World of Tanks Blitz? Use BlitzKit Playlist to get suggestions!",
-        "button": "Generate",
-        "pool_size": "{count} possible tanks"
+        "generate": "Wygeneruj playlistę",
+        "name": "Playlista",
+        "description": "Generator playlisty czołgów",
+        "seo_description": "Nie wiesz, którym czołgiem grać w World of Tanks Blitz? Użyj funkcji playlisty BlitzKit, i ułóż własną listę czołgów do gry!",
+        "button": "Wygeneruj",
+        "pool_size": "{count} możliwe czołgi"
       },
       "mixer": {
-        "name": "Mixer",
+        "name": "Mikser",
         "button": "Mix and match",
         "description": "Mix tank modules",
         "seo_description": "Mix and match hulls, turrets, and guns of tanks in World of Tanks Blitz",
-        "screenshot": "Screenshot",
-        "randomize": "Randomize"
+        "screenshot": "Zrzut ekranu",
+        "randomize": "Wymieszaj"
       },
       "guess": {
-        "name": "Guess",
+        "name": "Zgadnij",
         "button": "What could it be?",
         "description": "Silhouette mini-game",
         "seo_description": "Play a tank guessing game with a silhouette in World of Tanks Blitz",
         "search": {
-          "placeholder": "Type to guess...",
-          "skip": "Skip",
-          "guess": "Guess",
-          "next": "Next",
+          "placeholder": "Wpisz odpowiedź",
+          "skip": "Pomiń",
+          "guess": "Zgaduję",
+          "next": "Następny",
           "no_results": "Brak wyników"
         },
         "stats": "{correct} / {total} correct, {streak} streak",
         "help": {
-          "title": "Partially reveal tank?",
+          "title": "Odsłonić część czołgu?",
           "description": "Reveals the tank without showing the name. This round will be considered incorrect and break your streak!",
-          "cancel": "Cancel",
-          "reveal": "Reveal"
+          "cancel": "Anuluj",
+          "reveal": "Pokaż"
         },
-        "clear": "Clear",
-        "select_all": "Select all",
-        "tier": "Tier {tier}"
+        "clear": "Wyczyść",
+        "select_all": "Zaznacz wszystko ",
+        "tier": "Poziom czołgu {tier}"
       },
       "tankopedia": {
-        "search": "Search a stat...",
+        "search": "Wyszukaj statystykę...",
         "name": "Tankopedia",
-        "button": "Find tanks",
-        "description": "Blitz tank encyclopedia",
+        "button": "Znajdź czołg",
+        "description": "Encyklopedia czołgów w WoTb",
         "seo_description": "Statistics, armor, and more for all tanks in World of Tanks Blitz",
         "tank_seo_title": "{name} - Tier {tier} {nationality} {class} | {website} Tankopedia | World of Tanks Blitz (WoTB)",
         "tank_seo_description": "{name} armor, statistics, equipment, provisions, and more. {dpm} DPM, {alpha}hp alpha, {penetration}mm penetration, {speed}kph top speed, {health}hp health.",
         "visualizers": {
           "reload": {
-            "skip": "Skip"
+            "skip": "Pomiń"
           },
           "assault": {
             "title": "Assault shells"
           },
           "rotator": {
-            "hull": "Hull",
-            "turret": "Turret",
-            "hard": "Hard",
+            "hull": "Kadłub",
+            "turret": "Wieża",
+            "hard": "Utwardzony",
             "medium": "Średni",
-            "soft": "Soft",
-            "effective": "Effective"
+            "soft": "Miękki",
+            "effective": "Rzeczywisty"
           },
           "ricochet": {
-            "angle": "Angle",
+            "angle": "Kąt",
             "normalization": "Normalization",
-            "effective_angle": "Effective angle",
-            "armor": "Armor",
-            "no_ricochet": "Explosive shells don't ricochet"
+            "effective_angle": "Rzeczywisty kąt nachylenia pancerza",
+            "armor": "Pancerz",
+            "no_ricochet": "Pociski odłamkowe nie rykoszetują."
           },
           "view_range": {
-            "camo": "Camo",
-            "ghost_factory": "Ghost Factory",
-            "dead_rail": "Dead Rail"
+            "camo": "Kamuflaż",
+            "ghost_factory": "Fabryka duchów",
+            "dead_rail": "Martwy tor"
           },
           "flexibility": {
             "yaw": "Yaw",
@@ -656,10 +656,10 @@
           "loader": "Loader"
         },
         "maneuverability": {
-          "title": "Maneuverability"
+          "title": "Mobilność "
         },
         "survivability": {
-          "title": "Survivability"
+          "title": "Przetrwanie"
         }
       },
       "compare": {

packages/i18n/strings/pt.json

@@ -41,7 +41,7 @@
       "development": "Development",
       "opentest": "TesteAberto",
       "preview": "Preview",
-      "production": "Production"
+      "production": "Produção"
     },
     "locales": {
       "en": "Inglês",
@@ -187,11 +187,11 @@
   },
   "website": {
     "redirect": {
-      "title": "301: moved permanently",
+      "title": "301: movido permanentemente",
       "body": "This page has moved. Redirecting..."
     },
     "settings": {
-      "title": "Settings",
+      "title": "Configurações",
       "description": "Change BlitzKit settings",
       "dev_mode": "Modo de desenvolvimento",
       "auto_load_models": "Auto-load models",
@@ -207,9 +207,9 @@
         "copied": "Copiado!"
       },
       "tank_search": {
-        "select_dialog_title": "Search for tanks",
+        "select_dialog_title": "Procura por tanque",
         "swap_dialog_title": "Swap tank",
-        "clear_filters": "Clear filters",
+        "clear_filters": "Limpar filtros",
         "login": "Login to use this",
         "search_bar_hint": "Procurar tanques...",
         "recent": "Visto recentemente",

packages/protos/src/blitzkit/camouflage_definitions.proto

@@ -13,4 +13,5 @@ message Camouflage {
   I18nString          name           = 2;
   optional I18nString tank_name      = 3;
   optional I18nString tank_name_full = 4;
+  optional uint32     tank_id        = 5;
 }

packages/scripts/package.json

@@ -5,7 +5,9 @@
     "discover-ids": "bun src/discoverIds/index.ts",
     "build-protos": "bun src/protos.ts",
     "record-performance": "bun src/recordPerformance/index.ts",
-    "download-client": "bun src/downloadClient/index.ts"
+    "download-client": "bun src/downloadClient/index.ts",
+    "download-smart-dlc": "bun src/downloadSmartDLC/index.ts",
+    "vfs": "bun src/vfs/index.ts"
   },
   "dependencies": {
     "@blitzkit/closed": "workspace:*",

packages/scripts/src/downloadClient/index.ts

@@ -9,6 +9,8 @@ import {
 } from "./constants";
 import { QuickGitHubRelease } from "./types";
 
+const DEPOT_DOWNLOADER_RETRY_TIME = 30_000;
+
 const provider = assertSecret(import.meta.env.CLIENT_PROVIDER);
 const source = assertSecret(import.meta.env.CLIENT_SOURCE);
 const dir = assertSecret(import.meta.env.CLIENT_DIR);
@@ -43,11 +45,27 @@ if (provider === "steam") {
   const username = assertSecret(import.meta.env.STEAM_USERNAME);
   const password = assertSecret(import.meta.env.STEAM_PASSWORD);
 
-  await $`${DEPOT_DOWNLOADER_EXECUTABLE} -os ${
-    platform
-  } -app ${id} -username ${username} -password ${
-    password
-  } -dir ${dir} -max-downloads ${DEPOT_DOWNLOADER_MAX_DOWNLOADS}`;
+  while (true) {
+    const result = await $`${
+      DEPOT_DOWNLOADER_EXECUTABLE
+    } -os ${platform} -app ${id} -username ${
+      username
+    } -password ${password} -dir ${dir} -max-downloads ${
+      DEPOT_DOWNLOADER_MAX_DOWNLOADS
+    }`.nothrow();
+
+    if (result.exitCode === 0) {
+      console.log("Client downloaded successfully!");
+      break;
+    }
+
+    console.error(
+      `DepotDownloader failed (exit ${result.exitCode}). Retrying in ${DEPOT_DOWNLOADER_RETRY_TIME / 1000} seconds...`,
+    );
+    await new Promise((resolve) =>
+      setTimeout(resolve, DEPOT_DOWNLOADER_RETRY_TIME),
+    );
+  }
 } else if (provider === "zip") {
   const url = assertSecret(import.meta.env.CLIENT_SOURCE);
 

packages/scripts/src/downloadSmartDLC/index.ts

@@ -2,9 +2,16 @@ import { dvp } from "@blitzkit/closed";
 import { assertSecret } from "@blitzkit/core";
 import { mkdir, writeFile } from "fs/promises";
 import { parse as parsePath } from "path";
-import ProgressBar from "progress";
 import { parse as parseYaml, stringify as stringifyYaml } from "yaml";
-import { PATCHES_ROOT, vfs } from "./buildAssets/constants";
+import { RegionsPublish } from "../types/regionsPublish";
+import { vfs } from "../vfs/vfs";
+
+const CLIENT_DIR = assertSecret(import.meta.env.CLIENT_DIR);
+
+const regionsPublish = await vfs.yaml<RegionsPublish>(
+  "Data/regions_publish.yaml",
+);
+const [smartDlcUrl] = regionsPublish.Common.smartDlcUrls;
 
 const versionTextFile = await vfs.text(`Data/version.txt`);
 const currentVersion = versionTextFile
@@ -18,9 +25,7 @@ console.log(`Installing patches for ${currentVersion}...`);
 let patchIndex = 1;
 while (true) {
   const response = await fetch(
-    `${assertSecret(
-      import.meta.env.WOTB_DLC_CDN,
-    )}/dlc/s${currentVersion}_${patchIndex}.yaml`,
+    `${smartDlcUrl}/s${currentVersion}_${patchIndex}.yaml`,
   );
 
   console.log(patchIndex, response.status);
@@ -30,51 +35,34 @@ while (true) {
   console.log(`Applying patch ${patchIndex}...`);
 
   const data = parseYaml(await response.text());
-  const dvpm = await fetch(
-    `${assertSecret(import.meta.env.WOTB_DLC_CDN)}/dlc/${data.dx11}`,
-  ).then((response) => response.arrayBuffer());
+  const dvpm = await fetch(`${smartDlcUrl}/${data.dx11}`).then((response) =>
+    response.arrayBuffer(),
+  );
   const dvpd = await fetch(
-    `${assertSecret(import.meta.env.WOTB_DLC_CDN)}/dlc/${data.dx11.replace(
-      ".dvpm",
-      ".dvpd",
-    )}`,
+    `${smartDlcUrl}/${data.dx11.replace(".dvpm", ".dvpd")}`,
   ).then((response) => response.arrayBuffer());
   const files = await dvp(dvpm, dvpd);
-  const bar = new ProgressBar(
-    `Patching ${files.length} files :bar`,
-    files.length,
-  );
 
   for (const { path, data } of files) {
     console.log(`Patching "${path}"...`);
 
     const { dir } = parsePath(path);
 
-    try {
-      await mkdir(`${PATCHES_ROOT}/Data/${dir}`, { recursive: true });
-    } catch (error) {
-      console.warn(`Failed to make directory "${dir}"`);
-    }
+    await mkdir(`${CLIENT_DIR}/Data/${dir}`, { recursive: true });
 
     const buffer = Buffer.from(data);
 
-    await writeFile(`${PATCHES_ROOT}/Data/${path}`, new Uint8Array(buffer));
-
-    bar.tick();
+    await writeFile(`${CLIENT_DIR}/Data/${path}`, new Uint8Array(buffer));
   }
 
   console.log("patches done for patch");
 
   if ("dynamicContentLocalizationsDir" in data) {
     console.log(
-      `${assertSecret(import.meta.env.WOTB_DLC_CDN)}/dlc/${
-        data.dynamicContentLocalizationsDir
-      }/en.yaml`,
+      `${smartDlcUrl}/${data.dynamicContentLocalizationsDir}/en.yaml`,
     );
     const localizationsResponse = await fetch(
-      `${assertSecret(import.meta.env.WOTB_DLC_CDN)}/dlc/${
-        data.dynamicContentLocalizationsDir
-      }/en.yaml`,
+      `${smartDlcUrl}/${data.dynamicContentLocalizationsDir}/en.yaml`,
     );
     console.log("fetched");
     const newStrings = parseYaml(await localizationsResponse.text());
@@ -86,10 +74,10 @@ while (true) {
     const patchedContent = stringifyYaml(patchedStrings);
     console.log("stringified");
 
-    await mkdir(`${PATCHES_ROOT}/Data/Strings`, { recursive: true });
+    await mkdir(`${CLIENT_DIR}/Data/Strings`, { recursive: true });
     console.log("mkdir");
     await writeFile(
-      `${PATCHES_ROOT}/Data/Strings/en.yaml`,
+      `${CLIENT_DIR}/Data/Strings/en.yaml`,
       new Uint8Array(Buffer.from(patchedContent)),
     );
     console.log("file");

packages/scripts/src/types/regionsPublish.ts

@@ -0,0 +1,7 @@
+export interface RegionsPublish {
+  Common: Common;
+}
+
+interface Common {
+  smartDlcUrls: string[];
+}

packages/scripts/src/vfs/index.ts

@@ -0,0 +1,23 @@
+import { vfs } from "./vfs";
+
+const command = Bun.argv[2];
+const path = Bun.argv[3];
+
+if (!path) {
+  console.error("Gimme a path to assess dumb ass");
+  process.exit(1);
+}
+
+if (command === "cat") {
+  const content = await vfs.file(path);
+  await Bun.write(Bun.stdout, content);
+} else if (command === "ls") {
+  const files = await vfs.dir(path);
+
+  for (const file of files) {
+    console.log(file);
+  }
+} else if (command === "yaml") {
+  const content = await vfs.yaml(path);
+  await Bun.write(Bun.stdout, JSON.stringify(content, null, 2));
+}

packages/scripts/src/vfs/vfs.ts

@@ -0,0 +1,4 @@
+import { assertSecret } from "@blitzkit/core";
+import { LocalVFS } from "@blitzkit/core/src/blitzkit/vfs/local";
+
+export const vfs = new LocalVFS(assertSecret(import.meta.env.CLIENT_DIR));

packages/website/src/components/ArticlePlug.astro

@@ -1,38 +0,0 @@
----
-import { tankIcon } from "@blitzkit/core";
-import { Flex, Heading, Link, Strong, Text } from "@radix-ui/themes";
----
-
-<Flex justify="center" px="4">
-  <Link
-    color="gray"
-    highContrast
-    style={{ display: "content" }}
-    href="/docs/guides/christmas-2025"
-    underline="none"
-  >
-    <Flex
-      mt="3"
-      px="5"
-      py="4"
-      style={{
-        borderRadius: "var(--radius-3)",
-        backgroundImage: "url(https://i.imgur.com/LRYmSkg.png)",
-        backgroundSize: "cover",
-        backgroundPosition: "center",
-        boxSizing: "border-box",
-      }}
-      align="center"
-      gap="5"
-    >
-      <img src={tankIcon(25169)} style={{ height: "min(15vw, 5rem)" }} />
-
-      <Flex direction="column">
-        <Heading size={{ initial: "4", sm: "6" }}>Christmas 2025</Heading>
-        <Text size={{ initial: "2", sm: "3" }}>
-          Win the <Strong>GSOR the TANK</Strong> and more!
-        </Text>
-      </Flex>
-    </Flex>
-  </Link>
-</Flex>

packages/website/src/components/Beg/index.module.css

@@ -0,0 +1,36 @@
+.outer {
+  padding: 0 var(--space-4);
+  margin-top: var(--space-3);
+
+  img {
+    width: 1.25em;
+    height: 1.25em;
+
+    border-radius: 50%;
+  }
+
+  .center {
+    position: relative;
+
+    background: linear-gradient(var(--pink-3), var(--purple-2));
+    box-shadow: var(--shadow-3);
+
+    max-width: 40rem;
+
+    padding: var(--space-5);
+    border-radius: var(--radius-4);
+
+    .important {
+      position: absolute;
+
+      top: 0;
+      left: 50%;
+
+      transform: translate(-50%, -50%);
+
+      background-color: inherit;
+
+      padding: var(--space-3);
+    }
+  }
+}

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

@@ -0,0 +1,48 @@
+import { HeartFilledIcon } from "@radix-ui/react-icons";
+import { Button, Em, Flex, Strong, Text } from "@radix-ui/themes";
+import { donationTiers } from "../../config/donations";
+import styles from "./index.module.css";
+
+export function Beg() {
+  return (
+    <Flex align="center" gap="4" direction="column" className={styles.outer}>
+      <Text size="3" className={styles.important}>
+        <Flex gap="2" align="center">
+          <img src="https://github.com/tresabhi.png" />
+          <Em>We need your attention</Em>
+        </Flex>
+      </Text>
+
+      <Flex direction="column" className={styles.center} gap="4">
+        <Flex direction="column" gap="3">
+          <Text color="tomato">
+            We can no longer keep BlitzKit sustainable for <Strong>free</Strong>
+            .
+          </Text>
+
+          <Text>
+            We want to add tank modules, player statistics, rebalancing patch
+            notes, bring back the Discord bot, and more.
+          </Text>
+
+          <Text>
+            But paying out of pocket makes that impossible. We are an earnest
+            non-profit, so consider donating to make the above possible. 100% of
+            your money goes back into BlitzKit.
+          </Text>
+        </Flex>
+
+        <Flex gap="3">
+          {donationTiers.map(({ name, value, link }) => (
+            <a target="_blank" key={name} href={link}>
+              <Button size="3" color="crimson">
+                {value === null && <HeartFilledIcon />}
+                {value === null ? "Custom" : `$${value}`}
+              </Button>
+            </a>
+          ))}
+        </Flex>
+      </Flex>
+    </Flex>
+  );
+}

packages/website/src/components/Countdown.tsx

@@ -3,9 +3,9 @@ import { useEffect, useState, type ReactNode } from "react";
 import type { MaybeSkeletonComponentProps } from "../types/maybeSkeletonComponentProps";
 import { InlineSkeleton } from "./InlineSkeleton";
 
-const TIME = 1764898200 * 1000;
+const TIME = 1792598400 * 1000;
 
-export function Giveaway({ skeleton }: MaybeSkeletonComponentProps) {
+export function Countdown({ skeleton }: MaybeSkeletonComponentProps) {
   const [timeLeft, setTimeLeft] = useState<number>(TIME - Date.now());
 
   useEffect(() => {
@@ -31,14 +31,14 @@ export function Giveaway({ skeleton }: MaybeSkeletonComponentProps) {
 
     string = (
       <>
-        in{" "}
+        revealed in{" "}
         <Code highContrast>
           {hours}h {minutes}m {seconds}s
         </Code>
       </>
     );
   } else {
-    string = "has ended. Come again later!";
+    string = "have been revealed.";
   }
 
   return (
@@ -47,7 +47,7 @@ export function Giveaway({ skeleton }: MaybeSkeletonComponentProps) {
         color="gray"
         highContrast
         style={{ display: "content" }}
-        href="https://discord.gg/njQdBhNS?event=1446208951136813117"
+        href="https://preview.blitzkit.app/tanks"
         underline="none"
       >
         <Flex
@@ -56,17 +56,17 @@ export function Giveaway({ skeleton }: MaybeSkeletonComponentProps) {
           py="4"
           style={{
             borderRadius: "var(--radius-3)",
-            backgroundImage: "url(https://i.imgur.com/LRYmSkg.png)",
+            backgroundImage: "url(https://i.imgur.com/xgngxoy.png)",
             backgroundSize: "cover",
             backgroundPosition: "center",
             boxSizing: "border-box",
-            boxShadow: "0 0 var(--space-7) var(--blue-a5)",
+            boxShadow: "0 0 var(--space-7) var(--white-a2)",
           }}
           align="center"
           gap="5"
         >
           <img
-            src="https://i.imgur.com/mvmJQgB.png"
+            src="https://i.imgur.com/kXV3r3P.png"
             style={{
               height: "min(15vw, 5rem)",
               filter: "drop-shadow(0.5rem 0.5rem 1rem #00000080)",
@@ -75,11 +75,11 @@ export function Giveaway({ skeleton }: MaybeSkeletonComponentProps) {
 
           <Flex direction="column">
             <Heading size={{ initial: "4", sm: "6" }}>
-              Music Box giveaway {!skeleton && string}{" "}
+              Tier XIs {!skeleton && string}{" "}
               {skeleton && <InlineSkeleton width="10rem" />}
             </Heading>
             <Text size={{ initial: "2", sm: "3" }}>
-              Join the BlitzKit Discord server event
+              Get ready to go to the Tankopedia!
             </Text>
           </Flex>
         </Flex>

packages/website/src/components/CreditsPromo.astro

@@ -0,0 +1,135 @@
+---
+import { Grid, Text } from "@radix-ui/themes";
+import { credits } from "../config/credits";
+import { getStrings } from "../core/i18n/getStrings";
+
+interface Props {
+  locale: string;
+}
+
+const { locale } = Astro.props;
+
+const strings = getStrings(locale);
+---
+
+<style>
+  .credits {
+    display: flex;
+    justify-content: center;
+
+    padding: var(--space-4);
+
+    .inner {
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-2);
+
+      width: 100%;
+      max-width: 80rem;
+
+      .list {
+        gap: var(--space-5);
+
+        .link {
+          display: contents;
+
+          .person {
+            --profile-size: 5rem;
+
+            position: relative;
+
+            display: flex;
+            flex-direction: column;
+
+            padding: var(--space-4);
+            padding-top: 0;
+            margin-top: calc(var(--profile-size) / 2);
+            gap: var(--space-1);
+
+            box-shadow: var(--shadow-3);
+            border-radius: var(--radius-3);
+
+            .contain {
+              border-radius: inherit;
+
+              position: absolute;
+
+              top: 0;
+              right: 0;
+
+              width: 100%;
+              height: 100%;
+
+              overflow: hidden;
+
+              .hint {
+                width: 100%;
+                height: 100%;
+
+                background-size: cover;
+                background-position: center;
+
+                filter: saturate(20) brightness(0.125) blur(4rem);
+              }
+            }
+
+            .text {
+              position: relative;
+            }
+
+            img {
+              border-radius: 50%;
+
+              position: relative;
+
+              margin-top: calc(var(--profile-size) / -2);
+
+              object-fit: cover;
+              width: var(--profile-size);
+              height: var(--profile-size);
+
+              margin-bottom: var(--space-2);
+            }
+          }
+        }
+      }
+    }
+  }
+</style>
+
+<div class="credits">
+  <div class="inner">
+    <Grid
+      className="list"
+      py="4"
+      columns="repeat(auto-fill, minmax(16rem, 1fr))"
+      flow="dense"
+      gap="4"
+      gapY="8"
+    >
+      {
+        credits.map((person) => (
+          <a target="_blank" href={person.url} class="link">
+            <div class="person">
+              <div class="contain">
+                <div
+                  class="hint"
+                  style={`background-image: url(${person.image})`}
+                />
+              </div>
+
+              <img src={person.image} />
+
+              <Text weight="medium" className="text" color="gray" highContrast>
+                {person.name}
+              </Text>
+              <Text className="text" color="gray" wrap="pretty">
+                {person.description}
+              </Text>
+            </div>
+          </a>
+        ))
+      }
+    </Grid>
+  </div>
+</div>

packages/website/src/components/Footer.astro

@@ -42,9 +42,9 @@ const strings = await api.strings(locale);
       }}
     >
       <Heading>BlitzKit</Heading>
-      <Text color="gray">{strings.website.footer.motto}</Text>
-      <Text size="1" color="gray">
-        {strings.website.footer.copyright}
+      <Text size="2" color="gray">{strings.website.footer.motto}</Text>
+      <Text size="2" color="gray">
+        {strings.website.footer.association}
       </Text>
 
       <Box mt="2">
@@ -83,9 +83,6 @@ const strings = await api.strings(locale);
             sm: "start",
           }}
         >
-          <LinkI18n {locale} href="/docs/about/credits" color="gray">
-            {strings.website.footer.about.credits}
-          </LinkI18n>
           <Link
             href="https://discord.gg/nDt7AjGJQH"
             target="_blank"

packages/website/src/components/Lighting.tsx

@@ -18,7 +18,7 @@ import { TankopediaDisplay } from "../stores/tankopediaPersistent/constants";
 
 const ANGLE = degToRad(15);
 const REVEAL_ANIMATION_TIME = 3;
-const TRANSITION_ANIMATION_TIME = 0.5;
+export const TRANSITION_ANIMATION_TIME = 0.5;
 
 const LIGHTS_COUNT = 3;
 const THETA_OFFSET = degToRad(180 - 45);
@@ -46,11 +46,17 @@ export function Lighting({ hasPbr }: Props) {
 
   const highGraphics = TankopediaPersistent.use((state) => state.highGraphics);
   const requestedDisplay = Tankopedia.use((state) => state.requestedDisplay);
+  const revealed = Tankopedia.use((state) => state.revealed);
+  const skinPending = Tankopedia.use(
+    (state) => state.loadedSkin !== state.skin,
+  );
 
   const animationTime = useRef(REVEAL_ANIMATION_TIME);
   const t0 = useRef(performance.now() / 1e3 - animationTime.current);
+  const holding = useRef(false);
 
   const isRevealing = useRef(true);
+  const isFirstReveal = useRef(true);
 
   const [animate, setAnimate] = useState(true);
 
@@ -71,6 +77,37 @@ export function Lighting({ hasPbr }: Props) {
     setAnimate(true);
   }, [requestedDisplay]);
 
+  useEffect(() => {
+    if (isFirstReveal.current) {
+      isFirstReveal.current = false;
+      return;
+    }
+
+    if (!revealed) {
+      animationTime.current = TRANSITION_ANIMATION_TIME;
+      t0.current = performance.now() / 1e3;
+      holding.current = true;
+    } else if (holding.current) {
+      animationTime.current = REVEAL_ANIMATION_TIME;
+      t0.current = performance.now() / 1e3 - animationTime.current;
+      holding.current = false;
+    } else {
+      return;
+    }
+
+    setAnimate(true);
+    invalidate();
+  }, [revealed]);
+
+  useEffect(() => {
+    if (!skinPending) return;
+
+    animationTime.current = TRANSITION_ANIMATION_TIME;
+    t0.current = performance.now() / 1e3;
+
+    setAnimate(true);
+  }, [skinPending]);
+
   return (
     <>
       <ContactShadows
@@ -90,6 +127,7 @@ export function Lighting({ hasPbr }: Props) {
           hasPbr={hasPbr}
           t0={t0}
           animationTime={animationTime}
+          holding={holding}
           wrapper={wrapper}
           stop={() => {
             setAnimate(false);
@@ -145,11 +183,19 @@ interface AnimatorProps {
 
   t0: RefObject<number>;
   animationTime: RefObject<number>;
+  holding: RefObject<boolean>;
   wrapper: RefObject<Group | null>;
   hasPbr: boolean;
 }
 
-function Animator({ stop, t0, animationTime, wrapper, hasPbr }: AnimatorProps) {
+function Animator({
+  stop,
+  t0,
+  animationTime,
+  holding,
+  wrapper,
+  hasPbr,
+}: AnimatorProps) {
   const requestedDisplay = Tankopedia.use((state) => state.requestedDisplay);
   const display = Tankopedia.use((state) => state.display);
 
@@ -176,7 +222,7 @@ function Animator({ stop, t0, animationTime, wrapper, hasPbr }: AnimatorProps) {
 
   useFrame(({ invalidate }) => {
     const dt = performance.now() / 1e3 - t0.current;
-    const x = clamp(dt / animationTime.current, 0, 2);
+    const x = clamp(dt / animationTime.current, 0, holding.current ? 1 : 2);
 
     if (x === 2) {
       apply(1);
@@ -188,6 +234,9 @@ function Animator({ stop, t0, animationTime, wrapper, hasPbr }: AnimatorProps) {
     const t = (0.5 * Math.sin(Math.PI * (x + 0.5)) + 0.5) ** 2;
 
     apply(t);
+
+    if (holding.current && x === 1) return;
+
     invalidate();
 
     if (x >= 1 && Tankopedia.state.display !== requestedDisplay) {
@@ -195,6 +244,12 @@ function Animator({ stop, t0, animationTime, wrapper, hasPbr }: AnimatorProps) {
         draft.display = requestedDisplay;
       });
     }
+
+    if (x >= 1 && Tankopedia.state.skin !== Tankopedia.state.loadedSkin) {
+      Tankopedia.mutate((draft) => {
+        draft.skin = draft.loadedSkin;
+      });
+    }
   });
 
   return null;

packages/website/src/components/Markdown.tsx

@@ -1,13 +1,20 @@
 import { Link, Table } from '@radix-ui/themes';
 import MarkdownToJSX from 'markdown-to-jsx';
 import type { ComponentProps } from 'react';
+import { docImageUrl, isExternalImage } from '../core/blitzkit/docImages';
 
 interface MarkdownProps {
   children: string;
 }
 
-function Image(props: ComponentProps<'img'>) {
-  return <img style={{ maxWidth: '100%' }} {...props} />;
+function Image({ src, ...props }: ComponentProps<'img'>) {
+  return (
+    <img
+      style={{ maxWidth: '100%' }}
+      src={src && isExternalImage(src) ? docImageUrl(src) : src}
+      {...props}
+    />
+  );
 }
 
 export function Markdown({ children }: MarkdownProps) {

packages/website/src/components/Navbar.astro

@@ -5,7 +5,7 @@ import {
   GearIcon,
   HamburgerMenuIcon,
 } from "@radix-ui/react-icons";
-import { Box, Code, Flex, IconButton, Link } from "@radix-ui/themes";
+import { Box, Code, Flex, Grid, IconButton, Link } from "@radix-ui/themes";
 import { resolveBranchName } from "../core/blitzkit/branches";
 import { getStrings } from "../core/i18n/getStrings";
 import { Var } from "../core/radix/var";
@@ -103,7 +103,7 @@ const strings = getStrings(locale);
   <Flex
     className="content"
     width="100%"
-    p={{ initial: "4", sm: "3" }}
+    p="3"
     direction="column"
     align="center"
   >
@@ -131,42 +131,6 @@ const strings = getStrings(locale);
 
         <Box flexGrow="1" />
 
-        <Flex
-          align="center"
-          gap={{ initial: "3", md: "6" }}
-          display={{ initial: "none", sm: "flex" }}
-          justify="center"
-          className="tools"
-        >
-          {
-            toolsFiltered.map(([id, tool]) => {
-              const selected = Astro.url.pathname.includes(
-                `/${tool.path ?? id}`,
-              );
-              const toolStrings =
-                strings.website.tools[
-                  (tool.strings ?? id) as keyof typeof strings.website.tools
-                ];
-
-              return (
-                <LinkI18n
-                  {locale}
-                  weight={selected ? "medium" : "regular"}
-                  color="gray"
-                  highContrast={selected}
-                  size={{ initial: "1", md: "2" }}
-                  href={`/${tool.path ?? id}`}
-                  underline="hover"
-                >
-                  {toolStrings.name}
-                </LinkI18n>
-              );
-            })
-          }
-        </Flex>
-
-        <Box flexGrow="1" />
-
         <Flex align="center" gap="4">
           <Link
             style={{ display: "flex", alignContent: "center" }}
@@ -190,7 +154,7 @@ const strings = getStrings(locale);
 
           <NavbarAccount {locale} client:idle />
 
-          <Flex align="center" display={{ initial: "flex", sm: "none" }}>
+          <Flex align="center">
             <IconButton variant="ghost" color="gray" className="hamburger">
               <Cross1Icon data-expanded />
               <HamburgerMenuIcon data-closed />
@@ -199,11 +163,10 @@ const strings = getStrings(locale);
         </Flex>
       </Flex>
 
-      <Flex
-        direction="column"
+      <Grid
         data-expanded
+        columns="repeat(auto-fill, minmax(30rem, 1fr))"
         gap="3"
-        display={{ initial: "flex", sm: "none" }}
       >
         {
           toolsFiltered.map(([id, tool]) => {
@@ -228,7 +191,7 @@ const strings = getStrings(locale);
                   }}
                 >
                   <Flex
-                    py="4"
+                    p="6"
                     justify="end"
                     flexGrow="1"
                     style={{
@@ -242,7 +205,7 @@ const strings = getStrings(locale);
             );
           })
         }
-      </Flex>
+      </Grid>
     </Flex>
   </Flex>
 

packages/website/src/components/StupidCat.tsx

@@ -1,3 +0,0 @@
-export function StupidCat() {
-  return <img src="https://i.imgur.com/6FBBzb9.png" />;
-}

packages/website/src/components/TankModel.tsx

@@ -2,13 +2,14 @@ import { invalidate, useThree, type ThreeEvent } from "@react-three/fiber";
 import { useRef } from "react";
 import { Group, Mesh, MeshStandardMaterial, Vector2 } from "three";
 import { applyPitchYawLimits } from "../core/blitz/applyPitchYawLimits";
-import { jsxTree } from "../core/blitzkit/jsxTree";
 import { modelTransformEvent } from "../core/blitzkit/modelTransform";
+import { skinTree } from "../core/blitzkit/skinTree";
 import { controlsEnabledEvent } from "../core/controlsEnabled";
 import { DuelModule, getDuel, useDuel } from "../hooks/useDuel";
 import { useDuelModel } from "../hooks/useDuelModel";
 import { hasEquipment } from "../hooks/useEquipment";
 import { useModel } from "../hooks/useModel";
+import { useSkin } from "../hooks/useSkin";
 import { useTankTransform } from "../hooks/useTankTransform";
 import { Tankopedia } from "../stores/tankopedia";
 import { TankopediaDisplay } from "../stores/tankopediaPersistent/constants";
@@ -27,6 +28,7 @@ export function TankModel() {
   const gunModelDefinition = turretModelDefinition.guns[protagonist.gun];
   const { gltf } = useModel(protagonist.tank);
   const nodes = Object.values(gltf.nodes);
+  const skinGltf = useSkin(protagonist.tank);
 
   useTankTransform(track, turret, turretContainer, gunContainer);
 
@@ -103,7 +105,7 @@ export function TankModel() {
           window.removeEventListener("pointerup", handlePointerUp);
         }
 
-        return jsxTree(node, {
+        return skinTree(node, skinGltf, {
           mesh(_, props, key) {
             return (
               <mesh
@@ -182,7 +184,7 @@ export function TankModel() {
             window.removeEventListener("pointerup", handlePointerUp);
           }
 
-          return jsxTree(node, {
+          return skinTree(node, skinGltf, {
             mesh(_, props, key) {
               return (
                 <mesh
@@ -265,7 +267,7 @@ export function TankModel() {
               window.removeEventListener("pointerup", handlePointerUp);
             }
 
-            return jsxTree(node, {
+            return skinTree(node, skinGltf, {
               mesh(_, props, key) {
                 return (
                   <mesh

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

@@ -0,0 +1,44 @@
+import { Flex, IconButton, type FlexProps } from "@radix-ui/themes";
+import type { ComponentProps, CSSProperties } from "react";
+
+type SidebarIconButtonProps = ComponentProps<typeof IconButton> & {
+  selected: boolean;
+  src: string;
+  alt: string;
+  imageStyle?: CSSProperties;
+};
+
+export function SidebarIconGroup({ style, ...props }: FlexProps) {
+  return (
+    <Flex
+      direction="column"
+      overflow="hidden"
+      style={{ borderRadius: "var(--radius-full)", ...style }}
+      {...props}
+    />
+  );
+}
+
+export function SidebarIconButton({
+  selected,
+  src,
+  alt,
+  imageStyle,
+  ...props
+}: SidebarIconButtonProps) {
+  return (
+    <IconButton
+      color={selected ? undefined : "gray"}
+      variant="soft"
+      size={{ initial: "2", sm: "3" }}
+      radius="none"
+      {...props}
+    >
+      <img
+        alt={alt}
+        src={src}
+        style={{ width: "50%", height: "50%", ...imageStyle }}
+      />
+    </IconButton>
+  );
+}

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

@@ -0,0 +1,83 @@
+import { alias } from "@blitzkit/core";
+import { Flex, Tooltip } from "@radix-ui/themes";
+import { uniqBy } from "lodash-es";
+import { SKIN_NUMBER } from "../../../../../../constants/skinNumber";
+import { api } from "../../../../../../core/blitzkit/api";
+import { useLocale } from "../../../../../../hooks/useLocale";
+import { Duel } from "../../../../../../stores/duel";
+import { Tankopedia } from "../../../../../../stores/tankopedia";
+import { TankopediaDisplay } from "../../../../../../stores/tankopediaPersistent/constants";
+import { SidebarIconButton } from "./SidebarIconButton";
+
+const camouflageDefinitions = await api.camouflageDefinitions();
+
+export function SkinSwitcher() {
+  const tank = Duel.use((state) => state.protagonist.tank);
+  const skin = Tankopedia.use((state) => state.requestedSkin);
+  const requestedDisplay = Tankopedia.use((state) => state.requestedDisplay);
+  const disturbed = Tankopedia.use((state) => state.disturbed);
+  const { unwrap } = useLocale();
+  const skins = uniqBy(
+    Object.values(camouflageDefinitions.camouflages).filter(
+      (camouflage) => camouflage.tank_id === tank.id,
+    ),
+    (camouflage) => unwrap(camouflage.name!),
+  );
+
+  if (skins.length === 0) return null;
+
+  return (
+    <Flex
+      direction="column"
+      top="50%"
+      right={
+        disturbed && requestedDisplay === TankopediaDisplay.Model
+          ? "3"
+          : "-4rem"
+      }
+      style={{
+        position: "absolute",
+        transform: "translateY(-50%)",
+        transitionDuration: "200ms",
+        pointerEvents: "auto",
+      }}
+    >
+      {skins.map((camouflage, index) => {
+        const name = unwrap(camouflage.name!).replace(
+          "%(camo_num)",
+          SKIN_NUMBER,
+        );
+        const top = index === 0 ? "var(--radius-full)" : "0";
+        const bottom = index === skins.length - 1 ? "var(--radius-full)" : "0";
+
+        return (
+          <Tooltip key={camouflage.id} content={name} side="left">
+            <SidebarIconButton
+              selected={skin === camouflage.id}
+              alt={name}
+              src={alias("api", `/icons/camouflages/${camouflage.id}.webp`)}
+              size={{ initial: "3", sm: "4" }}
+              radius="full"
+              style={{
+                borderRadius: `${top} ${top} ${bottom} ${bottom}`,
+              }}
+              imageStyle={{
+                width: "70%",
+                height: "70%",
+                borderRadius: "50%",
+              }}
+              onClick={() => {
+                Tankopedia.mutate((draft) => {
+                  draft.requestedSkin =
+                    draft.requestedSkin === camouflage.id
+                      ? undefined
+                      : camouflage.id;
+                });
+              }}
+            />
+          </Tooltip>
+        );
+      })}
+    </Flex>
+  );
+}

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

@@ -46,6 +46,11 @@ import { TankSearch } from "../../../../TankSearch";
 import { CustomShellButton } from "./components/CustomShellButton";
 import { DynamicArmorSwitcher } from "./components/DynamicArmorSwitcher";
 import { QuickInputs } from "./components/QuickInputs";
+import {
+  SidebarIconButton,
+  SidebarIconGroup,
+} from "./components/SidebarIconButton";
+import { SkinSwitcher } from "./components/SkinSwitcher";
 import { SpallLinerSwitcher } from "./components/SpallLinerSwitcher";
 import { Thicknesses } from "./components/Thicknesses";
 
@@ -87,6 +92,8 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) {
 
       <Thicknesses skeleton={skeleton} thicknessRange={thicknessRange} />
 
+      <SkinSwitcher />
+
       <Flex
         gap="2"
         direction="column"
@@ -181,24 +188,13 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) {
           </Popover.Root>
         )}
 
-        <Flex
-          direction="column"
-          style={{
-            borderRadius: "var(--radius-full)",
-          }}
-          overflow="hidden"
-        >
+        <SidebarIconGroup>
           {antagonistGun.shells.map((thisShell) => (
-            <IconButton
-              color={
-                thisShell.id === antagonistShell.id && !hasCustomShell
-                  ? undefined
-                  : "gray"
-              }
-              variant="soft"
+            <SidebarIconButton
               key={thisShell.id}
-              size={{ initial: "2", sm: "3" }}
-              radius="none"
+              selected={thisShell.id === antagonistShell.id && !hasCustomShell}
+              alt={unwrap(thisShell.name!)}
+              src={alias("api", `/icons/shells/${thisShell.icon}.webp`)}
               onClick={() => {
                 Duel.mutate((draft) => {
                   draft.antagonist.shell = thisShell;
@@ -208,19 +204,10 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) {
                   draft.customShell = undefined;
                 });
               }}
-            >
-              <img
-                alt={unwrap(thisShell.name!)}
-                src={alias("api", `/icons/shells/${thisShell.icon}.webp`)}
-                style={{
-                  width: "50%",
-                  height: "50%",
-                }}
-              />
-            </IconButton>
+            />
           ))}
           <CustomShellButton />
-        </Flex>
+        </SidebarIconGroup>
 
         <Flex
           direction="column"

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

@@ -1,30 +1,46 @@
 import { UpdateIcon } from "@radix-ui/react-icons";
 import { Button, Flex, Heading } from "@radix-ui/themes";
+import { useEffect, useRef } from "react";
+import { SKIN_NUMBER } from "../../../../../../constants/skinNumber";
+import { api } from "../../../../../../core/blitzkit/api";
 import { useLocale } from "../../../../../../hooks/useLocale";
 import { Duel } from "../../../../../../stores/duel";
 import { Tankopedia } from "../../../../../../stores/tankopedia";
 import type { MaybeSkeletonComponentProps } from "../../../../../../types/maybeSkeletonComponentProps";
 import { Tracker } from "./components/Tracker";
 
+const camouflageDefinitions = await api.camouflageDefinitions();
+
 export function Title({ skeleton }: MaybeSkeletonComponentProps) {
   const { unwrap, strings } = useLocale();
   const modelRequested = Tankopedia.use((state) => state.modelRequested);
   const protagonist = Duel.use((state) => state.protagonist.tank);
   const revealed = Tankopedia.use((state) => state.revealed);
   const disturbed = Tankopedia.use((state) => state.disturbed);
-  const name = unwrap(protagonist.name!);
+  const hasRevealed = useRef(false);
+  const skin = Tankopedia.use((state) => state.requestedSkin);
+  const camouflage =
+    skin === undefined ? undefined : camouflageDefinitions.camouflages[skin];
+  const tankName = unwrap(protagonist.name!);
+  const name = camouflage
+    ? `${tankName} ${unwrap(camouflage.name!).replace("%(camo_num)", SKIN_NUMBER)}`
+    : tankName;
   const fontSize = revealed
     ? disturbed
       ? "1.5rem"
       : "2rem"
     : `min(12vh, ${75 / name.length}vw)`;
 
+  useEffect(() => {
+    if (revealed) hasRevealed.current = true;
+  }, [revealed]);
+
   return (
     <Flex
       onPointerDown={(event) => {
         event.preventDefault();
 
-        if (!modelRequested) return;
+        if (!modelRequested || hasRevealed.current) return;
 
         Tankopedia.mutate((draft) => {
           draft.revealed = true;

packages/website/src/config/credits.ts

@@ -0,0 +1,102 @@
+interface CreditPeople {
+  name: string;
+  description: string;
+  url?: string;
+  image: string;
+}
+
+export const credits: CreditPeople[] = [
+  {
+    name: "TrèsAbhi",
+    description: "Founder and lead developer",
+    url: "https://abhi-deep.com/",
+    image: "https://github.com/tresabhi.png",
+  },
+  {
+    name: "HitJack",
+    description: "Developer on website",
+    url: "https://marksstuff.com",
+    image: "https://github.com/Hitjack007.png",
+  },
+  {
+    name: "aeson000",
+    description: "Advisor on game and website",
+    url: "https://discord.gg/WHdER7ZPAD",
+    image: "/media/users/aeson000.png",
+  },
+  {
+    name: "GonnaHetzMe",
+    description: "Developer and advisor on back end",
+    url: "https://github.com/karelpak1",
+    image: "https://github.com/karelpak1.png",
+  },
+  {
+    name: "ChickenMan7777",
+    description: "Moderator and former advisor on game mechanics",
+    url: "https://discord.gg/rEsUbXCqD9",
+    image: "/media/users/chickenman7777.webp",
+  },
+  {
+    name: "Avenir",
+    description: "Moderator and elite Advanced Recon Commando",
+    image: "/media/users/avenir.webp",
+  },
+  {
+    name: "Pyogenics",
+    description: "Former advisor on game 3D format",
+    url: "https://github.com/Pyogenics",
+    image: "https://github.com/Pyogenics.png",
+  },
+  {
+    name: "Prince_NA",
+    description: "Former advisor on bot and website",
+    image: "/media/users/prince-na.webp",
+  },
+  {
+    name: "Vovko",
+    description: "Former advisor on bot",
+    url: "https://amth.one/",
+    image: "https://github.com/cufee.png",
+  },
+  {
+    name: "S0AP",
+    description: "Former advisor on and advertiser for bot",
+    url: "https://discord.gg/3KfH93um3Y",
+    image: "/media/users/s0ap.webp",
+  },
+  {
+    name: "Synx",
+    description: "Former advisor on bot and website",
+    url: "https://www.youtube.com/@Synx_Blitz",
+    image: "/media/users/synx.webp",
+  },
+  {
+    name: "34wotb",
+    description: "Former advisor on bot",
+    url: "https://www.twitch.tv/34wotb/",
+    image: "/media/users/34wotb.jpg",
+  },
+  {
+    name: "HisRoyalFatness",
+    description: "Former advisor on website",
+    url: "https://www.youtube.com/@hisroyalfatness",
+    image: "/media/users/hisroyalfatness.jpg",
+  },
+  {
+    name: "Minitelrose",
+    description: "Former advisor on game mechanics",
+    url: "https://wotinspector.com/",
+    image: "/media/users/minitelrose.webp",
+  },
+  {
+    name: "Maddox",
+    description: "Game asset decompression",
+    url: "https://github.com/Maddoxkkm",
+    image: "https://github.com/Maddoxkkm.png",
+  },
+  {
+    name: "TJ Duff",
+    description: "Chief executive cheer leader",
+    image: "/media/users/tj-duff.jpg",
+  },
+];

packages/website/src/config/donations.ts

@@ -0,0 +1,23 @@
+// TODO: source this from the open collective api, if even possible
+export const donationTiers = [
+  {
+    name: "The Backer",
+    value: 5,
+    link: "https://opencollective.com/blitzkit/contribute/backers-106312/checkout",
+  },
+  {
+    name: "The Engineer",
+    value: 10,
+    link: "https://opencollective.com/blitzkit/contribute/the-engineer-107057/checkout",
+  },
+  {
+    name: "The Patron",
+    value: 25,
+    link: "https://opencollective.com/blitzkit/contribute/the-patron-107056/checkout",
+  },
+  {
+    name: "The Sponsor",
+    value: null,
+    link: "https://opencollective.com/blitzkit/donate",
+  },
+];

packages/website/src/constants/skinNumber.ts

@@ -0,0 +1 @@
+export const SKIN_NUMBER = "0417";

packages/website/src/constants/tools.ts

@@ -73,4 +73,8 @@ export const tools: Record<string, Tool> = {
     id: "changelogs",
     banner_background_position: "center",
   },
+  credits: {
+    id: "credits",
+    button: "bronze",
+  },
 };

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

@@ -0,0 +1,32 @@
+import { alias } from "@blitzkit/core";
+
+const EXTERNAL_IMAGE = /^https?:\/\//;
+const MARKDOWN_IMAGES = [
+  /!\[[^\]]*\]\((\S+?)(?:\s+"[^"]*")?\)/g,
+  /<img[^>]*\ssrc=["']([^"']+)["']/g,
+];
+
+export function isExternalImage(src: string) {
+  return EXTERNAL_IMAGE.test(src);
+}
+
+export function docImageId(url: string) {
+  let hash = 0x811c9dc5;
+
+  for (let index = 0; index < url.length; index++) {
+    hash ^= url.charCodeAt(index);
+    hash = Math.imul(hash, 0x01000193) >>> 0;
+  }
+
+  return hash.toString(16).padStart(8, "0");
+}
+
+export function docImageUrl(url: string) {
+  return alias("api", `/docs/images/${docImageId(url)}.webp`);
+}
+
+export function externalDocImages(markdown: string) {
+  return MARKDOWN_IMAGES.flatMap((pattern) =>
+    Array.from(markdown.matchAll(pattern), (match) => match[1]),
+  ).filter(isExternalImage);
+}

packages/website/src/core/blitzkit/skinTree.tsx

@@ -0,0 +1,46 @@
+import type { Material, Object3D } from "three";
+import type { Skin } from "../../hooks/useSkin";
+import { jsxTree } from "./jsxTree";
+
+type Mergers = Parameters<typeof jsxTree>[1];
+
+export function skinTree(
+  node: Object3D,
+  skin: Skin | undefined,
+  mergers: Mergers,
+) {
+  const skinNodes = new Map(
+    skin?.scene.children.map((node) => [node.name, node]),
+  );
+  const skinMergers: Mergers = {
+    mesh(mesh, props, key) {
+      const material = skin?.materials.get((mesh.material as Material).name);
+
+      return mergers!.mesh!(
+        mesh,
+        material ? { ...props, material } : props,
+        key,
+      );
+    },
+    group(object3d, props, key) {
+      const skinNode = skinNodes.get(object3d.name);
+      const isSwitch = object3d.userData.state !== undefined;
+      const state = skin
+        ? skin.scene.userData.states[object3d.name]
+        : object3d.userData.state;
+
+      return (
+        <group key={key} {...props}>
+          {isSwitch
+            ? object3d.children
+                .filter((child) => child.name === state)
+                .map((child) => jsxTree(child, skinMergers))
+            : props.children}
+          {skinNode?.children.map((child) => jsxTree(child, mergers))}
+        </group>
+      );
+    },
+  };
+
+  return jsxTree(node, skinMergers);
+}

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

@@ -8,8 +8,8 @@ import {
   resolvePenetrationCoefficient,
   ShellType,
   sum,
+  tankBoundingBox,
   TankClass,
-  unionBoundingBox,
   type EngineDefinition,
   type EquipmentDefinitions,
   type GunDefinition,
@@ -336,10 +336,7 @@ export function tankCharacteristics(
   );
 
   const size = normalizeBoundingBox(
-    unionBoundingBox(
-      tankModelDefinition.bounding_box!,
-      turretModelDefinition.bounding_box!,
-    ),
+    tankBoundingBox(tankModelDefinition, turretModelDefinition),
   );
   const weightKg =
     tank.weight + engine.weight + track.weight + turret.weight + gun.weight;

packages/website/src/hooks/useArmor.ts

@@ -4,7 +4,7 @@ import { GLTFLoader } from "three-stdlib";
 import { useDispose } from "./useDispose";
 
 export function useArmor(id: number) {
-  const path = alias("api", `/tanks/${id}/collision.glb`);
+  const path = alias("models_tanks", `/${id}/collision.glb`);
   const gltf = useLoader(GLTFLoader, path);
 
   useDispose(gltf, path);

packages/website/src/hooks/useModel.ts

@@ -5,7 +5,7 @@ import { GLTFLoader } from "three-stdlib";
 import { useDispose } from "./useDispose";
 
 export function useModel(id: number) {
-  const path = alias("api", `/tanks/${id}/model.glb`);
+  const path = alias("models_tanks", `/${id}/model.glb`);
   const gltf = useLoader(GLTFLoader, path);
 
   useDispose(gltf, path);

packages/website/src/hooks/useSkin.ts

@@ -0,0 +1,82 @@
+import { alias } from "@blitzkit/core";
+import { useEffect } from "react";
+import type { Group, Material } from "three";
+import { GLTFLoader } from "three-stdlib";
+import { TRANSITION_ANIMATION_TIME } from "../components/Tankopedia/HeroSection/components/TankSandbox/components/Lighting";
+import { Tankopedia } from "../stores/tankopedia";
+
+export interface Skin {
+  scene: Group;
+  materials: Map<string, Material>;
+}
+
+const skins = new Map<string, Promise<Skin>>();
+const loadedSkins = new Map<string, Skin>();
+
+async function loadSkin(path: string) {
+  const gltf = await new GLTFLoader().loadAsync(path);
+  const materials: Material[] = await gltf.parser.getDependencies("material");
+  const skin = {
+    scene: gltf.scene,
+    materials: new Map(materials.map((material) => [material.name, material])),
+  };
+
+  loadedSkins.set(path, skin);
+
+  return skin;
+}
+
+function skinPath(id: number, skin: number) {
+  return alias("models_legendary", `/${id}/skins/${skin}.glb`);
+}
+
+export function useSkin(id: number) {
+  const requestedSkin = Tankopedia.use((state) => state.requestedSkin);
+  const skin = Tankopedia.use((state) => state.skin);
+
+  useEffect(() => {
+    const path =
+      requestedSkin === undefined ? undefined : skinPath(id, requestedSkin);
+    let settled = false;
+
+    if (path === undefined || loadedSkins.has(path)) {
+      Tankopedia.mutate((draft) => {
+        draft.loadedSkin = requestedSkin;
+      });
+      return;
+    }
+
+    Tankopedia.mutate((draft) => {
+      draft.revealed = false;
+    });
+
+    if (!skins.has(path)) skins.set(path, loadSkin(path));
+
+    Promise.all([
+      skins.get(path),
+      new Promise((resolve) =>
+        setTimeout(resolve, TRANSITION_ANIMATION_TIME * 1e3),
+      ),
+    ]).then(() => {
+      if (settled) return;
+
+      settled = true;
+      Tankopedia.mutate((draft) => {
+        draft.loadedSkin = requestedSkin;
+        draft.skin = requestedSkin;
+        draft.revealed = true;
+      });
+    });
+
+    return () => {
+      if (settled) return;
+
+      settled = true;
+      Tankopedia.mutate((draft) => {
+        draft.revealed = true;
+      });
+    };
+  }, [id, requestedSkin]);
+
+  return skin === undefined ? undefined : loadedSkins.get(skinPath(id, skin));
+}

packages/website/src/pages/[...chunk_api]/docs/images/[id].webp.ts

@@ -0,0 +1,39 @@
+import type { APIContext, GetStaticPathsItem } from "astro";
+import sharp from "sharp";
+import {
+  docImageId,
+  externalDocImages,
+} from "../../../../core/blitzkit/docImages";
+import { mixStaticPaths } from "../../../../core/blitzkit/mixStaticPaths";
+import { getStaticPaths as _getStaticPaths } from "../../_index";
+
+export const getStaticPaths = mixStaticPaths(_getStaticPaths, async () => {
+  const documents = import.meta.glob<string>(
+    "../../../../../../../docs/**/*.md",
+    { eager: true, query: "?raw", import: "default" },
+  );
+  const urls = new Set(Object.values(documents).flatMap(externalDocImages));
+
+  return Array.from(
+    urls,
+    (url) =>
+      ({
+        params: { id: docImageId(url) },
+        props: { url },
+      }) satisfies GetStaticPathsItem,
+  );
+});
+
+export async function GET({ props }: APIContext<{ url: string }>) {
+  const response = await fetch(props.url);
+
+  if (!response.ok) {
+    throw new Error(`Failed to fetch ${props.url}: ${response.status}`);
+  }
+
+  const image = await sharp(Buffer.from(await response.arrayBuffer()))
+    .webp()
+    .toBuffer();
+
+  return new Response(new Uint8Array(image));
+}

packages/website/src/pages/[...chunk_api]/icons/camouflages/[id].webp.ts

@@ -0,0 +1,53 @@
+import type { CamouflagesXml } from "@blitzkit/core";
+import type { APIContext, GetStaticPathsItem } from "astro";
+import sharp from "sharp";
+import { extractPackedIcon } from "../../../../core/blitz/extractPackedIcon";
+import { parsePackedSpriteRect } from "../../../../core/blitz/parsePackedSpriteRect";
+import { api } from "../../../../core/blitzkit/api";
+import { mixStaticPaths } from "../../../../core/blitzkit/mixStaticPaths";
+import { vfs } from "../../../../core/blitzkit/vfs";
+import { getStaticPaths as _getStaticPaths } from "../../_index";
+
+export const getStaticPaths = mixStaticPaths(_getStaticPaths, async () => {
+  const camouflageDefinitions = await api.camouflageDefinitions();
+  const camouflagesXml = await vfs.xml<{ root: CamouflagesXml }>(
+    "Data/XML/item_defs/vehicles/common/camouflages.xml",
+  );
+  const icons = new Map(
+    Object.values(camouflagesXml.root.camouflages).map((camouflage) => [
+      camouflage.id,
+      camouflage.icon,
+    ]),
+  );
+  const paths: GetStaticPathsItem[] = [];
+
+  for (const camouflage of Object.values(camouflageDefinitions.camouflages)) {
+    const icon = icons.get(camouflage.id);
+
+    if (camouflage.tank_id === undefined || !icon) continue;
+
+    paths.push({
+      params: { id: camouflage.id },
+      props: {
+        path: icon.replace("~res:/", "Data/").replace(/\.txt$/, ""),
+      },
+    });
+  }
+
+  return paths;
+});
+
+export async function GET({ props }: APIContext<{ path: string }>) {
+  const path = (await vfs.resolve(`${props.path}@2x.packed.webp`))
+    ? `${props.path}@2x.packed.webp`
+    : `${props.path}.packed.webp`;
+  const packed = await vfs.file(path);
+  const texture = sharp(packed);
+  const sizes = parsePackedSpriteRect(packed);
+  const image = sizes
+    ? sharp(await extractPackedIcon(texture, sizes))
+    : texture;
+  const bytes = await image.webp().toBuffer();
+
+  return new Response(new Uint8Array(bytes));
+}

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

@@ -0,0 +1,13 @@
+---
+import CreditsPromo from "../../../../components/CreditsPromo.astro";
+import { tools } from "../../../../constants/tools";
+import ToolLayout from "../../../../layouts/ToolLayout.astro";
+
+export { getStaticPaths } from "../index.astro";
+
+const { locale } = Astro.props;
+---
+
+<ToolLayout tool={tools.credits} {locale}>
+  <CreditsPromo {locale} />
+</ToolLayout>

packages/website/src/pages/[...chunk_models_legendary]/[id]/skins/[skin].glb.ts

@@ -0,0 +1,237 @@
+import {
+  parseHierarchies,
+  Sc2ReadStream,
+  type CamouflagesXml,
+  type CamouflagesYaml,
+  type TankParameters,
+} from "@blitzkit/core";
+import {
+  Document,
+  Node,
+  NodeIO,
+  PropertyType,
+  Scene,
+} from "@gltf-transform/core";
+import { ALL_EXTENSIONS } from "@gltf-transform/extensions";
+import { dedup, mergeDocuments, unpartition } from "@gltf-transform/functions";
+import type { APIContext } from "astro";
+import type { Vector3Tuple, Vector4Tuple } from "three";
+import { SKIN_NUMBER } from "../../../../constants/skinNumber";
+import { api } from "../../../../core/blitzkit/api";
+import { mixStaticPaths } from "../../../../core/blitzkit/mixStaticPaths";
+import { vfs } from "../../../../core/blitzkit/vfs";
+import {
+  extractMaterials,
+  extractModel,
+} from "../../../[...chunk_models_tanks]/[id]/model.glb";
+import { getStaticPaths as _getStaticPaths } from "../../_index";
+
+const SKIN_NUMBER_SLOTS = 5;
+const DIGIT_COLUMNS = 5;
+const DIGIT_ROWS = 2;
+
+export const getStaticPaths = mixStaticPaths(_getStaticPaths, async () => {
+  const camouflages = await api.camouflageDefinitions();
+
+  return Object.values(camouflages.camouflages)
+    .filter((camouflage) => camouflage.tank_id)
+    .map((camouflage) => ({
+      params: { id: camouflage.tank_id!, skin: camouflage.id },
+      props: { skin: camouflage.id },
+    }));
+});
+
+const camouflagesXml = await vfs.xml<{ root: CamouflagesXml }>(
+  "Data/XML/item_defs/vehicles/common/camouflages.xml",
+);
+const camouflagesYaml = await vfs.yaml<CamouflagesYaml>(
+  "Data/camouflages.yaml",
+);
+const customization = await vfs.yaml<
+  Record<string, { Name: string; Path: string }>
+>("Data/3d/Customization.yaml");
+
+export async function GET({ props }: APIContext<{ skin: number }>) {
+  const nodeIO = new NodeIO().registerExtensions(ALL_EXTENSIONS);
+
+  const items = new Map(
+    Object.values(customization).map(({ Name, Path }) => [
+      Name,
+      Path.replace("~res:/3d/", "").replace(/\.sc2$/, ""),
+    ]),
+  );
+  const key = Object.keys(camouflagesXml.root.camouflages).find(
+    (key) => camouflagesXml.root.camouflages[key].id === props.skin,
+  )!;
+  const include = camouflagesXml.root.camouflages[key].vehicleFilter.include;
+  const [nation, tankKey] = (
+    include as { vehicle: { name: string } }
+  ).vehicle.name.split(":");
+  const { preset, customEntities } = camouflagesYaml[key];
+  const skinNumber = Number(preset?.match(/(\d+)$/)?.[1] ?? 1);
+  const parameters = await vfs.yaml<TankParameters>(
+    `Data/3d/Tanks/Parameters/${nation}/${tankKey}.yaml`,
+  );
+  const basePath = parameters.resourcesPath.blitzModelPath.replace(
+    /\.sc2$/,
+    "",
+  );
+  const sc2 = new Sc2ReadStream(
+    (await vfs.file(`Data/3d/${basePath}.sc2`)).buffer as ArrayBuffer,
+  ).sc2();
+  const slots: Record<
+    string,
+    {
+      target: string;
+      position: Vector3Tuple;
+      rotation: Vector4Tuple;
+      scale: Vector3Tuple;
+    }
+  > = {};
+  const states: Record<string, string | null> = {};
+
+  parseHierarchies(sc2["#hierarchy"], null, (hierarchy, components) => {
+    for (const component of components) {
+      if (component["comp.typename"] === "NewSlotComponent") {
+        for (const slot of Object.values(component.slots)) {
+          slots[slot.name] = {
+            target: hierarchy.name,
+            position: slot.transform.position,
+            rotation: slot.transform.rotation,
+            scale: slot.transform.scale,
+          };
+        }
+      }
+
+      if (component["comp.typename"] === "SlotComponent") {
+        slots[component["sc.slotName"]] = {
+          target: hierarchy.name,
+          position: component["sc.attachmentTranslation"] as Vector3Tuple,
+          rotation: component["sc.attachmentRotation"] as Vector4Tuple,
+          scale: component["sc.attachmentScale"] as Vector3Tuple,
+        };
+      }
+
+      if (component["comp.typename"] !== "StateSwitcherComponent") continue;
+
+      const active = component[`ssc.state${component["ssc.activeState"]}`];
+      // camos without their own variant keep the default piece, but groups
+      // of elements to hide stay hidden
+      let state: string | null =
+        active && !/skin\d*/.test(active) && !active.includes("hide")
+          ? active
+          : null;
+
+      for (let index = 0; index < component["ssc.statesCount"]; index++) {
+        const name = component[`ssc.state${index}`];
+        const match = name.match(/skin(\d*)/);
+
+        if (
+          match &&
+          !name.includes("hide") &&
+          Number(match[1] || 1) === skinNumber
+        ) {
+          state = name;
+        }
+      }
+
+      states[hierarchy.name] = state;
+    }
+
+    return null;
+  });
+
+  const document = new Document();
+  const scene = document.createScene().setExtras({ states });
+  const targets = new Map<string, Node>();
+
+  document.createBuffer();
+
+  if (preset) await extractMaterials(document, sc2, basePath, preset);
+
+  for (const name in customEntities) {
+    const slot = slots[name];
+    const path = items.get(customEntities[name].item);
+
+    if (
+      !slot ||
+      !path ||
+      !(await vfs.resolve(`Data/3d/${path}.sc2`)) ||
+      !(await vfs.resolve(`Data/3d/${path}.scg`))
+    ) {
+      continue;
+    }
+
+    const part = await extractModel(vfs, path, true);
+    const map = mergeDocuments(document, part);
+    const partScene = map.get(part.getRoot().listScenes()[0]) as Scene;
+    const node = document
+      .createNode(name)
+      .setTranslation(slot.position)
+      .setRotation(slot.rotation)
+      .setScale(slot.scale);
+    let target = targets.get(slot.target);
+
+    if (!target) {
+      target = document.createNode(slot.target);
+      targets.set(slot.target, target);
+      scene.addChild(target);
+    }
+
+    for (const child of partScene.listChildren()) {
+      node.addChild(child as Node);
+    }
+
+    partScene.dispose();
+    target.addChild(node);
+  }
+
+  applySkinNumber(document, SKIN_NUMBER);
+
+  await document.transform(
+    dedup({ propertyTypes: [PropertyType.ACCESSOR, PropertyType.TEXTURE] }),
+    unpartition(),
+  );
+
+  return new Response(await nodeIO.writeBinary(document));
+}
+
+function applySkinNumber(document: Document, number: string) {
+  const start = Math.ceil((SKIN_NUMBER_SLOTS - number.length) / 2) + 1;
+
+  for (const node of document.getRoot().listNodes()) {
+    const match = node.getName().match(/_number_\d+_(\d+)$/);
+
+    if (!match) continue;
+
+    const digit = number[Number(match[1]) - start];
+
+    if (digit === undefined) {
+      node.dispose();
+      continue;
+    }
+
+    const cell = (Number(digit) + 9) % 10;
+    const column = cell % DIGIT_COLUMNS;
+    const row = Math.floor(cell / DIGIT_COLUMNS);
+
+    node.traverse((child) => {
+      for (const primitive of child.getMesh()?.listPrimitives() ?? []) {
+        const uvs = primitive.getAttribute("TEXCOORD_0")?.clone();
+
+        if (!uvs) continue;
+
+        for (let index = 0; index < uvs.getCount(); index++) {
+          const [u, v] = uvs.getElement(index, [0, 0]) as [number, number];
+
+          uvs.setElement(index, [
+            (column + u) / DIGIT_COLUMNS,
+            (row + v) / DIGIT_ROWS,
+          ]);
+        }
+
+        primitive.setAttribute("TEXCOORD_0", uvs);
+      }
+    });
+  }
+}

packages/website/src/pages/[...chunk_models_legendary]/_index.ts

@@ -0,0 +1,3 @@
+import { chunkedStaticPaths } from "../../core/blitzkit/chunkedStaticPaths";
+
+export const getStaticPaths = chunkedStaticPaths("models_legendary");

packages/website/src/pages/[...chunk_models_tanks]/[id]/_index.ts

@@ -0,0 +1,12 @@
+import { api } from "../../../core/blitzkit/api";
+import { mixStaticPaths } from "../../../core/blitzkit/mixStaticPaths";
+import { getStaticPaths as _getStaticPaths } from "../_index";
+
+export const getStaticPaths = mixStaticPaths(_getStaticPaths, async () => {
+  const tanks = await api.tankDefinitions();
+
+  return Object.values(tanks.tanks).map((tank) => ({
+    params: { id: tank.id },
+    props: { id: tank.id },
+  }));
+});

packages/website/src/pages/[...chunk_models_tanks]/[id]/collision.glb.ts

@@ -1,17 +1,16 @@
 import {
+  parseHierarchies,
   Sc2ReadStream,
   ScgReadStream,
   toUniqueId,
   VertexAttribute,
   vertexAttributeVectorSizes,
-  type Hierarchy,
   type VehicleDefinitionList,
 } from "@blitzkit/core";
 import type { AbstractVFS } from "@blitzkit/core/src/blitzkit/vfs/abstract";
 import { Accessor, Document, Node, NodeIO, Scene } from "@gltf-transform/core";
 import type { APIContext } from "astro";
-import { times } from "lodash-es";
-import { vfs } from "../../../../core/blitzkit/vfs";
+import { vfs } from "../../../core/blitzkit/vfs";
 
 export { getStaticPaths } from "./_index";
 
@@ -56,13 +55,10 @@ async function extractArmor(vfs: AbstractVFS, fileName: string) {
   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")],
-      );
-
+  parseHierarchies<Scene | Node>(
+    sc2["#hierarchy"],
+    scene,
+    (hierarchy, components, parent) => {
       components.forEach((component) => {
         switch (component["comp.typename"]) {
           case "TransformComponent":
@@ -163,13 +159,9 @@ async function extractArmor(vfs: AbstractVFS, fileName: string) {
         }
       });
 
-      if (hierarchy["#hierarchy"]) {
-        parseHierarchies(hierarchy["#hierarchy"], parent);
-      }
-    });
-  }
-
-  parseHierarchies(sc2["#hierarchy"], scene);
+      return parent;
+    },
+  );
 
   return document;
 }

packages/website/src/pages/[...chunk_models_tanks]/[id]/model.glb.ts

@@ -1,13 +1,13 @@
 import {
   bufferToBigInt,
   DdsReadStream,
+  parseHierarchies,
   PvrReadStream,
   Sc2ReadStream,
   ScgReadStream,
   toUniqueId,
   VertexAttribute,
   type ConfigArchive,
-  type Hierarchy,
   type TankParameters,
   type Textures,
   type VehicleDefinitionList,
@@ -17,10 +17,10 @@ import { Document, Material, Node, NodeIO, Scene } from "@gltf-transform/core";
 import { ALL_EXTENSIONS } from "@gltf-transform/extensions";
 import { dedup, prune } from "@gltf-transform/functions";
 import type { APIContext } from "astro";
-import { times } from "lodash-es";
+import { isEqual, times } from "lodash-es";
 import { dirname } from "path";
 import sharp from "sharp";
-import { vfs } from "../../../../core/blitzkit/vfs";
+import { vfs } from "../../../core/blitzkit/vfs";
 import {
   vertexAttributeGLTFName,
   vertexAttributeGltfVectorSizes,
@@ -69,7 +69,11 @@ const omitMeshNames = {
   end: ["_POINT"],
 };
 
-async function extractModel(vfs: AbstractVFS, path: string) {
+export async function extractModel(
+  vfs: AbstractVFS,
+  path: string,
+  isPart = false,
+) {
   const sc2Path = `Data/3d/${path}.sc2`;
   const scgPath = `Data/3d/${path}.scg`;
   const sc2 = new Sc2ReadStream(
@@ -81,6 +85,153 @@ async function extractModel(vfs: AbstractVFS, path: string) {
   const document = new Document();
   const scene = document.createScene();
   const buffer = document.createBuffer();
+  const materials = await extractMaterials(document, sc2, path);
+
+  parseHierarchies<Scene | Node>(
+    sc2["#hierarchy"],
+    scene,
+    (hierarchy, components, parent) => {
+      if (
+        omitMeshNames.start.some((omit) => hierarchy.name.startsWith(omit)) ||
+        omitMeshNames.end.some((omit) => hierarchy.name.endsWith(omit))
+      )
+        return;
+
+      const node = document.createNode(hierarchy.name);
+
+      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 localTranslation = component["tc.localTranslation"];
+            // The game resets top-level node translation to [0, 0, 0] on load.
+            // Child nodes and customization parts must keep their authored
+            // local offsets.
+            node.setTranslation(
+              parent instanceof Scene && !isPart ? [0, 0, 0] : localTranslation,
+            );
+            node.setRotation(component["tc.localRotation"]);
+            node.setScale(component["tc.localScale"]);
+
+            break;
+          }
+
+          case "StateSwitcherComponent":
+            node.setExtras({
+              state: component[`ssc.state${component["ssc.activeState"]}`],
+            });
+            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)
+                .setName(batchKey);
+
+              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);
+                });
+              });
+
+              attributes.forEach((value, attribute) => {
+                const name = vertexAttributeGLTFName[attribute];
+
+                if (
+                  name === undefined ||
+                  primitive.getAttribute(name) !== null
+                ) {
+                  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"]}`,
+              );
+            }
+          }
+        }
+      });
+
+      parent.addChild(node);
+
+      return node;
+    },
+  );
+
+  scene.addChild(document.createNode("test"));
+
+  await document.transform(prune({ keepAttributes: true }), dedup());
+
+  return document;
+}
+
+export async function extractMaterials(
+  document: Document,
+  sc2: ReturnType<Sc2ReadStream["sc2"]>,
+  path: string,
+  config?: string,
+) {
   const materials = new Map<bigint, Material | bigint | undefined>();
 
   for (const node of sc2["#dataNodes"]) {
@@ -95,15 +246,32 @@ async function extractModel(vfs: AbstractVFS, path: string) {
       continue;
     }
 
-    const material = document.createMaterial(node.materialName);
     let textures: Textures | undefined = undefined;
 
-    if (node.textures) {
+    if (config !== undefined) {
+      if (typeof node.configCount !== "number") continue;
+
+      const archive = times(
+        node.configCount,
+        (index) => node[`configArchive_${index}`],
+      ).find((archive) => archive.configName === config);
+
+      if (
+        !archive ||
+        isEqual(archive.textures, node.configArchive_0.textures)
+      ) {
+        continue;
+      }
+
+      textures = archive.textures;
+    } else if (node.textures) {
       textures = node.textures;
     } else if (typeof node.configCount === "number") {
       textures = node.configArchive_0.textures;
     }
 
+    const material = document.createMaterial(node.materialName);
+
     if (textures) {
       const baseColor = await readBaseColor(
         `Data/3d/${dirname(path)}/${textures.baseColorMap ?? textures.albedo}`,
@@ -240,157 +408,7 @@ async function extractModel(vfs: AbstractVFS, path: string) {
     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 t = component["tc.localTranslation"];
-            const r = component["tc.localRotation"];
-
-            node.setTranslation([t[0], t[2], -t[1]]);
-            node.setRotation([r[0], r[2], -r[1], r[3]]);
-            node.setScale(component["tc.localScale"]);
-
-            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)
-                .setName(batchKey);
-
-              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);
-                });
-              });
-
-              attributes.forEach((value, attribute) => {
-                const name = vertexAttributeGLTFName[attribute];
-
-                if (
-                  name === undefined ||
-                  primitive.getAttribute(name) !== null
-                ) {
-                  return;
-                }
-
-                const vertexSize = vertexAttributeGltfVectorSizes[attribute];
-                const processed = new Float32Array(value.flat());
-
-                if (
-                  attribute === VertexAttribute.VERTEX ||
-                  attribute === VertexAttribute.NORMAL ||
-                  attribute === VertexAttribute.TANGENT ||
-                  attribute === VertexAttribute.BINORMAL
-                ) {
-                  for (let i = 0; i < processed.length; i += 3) {
-                    const y = processed[i + 1];
-                    const z = processed[i + 2];
-
-                    processed[i + 1] = z;
-                    processed[i + 2] = -y;
-                  }
-                }
-
-                const attributeAccessor = document
-                  .createAccessor(name)
-                  .setType(vertexSize === 1 ? "SCALAR" : `VEC${vertexSize}`)
-                  .setArray(processed)
-                  .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);
-
-  scene.addChild(document.createNode("test"));
-
-  await document.transform(prune({ keepAttributes: true }), dedup());
-
-  return document;
+  return materials;
 }
 
 async function readBaseColor(path: string) {

packages/website/src/pages/[...chunk_models_tanks]/_index.ts

@@ -0,0 +1,3 @@
+import { chunkedStaticPaths } from "../../core/blitzkit/chunkedStaticPaths";
+
+export const getStaticPaths = chunkedStaticPaths("models_tanks");

packages/website/src/stores/tankopedia.ts

@@ -105,6 +105,9 @@ interface Tankopedia {
   );
   xpMultiplier: (typeof XP_MULTIPLIERS)[number];
   customShell?: ShellDefinition;
+  requestedSkin?: number;
+  loadedSkin?: number;
+  skin?: number;
   requestedDisplay: TankopediaDisplay;
   display: TankopediaDisplay;
   statSearch?: string;