Spaces:

awacke1
/

ChooseYourOwnAdventure

Running

App Files Files Community

awacke1 commited on 5 days ago

Commit

0a69594

verified ·

1 Parent(s): 7c0cab7

Update index.html

Browse files

Files changed (1) hide show

index.html +358 -85

index.html CHANGED Viewed

@@ -3,13 +3,13 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Basic 3D Setup Test</title>
     <style>
-        /* --- Minimal Base Styles --- */
         body {
             font-family: 'Courier New', monospace;
-            background-color: #222;
-            color: #eee;
             margin: 0;
             padding: 0;
             overflow: hidden; /* Prevent scrollbars */
@@ -31,32 +31,90 @@
             border-right: 2px solid #555;
             min-width: 200px;
             background-color: #1a1a1a;
-            height: 100%; /* Ensure it takes full height of flex parent */
-            box-sizing: border-box; /* Include border in size */
         }
         #ui-container {
             flex-grow: 2; /* Space for UI elements */
             padding: 20px;
-            overflow-y: auto; /* Allow scrolling if content overflows */
             background-color: #333;
             min-width: 280px;
-            height: 100%; /* Ensure it takes full height of flex parent */
-            box-sizing: border-box; /* Include padding in size */
         }
-        #scene-container canvas {
-            display: block; /* Remove extra space below canvas */
-        }
-        /* --- Basic UI Placeholders --- */
-         #ui-container h2 {
             color: #ffcc66;
             margin-top: 0;
             margin-bottom: 15px;
             border-bottom: 1px solid #555;
             padding-bottom: 10px;
         }
     </style>
 </head>
@@ -67,12 +125,24 @@
             </div>
         <div id="ui-container">
-            <h2 id="story-title">UI Panel</h2>
             <div id="story-content">
-                <p>This panel will hold the story text, choices, and character sheet later.</p>
-                <p>Focus is on getting the 3D cube rendering in the left panel.</p>
             </div>
-             </div>
     </div>
     <script type="importmap">
@@ -86,120 +156,323 @@
     <script type="module">
         import * as THREE from 'three';
-        // OrbitControls is not used in this minimal version
         // import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
         // --- DOM Elements ---
         const sceneContainer = document.getElementById('scene-container');
-        // References to UI elements (not used in this version, but kept for context)
-        // const storyTitleElement = document.getElementById('story-title');
-        // const storyContentElement = document.getElementById('story-content');
-        // const choicesElement = document.getElementById('choices');
-        // const statsElement = document.getElementById('stats-display');
-        // const inventoryElement = document.getElementById('inventory-display');
         // --- Three.js Setup ---
-        let scene, camera, renderer, cube; // Basic scene objects
         function initThreeJS() {
-            console.log("Attempting to initialize Three.js..."); // Debug log
-            if (!sceneContainer) {
-                console.error("Scene container not found!");
-                return; // Stop if container doesn't exist
-            }
-            // Scene
             scene = new THREE.Scene();
-            scene.background = new THREE.Color(0x222222); // Dark grey background
-            // Camera
-            // Use container dimensions for aspect ratio calculation
             const width = sceneContainer.clientWidth;
             const height = sceneContainer.clientHeight;
-            if (width === 0 || height === 0) {
-                 console.warn("Scene container has zero dimensions on init. Renderer/Camera might be sized incorrectly.");
-            }
-            camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
-            camera.position.z = 5; // Position camera back
-            // Renderer
             renderer = new THREE.WebGLRenderer({ antialias: true });
-            // Set size explicitly, fallback if container size is 0 initially
-            renderer.setSize(width || 400, height || 300); // Use fallback size if needed
-            sceneContainer.appendChild(renderer.domElement); // Add canvas to the container
-            console.log("Renderer initialized and added to DOM.");
-            // Basic Lighting
-            const ambientLight = new THREE.AmbientLight(0xffffff, 0.6); // Soft white light
             scene.add(ambientLight);
-            const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0);
-            directionalLight.position.set(5, 10, 7.5); // Position the light
             scene.add(directionalLight);
-            // Basic Cube Object
-            const geometry = new THREE.BoxGeometry(1, 1, 1); // 1x1x1 cube
-            const material = new THREE.MeshStandardMaterial({ color: 0xcccccc }); // Light grey color
-            cube = new THREE.Mesh(geometry, material);
-            scene.add(cube); // Add cube to the scene
-            console.log("Cube created and added to scene.");
-            // Handle Resize
             window.addEventListener('resize', onWindowResize, false);
-            // Initial resize call in case the flexbox layout takes a moment
-             setTimeout(onWindowResize, 100); // Delay slightly to help layout settle
-            // Start Animation Loop
             animate();
             console.log("Animation loop started.");
         }
         function onWindowResize() {
             if (!renderer || !camera || !sceneContainer) return;
             const width = sceneContainer.clientWidth;
             const height = sceneContainer.clientHeight;
-            // Only resize if dimensions are valid
             if (width > 0 && height > 0) {
                 camera.aspect = width / height;
-                camera.updateProjectionMatrix(); // Important after changing aspect
                 renderer.setSize(width, height);
-                // console.log(`Resized to ${width}x${height}`); // Debug log for resize
-            } else {
-                 console.warn("onWindowResize called with zero dimensions.");
             }
         }
         function animate() {
-            requestAnimationFrame(animate); // Loop the animation
-            // Simple cube rotation
-            if (cube) {
-                cube.rotation.x += 0.005;
-                cube.rotation.y += 0.005;
-            }
-            // Render the scene
             if (renderer && scene && camera) {
                 renderer.render(scene, camera);
             }
         }
         // --- Initialization ---
-        // Wait for the basic HTML structure to be ready before running the script
         document.addEventListener('DOMContentLoaded', () => {
-             console.log("DOM Content Loaded. Initializing...");
-             try {
-                 initThreeJS();
-             } catch (error) {
-                 console.error("Error during initialization:", error);
-                 // Display error to user in the UI panel
-                 const uiContainer = document.getElementById('ui-container');
-                 if (uiContainer) {
-                      uiContainer.innerHTML = `<h2>Error</h2><p>Failed to initialize 3D scene. Please check the browser console (F12) for details.</p><pre>${error.message}\n${error.stack}</pre>`;
-                 }
-             }
         });
     </script>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Choose Your Own Procedural Adventure</title>
     <style>
+        /* --- Base Styles --- */
         body {
             font-family: 'Courier New', monospace;
+            background-color: #222; /* Dark background */
+            color: #eee; /* Light text */
             margin: 0;
             padding: 0;
             overflow: hidden; /* Prevent scrollbars */
             border-right: 2px solid #555;
             min-width: 200px;
             background-color: #1a1a1a;
+            height: 100%;
+            box-sizing: border-box;
         }
         #ui-container {
             flex-grow: 2; /* Space for UI elements */
             padding: 20px;
+            overflow-y: auto; /* Allow scrolling */
             background-color: #333;
             min-width: 280px;
+            height: 100%;
+            box-sizing: border-box;
+            display: flex; /* Enable flex column layout */
+            flex-direction: column;
         }
+        #scene-container canvas { display: block; }
+        /* --- UI Elements --- */
+        #story-title {
             color: #ffcc66;
             margin-top: 0;
             margin-bottom: 15px;
             border-bottom: 1px solid #555;
             padding-bottom: 10px;
+            font-size: 1.4em;
+        }
+        #story-content {
+            margin-bottom: 20px;
+            line-height: 1.6;
+            flex-grow: 1; /* Allow story content to expand */
+        }
+        #story-content p { margin-bottom: 1em; }
+        #story-content p:last-child { margin-bottom: 0; }
+        #stats-inventory-container {
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid #555;
+            font-size: 0.9em;
+        }
+        #stats-display, #inventory-display {
+            margin-bottom: 10px;
+            line-height: 1.8;
         }
+        #stats-display span, #inventory-display span {
+            display: inline-block;
+            background-color: #444;
+            padding: 3px 8px;
+            border-radius: 15px;
+            margin-right: 8px;
+            margin-bottom: 5px;
+            border: 1px solid #666;
+            white-space: nowrap;
+        }
+        #stats-display strong, #inventory-display strong { color: #aaa; margin-right: 5px; }
+        #inventory-display em { color: #888; font-style: normal; }
+        /* Item Type Styling */
+        #inventory-display .item-quest { background-color: #666030; border-color: #999048;}
+        #inventory-display .item-weapon { background-color: #663030; border-color: #994848;}
+        #inventory-display .item-armor { background-color: #306630; border-color: #489948;}
+        #inventory-display .item-spell { background-color: #303066; border-color: #484899;}
+        #inventory-display .item-unknown { background-color: #555; border-color: #777;}
+        #choices-container {
+            margin-top: auto; /* Push choices to bottom if space allows */
+            padding-top: 15px;
+            border-top: 1px solid #555;
+        }
+        #choices-container h3 { margin-top: 0; margin-bottom: 10px; color: #aaa; }
+        #choices { display: flex; flex-direction: column; gap: 10px; }
+        .choice-button {
+            display: block; width: 100%; padding: 10px 12px; margin-bottom: 0;
+            background-color: #555; color: #eee; border: 1px solid #777;
+            border-radius: 5px; cursor: pointer; text-align: left;
+            font-family: 'Courier New', monospace; font-size: 1em;
+            transition: background-color 0.2s, border-color 0.2s;
+            box-sizing: border-box;
+        }
+        .choice-button:hover:not(:disabled) { background-color: #d4a017; color: #222; border-color: #b8860b; }
+        .choice-button:disabled { background-color: #444; color: #888; cursor: not-allowed; border-color: #666; opacity: 0.7; }
     </style>
 </head>
             </div>
         <div id="ui-container">
+            <h2 id="story-title">Loading Adventure...</h2>
             <div id="story-content">
+                <p>Please wait while the adventure loads.</p>
+            </div>
+            <div id="stats-inventory-container">
+                 <div id="stats-display">
+                     </div>
+                 <div id="inventory-display">
+                     </div>
             </div>
+            <div id="choices-container">
+                 <h3>What will you do?</h3>
+                 <div id="choices">
+                     </div>
+            </div>
+        </div>
     </div>
     <script type="importmap">
     <script type="module">
         import * as THREE from 'three';
+        // Optional: Add OrbitControls for debugging/viewing scene
         // import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
         // --- DOM Elements ---
         const sceneContainer = document.getElementById('scene-container');
+        const storyTitleElement = document.getElementById('story-title');
+        const storyContentElement = document.getElementById('story-content');
+        const choicesElement = document.getElementById('choices');
+        const statsElement = document.getElementById('stats-display');
+        const inventoryElement = document.getElementById('inventory-display');
         // --- Three.js Setup ---
+        let scene, camera, renderer;
+        let currentAssemblyGroup = null; // To hold the current scene objects
+        // let controls; // Optional OrbitControls
+        // --- Shared Materials ---
+        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 });
+        const groundMaterial = new THREE.MeshStandardMaterial({ color: 0x556B2F, roughness: 0.9, metalness: 0 });
+        const metalMaterial = new THREE.MeshStandardMaterial({ color: 0xaaaaaa, metalness: 0.8, roughness: 0.3 });
+        // Add other materials as needed by assemblies...
+        const templeMaterial = new THREE.MeshStandardMaterial({ color: 0xA99B78, roughness: 0.7, metalness: 0.1 });
+        const errorMaterial = new THREE.MeshStandardMaterial({ color: 0xffa500, roughness: 0.5 });
+        const gameOverMaterial = new THREE.MeshStandardMaterial({ color: 0xff0000, roughness: 0.5 });
         function initThreeJS() {
+            console.log("Initializing Three.js with procedural scenes...");
+            if (!sceneContainer) { console.error("Scene container not found!"); return; }
             scene = new THREE.Scene();
+            scene.background = new THREE.Color(0x222222);
             const width = sceneContainer.clientWidth;
             const height = sceneContainer.clientHeight;
+            if (width === 0 || height === 0) { console.warn("Scene container has zero dimensions on init."); }
+            camera = new THREE.PerspectiveCamera(75, (width / height) || 1, 0.1, 1000);
+            camera.position.set(0, 2.5, 7); // Adjusted position for better assembly view
+            camera.lookAt(0, 0.5, 0); // Look slightly down towards assembly center
             renderer = new THREE.WebGLRenderer({ antialias: true });
+            renderer.setSize(width || 400, height || 300);
+            renderer.shadowMap.enabled = true; // Enable shadows
+            renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+            sceneContainer.appendChild(renderer.domElement);
+            console.log("Renderer initialized.");
+            // Lighting (Setup for shadows)
+            const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
             scene.add(ambientLight);
+            const directionalLight = new THREE.DirectionalLight(0xffffff, 1.2);
+            directionalLight.position.set(8, 15, 10);
+            directionalLight.castShadow = true;
+            directionalLight.shadow.mapSize.width = 1024;
+            directionalLight.shadow.mapSize.height = 1024;
+            directionalLight.shadow.camera.near = 0.5;
+            directionalLight.shadow.camera.far = 50;
+             const shadowCamSize = 15; // Adjust based on assembly size
+            directionalLight.shadow.camera.left = -shadowCamSize; directionalLight.shadow.camera.right = shadowCamSize;
+            directionalLight.shadow.camera.top = shadowCamSize; directionalLight.shadow.camera.bottom = -shadowCamSize;
             scene.add(directionalLight);
+            // Remove the single cube creation - scene objects are handled by updateScene now
             window.addEventListener('resize', onWindowResize, false);
+            setTimeout(onWindowResize, 100); // Initial resize call
             animate();
             console.log("Animation loop started.");
         }
         function onWindowResize() {
             if (!renderer || !camera || !sceneContainer) return;
             const width = sceneContainer.clientWidth;
             const height = sceneContainer.clientHeight;
             if (width > 0 && height > 0) {
                 camera.aspect = width / height;
+                camera.updateProjectionMatrix();
                 renderer.setSize(width, height);
             }
         }
         function animate() {
+            requestAnimationFrame(animate);
+            // Optional: Add subtle animation to the entire assembly
+            // if (currentAssemblyGroup) {
+            //     currentAssemblyGroup.rotation.y += 0.0005;
+            // }
             if (renderer && scene && camera) {
                 renderer.render(scene, camera);
             }
         }
+        // --- Helper Functions ---
+        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;
+        }
+        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;
+            ground.position.y = -0.05;
+            ground.receiveShadow = true;
+            ground.castShadow = false; // Ground itself doesn't usually cast shadows
+            return ground;
+        }
+        // --- Procedural Generation Functions ---
+        // (Using the simpler versions for now)
+        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;
+            const towerLeftGeo = new THREE.BoxGeometry(gateWallWidth, gateWallHeight, gateWallDepth);
+            group.add(createMesh(towerLeftGeo, stoneMaterial, { x: -(archWidth / 2 + gateWallWidth / 2), y: gateWallHeight / 2, z: 0 }));
+            const towerRightGeo = new THREE.BoxGeometry(gateWallWidth, gateWallHeight, gateWallDepth);
+            group.add(createMesh(towerRightGeo, stoneMaterial, { x: (archWidth / 2 + gateWallWidth / 2), y: gateWallHeight / 2, z: 0 }));
+            const archGeo = new THREE.BoxGeometry(archWidth, archHeight, gateWallDepth);
+            group.add(createMesh(archGeo, stoneMaterial, { x: 0, y: gateWallHeight - archHeight / 2, z: 0 }));
+             // Simplified crenellations
+             const crenellationSize = 0.4; const crenGeo = new THREE.BoxGeometry(crenellationSize, crenellationSize, gateWallDepth * 1.1);
+             for (let i = -1; i <= 1; i += 2) { group.add(createMesh(crenGeo.clone(), stoneMaterial, { x: -(archWidth / 2 + gateWallWidth / 2) + i * crenellationSize * 0.7, y: gateWallHeight + crenellationSize / 2, z: 0 })); group.add(createMesh(crenGeo.clone(), stoneMaterial, { x: (archWidth / 2 + gateWallWidth / 2) + i * crenellationSize * 0.7, y: gateWallHeight + crenellationSize / 2, z: 0 })); }
+             group.add(createMesh(crenGeo.clone(), stoneMaterial, { x: 0, y: gateWallHeight + archHeight - crenellationSize / 2, z: 0 }));
+            group.add(createGroundPlane(stoneMaterial));
+            return group;
+        }
+        function createWeaponsmithAssembly() {
+             // Simple Box Building + Chimney
+             const group = new THREE.Group();
+             const buildingWidth = 3; const buildingHeight = 2.5; const buildingDepth = 3.5;
+             const buildingGeo = new THREE.BoxGeometry(buildingWidth, buildingHeight, buildingDepth);
+             group.add(createMesh(buildingGeo, darkWoodMaterial, { x: 0, y: buildingHeight / 2, z: 0 }));
+             const chimneyHeight = 3.5; const chimneyGeo = new THREE.CylinderGeometry(0.3, 0.4, chimneyHeight, 8);
+             group.add(createMesh(chimneyGeo, stoneMaterial, { x: buildingWidth * 0.3, y: chimneyHeight / 2, z: -buildingDepth * 0.3 }));
+             group.add(createGroundPlane());
+             return group;
+        }
+        function createTempleAssembly() {
+             // Simple Base + Columns + Roof Slab
+             const group = new THREE.Group();
+             const baseSize = 5; const baseHeight = 0.5; const columnHeight = 3; const columnRadius = 0.25; const roofHeight = 0.5;
+             const baseGeo = new THREE.BoxGeometry(baseSize, baseHeight, baseSize); group.add(createMesh(baseGeo, templeMaterial, { x: 0, y: baseHeight / 2, z: 0 }));
+             const colGeo = new THREE.CylinderGeometry(columnRadius, columnRadius, columnHeight, 12);
+             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 }];
+             colPositions.forEach(pos => group.add(createMesh(colGeo.clone(), templeMaterial, { x: pos.x, y: baseHeight + columnHeight / 2, z: pos.z })));
+             const roofGeo = new THREE.BoxGeometry(baseSize * 0.9, roofHeight, baseSize * 0.9); group.add(createMesh(roofGeo, templeMaterial, { x: 0, y: baseHeight + columnHeight + roofHeight / 2, z: 0 }));
+             group.add(createGroundPlane());
+             return group;
+        }
+         function createResistanceMeetingAssembly() {
+             // Simple table + stools
+             const group = new THREE.Group();
+             const tableWidth = 2; const tableHeight = 0.8; const tableDepth = 1; const tableThickness = 0.1;
+             const tableTopGeo = new THREE.BoxGeometry(tableWidth, tableThickness, tableDepth); group.add(createMesh(tableTopGeo, woodMaterial, { x: 0, y: tableHeight - tableThickness / 2, z: 0 }));
+             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.clone(), woodMaterial, { x: legOffsetW, y: legHeight / 2, z: -legOffsetD })); group.add(createMesh(legGeo.clone(), woodMaterial, { x: -legOffsetW, y: legHeight / 2, z: legOffsetD })); group.add(createMesh(legGeo.clone(), woodMaterial, { x: legOffsetW, y: legHeight / 2, z: legOffsetD }));
+             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.clone(), darkWoodMaterial, { x: tableWidth * 0.6, y: stoolSize * 0.4, z: 0 }));
+             group.add(createGroundPlane(stoneMaterial));
+             return group;
+        }
+        function createForestAssembly(treeCount = 10, area = 10) {
+             // Simple Trees (Cylinder + Sphere)
+             const group = new THREE.Group();
+             const createTree = (x, z) => { const treeGroup = new THREE.Group(); const trunkHeight = Math.random() * 1.5 + 2; const trunkRadius = Math.random() * 0.1 + 0.1; const trunkGeo = new THREE.CylinderGeometry(trunkRadius * 0.7, trunkRadius, trunkHeight, 8); treeGroup.add(createMesh(trunkGeo, woodMaterial, { x: 0, y: trunkHeight / 2, z: 0 })); const foliageRadius = trunkHeight * 0.4 + 0.2; const foliageGeo = new THREE.SphereGeometry(foliageRadius, 8, 6); treeGroup.add(createMesh(foliageGeo, leafMaterial, { x: 0, y: trunkHeight * 0.9, z: 0 })); treeGroup.position.set(x, 0, z); return treeGroup; };
+             for (let i = 0; i < treeCount; i++) { const x = (Math.random() - 0.5) * area; const z = (Math.random() - 0.5) * area; if (Math.sqrt(x*x + z*z) > 1.0) group.add(createTree(x, z)); } // Avoid center
+             group.add(createGroundPlane(groundMaterial, area * 1.1));
+             return group;
+        }
+        function createRoadAmbushAssembly() { /* ... (calls simple createForestAssembly) ... */
+             const group = new THREE.Group(); const area = 12;
+             const forestGroup = createForestAssembly(8, area); group.add(forestGroup); // Fewer trees
+             const roadWidth = 3; const roadLength = area * 1.2; const roadGeo = new THREE.PlaneGeometry(roadWidth, roadLength); const roadMaterial = new THREE.MeshStandardMaterial({ color: 0x966F33, roughness: 0.9 }); const road = createMesh(roadGeo, roadMaterial, {x: 0, y: 0.01, z: 0}, {x: -Math.PI / 2}); road.receiveShadow = true; group.add(road);
+             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.clone().scale(0.8,0.8,0.8), rockMaterial, {x: -roadWidth * 0.8, y: 0.2, z: -2}, {y: Math.random() * Math.PI}));
+             return group;
+        }
+        function createForestEdgeAssembly() { /* ... (calls simple createForestAssembly) ... */
+            const group = new THREE.Group(); const area = 15;
+            const forestGroup = createForestAssembly(15, area); // Generate full forest
+            // Keep only trees on one side
+            const treesToRemove = [];
+            forestGroup.children.forEach(child => { if(child.type === 'Group' && child.position.x > 0) { treesToRemove.push(child); } }); // Mark trees on positive X
+            treesToRemove.forEach(tree => forestGroup.remove(tree)); // Remove them
+            group.add(forestGroup); // Add remaining trees and ground
+            return group;
+        }
+        function createPrisonerCellAssembly() { /* ... (Simplified version) ... */
+            const group = new THREE.Group(); const cellSize = 3; const wallHeight = 2.5; const wallThickness = 0.2; const barRadius = 0.05; const barSpacing = 0.25;
+            const cellFloorMaterial = stoneMaterial.clone(); cellFloorMaterial.color.setHex(0x555555); group.add(createGroundPlane(cellFloorMaterial, cellSize));
+            const wallBackGeo = new THREE.BoxGeometry(cellSize, wallHeight, wallThickness); group.add(createMesh(wallBackGeo, stoneMaterial, { x: 0, y: wallHeight / 2, z: -cellSize / 2 })); const wallSideGeo = new THREE.BoxGeometry(wallThickness, wallHeight, cellSize); group.add(createMesh(wallSideGeo, stoneMaterial, { x: -cellSize / 2, y: wallHeight / 2, z: 0 })); group.add(createMesh(wallSideGeo.clone(), stoneMaterial, { x: cellSize / 2, y: wallHeight / 2, z: 0 }));
+            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 + 0.5) * barSpacing; group.add(createMesh(barGeo.clone(), metalMaterial, { x: xPos, y: wallHeight / 2, z: cellSize / 2 })); }
+             return group;
+        }
+        function createGameOverAssembly() { /* ... (same as before) ... */
+             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}))); return group;
+        }
+        function createErrorAssembly() { /* ... (same as before) ... */
+             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;
+        }
+        // --- Game Data ---
+        const gameData = {
+            "1": { title: "The Beginning", content: `<p>...</p>`, options: [ { text: "Visit the local weaponsmith", next: 2 }, { text: "Seek wisdom at the temple", next: 3 }, { text: "Meet the resistance leader", next: 4 } ], illustration: "city-gates" },
+            "2": { title: "The Weaponsmith", content: `<p>...</p>`, options: [ { text: "Take the Flaming Sword", next: 5, addItem: "Flaming Sword" }, { text: "Choose the Whispering Bow", next: 5, addItem: "Whispering Bow" }, { text: "Select the Guardian Shield", next: 5, addItem: "Guardian Shield" } ], illustration: "weaponsmith" },
+            "3": { title: "The Ancient Temple", content: `<p>...</p>`, options: [ { text: "Learn Healing Light", next: 5, addItem: "Healing Light Spell" }, { text: "Master Shield of Faith", next: 5, addItem: "Shield of Faith Spell" }, { text: "Study Binding Runes", next: 5, addItem: "Binding Runes Scroll" } ], illustration: "temple" },
+            "4": { title: "The Resistance Leader", content: `<p>...</p>`, options: [ { text: "Take the Secret Tunnel Map", next: 5, addItem: "Secret Tunnel Map" }, { text: "Accept Poison Daggers", next: 5, addItem: "Poison Daggers" }, { text: "Choose the Master Key", next: 5, addItem: "Master Key" } ], illustration: "resistance-meeting" },
+            "5": { title: "The Journey Begins", content: `<p>...</p>`, options: [ { text: "Take the main road", next: 6 }, { text: "Follow the river path", next: 7 }, { text: "Brave the ruins shortcut", next: 8 } ], illustration: "shadowwood-forest" },
+            "6": { title: "Ambush!", content: "<p>...</p>", options: [{ text: "Fight!", next: 9 }, { text: "Try to flee!", next: 10 }], illustration: "road-ambush" },
+            "7": { title: "River Path", content: "<p>...</p>", options: [{ text: "Keep going", next: 15 }], illustration: "river-spirit" /* Uses default for now */ },
+            "8": { title: "Ancient Ruins", content: "<p>...</p>", options: [{ text: "Search carefully", next: 15 }], illustration: "ancient-ruins" /* Uses default for now */ },
+            "9": { title: "Victory!", content: "<p>...</p>", options: [{ text: "Proceed", next: 15 }], illustration: "forest-edge", reward: { statIncrease: { stat: "strength", amount: 1 } } }, // Example reward added back
+            "10": { title: "Captured!", content: "<p>...</p>", options: [{ text: "Accept fate", next: 20 }], illustration: "prisoner-cell" },
+            "15": { title: "Fortress Plains", content: "<p>...</p>", options: [{ text: "March onward", next: 99 }], illustration: "fortress-plains" /* Uses default */ },
+            "20": { title: "Prison Cell", content: "<p>...</p>", options: [{ text: "Wait", next: 99 }], illustration: "prisoner-cell" },
+            "99": { title: "Game Over", content: "<p>...</p>", options: [{ text: "Restart", next: 1 }], illustration: "game-over", gameOver: true }
+        };
+        const itemsData = {
+            "Flaming Sword": { type: "weapon", description: "A fiery blade" }, "Whispering Bow": { type: "weapon", description: "A silent bow" }, "Guardian Shield": { type: "armor", description: "A protective shield" }, "Healing Light Spell": { type: "spell", description: "Mends minor wounds" }, "Shield of Faith Spell": { type: "spell", description: "Temporary shield" }, "Binding Runes Scroll": { type: "spell", description: "Binds an enemy" }, "Secret Tunnel Map": { type: "quest", description: "Shows a hidden path" }, "Poison Daggers": { type: "weapon", description: "Daggers with poison" }, "Master Key": { type: "quest", description: "Unlocks many doors" },
+        };
+        // --- Game State ---
+        let gameState = {
+            currentPageId: 1, inventory: [],
+            stats: { courage: 7, wisdom: 5, strength: 6, hp: 30, maxHp: 30 }
+        };
+        // --- Game Logic Functions ---
+        function startGame() {
+            gameState = { currentPageId: 1, inventory: [], stats: { courage: 7, wisdom: 5, strength: 6, hp: 30, maxHp: 30 } };
+            renderPage(gameState.currentPageId);
+        }
+        function renderPage(pageId) {
+            const page = gameData[pageId];
+            if (!page) { console.error(`Page data error for ID: ${pageId}`); storyTitleElement.textContent = "Error"; storyContentElement.innerHTML = "<p>Could not load page data.</p>"; choicesElement.innerHTML = '<button class="choice-button" onclick="window.location.reload()">Restart</button>'; updateScene('error'); return; } // Changed restart to reload for simplicity here
+            storyTitleElement.textContent = page.title || "Untitled Page"; storyContentElement.innerHTML = page.content || "<p>...</p>";
+            updateStatsDisplay(); updateInventoryDisplay();
+            choicesElement.innerHTML = '';
+            if (page.options && page.options.length > 0) {
+                page.options.forEach(option => {
+                    const button = document.createElement('button'); button.classList.add('choice-button'); button.textContent = option.text; let requirementMet = true;
+                    if (option.requireItem && !gameState.inventory.includes(option.requireItem)) { requirementMet = false; button.title = `Requires: ${option.requireItem}`; button.disabled = true; }
+                    if (requirementMet) { const choiceData = { nextPage: option.next }; if (option.addItem) { choiceData.addItem = option.addItem; } button.onclick = () => handleChoiceClick(choiceData); } else { button.classList.add('disabled'); } choicesElement.appendChild(button); });
+            } else { const button = document.createElement('button'); button.classList.add('choice-button'); button.textContent = page.gameOver ? "Restart Adventure" : "Continue (End)"; button.onclick = () => handleChoiceClick({ nextPage: page.gameOver ? 1 : 99 }); choicesElement.appendChild(button); }
+            updateScene(page.illustration || 'default');
+        }
+        function handleChoiceClick(choiceData) {
+            const nextPageId = parseInt(choiceData.nextPage); const itemToAdd = choiceData.addItem; if (isNaN(nextPageId)) { console.error("Invalid nextPageId:", choiceData.nextPage); return; }
+            if (itemToAdd && !gameState.inventory.includes(itemToAdd)) { gameState.inventory.push(itemToAdd); console.log("Added item:", itemToAdd); }
+            gameState.currentPageId = nextPageId; const nextPageData = gameData[nextPageId];
+            if (nextPageData) {
+                 if (nextPageData.hpLoss) { gameState.stats.hp = Math.max(0, gameState.stats.hp - nextPageData.hpLoss); console.log(`Lost ${nextPageData.hpLoss} HP.`); if (gameState.stats.hp <= 0) { console.log("Player died!"); renderPage(99); return; } }
+                 if (nextPageData.reward && nextPageData.reward.statIncrease) { const stat = nextPageData.reward.statIncrease.stat; const amount = nextPageData.reward.statIncrease.amount; if (gameState.stats.hasOwnProperty(stat)) { gameState.stats[stat] += amount; console.log(`Stat ${stat} increased by ${amount}.`); } }
+                 // Add item reward processing if needed from reward object
+                 if (nextPageData.reward && nextPageData.reward.addItem && !gameState.inventory.includes(nextPageData.reward.addItem)) { gameState.inventory.push(nextPageData.reward.addItem); console.log(`Found item: ${nextPageData.reward.addItem}`); }
+                 }
+                 else { console.error(`Data for page ${nextPageId} not found!`); renderPage(99); return; }
+            renderPage(nextPageId); // Render the target page
+        }
+        function updateStatsDisplay() { statsElement.innerHTML = `<strong>Stats:</strong> <span>HP: ${gameState.stats.hp}/${gameState.stats.maxHp}</span> <span>Str: ${gameState.stats.strength}</span> <span>Wis: ${gameState.stats.wisdom}</span> <span>Cor: ${gameState.stats.courage}</span>`; }
+        function updateInventoryDisplay() { let inventoryHTML = '<strong>Inventory:</strong> '; if (gameState.inventory.length === 0) { inventoryHTML += '<em>Empty</em>'; } else { gameState.inventory.forEach(item => { const itemInfo = itemsData[item] || { type: 'unknown', description: '???' }; const itemClass = `item-${itemInfo.type || 'unknown'}`; inventoryHTML += `<span class="${itemClass}" title="${itemInfo.description}">${item}</span>`; }); } inventoryElement.innerHTML = inventoryHTML; }
+        // Scene Update Function (using procedural assemblies)
+        function updateScene(illustrationKey) {
+            console.log(`Updating scene to: ${illustrationKey}`);
+            if (currentAssemblyGroup) { scene.remove(currentAssemblyGroup); /* TODO: Proper disposal? */ }
+            currentAssemblyGroup = null; let assemblyFunction;
+            switch (illustrationKey) {
+                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 other keys, falling back to default
+                case 'river-spirit': case 'ancient-ruins': case 'fortress-plains': // Fall through
+                default: console.warn(`No specific assembly for key: "${illustrationKey}". Using default.`); assemblyFunction = createDefaultAssembly; break;
+            }
+            try { currentAssemblyGroup = assemblyFunction(); scene.add(currentAssemblyGroup); } catch (error) { console.error(`Error creating assembly for ${illustrationKey}:`, error); currentAssemblyGroup = createErrorAssembly(); scene.add(currentAssemblyGroup); }
+        }
         // --- Initialization ---
         document.addEventListener('DOMContentLoaded', () => {
+             console.log("DOM Ready. Initializing...");
+             try { initThreeJS(); startGame(); } catch (error) { console.error("Initialization failed:", error); storyTitleElement.textContent = "Error"; storyContentElement.innerHTML = `<p>Initialization Error. Check console (F12).</p><pre>${error}</pre>`; }
         });
     </script>