Update game.js

game.js

@@ -11,39 +11,71 @@ const statsElement = document.getElementById('stats-display');
 const inventoryElement = document.getElementById('inventory-display');
 
 // --- Three.js Setup ---
-let scene, camera, renderer, cube; // Basic scene object
+let scene, camera, renderer; // Basic scene objects
+let currentAssemblyGroup = null; // Group to hold the current scene's objects
 // let controls; // Optional OrbitControls
 
+// --- Shared Materials (Define common materials here for reuse) ---
+const stoneMaterial = new THREE.MeshStandardMaterial({ color: 0x888888, roughness: 0.8, metalness: 0.1 });
+const woodMaterial = new THREE.MeshStandardMaterial({ color: 0x8B4513, roughness: 0.7, metalness: 0 });
+const darkWoodMaterial = new THREE.MeshStandardMaterial({ color: 0x5C3D20, roughness: 0.7, metalness: 0 });
+const leafMaterial = new THREE.MeshStandardMaterial({ color: 0x2E8B57, roughness: 0.6, metalness: 0 }); // SeaGreen
+const groundMaterial = new THREE.MeshStandardMaterial({ color: 0x556B2F, roughness: 0.9, metalness: 0 }); // DarkOliveGreen
+const metalMaterial = new THREE.MeshStandardMaterial({ color: 0xaaaaaa, metalness: 0.8, roughness: 0.3 });
+const fabricMaterial = new THREE.MeshStandardMaterial({ color: 0x696969, roughness: 0.9, metalness: 0 }); // DimGray
+const waterMaterial = new THREE.MeshStandardMaterial({ color: 0x60A3D9, roughness: 0.2, metalness: 0.1, transparent: true, opacity: 0.7 });
+const templeMaterial = new THREE.MeshStandardMaterial({ color: 0xA99B78, roughness: 0.7, metalness: 0.1 }); // Light stone/sandstone
+const fireMaterial = new THREE.MeshStandardMaterial({ color: 0xFF4500, emissive: 0xff6600, roughness: 0.5, metalness: 0 }); // OrangeRed emissive
+const errorMaterial = new THREE.MeshStandardMaterial({ color: 0xffa500, roughness: 0.5 }); // Orange
+const gameOverMaterial = new THREE.MeshStandardMaterial({ color: 0xff0000, roughness: 0.5 }); // Red
+
+
 function initThreeJS() {
     // Scene
     scene = new THREE.Scene();
     scene.background = new THREE.Color(0x222222); // Match body background
+    // scene.fog = new THREE.Fog(0x222222, 8, 20); // Optional: Add fog for depth
 
     // Camera
     camera = new THREE.PerspectiveCamera(75, sceneContainer.clientWidth / sceneContainer.clientHeight, 0.1, 1000);
-    camera.position.z = 5;
+    camera.position.set(0, 2.5, 7); // Adjusted camera position for better view
+    camera.lookAt(0, 0, 0);
 
     // Renderer
     renderer = new THREE.WebGLRenderer({ antialias: true });
     renderer.setSize(sceneContainer.clientWidth, sceneContainer.clientHeight);
+    renderer.shadowMap.enabled = true; // Enable shadows
+    renderer.shadowMap.type = THREE.PCFSoftShadowMap; // Softer shadows
     sceneContainer.appendChild(renderer.domElement);
 
     // Basic Lighting
-    const ambientLight = new THREE.AmbientLight(0xffffff, 0.6); // Soft white light
+    const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); // Soft white light
     scene.add(ambientLight);
-    const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0);
-    directionalLight.position.set(5, 10, 7.5);
+    const directionalLight = new THREE.DirectionalLight(0xffffff, 1.2);
+    directionalLight.position.set(8, 15, 10);
+    directionalLight.castShadow = true; // Enable shadow casting
+    // Configure shadow properties (optional, adjust for quality/performance)
+    directionalLight.shadow.mapSize.width = 1024;
+    directionalLight.shadow.mapSize.height = 1024;
+    directionalLight.shadow.camera.near = 0.5;
+    directionalLight.shadow.camera.far = 50;
+    directionalLight.shadow.camera.left = -15;
+    directionalLight.shadow.camera.right = 15;
+    directionalLight.shadow.camera.top = 15;
+    directionalLight.shadow.camera.bottom = -15;
     scene.add(directionalLight);
+    // const lightHelper = new THREE.DirectionalLightHelper(directionalLight, 5); // Helper to visualize light
+    // scene.add(lightHelper);
+    // const shadowCameraHelper = new THREE.CameraHelper(directionalLight.shadow.camera); // Helper for shadow camera
+    // scene.add(shadowCameraHelper);
+
 
-    // Basic Object (Placeholder for scene illustration)
-    const geometry = new THREE.BoxGeometry(1, 1, 1);
-    const material = new THREE.MeshStandardMaterial({ color: 0xcccccc }); // Default color
-    cube = new THREE.Mesh(geometry, material);
-    scene.add(cube);
+    // REMOVED: Basic Object (Placeholder) - Will be added dynamically
 
     // Optional Controls
     // controls = new OrbitControls(camera, renderer.domElement);
     // controls.enableDamping = true;
+    // controls.target.set(0, 1, 0); // Adjust target if needed
 
     // Handle Resize
     window.addEventListener('resize', onWindowResize, false);
@@ -52,6 +84,344 @@ function initThreeJS() {
     animate();
 }
 
+// --- Helper function to create meshes ---
+function createMesh(geometry, material, position = { x: 0, y: 0, z: 0 }, rotation = { x: 0, y: 0, z: 0 }, scale = { x: 1, y: 1, z: 1 }) {
+    const mesh = new THREE.Mesh(geometry, material);
+    mesh.position.set(position.x, position.y, position.z);
+    mesh.rotation.set(rotation.x, rotation.y, rotation.z);
+    mesh.scale.set(scale.x, scale.y, scale.z);
+    mesh.castShadow = true;
+    mesh.receiveShadow = true;
+    return mesh;
+}
+
+// --- Procedural Generation Functions ---
+
+function createGroundPlane(material = groundMaterial, size = 20) {
+    const groundGeo = new THREE.PlaneGeometry(size, size);
+    const ground = new THREE.Mesh(groundGeo, material);
+    ground.rotation.x = -Math.PI / 2; // Rotate flat
+    ground.position.y = -0.05; // Slightly below origin
+    ground.receiveShadow = true;
+    return ground;
+}
+
+function createDefaultAssembly() {
+    const group = new THREE.Group();
+    const sphereGeo = new THREE.SphereGeometry(0.5, 16, 16);
+    group.add(createMesh(sphereGeo, stoneMaterial, { x: 0, y: 0.5, z: 0 }));
+    group.add(createGroundPlane());
+    return group;
+}
+
+function createCityGatesAssembly() {
+    const group = new THREE.Group();
+    const gateWallHeight = 4;
+    const gateWallWidth = 1.5;
+    const gateWallDepth = 0.8;
+    const archHeight = 1;
+    const archWidth = 3;
+
+    // Left Tower
+    const towerLeftGeo = new THREE.BoxGeometry(gateWallWidth, gateWallHeight, gateWallDepth);
+    group.add(createMesh(towerLeftGeo, stoneMaterial, { x: -(archWidth / 2 + gateWallWidth / 2), y: gateWallHeight / 2, z: 0 }));
+
+    // Right Tower
+    const towerRightGeo = new THREE.BoxGeometry(gateWallWidth, gateWallHeight, gateWallDepth);
+    group.add(createMesh(towerRightGeo, stoneMaterial, { x: (archWidth / 2 + gateWallWidth / 2), y: gateWallHeight / 2, z: 0 }));
+
+    // Arch Top
+    const archGeo = new THREE.BoxGeometry(archWidth, archHeight, gateWallDepth);
+    group.add(createMesh(archGeo, stoneMaterial, { x: 0, y: gateWallHeight - archHeight / 2, z: 0 }));
+
+    // Optional: Add crenellations (battlements)
+    const crenellationSize = 0.4;
+    for (let i = -2; i <= 2; i += 1) {
+        const crenGeo = new THREE.BoxGeometry(crenellationSize, crenellationSize, gateWallDepth * 1.1);
+        group.add(createMesh(crenGeo, stoneMaterial, { x: -(archWidth / 2 + gateWallWidth / 2) + i * crenellationSize * 1.5, y: gateWallHeight + crenellationSize / 2, z: 0 }));
+        group.add(createMesh(crenGeo, stoneMaterial, { x: (archWidth / 2 + gateWallWidth / 2) + i * crenellationSize * 1.5, y: gateWallHeight + crenellationSize / 2, z: 0 }));
+    }
+
+    group.add(createGroundPlane(stoneMaterial)); // Stone ground
+    return group;
+}
+
+function createWeaponsmithAssembly() {
+    const group = new THREE.Group();
+    const buildingWidth = 3;
+    const buildingHeight = 2.5;
+    const buildingDepth = 3.5;
+    const roofHeight = 1;
+
+    // Main Building
+    const buildingGeo = new THREE.BoxGeometry(buildingWidth, buildingHeight, buildingDepth);
+    group.add(createMesh(buildingGeo, darkWoodMaterial, { x: 0, y: buildingHeight / 2, z: 0 }));
+
+    // Roof (simple triangular prism shape made of two planes)
+    const roofGeo = new THREE.PlaneGeometry(buildingWidth * 1.1, Math.sqrt(Math.pow(buildingDepth / 2, 2) + Math.pow(roofHeight, 2)));
+    const roofLeft = createMesh(roofGeo, woodMaterial, { x: 0, y: buildingHeight + roofHeight / 2, z: -buildingDepth / 4 }, { x: 0, y: 0, z: Math.atan2(roofHeight, buildingDepth / 2) });
+    const roofRight = createMesh(roofGeo, woodMaterial, { x: 0, y: buildingHeight + roofHeight / 2, z: buildingDepth / 4 }, { x: 0, y: Math.PI, z: -Math.atan2(roofHeight, buildingDepth / 2) });
+    group.add(roofLeft);
+    group.add(roofRight);
+     // Add gable ends (triangles)
+    const gableShape = new THREE.Shape();
+    gableShape.moveTo(-buildingWidth/2, buildingHeight);
+    gableShape.lineTo(buildingWidth/2, buildingHeight);
+    gableShape.lineTo(0, buildingHeight + roofHeight);
+    gableShape.closePath();
+    const gableGeo = new THREE.ShapeGeometry(gableShape);
+    group.add(createMesh(gableGeo, woodMaterial, {x: 0, y: 0, z: buildingDepth/2}, {x: 0, y: 0, z: 0}));
+    group.add(createMesh(gableGeo, woodMaterial, {x: 0, y: 0, z: -buildingDepth/2}, {x: 0, y: Math.PI, z: 0}));
+
+
+    // Forge/Chimney (simple representation)
+    const forgeHeight = 3;
+    const forgeGeo = new THREE.CylinderGeometry(0.3, 0.4, forgeHeight, 8);
+    group.add(createMesh(forgeGeo, stoneMaterial, { x: buildingWidth * 0.3, y: forgeHeight / 2, z: -buildingDepth * 0.3 }));
+
+    // Anvil (simple block)
+    const anvilGeo = new THREE.BoxGeometry(0.4, 0.5, 0.7);
+    group.add(createMesh(anvilGeo, metalMaterial, { x: -buildingWidth * 0.2, y: 0.25, z: buildingDepth * 0.2 }));
+
+
+    group.add(createGroundPlane());
+    return group;
+}
+
+function createTempleAssembly() {
+    const group = new THREE.Group();
+    const baseSize = 5;
+    const baseHeight = 0.5;
+    const columnHeight = 3;
+    const columnRadius = 0.25;
+    const roofHeight = 1;
+
+    // Base Platform
+    const baseGeo = new THREE.BoxGeometry(baseSize, baseHeight, baseSize);
+    group.add(createMesh(baseGeo, templeMaterial, { x: 0, y: baseHeight / 2, z: 0 }));
+
+    // Columns (example: 4 columns)
+    const colPositions = [
+        { x: -baseSize / 3, z: -baseSize / 3 },
+        { x: baseSize / 3, z: -baseSize / 3 },
+        { x: -baseSize / 3, z: baseSize / 3 },
+        { x: baseSize / 3, z: baseSize / 3 },
+    ];
+    const colGeo = new THREE.CylinderGeometry(columnRadius, columnRadius, columnHeight, 12);
+    colPositions.forEach(pos => {
+        group.add(createMesh(colGeo, templeMaterial, { x: pos.x, y: baseHeight + columnHeight / 2, z: pos.z }));
+    });
+
+    // Simple Roof Slab
+    const roofGeo = new THREE.BoxGeometry(baseSize * 0.8, roofHeight / 2, baseSize * 0.8);
+    group.add(createMesh(roofGeo, templeMaterial, { x: 0, y: baseHeight + columnHeight + roofHeight / 4, z: 0 }));
+
+    // Optional: Pyramid roof top
+    const pyramidGeo = new THREE.ConeGeometry(baseSize * 0.5, roofHeight * 1.5, 4); // 4 sides for pyramid
+    group.add(createMesh(pyramidGeo, templeMaterial, { x: 0, y: baseHeight + columnHeight + roofHeight *0.75, z: 0 }, { x: 0, y: Math.PI / 4, z: 0 })); // Rotate for alignment
+
+
+    group.add(createGroundPlane());
+    return group;
+}
+
+function createResistanceMeetingAssembly() {
+    const group = new THREE.Group();
+    const tableWidth = 2;
+    const tableHeight = 0.8;
+    const tableDepth = 1;
+    const tableThickness = 0.1;
+
+    // Table Top
+    const tableTopGeo = new THREE.BoxGeometry(tableWidth, tableThickness, tableDepth);
+    group.add(createMesh(tableTopGeo, woodMaterial, { x: 0, y: tableHeight - tableThickness / 2, z: 0 }));
+
+    // Table Legs
+    const legHeight = tableHeight - tableThickness;
+    const legSize = 0.1;
+    const legGeo = new THREE.BoxGeometry(legSize, legHeight, legSize);
+    const legOffsetW = tableWidth / 2 - legSize * 1.5;
+    const legOffsetD = tableDepth / 2 - legSize * 1.5;
+    group.add(createMesh(legGeo, woodMaterial, { x: -legOffsetW, y: legHeight / 2, z: -legOffsetD }));
+    group.add(createMesh(legGeo, woodMaterial, { x: legOffsetW, y: legHeight / 2, z: -legOffsetD }));
+    group.add(createMesh(legGeo, woodMaterial, { x: -legOffsetW, y: legHeight / 2, z: legOffsetD }));
+    group.add(createMesh(legGeo, woodMaterial, { x: legOffsetW, y: legHeight / 2, z: legOffsetD }));
+
+    // Simple Stools/Boxes for people to sit on
+    const stoolSize = 0.4;
+    const stoolGeo = new THREE.BoxGeometry(stoolSize, stoolSize * 0.8, stoolSize);
+    group.add(createMesh(stoolGeo, darkWoodMaterial, { x: -tableWidth * 0.6, y: stoolSize * 0.4, z: 0 }));
+    group.add(createMesh(stoolGeo, darkWoodMaterial, { x: tableWidth * 0.6, y: stoolSize * 0.4, z: 0 }));
+    group.add(createMesh(stoolGeo, darkWoodMaterial, { x: 0, y: stoolSize * 0.4, z: -tableDepth * 0.7 }));
+
+    // Dim room feeling - maybe add simple walls
+    const wallHeight = 3;
+    const wallThickness = 0.2;
+    const roomSize = 5;
+    const wallBackGeo = new THREE.BoxGeometry(roomSize, wallHeight, wallThickness);
+    group.add(createMesh(wallBackGeo, stoneMaterial, { x: 0, y: wallHeight / 2, z: -roomSize / 2 }, {}));
+    const wallLeftGeo = new THREE.BoxGeometry(wallThickness, wallHeight, roomSize);
+    group.add(createMesh(wallLeftGeo, stoneMaterial, { x: -roomSize / 2, y: wallHeight / 2, z: 0 }, {}));
+
+
+    group.add(createGroundPlane(stoneMaterial)); // Stone floor
+    return group;
+}
+
+function createForestAssembly(treeCount = 15, area = 10) {
+    const group = new THREE.Group();
+
+    // Tree generation function
+    const createTree = (x, z) => {
+        const treeGroup = new THREE.Group();
+        const trunkHeight = Math.random() * 2 + 2; // Random height between 2 and 4
+        const trunkRadius = Math.random() * 0.15 + 0.1; // Random radius
+        const trunkGeo = new THREE.CylinderGeometry(trunkRadius * 0.7, trunkRadius, trunkHeight, 8);
+        treeGroup.add(createMesh(trunkGeo, woodMaterial, { x: 0, y: trunkHeight / 2, z: 0 }));
+
+        // Foliage (simple sphere or cone)
+        const foliageType = Math.random();
+        const foliageHeight = trunkHeight * (Math.random() * 0.5 + 0.8); // Relative to trunk
+        if (foliageType < 0.6) { // Sphere foliage
+            const foliageRadius = trunkHeight * 0.4;
+            const foliageGeo = new THREE.SphereGeometry(foliageRadius, 8, 6);
+            treeGroup.add(createMesh(foliageGeo, leafMaterial, { x: 0, y: trunkHeight * 0.9 + foliageRadius * 0.5, z: 0 }));
+        } else { // Cone foliage
+            const foliageRadius = trunkHeight * 0.5;
+            const coneGeo = new THREE.ConeGeometry(foliageRadius, foliageHeight, 8);
+             treeGroup.add(createMesh(coneGeo, leafMaterial, { x: 0, y: trunkHeight * 0.9 + foliageHeight * 0.5, z: 0 }));
+        }
+        treeGroup.position.set(x, 0, z); // Set position for the whole tree
+         // Slight random rotation for variation
+        treeGroup.rotation.y = Math.random() * Math.PI * 2;
+        return treeGroup;
+    };
+
+    // Scatter trees
+    for (let i = 0; i < treeCount; i++) {
+        const x = (Math.random() - 0.5) * area;
+        const z = (Math.random() - 0.5) * area;
+        // Basic check to avoid trees too close to the center (optional)
+        if (Math.sqrt(x*x + z*z) > 1.5) {
+            group.add(createTree(x, z));
+        }
+    }
+
+    group.add(createGroundPlane()); // Forest floor
+    return group;
+}
+
+function createRoadAmbushAssembly() {
+     const group = new THREE.Group();
+     const area = 12;
+
+     // Add some forest elements
+     const forestGroup = createForestAssembly(10, area);
+     group.add(forestGroup); // Reuse forest generation
+
+     // Add a simple road (a flat, wider plane)
+     const roadWidth = 3;
+     const roadLength = area * 1.5;
+     const roadGeo = new THREE.PlaneGeometry(roadWidth, roadLength);
+     const roadMaterial = new THREE.MeshStandardMaterial({ color: 0x966F33, roughness: 0.9 }); // Muddy brown
+     const road = createMesh(roadGeo, roadMaterial, {x: 0, y: 0.01, z: 0}, {x: -Math.PI / 2}); // Slightly above ground
+     road.receiveShadow = true; // Ensure road receives shadows too
+     group.add(road);
+
+     // Add some rocks/bushes for cover (simple spheres/low boxes)
+     const rockGeo = new THREE.SphereGeometry(0.5, 5, 4);
+     const rockMaterial = new THREE.MeshStandardMaterial({ color: 0x666666, roughness: 0.8 });
+     group.add(createMesh(rockGeo, rockMaterial, {x: roadWidth * 0.7, y: 0.25, z: 1}, {y: Math.random() * Math.PI}));
+     group.add(createMesh(rockGeo, rockMaterial, {x: -roadWidth * 0.8, y: 0.3, z: -2}, {y: Math.random() * Math.PI, x: Math.random()*0.2}));
+     group.add(createMesh(new THREE.SphereGeometry(0.7, 5, 4), rockMaterial, {x: roadWidth * 0.9, y: 0.35, z: -3}, {y: Math.random() * Math.PI}));
+
+    // Suggestion: You could add simple cylinder/box figures near cover later for the ambushers
+
+     // Ground plane is added by createForestAssembly
+
+     return group;
+}
+
+function createForestEdgeAssembly() {
+    const group = new THREE.Group();
+    const area = 15;
+
+    // Dense forest on one side
+    const forestGroup = new THREE.Group();
+     for (let i = 0; i < 20; i++) { // More trees, denser area
+        const x = (Math.random() - 0.9) * area / 2; // Skew to one side (negative X)
+        const z = (Math.random() - 0.5) * area;
+        forestGroup.add(createForestAssembly(1, 0).children[0].position.set(x,0,z)); // Add single tree procedurally
+    }
+    group.add(forestGroup);
+
+
+    // Open plains on the other side (just ground)
+    group.add(createGroundPlane(groundMaterial, area * 1.2)); // Larger ground plane
+
+    return group;
+}
+
+function createPrisonerCellAssembly() {
+    const group = new THREE.Group();
+    const cellSize = 3;
+    const wallHeight = 2.5;
+    const wallThickness = 0.2;
+    const barRadius = 0.04;
+    const barSpacing = 0.2;
+
+    // Floor
+    group.add(createGroundPlane(stoneMaterial, cellSize));
+
+    // Back Wall
+    const wallBackGeo = new THREE.BoxGeometry(cellSize, wallHeight, wallThickness);
+    group.add(createMesh(wallBackGeo, stoneMaterial, { x: 0, y: wallHeight / 2, z: -cellSize / 2 }));
+
+    // Left Wall
+    const wallSideGeo = new THREE.BoxGeometry(wallThickness, wallHeight, cellSize);
+    group.add(createMesh(wallSideGeo, stoneMaterial, { x: -cellSize / 2, y: wallHeight / 2, z: 0 }));
+
+    // Right Wall (Partial or Full)
+     group.add(createMesh(wallSideGeo, stoneMaterial, { x: cellSize / 2, y: wallHeight / 2, z: 0 }));
+
+    // Ceiling (optional)
+    // const ceilingGeo = new THREE.BoxGeometry(cellSize, wallThickness, cellSize);
+    // group.add(createMesh(ceilingGeo, stoneMaterial, { x: 0, y: wallHeight, z: 0 }));
+
+
+    // Bars for the front
+    const barGeo = new THREE.CylinderGeometry(barRadius, barRadius, wallHeight, 8);
+    const numBars = Math.floor(cellSize / barSpacing);
+    for (let i = 0; i <= numBars; i++) {
+        const xPos = -cellSize / 2 + i * barSpacing;
+         group.add(createMesh(barGeo, metalMaterial, { x: xPos, y: wallHeight / 2, z: cellSize / 2 }));
+    }
+     // Horizontal bars (top/bottom)
+    const horizBarGeo = new THREE.BoxGeometry(cellSize, barRadius * 2, barRadius * 2);
+    group.add(createMesh(horizBarGeo, metalMaterial, {x: 0, y: wallHeight - barRadius, z: cellSize/2}));
+    group.add(createMesh(horizBarGeo, metalMaterial, {x: 0, y: barRadius, z: cellSize/2}));
+
+
+    return group;
+}
+
+function createGameOverAssembly() {
+     const group = new THREE.Group();
+     const boxGeo = new THREE.BoxGeometry(2, 2, 2);
+     group.add(createMesh(boxGeo, gameOverMaterial, { x: 0, y: 1, z: 0 }));
+     group.add(createGroundPlane(stoneMaterial.clone().set({color: 0x333333}))); // Darker ground
+     return group;
+}
+
+function createErrorAssembly() {
+     const group = new THREE.Group();
+     const coneGeo = new THREE.ConeGeometry( 0.8, 1.5, 8 );
+     group.add(createMesh(coneGeo, errorMaterial, { x: 0, y: 0.75, z: 0 }));
+     group.add(createGroundPlane());
+     return group;
+}
+
+
 function onWindowResize() {
     if (!renderer || !camera) return;
     camera.aspect = sceneContainer.clientWidth / sceneContainer.clientHeight;
@@ -62,10 +432,10 @@ function onWindowResize() {
 function animate() {
     requestAnimationFrame(animate);
 
-    // Simple animation
-    if (cube) {
-        cube.rotation.x += 0.005;
-        cube.rotation.y += 0.005;
+    // Optional: Add subtle animation to the entire assembly
+    if (currentAssemblyGroup) {
+         // Example: Very slow rotation
+         // currentAssemblyGroup.rotation.y += 0.0005;
     }
 
     // if (controls) controls.update(); // If using OrbitControls
@@ -122,39 +492,63 @@ const gameData = {
         content: `<p>You leave Silverhold and enter the corrupted Shadowwood Forest. Strange sounds echo. Which path will you take?</p>`,
         options: [
             { text: "Take the main road", next: 6 }, // Leads to page 6 (Ambush)
-            { text: "Follow the river path", next: 7 }, // Leads to page 7 (River Spirit)
-            { text: "Brave the ruins shortcut", next: 8 } // Leads to page 8 (Ruins)
+            { text: "Follow the river path", next: 7 }, // Leads to page 7 (River Spirit) - NEEDS 3D Scene
+            { text: "Brave the ruins shortcut", next: 8 } // Leads to page 8 (Ruins) - NEEDS 3D Scene
         ],
         illustration: "shadowwood-forest" // Key for Three.js scene
         // Add more pages here...
     },
      // Add placeholder pages 6, 7, 8 etc. to continue the story
      "6": {
-         title: "Ambush!",
-         content: "<p>Scouts jump out! 'Surrender!'</p>",
-         options: [{ text: "Fight!", next: 9 }, { text: "Try to flee!", next: 10 }], // Example links
-         illustration: "road-ambush"
+        title: "Ambush!",
+        content: "<p>Scouts jump out from behind rocks and trees! 'Surrender!'</p>",
+        options: [{ text: "Fight!", next: 9 }, { text: "Try to flee!", next: 10 }], // Example links
+        illustration: "road-ambush"
+     },
+     "7": { // Placeholder - NEEDS 3D Scene function
+        title: "River Path",
+        content: "<p>You follow the winding river. The water seems unnaturally dark.</p>",
+        options: [{ text: "Continue along the river", next: 11 }, { text: "Investigate strange glow", next: 12 }],
+        illustration: "river-spirit" // Needs createRiverSpiritAssembly()
+     },
+      "8": { // Placeholder - NEEDS 3D Scene function
+        title: "Ancient Ruins",
+        content: "<p>Crumbling stones and overgrown vines mark ancient ruins. It feels watched.</p>",
+        options: [{ text: "Search the main structure", next: 13 }, { text: "Look for hidden passages", next: 14 }],
+        illustration: "ancient-ruins" // Needs createRuinsAssembly()
      },
-     // ... Add many more pages based on your Python data ...
      "9": { // Example continuation
-         title: "Victory!",
-         content: "<p>You defeat the scouts and continue.</p>",
-         options: [{ text: "Proceed to the fortress plains", next: 15 }],
-         illustration: "forest-edge"
+        title: "Victory!",
+        content: "<p>You defeat the scouts and retrieve some basic supplies. The forest edge is near.</p>",
+        options: [{ text: "Proceed to the fortress plains", next: 15 }],
+        illustration: "forest-edge"
      },
      "10": { // Example continuation
-         title: "Captured!",
-         content: "<p>You failed to escape and are captured!</p>",
-         options: [{ text: "Accept fate (for now)", next: 20 }], // Go to prison wagon page
-         illustration: "prisoner-cell"
+        title: "Captured!",
+        content: "<p>Your attempt to flee fails! You are knocked out and awaken in a dark, damp cell.</p>",
+        options: [{ text: "Wait and observe", next: 20 }], // Go to prison observation page
+        illustration: "prisoner-cell"
+     },
+     // ... Add many more pages based on your Python data ...
+      "15": { // Placeholder for plains
+        title: "Fortress Plains",
+        content: "<p>You emerge from the forest onto windswept plains. The dark fortress looms ahead.</p>",
+        options: [{ text: "Approach the main gate", next: 30 }, { text: "Scout the perimeter", next: 31 }],
+        illustration: "fortress-plains" // Needs createFortressPlainsAssembly()
+     },
+     "20": { // Placeholder for cell observation
+        title: "Inside the Cell",
+        content: "<p>The cell is small and cold. You hear guards patrolling outside.</p>",
+        options: [{ text: "Look for weaknesses in the bars", next: 21 }, { text: "Try to talk to a guard", next: 22 }],
+        illustration: "prisoner-cell" // Reuse cell
      },
      // Game Over placeholder
      "99": {
-        title: "Game Over",
-        content: "<p>Your adventure ends here.</p>",
-        options: [{ text: "Restart", next: 1 }], // Link back to start
-        illustration: "game-over",
-        gameOver: true
+       title: "Game Over",
+       content: "<p>Your adventure ends here.</p>",
+       options: [{ text: "Restart", next: 1 }], // Link back to start
+       illustration: "game-over",
+       gameOver: true
      }
 };
 
@@ -201,7 +595,7 @@ function renderPage(pageId) {
         console.error(`Error: Page data not found for ID: ${pageId}`);
         storyTitleElement.textContent = "Error";
         storyContentElement.innerHTML = "<p>Could not load page data. Adventure halted.</p>";
-        choicesElement.innerHTML = '<button class="choice-button" onclick="handleChoice(1)">Restart</button>'; // Provide restart option
+        choicesElement.innerHTML = '<button class="choice-button" onclick="handleChoiceClick({ nextPage: 1 })">Restart</button>'; // Provide restart option
         updateScene('error'); // Show error scene
         return;
     }
@@ -230,14 +624,18 @@ function renderPage(pageId) {
             // Add requireAnyItem check here later if needed
 
             if (requirementMet) {
-                // Store data needed for handling the choice
-                button.dataset.nextPage = option.next;
-                if (option.addItem) {
-                    button.dataset.addItem = option.addItem;
-                }
-                // Add other potential effects as data attributes if needed
-
-                button.onclick = () => handleChoiceClick(button.dataset);
+                // Store data needed for handling the choice using dataset
+                const choiceData = { nextPage: option.next }; // Always include next page
+                 if (option.addItem) {
+                    choiceData.addItem = option.addItem;
+                 }
+                  // Add other potential effects as data attributes if needed (e.g., data-stat-change="strength:1")
+
+                // Use an event listener instead of inline onclick for better practice
+                button.addEventListener('click', () => handleChoiceClick(choiceData));
+
+            } else {
+                 button.classList.add('disabled'); // Style disabled buttons
             }
 
             choicesElement.appendChild(button);
@@ -246,16 +644,15 @@ function renderPage(pageId) {
          const button = document.createElement('button');
          button.classList.add('choice-button');
          button.textContent = "Restart Adventure";
-         button.dataset.nextPage = 1; // Restart goes to page 1
-         button.onclick = () => handleChoiceClick(button.dataset);
+         button.addEventListener('click', () => handleChoiceClick({ nextPage: 1 })); // Restart goes to page 1
          choicesElement.appendChild(button);
     } else {
-        choicesElement.innerHTML = '<p><i>No further options available from here.</i></p>';
+        // Handle dead ends where no options are defined and it's not game over
+        choicesElement.innerHTML = '<p><i>There are no further paths from here.</i></p>';
          const button = document.createElement('button');
          button.classList.add('choice-button');
          button.textContent = "Restart Adventure";
-         button.dataset.nextPage = 1; // Restart goes to page 1
-         button.onclick = () => handleChoiceClick(button.dataset);
+         button.addEventListener('click', () => handleChoiceClick({ nextPage: 1 })); // Restart goes to page 1
          choicesElement.appendChild(button);
     }
 
@@ -264,12 +661,15 @@ function renderPage(pageId) {
     updateScene(page.illustration || 'default');
 }
 
-function handleChoiceClick(dataset) {
-    const nextPageId = parseInt(dataset.nextPage); // Ensure it's a number
-    const itemToAdd = dataset.addItem;
+
+// Modified handleChoiceClick to accept an object
+function handleChoiceClick(choiceData) {
+    const nextPageId = parseInt(choiceData.nextPage); // Ensure it's a number
+    const itemToAdd = choiceData.addItem;
+    // Add other potential effects from choiceData here (e.g., stat changes tied to the *choice itself*)
 
     if (isNaN(nextPageId)) {
-        console.error("Invalid nextPageId:", dataset.nextPage);
+        console.error("Invalid nextPageId:", choiceData.nextPage);
         return;
     }
 
@@ -353,31 +753,67 @@ function updateInventoryDisplay() {
 
 function updateScene(illustrationKey) {
     console.log("Updating scene for:", illustrationKey);
-    if (!cube) return; // Don't do anything if cube isn't initialized
 
-    // Simple scene update: Change cube color based on key
-    let color = 0xcccccc; // Default grey
+    // 1. Remove the old assembly if it exists
+    if (currentAssemblyGroup) {
+        scene.remove(currentAssemblyGroup);
+        // Optional: Dispose of geometries and materials if scenes get complex
+        // currentAssemblyGroup.traverse(child => {
+        //     if (child.isMesh) {
+        //         if(child.geometry) child.geometry.dispose();
+        //         // Dispose materials carefully if they are shared!
+        //         // If not shared: if(child.material) child.material.dispose();
+        //     }
+        // });
+    }
+    currentAssemblyGroup = null; // Reset the reference
+
+    // 2. Select the generation function based on the key
+    let assemblyFunction;
     switch (illustrationKey) {
-        case 'city-gates': color = 0xaaaaaa; break;
-        case 'weaponsmith': color = 0x8B4513; break; // Brown
-        case 'temple': color = 0xFFFFE0; break; // Light yellow
-        case 'resistance-meeting': color = 0x696969; break; // Dim grey
-        case 'shadowwood-forest': color = 0x228B22; break; // Forest green
-        case 'road-ambush': color = 0xD2691E; break; // Chocolate (dirt road)
-        case 'river-spirit': color = 0xADD8E6; break; // Light blue
-        case 'ancient-ruins': color = 0x778899; break; // Light slate grey
-        case 'forest-edge': color = 0x90EE90; break; // Light green
-        case 'prisoner-cell': color = 0x444444; break; // Dark grey
-        case 'game-over': color = 0xff0000; break; // Red
-        case 'error': color = 0xffa500; break; // Orange
-        default: color = 0xcccccc; break; // Default grey for unknown
+        case 'city-gates': assemblyFunction = createCityGatesAssembly; break;
+        case 'weaponsmith': assemblyFunction = createWeaponsmithAssembly; break;
+        case 'temple': assemblyFunction = createTempleAssembly; break;
+        case 'resistance-meeting': assemblyFunction = createResistanceMeetingAssembly; break;
+        case 'shadowwood-forest': assemblyFunction = createForestAssembly; break;
+        case 'road-ambush': assemblyFunction = createRoadAmbushAssembly; break;
+        case 'forest-edge': assemblyFunction = createForestEdgeAssembly; break;
+        case 'prisoner-cell': assemblyFunction = createPrisonerCellAssembly; break;
+        case 'game-over': assemblyFunction = createGameOverAssembly; break;
+        case 'error': assemblyFunction = createErrorAssembly; break;
+
+        // --- Add cases for new/missing scenes ---
+        // case 'river-spirit': assemblyFunction = createRiverSpiritAssembly; break; // TODO
+        // case 'ancient-ruins': assemblyFunction = createRuinsAssembly; break; // TODO
+        // case 'fortress-plains': assemblyFunction = createFortressPlainsAssembly; break; // TODO
+
+        default:
+            console.warn(`No specific assembly function found for key: ${illustrationKey}. Using default.`);
+            assemblyFunction = createDefaultAssembly;
+            break;
+    }
+
+    // 3. Create the new assembly
+    try {
+         currentAssemblyGroup = assemblyFunction();
+    } catch (error) {
+        console.error(`Error creating assembly for key ${illustrationKey}:`, error);
+        currentAssemblyGroup = createErrorAssembly(); // Show error scene on generation failure
     }
-    cube.material.color.setHex(color);
 
-    // In a more complex setup, you would:
-    // 1. Remove old objects from the scene (scene.remove(object))
-    // 2. Load/create new objects based on illustrationKey
-    // 3. Add new objects to the scene (scene.add(newObject))
+
+    // 4. Add the new assembly to the scene
+    if (currentAssemblyGroup) {
+        scene.add(currentAssemblyGroup);
+         // Optional: Slightly randomize overall rotation/position for non-fixed scenes like forests
+         if (['shadowwood-forest', 'road-ambush', 'forest-edge'].includes(illustrationKey)) {
+             currentAssemblyGroup.rotation.y = Math.random() * 0.1 - 0.05; // Small random Y rotation
+         }
+    } else {
+        console.error(`Assembly function for ${illustrationKey} did not return a group.`);
+        currentAssemblyGroup = createErrorAssembly(); // Fallback
+        scene.add(currentAssemblyGroup);
+    }
 }
 
 
@@ -385,6 +821,5 @@ function updateScene(illustrationKey) {
 initThreeJS();
 startGame(); // Start the game after setting up Three.js
 
-// Make handleChoiceClick globally accessible IF using inline onclick
-// If using addEventListener, this is not needed.
+// Removed global handleChoiceClick - now using event listeners in renderPage
 // window.handleChoiceClick = handleChoiceClick;