revert colors

packages/i18n/strings/pl.json

@@ -220,190 +220,190 @@
         "clear": "Clear",
         "tier": "Tier {tier}",
         "passive": "{name} (Passive)",
-        "active": "{name} (Aktywne)",
+        "active": "{name} (Active)",
         "no_tanks_found": {
-          "body": "Nie znaleziono czołgu.",
+          "body": "No tanks found.",
           "search_again": "",
           "clear_filters": "Try clearing filters."
         },
         "sort": {
-          "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",
+          "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",
           "fire.tertiaryPenetration": "tertiary penetration",
-          "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.damage": "damage",
+          "fire.moduleDamage": "module damage",
+          "fire.shellVelocity": "shell velocity",
+          "fire.shellRange": "shell range",
+          "fire.shellCapacity": "shell capacity",
+          "fire.aimTime": "aim time",
           "fire.dispersionStill": "dispersion still",
           "fire.dispersionMoving": "dispersion moving",
-          "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",
+          "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",
           "maneuverability.traverseSpeed": "traverse speed"
         },
         "sort_dropdown": {
-          "label": "Filtruj",
+          "label": "Sort",
           "groups": {
             "sort": {
-              "no_sort": "Brak filtrów",
-              "label": "Filtruj według",
-              "fire": "Siła ognia",
-              "maneuverability": "Mobilność ",
-              "survivability": "Przetrwanie"
+              "no_sort": "No sort",
+              "label": "Sort by",
+              "fire": "Fire",
+              "maneuverability": "Maneuverability",
+              "survivability": "Survivability"
             },
             "direction": {
               "label": "Direction",
-              "ascending": "Rosnąco",
-              "descending": "Malejąco"
+              "ascending": "Ascending",
+              "descending": "Descending"
             }
           }
         }
       },
       "warnings": {
-        "test": "Wartości statystyk czołgów w fazie testowej mogą ulec zmianie."
+        "test": "Tanks in testing are subject to change and may not represent the final product."
       }
     },
     "home": {
       "discord": {
-        "join_short": "Dołącz do elity!",
-        "join_long": "Dołącz do topowej elity!",
+        "join_short": "Join cool people!",
+        "join_long": "Join super duper cool people!",
         "action": "Discord"
       },
       "hero": {
-        "credit": "Według {name} ♥️"
+        "credit": "By {name} ❤️"
       },
       "hot_tanks": {
-        "title": "Popularne czołgi",
-        "subtitle": "Ostatnie {days} dni"
+        "title": "Popular tanks",
+        "subtitle": "Last {days} days"
       },
       "other_projects": {
-        "title": "Inne epickie projekty"
+        "title": "Other cool projects"
       },
-      "help_translate": "Proszę pomóż przetłumaczyć {name} na {language}!",
-      "seo_description": "Narzędzia do wszystkiego World of Tanks Blitz"
+      "help_translate": "Please help translate {name} to {language}!",
+      "seo_description": "Tools for everything World of Tanks Blitz"
     },
     "docs": {
       "patches": {
-        "name": "Zapisy zmian BlitzKit",
-        "seo_description": "Zapisy zmian BlitzKit: Discord bot i strona internetowa"
+        "name": "BlitzKit Changelogs",
+        "seo_description": "Changelogs for BlitzKit Discord bot and website"
       }
     },
     "tools": {
       "playlist": {
-        "reset": "Resetuj",
-        "shuffle": "Wymieszaj",
-        "remove": "Usuń czołgi, którymi grałem",
-        "tracking": "BlitzKit zapisuje twoje bitwy",
+        "reset": "Reset",
+        "shuffle": "Shuffle",
+        "remove": "Remove played",
+        "tracking": "BlitzKit is tracking your battles",
         "sort": {
-          "button": "Filtruj według",
-          "last_played": "Ostatnio używane czołgi",
-          "least_played": "Najmniej używane czołgi"
+          "button": "Sort by",
+          "last_played": "Last played",
+          "least_played": "Least played"
         },
         "table": {
           "index": "#",
-          "never": "Nigdy",
-          "tank": "Czołg",
-          "last_played": "Ostatnio używane czołgi",
-          "battles": "Wszystkie bitwy na koncie",
+          "never": "Never",
+          "tank": "Tank",
+          "last_played": "Last played",
+          "battles": "Career battles",
           "unrecorded": "--",
           "wins": "Zwycięstwa"
         },
         "large_warning": {
-          "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ź"
+          "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"
         },
-        "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"
+        "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"
       },
       "mixer": {
-        "name": "Mikser",
+        "name": "Mixer",
         "button": "Mix and match",
         "description": "Mix tank modules",
         "seo_description": "Mix and match hulls, turrets, and guns of tanks in World of Tanks Blitz",
-        "screenshot": "Zrzut ekranu",
-        "randomize": "Wymieszaj"
+        "screenshot": "Screenshot",
+        "randomize": "Randomize"
       },
       "guess": {
-        "name": "Zgadnij",
+        "name": "Guess",
         "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": "Wpisz odpowiedź",
-          "skip": "Pomiń",
-          "guess": "Zgaduję",
-          "next": "Następny",
+          "placeholder": "Type to guess...",
+          "skip": "Skip",
+          "guess": "Guess",
+          "next": "Next",
           "no_results": "Brak wyników"
         },
         "stats": "{correct} / {total} correct, {streak} streak",
         "help": {
-          "title": "Odsłonić część czołgu?",
+          "title": "Partially reveal tank?",
           "description": "Reveals the tank without showing the name. This round will be considered incorrect and break your streak!",
-          "cancel": "Anuluj",
-          "reveal": "Pokaż"
+          "cancel": "Cancel",
+          "reveal": "Reveal"
         },
-        "clear": "Wyczyść",
-        "select_all": "Zaznacz wszystko ",
-        "tier": "Poziom czołgu {tier}"
+        "clear": "Clear",
+        "select_all": "Select all",
+        "tier": "Tier {tier}"
       },
       "tankopedia": {
-        "search": "Wyszukaj statystykę...",
+        "search": "Search a stat...",
         "name": "Tankopedia",
-        "button": "Znajdź czołg",
-        "description": "Encyklopedia czołgów w WoTb",
+        "button": "Find tanks",
+        "description": "Blitz tank encyclopedia",
         "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": "Pomiń"
+            "skip": "Skip"
           },
           "assault": {
             "title": "Assault shells"
           },
           "rotator": {
-            "hull": "Kadłub",
-            "turret": "Wieża",
-            "hard": "Utwardzony",
+            "hull": "Hull",
+            "turret": "Turret",
+            "hard": "Hard",
             "medium": "Średni",
-            "soft": "Miękki",
-            "effective": "Rzeczywisty"
+            "soft": "Soft",
+            "effective": "Effective"
           },
           "ricochet": {
-            "angle": "Kąt",
+            "angle": "Angle",
             "normalization": "Normalization",
-            "effective_angle": "Rzeczywisty kąt nachylenia pancerza",
-            "armor": "Pancerz",
-            "no_ricochet": "Pociski odłamkowe nie rykoszetują."
+            "effective_angle": "Effective angle",
+            "armor": "Armor",
+            "no_ricochet": "Explosive shells don't ricochet"
           },
           "view_range": {
-            "camo": "Kamuflaż",
-            "ghost_factory": "Fabryka duchów",
-            "dead_rail": "Martwy tor"
+            "camo": "Camo",
+            "ghost_factory": "Ghost Factory",
+            "dead_rail": "Dead Rail"
           },
           "flexibility": {
             "yaw": "Yaw",
@@ -656,10 +656,10 @@
           "loader": "Loader"
         },
         "maneuverability": {
-          "title": "Mobilność "
+          "title": "Maneuverability"
         },
         "survivability": {
-          "title": "Przetrwanie"
+          "title": "Survivability"
         }
       },
       "compare": {

packages/i18n/strings/pt.json

@@ -41,7 +41,7 @@
       "development": "Development",
       "opentest": "TesteAberto",
       "preview": "Preview",
-      "production": "Produção"
+      "production": "Production"
     },
     "locales": {
       "en": "Inglês",
@@ -187,11 +187,11 @@
   },
   "website": {
     "redirect": {
-      "title": "301: movido permanentemente",
+      "title": "301: moved permanently",
       "body": "This page has moved. Redirecting..."
     },
     "settings": {
-      "title": "Configurações",
+      "title": "Settings",
       "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": "Procura por tanque",
+        "select_dialog_title": "Search for tanks",
         "swap_dialog_title": "Swap tank",
-        "clear_filters": "Limpar filtros",
+        "clear_filters": "Clear filters",
         "login": "Login to use this",
         "search_bar_hint": "Procurar tanques...",
         "recent": "Visto recentemente",

packages/website/src/components/GuessRenderer.tsx

@@ -1,9 +1,9 @@
 import { useModel } from "../hooks/useModel";
 import { Guess, GuessState } from "../stores/guess";
 import { SmartCanvas } from "./SmartCanvas";
+import { TankModel } from "./TankModel";
 import { Controls } from "./Tankopedia/HeroSection/components/TankSandbox/components/Control";
 import { Lighting } from "./Tankopedia/HeroSection/components/TankSandbox/components/Lighting";
-import { TankModel } from "./Tankopedia/HeroSection/components/TankSandbox/components/TankModel";
 
 const BRIGHTNESS = 2 ** -5.5;
 const CONTRAST = 2 ** 2;

packages/website/src/components/TankModel.tsx

@@ -0,0 +1,297 @@
+import {
+  invalidate,
+  useThree,
+  type ObjectMap,
+  type ThreeEvent,
+} from "@react-three/fiber";
+import { useRef } from "react";
+import type { Texture } from "three";
+import { Group, Mesh, MeshStandardMaterial, Vector2 } from "three";
+import { applyPitchYawLimits } from "../core/blitz/applyPitchYawLimits";
+import { hasEquipment } from "../core/blitzkit/hasEquipment";
+import { modelTransformEvent } from "../core/blitzkit/modelTransform";
+import { controlsEnabledEvent } from "../core/controlsEnabled";
+import { useBatched } from "../hooks/useBatched";
+import { useModel } from "../hooks/useModel";
+import { useTankModelDefinition } from "../hooks/useTankModelDefinition";
+import { useTankTransform } from "../hooks/useTankTransform";
+import { Duel } from "../stores/duel";
+import { Tankopedia } from "../stores/tankopedia";
+import { TankopediaDisplay } from "../stores/tankopediaPersistent/constants";
+import { ModelTankWrapper } from "./Armor/components/ModelTankWrapper";
+
+interface SectionProps {
+  map: ObjectMap;
+}
+
+function Tracks({ map }: SectionProps) {
+  const Batched = useBatched(map, true);
+
+  const position = useRef(new Vector2());
+  const delta = useRef(new Vector2());
+
+  const textures = useRef(new Set<Texture | null>());
+
+  function handlePointerMove(event: PointerEvent) {
+    delta.current.set(event.clientX, event.clientY).sub(position.current);
+    position.current.set(event.clientX, event.clientY);
+
+    const deltaX = delta.current.x / window.innerWidth;
+    const deltaY = delta.current.y / window.innerHeight;
+
+    const offset = deltaX + deltaY;
+
+    for (const texture of textures.current) {
+      if (!texture) continue;
+      texture.offset.y += offset;
+    }
+
+    invalidate();
+  }
+  function handlePointerUp() {
+    controlsEnabledEvent.dispatch(true);
+
+    window.removeEventListener("pointermove", handlePointerMove);
+    window.removeEventListener("pointerup", handlePointerUp);
+  }
+  function handlePointerDown(event: ThreeEvent<PointerEvent>) {
+    if (Tankopedia.state.display !== TankopediaDisplay.Model) {
+      return;
+    }
+
+    const material = (event.object as Mesh).material as MeshStandardMaterial;
+
+    textures.current = new Set([
+      material.map,
+      material.aoMap,
+      material.normalMap,
+      material.roughnessMap,
+      material.metalnessMap,
+    ]);
+
+    position.current.set(event.clientX, event.clientY);
+    event.stopPropagation();
+
+    controlsEnabledEvent.dispatch(false);
+
+    window.addEventListener("pointermove", handlePointerMove);
+    window.addEventListener("pointerup", handlePointerUp);
+  }
+
+  return (
+    <Batched
+      onPointerDown={handlePointerDown}
+      slicer={(node) => {
+        return node.name.startsWith("chassis_track_");
+      }}
+    />
+  );
+}
+
+function Hull({ map }: SectionProps) {
+  const Batched = useBatched(map, true);
+
+  function handlePointerDown(event: ThreeEvent<PointerEvent>) {
+    event.stopPropagation();
+  }
+
+  return (
+    <Batched
+      onPointerDown={handlePointerDown}
+      slicer={(node) => {
+        const isHull = node.name === "hull";
+        const isWheel = node.name.startsWith("chassis_wheel_");
+
+        return isHull || isWheel;
+      }}
+    />
+  );
+}
+
+function Turret({ map }: SectionProps) {
+  const turret = Duel.use((state) => state.protagonist.turret);
+  const gun = Duel.use((state) => state.protagonist.gun);
+
+  const tankModelDefinition = useTankModelDefinition();
+  const turretModelDefinition = tankModelDefinition.turrets[turret.id];
+  const gunModelDefinition = turretModelDefinition.guns[gun.id];
+
+  const Batched = useBatched(map, true);
+
+  const position = useRef(new Vector2());
+  const delta = useRef(new Vector2());
+
+  const canvas = useThree((state) => state.gl.domElement);
+
+  function onPointerDown(event: ThreeEvent<PointerEvent>) {
+    event.stopPropagation();
+
+    position.current.set(event.clientX, event.clientY);
+
+    controlsEnabledEvent.dispatch(false);
+    Tankopedia.mutate((draft) => {
+      draft.shot = undefined;
+      draft.highlightArmor = undefined;
+    });
+    window.addEventListener("pointermove", handlePointerMove);
+    window.addEventListener("pointerup", handlePointerUp);
+  }
+  function handlePointerMove(event: PointerEvent) {
+    const hasImprovedVerticalStabilizer = hasEquipment(
+      122,
+      Duel.state.protagonist.tank.equipment_preset,
+      Duel.state.protagonist.equipmentMatrix,
+    );
+    const hasDownImprovedVerticalStabilizer = hasEquipment(
+      124,
+      Duel.state.protagonist.tank.equipment_preset,
+      Duel.state.protagonist.equipmentMatrix,
+    );
+    const boundingRect = canvas.getBoundingClientRect();
+
+    delta.current.set(event.clientX, event.clientY).sub(position.current);
+    position.current.set(event.clientX, event.clientY);
+
+    const [pitch, yaw] = applyPitchYawLimits(
+      modelTransformEvent.last!.pitch,
+      modelTransformEvent.last!.yaw +
+        delta.current.x * (Math.PI / boundingRect.width),
+      gunModelDefinition.pitch!,
+      turretModelDefinition.yaw,
+      hasImprovedVerticalStabilizer,
+      hasDownImprovedVerticalStabilizer,
+    );
+    modelTransformEvent.dispatch({ pitch, yaw });
+  }
+  function handlePointerUp() {
+    controlsEnabledEvent.dispatch(true);
+    window.removeEventListener("pointermove", handlePointerMove);
+    window.removeEventListener("pointerup", handlePointerUp);
+  }
+
+  return (
+    <Batched
+      onPointerDown={onPointerDown}
+      slicer={(node) => {
+        const isCurrentTurret =
+          node.name ===
+          `turret_${turretModelDefinition.model_id
+            .toString()
+            .padStart(2, "0")}`;
+
+        return isCurrentTurret;
+      }}
+    />
+  );
+}
+
+function Gun({ map }: SectionProps) {
+  const Batched = useBatched(map, true);
+
+  const turret = Duel.use((state) => state.protagonist.turret);
+  const gun = Duel.use((state) => state.protagonist.gun);
+
+  const tankModelDefinition = useTankModelDefinition();
+  const turretModelDefinition = tankModelDefinition.turrets[turret.id];
+  const gunModelDefinition = turretModelDefinition.guns[gun.id];
+
+  const position = useRef(new Vector2());
+  const delta = useRef(new Vector2());
+  const pitch = useRef(0);
+  const yaw = useRef(0);
+
+  const canvas = useThree((state) => state.gl.domElement);
+
+  function handlePointerMove(event: PointerEvent) {
+    const hasImprovedVerticalStabilizer = hasEquipment(
+      122,
+      Duel.state.protagonist.tank.equipment_preset,
+      Duel.state.protagonist.equipmentMatrix,
+    );
+    const hasDownImprovedVerticalStabilizer = hasEquipment(
+      124,
+      Duel.state.protagonist.tank.equipment_preset,
+      Duel.state.protagonist.equipmentMatrix,
+    );
+    const boundingRect = canvas.getBoundingClientRect();
+    delta.current.set(event.clientX, event.clientY).sub(position.current);
+    position.current.set(event.clientX, event.clientY);
+
+    [pitch.current, yaw.current] = applyPitchYawLimits(
+      pitch.current - delta.current.y * (Math.PI / boundingRect.height),
+      yaw.current + delta.current.x * (Math.PI / boundingRect.width),
+      gunModelDefinition.pitch!,
+      turretModelDefinition.yaw,
+      hasImprovedVerticalStabilizer,
+      hasDownImprovedVerticalStabilizer,
+    );
+    modelTransformEvent.dispatch({ pitch: pitch.current, yaw: yaw.current });
+  }
+  function handlePointerUp() {
+    controlsEnabledEvent.dispatch(true);
+    window.removeEventListener("pointermove", handlePointerMove);
+    window.removeEventListener("pointerup", handlePointerUp);
+  }
+  function onPointerDown(event: ThreeEvent<PointerEvent>) {
+    event.stopPropagation();
+
+    controlsEnabledEvent.dispatch(false);
+    Tankopedia.mutate((draft) => {
+      draft.shot = undefined;
+      draft.highlightArmor = undefined;
+    });
+
+    position.current.set(event.clientX, event.clientY);
+    pitch.current = modelTransformEvent.last!.pitch;
+    yaw.current = modelTransformEvent.last!.yaw;
+
+    window.addEventListener("pointermove", handlePointerMove);
+    window.addEventListener("pointerup", handlePointerUp);
+  }
+
+  return (
+    <Batched
+      onPointerDown={onPointerDown}
+      slicer={(node) => {
+        const isCurrentMantlet =
+          node.name ===
+          `gun_${gunModelDefinition.model_id.toString().padStart(2, "0")}_mask`;
+        const isCurrentGun =
+          node.name ===
+          `gun_${gunModelDefinition.model_id.toString().padStart(2, "0")}`;
+
+        return isCurrentGun || isCurrentMantlet;
+      }}
+    />
+  );
+}
+
+export function TankModel() {
+  const protagonist = Duel.use((draft) => draft.protagonist);
+
+  const track = Duel.use((state) => state.protagonist.track);
+  const turret = Duel.use((state) => state.protagonist.turret);
+
+  const hullContainer = useRef<Group>(null);
+  const turretContainer = useRef<Group>(null!);
+  const gunContainer = useRef<Group>(null!);
+
+  const { gltf } = useModel(protagonist.tank.id);
+
+  useTankTransform(track, turret, turretContainer, gunContainer);
+
+  return (
+    <ModelTankWrapper ref={hullContainer}>
+      <Tracks map={gltf} />
+      <Hull map={gltf} />
+
+      <group ref={turretContainer}>
+        <Turret map={gltf} />
+
+        <group ref={gunContainer}>
+          <Gun map={gltf} />
+        </group>
+      </group>
+    </ModelTankWrapper>
+  );
+}

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

@@ -125,7 +125,7 @@ export function Lighting({ hasPbr }: Props) {
               position={position}
               intensity={intensity}
               penumbra={1}
-              castShadow={highGraphics}
+              castShadow={highGraphics && index === 0}
               decay={1}
               color="#ffffff"
               angle={0}

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

@@ -1,271 +0,0 @@
-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 { hasEquipment } from "../../../../../../core/blitzkit/hasEquipment";
-import { jsxTree } from "../../../../../../core/blitzkit/jsxTree";
-import { modelTransformEvent } from "../../../../../../core/blitzkit/modelTransform";
-import { controlsEnabledEvent } from "../../../../../../core/controlsEnabled";
-import { useModel } from "../../../../../../hooks/useModel";
-import { useTankModelDefinition } from "../../../../../../hooks/useTankModelDefinition";
-import { useTankTransform } from "../../../../../../hooks/useTankTransform";
-import { Duel } from "../../../../../../stores/duel";
-import { Tankopedia } from "../../../../../../stores/tankopedia";
-import { TankopediaDisplay } from "../../../../../../stores/tankopediaPersistent/constants";
-import { ModelTankWrapper } from "../../../../../Armor/components/ModelTankWrapper";
-
-export function TankModel() {
-  const protagonist = Duel.use((draft) => draft.protagonist);
-  const track = Duel.use((state) => state.protagonist.track);
-  const turret = Duel.use((state) => state.protagonist.turret);
-  const canvas = useThree((state) => state.gl.domElement);
-  const hullContainer = useRef<Group>(null);
-  const turretContainer = useRef<Group>(null!);
-  const gunContainer = useRef<Group>(null!);
-  const tankModelDefinition = useTankModelDefinition();
-  const turretModelDefinition =
-    tankModelDefinition.turrets[protagonist.turret.id];
-  const gunModelDefinition = turretModelDefinition.guns[protagonist.gun.id];
-  const { gltf } = useModel(protagonist.tank.id);
-  const nodes = Object.values(gltf.nodes);
-
-  useTankTransform(track, turret, turretContainer, gunContainer);
-
-  return (
-    <ModelTankWrapper ref={hullContainer}>
-      {nodes.map((node) => {
-        const isHull = node.name === "hull";
-        const isWheel = node.name.startsWith("chassis_wheel_");
-        const isTrack = node.name.startsWith("chassis_track_");
-        const isVisible = isHull || isWheel || isTrack;
-        const position = new Vector2();
-        const delta = new Vector2();
-
-        if (!isVisible) return null;
-
-        function translateTexture(offset: number) {
-          const mesh = node.children[0] as Mesh;
-          const material = mesh?.material as MeshStandardMaterial;
-
-          if (!material) return;
-
-          invalidate();
-
-          const textures = new Set([
-            material.map,
-            material.aoMap,
-            material.normalMap,
-            material.roughnessMap,
-            material.metalnessMap,
-          ]);
-
-          for (const texture of textures) {
-            if (texture) texture.offset.y += offset;
-          }
-        }
-
-        function onPointerDown(event: ThreeEvent<PointerEvent>) {
-          if (isTrack && Tankopedia.state.display === TankopediaDisplay.Model) {
-            position.set(event.clientX, event.clientY);
-            event.stopPropagation();
-
-            controlsEnabledEvent.dispatch(false);
-
-            window.addEventListener("pointermove", handlePointerMove);
-            window.addEventListener("pointerup", handlePointerUp);
-          } else {
-            event.stopPropagation();
-          }
-        }
-        function handlePointerMove(event: PointerEvent) {
-          delta.set(event.clientX, event.clientY).sub(position);
-          position.set(event.clientX, event.clientY);
-          const deltaX = delta.x / window.innerWidth;
-          const deltaY = delta.y / window.innerHeight;
-
-          translateTexture(deltaX + deltaY);
-        }
-        function handlePointerUp() {
-          controlsEnabledEvent.dispatch(true);
-
-          window.removeEventListener("pointermove", handlePointerMove);
-          window.removeEventListener("pointerup", handlePointerUp);
-        }
-
-        return jsxTree(node, {
-          mesh(_, props, key) {
-            return (
-              <mesh
-                {...props}
-                key={key}
-                onPointerDown={onPointerDown}
-                castShadow
-                receiveShadow
-              />
-            );
-          },
-        });
-      })}
-
-      <group ref={turretContainer}>
-        {nodes.map((node) => {
-          const isTurret = node.name.startsWith("turret_");
-          const isCurrentTurret =
-            node.name ===
-            `turret_${turretModelDefinition.model_id
-              .toString()
-              .padStart(2, "0")}`;
-          const isVisible = isCurrentTurret;
-          const position = new Vector2();
-          const delta = new Vector2();
-
-          if (!isVisible) return null;
-
-          function onPointerDown(event: ThreeEvent<PointerEvent>) {
-            event.stopPropagation();
-
-            if (!isTurret) return;
-
-            position.set(event.clientX, event.clientY);
-
-            controlsEnabledEvent.dispatch(false);
-            Tankopedia.mutate((draft) => {
-              draft.shot = undefined;
-              draft.highlightArmor = undefined;
-            });
-            window.addEventListener("pointermove", handlePointerMove);
-            window.addEventListener("pointerup", handlePointerUp);
-          }
-          function handlePointerMove(event: PointerEvent) {
-            const hasImprovedVerticalStabilizer = hasEquipment(
-              122,
-              Duel.state.protagonist.tank.equipment_preset,
-              Duel.state.protagonist.equipmentMatrix,
-            );
-            const hasDownImprovedVerticalStabilizer = hasEquipment(
-              124,
-              Duel.state.protagonist.tank.equipment_preset,
-              Duel.state.protagonist.equipmentMatrix,
-            );
-            const boundingRect = canvas.getBoundingClientRect();
-
-            delta.set(event.clientX, event.clientY).sub(position);
-            position.set(event.clientX, event.clientY);
-
-            const [pitch, yaw] = applyPitchYawLimits(
-              modelTransformEvent.last!.pitch,
-              modelTransformEvent.last!.yaw +
-                delta.x * (Math.PI / boundingRect.width),
-              gunModelDefinition.pitch!,
-              turretModelDefinition.yaw,
-              hasImprovedVerticalStabilizer,
-              hasDownImprovedVerticalStabilizer,
-            );
-            modelTransformEvent.dispatch({ pitch, yaw });
-          }
-          function handlePointerUp() {
-            controlsEnabledEvent.dispatch(true);
-            window.removeEventListener("pointermove", handlePointerMove);
-            window.removeEventListener("pointerup", handlePointerUp);
-          }
-
-          return jsxTree(node, {
-            mesh(_, props, key) {
-              return (
-                <mesh
-                  {...props}
-                  key={key}
-                  onPointerDown={onPointerDown}
-                  castShadow
-                  receiveShadow
-                />
-              );
-            },
-          });
-        })}
-
-        <group ref={gunContainer}>
-          {nodes.map((node) => {
-            const isCurrentMantlet =
-              node.name ===
-              `gun_${gunModelDefinition.model_id
-                .toString()
-                .padStart(2, "0")}_mask`;
-            const isCurrentGun =
-              node.name ===
-              `gun_${gunModelDefinition.model_id.toString().padStart(2, "0")}`;
-            const isVisible = isCurrentGun || isCurrentMantlet;
-            const position = new Vector2();
-            const delta = new Vector2();
-
-            if (!isVisible) return null;
-
-            let pitch = 0;
-            let yaw = 0;
-
-            function onPointerDown(event: ThreeEvent<PointerEvent>) {
-              event.stopPropagation();
-
-              controlsEnabledEvent.dispatch(false);
-              Tankopedia.mutate((draft) => {
-                draft.shot = undefined;
-                draft.highlightArmor = undefined;
-              });
-
-              position.set(event.clientX, event.clientY);
-              pitch = modelTransformEvent.last!.pitch;
-              yaw = modelTransformEvent.last!.yaw;
-
-              window.addEventListener("pointermove", handlePointerMove);
-              window.addEventListener("pointerup", handlePointerUp);
-            }
-            function handlePointerMove(event: PointerEvent) {
-              const hasImprovedVerticalStabilizer = hasEquipment(
-                122,
-                Duel.state.protagonist.tank.equipment_preset,
-                Duel.state.protagonist.equipmentMatrix,
-              );
-              const hasDownImprovedVerticalStabilizer = hasEquipment(
-                124,
-                Duel.state.protagonist.tank.equipment_preset,
-                Duel.state.protagonist.equipmentMatrix,
-              );
-              const boundingRect = canvas.getBoundingClientRect();
-              delta.set(event.clientX, event.clientY).sub(position);
-              position.set(event.clientX, event.clientY);
-
-              [pitch, yaw] = applyPitchYawLimits(
-                pitch - delta.y * (Math.PI / boundingRect.height),
-                yaw + delta.x * (Math.PI / boundingRect.width),
-                gunModelDefinition.pitch!,
-                turretModelDefinition.yaw,
-                hasImprovedVerticalStabilizer,
-                hasDownImprovedVerticalStabilizer,
-              );
-              modelTransformEvent.dispatch({ pitch, yaw });
-            }
-            function handlePointerUp() {
-              controlsEnabledEvent.dispatch(true);
-              window.removeEventListener("pointermove", handlePointerMove);
-              window.removeEventListener("pointerup", handlePointerUp);
-            }
-
-            return jsxTree(node, {
-              mesh(_, props, key) {
-                return (
-                  <mesh
-                    {...props}
-                    key={key}
-                    onPointerDown={onPointerDown}
-                    castShadow
-                    receiveShadow
-                  />
-                );
-              },
-            });
-          })}
-        </group>
-      </group>
-    </ModelTankWrapper>
-  );
-}

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

@@ -23,12 +23,12 @@ import {
   type ThicknessRange,
 } from "../../../../Armor/components/StaticArmor";
 import { SmartCanvas } from "../../../../SmartCanvas";
+import { TankModel } from "../../../../TankModel";
 import { AutoClear } from "./components/AutoClear";
 import { Controls } from "./components/Control";
 import { InitialAligner } from "./components/InitialAligner";
 import { Lighting } from "./components/Lighting";
 import { SceneProps } from "./components/SceneProps";
-import { TankModel } from "./components/TankModel";
 
 interface TankSandboxProps {
   thicknessRange: ThicknessRange;

packages/website/src/hooks/useBatched.tsx

@@ -0,0 +1,89 @@
+import type { ObjectMap } from "@react-three/fiber";
+import type { ComponentProps } from "react";
+import {
+  BatchedMesh,
+  Group,
+  Mesh,
+  MeshStandardMaterial,
+  type Object3D,
+} from "three";
+
+interface BatchedProps extends ComponentProps<"group"> {
+  slicer: (node: Object3D) => boolean;
+  mutator?: (mesh: Mesh) => void;
+}
+
+export function useBatched(map: ObjectMap, shadows = false) {
+  return function Batched({ slicer, mutator, ...props }: BatchedProps) {
+    const groups = new Map<
+      MeshStandardMaterial,
+      { clonedMaterial: MeshStandardMaterial; meshes: Mesh[] }
+    >();
+
+    for (const node of Object.values(map.nodes)) {
+      if (!slicer(node)) continue;
+
+      node.traverse((object) => {
+        if (!(object instanceof Mesh)) return;
+
+        const originalMaterial = object.material;
+
+        if (!(originalMaterial instanceof MeshStandardMaterial)) return;
+
+        let group = groups.get(originalMaterial);
+
+        if (!group) {
+          group = {
+            clonedMaterial: originalMaterial.clone(),
+            meshes: [],
+          };
+          groups.set(originalMaterial, group);
+        }
+
+        group.meshes.push(object);
+      });
+    }
+
+    const wrapper = new Group();
+
+    for (const { clonedMaterial: material, meshes } of groups.values()) {
+      let vertices = 0;
+      let indices = 0;
+
+      for (const mesh of meshes) {
+        vertices += mesh.geometry.attributes.position.count;
+        indices += mesh.geometry.index!.count;
+      }
+
+      const batched = new BatchedMesh(
+        meshes.length,
+        vertices,
+        indices,
+        material,
+      );
+
+      for (const mesh of meshes) {
+        const geometryId = batched.addGeometry(mesh.geometry);
+        const instanceId = batched.addInstance(geometryId);
+
+        mesh.updateWorldMatrix(true, false);
+        batched.setMatrixAt(instanceId, mesh.matrixWorld);
+
+        if (shadows) {
+          batched.castShadow = true;
+          batched.receiveShadow = true;
+        }
+
+        mutator?.(mesh);
+      }
+
+      wrapper.add(batched);
+    }
+
+    return (
+      <group {...props}>
+        <primitive object={wrapper} />
+      </group>
+    );
+  };
+}