Spaces:

awacke1
/

ChooseYourOwnAdventure2

Running

App Files Files Community

awacke1 commited on 11 days ago

Commit

44893d0

verified ·

1 Parent(s): 1e5f49f

Update index.html

Browse files

Files changed (1) hide show

index.html +94 -106

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>World Grid Test</title>
     <style>
         body { font-family: 'Courier New', monospace; background-color: #111; color: #eee; margin: 0; padding: 0; overflow: hidden; display: flex; flex-direction: column; height: 100vh; }
         #game-container { display: flex; flex-grow: 1; overflow: hidden; }
@@ -17,6 +17,11 @@
         #stats-display span, #inventory-display .item-tag { display: inline-block; background-color: #484848; padding: 3px 9px; border-radius: 15px; margin: 0 8px 5px 0; border: 1px solid #6a6a6a; white-space: nowrap; box-shadow: inset 0 1px 2px rgba(0,0,0,0.3); }
         #stats-display strong, #inventory-display strong { color: #ccc; margin-right: 6px; }
         #inventory-display em { color: #888; font-style: normal; }
         #choices-container { margin-top: auto; padding-top: 20px; border-top: 1px solid #555; }
         #choices-container h3 { margin-top: 0; margin-bottom: 12px; color: #ccc; font-size: 1.1em; }
         #choices { display: flex; flex-direction: column; gap: 12px; }
@@ -25,11 +30,14 @@
         .choice-button:disabled { background-color: #404040; color: #777; cursor: not-allowed; border-color: #555; opacity: 0.7; }
         .message { padding: 8px 12px; margin-bottom: 1em; border-left-width: 3px; border-left-style: solid; font-size: 0.95em; background-color: rgba(255, 255, 255, 0.05); border-color: #666; color: #aaa;}
         .message-failure { color: #f88; border-left-color: #a44; }
     </style>
 </head>
 <body>
     <div id="game-container">
-        <div id="scene-container"></div>
         <div id="ui-container">
             <h2 id="story-title">Initializing...</h2>
             <div id="story-content"><p>Loading assets...</p></div>
@@ -54,7 +62,6 @@
     <script type="module">
         import * as THREE from 'three';
         import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-        // Font loading removed for simplicity for now
         const sceneContainer = document.getElementById('scene-container');
         const storyTitleElement = document.getElementById('story-title');
@@ -62,11 +69,13 @@
         const choicesElement = document.getElementById('choices');
         const statsElement = document.getElementById('stats-display');
         const inventoryElement = document.getElementById('inventory-display');
-        let scene, camera, renderer, clock, controls;
         let worldGroup = null;
-        let zoneGroups = {}; // Stores the THREE.Group for loaded zones { zoneId: group }
         let currentMessage = "";
         const MAT = {
             stone: new THREE.MeshStandardMaterial({ color: 0x777788, roughness: 0.85 }),
@@ -79,22 +88,32 @@
             simple: new THREE.MeshStandardMaterial({ color: 0xaaaaaa, roughness: 0.8 }),
         };
-        // --- Game State ---
-        let gameState = {}; // Initialized in startGame
-        // --- Core Functions ---
         function initThreeJS() {
             scene = new THREE.Scene();
             scene.background = new THREE.Color(0x1a1a1a);
             clock = new THREE.Clock();
             worldGroup = new THREE.Group();
             scene.add(worldGroup);
             const width = sceneContainer.clientWidth || 1;
             const height = sceneContainer.clientHeight || 1;
             camera = new THREE.PerspectiveCamera(60, width / height, 0.1, 1000);
-            camera.position.set(0, 6, 12); // Slightly higher view
             renderer = new THREE.WebGLRenderer({ antialias: true });
             renderer.setSize(width, height);
@@ -111,7 +130,6 @@
             controls.maxPolarAngle = Math.PI / 2 - 0.05;
             window.addEventListener('resize', onWindowResize, false);
-            // Removed mouse listeners for now
             setTimeout(onWindowResize, 50);
             animate();
         }
@@ -127,7 +145,7 @@
         function animate() {
             requestAnimationFrame(animate);
-            controls.update(); // Need to update controls
             if (renderer && scene && camera) renderer.render(scene, camera);
         }
@@ -145,11 +163,15 @@
              const ground = new THREE.Mesh(geo, material);
              ground.rotation.x = -Math.PI / 2; ground.position.y = 0;
              ground.receiveShadow = true; ground.castShadow = false;
              return ground;
         }
         function setupLighting(type = 'default') {
-             worldGroup.children.filter(c => c.isLight).forEach(light => worldGroup.remove(light)); // Remove old lights from worldGroup
              let ambientIntensity = 0.5;
              let dirIntensity = 1.0;
@@ -157,11 +179,19 @@
              let dirPosition = new THREE.Vector3(10, 15, 8);
              if (type === 'forest') { ambientIntensity = 0.4; dirIntensity = 0.8; dirColor = 0xccffcc; dirPosition = new THREE.Vector3(5, 10, 5); }
-             if (type === 'cave') { ambientIntensity = 0.2; dirIntensity = 0; } // Rely on point light added in zone creator
              if (type === 'ruins') { ambientIntensity = 0.4; dirIntensity = 0.7; dirColor = 0xaaaaff; dirPosition = new THREE.Vector3(-8, 12, -5); }
              const ambientLight = new THREE.AmbientLight(0xffffff, ambientIntensity);
-             worldGroup.add(ambientLight); // Add lights to worldGroup
              if (dirIntensity > 0) {
                  const directionalLight = new THREE.DirectionalLight(dirColor, dirIntensity);
@@ -169,15 +199,15 @@
                  directionalLight.castShadow = true;
                  directionalLight.shadow.mapSize.set(1024, 1024);
                  directionalLight.shadow.camera.near = 0.5; directionalLight.shadow.camera.far = 50;
-                 const sb = 20; // shadow bounds
                  directionalLight.shadow.camera.left = -sb; directionalLight.shadow.camera.right = sb;
                  directionalLight.shadow.camera.top = sb; directionalLight.shadow.camera.bottom = -sb;
                  directionalLight.shadow.bias = -0.0005;
-                 worldGroup.add(directionalLight);
              }
         }
-        // --- Zone Creation Functions ---
         function createFieldZone(zoneId) {
             const group = new THREE.Group();
             group.add(createGround(MAT.grass, 30));
@@ -186,13 +216,7 @@
                  group.add(createMesh(rockGeo, MAT.stone, {x: (Math.random()-0.5)*25, y:0.3, z: (Math.random()-0.5)*25}));
             }
             group.visible = false;
-            return {
-                group,
-                lighting: 'default',
-                title: "Open Field",
-                entryText: "You stand in an open, grassy field.",
-                options: [] // Neighbors added dynamically
-            };
         }
         function createForestZone(zoneId) {
@@ -213,15 +237,7 @@
                  group.add(tree);
              }
              group.visible = false;
-             return {
-                group,
-                lighting: 'forest',
-                title: "Dark Forest",
-                entryText: "Sunlight is sparse beneath the thick canopy.",
-                options: [
-                    { text: "Search for tracks (TBC)", action: "search"} // Placeholder for future skill check
-                ]
-             };
         }
         function createCaveZone(zoneId) {
@@ -236,21 +252,13 @@
                  const st = createMesh(coneGeo, MAT.stone, {x: (Math.random()-0.5)*16, y: 6 + Math.random()*2, z: (Math.random()-0.5)*16}, {x:Math.PI});
                  group.add(st);
              }
-             // Add point light specific to cave
-             const ptLight = new THREE.PointLight(0xffaa55, 1.5, 12, 1);
              ptLight.position.set(0, 3, 0);
              ptLight.castShadow = true;
              ptLight.shadow.mapSize.set(512, 512);
-             group.add(ptLight);
              group.visible = false;
-             return {
-                group,
-                lighting: 'cave',
-                title: "Dim Cave",
-                entryText: "It's dark and damp in here. Water drips.",
-                options: []
-             };
          }
          function createRuinsZone(zoneId) {
@@ -268,35 +276,23 @@
                  group.add(wall);
              }
              group.visible = false;
-             return {
-                 group,
-                 lighting: 'ruins',
-                 title: "Crumbling Ruins",
-                 entryText: "The wind whistles through broken walls.",
-                 options: [
-                      { text: "Examine rubble (TBC)", action: "examine_rubble"}
-                 ]
-             };
          }
-        // --- Map Grid & Zone Definitions ---
-        const MAP_ROWS = 3;
-        const MAP_COLS = 4;
-        const zoneCreators = {}; // { "zone_0_0": createFunction, ... }
         function getZoneId(row, col) { return `zone_${row}_${col}`; }
         function populateZoneCreators() {
             for (let r = 0; r < MAP_ROWS; r++) {
                 for (let c = 0; c < MAP_COLS; c++) {
                     const zoneId = getZoneId(r, c);
                     let creatorFunc;
-                    // Simple pattern for variety
                     if (r === 0) creatorFunc = createForestZone;
                     else if (r === 1 && c % 2 === 0) creatorFunc = createFieldZone;
                     else if (r === 1 && c % 2 !== 0) creatorFunc = createRuinsZone;
                     else creatorFunc = createCaveZone;
-                    zoneCreators[zoneId] = () => creatorFunc(zoneId); // Store function that calls creator with ID
                 }
             }
              console.log("Zone creators populated.");
@@ -308,10 +304,10 @@
             const r = parseInt(parts[1]);
             const c = parseInt(parts[2]);
             const neighbors = {};
-            if (r > 0) neighbors.north = getZoneId(r - 1, c);
-            if (r < MAP_ROWS - 1) neighbors.south = getZoneId(r + 1, c);
-            if (c > 0) neighbors.west = getZoneId(r, c - 1);
-            if (c < MAP_COLS - 1) neighbors.east = getZoneId(r, c + 1);
             return neighbors;
         }
@@ -326,35 +322,40 @@
                 character: JSON.parse(JSON.stringify(defaultChar))
             };
             populateZoneCreators();
             console.log("Starting new game:", gameState);
-            transitionToZone(getZoneId(1, 1)); // Start in a central zone
         }
         function transitionToZone(newZoneId) {
              console.log(`Transitioning to ${newZoneId}`);
              currentMessage = "";
-             // Hide current zone if exists
              if (gameState.currentZoneId && zoneGroups[gameState.currentZoneId]) {
-                 zoneGroups[gameState.currentZoneId].visible = false;
              }
              let zoneInfo;
-             // Load or unhide new zone
              if (zoneGroups[newZoneId]) {
                  zoneInfo = zoneGroups[newZoneId];
                  zoneInfo.group.visible = true;
              } else {
                  const creator = zoneCreators[newZoneId];
                  if (creator) {
-                    zoneInfo = creator(); // Create the zone { group, lighting, title, entryText, options }
-                    zoneGroups[newZoneId] = zoneInfo; // Store the created zone data
                     worldGroup.add(zoneInfo.group);
                     zoneInfo.group.visible = true;
                  } else {
-                    console.error(`No creator found for zone ID: ${newZoneId}, going to default`);
                      const fallbackId = getZoneId(1, 1);
-                     if (!zoneGroups[fallbackId]) { // Ensure fallback exists
                          zoneGroups[fallbackId] = zoneCreators[fallbackId]();
                          worldGroup.add(zoneGroups[fallbackId].group);
                      }
@@ -368,7 +369,14 @@
              gameState.currentZoneId = newZoneId;
              setupLighting(zoneInfo.lighting || 'default');
-             // Basic camera reset
              camera.position.set(0, 6, 12);
              controls.target.set(0, 1, 0);
              controls.update();
@@ -379,14 +387,16 @@
         function renderCurrentPageUI() {
             const zoneInfo = zoneGroups[gameState.currentZoneId];
             if (!zoneInfo) {
-                console.error(`No zone info loaded for ${gameState.currentZoneId}`);
                 storyTitleElement.textContent = "Error";
                 storyContentElement.innerHTML = currentMessage + "<p>Cannot render current zone.</p>";
                 choicesElement.innerHTML = `<button class="choice-button" onclick="transitionToZone('${getZoneId(1, 1)}')">Return to Start</button>`;
                 updateStatsDisplay();
                 updateInventoryDisplay();
                 return;
             }
@@ -394,8 +404,7 @@
              storyContentElement.innerHTML = currentMessage + (zoneInfo.entryText ? `<p>${zoneInfo.entryText}</p>` : '');
              choicesElement.innerHTML = '';
-             // Add Navigation Options
-             const neighbors = getZoneNeighbors(gameState.currentZoneId);
              const directions = {'north': 'North', 'south': 'South', 'east': 'East', 'west': 'West'};
              for(const dir in neighbors) {
                   const neighborId = neighbors[dir];
@@ -406,13 +415,12 @@
                   choicesElement.appendChild(button);
              }
-             // Add Zone Specific Options
              if (zoneInfo.options && zoneInfo.options.length > 0) {
                  zoneInfo.options.forEach(option => {
                      const button = document.createElement('button');
                      button.classList.add('choice-button');
                      button.textContent = option.text;
-                     // Add onclick based on option.action or other properties later
                      choicesElement.appendChild(button);
                  });
              }
@@ -422,6 +430,9 @@
              updateActionInfo();
         }
         function updateStatsDisplay() {
             const { hp, maxHp, xp } = gameState.character.stats;
             const hpColor = hp / maxHp < 0.3 ? '#f88' : (hp / maxHp < 0.6 ? '#fd5' : '#8f8');
@@ -446,42 +457,19 @@
             actionInfoElement.textContent = `Zone: ${gameState.currentZoneId || 'None'}`;
         }
-        // --- Pickup/Placement (Removed for now) ---
-        function pickupItem() { console.log("Pickup disabled in this version."); }
-        function placeItem() { console.log("Placement disabled in this version."); }
-        function togglePlacementMode() { console.log("Placement disabled in this version.");}
-        // --- Combat/Checks (Placeholders) ---
-        function startCombat(enemyTypeId) {
-            console.log("Combat Started (Placeholder):", enemyTypeId);
-            currentMessage = `<p class="message message-combat">Placeholder: Encountered a ${enemyTypeId}!</p>`;
-            renderCurrentPageUI(); // Re-render to show message
-        }
-        function handleCombatAction(action) {
-             console.log("Combat Action (Placeholder):", action);
-             currentMessage = `<p class="message message-info">Placeholder: Combat action '${action}' executed.</p>`;
-             // Add basic HP loss for testing
-             gameState.character.stats.hp -= 1;
-             gameState.character.stats.hp = Math.max(0, gameState.character.stats.hp);
-             if(gameState.character.stats.hp === 0) {
-                 currentMessage += `<p class="message message-failure">You were defeated in placeholder combat!</p>`;
-                 // Reset HP for now instead of game over
-                 gameState.character.stats.hp = gameState.character.stats.maxHp;
-             }
-             renderCurrentPageUI();
-        }
-         // Make placeholders globally accessible if needed by inline HTML later
-         window.startCombat = startCombat;
-         window.handleCombatAction = handleCombatAction;
-        // --- Initialization ---
         document.addEventListener('DOMContentLoaded', () => {
              console.log("DOM Ready - Initializing World Grid Test.");
              try {
                  initThreeJS();
                  if (!scene || !camera || !renderer) throw new Error("Three.js failed to initialize.");
-                 startGame(); // Font not needed for this simplified version
                  console.log("Game world initialized and started.");
              } catch (error) {
                  console.error("Initialization failed:", error);

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>World Grid Test (Fixed)</title>
     <style>
         body { font-family: 'Courier New', monospace; background-color: #111; color: #eee; margin: 0; padding: 0; overflow: hidden; display: flex; flex-direction: column; height: 100vh; }
         #game-container { display: flex; flex-grow: 1; overflow: hidden; }
         #stats-display span, #inventory-display .item-tag { display: inline-block; background-color: #484848; padding: 3px 9px; border-radius: 15px; margin: 0 8px 5px 0; border: 1px solid #6a6a6a; white-space: nowrap; box-shadow: inset 0 1px 2px rgba(0,0,0,0.3); }
         #stats-display strong, #inventory-display strong { color: #ccc; margin-right: 6px; }
         #inventory-display em { color: #888; font-style: normal; }
+        .item-quest { background-color: #666030; border-color: #999048;}
+        .item-weapon { background-color: #663030; border-color: #994848;}
+        .item-armor { background-color: #306630; border-color: #489948;}
+        .item-consumable { background-color: #664430; border-color: #996648;}
+        .item-unknown { background-color: #555; border-color: #777;}
         #choices-container { margin-top: auto; padding-top: 20px; border-top: 1px solid #555; }
         #choices-container h3 { margin-top: 0; margin-bottom: 12px; color: #ccc; font-size: 1.1em; }
         #choices { display: flex; flex-direction: column; gap: 12px; }
         .choice-button:disabled { background-color: #404040; color: #777; cursor: not-allowed; border-color: #555; opacity: 0.7; }
         .message { padding: 8px 12px; margin-bottom: 1em; border-left-width: 3px; border-left-style: solid; font-size: 0.95em; background-color: rgba(255, 255, 255, 0.05); border-color: #666; color: #aaa;}
         .message-failure { color: #f88; border-left-color: #a44; }
+        #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;}
     </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>
     <script type="module">
         import * as THREE from 'three';
         import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
         const sceneContainer = document.getElementById('scene-container');
         const storyTitleElement = document.getElementById('story-title');
         const choicesElement = document.getElementById('choices');
         const statsElement = document.getElementById('stats-display');
         const inventoryElement = document.getElementById('inventory-display');
+        const actionInfoElement = document.getElementById('action-info'); // <<< Declaration was missing
+        let scene, camera, renderer, clock, controls, raycaster, mouse;
         let worldGroup = null;
+        let zoneGroups = {};
         let currentMessage = "";
+        let currentLights = [];
         const MAT = {
             stone: new THREE.MeshStandardMaterial({ color: 0x777788, roughness: 0.85 }),
             simple: new THREE.MeshStandardMaterial({ color: 0xaaaaaa, roughness: 0.8 }),
         };
+        let gameState = {};
+        const itemsData = {
+            "Rusty Sword": {type:"weapon", description:"Old but sharp.", baseDamage: 3},
+            "Health Potion": {type:"consumable", description:"Restores 10 HP.", effect: { hpGain: 10 }},
+            "Goblin Ear": {type:"quest", description:"A gruesome trophy."},
+            "Cave Crystal": {type:"unknown", description:"A faintly glowing crystal shard."}
+        };
+        const zoneCreators = {};
+        const MAP_ROWS = 3;
+        const MAP_COLS = 4;
         function initThreeJS() {
             scene = new THREE.Scene();
             scene.background = new THREE.Color(0x1a1a1a);
             clock = new THREE.Clock();
+            raycaster = new THREE.Raycaster();
+            mouse = new THREE.Vector2();
             worldGroup = new THREE.Group();
             scene.add(worldGroup);
             const width = sceneContainer.clientWidth || 1;
             const height = sceneContainer.clientHeight || 1;
             camera = new THREE.PerspectiveCamera(60, width / height, 0.1, 1000);
+            camera.position.set(0, 6, 12);
             renderer = new THREE.WebGLRenderer({ antialias: true });
             renderer.setSize(width, height);
             controls.maxPolarAngle = Math.PI / 2 - 0.05;
             window.addEventListener('resize', onWindowResize, false);
             setTimeout(onWindowResize, 50);
             animate();
         }
         function animate() {
             requestAnimationFrame(animate);
+            controls.update();
             if (renderer && scene && camera) renderer.render(scene, camera);
         }
              const ground = new THREE.Mesh(geo, material);
              ground.rotation.x = -Math.PI / 2; ground.position.y = 0;
              ground.receiveShadow = true; ground.castShadow = false;
+             ground.userData.isGround = true;
              return ground;
         }
         function setupLighting(type = 'default') {
+             currentLights.forEach(light => {
+                 if (light) scene.remove(light); // Remove from main scene
+             });
+             currentLights = []; // Reset tracked lights
              let ambientIntensity = 0.5;
              let dirIntensity = 1.0;
              let dirPosition = new THREE.Vector3(10, 15, 8);
              if (type === 'forest') { ambientIntensity = 0.4; dirIntensity = 0.8; dirColor = 0xccffcc; dirPosition = new THREE.Vector3(5, 10, 5); }
+             if (type === 'cave') {
+                 ambientIntensity = 0.2; dirIntensity = 0;
+                 const ptLight = new THREE.PointLight(0xffaa55, 1.5, 12, 1);
+                 ptLight.position.set(0, 3, 0); // Place light relative to zone origin
+                 ptLight.castShadow = true; ptLight.shadow.mapSize.set(512, 512);
+                 // Point light will be added to the zone group later
+                 currentLights.push(ptLight); // Track it to add later
+            }
              if (type === 'ruins') { ambientIntensity = 0.4; dirIntensity = 0.7; dirColor = 0xaaaaff; dirPosition = new THREE.Vector3(-8, 12, -5); }
              const ambientLight = new THREE.AmbientLight(0xffffff, ambientIntensity);
+             scene.add(ambientLight); // Add ambient to main scene
+             currentLights.push(ambientLight); // Track ambient
              if (dirIntensity > 0) {
                  const directionalLight = new THREE.DirectionalLight(dirColor, dirIntensity);
                  directionalLight.castShadow = true;
                  directionalLight.shadow.mapSize.set(1024, 1024);
                  directionalLight.shadow.camera.near = 0.5; directionalLight.shadow.camera.far = 50;
+                 const sb = 20;
                  directionalLight.shadow.camera.left = -sb; directionalLight.shadow.camera.right = sb;
                  directionalLight.shadow.camera.top = sb; directionalLight.shadow.camera.bottom = -sb;
                  directionalLight.shadow.bias = -0.0005;
+                 scene.add(directionalLight); // Add directional to main scene
+                 currentLights.push(directionalLight);
              }
         }
         function createFieldZone(zoneId) {
             const group = new THREE.Group();
             group.add(createGround(MAT.grass, 30));
                  group.add(createMesh(rockGeo, MAT.stone, {x: (Math.random()-0.5)*25, y:0.3, z: (Math.random()-0.5)*25}));
             }
             group.visible = false;
+            return { group, lighting: 'default', title: "Open Field", entryText: "You stand in an open, grassy field.", options: [], zoneId: zoneId };
         }
         function createForestZone(zoneId) {
                  group.add(tree);
              }
              group.visible = false;
+             return { group, lighting: 'forest', title: "Dark Forest", entryText: "Sunlight is sparse beneath the thick canopy.", options: [], zoneId: zoneId };
         }
         function createCaveZone(zoneId) {
                  const st = createMesh(coneGeo, MAT.stone, {x: (Math.random()-0.5)*16, y: 6 + Math.random()*2, z: (Math.random()-0.5)*16}, {x:Math.PI});
                  group.add(st);
              }
+             const ptLight = new THREE.PointLight(0xffaa55, 1.5, 12, 1); // Create cave light
              ptLight.position.set(0, 3, 0);
              ptLight.castShadow = true;
              ptLight.shadow.mapSize.set(512, 512);
+             group.add(ptLight); // Add light to the cave group itself
              group.visible = false;
+             return { group, lighting: 'cave', title: "Dim Cave", entryText: "It's dark and damp in here. Water drips.", options: [], zoneId: zoneId };
          }
          function createRuinsZone(zoneId) {
                  group.add(wall);
              }
              group.visible = false;
+             return { group, lighting: 'ruins', title: "Crumbling Ruins", entryText: "The wind whistles through broken walls.", options: [], zoneId: zoneId };
          }
         function getZoneId(row, col) { return `zone_${row}_${col}`; }
         function populateZoneCreators() {
+            zoneCreators = {}; // Clear previous if any
             for (let r = 0; r < MAP_ROWS; r++) {
                 for (let c = 0; c < MAP_COLS; c++) {
                     const zoneId = getZoneId(r, c);
                     let creatorFunc;
                     if (r === 0) creatorFunc = createForestZone;
                     else if (r === 1 && c % 2 === 0) creatorFunc = createFieldZone;
                     else if (r === 1 && c % 2 !== 0) creatorFunc = createRuinsZone;
                     else creatorFunc = createCaveZone;
+                    zoneCreators[zoneId] = () => creatorFunc(zoneId);
                 }
             }
              console.log("Zone creators populated.");
             const r = parseInt(parts[1]);
             const c = parseInt(parts[2]);
             const neighbors = {};
+            if (r > 0 && zoneCreators[getZoneId(r - 1, c)]) neighbors.north = getZoneId(r - 1, c);
+            if (r < MAP_ROWS - 1 && zoneCreators[getZoneId(r + 1, c)]) neighbors.south = getZoneId(r + 1, c);
+            if (c > 0 && zoneCreators[getZoneId(r, c - 1)]) neighbors.west = getZoneId(r, c - 1);
+            if (c < MAP_COLS - 1 && zoneCreators[getZoneId(r, c + 1)]) neighbors.east = getZoneId(r, c + 1);
             return neighbors;
         }
                 character: JSON.parse(JSON.stringify(defaultChar))
             };
             populateZoneCreators();
+            zoneGroups = {}; // Clear loaded zones
+            // Clear existing groups from worldGroup if any
+             while(worldGroup.children.length > 0){
+                 worldGroup.remove(worldGroup.children[0]);
+             }
             console.log("Starting new game:", gameState);
+            transitionToZone(getZoneId(1, 1)); // Start in center
         }
         function transitionToZone(newZoneId) {
              console.log(`Transitioning to ${newZoneId}`);
              currentMessage = "";
              if (gameState.currentZoneId && zoneGroups[gameState.currentZoneId]) {
+                 zoneGroups[gameState.currentZoneId].group.visible = false;
              }
              let zoneInfo;
              if (zoneGroups[newZoneId]) {
                  zoneInfo = zoneGroups[newZoneId];
                  zoneInfo.group.visible = true;
+                 console.log(`Re-entering zone ${newZoneId}`);
              } else {
                  const creator = zoneCreators[newZoneId];
                  if (creator) {
+                    zoneInfo = creator();
+                    zoneGroups[newZoneId] = zoneInfo;
                     worldGroup.add(zoneInfo.group);
                     zoneInfo.group.visible = true;
+                    console.log(`Created and entered zone ${newZoneId}`);
                  } else {
+                    console.error(`No creator found for zone ID: ${newZoneId}, going to fallback`);
                      const fallbackId = getZoneId(1, 1);
+                     if (!zoneGroups[fallbackId]) {
                          zoneGroups[fallbackId] = zoneCreators[fallbackId]();
                          worldGroup.add(zoneGroups[fallbackId].group);
                      }
              gameState.currentZoneId = newZoneId;
              setupLighting(zoneInfo.lighting || 'default');
+             // Add zone-specific lights to the group if they exist in currentLights but not scene
+             currentLights.forEach(light => {
+                if (light.isPointLight && !light.parent) { // Only add point lights not already in scene
+                    zoneInfo.group.add(light);
+                }
+             });
              camera.position.set(0, 6, 12);
              controls.target.set(0, 1, 0);
              controls.update();
         function renderCurrentPageUI() {
             const zoneInfo = zoneGroups[gameState.currentZoneId];
+            const zoneId = gameState.currentZoneId;
             if (!zoneInfo) {
+                console.error(`No zone info loaded for ${zoneId}`);
                 storyTitleElement.textContent = "Error";
                 storyContentElement.innerHTML = currentMessage + "<p>Cannot render current zone.</p>";
                 choicesElement.innerHTML = `<button class="choice-button" onclick="transitionToZone('${getZoneId(1, 1)}')">Return to Start</button>`;
                 updateStatsDisplay();
                 updateInventoryDisplay();
+                updateActionInfo();
                 return;
             }
              storyContentElement.innerHTML = currentMessage + (zoneInfo.entryText ? `<p>${zoneInfo.entryText}</p>` : '');
              choicesElement.innerHTML = '';
+             const neighbors = getZoneNeighbors(zoneId);
              const directions = {'north': 'North', 'south': 'South', 'east': 'East', 'west': 'West'};
              for(const dir in neighbors) {
                   const neighborId = neighbors[dir];
                   choicesElement.appendChild(button);
              }
              if (zoneInfo.options && zoneInfo.options.length > 0) {
                  zoneInfo.options.forEach(option => {
                      const button = document.createElement('button');
                      button.classList.add('choice-button');
                      button.textContent = option.text;
+                     // Add onclick based on option.action later
                      choicesElement.appendChild(button);
                  });
              }
              updateActionInfo();
         }
+        window.transitionToZone = transitionToZone; // Make accessible from potential inline event handlers if needed
         function updateStatsDisplay() {
             const { hp, maxHp, xp } = gameState.character.stats;
             const hpColor = hp / maxHp < 0.3 ? '#f88' : (hp / maxHp < 0.6 ? '#fd5' : '#8f8');
             actionInfoElement.textContent = `Zone: ${gameState.currentZoneId || 'None'}`;
         }
+        function pickupItem() { console.log("Pickup disabled."); }
+        function placeItem() { console.log("Placement disabled."); }
+        function togglePlacementMode() { console.log("Placement disabled.");}
+        function startCombat(enemyTypeId) { console.log("Combat disabled."); }
+        function handleCombatAction(action) { console.log("Combat disabled."); }
         document.addEventListener('DOMContentLoaded', () => {
              console.log("DOM Ready - Initializing World Grid Test.");
              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);