Spaces:

awacke1
/

ChooseYourOwnAdventure2

Running

App Files Files Community

awacke1 commited on Apr 28

Commit

f22aa2f

verified ·

1 Parent(s): b3811d9

Create index.html

Browse files

Files changed (1) hide show

index.html +733 -0

index.html ADDED Viewed

	@@ -0,0 +1,733 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Procedural World Grid Combat</title>
+    <style>
+        /* Base styles from previous version */
+        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: crosshair; }
+        #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 { display: block; width: 100%; padding: 12px 15px; margin-bottom: 0; background-color: #555; color: #eee; border: 1px solid #777; border-radius: 4px; cursor: pointer; text-align: left; font-family: 'Courier New', monospace; font-size: 1.05em; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.1s; box-sizing: border-box; }
+        .choice-button:hover:not(:disabled) { background-color: #e0b050; color: #111; border-color: #c89040; box-shadow: 0 0 5px rgba(255, 200, 100, 0.5); }
+        .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); }
+        .message-success { color: #8f8; border-left-color: #4a4; }
+        .message-failure { color: #f88; border-left-color: #a44; }
+        .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;}
+        #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;} /* Always visible */
+        #combat-ui { margin-top: 15px; padding-top: 15px; border-top: 1px dashed #666; }
+        .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;}
+    </style>
+</head>
+<body>
+    <div id="game-container">
+        <div id="scene-container">
+             <div id="action-info">Mode: Explore</div>
+        </div>
+        <div id="ui-container">
+            <h2 id="story-title">World Initializing...</h2>
+            <div id="story-content"><p>Establishing reality...</p></div>
+            <div id="stats-inventory-container">
+                <div id="stats-display"></div>
+                <div id="inventory-display"></div>
+            </div>
+            <div id="choices-container">
+                <h3>What will you do?</h3>
+                <div id="choices"></div>
+            </div>
+        </div>
+    </div>
+    <script type="importmap">
+        { "imports": {
+                "three": "https://unpkg.com/[email protected]/build/three.module.js",
+                "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
+        }}
+    </script>
+    <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';
+        const sceneContainer = document.getElementById('scene-container');
+        const storyTitleElement = document.getElementById('story-title');
+        const storyContentElement = document.getElementById('story-content');
+        const choicesElement = document.getElementById('choices');
+        const statsElement = document.getElementById('stats-display');
+        const inventoryElement = document.getElementById('inventory-display');
+        const actionInfoElement = document.getElementById('action-info');
+        let scene, camera, renderer, clock, controls, raycaster, mouse;
+        let worldGroup = null;
+        let locationGroups = {}; // { zoneId: { group: THREE.Group, data: zoneData } }
+        let currentMessage = "";
+        let currentLights = [];
+        let threeFont = null; // To store loaded font
+        const MAT = {
+            stone: new THREE.MeshStandardMaterial({ color: 0x777788, roughness: 0.85, metalness: 0.1 }),
+            wood: new THREE.MeshStandardMaterial({ color: 0x9F6633, roughness: 0.75, metalness: 0 }),
+            leaf: new THREE.MeshStandardMaterial({ color: 0x3E9B4E, roughness: 0.6, metalness: 0, side: THREE.DoubleSide }),
+            ground: new THREE.MeshStandardMaterial({ color: 0x556B2F, roughness: 0.95, metalness: 0 }),
+            metal: new THREE.MeshStandardMaterial({ color: 0xaaaaaa, metalness: 0.85, roughness: 0.35 }),
+            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, metalness: 0.2, transparent: true, opacity: 0.85 }),
+            error: new THREE.MeshStandardMaterial({ color: 0xff3300, roughness: 0.5, emissive: 0x551100 }),
+            gameOver: new THREE.MeshStandardMaterial({ color: 0xaa0000, roughness: 0.6, metalness: 0.2, emissive: 0x220000 }),
+            simple: new THREE.MeshStandardMaterial({ color: 0xaaaaaa, roughness: 0.8 }),
+            pickupHighlight: new THREE.MeshBasicMaterial({ color: 0xffff00, wireframe: true, depthTest: false }),
+            dice: new THREE.MeshStandardMaterial({ color: 0xeeeeff, roughness: 0.2, metalness: 0.1 }),
+            text: new THREE.MeshBasicMaterial({ color: 0xffddaa }),
+        };
+        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 enemyData = {
+            'goblin': { name: "Goblin", hp: 8, defense: 11, attackDamage: 2, xp: 15, drops: ["Goblin Ear", "Health Potion"] },
+            'spider': { name: "Giant Spider", hp: 12, defense: 13, attackDamage: 3, xp: 25, drops: ["Cave Crystal"] }
+        };
+        // --- Game State Variable ---
+        let gameState = {}; // Initialized later
+        // --- Core Functions ---
+        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, 5, 10);
+            renderer = new THREE.WebGLRenderer({ antialias: true });
+            renderer.setSize(width, height);
+            renderer.shadowMap.enabled = true;
+            renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+            renderer.toneMapping = THREE.ACESFilmicToneMapping;
+            renderer.outputColorSpace = THREE.SRGBColorSpace;
+            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;
+            window.addEventListener('resize', onWindowResize, false);
+            renderer.domElement.addEventListener('mousemove', onMouseMove, false);
+            renderer.domElement.addEventListener('click', onMouseClick, false);
+            setTimeout(onWindowResize, 50);
+            animate();
+        }
+        function loadFontAndStart() {
+             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(); // Start game only after font is loaded
+             }, undefined, function (error) {
+                 console.error('Font loading failed:', error);
+                 storyTitleElement.textContent = "Font Load Error";
+                 storyContentElement.innerHTML = `<p style="color:red;">Could not load required font.</p>`;
+                 // Optionally try to start without font features or show a permanent error
+             });
+        }
+        function onWindowResize() {
+             if (!renderer || !camera || !sceneContainer) return;
+             const width = sceneContainer.clientWidth || 1;
+             const height = sceneContainer.clientHeight || 1;
+             camera.aspect = width / height;
+             camera.updateProjectionMatrix();
+             renderer.setSize(width, height);
+        }
+        function onMouseMove( event ) {
+            const rect = renderer.domElement.getBoundingClientRect();
+            mouse.x = ( (event.clientX - rect.left) / rect.width ) * 2 - 1;
+            mouse.y = - ( (event.clientY - rect.top) / rect.height ) * 2 + 1;
+        }
+        function onMouseClick( event ) {
+            // Click interaction is now primarily for picking up items
+            pickupItem();
+        }
+        function animate() {
+            requestAnimationFrame(animate);
+            const delta = clock.getDelta();
+            const time = clock.getElapsedTime();
+            controls.update();
+            worldGroup.traverse(obj => { if (obj.userData.update) obj.userData.update(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);
+             mesh.rotation.set(rot.x, rot.y, rot.z);
+             mesh.scale.set(scale.x, scale.y, scale.z);
+             mesh.castShadow = true; mesh.receiveShadow = true;
+             return mesh;
+         }
+        function createGround(material = MAT.ground, size = 20) {
+             const geo = new THREE.PlaneGeometry(size, size);
+             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);
+             });
+             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);
+             } else if (type === 'cave') {
+                  ambientIntensity = 0.1; dirIntensity = 0;
+                  const ptLight = new THREE.PointLight(0xffaa55, 1.5, 12, 1);
+                  ptLight.position.set(0, 1.5, 1);
+                  ptLight.castShadow = true;
+                  ptLight.shadow.mapSize.set(512, 512);
+                  scene.add(ptLight); currentLights.push(ptLight);
+             } else if (type === 'ruins') {
+                 ambientIntensity = 0.25; dirIntensity = 0.6; dirColor = 0xaaaaff; dirPosition = new THREE.Vector3(-8, 12, -5);
+             } else if (type === 'gameover') {
+                  ambientIntensity = 0.1; dirIntensity = 0.4; dirColor = 0xff6666;
+             }
+             const ambientLight = new THREE.AmbientLight(0xffffff, ambientIntensity);
+             scene.add(ambientLight);
+             currentLights.push(ambientLight);
+             if (dirIntensity > 0) {
+                 const directionalLight = new THREE.DirectionalLight(dirColor, dirIntensity);
+                 directionalLight.position.copy(dirPosition);
+                 directionalLight.castShadow = true;
+                 directionalLight.shadow.mapSize.set(1024, 1024);
+                 directionalLight.shadow.camera.near = 0.5;
+                 directionalLight.shadow.camera.far = 50;
+                 const shadowBounds = 20;
+                 directionalLight.shadow.camera.left = -shadowBounds;
+                 directionalLight.shadow.camera.right = shadowBounds;
+                 directionalLight.shadow.camera.top = shadowBounds;
+                 directionalLight.shadow.camera.bottom = -shadowBounds;
+                 directionalLight.shadow.bias = -0.0005;
+                 scene.add(directionalLight);
+                 currentLights.push(directionalLight);
+             }
+        }
+        // --- Zone Creation Functions ---
+        function createFieldZone(zoneId) {
+            const group = new THREE.Group();
+            group.add(createGround(MAT.grass, 30));
+            // Add some rocks or flowers
+            const rockGeo = new THREE.IcosahedronGeometry(0.5 + Math.random()*0.5, 0);
+            for(let i=0; i<5; i++) {
+                 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', entryText: "You stand in an open field.", zoneId: zoneId };
+        }
+        function createForestZone(zoneId) {
+             const group = new THREE.Group();
+             group.add(createGround(MAT.ground, 30));
+             const trunkGeo = new THREE.CylinderGeometry(0.2, 0.3, 4, 8);
+             const leafGeo = new THREE.SphereGeometry(1.5, 8, 6);
+             for(let i=0; i<25; i++) { // Denser forest
+                 const x = (Math.random() - 0.5) * 28;
+                 const z = (Math.random() - 0.5) * 28;
+                 if(Math.sqrt(x*x+z*z) < 1) continue;
+                 const tree = new THREE.Group();
+                 const trunk = createMesh(trunkGeo, MAT.wood, {y: 2});
+                 const leaves = createMesh(leafGeo, MAT.leaf, {y: 4.5});
+                 tree.add(trunk); tree.add(leaves);
+                 tree.position.set(x, 0, z);
+                 tree.rotation.y = Math.random() * Math.PI * 2;
+                 group.add(tree);
+             }
+             group.visible = false;
+             return { group, lighting: 'forest', entryText: "You are surrounded by trees.", zoneId: zoneId };
+        }
+        function createCaveZone(zoneId) {
+            const group = new THREE.Group();
+            group.add(createGround(MAT.stone.clone().set({color: 0x555560}), 18));
+             const wallGeo = new THREE.SphereGeometry(12, 32, 16, 0, Math.PI*2, 0, Math.PI*0.7);
+             const walls = createMesh(wallGeo, MAT.stone, {y: 4});
+             walls.material.side = THREE.BackSide;
+             group.add(walls);
+             const coneGeo = new THREE.ConeGeometry(0.2, 1.0, 8);
+             for(let i=0; i<15; i++){
+                 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);
+             }
+             group.visible = false;
+             return { group, lighting: 'cave', entryText: "It's dark and damp in here.", zoneId: zoneId };
+         }
+         function createRuinsZone(zoneId) {
+             const group = new THREE.Group();
+             group.add(createGround(MAT.dirt, 25));
+             const wallGeo = new THREE.BoxGeometry(0.5, 2, 3);
+             for(let i=0; i<8; i++) {
+                 const wall = createMesh(wallGeo, MAT.stone,
+                     {x: (Math.random()-0.5)*20, y:1, z: (Math.random()-0.5)*20},
+                     {y: Math.random() * Math.PI}
+                 );
+                 wall.scale.y = 0.5 + Math.random() * 0.8; // Vary height
+                 wall.rotation.x = (Math.random()-0.5)*0.1; // Tilt slightly
+                 wall.rotation.z = (Math.random()-0.5)*0.1;
+                 group.add(wall);
+             }
+             group.visible = false;
+             return { group, lighting: 'ruins', entryText: "Crumbling walls stand sentinel.", zoneId: zoneId };
+         }
+        // --- Map Grid & Zone Definitions ---
+        const MAP_ROWS = 3;
+        const MAP_COLS = 4;
+        const zoneData = {}; // Will be populated: { "zone_0_0": { group, lighting, entryText, zoneId }, ... }
+        function getZoneId(row, col) { return `zone_${row}_${col}`; }
+        function populateZoneData() {
+            for (let r = 0; r < MAP_ROWS; r++) {
+                for (let c = 0; c < MAP_COLS; c++) {
+                    const zoneId = getZoneId(r, c);
+                    let zoneType;
+                    // Simple pattern for variety, expand this logic
+                    if (r === 0) zoneType = 'forest';
+                    else if (r === 1 && c % 2 === 0) zoneType = 'field';
+                    else if (r === 1 && c % 2 !== 0) zoneType = 'ruins';
+                    else zoneType = 'cave';
+                    let creatorFunc;
+                    switch(zoneType) {
+                        case 'forest': creatorFunc = createForestZone; break;
+                        case 'cave': creatorFunc = createCaveZone; break;
+                        case 'ruins': creatorFunc = createRuinsZone; break;
+                        case 'field':
+                        default: creatorFunc = createFieldZone; break;
+                    }
+                    locationData[zoneId] = { creator: () => creatorFunc(zoneId) }; // Store creator with ID
+                }
+            }
+            console.log("Zone data populated:", Object.keys(locationData));
+        }
+        function getZoneNeighbors(zoneId) {
+            const parts = zoneId.split('_');
+            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;
+        }
+        // --- Game State Initialization ---
+        function startGame() {
+            const defaultChar = {
+                name: "Player",
+                stats: { hp: 20, maxHp: 20, xp: 0, strength: 10, dexterity: 10 }, // Added stats
+                inventory: []
+            };
+            gameState = {
+                currentZoneId: null,
+                character: JSON.parse(JSON.stringify(defaultChar)),
+                combat: null // { active: true, enemyId: 'goblin', enemyHp: 8 }
+            };
+            populateZoneData(); // Create zone definitions
+            console.log("Starting new game:", gameState);
+            transitionToZone(getZoneId(1, 1)); // Start in a central zone
+        }
+        // --- Zone Transition ---
+        function transitionToZone(newZoneId) {
+             console.log(`Transitioning from ${gameState.currentZoneId} to ${newZoneId}`);
+             currentMessage = "";
+             gameState.combat = null; // End combat on zone transition
+             if (gameState.currentZoneId && locationGroups[gameState.currentZoneId]) {
+                 locationGroups[gameState.currentZoneId].group.visible = false;
+             }
+             let zoneInfo;
+             if (locationGroups[newZoneId]) {
+                 zoneInfo = locationGroups[newZoneId];
+                 zoneInfo.group.visible = true;
+             } else {
+                  if (locationData[newZoneId] && locationData[newZoneId].creator) {
+                    zoneInfo = locationData[newZoneId].creator(); // Call the creator function
+                    locationGroups[newZoneId] = zoneInfo; // Store { group, lighting, entryText, zoneId }
+                    worldGroup.add(zoneInfo.group);
+                    zoneInfo.group.visible = true;
+                } else {
+                    console.error(`Zone data or creator missing for ID: ${newLocationId}, attempting fallback`);
+                    const fallbackId = getZoneId(1, 1); // Fallback to center
+                    if (!locationGroups[fallbackId]) {
+                        locationGroups[fallbackId] = locationData[fallbackId].creator();
+                        worldGroup.add(locationGroups[fallbackId].group);
+                    }
+                    zoneInfo = locationGroups[fallbackId];
+                    zoneInfo.group.visible = true;
+                     newZoneId = fallbackId;
+                     currentMessage += `<p class="message message-failure">Error: Couldn't load target zone, returned to center.</p>`;
+                }
+             }
+             gameState.currentZoneId = newZoneId;
+             setupLighting(zoneInfo.lighting || 'default');
+             // Basic camera reset, could be customized per zone later
+             camera.position.set(0, 5, 10);
+             controls.target.set(0, 1, 0);
+             controls.update();
+             renderCurrentPageUI();
+        }
+        // --- UI Rendering ---
+        function renderCurrentPageUI() {
+            const zoneInfo = locationGroups[gameState.currentZoneId];
+            const zoneId = gameState.currentZoneId;
+            if (!zoneInfo) {
+                console.error(`No zone info for ${zoneId}`);
+                storyTitleElement.textContent = "Lost";
+                storyContentElement.innerHTML = currentMessage + "<p>You are in an undefined space.</p>";
+                choicesElement.innerHTML = `<button class="choice-button" onclick="handleTransition({ transitionTo: getZoneId(1, 1) })">Return to Center</button>`;
+                updateStatsDisplay();
+                updateInventoryDisplay();
+                updateActionInfo();
+                return;
+            }
+             storyTitleElement.textContent = zoneId.replace('_', ' ').replace('zone ', 'Zone '); // Simple title
+             storyContentElement.innerHTML = currentMessage + (zoneInfo.entryText ? `<p>${zoneInfo.entryText}</p>` : '');
+             choicesElement.innerHTML = '';
+             // Add Navigation Options
+             const neighbors = getZoneNeighbors(zoneId);
+             if (neighbors.north) choicesElement.innerHTML += `<button class="choice-button" onclick="handleTransition({ transitionTo: '${neighbors.north}' })">Go North</button>`;
+             if (neighbors.south) choicesElement.innerHTML += `<button class="choice-button" onclick="handleTransition({ transitionTo: '${neighbors.south}' })">Go South</button>`;
+             if (neighbors.east) choicesElement.innerHTML += `<button class="choice-button" onclick="handleTransition({ transitionTo: '${neighbors.east}' })">Go East</button>`;
+             if (neighbors.west) choicesElement.innerHTML += `<button class="choice-button" onclick="handleTransition({ transitionTo: '${neighbors.west}' })">Go West</button>`;
+             // Add Zone Specific Options / Combat Trigger Example
+             if (zoneId === getZoneId(0, 1)) { // Example: Forest zone triggers combat
+                 choicesElement.innerHTML += `<button class="choice-button combat-button" onclick="startCombat('goblin')">Investigate Rustling</button>`;
+             }
+              if (zoneId === getZoneId(2, 2)) { // Example: Cave zone triggers combat
+                 choicesElement.innerHTML += `<button class="choice-button combat-button" onclick="startCombat('spider')">Disturb Webs</button>`;
+             }
+             // Add Combat UI if active
+             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>`;
+             }
+             updateStatsDisplay();
+             updateInventoryDisplay();
+             updateActionInfo();
+        }
+        // Make functions globally accessible for inline onclick handlers
+        window.handleTransition = (option) => { if (option.transitionTo) transitionToZone(option.transitionTo); };
+        window.startCombat = startCombat;
+        window.handleCombatAction = handleCombatAction;
+        window.getZoneId = getZoneId; // Make helper accessible if needed
+        function updateStatsDisplay() {
+            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>`;
+             // Could add Str/Dex here too if desired
+        }
+        function updateInventoryDisplay() {
+             let invHtml = '<strong>Inventory:</strong> ';
+             if (gameState.character.inventory.length === 0) {
+                 invHtml += '<em>Empty</em>';
+             } else {
+                 gameState.character.inventory.forEach(item => {
+                     const itemDef = itemsData[item] || { type: 'unknown', description: '???' };
+                     const itemClass = `item-${itemDef.type || 'unknown'}`;
+                     invHtml += `<span class="item-tag ${itemClass}" title="${itemDef.description}">${item}</span>`;
+                 });
+             }
+             inventoryElement.innerHTML = invHtml;
+             // Removed placement click handler
+        }
+        function updateActionInfo() {
+            actionInfoElement.textContent = gameState.combat?.active ? `Mode: Combat` : `Mode: Explore (Click items)`;
+            actionInfoElement.style.display = 'block';
+        }
+        // --- 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,
+                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;
+            if (action === 'attack') {
+                // Player attacks
+                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 baseDamage = itemsData[gameState.character.inventory.find(i => itemsData[i]?.type === 'weapon')]?.baseDamage || 1; // Basic weapon damage or 1
+                    const damageRoll = Math.max(1, Math.floor(Math.random() * baseDamage) + 1); // Roll 1dX
+                    gameState.combat.enemyHp -= damageRoll;
+                    currentMessage = `<p class="message message-success">You hit the ${gameState.combat.enemyName} for ${damageRoll} damage! (Rolled ${totalAttack} vs DC ${gameState.combat.enemyDefense})</p>`;
+                } else {
+                    currentMessage = `<p class="message message-failure">You missed the ${gameState.combat.enemyName}. (Rolled ${totalAttack} vs DC ${gameState.combat.enemyDefense})</p>`;
+                }
+                if (gameState.combat.enemyHp <= 0) {
+                    // Enemy defeated
+                    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>`;
+                    // Handle drops
+                    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)); // Drop near center
+                        currentMessage += `<p class="message message-item"><em>The ${gameState.combat.enemyName} dropped a ${droppedItemName}!</em></p>`;
+                    }
+                    gameState.combat = null; // End combat
+                    renderCurrentPageUI();
+                } else {
+                    // Enemy attacks
+                    const enemyAttackRoll = Math.floor(Math.random() * 20) + 1 + 2; // Simple enemy attack bonus
+                    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!</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
+                            transitionToZone(getZoneId(1,1)); // Go back to start/center on death? Or game over page
+                            // TODO: Implement proper game over state
+                        }
+                    } else {
+                        currentMessage += `<p class="message message-info">The ${gameState.combat.enemyName} misses you.</p>`;
+                    }
+                    renderCurrentPageUI(); // Update UI after both attacks (if player survived)
+                }
+            }
+        }
+        function displayDiceRoll(result, success) {
+             if (!threeFont) {
+                 console.warn("Font not loaded, cannot display dice roll text.");
+                 return;
+             }
+             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); // Green for success, red for fail
+             const textMesh = new THREE.Mesh(textGeo, textMat);
+             // Position above center, facing camera
+             const distance = 5;
+             const textPos = camera.position.clone().add(camera.getWorldDirection(new THREE.Vector3()).multiplyScalar(distance));
+             textMesh.position.copy(textPos);
+             textMesh.position.y += 1; // Slightly higher
+              textMesh.position.x -= textWidth / 2; // Center horizontally approx
+             textMesh.quaternion.copy(camera.quaternion); // Face camera
+             scene.add(textMesh);
+             // Fade out and remove
+             let opacity = 1;
+             const fadeDuration = 1.5; // seconds
+             const fadeStartTime = clock.getElapsedTime();
+             textMesh.userData.update = (time) => {
+                 const elapsed = time - fadeStartTime;
+                 if (elapsed >= fadeDuration) {
+                     scene.remove(textMesh);
+                     delete textMesh.userData.update;
+                 } else {
+                     opacity = 1.0 - (elapsed / fadeDuration);
+                     // textMat.opacity = opacity; // Requires material.transparent = true; Might look odd for basic mesh
+                     textMesh.scale.setScalar(1 + (elapsed / fadeDuration)); // Grow slightly as it fades
+                     textMesh.position.y += 0.01; // Float up
+                 }
+             };
+        }
+        function dropItemInZone(itemName, positionOffset = new THREE.Vector3(0, 0, 0)) {
+            const currentGroup = locationGroups[gameState.currentZoneId]?.group;
+            if (!currentGroup || !itemsData[itemName]) return;
+            const itemDef = itemsData[itemName];
+            const itemGeo = new THREE.BoxGeometry(0.4, 0.4, 0.4); // Simple box for dropped item
+            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); // Drop slightly above ground near offset
+            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 = locationGroups[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 {
+                           // Handle stacking or just ignore if already have? For now, ignore.
+                           currentMessage += `<p class="message message-info"><em>(You already have one/can't carry more)</em></p>`;
+                       }
+                       clickedObject.visible = false;
+                       clickedObject.userData.isPickupable = false; // Mark as picked up
+                       renderCurrentPageUI(); // Update inventory and clear message
+                  }
+             }
+        }
+        // --- Initialization ---
+        document.addEventListener('DOMContentLoaded', () => {
+             console.log("DOM Ready - Initializing Persistent World Adventure.");
+             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";
+                 storyContentElement.innerHTML = `<p style="color:red;">Failed to start game:</p><pre style="color:red; white-space: pre-wrap;">${error.stack || error}</pre>`;
+                 if(sceneContainer) sceneContainer.innerHTML = '<p style="color:red; padding: 20px;">3D Scene Failed</p>';
+                  document.getElementById('stats-inventory-container').style.display = 'none';
+                  document.getElementById('choices-container').style.display = 'none';
+             }
+         });
+    </script>
+</body>
+</html>