feat: logs

.vscode/settings.json

@@ -92,6 +92,7 @@
     "GLTF",
     "gtag",
     "haha",
+    "Herdbreaker",
     "highp",
     "iife",
     "imgur",

docs/changelogs/1.28.4.md

@@ -0,0 +1,10 @@
+# BlitzKit 1.28.4
+
+## Fixes
+
+- The tank names in the Tankopedia sandbox now have less margin from the navbar
+- Controls in the Tankopedia sandbox are now shown in all modes, except for the advanced highlighting button which only appears in the dynamic armor mode
+- The settings page now reacts to input again
+- The settings page now has a tab title and description for search engines
+- Added support for transparent textures, fixing tanks like the Herdbreaker and the WZ-132-1
+- The tank filters in the Performance and Tier-List tools work once again

package.json

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

packages/core/src/blitzkit/metaSortTank.ts

@@ -1,5 +1,5 @@
-import { TANK_CLASSES } from '../blitz/constants';
-import { GameDefinitions, TankDefinition, TankType } from '../protos';
+import { TANK_CLASSES } from "../blitz/constants";
+import { GameDefinitions, TankDefinition, TankType } from "../protos";
 
 const treeTypeOrder = [
   TankType.RESEARCHABLE,
@@ -9,20 +9,20 @@ const treeTypeOrder = [
 
 export function metaSortTank(
   tanks: TankDefinition[],
-  gameDefinitions: GameDefinitions,
+  gameDefinitions: GameDefinitions
 ) {
   return tanks
     .sort((a, b) => b.tier - a.tier)
     .sort(
-      (a, b) => treeTypeOrder.indexOf(b.type) - treeTypeOrder.indexOf(a.type),
+      (a, b) => treeTypeOrder.indexOf(b.type) - treeTypeOrder.indexOf(a.type)
     )
     .sort(
-      (a, b) => TANK_CLASSES.indexOf(b.class) - TANK_CLASSES.indexOf(a.class),
+      (a, b) => TANK_CLASSES.indexOf(b.class) - TANK_CLASSES.indexOf(a.class)
     )
     .sort(
       (a, b) =>
         gameDefinitions.nations.indexOf(b.nation) -
-        gameDefinitions.nations.indexOf(a.nation),
+        gameDefinitions.nations.indexOf(a.nation)
     )
     .sort((a, b) => a.tier - b.tier);
 }

packages/core/src/streams/sc2.ts

@@ -1,20 +1,19 @@
-import { Vector3Tuple, Vector4Tuple } from 'three';
-import { ScpgReadStream } from './scpg';
+import { Vector3Tuple, Vector4Tuple } from "three";
+import { ScpgReadStream } from "./scpg";
 
 export interface SC2 {
-  '#dataNodes': DataNode[];
-  '#hierarchy': Hierarchy[];
-  '#sceneComponents': SceneComponents;
+  "#dataNodes": DataNode[];
+  "#hierarchy": Hierarchy[];
+  "#sceneComponents": SceneComponents;
 }
 
 type DataNode = {
-  '##name': 'NMaterial';
-  '#id': ArrayBuffer;
+  "##name": "NMaterial";
+  "#id": ArrayBuffer;
   materialName: string;
   parentMaterialKey?: bigint;
   qualityGroup?: string;
   fxName?: string;
-
   textures?: Textures;
 } & (
   | ({
@@ -80,8 +79,8 @@ export interface Textures {
 }
 
 export interface Hierarchy {
-  '##name': 'Entity';
-  '#hierarchy'?: Hierarchy[];
+  "##name": "Entity";
+  "#hierarchy"?: Hierarchy[];
   components: Components;
   flags: number;
   id: bigint;
@@ -97,12 +96,12 @@ type Components = {
 type RoBatches = Record<
   string,
   {
-    '##name': 'RenderBatch';
-    'rb.aabbox': RbAabbox;
-    'rb.classname': 'RenderBatch';
-    'rb.datasource': bigint;
-    'rb.nmatname': bigint;
-    'rb.sortingKey': number;
+    "##name": "RenderBatch";
+    "rb.aabbox": RbAabbox;
+    "rb.classname": "RenderBatch";
+    "rb.datasource": bigint;
+    "rb.nmatname": bigint;
+    "rb.sortingKey": number;
   }
 >;
 
@@ -113,50 +112,50 @@ interface RbAabbox {
 
 export type Component =
   | {
-      'comp.typename': 'TransformComponent';
-      'tc.localRotation': Vector4Tuple;
-      'tc.localScale': Vector3Tuple;
-      'tc.localTranslation': Vector3Tuple;
-      'tc.worldRotation': Vector4Tuple;
-      'tc.worldScale': Vector3Tuple;
-      'tc.worldTranslation': Vector3Tuple;
+      "comp.typename": "TransformComponent";
+      "tc.localRotation": Vector4Tuple;
+      "tc.localScale": Vector3Tuple;
+      "tc.localTranslation": Vector3Tuple;
+      "tc.worldRotation": Vector4Tuple;
+      "tc.worldScale": Vector3Tuple;
+      "tc.worldTranslation": Vector3Tuple;
     }
   | {
-      'comp.typename': 'RenderComponent';
-      'rc.renderObj': {
-        '##name': 'Mesh';
-        'ro.batchCount': number;
-        'ro.batches': RoBatches;
-        'ro.debugflags': number;
-        'ro.flags': number;
-        'ro.notShadowOnly': boolean;
-        'ro.sOclCull': boolean;
-        'ro.sOclIndex': number;
-      } & Record<`rb${number}.${'lodIndex' | 'switchIndex'}`, number>;
+      "comp.typename": "RenderComponent";
+      "rc.renderObj": {
+        "##name": "Mesh";
+        "ro.batchCount": number;
+        "ro.batches": RoBatches;
+        "ro.debugflags": number;
+        "ro.flags": number;
+        "ro.notShadowOnly": boolean;
+        "ro.sOclCull": boolean;
+        "ro.sOclIndex": number;
+      } & Record<`rb${number}.${"lodIndex" | "switchIndex"}`, number>;
     }
   | {
-      'comp.typename': 'SlotComponent';
-      'sc.attachmentRotation': number[];
-      'sc.attachmentScale': number[];
-      'sc.attachmentTranslation': number[];
-      'sc.configFilePath': string;
-      'sc.slotName': string;
-      'sc.template': string;
-      'sc.typeFiltersCount': number;
+      "comp.typename": "SlotComponent";
+      "sc.attachmentRotation": number[];
+      "sc.attachmentScale": number[];
+      "sc.attachmentTranslation": number[];
+      "sc.configFilePath": string;
+      "sc.slotName": string;
+      "sc.template": string;
+      "sc.typeFiltersCount": number;
     }
   | {
-      'comp.typename': 'LodComponent';
-      'lc.loddist': Record<`distance${number}`, number>;
+      "comp.typename": "LodComponent";
+      "lc.loddist": Record<`distance${number}`, number>;
     }
   | {
-      'comp.typename': 'DecorItemComponent';
+      "comp.typename": "DecorItemComponent";
       drawOrder: number;
       shouldApplyCamo: boolean;
       vanishTargetAlpha: number;
       vanishWhenArmorShown: boolean;
     }
   | {
-      'comp.typename': 'NewSlotComponent';
+      "comp.typename": "NewSlotComponent";
       slotItemsCount: number;
       slots: {
         [key: string]: {
@@ -171,109 +170,109 @@ export type Component =
       };
     }
   | {
-      'comp.typename': 'ScenarioComponent';
-      'scenario.scriptId': string;
+      "comp.typename": "ScenarioComponent";
+      "scenario.scriptId": string;
     }
   | ({
-      'comp.typename': 'StateSwitcherComponent';
-      'ssc.activeState': number;
-      'ssc.statesCount': number;
+      "comp.typename": "StateSwitcherComponent";
+      "ssc.activeState": number;
+      "ssc.statesCount": number;
     } & Record<`ssc.state${number}`, string>)
   | {
-      'comp.typename': 'CustomPropertiesComponent';
-      'cpc.properties.archive': {
-        'editor.donotremove': number;
+      "comp.typename": "CustomPropertiesComponent";
+      "cpc.properties.archive": {
+        "editor.donotremove": number;
       };
     }
   | ({
-      'comp.typename': 'ActionComponent';
-      'ac.actionCount': number;
+      "comp.typename": "ActionComponent";
+      "ac.actionCount": number;
     } & Record<
       string, // 0000, 0001, ...
       {
-        'act.delay': number;
-        'act.delayVariation': number;
-        'act.entityName': string;
-        'act.event': number;
-        'act.eventToTrigger': string;
-        'act.motionFrameTime': number;
-        'act.motionSpeed': number;
-        'act.stateActivated': number;
-        'act.stopAfterNRepeats': number;
-        'act.stopWhenEmpty': boolean;
-        'act.switchIndex': number;
-        'act.type': number;
-        'act.userEventId': string;
+        "act.delay": number;
+        "act.delayVariation": number;
+        "act.entityName": string;
+        "act.event": number;
+        "act.eventToTrigger": string;
+        "act.motionFrameTime": number;
+        "act.motionSpeed": number;
+        "act.stateActivated": number;
+        "act.stopAfterNRepeats": number;
+        "act.stopWhenEmpty": boolean;
+        "act.switchIndex": number;
+        "act.type": number;
+        "act.userEventId": string;
       }
     >)
   | {
-      'comp.typename': 'ParticleEffectComponent';
-      'pe.clearOnRestart': boolean;
-      'pe.effectDuration': number;
-      'pe.emitters': {
-        '##name': string;
-        'emitter.data': {
-          'emitter.id': `${number}`;
-          'emitter.quality': string;
+      "comp.typename": "ParticleEffectComponent";
+      "pe.clearOnRestart": boolean;
+      "pe.effectDuration": number;
+      "pe.emitters": {
+        "##name": string;
+        "emitter.data": {
+          "emitter.id": `${number}`;
+          "emitter.quality": string;
         }[];
-        'emitter.position': Vector3Tuple;
-        'emitter.rotation': Vector4Tuple;
-        'emitter.scale': Vector3Tuple;
+        "emitter.position": Vector3Tuple;
+        "emitter.rotation": Vector4Tuple;
+        "emitter.scale": Vector3Tuple;
       }[];
-      'pe.inheritScale': boolean;
-      'pe.nestedEmitters': boolean;
-      'pe.repeatsCount': number;
-      'pe.startFromTime': number;
-      'pe.stopWhenEmpty': boolean;
-      'pe.version': number;
-      'ro.flags': number;
+      "pe.inheritScale": boolean;
+      "pe.nestedEmitters": boolean;
+      "pe.repeatsCount": number;
+      "pe.startFromTime": number;
+      "pe.stopWhenEmpty": boolean;
+      "pe.version": number;
+      "ro.flags": number;
     }
   | {
-      'comp.typename': 'TankElementComponent';
+      "comp.typename": "TankElementComponent";
       isDestructible: boolean;
       shouldCastShadow: boolean;
       shouldGenerateSilhouette: boolean;
     }
   | {
-      'comp.typename': 'MotionComponent';
-      'motion.filepath': string;
-      'motion.playbackRate': number;
-      'simpleMotion.repeatsCount': number;
+      "comp.typename": "MotionComponent";
+      "motion.filepath": string;
+      "motion.playbackRate": number;
+      "simpleMotion.repeatsCount": number;
     }
   | {
-      'comp.typename': 'SkeletonComponent';
+      "comp.typename": "SkeletonComponent";
       joints: Record<
         string, // 0000, 0001, ...
         {
-          'joint.bbox.max': Vector3Tuple;
-          'joint.bbox.min': Vector3Tuple;
-          'joint.bindPose': [
+          "joint.bbox.max": Vector3Tuple;
+          "joint.bbox.min": Vector3Tuple;
+          "joint.bindPose": [
             Vector4Tuple,
             Vector4Tuple,
             Vector4Tuple,
             Vector4Tuple,
           ];
-          'joint.invBindPose': [
+          "joint.invBindPose": [
             Vector4Tuple,
             Vector4Tuple,
             Vector4Tuple,
             Vector4Tuple,
           ];
-          'joint.name': string;
-          'joint.parentIndex': number;
-          'joint.uid': string;
+          "joint.name": string;
+          "joint.parentIndex": number;
+          "joint.uid": string;
         }
       >;
       jointsCount: number;
     }
   | {
-      'comp.typename': 'AnimationComponent';
+      "comp.typename": "AnimationComponent";
       animation: bigint;
       animationTimeScale: number;
       repeatsCount: number;
     }
   | {
-      'comp.typename': 'SkeletonJointBindingComponent';
+      "comp.typename": "SkeletonJointBindingComponent";
       count: number;
       map: Record<
         string, // 0000, 0001, ...

packages/i18n/src/literals.ts

@@ -1,5 +1,3 @@
-import { assertSecret } from "@blitzkit/core";
-
 export function literals(
   string: string,
   literals?: Record<string, string | number | undefined>

packages/i18n/strings/en.json

@@ -731,6 +731,8 @@
     },
 
     "settings": {
+      "title": "Settings",
+      "description": "Change BlitzKit settings",
       "dev_mode": "Development mode",
       "language": "Language"
     },

packages/scripts/src/buildAssets/tankModels.ts

@@ -31,12 +31,12 @@ export async function tankModels() {
 
     let index = 0;
     for (const [tankKey, tank] of entries) {
-      console.log(`  ${++index} / ${entries.length} : ${tankKey}`);
-
       if (tankKey.includes("tutorial_bot")) continue;
 
       const id = toUniqueId(nation, tank.id);
 
+      console.log(`  ${++index} / ${entries.length} : ${tankKey}`);
+
       const parameters = await readYAMLDVPL<TankParameters>(
         `${DATA}/3d/Tanks/Parameters/${nation}/${tankKey}.yaml`
       );

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

@@ -39,82 +39,95 @@ export async function extractModel(data: string, path: string) {
   const buffer = document.createBuffer();
   const materials = new Map<bigint, Material | bigint | undefined>();
 
-  // create materials
-  await Promise.all(
-    sc2["#dataNodes"].map(async (node) => {
-      const id = new DataView(node["#id"]).getBigUint64(0, true);
+  for (const node of sc2["#dataNodes"]) {
+    const id = new DataView(node["#id"]).getBigUint64(0, true);
 
-      if (node.parentMaterialKey !== undefined) {
-        /**
-         * material depends on a parent and doesn't seem to have any
-         * properties so we just point it to the parent
-         */
-        materials.set(id, node.parentMaterialKey);
-        return;
+    if (node.parentMaterialKey !== undefined) {
+      /**
+       * material depends on a parent and doesn't seem to have any
+       * properties so we just point it to the parent
+       */
+      materials.set(id, node.parentMaterialKey);
+      continue;
+    }
+
+    const material = document.createMaterial(node.materialName);
+    let textures: Textures | undefined = undefined;
+
+    if (node.textures) {
+      textures = node.textures;
+    } else if (typeof node.configCount === "number") {
+      textures = node.configArchive_0.textures;
+    }
+
+    if (textures) {
+      material.setBaseColorTexture(
+        document
+          .createTexture(node.materialName)
+          .setMimeType("image/webp")
+          .setImage(
+            await readBaseColor(
+              `${data}/3d/${dirname(path)}/${textures.baseColorMap ?? textures.albedo}`,
+              textures.miscMap
+                ? `${data}/3d/${dirname(path)}/${textures.miscMap}`
+                : undefined
+            )
+          )
+      );
+
+      if (node.configCount) {
+        for (
+          let configIndex = 0;
+          configIndex < node.configCount;
+          configIndex++
+        ) {
+          const archive = node[`configArchive_${configIndex}`];
+
+          if (
+            archive.configName !== "Default" ||
+            !archive.enabledPresets?.AlphaTest
+          ) {
+            continue;
+          }
+
+          material.setAlphaMode("BLEND").setDoubleSided(true);
+        }
       }
 
-      const material = document.createMaterial(node.materialName);
-      let textures: Textures | undefined = undefined;
-
-      if (node.textures) {
-        textures = node.textures;
-      } else if (typeof node.configCount === "number") {
-        textures = node.configArchive_0.textures;
-      }
-
-      if (textures) {
-        material.setBaseColorTexture(
+      if (textures.baseRMMap) {
+        material.setMetallicRoughnessTexture(
           document
             .createTexture(node.materialName)
-            .setMimeType("image/jpeg")
+            .setMimeType("image/webp")
             .setImage(
-              await readBaseColor(
-                `${data}/3d/${dirname(path)}/${textures.baseColorMap ?? textures.albedo}`,
-                textures.miscMap
-                  ? `${data}/3d/${dirname(path)}/${textures.miscMap}`
-                  : undefined
+              await readRoughnessMetallic(
+                `${data}/3d/${dirname(path)}/${textures.baseRMMap}`
               )
             )
         );
+      }
 
-        if (textures.baseRMMap) {
-          material.setMetallicRoughnessTexture(
-            document
-              .createTexture(node.materialName)
-              .setMimeType("image/jpeg")
-              .setImage(
-                await readRoughnessMetallic(
-                  `${data}/3d/${dirname(path)}/${textures.baseRMMap}`
-                )
+      if (textures.baseNormalMap ?? textures.normalmap) {
+        const isBase = textures.baseNormalMap !== undefined;
+
+        material.setNormalTexture(
+          document
+            .createTexture(node.materialName)
+            .setMimeType("image/webp")
+            .setImage(
+              await readNormal(
+                `${data}/3d/${dirname(path)}/${
+                  textures.baseNormalMap ?? textures.normalmap
+                }`,
+                isBase
               )
-          );
-        }
-
-        if (textures.baseNormalMap ?? textures.normalmap) {
-          const isBase = textures.baseNormalMap !== undefined;
-
-          material.setNormalTexture(
-            document
-              .createTexture(node.materialName)
-              .setMimeType("image/jpeg")
-              .setImage(
-                await readNormal(
-                  `${data}/3d/${dirname(path)}/${
-                    textures.baseNormalMap ?? textures.normalmap
-                  }`,
-                  isBase
-                )
-              )
-          );
-        }
-
-        materials.set(
-          new DataView(node["#id"]).getBigUint64(0, true),
-          material
+            )
         );
       }
-    })
-  );
+
+      materials.set(new DataView(node["#id"]).getBigUint64(0, true), material);
+    }
+  }
 
   // replace children materials with parents
   materials.forEach((material, id) => {

packages/scripts/src/core/blitz/readBaseColor.ts

@@ -6,10 +6,7 @@ export async function readBaseColor(path: string, occlusionPath?: string) {
   const occlusionRaw = occlusionPath
     ? await readTexture(occlusionPath)
     : undefined;
-  const base = await sharp(baseRaw.data, { raw: baseRaw })
-    .removeAlpha()
-    .raw()
-    .toBuffer();
+  const base = await sharp(baseRaw.data, { raw: baseRaw }).raw().toBuffer();
   const occlusion = occlusionRaw
     ? await sharp(occlusionRaw.data, { raw: occlusionRaw })
         .extractChannel(3)
@@ -17,7 +14,7 @@ export async function readBaseColor(path: string, occlusionPath?: string) {
         .toBuffer()
     : undefined;
 
-  const combined = Buffer.alloc(baseRaw.width * baseRaw.height * 3);
+  const combined = Buffer.alloc(baseRaw.width * baseRaw.height * 4);
 
   for (let i = 0; i < baseRaw.width * baseRaw.height; i++) {
     let c = 1;
@@ -33,15 +30,16 @@ export async function readBaseColor(path: string, occlusionPath?: string) {
       c = occlusion![occlusionI] / 255;
     }
 
-    combined[i * 3 + 0] = Math.round(base[i * 3 + 0] * c);
-    combined[i * 3 + 1] = Math.round(base[i * 3 + 1] * c);
-    combined[i * 3 + 2] = Math.round(base[i * 3 + 2] * c);
+    combined[i * 4 + 0] = Math.round(base[i * 4 + 0] * c);
+    combined[i * 4 + 1] = Math.round(base[i * 4 + 1] * c);
+    combined[i * 4 + 2] = Math.round(base[i * 4 + 2] * c);
+    combined[i * 4 + 3] = base[i * 4 + 3];
   }
 
   const image = await sharp(combined, {
-    raw: { width: baseRaw.width, height: baseRaw.height, channels: 3 },
+    raw: { width: baseRaw.width, height: baseRaw.height, channels: 4 },
   })
-    .jpeg()
+    .webp()
     .toBuffer();
 
   return image;

packages/scripts/src/core/blitz/readNormal.ts

@@ -25,5 +25,5 @@ export async function readNormal(path: string, isBase: boolean) {
     raw.data[index + 3] = 255;
   }
 
-  return await sharp(raw.data, { raw }).jpeg().toBuffer();
+  return await sharp(raw.data, { raw }).webp().toBuffer();
 }

packages/scripts/src/core/blitz/readRoughnessMetallic.ts

@@ -17,7 +17,7 @@ export async function readRoughnessMetallic(path: string) {
   const image = await sharp(combined, {
     raw: { width: raw.width, height: raw.height, channels: 3 },
   })
-    .jpeg()
+    .webp()
     .toBuffer();
 
   return image;

packages/varuna/src/index.ts

@@ -109,7 +109,10 @@ export class Varuna<Type, Arguments = void> {
     const instance = this;
     const [slice, setSlice] = useState(initial);
 
-    useEffect(() => instance.on(slicer, setSlice), []);
+    useEffect(() => {
+      setSlice(slicer(instance.state));
+      return instance.on(slicer, setSlice);
+    }, []);
 
     return slice;
   }

packages/website/src/components/Navbar.astro

@@ -29,7 +29,7 @@ const strings = getStrings(locale);
 
 <style>
   .navbar,
-  .padder {
+  .navbar-padder {
     transition-duration: 1s;
   }
 
@@ -37,7 +37,7 @@ const strings = getStrings(locale);
     transform: translateY(-100%);
   }
 
-  body.no-navbar .padder {
+  body.no-navbar .navbar-padder {
     height: 0;
   }
 
@@ -79,7 +79,7 @@ const strings = getStrings(locale);
   });
 </script>
 
-<Box className="padder" height={{ initial: "3.5rem", sm: "3rem" }} />
+<Box className="navbar-padder" height={{ initial: "3.5rem", sm: "3rem" }} />
 
 <Flex
   direction="column"

packages/website/src/components/Performance/Tanks.tsx

@@ -1,9 +1,10 @@
 import { Table } from "@radix-ui/themes";
 import { times } from "lodash-es";
 import { Fragment, Suspense, useEffect, useMemo, useState } from "react";
+import usePromise from "react-promise-suspense";
 import { awaitableAverageDefinitions } from "../../core/awaitables/averageDefinitions";
 import { awaitableTankDefinitions } from "../../core/awaitables/tankDefinitions";
-import { filterTank } from "../../core/blitzkit/filterTank";
+import { filterTanks } from "../../core/blitzkit/filterTanks";
 import { Performance } from "../../stores/performance";
 import { TankFilters } from "../../stores/tankFilters";
 import { TankPerformanceSort } from "../../stores/tankPerformanceSort";
@@ -20,12 +21,7 @@ const [tankDefinitions, averageDefinitions] = await Promise.all([
   awaitableAverageDefinitions,
 ]);
 
-const averageDefinitionsArray = Object.entries(averageDefinitions.averages).map(
-  ([id, average]) => ({
-    id: Number(id),
-    ...average,
-  })
-);
+const tankList = Object.values(tankDefinitions.tanks);
 
 export function Tanks({ skeleton }: MaybeSkeletonComponentProps) {
   if (skeleton) {
@@ -39,98 +35,109 @@ export function Tanks({ skeleton }: MaybeSkeletonComponentProps) {
   }
 
   const sort = TankPerformanceSort.use();
+  const filters = TankFilters.use();
+  const filteredTanks = usePromise(
+    () =>
+      filterTanks(filters, tankList).then((tanks) =>
+        tanks.filter(({ id }) => id in averageDefinitions.averages)
+      ),
+    // react-promise-suspense has awful type annotations
+    [filters] as any
+  );
+  const tanksMapped = useMemo(
+    () =>
+      filteredTanks.map(({ id }) => ({
+        id,
+        ...averageDefinitions.averages[id],
+      })),
+    [filters]
+  );
   const tanksSorted = useMemo(() => {
     const { playerCountPeriod } = Performance.state;
 
     switch (sort.type) {
       case "accuracy":
-        return averageDefinitionsArray.sort(
+        return tanksMapped.sort(
           (a, b) =>
             sort.direction * (a.mu.hits / a.mu.shots - b.mu.hits / b.mu.shots)
         );
       case "capture_points":
-        return averageDefinitionsArray.sort(
+        return tanksMapped.sort(
           (a, b) =>
             sort.direction *
             (a.mu.capture_points / a.mu.battles -
               b.mu.capture_points / b.mu.battles)
         );
       case "damage":
-        return averageDefinitionsArray.sort(
+        return tanksMapped.sort(
           (a, b) =>
             sort.direction *
             (a.mu.damage_dealt / a.mu.battles -
               b.mu.damage_dealt / b.mu.battles)
         );
       case "damage_ratio":
-        return averageDefinitionsArray.sort(
+        return tanksMapped.sort(
           (a, b) =>
             sort.direction *
             (a.mu.damage_dealt / a.mu.damage_received -
               b.mu.damage_dealt / b.mu.damage_received)
         );
       case "damage_taken":
-        return averageDefinitionsArray.sort(
+        return tanksMapped.sort(
           (a, b) =>
             sort.direction *
             (a.mu.damage_received / a.mu.battles -
               b.mu.damage_received / b.mu.battles)
         );
       case "hits":
-        return averageDefinitionsArray.sort(
+        return tanksMapped.sort(
           (a, b) =>
             sort.direction *
             (a.mu.hits / a.mu.battles - b.mu.hits / b.mu.battles)
         );
       case "kills":
-        return averageDefinitionsArray.sort(
+        return tanksMapped.sort(
           (a, b) =>
             sort.direction *
             (a.mu.frags / a.mu.battles - b.mu.frags / b.mu.battles)
         );
       case "shots":
-        return averageDefinitionsArray.sort(
+        return tanksMapped.sort(
           (a, b) =>
             sort.direction *
             (a.mu.shots / a.mu.battles - b.mu.shots / b.mu.battles)
         );
       case "players":
-        return averageDefinitionsArray.sort(
+        return tanksMapped.sort(
           (a, b) =>
             sort.direction *
             (a.samples[playerCountPeriod] - b.samples[playerCountPeriod])
         );
       case "spots":
-        return averageDefinitionsArray.sort(
+        return tanksMapped.sort(
           (a, b) =>
             sort.direction *
             (a.mu.spotted / a.mu.battles - b.mu.spotted / b.mu.battles)
         );
       case "survival":
-        return averageDefinitionsArray.sort(
+        return tanksMapped.sort(
           (a, b) =>
             sort.direction *
             (a.mu.survived_battles / a.mu.battles -
               b.mu.survived_battles / b.mu.battles)
         );
       case "winrate":
-        return averageDefinitionsArray.sort(
+        return tanksMapped.sort(
           (a, b) =>
             sort.direction *
             (a.mu.wins / a.mu.battles - b.mu.wins / b.mu.battles)
         );
       case "xp":
-        return averageDefinitionsArray.sort(
+        return tanksMapped.sort(
           (a, b) =>
             sort.direction * (a.mu.xp / a.mu.battles - b.mu.xp / b.mu.battles)
         );
     }
-  }, [sort]);
-  const filters = TankFilters.use();
-  const tanks = useMemo(() => {
-    return tanksSorted.filter((tank) =>
-      filterTank(filters, tankDefinitions.tanks[tank.id])
-    );
   }, [filters, sort]);
   const [loadedRows, setLoadedRows] = useState(DEFAULT_LOADED_ROWS);
 
@@ -140,9 +147,9 @@ export function Tanks({ skeleton }: MaybeSkeletonComponentProps) {
 
   return (
     <Table.Body>
-      <Total tanks={tanks} />
+      <Total tanks={tanksSorted} />
 
-      {tanks.slice(0, loadedRows).map((averages) => {
+      {tanksSorted.slice(0, loadedRows).map((averages) => {
         const tank = tankDefinitions.tanks[averages.id];
 
         if (tank === undefined) return null;
@@ -156,16 +163,21 @@ export function Tanks({ skeleton }: MaybeSkeletonComponentProps) {
         );
       })}
 
-      {times(Math.min(PREVIEW_COUNT, tanks.length - loadedRows), (index) => {
-        return (
-          <RowLoader
-            key={index}
-            onIntersection={() => {
-              setLoadedRows((state) => Math.min(state + 2, tanks.length));
-            }}
-          />
-        );
-      })}
+      {times(
+        Math.min(PREVIEW_COUNT, tanksSorted.length - loadedRows),
+        (index) => {
+          return (
+            <RowLoader
+              key={index}
+              onIntersection={() => {
+                setLoadedRows((state) =>
+                  Math.min(state + 2, tanksSorted.length)
+                );
+              }}
+            />
+          );
+        }
+      )}
     </Table.Body>
   );
 }

packages/website/src/components/Performance/Total.tsx

@@ -2,16 +2,16 @@ import {
   AverageDefinitionsEntry,
   formatCompact,
   type BlitzkitStats,
-} from '@blitzkit/core';
-import { Table } from '@radix-ui/themes';
-import { memo, useCallback } from 'react';
-import { awaitableAverageDefinitions } from '../../core/awaitables/averageDefinitions';
-import { useAveragesExclusionRatio } from '../../hooks/useAveragesExclusionRatio';
-import { useLocale } from '../../hooks/useLocale';
-import { Performance } from '../../stores/performance';
-import { StickyRowHeaderCell } from '../StickyRowHeaderCell';
+} from "@blitzkit/core";
+import { Table } from "@radix-ui/themes";
+import { memo, useCallback } from "react";
+import { awaitableAverageDefinitions } from "../../core/awaitables/averageDefinitions";
+import { useAveragesExclusionRatio } from "../../hooks/useAveragesExclusionRatio";
+import { useLocale } from "../../hooks/useLocale";
+import { Performance } from "../../stores/performance";
+import { StickyRowHeaderCell } from "../StickyRowHeaderCell";
 
-interface AverageDefinitionsEntryWithId extends AverageDefinitionsEntry {
+export interface AverageDefinitionsEntryWithId extends AverageDefinitionsEntry {
   id: number;
 }
 
@@ -24,7 +24,7 @@ const averageDefinitions = await awaitableAverageDefinitions;
 export const Total = memo<TotalProps>(
   ({ tanks }) => {
     const playerCountPeriod = Performance.use(
-      (state) => state.playerCountPeriod,
+      (state) => state.playerCountPeriod
     );
     const { strings, locale } = useLocale();
     const ratio = useAveragesExclusionRatio();
@@ -32,10 +32,10 @@ export const Total = memo<TotalProps>(
       (slice: (tank: BlitzkitStats) => number) => {
         return tanks.reduce(
           (acc, tank) => acc + tank.samples[playerCountPeriod] * slice(tank.mu),
-          0,
+          0
         );
       },
-      [tanks],
+      [tanks]
     );
 
     const battles = sum(({ battles }) => battles);
@@ -55,14 +55,14 @@ export const Total = memo<TotalProps>(
 
     return (
       <Table.Row>
-        <StickyRowHeaderCell style={{ overflow: 'hidden', display: 'flex' }}>
+        <StickyRowHeaderCell style={{ overflow: "hidden", display: "flex" }}>
           {strings.website.tools.performance.table.tanks.total}
         </StickyRowHeaderCell>
         <Table.Cell align="center">{(winrate * 100).toFixed(1)}%</Table.Cell>
         <Table.Cell align="center">
           {formatCompact(
             locale,
-            ratio * averageDefinitions.samples[playerCountPeriod],
+            ratio * averageDefinitions.samples[playerCountPeriod]
           )}
         </Table.Cell>
         <Table.Cell align="center">
@@ -87,5 +87,5 @@ export const Total = memo<TotalProps>(
       </Table.Row>
     );
   },
-  (prev, next) => prev.tanks === next.tanks,
+  (prev, next) => prev.tanks === next.tanks
 );

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

@@ -293,7 +293,6 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) {
           align="center"
           style={{ transitionDuration: "200ms" }}
           position="relative"
-          bottom={display === TankopediaDisplay.DynamicArmor ? "0" : "-7rem"}
         >
           {disturbed && (
             <>

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

@@ -8,11 +8,12 @@ export function Title() {
   const { unwrap } = useLocale();
   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 fontSize = revealed
-    ? revealed
-      ? "2rem"
-      : `min(16vh, ${125 / name.length}vw)`
+    ? disturbed
+      ? "1.5rem"
+      : "2rem"
     : `min(12vh, ${75 / name.length}vw)`;
 
   return (
@@ -28,7 +29,7 @@ export function Title() {
       position="absolute"
       align="center"
       justify="center"
-      top={revealed ? "6rem" : "50%"}
+      top={revealed ? (disturbed ? "3rem" : "6rem") : "50%"}
       left="50%"
       width="100%"
       height={revealed ? fontSize : "100%"}

packages/website/src/components/TierList/Tiles.tsx

@@ -1,9 +1,10 @@
 import { metaSortTank } from "@blitzkit/core";
 import { times } from "lodash-es";
 import { useMemo, useState } from "react";
+import usePromise from "react-promise-suspense";
 import { awaitableGameDefinitions } from "../../core/awaitables/gameDefinitions";
 import { awaitableTankDefinitions } from "../../core/awaitables/tankDefinitions";
-import { filterTank } from "../../core/blitzkit/filterTank";
+import { filterTanks } from "../../core/blitzkit/filterTanks";
 import { TankFilters } from "../../stores/tankFilters";
 import { TierList } from "../../stores/tierList";
 import { SkeletonTankCard } from "../TankSearch/components/SkeletonTankCard";
@@ -23,14 +24,16 @@ const DEFAULT_LOADED_CARDS = 75;
 export function TierListTiles() {
   const filters = TankFilters.use();
   const placedTanks = TierList.use((state) => state.placedTanks);
-  const sorted = useMemo(
+  const filteredTanks = usePromise(
     () =>
-      metaSortTank(
-        tanks.filter(
-          (tank) => filterTank(filters, tank) && !placedTanks.has(tank.id)
-        ),
-        gameDefinitions
-      ).reverse(),
+      filterTanks(filters, tanks).then((tanks) =>
+        tanks.filter(({ id }) => !placedTanks.has(id))
+      ),
+    // react-promise-suspense has awful type annotations
+    [filters, placedTanks] as any
+  );
+  const sorted = useMemo(
+    () => metaSortTank(filteredTanks, gameDefinitions).reverse(),
     [filters, placedTanks]
   );
   const [loadedTiles, setLoadedTiles] = useState(DEFAULT_LOADED_CARDS);

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

@@ -61,7 +61,7 @@ export const getStaticPaths = (() => {
   twitter={{ cardType: "summary_large_image" }}
 />
 
-<BaseLayout>
+<BaseLayout integrated>
   <HomeHero />
 
   <!-- <Flex justify="center" py="6" px="4" justify="center">

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

@@ -1,12 +1,21 @@
 ---
-import BaseLayout from '../../../layouts/BaseLayout.astro';
-import { Page } from './_index';
+import { AstroSeo } from "@astrolib/seo";
+import { getStrings } from "../../../core/i18n/getStrings";
+import BaseLayout from "../../../layouts/BaseLayout.astro";
+import { Page } from "./_index";
 
-export { getStaticPaths } from '../index.astro';
+export { getStaticPaths } from "../index.astro";
 
 const { locale } = Astro.params;
+
+const strings = getStrings(locale);
 ---
 
+<AstroSeo
+  title={strings.website.settings.title}
+  description={strings.website.settings.description}
+/>
+
 <BaseLayout>
   <Page {locale} client:load />
 </BaseLayout>