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 (
@@ -15,23 +23,33 @@ export function TankopediaSandbox() {
className={styles.canvas}
frameloop="demand"
>
- {!import.meta.env.SSR && }
+ {!import.meta.env.SSR && }
);
}
-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(
-
+