Merge branch 'main' into remove-imgur-references

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

@@ -128,19 +128,30 @@ export function ShotDisplayCard({ shot, ...props }: ShotDisplayCardProps) {
     ? shotStatusColors[shot.out.status]
     : undefined;
   const inTitleColor = shotStatusColors[shot.in.status];
+  const hasOutLayers = shot.out !== undefined && shot.out.layers.length > 0;
+  const penetrationChance = shot.penetrationChance !== undefined && (
+    <Text color="gray" weight="bold">
+      {literals(strings.common.units.percentage, {
+        value: (shot.penetrationChance * 100).toFixed(0),
+      })}
+    </Text>
+  );
 
   return (
     <Card variant="classic" {...props}>
       <Flex direction="column" gap="2">
         <Flex direction="column" gap="1">
-          <Text color={inTitleColor} weight="bold">
-            {literals(
-              strings.website.tools.tankopedia.sandbox.dynamic.shot_card.status[
-                shot.in.status
-              ],
-              { damage: Math.round(shot.damage).toLocaleString(locale) }
-            )}
-          </Text>
+          <Flex justify="between" align="center" gap="4">
+            <Text color={inTitleColor} weight="bold">
+              {literals(
+                strings.website.tools.tankopedia.sandbox.dynamic.shot_card
+                  .status[shot.in.status],
+                { damage: Math.round(shot.damage).toLocaleString(locale) }
+              )}
+            </Text>
+
+            {!hasOutLayers && penetrationChance}
+          </Flex>
 
           <table
             style={{
@@ -204,13 +215,17 @@ export function ShotDisplayCard({ shot, ...props }: ShotDisplayCardProps) {
               </Flex>
             </Inset>
 
-            <Text color={outTitleColor} weight="bold">
-              {literals(
-                strings.website.tools.tankopedia.sandbox.dynamic.shot_card
-                  .status[shot.out.status],
-                { damage: Math.round(shot.damage).toLocaleString(locale) }
-              )}
-            </Text>
+            <Flex justify="between" align="center" gap="4">
+              <Text color={outTitleColor} weight="bold">
+                {literals(
+                  strings.website.tools.tankopedia.sandbox.dynamic.shot_card
+                    .status[shot.out.status],
+                  { damage: Math.round(shot.damage).toLocaleString(locale) }
+                )}
+              </Text>
+
+              {penetrationChance}
+            </Flex>
 
             <Flex direction="column">
               {shot.out.layers.map((layer, index) => {

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

@@ -63,6 +63,36 @@ export type ArmorUserData = {
     }
 );
 
+const PENETRATION_RANDOMIZATION = 0.05;
+
+function resolvePenetrationChance(shoot: (scale: number) => Shot | null) {
+  function penetrates(scale: number) {
+    const shot = shoot(scale);
+
+    return (shot?.out ?? shot?.in)?.status === "penetration";
+  }
+
+  let low = 1 - PENETRATION_RANDOMIZATION;
+  let high = 1 + PENETRATION_RANDOMIZATION;
+
+  if (penetrates(low)) return 1;
+  if (!penetrates(high)) return 0;
+
+  for (let iteration = 0; iteration < 16; iteration++) {
+    const middle = (low + high) / 2;
+
+    if (penetrates(middle)) {
+      high = middle;
+    } else {
+      low = middle;
+    }
+  }
+
+  return (
+    (1 + PENETRATION_RANDOMIZATION - high) / (2 * PENETRATION_RANDOMIZATION)
+  );
+}
+
 const omitMaterial = new MeshBasicMaterial({
   colorWrite: false,
   depthWrite: true,
@@ -89,6 +119,7 @@ export function SpacedArmorSceneComponent({
       intersections: Intersection[],
       allowRicochet: boolean,
       remainingPenetrationInput?: number,
+      penetrationScale = 1,
     ) => {
       const { customShell } = Tankopedia.state;
       const shell = customShell ?? Duel.state.antagonist.shell;
@@ -125,6 +156,7 @@ export function SpacedArmorSceneComponent({
         Duel.state.protagonist.equipmentMatrix,
       );
       const penetration =
+        penetrationScale *
         shell.penetration!.near *
         resolvePenetrationCoefficient(
           hasCalibratedShells,
@@ -367,6 +399,7 @@ export function SpacedArmorSceneComponent({
               ricochetIntersections,
               false,
               remainingPenetration,
+              penetrationScale,
             );
 
             shot.in.status = "ricochet";
@@ -422,6 +455,16 @@ export function SpacedArmorSceneComponent({
 
                   const shot = shoot(event.point, event.intersections, true)!;
 
+                  shot.penetrationChance = resolvePenetrationChance((scale) =>
+                    shoot(
+                      event.point,
+                      event.intersections,
+                      true,
+                      undefined,
+                      scale,
+                    ),
+                  );
+
                   Tankopedia.mutate((draft) => {
                     draft.shot = shot;
                   });

packages/website/src/components/PlaylistGenerator.tsx

@@ -25,6 +25,7 @@ import { FilterControl } from "./TankSearch/components/FilterControl";
 const tankDefinitions = await api.tankDefinitions();
 
 const POOL_HEIGHT = "16rem";
+const FILTERS_WIDTH = "32rem";
 
 export function PlaylistGenerator({ skeleton }: MaybeSkeletonComponentProps) {
   const [largeWarningOpen, setLargeWarningOpen] = useState(false);
@@ -80,13 +81,19 @@ export function PlaylistGenerator({ skeleton }: MaybeSkeletonComponentProps) {
       <Flex justify="center" width="100%" align="center" px="4">
         <Flex
           flexGrow="1"
-          gap="9"
+          gap="6"
           align="center"
           justify="center"
           maxWidth="80rem"
           direction={{ initial: "column-reverse", md: "row" }}
         >
-          <Flex direction="column" gap="4" align="center">
+          <Flex
+            direction="column"
+            gap="4"
+            align="center"
+            flexShrink="0"
+            width={{ initial: "100%", md: FILTERS_WIDTH }}
+          >
             <FilterControl />
 
             <Button

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

@@ -1,7 +1,7 @@
 import {
   normalizeBoundingBox,
   resolveDpm,
-  unionBoundingBox,
+  tankBoundingBox,
   type TankDefinition,
 } from "@blitzkit/core";
 import { useMemo } from "react";
@@ -112,10 +112,7 @@ export function TankSearchCard({ tank, onSelect }: TankSearchCardProps) {
         return (tank.camouflage_still * gun.camouflage_loss * 100).toFixed(0);
       case "survivability.volume": {
         const dimensions = normalizeBoundingBox(
-          unionBoundingBox(
-            tankModelDefinition.bounding_box!,
-            turretModelDefinition.bounding_box!,
-          ),
+          tankBoundingBox(tankModelDefinition, turretModelDefinition),
         );
 
         return (dimensions.x * dimensions.y * dimensions.z).toFixed(0);
@@ -123,10 +120,7 @@ export function TankSearchCard({ tank, onSelect }: TankSearchCardProps) {
 
       case "survivability.length": {
         const bounds = normalizeBoundingBox(
-          unionBoundingBox(
-            tankModelDefinition.bounding_box!,
-            turretModelDefinition.bounding_box!,
-          ),
+          tankBoundingBox(tankModelDefinition, turretModelDefinition),
         );
 
         return Math.max(bounds.x, bounds.y, bounds.z).toFixed(0);

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

@@ -3,7 +3,7 @@ import {
   normalizeBoundingBox,
   resolveDpm,
   SEARCH_KEYS,
-  unionBoundingBox,
+  tankBoundingBox,
   type TankDefinition,
 } from "@blitzkit/core";
 import { literals } from "@blitzkit/i18n/src/literals";
@@ -137,16 +137,10 @@ export const TankSearch = memo<TankSearchProps>(
               const bTurretModelDefinition =
                 bTankModelDefinition.turrets[b.turrets.at(-1)!.id];
               const aSize = normalizeBoundingBox(
-                unionBoundingBox(
-                  aTankModelDefinition.bounding_box!,
-                  aTurretModelDefinition.bounding_box!,
-                ),
+                tankBoundingBox(aTankModelDefinition, aTurretModelDefinition),
               );
               const bSize = normalizeBoundingBox(
-                unionBoundingBox(
-                  bTankModelDefinition.bounding_box!,
-                  bTurretModelDefinition.bounding_box!,
-                ),
+                tankBoundingBox(bTankModelDefinition, bTurretModelDefinition),
               );
               const aVolume = aSize.x * aSize.y * aSize.z;
               const bVolume = bSize.x * bSize.y * bSize.z;
@@ -164,16 +158,10 @@ export const TankSearch = memo<TankSearchProps>(
               const bTurretModelDefinition =
                 bTankModelDefinition.turrets[b.turrets.at(-1)!.id];
               const aSize = normalizeBoundingBox(
-                unionBoundingBox(
-                  aTankModelDefinition.bounding_box!,
-                  aTurretModelDefinition.bounding_box!,
-                ),
+                tankBoundingBox(aTankModelDefinition, aTurretModelDefinition),
               );
               const bSize = normalizeBoundingBox(
-                unionBoundingBox(
-                  bTankModelDefinition.bounding_box!,
-                  bTurretModelDefinition.bounding_box!,
-                ),
+                tankBoundingBox(bTankModelDefinition, bTurretModelDefinition),
               );
               const aLength = Math.max(aSize.x, aSize.y, aSize.z);
               const bLength = Math.max(bSize.x, bSize.y, bSize.z);

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

@@ -24,6 +24,14 @@ export function Survivability({ stats }: StatsAcceptorProps) {
         decimals={0}
         value={(stats) => stats.fireChance * 100}
       />
+      {stats.trackRepairTime !== undefined && (
+        <InfoWithDelta
+          value="trackRepairTime"
+          stats={stats}
+          deltaType="lowerIsBetter"
+          decimals={2}
+        />
+      )}
       <InfoWithDelta value="viewRange" stats={stats} decimals={0} />
       <ViewRangeVisualizer stats={stats} />
       <Info

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

@@ -31,11 +31,11 @@ export function Thicknesses({ thicknessRange, skeleton }: ThicknessesProps) {
   return (
     <Flex
       position="absolute"
-      right={display === TankopediaDisplay.StaticArmor ? "0" : "-6rem"}
+      right="0"
       top="50%"
       mr="4"
       style={{
-        transform: "translateY(-50%)",
+        transform: `translate(${display === TankopediaDisplay.StaticArmor ? "0" : "calc(100% + var(--space-4))"}, -50%)`,
         userSelect: "none",
         transitionDuration: "200ms",
       }}

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

@@ -8,8 +8,8 @@ import {
   resolvePenetrationCoefficient,
   ShellType,
   sum,
+  tankBoundingBox,
   TankClass,
-  unionBoundingBox,
   type EngineDefinition,
   type EquipmentDefinitions,
   type GunDefinition,
@@ -119,6 +119,7 @@ export function tankCharacteristics(
   const hasImprovedVerticalStabilizer = equipment(122);
   const hasDownImprovedVerticalStabilizer = equipment(124);
   const hasImprovedSuspension = equipment(123);
+  const hasToolbox = equipment(113);
 
   const hasTungsten = consumable(45);
   const hasAdrenaline = consumable(18);
@@ -335,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;
@@ -518,6 +516,12 @@ export function tankCharacteristics(
   }
 
   const fireChance = engine.fire_chance * fireChanceCoefficient;
+  const trackRepairTime = track.repair_time
+    ? track.repair_time /
+      ((hasToolbox ? 1.2 : 1) *
+        (1 + (crewSkills.repair ?? 0) * 0.04) *
+        (hasProtectiveKit ? 1.1 : 1))
+    : undefined;
   const viewRange = turret.view_range * viewRangeCoefficient;
   const camouflageStill = tank.camouflage_still * camouflageCoefficientStill;
   const camouflageMoving =
@@ -602,6 +606,7 @@ export function tankCharacteristics(
     hullTraverseSoftTerrain,
     health,
     fireChance,
+    trackRepairTime,
     viewRange,
     camouflageStill,
     camouflageMoving,

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

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

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

@@ -1,16 +1,15 @@
 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";
 
 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_api]/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,
@@ -240,8 +240,10 @@ async function extractModel(vfs: AbstractVFS, path: string) {
     materials.set(id, resolvedMaterial);
   });
 
-  function parseHierarchies(hierarchies: Hierarchy[], parent: Scene | Node) {
-    hierarchies.forEach((hierarchy) => {
+  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))
@@ -249,10 +251,6 @@ async function extractModel(vfs: AbstractVFS, path: string) {
         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"]) {
@@ -361,15 +359,11 @@ async function extractModel(vfs: AbstractVFS, path: string) {
         }
       });
 
-      if (hierarchy["#hierarchy"]) {
-        parseHierarchies(hierarchy["#hierarchy"], node);
-      }
-
       parent.addChild(node);
-    });
-  }
 
-  parseHierarchies(sc2["#hierarchy"], scene);
+      return node;
+    },
+  );
 
   scene.addChild(document.createNode("test"));
 

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

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

packages/website/src/stores/tankopedia.ts

@@ -43,6 +43,7 @@ export type Shot = {
   containsGaps: boolean;
   damage: number;
   splashRadius?: number;
+  penetrationChance?: number;
 
   in: {
     surfaceNormal: Vector3;