Spaces:

awacke1
/

ChooseYourOwnAdventure2

Running

App Files Files Community

awacke1 commited on 19 days ago

Commit

37f9b86

verified ·

1 Parent(s): 5a10444

Update index.html

Browse files

Files changed (1) hide show

index.html +128 -533

index.html CHANGED Viewed

@@ -3,29 +3,25 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Procedural World - D&D Style</title>
     <style>
-        /* --- Base Styles --- */
         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; }
         #scene-container { flex-grow: 3; position: relative; border-right: 2px solid #444; min-width: 250px; background-color: #000; height: 100%; box-sizing: border-box; overflow: hidden; cursor: default; }
         #ui-container { flex-grow: 2; padding: 25px; overflow-y: auto; background-color: #2b2b2b; min-width: 320px; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; }
         #scene-container canvas { display: block; }
-        /* --- UI Elements --- */
         #story-title { color: #f0c060; margin: 0 0 15px 0; padding-bottom: 10px; border-bottom: 1px solid #555; font-size: 1.6em; text-shadow: 1px 1px 1px #000; }
         #story-content { margin-bottom: 25px; line-height: 1.7; flex-grow: 1; font-size: 1.1em; }
         #stats-inventory-container { margin-bottom: 25px; padding: 15px; border: 1px solid #444; border-radius: 4px; background-color: #333; font-size: 0.95em; }
         #stats-display, #inventory-display { margin-bottom: 10px; line-height: 1.8; }
-        #stats-display span { 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); }
-        #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); cursor: default; } /* No placement click */
         #stats-display strong, #inventory-display strong { color: #ccc; margin-right: 6px; }
         #inventory-display em { color: #888; font-style: normal; }
         .item-weapon { background-color: #663030; border-color: #994848;}
         .item-consumable { background-color: #664430; border-color: #996648;}
         .item-unknown { background-color: #555; border-color: #777;}
-        /* --- Choices & Messages --- */
         #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; }
@@ -34,14 +30,6 @@
         .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; }
-        .message-success { color: #8f8; border-left-color: #4a4; }
-        .message-info { color: #aaa; border-left-color: #666; }
-        .message-item { color: #8bf; border-left-color: #46a; }
-        .message-combat { color: #f98; border-left-color: #c64; font-weight: bold;}
-        .combat-button { background-color: #a33; border-color: #c66; color: #fff; font-weight: bold; text-align: center;}
-        .combat-button:hover:not(:disabled) { background-color: #d44; border-color: #f88;}
-        /* --- 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;}
     </style>
 </head>
@@ -52,10 +40,10 @@
         </div>
         <div id="ui-container">
             <h2 id="story-title">Initializing...</h2>
-            <div id="story-content"><p>Loading world...</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>
@@ -74,12 +62,9 @@
     <script type="module">
         import * as THREE from 'three';
         import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-        import { FontLoader } from 'three/addons/loaders/FontLoader.js';
-        import { TextGeometry } from 'three/addons/geometries/TextGeometry.js';
         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');
@@ -88,111 +73,86 @@
         const inventoryElement = document.getElementById('inventory-display');
         const actionInfoElement = document.getElementById('action-info');
-        // --- Core Three.js Variables ---
-        let scene, camera, renderer, clock, controls, raycaster, mouse;
-        let worldGroup = null; // Parent for all zone content
-        let zoneGroups = {};   // Stores loaded zone data: { zoneId: { group, lighting, title, ... } }
-        let currentLights = [];
-        let threeFont = null; // For 3D text
-        // --- Game State ---
-        let gameState = {}; // Initialized in startGame
-        let currentMessage = ""; // Accumulates messages for UI update
-        let activeTimeouts = []; // Track animation timeouts
-        // --- Materials ---
         const MAT = {
             stone: new THREE.MeshStandardMaterial({ color: 0x777788, roughness: 0.85 }),
-            dark_stone: new THREE.MeshStandardMaterial({ color: 0x444455, roughness: 0.9 }),
             wood: new THREE.MeshStandardMaterial({ color: 0x9F6633, roughness: 0.75 }),
-            dark_wood: new THREE.MeshStandardMaterial({ color: 0x6F4E2D, roughness: 0.8 }),
             leaf: new THREE.MeshStandardMaterial({ color: 0x3E9B4E, roughness: 0.6, side: THREE.DoubleSide }),
             ground: new THREE.MeshStandardMaterial({ color: 0x556B2F, roughness: 0.95 }),
             dirt: new THREE.MeshStandardMaterial({ color: 0x8B5E3C, roughness: 0.9 }),
             grass: new THREE.MeshStandardMaterial({ color: 0x4CB781, roughness: 0.85 }),
             water: new THREE.MeshStandardMaterial({ color: 0x4682B4, roughness: 0.3, transparent: true, opacity: 0.85 }),
-            metal: new THREE.MeshStandardMaterial({ color: 0xaaaaaa, metalness: 0.8, roughness: 0.4 }),
             simple: new THREE.MeshStandardMaterial({ color: 0xaaaaaa, roughness: 0.8 }),
-            text: new THREE.MeshBasicMaterial({ color: 0xffddaa }),
-            // Zone specific themes
-            ruins_stone: new THREE.MeshStandardMaterial({ color: 0x888a8f, roughness: 0.9 }),
-            town_wood: new THREE.MeshStandardMaterial({ color: 0xae8a63, roughness: 0.7 }),
-            town_roof: new THREE.MeshStandardMaterial({ color: 0x8b4513, roughness: 0.8 }),
         };
-        // --- Game Data ---
         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."},
-            "Ancient Coin": {type:"unknown", description:"A worn coin from a forgotten era."}
-        };
-        const enemyData = {
-            'goblin': { name: "Goblin", hp: 8, defense: 11, attackDamage: 2, xp: 15, drops: ["Goblin Ear", "Health Potion"] },
-            'skeleton': { name: "Skeleton", hp: 10, defense: 12, attackDamage: 3, xp: 20, drops: ["Ancient Coin"] },
-            'spider': { name: "Giant Spider", hp: 12, defense: 13, attackDamage: 3, xp: 25, drops: ["Cave Crystal"] }
         };
         const zoneCreators = {};
         const MAP_ROWS = 3;
         const MAP_COLS = 4;
-        // --- Core Functions ---
         function initThreeJS() {
             console.log("initThreeJS started.");
-            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 || 300;
-            const height = sceneContainer.clientHeight || 200;
-            camera = new THREE.PerspectiveCamera(60, width / height, 0.1, 1000);
-            camera.position.set(0, 8, 15); // Start slightly further back/higher
-            renderer = new THREE.WebGLRenderer({ antialias: true });
-            renderer.setSize(width, height);
-            renderer.shadowMap.enabled = true;
-            renderer.shadowMap.type = THREE.PCFSoftShadowMap;
-            sceneContainer.appendChild(renderer.domElement);
-            controls = new OrbitControls(camera, renderer.domElement);
-            controls.enableDamping = true;
-            controls.dampingFactor = 0.1;
-            controls.target.set(0, 1, 0);
-            controls.maxPolarAngle = Math.PI / 2 - 0.05;
-            controls.minDistance = 3;
-            controls.maxDistance = 50;
-            window.addEventListener('resize', onWindowResize, false);
-            renderer.domElement.addEventListener('click', onMouseClick, false);
-            setTimeout(onWindowResize, 100);
-            animate();
-            console.log("initThreeJS finished successfully.");
-        }
-        function loadFontAndStart() {
-             console.log("Loading font...");
-             const loader = new FontLoader();
-             loader.load('https://unpkg.com/[email protected]/examples/fonts/helvetiker_regular.typeface.json', function (font) {
-                 threeFont = font;
-                 console.log("Font loaded.");
-                 startGame();
-             }, undefined, function (error) {
-                 console.error('Font loading failed:', error);
-                 storyTitleElement.textContent = "Font Load Error";
-                 storyContentElement.innerHTML = `<p class="message message-failure">Could not load required font. Combat text disabled.</p>`;
-                 startGame(); // Start anyway, but combat text won't work
-             });
         }
         function onWindowResize() {
              if (!renderer || !camera || !sceneContainer) return;
              const width = sceneContainer.clientWidth || 300;
              const height = sceneContainer.clientHeight || 200;
@@ -200,31 +160,29 @@
                  camera.aspect = width / height;
                  camera.updateProjectionMatrix();
                  renderer.setSize(width, height);
              }
         }
-        function onMouseClick( event ) {
-            // Currently only used for picking up items
-            pickupItem();
-        }
         function animate() {
             requestAnimationFrame(animate);
-            const delta = clock.getDelta();
-            const time = clock.getElapsedTime();
             controls.update();
             // Animate objects within the *currently visible* zone group
             if (gameState.currentZoneId && zoneGroups[gameState.currentZoneId]) {
                  zoneGroups[gameState.currentZoneId].group.traverse(obj => {
-                     if (obj.userData.update) obj.userData.update(time, delta);
                  });
             }
             if (renderer && scene && camera) renderer.render(scene, camera);
         }
-        // --- Geometry/Mesh Helpers ---
         function createMesh(geometry, material, pos = {x:0,y:0,z:0}, rot = {x:0,y:0,z:0}, scale = {x:1,y:1,z:1}) {
              const mesh = new THREE.Mesh(geometry, material);
              mesh.position.set(pos.x, pos.y, pos.z);
@@ -243,30 +201,6 @@
              return ground;
         }
-        // --- Procedural Structure Helpers ---
-        function createTowerSegment(radius = 1, height = 2, material = MAT.stone) {
-            const geo = new THREE.CylinderGeometry(radius, radius, height, 8);
-            return createMesh(geo, material, {y: height/2});
-        }
-        function createWallSection(width = 4, height = 2.5, depth = 0.5, material = MAT.stone) {
-            const geo = new THREE.BoxGeometry(width, height, depth);
-            return createMesh(geo, material, {y: height/2});
-        }
-        function createSimpleHouse(width=3, height=2, depth=4, woodMat=MAT.town_wood, roofMat=MAT.town_roof) {
-             const group = new THREE.Group();
-             const wallGeo = new THREE.BoxGeometry(width, height, depth);
-             const walls = createMesh(wallGeo, woodMat, {y: height/2});
-             group.add(walls);
-             const roofGeo = new THREE.ConeGeometry(Math.max(width, depth) * 0.7, height * 0.6, 4); // Pyramid roof
-             const roof = createMesh(roofGeo, roofMat, {y: height + height*0.3});
-             roof.rotation.y = Math.PI / 4; // Align edges
-             group.add(roof);
-             return group;
-        }
-        // --- Lighting ---
         function setupLighting(type = 'default') {
              console.log(`Setting up lighting for type: ${type}`);
              currentLights.forEach(light => {
@@ -275,14 +209,14 @@
              });
              currentLights = [];
-             let ambientIntensity = 0.4;
-             let dirIntensity = 0.9;
              let dirColor = 0xffffff;
-             let dirPosition = new THREE.Vector3(10, 15, 8);
-             if (type === 'forest') { ambientIntensity = 0.3; dirIntensity = 0.7; dirColor = 0xccffcc; dirPosition = new THREE.Vector3(5, 10, 5); }
-             if (type === 'cave') { ambientIntensity = 0.15; dirIntensity = 0; } // Rely on point light
-             if (type === 'ruins') { ambientIntensity = 0.35; dirIntensity = 0.6; dirColor = 0xaaaaff; dirPosition = new THREE.Vector3(-8, 12, -5); }
              if (type === 'town') { ambientIntensity = 0.5; dirIntensity = 1.0; dirColor = 0xffeedd; dirPosition = new THREE.Vector3(12, 18, 10); }
              const ambientLight = new THREE.AmbientLight(0xffffff, ambientIntensity);
@@ -295,7 +229,7 @@
                  directionalLight.castShadow = true;
                  directionalLight.shadow.mapSize.set(1024, 1024);
                  directionalLight.shadow.camera.near = 0.5; directionalLight.shadow.camera.far = 50;
-                 const sb = 25; // Wider shadow area for larger zones
                  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;
@@ -303,178 +237,57 @@
                  currentLights.push(directionalLight);
              }
               if (type === 'cave') {
-                 const ptLight = new THREE.PointLight(0xffaa55, 1.5, 15, 1.5); // Increased range/decay
                  ptLight.position.set(0, 3, 0);
                  ptLight.castShadow = true;
                  ptLight.shadow.mapSize.set(512, 512);
-                 currentLights.push(ptLight); // Will be added to group later
              }
              console.log(`Lighting setup complete. Lights tracked: ${currentLights.length}`);
         }
-        // --- Zone Creation Functions (Enhanced) ---
         function createFieldZone(zoneId) {
             console.log(`Creating zone: ${zoneId} (Field)`);
             const group = new THREE.Group();
-            group.add(createGround(MAT.grass, 40)); // Larger zone
-            const rockGeo = new THREE.IcosahedronGeometry(0.5 + Math.random()*0.8, 0);
-            for(let i=0; i<8; i++) {
-                 const rock = createMesh(rockGeo, MAT.stone, {x: (Math.random()-0.5)*35, y:0.4, z: (Math.random()-0.5)*35});
-                 rock.rotation.set(Math.random(), Math.random(), Math.random());
                  group.add(rock);
             }
-            // Add a simple floating/bobbing animation to rocks
-            group.children.filter(c=>c.geometry.type === 'IcosahedronGeometry').forEach(rock => {
-                rock.userData.startY = rock.position.y;
-                rock.userData.update = (time) => {
-                    rock.position.y = rock.userData.startY + Math.sin(time * 1.5 + rock.id * 0.5) * 0.1; // Bobbing
-                };
-            });
             group.visible = false;
-            return { group, lighting: 'default', title: "Rolling Fields", entryText: `The wind whispers through the tall grass of zone ${zoneId}. Scattered boulders dot the landscape.`, options: [], zoneId: zoneId };
-        }
-        function createForestZone(zoneId) {
-             console.log(`Creating zone: ${zoneId} (Forest)`);
-             const group = new THREE.Group();
-             group.add(createGround(MAT.ground, 40));
-             const trunkGeo = new THREE.CylinderGeometry(0.2, 0.3, 4 + Math.random()*2, 8);
-             const leafGeo = new THREE.SphereGeometry(1.5 + Math.random(), 8, 6);
-             for(let i=0; i<35; i++) { // Denser forest
-                 const x = (Math.random() - 0.5) * 38;
-                 const z = (Math.random() - 0.5) * 38;
-                 if(Math.sqrt(x*x+z*z) < 1) continue;
-                 const tree = new THREE.Group();
-                 const trunkHeight = 4 + Math.random()*2;
-                 const trunk = createMesh(trunkGeo.clone().scale(1, trunkHeight/4, 1), MAT.wood, {y: trunkHeight/2}); // Scale trunk height
-                 const leaves = createMesh(leafGeo.clone().scale(1+Math.random()*0.3, 1+Math.random()*0.3, 1+Math.random()*0.3), MAT.leaf, {y: trunkHeight + 0.5});
-                 tree.add(trunk); tree.add(leaves);
-                 tree.position.set(x, 0, z);
-                 tree.rotation.y = Math.random() * Math.PI * 2;
-                 // Add subtle sway animation
-                 tree.userData.swaySpeed = 0.1 + Math.random() * 0.1;
-                 tree.userData.swayAmount = 0.005 + Math.random() * 0.005;
-                 tree.userData.update = (time) => {
-                     tree.rotation.z = Math.sin(time * tree.userData.swaySpeed + tree.position.x) * tree.userData.swayAmount;
-                     tree.rotation.x = Math.cos(time * tree.userData.swaySpeed * 0.7 + tree.position.z) * tree.userData.swayAmount;
-                 };
-                 group.add(tree);
-             }
-             group.visible = false;
-             return { group, lighting: 'forest', title: "Deep Forest", entryText: `Ancient trees form a dense canopy overhead in ${zoneId}. Strange sounds echo.`, options: [{text: "Search for Goblin Tracks", action: "triggerCombat", enemy: "goblin"}], zoneId: zoneId };
         }
-        function createCaveZone(zoneId) {
-            console.log(`Creating zone: ${zoneId} (Cave)`);
-            const group = new THREE.Group();
-            group.add(createGround(MAT.stone.clone().set({color: 0x4a4a55}), 25)); // Darker floor
-             const wallGeo = new THREE.SphereGeometry(15, 32, 16, 0, Math.PI*2, 0, Math.PI*0.8); // Larger cave
-             const walls = createMesh(wallGeo, MAT.dark_stone, {y: 5});
-             walls.material.side = THREE.BackSide;
-             group.add(walls);
-             const coneGeo = new THREE.ConeGeometry(0.1 + Math.random()*0.2, 0.8 + Math.random()*1.5, 8); // Stalactites/mites
-             for(let i=0; i<25; i++){
-                 const x = (Math.random()-0.5)*22;
-                 const z = (Math.random()-0.5)*22;
-                 const yUp = 7 + Math.random()*3;
-                 const yDown = 0.5 + Math.random();
-                 if (Math.random() > 0.5) group.add(createMesh(coneGeo.clone(), MAT.dark_stone, {x:x, y:yUp, z:z}, {x:Math.PI})); // Stalactite
-                 if (Math.random() > 0.5) group.add(createMesh(coneGeo.clone(), MAT.dark_stone, {x:x, y:yDown, z:z})); // Stalagmite
-             }
-             // Add glowing crystals
-             const crystalGeo = new THREE.IcosahedronGeometry(0.3 + Math.random()*0.2, 0);
-             for(let i=0; i<5; i++) {
-                 const crystal = createMesh(crystalGeo, MAT.simple.clone().set({color:0xaaaaff, emissive: 0x4444ff, emissiveIntensity: 0.8}),
-                     {x: (Math.random()-0.5)*15, y:0.3 + Math.random()*2, z: (Math.random()-0.5)*15}
-                 );
-                 crystal.userData = { isPickupable: true, itemName: "Cave Crystal", description: "A faintly glowing crystal shard."};
-                 // Add pulsing animation
-                 crystal.userData.baseScale = 1.0;
-                 crystal.userData.update = (time) => {
-                     const scale = crystal.userData.baseScale + Math.sin(time * 2 + crystal.id) * 0.1;
-                     crystal.scale.set(scale, scale, scale);
-                 };
-                 group.add(crystal);
-             }
-             group.visible = false;
-             return { group, lighting: 'cave', title: "Echoing Cave", entryText: `Water drips in the darkness of ${zoneId}. Strange crystals pulse with faint light.`, options: [{text: "Disturb Spider Nest", action: "triggerCombat", enemy: "spider"}], zoneId: zoneId };
-         }
-         function createRuinsZone(zoneId) {
-             console.log(`Creating zone: ${zoneId} (Ruins)`);
-             const group = new THREE.Group();
-             group.add(createGround(MAT.dirt, 35));
-             // Stacked walls/pillars
-             for(let i=0; i<12; i++) {
-                 const stackHeight = Math.floor(1 + Math.random() * 3); // 1 to 3 segments high
-                 const basePos = {x: (Math.random()-0.5)*30, y:0, z: (Math.random()-0.5)*30};
-                 const rotY = Math.random() * Math.PI;
-                 for (let j=0; j<stackHeight; j++) {
-                     const width = 1 + Math.random();
-                     const height = 0.8 + Math.random() * 0.4;
-                     const depth = 1 + Math.random();
-                     const segmentGeo = new THREE.BoxGeometry(width, height, depth);
-                     const segment = createMesh(segmentGeo, MAT.ruins_stone,
-                         {x: basePos.x, y: basePos.y + height/2, z: basePos.z},
-                         {x:(Math.random()-0.5)*0.1, y: rotY + (Math.random()-0.5)*0.1, z:(Math.random()-0.5)*0.1} // Slight random tilt
-                     );
-                     group.add(segment);
-                     basePos.y += height; // Move up for next segment
-                 }
-             }
-             group.visible = false;
-             return { group, lighting: 'ruins', title: "Ancient Ruins", entryText: `The wind howls through the skeletal remains of ${zoneId}. Broken stones lie everywhere.`, options: [{text: "Disturb Grave", action: "triggerCombat", enemy: "skeleton"}], zoneId: zoneId };
-         }
-         function createTownZone(zoneId) { // New Zone Type
-             console.log(`Creating zone: ${zoneId} (Town)`);
-             const group = new THREE.Group();
-             group.add(createGround(MAT.dirt.clone().set({color: 0xaa8866}), 30)); // Packed earth/cobble look
-             for(let i=0; i<10; i++) {
-                 const house = createSimpleHouse(
-                     2 + Math.random()*2, // width
-                     1.8 + Math.random()*0.5, // height
-                     3 + Math.random()*2, // depth
-                     MAT.town_wood, MAT.town_roof
-                 );
-                 house.position.set((Math.random()-0.5)*25, 0, (Math.random()-0.5)*25);
-                 house.rotation.y = Math.floor(Math.random()*4) * Math.PI / 2 + (Math.random()-0.5)*0.1; // Align roughly to grid + tilt
-                 group.add(house);
-             }
-             // Add a central well (example of combining primitives)
-             const wellBaseGeo = new THREE.CylinderGeometry(0.8, 0.8, 0.5, 12);
-             const wellBase = createMesh(wellBaseGeo, MAT.stone, {y: 0.25});
-             group.add(wellBase);
-             const wellWallGeo = new THREE.CylinderGeometry(0.7, 0.6, 1.0, 12);
-             const wellWall = createMesh(wellWallGeo, MAT.stone, {y: 0.5 + 0.5});
-             group.add(wellWall);
-             group.visible = false;
-             return { group, lighting: 'town', title: "Small Settlement", entryText: `You arrive at the small settlement in ${zoneId}. Smoke curls from a few chimneys.`, options: [{text:"Talk to Villager (TBC)", action:"talk"}], zoneId: zoneId };
-         }
         function getZoneId(row, col) { return `zone_${row}_${col}`; }
         function populateZoneCreators() {
             console.log("Populating zone creators...");
-            // zoneCreators = {}; // Removed const error
             for (let r = 0; r < MAP_ROWS; r++) {
                 for (let c = 0; c < MAP_COLS; c++) {
                     const zoneId = getZoneId(r, c);
                     let creatorFunc;
-                    // More varied pattern
-                    if (r === 0 && c === 0) creatorFunc = createCaveZone;
-                    else if (r === 0) creatorFunc = createForestZone;
-                    else if (r === 1 && c === 1) creatorFunc = createTownZone; // Add town
-                    else if (r === 1 && c === 3) creatorFunc = createRuinsZone;
-                    else if (r === 2 && c === 0) creatorFunc = createRuinsZone;
-                    else if (r === 2 && c === 3) creatorFunc = createCaveZone;
-                    else creatorFunc = createFieldZone; // Default to field
                     zoneCreators[zoneId] = () => creatorFunc(zoneId);
                 }
             }
-             console.log(`Zone creators populated with ${Object.keys(zoneCreators).length} entries.`);
         }
         function getZoneNeighbors(zoneId) {
@@ -494,13 +307,12 @@
             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 }, // Added D&D stats
                 inventory: []
             };
             gameState = {
                 currentZoneId: null,
-                character: JSON.parse(JSON.stringify(defaultChar)),
-                combat: null // Reset combat state
             };
             populateZoneCreators();
             zoneGroups = {};
@@ -508,14 +320,13 @@
                  worldGroup.remove(worldGroup.children[0]);
              }
             console.log("Starting new game state:", gameState);
-            transitionToZone(getZoneId(1, 1)); // Start in center
             console.log("startGame finished.");
         }
         function transitionToZone(newZoneId) {
              console.log(`Attempting transition to ${newZoneId}`);
              currentMessage = "";
-             gameState.combat = null; // End combat on zone change
              if (gameState.currentZoneId && zoneGroups[gameState.currentZoneId]) {
                  console.log(`Hiding old zone: ${gameState.currentZoneId}`);
@@ -534,6 +345,7 @@
                  if (creator) {
                     try {
                         zoneInfo = creator();
                         zoneGroups[newZoneId] = zoneInfo;
                         worldGroup.add(zoneInfo.group);
                         zoneInfo.group.visible = true;
@@ -553,19 +365,21 @@
              gameState.currentZoneId = newZoneId;
              setupLighting(zoneInfo.lighting || 'default');
-             // Add tracked point lights to the current zone group
              const currentZoneGroup = zoneInfo.group;
              currentLights.forEach(light => {
-                if (light && light.isPointLight && zoneInfo.lighting === 'cave') { // Only add point lights to caves
                      if(light.parent) light.parent.remove(light);
                      currentZoneGroup.add(light);
                      console.log("Added point light to cave group:", newZoneId);
-                } else if (light && !light.isPointLight && !light.parent) { // Ensure ambient/directional are in main scene
-                    scene.add(light);
                 }
              });
-             camera.position.set(0, 8, 15); // Reset camera view slightly higher
              controls.target.set(0, 1, 0);
              controls.update();
@@ -575,27 +389,30 @@
         function renderCurrentPageUI() {
-            console.log(`renderCurrentPageUI for zone: ${gameState.currentZoneId}`);
             const zoneInfo = zoneGroups[gameState.currentZoneId];
             const zoneId = gameState.currentZoneId;
             if (!storyTitleElement || !storyContentElement || !choicesElement || !statsElement || !inventoryElement || !actionInfoElement) {
                 console.error("Crucial UI element missing!"); return;
             }
             if (!zoneInfo || !zoneInfo.group) {
-                console.error(`No zone info/group for ${zoneId}`);
-                storyTitleElement.textContent = "Error"; storyContentElement.innerHTML = currentMessage + "<p>Cannot render zone data.</p>";
                 choicesElement.innerHTML = `<button class="choice-button" onclick="transitionToZoneWrapper('${getZoneId(1, 1)}')">Return to Start</button>`;
                 updateStatsDisplay(); updateInventoryDisplay(); updateActionInfo(); return;
             }
              storyTitleElement.textContent = zoneInfo.title || "Unknown Zone";
              storyContentElement.innerHTML = currentMessage + (zoneInfo.entryText ? `<p>${zoneInfo.entryText}</p>` : '');
              choicesElement.innerHTML = '';
-             // --- Navigation Buttons (Always Show, Disable if no neighbor) ---
              const neighbors = getZoneNeighbors(zoneId);
              const directions = {'north': 'North', 'south': 'South', 'east': 'East', 'west': 'West'};
              console.log("Adding neighbor buttons:", neighbors);
              for(const dir in directions) {
                   const neighborId = neighbors[dir];
@@ -605,36 +422,25 @@
                   if (neighborId) {
                       button.addEventListener('click', () => transitionToZone(neighborId));
                   } else {
-                      button.disabled = true; // Disable if no neighbor in this direction
                   }
                   choicesElement.appendChild(button);
              }
-             // --- Zone Specific Action Buttons ---
              if (zoneInfo.options && zoneInfo.options.length > 0) {
                  console.log("Adding zone specific options");
                  zoneInfo.options.forEach(option => {
                      const button = document.createElement('button');
                      button.classList.add('choice-button');
-                     if (option.action === 'triggerCombat') { // Style combat buttons differently
-                         button.classList.add('combat-button');
-                     }
                      button.textContent = option.text;
-                     button.addEventListener('click', () => handleZoneAction(option));
                      choicesElement.appendChild(button);
                  });
              }
-             // --- Combat UI ---
-              if (gameState.combat?.active) {
-                 choicesElement.innerHTML += `
-                     <div id="combat-ui">
-                         <p class="message message-combat">Combat vs ${gameState.combat.enemyName}! (Enemy HP: ${gameState.combat.enemyHp})</p>
-                         <button class="choice-button combat-button" onclick="handleCombatAction('attack')">Roll to Attack!</button>
-                     </div>`;
-             }
-             if (choicesElement.innerHTML === '') { // Check if empty after adding everything
                  choicesElement.innerHTML = '<p><i>No exits or actions defined here yet.</i></p>';
              }
@@ -645,45 +451,19 @@
              console.log("renderCurrentPageUI finished.");
         }
-        // Wrapper for potential inline use later (though addEventListener is preferred)
         function transitionToZoneWrapper(zoneId) { transitionToZone(zoneId); }
         window.transitionToZoneWrapper = transitionToZoneWrapper;
-        function handleZoneAction(option) {
-            console.log("Handling zone action:", option);
-            if (option.action === 'triggerCombat' && option.enemy) {
-                startCombat(option.enemy);
-            } else {
-                currentMessage = `<p class="message message-info">Action '${option.action || option.text}' not fully implemented yet.</p>`;
-                renderCurrentPageUI(); // Re-render to show message
-            }
-        }
-        window.handleZoneAction = handleZoneAction; // Make accessible
         function updateStatsDisplay() {
             if (!gameState.character || !statsElement) return;
-            const { hp, maxHp, xp, strength, dexterity, constitution, intelligence, wisdom, charisma } = gameState.character.stats;
             const hpColor = hp / maxHp < 0.3 ? '#f88' : (hp / maxHp < 0.6 ? '#fd5' : '#8f8');
-            // Calculate basic modifiers (D&D style)
-            const strMod = Math.floor((strength - 10) / 2);
-            const dexMod = Math.floor((dexterity - 10) / 2);
-            const conMod = Math.floor((constitution - 10) / 2);
-            const intMod = Math.floor((intelligence - 10) / 2);
-            const wisMod = Math.floor((wisdom - 10) / 2);
-            const chaMod = Math.floor((charisma - 10) / 2);
-            statsElement.innerHTML = `<strong>Stats:</strong>
-                <span style="color:${hpColor}">HP: ${hp}/${maxHp}</span> <span>XP: ${xp}</span><br>
-                <span>Str: ${strength} (${strMod>=0?'+':''}${strMod})</span>
-                <span>Dex: ${dexterity} (${dexMod>=0?'+':''}${dexMod})</span>
-                <span>Con: ${constitution} (${conMod>=0?'+':''}${conMod})</span>
-                <span>Int: ${intelligence} (${intMod>=0?'+':''}${intMod})</span>
-                <span>Wis: ${wisdom} (${wisMod>=0?'+':''}${wisMod})</span>
-                <span>Cha: ${charisma} (${chaMod>=0?'+':''}${chaMod})</span>`;
         }
         function updateInventoryDisplay() {
-             if (!gameState.character || !inventoryElement) return;
              let invHtml = '<strong>Inventory:</strong> ';
              if (gameState.character.inventory.length === 0) {
                  invHtml += '<em>Empty</em>';
@@ -695,207 +475,22 @@
                  });
              }
              inventoryElement.innerHTML = invHtml;
-             // No placement listeners needed now
         }
         function updateActionInfo() {
             if (!actionInfoElement || !gameState ) return;
-            const mode = gameState.combat?.active ? "Combat" : "Explore";
-            actionInfoElement.textContent = `Zone: ${gameState.currentZoneId || 'None'} | Mode: ${mode}`;
-        }
-        // --- Combat & Item Functions ---
-        function startCombat(enemyTypeId) {
-            const enemyBase = enemyData[enemyTypeId];
-            if (!enemyBase) {
-                console.error("Unknown enemy type:", enemyTypeId);
-                currentMessage = `<p class="message message-failure">Error: Unknown enemy encountered!</p>`;
-                renderCurrentPageUI();
-                return;
-            }
-            gameState.combat = {
-                active: true,
-                enemyId: enemyTypeId,
-                enemyName: enemyBase.name,
-                enemyHp: enemyBase.hp,
-                enemyMaxHp: enemyBase.hp, // Store max HP
-                enemyDefense: enemyBase.defense,
-                enemyDamage: enemyBase.attackDamage,
-                enemyXp: enemyBase.xp,
-                enemyDrops: enemyBase.drops || []
-            };
-            currentMessage = `<p class="message message-combat">A wild ${enemyBase.name} appears!</p>`;
-            renderCurrentPageUI();
-        }
-        function handleCombatAction(action) {
-            if (!gameState.combat?.active) return;
-            currentMessage = ""; // Clear previous combat messages
-            if (action === 'attack') {
-                // --- Player Turn ---
-                const roll = Math.floor(Math.random() * 20) + 1;
-                const attackBonus = Math.floor((gameState.character.stats.strength - 10) / 2); // Simple STR mod
-                const totalAttack = roll + attackBonus;
-                const hit = totalAttack >= gameState.combat.enemyDefense;
-                displayDiceRoll(roll, hit); // Show the dice roll visually
-                if (hit) {
-                    const weapon = gameState.character.inventory.find(i => itemsData[i]?.type === 'weapon');
-                    const baseDamage = itemsData[weapon]?.baseDamage || 1; // Use weapon or 1
-                    const damageRoll = Math.max(1, Math.floor(Math.random() * baseDamage) + 1 + attackBonus); // Add STR mod to damage
-                    gameState.combat.enemyHp -= damageRoll;
-                    currentMessage += `<p class="message message-success">You hit the ${gameState.combat.enemyName} for ${damageRoll} damage! (Rolled ${totalAttack} vs AC ${gameState.combat.enemyDefense})</p>`;
-                } else {
-                    currentMessage += `<p class="message message-failure">You missed the ${gameState.combat.enemyName}. (Rolled ${totalAttack} vs AC ${gameState.combat.enemyDefense})</p>`;
-                }
-                // --- Check Enemy Defeat ---
-                if (gameState.combat.enemyHp <= 0) {
-                    currentMessage += `<p class="message message-success"><b>You defeated the ${gameState.combat.enemyName}!</b></p>`;
-                    gameState.character.stats.xp += gameState.combat.enemyXp;
-                    currentMessage += `<p class="message message-info"><em>Gained ${gameState.combat.enemyXp} XP.</em></p>`;
-                    if (gameState.combat.enemyDrops.length > 0) {
-                        const droppedItemName = gameState.combat.enemyDrops[Math.floor(Math.random() * gameState.combat.enemyDrops.length)];
-                        dropItemInZone(droppedItemName, new THREE.Vector3(Math.random()*2-1, 0, Math.random()*2-1));
-                        currentMessage += `<p class="message message-item"><em>The ${gameState.combat.enemyName} dropped a ${droppedItemName}!</em></p>`;
-                    }
-                    gameState.combat = null; // End combat
-                    renderCurrentPageUI(); // Update UI completely
-                    return; // Exit function after enemy defeat
-                }
-                // --- Enemy Turn (if player didn't defeat it) ---
-                const enemyAttackRoll = Math.floor(Math.random() * 20) + 1 + 3; // Enemy bonus = +3
-                const playerDefense = 10 + Math.floor((gameState.character.stats.dexterity - 10) / 2); // Simple AC
-                if (enemyAttackRoll >= playerDefense) {
-                    const enemyDamageDealt = Math.max(1, Math.floor(Math.random() * gameState.combat.enemyDamage) + 1);
-                    gameState.character.stats.hp -= enemyDamageDealt;
-                    currentMessage += `<p class="message message-failure">The ${gameState.combat.enemyName} hits you for ${enemyDamageDealt} damage! (Rolled ${enemyAttackRoll} vs AC ${playerDefense})</p>`;
-                    if (gameState.character.stats.hp <= 0) {
-                        currentMessage += `<p class="message message-failure"><b>You have been defeated!</b></p>`;
-                        gameState.combat = null; // End combat
-                        // TODO: Implement proper game over / respawn
-                        gameState.character.stats.hp = 1; // Temp: reset to 1 hp
-                        transitionToZone(getZoneId(1,1)); // Go back to start
-                        return; // Exit after player defeat
-                    }
-                } else {
-                    currentMessage += `<p class="message message-info">The ${gameState.combat.enemyName} misses you. (Rolled ${enemyAttackRoll} vs AC ${playerDefense})</p>`;
-                }
-                renderCurrentPageUI(); // Update UI after both turns
-            }
-        }
-        window.handleCombatAction = handleCombatAction; // Make accessible
-        function displayDiceRoll(result, success) {
-             if (!threeFont) return; // Can't display if font isn't loaded
-             // Clear previous dice rolls immediately
-             activeTimeouts.forEach(timeoutId => clearTimeout(timeoutId));
-             activeTimeouts = [];
-             worldGroup.children.filter(c => c.userData.isDiceRoll).forEach(c => worldGroup.remove(c));
-             const textGeo = new TextGeometry(result.toString(), { font: threeFont, size: 0.8, height: 0.1, curveSegments: 4 });
-             textGeo.computeBoundingBox();
-             const textWidth = textGeo.boundingBox.max.x - textGeo.boundingBox.min.x;
-             const textMat = MAT.text.clone();
-             textMat.color.setHex(success ? 0x88ff88 : 0xff8888);
-             const textMesh = new THREE.Mesh(textGeo, textMat);
-             textMesh.userData.isDiceRoll = true; // Mark for cleanup
-             const distance = 4; // How far in front of camera
-             const textPos = camera.position.clone().add(camera.getWorldDirection(new THREE.Vector3()).multiplyScalar(distance));
-             textMesh.position.copy(textPos);
-             textMesh.position.y += 1.5; // Higher up
-             textMesh.position.x -= textWidth / 2;
-             textMesh.quaternion.copy(camera.quaternion);
-             worldGroup.add(textMesh); // Add to world group, not scene directly
-             // Animate and remove
-             const duration = 2.0; // seconds
-             const startTime = clock.getElapsedTime();
-             textMesh.userData.startTime = startTime;
-             textMesh.userData.update = (time) => {
-                 const elapsed = time - textMesh.userData.startTime;
-                 if (elapsed >= duration) {
-                     if (textMesh.parent) textMesh.parent.remove(textMesh);
-                     delete textMesh.userData.update;
-                 } else {
-                     textMesh.position.y += 0.01; // Float up slowly
-                     textMesh.material.opacity = 1.0 - (elapsed / duration); // Fade out (requires transparent=true on material)
-                     // textMesh.scale.setScalar(1 + elapsed * 0.5); // Optionally grow
-                 }
-             };
-        }
-        function dropItemInZone(itemName, positionOffset = new THREE.Vector3(0, 0, 0)) {
-            const currentGroup = zoneGroups[gameState.currentZoneId]?.group;
-            if (!currentGroup || !itemsData[itemName]) return;
-            const itemDef = itemsData[itemName];
-            const itemGeo = new THREE.BoxGeometry(0.4, 0.4, 0.4);
-            const itemMat = MAT.simple.clone();
-             if(itemDef.type === 'weapon') itemMat.color.setHex(0xcc6666);
-             else if(itemDef.type === 'consumable') itemMat.color.setHex(0xcc9966);
-             else if(itemDef.type === 'quest') itemMat.color.setHex(0xcccc66);
-             else itemMat.color.setHex(0xaaaaee);
-            const dropPos = new THREE.Vector3(positionOffset.x, 0.2, positionOffset.z);
-            const droppedMesh = createMesh(itemGeo, itemMat, dropPos);
-            droppedMesh.userData = { isPickupable: true, itemName: itemName, description: `Dropped ${itemName}` };
-            currentGroup.add(droppedMesh);
-            console.log(`Dropped ${itemName} in zone ${gameState.currentZoneId}`);
         }
-        function pickupItem() {
-            if (gameState.combat?.active) return; // No pickup during combat
-            raycaster.setFromCamera(mouse, camera);
-            const currentGroup = zoneGroups[gameState.currentZoneId]?.group;
-            if (!currentGroup) return;
-            const pickupables = [];
-            currentGroup.traverseVisible(child => {
-                if (child.userData.isPickupable) pickupables.push(child);
-            });
-            const intersects = raycaster.intersectObjects(pickupables, false);
-            if (intersects.length > 0) {
-                 const clickedObject = intersects[0].object;
-                 const itemName = clickedObject.userData.itemName;
-                 if (itemName && itemsData[itemName]) {
-                      console.log(`Picked up: ${itemName}`);
-                      currentMessage = `<p class="message message-item"><em>Picked up: ${itemName}</em></p>`;
-                      if (!gameState.character.inventory.includes(itemName)) {
-                           gameState.character.inventory.push(itemName);
-                       } else {
-                           currentMessage += `<p class="message message-info"><em>(Cannot carry more ${itemName})</em></p>`;
-                       }
-                       clickedObject.visible = false;
-                       clickedObject.userData.isPickupable = false;
-                       // Consider removing object fully: clickedObject.parent.remove(clickedObject);
-                       renderCurrentPageUI();
-                  }
-             }
-        }
-        // --- Initialization ---
         document.addEventListener('DOMContentLoaded', () => {
-             console.log("DOM Ready - Initializing World Grid + Interaction.");
              try {
                  initThreeJS();
                  if (!scene || !camera || !renderer) throw new Error("Three.js failed to initialize.");
-                 loadFontAndStart(); // Load font, then start game
-                 console.log("Initialization sequence started.");
              } catch (error) {
                  console.error("Initialization failed:", error);
                  storyTitleElement.textContent = "Initialization Error";

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>World Grid Test (Animation Fix)</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; }
         #scene-container { flex-grow: 3; position: relative; border-right: 2px solid #444; min-width: 250px; background-color: #000; height: 100%; box-sizing: border-box; overflow: hidden; cursor: default; }
         #ui-container { flex-grow: 2; padding: 25px; overflow-y: auto; background-color: #2b2b2b; min-width: 320px; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; }
         #scene-container canvas { display: block; }
         #story-title { color: #f0c060; margin: 0 0 15px 0; padding-bottom: 10px; border-bottom: 1px solid #555; font-size: 1.6em; text-shadow: 1px 1px 1px #000; }
         #story-content { margin-bottom: 25px; line-height: 1.7; flex-grow: 1; font-size: 1.1em; }
         #stats-inventory-container { margin-bottom: 25px; padding: 15px; border: 1px solid #444; border-radius: 4px; background-color: #333; font-size: 0.95em; }
         #stats-display, #inventory-display { margin-bottom: 10px; line-height: 1.8; }
+        #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>
         </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">HP: ?/? | XP: ?</div>
+                <div id="inventory-display">Inventory: Empty</div>
             </div>
             <div id="choices-container">
                 <h3>What will you do?</h3>
     <script type="module">
         import * as THREE from 'three';
         import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
         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 inventoryElement = document.getElementById('inventory-display');
         const actionInfoElement = document.getElementById('action-info');
+        console.log("DOM elements obtained.");
+        let scene, camera, renderer, clock, controls;
+        let worldGroup = null;
+        let zoneGroups = {};
+        let currentMessage = "";
+        let currentLights = [];
         const MAT = {
             stone: new THREE.MeshStandardMaterial({ color: 0x777788, roughness: 0.85 }),
             wood: new THREE.MeshStandardMaterial({ color: 0x9F6633, roughness: 0.75 }),
             leaf: new THREE.MeshStandardMaterial({ color: 0x3E9B4E, roughness: 0.6, side: THREE.DoubleSide }),
             ground: new THREE.MeshStandardMaterial({ color: 0x556B2F, roughness: 0.95 }),
             dirt: new THREE.MeshStandardMaterial({ color: 0x8B5E3C, roughness: 0.9 }),
             grass: new THREE.MeshStandardMaterial({ color: 0x4CB781, roughness: 0.85 }),
             water: new THREE.MeshStandardMaterial({ color: 0x4682B4, roughness: 0.3, transparent: true, opacity: 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."},
+            "Rock": {type:"unknown", description:"A simple rock."}
         };
         const zoneCreators = {};
         const MAP_ROWS = 3;
         const MAP_COLS = 4;
         function initThreeJS() {
             console.log("initThreeJS started.");
+            try {
+                scene = new THREE.Scene();
+                scene.background = new THREE.Color(0x1a1a1a);
+                clock = new THREE.Clock();
+                worldGroup = new THREE.Group();
+                scene.add(worldGroup);
+                console.log("Scene and worldGroup created.");
+                const width = sceneContainer.clientWidth || 300;
+                const height = sceneContainer.clientHeight || 200;
+                console.log(`Renderer dimensions: ${width}x${height}`);
+                camera = new THREE.PerspectiveCamera(60, width / height, 0.1, 1000);
+                camera.position.set(0, 6, 12);
+                camera.lookAt(0, 1, 0);
+                console.log("Camera created.");
+                renderer = new THREE.WebGLRenderer({ antialias: true });
+                renderer.setSize(width, height);
+                renderer.shadowMap.enabled = true;
+                renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+                sceneContainer.appendChild(renderer.domElement);
+                console.log("Renderer created and appended.");
+                controls = new OrbitControls(camera, renderer.domElement);
+                controls.enableDamping = true;
+                controls.dampingFactor = 0.1;
+                controls.target.set(0, 1, 0);
+                controls.maxPolarAngle = Math.PI / 2 - 0.05;
+                controls.minDistance = 3;
+                controls.maxDistance = 50;
+                 console.log("OrbitControls initialized.");
+                window.addEventListener('resize', onWindowResize, false);
+                setTimeout(onWindowResize, 100);
+                animate();
+                console.log("initThreeJS finished successfully.");
+            } catch (error) {
+                 console.error("Error during initThreeJS:", error);
+                 throw error;
+            }
         }
         function onWindowResize() {
+             console.log("onWindowResize called.");
              if (!renderer || !camera || !sceneContainer) return;
              const width = sceneContainer.clientWidth || 300;
              const height = sceneContainer.clientHeight || 200;
                  camera.aspect = width / height;
                  camera.updateProjectionMatrix();
                  renderer.setSize(width, height);
+                 console.log(`Resized renderer to ${width}x${height}`);
+             } else {
+                 console.warn("Skipping resize, zero dimensions detected.");
              }
         }
+        let frameCount = 0;
         function animate() {
+            frameCount++;
             requestAnimationFrame(animate);
             controls.update();
             // Animate objects within the *currently visible* zone group
             if (gameState.currentZoneId && zoneGroups[gameState.currentZoneId]) {
                  zoneGroups[gameState.currentZoneId].group.traverse(obj => {
+                     if (obj.userData.update) obj.userData.update(clock.elapsedTime, clock.getDelta()); // Pass time & delta
                  });
             }
             if (renderer && scene && camera) renderer.render(scene, camera);
         }
         function createMesh(geometry, material, pos = {x:0,y:0,z:0}, rot = {x:0,y:0,z:0}, scale = {x:1,y:1,z:1}) {
              const mesh = new THREE.Mesh(geometry, material);
              mesh.position.set(pos.x, pos.y, pos.z);
              return ground;
         }
         function setupLighting(type = 'default') {
              console.log(`Setting up lighting for type: ${type}`);
              currentLights.forEach(light => {
              });
              currentLights = [];
+             let ambientIntensity = 0.6;
+             let dirIntensity = 1.0;
              let dirColor = 0xffffff;
+             let dirPosition = new THREE.Vector3(5, 10, 7);
+             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; }
+             if (type === 'ruins') { ambientIntensity = 0.4; dirIntensity = 0.7; dirColor = 0xaaaaff; dirPosition = new THREE.Vector3(-8, 12, -5); }
              if (type === 'town') { ambientIntensity = 0.5; dirIntensity = 1.0; dirColor = 0xffeedd; dirPosition = new THREE.Vector3(12, 18, 10); }
              const ambientLight = new THREE.AmbientLight(0xffffff, ambientIntensity);
                  directionalLight.castShadow = true;
                  directionalLight.shadow.mapSize.set(1024, 1024);
                  directionalLight.shadow.camera.near = 0.5; directionalLight.shadow.camera.far = 50;
+                 const sb = 25;
                  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;
                  currentLights.push(directionalLight);
              }
               if (type === 'cave') {
+                 const ptLight = new THREE.PointLight(0xffaa55, 1.5, 15, 1.5);
                  ptLight.position.set(0, 3, 0);
                  ptLight.castShadow = true;
                  ptLight.shadow.mapSize.set(512, 512);
+                 currentLights.push(ptLight);
              }
              console.log(`Lighting setup complete. Lights tracked: ${currentLights.length}`);
         }
+        // --- Zone Creation Functions ---
         function createFieldZone(zoneId) {
             console.log(`Creating zone: ${zoneId} (Field)`);
             const group = new THREE.Group();
+            group.add(createGround(MAT.grass, 30));
+            const rockGeo = new THREE.IcosahedronGeometry(0.8, 0); // Simpler rock geometry
+            for(let i=0; i<8; i++) { // Loop index 'i' is available here
+                 const rock = createMesh(rockGeo, MAT.stone, {x: (Math.random()-0.5)*25, y:0.4, z: (Math.random()-0.5)*25});
+                 rock.rotation.set(Math.random()*0.5, Math.random() * Math.PI * 2, Math.random()*0.5); // Random rotation
+                 rock.userData = { isPickupable: false, itemName: "Rock", description: "A field rock." }; // Initially not pickupable
                  group.add(rock);
+                 // Add animation using index 'i' for offset
+                 rock.userData.startY = rock.position.y;
+                 rock.userData.update = (time) => {
+                     // Use loop index 'i' for phase offset - THIS IS THE FIX
+                     rock.position.y = rock.userData.startY + Math.sin(time * 1.5 + i * 0.5) * 0.1;
+                 };
             }
             group.visible = false;
+            return { group, lighting: 'default', title: "Open Field", entryText: `You are in ${zoneId}. It's grassy. Boulders bob gently.`, options: [], zoneId: zoneId };
         }
+         // Add other create...Zone functions here (Forest, Cave, Ruins, Town etc.) - using the corrected animation logic if needed.
+         function createForestZone(zoneId) { return createFieldZone(zoneId); } // Placeholder uses Field for now
+         function createCaveZone(zoneId) { return createFieldZone(zoneId); }   // Placeholder uses Field for now
+         function createRuinsZone(zoneId) { return createFieldZone(zoneId); }  // Placeholder uses Field for now
+         function createTownZone(zoneId) { return createFieldZone(zoneId); }   // Placeholder uses Field for now
         function getZoneId(row, col) { return `zone_${row}_${col}`; }
         function populateZoneCreators() {
             console.log("Populating zone creators...");
             for (let r = 0; r < MAP_ROWS; r++) {
                 for (let c = 0; c < MAP_COLS; c++) {
                     const zoneId = getZoneId(r, c);
                     let creatorFunc;
+                    // Force FieldZone for all to ensure stability first
+                    creatorFunc = createFieldZone;
                     zoneCreators[zoneId] = () => creatorFunc(zoneId);
                 }
             }
+             console.log(`Zone creators populated with ${Object.keys(zoneCreators).length} entries (all FieldZone for debug).`);
         }
         function getZoneNeighbors(zoneId) {
             console.log("startGame called.");
             const defaultChar = {
                 name: "Player",
+                stats: { hp: 20, maxHp: 20, xp: 0 },
                 inventory: []
             };
             gameState = {
                 currentZoneId: null,
+                character: JSON.parse(JSON.stringify(defaultChar))
             };
             populateZoneCreators();
             zoneGroups = {};
                  worldGroup.remove(worldGroup.children[0]);
              }
             console.log("Starting new game state:", gameState);
+            transitionToZone(getZoneId(1, 1));
             console.log("startGame finished.");
         }
         function transitionToZone(newZoneId) {
              console.log(`Attempting transition to ${newZoneId}`);
              currentMessage = "";
              if (gameState.currentZoneId && zoneGroups[gameState.currentZoneId]) {
                  console.log(`Hiding old zone: ${gameState.currentZoneId}`);
                  if (creator) {
                     try {
                         zoneInfo = creator();
+                        if (!zoneInfo || !zoneInfo.group) throw new Error("Creator function did not return valid zone info object with group.");
                         zoneGroups[newZoneId] = zoneInfo;
                         worldGroup.add(zoneInfo.group);
                         zoneInfo.group.visible = true;
              gameState.currentZoneId = newZoneId;
              setupLighting(zoneInfo.lighting || 'default');
              const currentZoneGroup = zoneInfo.group;
              currentLights.forEach(light => {
+                if (light && light.isPointLight && zoneInfo.lighting === 'cave') {
                      if(light.parent) light.parent.remove(light);
                      currentZoneGroup.add(light);
                      console.log("Added point light to cave group:", newZoneId);
+                } else if (light && !light.isPointLight && light.parent !== scene) {
+                    if(light.parent) light.parent.remove(light); // Remove from other groups
+                    scene.add(light); // Add to main scene
+                } else if (light && !light.isPointLight && !light.parent) {
+                    scene.add(light); // Ensure it's in the scene if it wasn't attached
                 }
              });
+             camera.position.set(0, 6, 12);
              controls.target.set(0, 1, 0);
              controls.update();
         function renderCurrentPageUI() {
+            console.log(`renderCurrentPageUI called for zone: ${gameState.currentZoneId}`);
             const zoneInfo = zoneGroups[gameState.currentZoneId];
             const zoneId = gameState.currentZoneId;
             if (!storyTitleElement || !storyContentElement || !choicesElement || !statsElement || !inventoryElement || !actionInfoElement) {
                 console.error("Crucial UI element missing!"); return;
             }
+            // Added check for zoneInfo.group
             if (!zoneInfo || !zoneInfo.group) {
+                console.error(`No zone info or group loaded for ${zoneId}`);
+                storyTitleElement.textContent = "Error";
+                storyContentElement.innerHTML = currentMessage + "<p>Cannot render current zone data.</p>";
                 choicesElement.innerHTML = `<button class="choice-button" onclick="transitionToZoneWrapper('${getZoneId(1, 1)}')">Return to Start</button>`;
                 updateStatsDisplay(); updateInventoryDisplay(); updateActionInfo(); return;
             }
+            console.log(`Rendering UI for zone ${zoneId} with title "${zoneInfo.title}"`);
              storyTitleElement.textContent = zoneInfo.title || "Unknown Zone";
              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'};
+             let addedChoices = 0;
              console.log("Adding neighbor buttons:", neighbors);
              for(const dir in directions) {
                   const neighborId = neighbors[dir];
                   if (neighborId) {
                       button.addEventListener('click', () => transitionToZone(neighborId));
                   } else {
+                      button.disabled = true;
                   }
                   choicesElement.appendChild(button);
+                  addedChoices++; // Count even disabled buttons for layout
              }
              if (zoneInfo.options && zoneInfo.options.length > 0) {
                  console.log("Adding zone specific options");
                  zoneInfo.options.forEach(option => {
                      const button = document.createElement('button');
                      button.classList.add('choice-button');
                      button.textContent = option.text;
+                     button.addEventListener('click', () => console.log("Zone action TBC:", option.action));
                      choicesElement.appendChild(button);
+                     addedChoices++;
                  });
              }
+             if (addedChoices === 0 && choicesElement.innerHTML === '') {
                  choicesElement.innerHTML = '<p><i>No exits or actions defined here yet.</i></p>';
              }
              console.log("renderCurrentPageUI finished.");
         }
         function transitionToZoneWrapper(zoneId) { transitionToZone(zoneId); }
         window.transitionToZoneWrapper = transitionToZoneWrapper;
         function updateStatsDisplay() {
             if (!gameState.character || !statsElement) return;
+            const { hp, maxHp, xp } = gameState.character.stats;
             const hpColor = hp / maxHp < 0.3 ? '#f88' : (hp / maxHp < 0.6 ? '#fd5' : '#8f8');
+            statsElement.innerHTML = `<strong>Stats:</strong> <span style="color:${hpColor}">HP: ${hp}/${maxHp}</span> <span>XP: ${xp}</span>`;
         }
         function updateInventoryDisplay() {
+            if (!gameState.character || !inventoryElement) return;
              let invHtml = '<strong>Inventory:</strong> ';
              if (gameState.character.inventory.length === 0) {
                  invHtml += '<em>Empty</em>';
                  });
              }
              inventoryElement.innerHTML = invHtml;
         }
         function updateActionInfo() {
             if (!actionInfoElement || !gameState ) return;
+            actionInfoElement.textContent = `Zone: ${gameState.currentZoneId || 'None'} | Mode: Explore`;
         }
+        function pickupItem() { console.log("Pickup 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(); // Start game directly
+                 console.log("Game world initialization sequence complete.");
              } catch (error) {
                  console.error("Initialization failed:", error);
                  storyTitleElement.textContent = "Initialization Error";