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(
- +