From 648344d7ccca602014b82349c6b1c5b3b6aae02b Mon Sep 17 00:00:00 2001
From: tresabhi <43380238+tresabhi@users.noreply.github.com>
Date: Wed, 10 Jun 2026 12:51:06 -0500
Subject: [PATCH] module selection

---
 .../components/TankopediaSandbox/index.tsx    | 34 ++++++++++++++-----
 .../pages/[...locale]/tanks/[slug]/_index.tsx |  4 +--
 2 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/packages/website-ue/src/components/TankopediaSandbox/index.tsx b/packages/website-ue/src/components/TankopediaSandbox/index.tsx
index fff6e4096..057104264 100644
--- a/packages/website-ue/src/components/TankopediaSandbox/index.tsx
+++ b/packages/website-ue/src/components/TankopediaSandbox/index.tsx
@@ -1,3 +1,7 @@
+import {
+  VisualChanges_TankPart,
+  type StageParameters,
+} from "@protos/blitz_static_tank_upgrade_single_stage";
 import { OrbitControls } from "@react-three/drei";
 import { Canvas, useLoader } from "@react-three/fiber";
 import { Mesh, MeshStandardMaterial } from "three";
@@ -5,7 +9,11 @@ import { GLTFLoader } from "three-stdlib";
 import { useProtagonist } from "../../hooks/useProtagonist";
 import styles from "./index.module.css";
 
-export function TankopediaSandbox() {
+interface TankopediaSandboxProps {
+  parameters: StageParameters;
+}
+
+export function TankopediaSandbox({ parameters }: TankopediaSandboxProps) {
   return (
     <div className={styles.wrapper}>
       <div className={styles.sandbox}>
@@ -15,23 +23,33 @@ export function TankopediaSandbox() {
           className={styles.canvas}
           frameloop="demand"
         >
-          {!import.meta.env.SSR && <Content />}
+          {!import.meta.env.SSR && <Content parameters={parameters} />}
         </Canvas>
       </div>
     </div>
   );
 }
 
-function Content() {
+function Content({ parameters }: TankopediaSandboxProps) {
   const tank = useProtagonist();
 
-  const turret = useLoader(
-    GLTFLoader,
-    `/models/tanks/${tank.id}/turret_01.glb`,
-  );
-  const gun = useLoader(GLTFLoader, `/models/tanks/${tank.id}/gun_01.glb`);
+  const selectedTurret = parameters.visual_changes.find(
+    ({ tank_part }) => tank_part === VisualChanges_TankPart.TANK_PART_TURRET,
+  )!.name;
+  const selectedGun = parameters.visual_changes.find(
+    ({ tank_part }) => tank_part === VisualChanges_TankPart.TANK_PART_GUN,
+  )!.name;
+
   const hull = useLoader(GLTFLoader, `/models/tanks/${tank.id}/hull.glb`);
   const chassis = useLoader(GLTFLoader, `/models/tanks/${tank.id}/chassis.glb`);
+  const turret = useLoader(
+    GLTFLoader,
+    `/models/tanks/${tank.id}/${selectedTurret}.glb`,
+  );
+  const gun = useLoader(
+    GLTFLoader,
+    `/models/tanks/${tank.id}/${selectedGun}.glb`,
+  );
 
   const gltfs = [turret, gun, hull, chassis];
 
diff --git a/packages/website-ue/src/pages/[...locale]/tanks/[slug]/_index.tsx b/packages/website-ue/src/pages/[...locale]/tanks/[slug]/_index.tsx
index 023ff37c2..9dbff83ef 100644
--- a/packages/website-ue/src/pages/[...locale]/tanks/[slug]/_index.tsx
+++ b/packages/website-ue/src/pages/[...locale]/tanks/[slug]/_index.tsx
@@ -24,7 +24,7 @@ export const Page = withErrorWrapper(
     const protagonist = Tankopedia.use((state) => state.protagonist);
     const protagonistEquipment = useEquipment(protagonistTank.tank!);
 
-    const { characteristics } = useMemo(
+    const { characteristics, parameters } = useMemo(
       () =>
         computeCharacteristics(
           protagonistTank,
@@ -41,7 +41,7 @@ export const Page = withErrorWrapper(
         </div>
 
         <div className={styles.sandbox}>
-          <TankopediaSandbox />
+          <TankopediaSandbox parameters={parameters} />
           <TankopediaCharacteristics characteristics={characteristics} />
         </div>
       </div>