Spaces:

awacke1
/

ChooseYourOwnAdventure2

Running

App Files Files Community

awacke1 commited on Apr 28

Commit

f949e46

verified ·

1 Parent(s): e172c2b

Update index.html

Browse files

Files changed (1) hide show

index.html +101 -95

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Wacky Shapes Adventure!</title>
     <style>
         /* --- Base Styles (Similar to previous, slightly tweaked) --- */
         body { font-family: 'Verdana', sans-serif; background-color: #2a3a4a; color: #f0f0f0; margin: 0; padding: 0; overflow: hidden; display: flex; flex-direction: column; height: 100vh; }
@@ -39,21 +39,25 @@
         .message-xp { color: #af8; border-left-color: #6a4; }
         .message-warning { color: #f99; border-left-color: #c66; }
     </style>
 </head>
 <body>
     <div id="game-container">
-        <div id="scene-container"></div>
         <div id="ui-container">
-            <h2 id="story-title">Adventure Awaits!</h2>
-            <div id="story-content"><p>Getting ready...</p></div>
             <div id="stats-inventory-container">
-                <div id="stats-display"></div>
-                <div id="inventory-display"></div>
             </div>
             <div id="choices-container">
-                <h3>What adventure will you choose?</h3>
-                <div id="choices"></div>
             </div>
         </div>
     </div>
@@ -70,19 +74,25 @@
         console.log("Script module execution started.");
         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');
         let scene, camera, renderer, clock;
-        let currentSceneGroup = null; // Holds the group for the current scene's objects
         let currentLights = [];
-        let currentMessage = ""; // Accumulates messages for UI update
-        const MAT = { // Material library
             stone_grey: new THREE.MeshStandardMaterial({ color: 0x8a8a8a, roughness: 0.8 }),
             stone_brown: new THREE.MeshStandardMaterial({ color: 0x9d8468, roughness: 0.85 }),
             wood_light: new THREE.MeshStandardMaterial({ color: 0xcdaa7d, roughness: 0.7 }),
@@ -101,7 +111,7 @@
         };
         // --- Game State ---
-        let gameState = {}; // Initialized in startGame
         // --- Item Data ---
         const itemsData = {
@@ -109,6 +119,7 @@
             "Shiny Sprocket": {type:"treasure", description:"A gear that gleams."},
             "Bouncy Mushroom": {type:"food", description:"Seems edible... maybe?"},
             "Sturdy Stick": {type:"tool", description:"Good for poking things."},
         };
         // --- Procedural Assembly Shapes ---
@@ -124,7 +135,7 @@
             'gem_shape': (size) => new THREE.OctahedronGeometry(size * 0.6, 0),
             'basic_tetra': (size) => new THREE.TetrahedronGeometry(size * 0.7, 0),
             'squashed_ball': (size) => new THREE.SphereGeometry(size * 0.6, 12, 8).scale(1, 0.6, 1),
-            'holed_box': (size) => { // Example of more complex primitive combo
                  const shape = new THREE.Shape();
                  shape.moveTo(-size/2, -size/2); shape.lineTo(-size/2, size/2); shape.lineTo(size/2, size/2); shape.lineTo(size/2, -size/2); shape.closePath();
                  const hole = new THREE.Path();
@@ -180,8 +191,8 @@
                 title: "Tree's Secret",
                 content: "<p>Aha! Tucked behind the tree trunk, you found a Sturdy Stick!</p>",
                 options: [ { text: "Awesome! Go back.", next: 2 } ],
-                reward: { addItem: "Sturdy Stick" },
-                 assemblyParams: { // Same as page 2, maybe slightly zoomed?
                      baseShape: 'ground_dirt', baseSize: 25,
                      mainShapes: ['tall_cylinder', 'basic_tetra', 'round_blob'],
                      accents: ['spiky_ball'],
@@ -207,7 +218,7 @@
                  title: "Picked a Gem!",
                  content: "<p>Success! You plucked a pretty crystal from the ground. It feels warm.</p>",
                  options: [ { text: "Cool! Go back.", next: 1 } ],
-                 reward: { addItem: "Cave Crystal" }, // Re-use item name
                  assemblyParams: { // Same as page 3
                       baseShape: 'ground_grass', baseSize: 15,
                       mainShapes: ['gem_shape', 'basic_tetra'],
@@ -221,7 +232,7 @@
                 title: "Adventure Paused!",
                 content: "<p>Wow, what an adventure! That's all for now, but maybe more fun awaits another day?</p>",
                 options: [ { text: "Start Over?", next: 1 } ],
-                assemblyParams: { // Simple ending scene
                     baseShape: 'flat_plate', baseSize: 10,
                     mainShapes: ['basic_tetra'],
                     accents: [],
@@ -237,7 +248,7 @@
         function initThreeJS() {
             console.log("initThreeJS started.");
             scene = new THREE.Scene();
-            scene.background = new THREE.Color(0x2a3a4a); // Match body background
             clock = new THREE.Clock();
             const width = sceneContainer.clientWidth || 1;
@@ -298,11 +309,11 @@
             currentLights.forEach(light => { if (light.parent) light.parent.remove(light); if(scene.children.includes(light)) scene.remove(light); });
             currentLights = [];
-            const ambientLight = new THREE.AmbientLight(0xffffff, 0.6); // Slightly brighter ambient
             scene.add(ambientLight);
             currentLights.push(ambientLight);
-            const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0); // Stronger directional
             directionalLight.position.set(8, 15, 10);
             directionalLight.castShadow = true;
             directionalLight.shadow.mapSize.set(1024, 1024);
@@ -315,7 +326,6 @@
             currentLights.push(directionalLight);
         }
-        // --- Procedural Assembly Function ---
         function createProceduralAssembly(params) {
             console.log("Creating procedural assembly with params:", params);
             const group = new THREE.Group();
@@ -324,146 +334,147 @@
                 mainShapes = ['boxy_chunk'], accents = ['pointy_cone'],
                 count = 10, scaleRange = [0.5, 1.5],
                 colorTheme = [MAT.stone_grey, MAT.wood_light, MAT.leaf_green],
-                arrangement = 'scatter', // scatter, cluster, stack, patch, center_stack
-                stackHeight = 5, // for stack/center_stack
-                clusterRadius = 5, // for cluster
-                patchPos = {x:0, y:0, z:0}, patchRadius = 3 // for patch
             } = params;
-            // 1. Create Base
             let baseMesh;
             if (baseShape.startsWith('ground_')) {
-                baseMesh = createGround(MAT[baseShape] || MAT.ground_grass, baseSize);
                 group.add(baseMesh);
             } else {
-                const baseGeo = SHAPE_GENERATORS[baseShape] ? SHAPE_GENERATORS[baseShape](baseSize) : new THREE.BoxGeometry(baseSize, 0.2, baseSize);
                 baseMesh = createMesh(baseGeo, colorTheme[0] || MAT.stone_grey, {y:0.1});
                 baseMesh.receiveShadow = true; baseMesh.castShadow = false;
                 group.add(baseMesh);
             }
-            // 2. Generate Objects
             const allShapes = [...mainShapes, ...accents];
             let lastY = 0; // For stacking
             for (let i = 0; i < count; i++) {
                 const shapeKey = allShapes[Math.floor(Math.random() * allShapes.length)];
                 const geoFunc = SHAPE_GENERATORS[shapeKey];
                 if (!geoFunc) { console.warn(`Shape generator not found for key: ${shapeKey}`); continue; }
-                const scale = scaleRange[0] + Math.random() * (scaleRange[1] - scaleRange[0]);
-                const geometry = geoFunc(scale);
                 const material = colorTheme[Math.floor(Math.random() * colorTheme.length)];
                 const mesh = createMesh(geometry, material);
-                // Calculate position based on arrangement
-                let position = { x:0, y:0, z:0 };
                 geometry.computeBoundingBox();
                 const height = (geometry.boundingBox.max.y - geometry.boundingBox.min.y) * mesh.scale.y;
                 switch(arrangement) {
                     case 'stack':
-                        position.y = lastY + height / 2;
-                        position.x = (Math.random() - 0.5) * 0.5; // Slight offset
-                        position.z = (Math.random() - 0.5) * 0.5;
-                        lastY += height * 0.9; // Stack slightly overlapping
-                        if (j > stackHeight) break; // Limit height
                         break;
                     case 'center_stack':
-                         position.y = lastY + height / 2;
-                         lastY += height * 0.95;
-                         if (i >= stackHeight) { // Only stack up to height, then stop adding
-                             continue; // Skip adding more meshes if stack is full
-                         }
                          break;
                     case 'cluster':
                         const angle = Math.random() * Math.PI * 2;
                         const radius = Math.random() * clusterRadius;
                         position.x = Math.cos(angle) * radius;
                         position.z = Math.sin(angle) * radius;
-                        position.y = height / 2; // Place on ground
                         break;
                      case 'patch':
                          const pAngle = Math.random() * Math.PI * 2;
                          const pRadius = Math.random() * patchRadius;
                          position.x = patchPos.x + Math.cos(pAngle) * pRadius;
                          position.z = patchPos.z + Math.sin(pAngle) * pRadius;
-                         position.y = (patchPos.y || 0) + height / 2; // Place relative to patch center Y
                          break;
                     case 'scatter':
                     default:
                         position.x = (Math.random() - 0.5) * baseSize * 0.8;
                         position.z = (Math.random() - 0.5) * baseSize * 0.8;
-                        position.y = height / 2; // Place on ground
                         break;
                 }
                  mesh.position.set(position.x, position.y, position.z);
-                // Random rotation
                 mesh.rotation.set(
-                    Math.random() * (arrangement === 'stack' || arrangement === 'center_stack' ? 0.1 : Math.PI), // Less random rotation if stacked
                     Math.random() * Math.PI * 2,
-                    Math.random() * (arrangement === 'stack' || arrangement === 'center_stack' ? 0.1 : Math.PI)
                 );
-                // Add simple animation (optional)
-                if (Math.random() < 0.3) { // 30% chance of animation
-                     mesh.userData.rotSpeed = (Math.random() - 0.5) * 0.5; // Slow rotation
-                     mesh.userData.update = (time) => {
-                         mesh.rotation.y += mesh.userData.rotSpeed * clock.getDelta();
                      };
                 }
                 group.add(mesh);
             }
             return group;
         }
-        // --- Scene Management (Back to Page-Based) ---
         function updateScene(assemblyParams) {
-             console.log("updateScene called");
-             // Clear previous scene objects
              if (currentSceneGroup) {
                 currentSceneGroup.traverse(child => {
                     if (child.isMesh) {
                         if(child.geometry) child.geometry.dispose();
-                        // Assume materials in MAT are shared, don't dispose them unless cloned per object
                     }
                 });
-                scene.remove(currentSceneGroup); // Remove the group from the main scene
                 currentSceneGroup = null;
              }
-             // Clear previous lights (except maybe a default ambient?)
-             setupLighting('default'); // Reset to default lighting for each scene load
              if (!assemblyParams) {
                  console.warn("No assemblyParams provided, creating default scene.");
-                 assemblyParams = { baseShape: 'ground_dirt', count: 5 }; // Basic default
              }
              try {
                  currentSceneGroup = createProceduralAssembly(assemblyParams);
-                 scene.add(currentSceneGroup); // Add the new group
                  console.log("New scene group added.");
              } catch (error) {
                  console.error("Error creating procedural assembly:", error);
-                 // Optionally add an error indicator scene
              }
          }
-        // --- Game Logic ---
         function startGame() {
             console.log("startGame called.");
             const defaultChar = {
                 name: "Player",
                 stats: { hp: 20, maxHp: 20, xp: 0, strength: 10, dexterity: 10, constitution: 10, intelligence: 10, wisdom: 10, charisma: 10 },
-                inventory: ["Sturdy Stick"] // Start with an item
             };
             gameState = {
-                currentPageId: 1, // Start at page 1
                 character: JSON.parse(JSON.stringify(defaultChar))
             };
             renderPage(gameState.currentPageId);
@@ -472,7 +483,7 @@
         function handleChoiceClick(choiceData) {
              console.log("Choice clicked:", choiceData);
-             currentMessage = ""; // Clear previous messages
              let nextPageId = parseInt(choiceData.next);
              const currentPageData = gameData[gameState.currentPageId];
@@ -481,12 +492,11 @@
              if (!targetPageData) {
                  console.error(`Invalid next page ID: ${nextPageId}`);
                  currentMessage = `<p class="message message-warning">Oops! That path seems to lead nowhere yet.</p>`;
-                 nextPageId = gameState.currentPageId; // Stay on current page on error
              }
-              // Apply rewards from *current* page choice before transitioning
               if (currentPageData && currentPageData.options) {
-                 const chosenOption = currentPageData.options.find(opt => opt.next === choiceData.next); // Find the specific option clicked
                  if (chosenOption && chosenOption.reward) {
                     console.log("Applying reward:", chosenOption.reward);
                       if(chosenOption.reward.addItem && itemsData[chosenOption.reward.addItem]) {
@@ -494,18 +504,16 @@
                               gameState.character.inventory.push(chosenOption.reward.addItem);
                               currentMessage += `<p class="message message-item">You found a ${chosenOption.reward.addItem}!</p>`;
                           } else {
-                               currentMessage += `<p class="message message-info">You found another ${chosenOption.reward.addItem}, but can't carry more.</p>`;
                           }
                       }
                       if(chosenOption.reward.xp) {
                           gameState.character.stats.xp += chosenOption.reward.xp;
                           currentMessage += `<p class="message message-xp">You gained ${chosenOption.reward.xp} XP!</p>`;
                       }
-                      // Add stat gain logic here if needed for specific rewards
                  }
              }
              gameState.currentPageId = nextPageId;
              renderPage(nextPageId);
         }
@@ -516,31 +524,30 @@
              if (!pageData) {
                  console.error(`No page data for ID: ${pageId}`);
-                 storyTitleElement.textContent = "Lost!";
-                 storyContentElement.innerHTML = currentMessage + `<p>Somehow you've wandered off the map!</p>`;
-                 choicesElement.innerHTML = `<button class="choice-button" onclick="handleChoiceClick({ next: 1 })">Go Back to Start</button>`;
                  updateStatsDisplay(); updateInventoryDisplay(); updateActionInfo();
-                 updateScene({ baseShape: 'ground_dirt', count: 1, mainShapes: ['basic_tetra'], colorTheme: [MAT.metal_rusty] }); // Simple error scene
                  return;
              }
              storyTitleElement.textContent = pageData.title || "An Unnamed Place";
-             storyContentElement.innerHTML = currentMessage + (pageData.content || "<p>...</p>");
-             choicesElement.innerHTML = ''; // Clear previous choices
              if (pageData.options && pageData.options.length > 0) {
                  pageData.options.forEach(option => {
                      const button = document.createElement('button');
                      button.classList.add('choice-button');
                      button.textContent = option.text;
-                     button.onclick = () => handleChoiceClick(option); // Pass the whole option
                      choicesElement.appendChild(button);
                  });
              } else {
-                 // Maybe always add a restart button if no other options?
                  const button = document.createElement('button');
                  button.classList.add('choice-button');
-                 button.textContent = "The End (Restart?)";
                  button.onclick = () => handleChoiceClick({ next: 1 });
                  choicesElement.appendChild(button);
              }
@@ -548,16 +555,14 @@
              updateStatsDisplay();
              updateInventoryDisplay();
              updateActionInfo();
-             updateScene(pageData.assemblyParams); // Update 3D scene based on page params
         }
-        // Make handleChoiceClick globally accessible for inline handlers
         window.handleChoiceClick = handleChoiceClick;
         function updateStatsDisplay() {
             if (!gameState.character || !statsElement) return;
             const stats = gameState.character.stats;
             const hpColor = stats.hp / stats.maxHp < 0.3 ? '#f88' : (stats.hp / stats.maxHp < 0.6 ? '#fd5' : '#8f8');
             statsElement.innerHTML = `<strong>Stats:</strong>
                 <span style="color:${hpColor}">HP: ${stats.hp}/${stats.maxHp}</span> <span>XP: ${stats.xp}</span><br>
                 <span>Str: ${stats.strength}</span> <span>Dex: ${stats.dexterity}</span> <span>Con: ${stats.constitution}</span>
@@ -580,26 +585,27 @@
         }
         function updateActionInfo() {
-             if (!actionInfoElement || !gameState ) return;
-             actionInfoElement.textContent = `Location: ${gameData[gameState.currentPageId]?.title || 'Unknown'}`;
         }
-        // --- Initialization ---
         document.addEventListener('DOMContentLoaded', () => {
-             console.log("DOM Ready - Initializing Wacky Shapes Adventure.");
              try {
                  initThreeJS();
                  if (!scene || !camera || !renderer) throw new Error("Three.js failed to initialize.");
-                 startGame(); // Start game directly
                  console.log("Game world initialized and started.");
              } catch (error) {
                  console.error("Initialization failed:", error);
                  storyTitleElement.textContent = "Initialization Error";
                  storyContentElement.innerHTML = `<p style="color:red;">Failed to start game:</p><pre style="color:red; white-space: pre-wrap;">${error.stack || error}</pre><p style="color:yellow;">Check console (F12) for details.</p>`;
                  if(sceneContainer) sceneContainer.innerHTML = '<p style="color:red; padding: 20px;">3D Scene Failed</p>';
-                  document.getElementById('stats-inventory-container').style.display = 'none';
-                  document.getElementById('choices-container').style.display = 'none';
              }
          });

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Wacky Shapes Adventure! (Fixed)</title>
     <style>
         /* --- Base Styles (Similar to previous, slightly tweaked) --- */
         body { font-family: 'Verdana', sans-serif; background-color: #2a3a4a; color: #f0f0f0; margin: 0; padding: 0; overflow: hidden; display: flex; flex-direction: column; height: 100vh; }
         .message-xp { color: #af8; border-left-color: #6a4; }
         .message-warning { color: #f99; border-left-color: #c66; }
+        /* --- Action Info --- */
+        #action-info { position: absolute; bottom: 10px; left: 10px; background-color: rgba(0,0,0,0.7); color: #ffcc66; padding: 5px 10px; border-radius: 3px; font-size: 0.9em; display: block; z-index: 10;} /* Keep visible */
     </style>
 </head>
 <body>
     <div id="game-container">
+        <div id="scene-container">
+             <div id="action-info">Initializing...</div>
+        </div>
         <div id="ui-container">
+            <h2 id="story-title">Initializing...</h2>
+            <div id="story-content"><p>Loading assets...</p></div>
             <div id="stats-inventory-container">
+                <div id="stats-display">Loading Stats...</div>
+                <div id="inventory-display">Inventory: ...</div>
             </div>
             <div id="choices-container">
+                <h3>What will you do?</h3>
+                <div id="choices">Loading...</div>
             </div>
         </div>
     </div>
         console.log("Script module execution started.");
+        // --- 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');
+        const actionInfoElement = document.getElementById('action-info'); // <<< Added back the declaration
+        console.log("DOM elements obtained.");
+        // --- Core Three.js Variables ---
         let scene, camera, renderer, clock;
+        let currentSceneGroup = null;
         let currentLights = [];
+        let currentMessage = "";
+        // --- Materials ---
+        const MAT = {
             stone_grey: new THREE.MeshStandardMaterial({ color: 0x8a8a8a, roughness: 0.8 }),
             stone_brown: new THREE.MeshStandardMaterial({ color: 0x9d8468, roughness: 0.85 }),
             wood_light: new THREE.MeshStandardMaterial({ color: 0xcdaa7d, roughness: 0.7 }),
         };
         // --- Game State ---
+        let gameState = {};
         // --- Item Data ---
         const itemsData = {
             "Shiny Sprocket": {type:"treasure", description:"A gear that gleams."},
             "Bouncy Mushroom": {type:"food", description:"Seems edible... maybe?"},
             "Sturdy Stick": {type:"tool", description:"Good for poking things."},
+            "Cave Crystal": {type:"unknown", description:"A faintly glowing crystal shard."} // Added from previous example
         };
         // --- Procedural Assembly Shapes ---
             'gem_shape': (size) => new THREE.OctahedronGeometry(size * 0.6, 0),
             'basic_tetra': (size) => new THREE.TetrahedronGeometry(size * 0.7, 0),
             'squashed_ball': (size) => new THREE.SphereGeometry(size * 0.6, 12, 8).scale(1, 0.6, 1),
+            'holed_box': (size) => {
                  const shape = new THREE.Shape();
                  shape.moveTo(-size/2, -size/2); shape.lineTo(-size/2, size/2); shape.lineTo(size/2, size/2); shape.lineTo(size/2, -size/2); shape.closePath();
                  const hole = new THREE.Path();
                 title: "Tree's Secret",
                 content: "<p>Aha! Tucked behind the tree trunk, you found a Sturdy Stick!</p>",
                 options: [ { text: "Awesome! Go back.", next: 2 } ],
+                reward: { addItem: "Sturdy Stick", xp: 5 }, // Add reward
+                 assemblyParams: { // Same as page 2
                      baseShape: 'ground_dirt', baseSize: 25,
                      mainShapes: ['tall_cylinder', 'basic_tetra', 'round_blob'],
                      accents: ['spiky_ball'],
                  title: "Picked a Gem!",
                  content: "<p>Success! You plucked a pretty crystal from the ground. It feels warm.</p>",
                  options: [ { text: "Cool! Go back.", next: 1 } ],
+                 reward: { addItem: "Cave Crystal", xp: 10 }, // Add reward
                  assemblyParams: { // Same as page 3
                       baseShape: 'ground_grass', baseSize: 15,
                       mainShapes: ['gem_shape', 'basic_tetra'],
                 title: "Adventure Paused!",
                 content: "<p>Wow, what an adventure! That's all for now, but maybe more fun awaits another day?</p>",
                 options: [ { text: "Start Over?", next: 1 } ],
+                assemblyParams: {
                     baseShape: 'flat_plate', baseSize: 10,
                     mainShapes: ['basic_tetra'],
                     accents: [],
         function initThreeJS() {
             console.log("initThreeJS started.");
             scene = new THREE.Scene();
+            scene.background = new THREE.Color(0x2a3a4a);
             clock = new THREE.Clock();
             const width = sceneContainer.clientWidth || 1;
             currentLights.forEach(light => { if (light.parent) light.parent.remove(light); if(scene.children.includes(light)) scene.remove(light); });
             currentLights = [];
+            const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
             scene.add(ambientLight);
             currentLights.push(ambientLight);
+            const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0);
             directionalLight.position.set(8, 15, 10);
             directionalLight.castShadow = true;
             directionalLight.shadow.mapSize.set(1024, 1024);
             currentLights.push(directionalLight);
         }
         function createProceduralAssembly(params) {
             console.log("Creating procedural assembly with params:", params);
             const group = new THREE.Group();
                 mainShapes = ['boxy_chunk'], accents = ['pointy_cone'],
                 count = 10, scaleRange = [0.5, 1.5],
                 colorTheme = [MAT.stone_grey, MAT.wood_light, MAT.leaf_green],
+                arrangement = 'scatter',
+                stackHeight = 5,
+                clusterRadius = 5,
+                patchPos = {x:0, y:0, z:0}, patchRadius = 3
             } = params;
             let baseMesh;
             if (baseShape.startsWith('ground_')) {
+                const groundMat = MAT[baseShape] || MAT.ground_grass;
+                const groundGeo = new THREE.PlaneGeometry(baseSize, baseSize);
+                baseMesh = new THREE.Mesh(groundGeo, groundMat);
+                baseMesh.rotation.x = -Math.PI / 2; baseMesh.position.y = 0;
+                baseMesh.receiveShadow = true; baseMesh.castShadow = false;
                 group.add(baseMesh);
             } else {
+                const baseGeoFunc = SHAPE_GENERATORS[baseShape] || SHAPE_GENERATORS['flat_plate'];
+                const baseGeo = baseGeoFunc(baseSize);
                 baseMesh = createMesh(baseGeo, colorTheme[0] || MAT.stone_grey, {y:0.1});
                 baseMesh.receiveShadow = true; baseMesh.castShadow = false;
                 group.add(baseMesh);
             }
             const allShapes = [...mainShapes, ...accents];
             let lastY = 0; // For stacking
+            let stackCount = 0; // Track items in current stack
             for (let i = 0; i < count; i++) {
+                if(allShapes.length === 0) break; // Avoid errors if no shapes defined
                 const shapeKey = allShapes[Math.floor(Math.random() * allShapes.length)];
                 const geoFunc = SHAPE_GENERATORS[shapeKey];
                 if (!geoFunc) { console.warn(`Shape generator not found for key: ${shapeKey}`); continue; }
+                const scaleFactor = scaleRange[0] + Math.random() * (scaleRange[1] - scaleRange[0]);
+                const geometry = geoFunc(scaleFactor);
                 const material = colorTheme[Math.floor(Math.random() * colorTheme.length)];
                 const mesh = createMesh(geometry, material);
                 geometry.computeBoundingBox();
                 const height = (geometry.boundingBox.max.y - geometry.boundingBox.min.y) * mesh.scale.y;
+                let position = { x:0, y:0, z:0 };
                 switch(arrangement) {
                     case 'stack':
+                        if (stackCount < stackHeight) {
+                            position.y = lastY + height / 2;
+                            position.x = (Math.random() - 0.5) * 0.5 * scaleFactor;
+                            position.z = (Math.random() - 0.5) * 0.5 * scaleFactor;
+                            lastY += height * 0.9;
+                            stackCount++;
+                        } else continue; // Skip if stack is full
                         break;
                     case 'center_stack':
+                         if (stackCount < stackHeight) {
+                            position.y = lastY + height / 2;
+                            lastY += height * 0.95;
+                            stackCount++;
+                         } else continue;
                          break;
                     case 'cluster':
                         const angle = Math.random() * Math.PI * 2;
                         const radius = Math.random() * clusterRadius;
                         position.x = Math.cos(angle) * radius;
                         position.z = Math.sin(angle) * radius;
+                        position.y = height / 2;
                         break;
                      case 'patch':
                          const pAngle = Math.random() * Math.PI * 2;
                          const pRadius = Math.random() * patchRadius;
                          position.x = patchPos.x + Math.cos(pAngle) * pRadius;
                          position.z = patchPos.z + Math.sin(pAngle) * pRadius;
+                         position.y = (patchPos.y || 0) + height / 2;
                          break;
                     case 'scatter':
                     default:
                         position.x = (Math.random() - 0.5) * baseSize * 0.8;
                         position.z = (Math.random() - 0.5) * baseSize * 0.8;
+                        position.y = height / 2;
                         break;
                 }
                  mesh.position.set(position.x, position.y, position.z);
                 mesh.rotation.set(
+                    Math.random() * (arrangement.includes('stack') ? 0.2 : Math.PI), // Less x/z rotation if stacked
                     Math.random() * Math.PI * 2,
+                    Math.random() * (arrangement.includes('stack') ? 0.2 : Math.PI)
                 );
+                if (Math.random() < 0.3) {
+                     mesh.userData.rotSpeed = (Math.random() - 0.5) * 0.4;
+                     mesh.userData.bobSpeed = 1 + Math.random();
+                     mesh.userData.bobAmount = 0.05 + Math.random() * 0.05;
+                     mesh.userData.startY = mesh.position.y;
+                     mesh.userData.update = (time, delta) => {
+                         mesh.rotation.y += mesh.userData.rotSpeed * delta;
+                         mesh.position.y = mesh.userData.startY + Math.sin(time * mesh.userData.bobSpeed) * mesh.userData.bobAmount;
                      };
                 }
                 group.add(mesh);
             }
+            console.log(`Assembly created with ${group.children.length} objects.`);
             return group;
         }
         function updateScene(assemblyParams) {
+             console.log("updateScene called with params:", assemblyParams);
              if (currentSceneGroup) {
                 currentSceneGroup.traverse(child => {
                     if (child.isMesh) {
                         if(child.geometry) child.geometry.dispose();
                     }
                 });
+                scene.remove(currentSceneGroup);
                 currentSceneGroup = null;
              }
+             setupLighting('default'); // Reset lighting
              if (!assemblyParams) {
                  console.warn("No assemblyParams provided, creating default scene.");
+                 assemblyParams = { baseShape: 'ground_dirt', count: 5, mainShapes: ['boxy_chunk'] };
              }
              try {
                  currentSceneGroup = createProceduralAssembly(assemblyParams);
+                 scene.add(currentSceneGroup);
                  console.log("New scene group added.");
              } catch (error) {
                  console.error("Error creating procedural assembly:", error);
              }
          }
         function startGame() {
             console.log("startGame called.");
             const defaultChar = {
                 name: "Player",
                 stats: { hp: 20, maxHp: 20, xp: 0, strength: 10, dexterity: 10, constitution: 10, intelligence: 10, wisdom: 10, charisma: 10 },
+                inventory: ["Sturdy Stick"]
             };
             gameState = {
+                currentPageId: 1,
                 character: JSON.parse(JSON.stringify(defaultChar))
             };
             renderPage(gameState.currentPageId);
         function handleChoiceClick(choiceData) {
              console.log("Choice clicked:", choiceData);
+             currentMessage = "";
              let nextPageId = parseInt(choiceData.next);
              const currentPageData = gameData[gameState.currentPageId];
              if (!targetPageData) {
                  console.error(`Invalid next page ID: ${nextPageId}`);
                  currentMessage = `<p class="message message-warning">Oops! That path seems to lead nowhere yet.</p>`;
+                 nextPageId = gameState.currentPageId;
              }
               if (currentPageData && currentPageData.options) {
+                 const chosenOption = currentPageData.options.find(opt => opt.next === choiceData.next);
                  if (chosenOption && chosenOption.reward) {
                     console.log("Applying reward:", chosenOption.reward);
                       if(chosenOption.reward.addItem && itemsData[chosenOption.reward.addItem]) {
                               gameState.character.inventory.push(chosenOption.reward.addItem);
                               currentMessage += `<p class="message message-item">You found a ${chosenOption.reward.addItem}!</p>`;
                           } else {
+                               currentMessage += `<p class="message message-info">You found another ${chosenOption.reward.addItem}, but your pockets are full!</p>`;
                           }
                       }
                       if(chosenOption.reward.xp) {
                           gameState.character.stats.xp += chosenOption.reward.xp;
                           currentMessage += `<p class="message message-xp">You gained ${chosenOption.reward.xp} XP!</p>`;
                       }
                  }
              }
              gameState.currentPageId = nextPageId;
              renderPage(nextPageId);
         }
              if (!pageData) {
                  console.error(`No page data for ID: ${pageId}`);
+                 storyTitleElement.textContent = "Uh Oh!";
+                 storyContentElement.innerHTML = currentMessage + `<p>Where did the world go? Maybe try going back?</p>`;
+                 choicesElement.innerHTML = `<button class="choice-button" onclick="window.handleChoiceClick({ next: 1 })">Go Back to Start</button>`;
                  updateStatsDisplay(); updateInventoryDisplay(); updateActionInfo();
+                 updateScene({ baseShape: 'ground_dirt', count: 1, mainShapes: ['basic_tetra'], colorTheme: [MAT.metal_rusty] });
                  return;
              }
              storyTitleElement.textContent = pageData.title || "An Unnamed Place";
+             storyContentElement.innerHTML = currentMessage + (pageData.content || "<p>It's... a place. Things exist here.</p>");
+             choicesElement.innerHTML = '';
              if (pageData.options && pageData.options.length > 0) {
                  pageData.options.forEach(option => {
                      const button = document.createElement('button');
                      button.classList.add('choice-button');
                      button.textContent = option.text;
+                     button.onclick = () => handleChoiceClick(option);
                      choicesElement.appendChild(button);
                  });
              } else {
                  const button = document.createElement('button');
                  button.classList.add('choice-button');
+                 button.textContent = "The End (Start Over?)";
                  button.onclick = () => handleChoiceClick({ next: 1 });
                  choicesElement.appendChild(button);
              }
              updateStatsDisplay();
              updateInventoryDisplay();
              updateActionInfo();
+             updateScene(pageData.assemblyParams);
         }
         window.handleChoiceClick = handleChoiceClick;
         function updateStatsDisplay() {
             if (!gameState.character || !statsElement) return;
             const stats = gameState.character.stats;
             const hpColor = stats.hp / stats.maxHp < 0.3 ? '#f88' : (stats.hp / stats.maxHp < 0.6 ? '#fd5' : '#8f8');
             statsElement.innerHTML = `<strong>Stats:</strong>
                 <span style="color:${hpColor}">HP: ${stats.hp}/${stats.maxHp}</span> <span>XP: ${stats.xp}</span><br>
                 <span>Str: ${stats.strength}</span> <span>Dex: ${stats.dexterity}</span> <span>Con: ${stats.constitution}</span>
         }
         function updateActionInfo() {
+            if (!actionInfoElement || !gameState ) return;
+            actionInfoElement.textContent = `Location: ${gameData[gameState.currentPageId]?.title || 'Unknown'}`;
         }
         document.addEventListener('DOMContentLoaded', () => {
+             console.log("DOM Ready - Initializing Wacky Shapes Adventure!");
              try {
                  initThreeJS();
                  if (!scene || !camera || !renderer) throw new Error("Three.js failed to initialize.");
+                 startGame();
                  console.log("Game world initialized and started.");
              } catch (error) {
                  console.error("Initialization failed:", error);
                  storyTitleElement.textContent = "Initialization Error";
                  storyContentElement.innerHTML = `<p style="color:red;">Failed to start game:</p><pre style="color:red; white-space: pre-wrap;">${error.stack || error}</pre><p style="color:yellow;">Check console (F12) for details.</p>`;
                  if(sceneContainer) sceneContainer.innerHTML = '<p style="color:red; padding: 20px;">3D Scene Failed</p>';
+                  const statsInvContainer = document.getElementById('stats-inventory-container');
+                  const choicesCont = document.getElementById('choices-container');
+                  if (statsInvContainer) statsInvContainer.style.display = 'none';
+                  if (choicesCont) choicesCont.style.display = 'none';
              }
          });