Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>World Grid Test (Startup Debug)</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; } | |
| #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); } | |
| .message { padding: 8px 12px; margin-bottom: 1em; border-left-width: 3px; border-left-style: solid; font-size: 0.95em; background-color: rgba(255, 255, 255, 0.05); border-color: #666; color: #aaa;} | |
| .message-failure { color: #f88; border-left-color: #a44; } | |
| #action-info { position: absolute; bottom: 10px; left: 10px; background-color: rgba(0,0,0,0.7); color: #ffcc66; padding: 5px 10px; border-radius: 3px; font-size: 0.9em; display: block; z-index: 10;} | |
| </style> | |
| </head> | |
| <body> | |
| <div id="game-container"> | |
| <div id="scene-container"> | |
| <div id="action-info">Initializing...</div> | |
| </div> | |
| <div id="ui-container"> | |
| <h2 id="story-title">Initializing...</h2> | |
| <div id="story-content"><p>Loading assets...</p></div> | |
| <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> | |
| <div id="choices">Loading...</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'; // Temporarily removed | |
| console.log("Script module execution started."); | |
| const sceneContainer = document.getElementById('scene-container'); | |
| const storyTitleElement = document.getElementById('story-title'); | |
| const storyContentElement = document.getElementById('story-content'); | |
| const choicesElement = document.getElementById('choices'); | |
| const statsElement = document.getElementById('stats-display'); | |
| const inventoryElement = document.getElementById('inventory-display'); | |
| const actionInfoElement = document.getElementById('action-info'); | |
| console.log("DOM elements obtained."); | |
| let scene, camera, renderer, clock; // Removed controls, raycaster, mouse | |
| let worldGroup = null; | |
| let zoneGroups = {}; | |
| let currentMessage = ""; | |
| let currentLights = []; | |
| const MAT = { // Simplified materials | |
| 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 }), | |
| }; | |
| let gameState = {}; | |
| const itemsData = { | |
| "Rock": {type:"unknown", description:"A simple rock."} // Minimal items | |
| }; | |
| 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; // Default size if 0 | |
| 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; // Basic shadows | |
| renderer.shadowMap.type = THREE.PCFSoftShadowMap; | |
| sceneContainer.appendChild(renderer.domElement); | |
| console.log("Renderer created and appended."); | |
| // controls = new OrbitControls(camera, renderer.domElement); // Removed | |
| // controls.target.set(0, 1, 0); | |
| window.addEventListener('resize', onWindowResize, false); | |
| setTimeout(onWindowResize, 100); // Try later resize | |
| animate(); | |
| console.log("initThreeJS finished successfully."); | |
| } catch (error) { | |
| console.error("Error during initThreeJS:", error); | |
| throw error; // Re-throw to be caught by DOMContentLoaded listener | |
| } | |
| } | |
| function onWindowResize() { | |
| console.log("onWindowResize called."); | |
| if (!renderer || !camera || !sceneContainer) return; | |
| const width = sceneContainer.clientWidth || 300; | |
| const height = sceneContainer.clientHeight || 200; | |
| if (width > 0 && height > 0) { | |
| 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++; | |
| if(frameCount % 300 === 0) console.log("Animate loop running..."); // Log every ~5 seconds | |
| requestAnimationFrame(animate); | |
| // controls?.update(); // Removed controls | |
| 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') { | |
| console.log(`Setting up lighting for type: ${type}`); | |
| currentLights.forEach(light => { | |
| if (light && light.parent) light.parent.remove(light); // Remove from parent if attached | |
| if (light && scene.children.includes(light)) scene.remove(light); // Ensure removed from scene | |
| }); | |
| currentLights = []; | |
| let ambientIntensity = 0.6; // Brighter default ambient | |
| let dirIntensity = 1.0; | |
| let dirColor = 0xffffff; | |
| let dirPosition = new THREE.Vector3(5, 10, 7); // Adjusted angle | |
| 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(512, 512); // Smaller shadow map for testing | |
| scene.add(directionalLight); | |
| currentLights.push(directionalLight); | |
| } | |
| console.log(`Lighting setup complete. Lights: ${currentLights.length}`); | |
| } | |
| // Simplified Zone Creation | |
| 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(1, 0); // Bigger, simpler rock | |
| group.add(createMesh(rockGeo, MAT.stone, {x: 5, y:0.5, z: 5})); | |
| group.visible = false; | |
| return { group, lighting: 'default', title: "Open Field", entryText: `You are in ${zoneId}. It's grassy.`, options: [], zoneId: zoneId }; | |
| } | |
| // Use Field for all zones for now | |
| const createForestZone = (zoneId) => createFieldZone(zoneId); | |
| const createCaveZone = (zoneId) => createFieldZone(zoneId); | |
| const createRuinsZone = (zoneId) => createFieldZone(zoneId); | |
| function getZoneId(row, col) { return `zone_${row}_${col}`; } | |
| function populateZoneCreators() { | |
| console.log("Populating zone creators..."); | |
| // No reassignment here | |
| for (let r = 0; r < MAP_ROWS; r++) { | |
| for (let c = 0; c < MAP_COLS; c++) { | |
| const zoneId = getZoneId(r, c); | |
| // Force all to be FieldZone for testing stability | |
| zoneCreators[zoneId] = () => createFieldZone(zoneId); | |
| } | |
| } | |
| console.log(`Zone creators populated with ${Object.keys(zoneCreators).length} entries.`); | |
| } | |
| function getZoneNeighbors(zoneId) { | |
| const parts = zoneId.split('_'); | |
| if (parts.length !== 3) return {}; | |
| const r = parseInt(parts[1]); | |
| const c = parseInt(parts[2]); | |
| const neighbors = {}; | |
| if (r > 0 && zoneCreators[getZoneId(r - 1, c)]) neighbors.north = getZoneId(r - 1, c); | |
| if (r < MAP_ROWS - 1 && zoneCreators[getZoneId(r + 1, c)]) neighbors.south = getZoneId(r + 1, c); | |
| if (c > 0 && zoneCreators[getZoneId(r, c - 1)]) neighbors.west = getZoneId(r, c - 1); | |
| if (c < MAP_COLS - 1 && zoneCreators[getZoneId(r, c + 1)]) neighbors.east = getZoneId(r, c + 1); | |
| return neighbors; | |
| } | |
| function startGame() { | |
| 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 = {}; | |
| while(worldGroup.children.length > 0){ | |
| 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}`); | |
| zoneGroups[gameState.currentZoneId].group.visible = false; | |
| } else { | |
| console.log("No current zone to hide."); | |
| } | |
| let zoneInfo; | |
| if (zoneGroups[newZoneId]) { | |
| zoneInfo = zoneGroups[newZoneId]; | |
| zoneInfo.group.visible = true; | |
| console.log(`Re-entering cached zone ${newZoneId}`); | |
| } else { | |
| const creator = zoneCreators[newZoneId]; | |
| if (creator) { | |
| try { | |
| zoneInfo = creator(); | |
| zoneGroups[newZoneId] = zoneInfo; | |
| worldGroup.add(zoneInfo.group); | |
| zoneInfo.group.visible = true; | |
| console.log(`Created and entered new zone ${newZoneId}`); | |
| } catch (creationError) { | |
| console.error(`Error creating zone ${newZoneId}:`, creationError); | |
| currentMessage = `<p class="message message-failure">Error creating zone ${newZoneId}.</p>`; | |
| // Fallback to start or previous state might be needed here | |
| // For now, just log and potentially break rendering | |
| renderCurrentPageUI(); // Render even if zone creation failed to show error | |
| return; // Stop transition | |
| } | |
| } else { | |
| console.error(`No creator found for zone ID: ${newZoneId}, critical error.`); | |
| currentMessage = `<p class="message message-failure">Error: Zone creator missing for ${newZoneId}. Cannot proceed.</p>`; | |
| // Render minimal UI or stop | |
| storyTitleElement.textContent = "Fatal Error"; | |
| storyContentElement.innerHTML = currentMessage; | |
| choicesElement.innerHTML = ''; | |
| return; // Stop transition | |
| } | |
| } | |
| gameState.currentZoneId = newZoneId; | |
| setupLighting(zoneInfo.lighting || 'default'); | |
| // Add point lights from lighting setup to the current group | |
| currentLights.forEach(light => { | |
| if (light && light.isPointLight) { | |
| if(light.parent) light.parent.remove(light); // Ensure it's not attached elsewhere | |
| zoneInfo.group.add(light); | |
| console.log("Added point light to zone group:", newZoneId); | |
| } | |
| }); | |
| camera.position.set(0, 6, 12); | |
| // controls.target.set(0, 1, 0); // Controls removed | |
| // controls.update(); | |
| camera.lookAt(0, 1, 0); // Look at center | |
| console.log(`Transition to ${newZoneId} complete. Rendering UI.`); | |
| renderCurrentPageUI(); | |
| } | |
| function renderCurrentPageUI() { | |
| console.log(`renderCurrentPageUI called for zone: ${gameState.currentZoneId}`); | |
| const zoneInfo = zoneGroups[gameState.currentZoneId]; | |
| const zoneId = gameState.currentZoneId; | |
| // Ensure critical elements exist before proceeding | |
| if (!storyTitleElement || !storyContentElement || !choicesElement || !statsElement || !inventoryElement || !actionInfoElement) { | |
| console.error("Crucial UI element missing!"); | |
| alert("UI Error - Cannot render page. Check console."); | |
| return; | |
| } | |
| 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>`; // Use wrapper | |
| 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 = ''; // Clear previous choices | |
| // Add Navigation Options | |
| 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 neighbors) { | |
| const neighborId = neighbors[dir]; | |
| const button = document.createElement('button'); | |
| button.classList.add('choice-button'); | |
| button.textContent = `Go ${directions[dir]} (${neighborId})`; // Show ID for debug | |
| // Use addEventListener for cleaner separation | |
| button.addEventListener('click', () => transitionToZone(neighborId)); | |
| choicesElement.appendChild(button); | |
| addedChoices++; | |
| } | |
| // Add Zone Specific Options (Simplified) | |
| 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; | |
| // Add onclick based on option.action later (placeholder) | |
| button.addEventListener('click', () => console.log("Zone action clicked (TBC):", option.action)); | |
| choicesElement.appendChild(button); | |
| addedChoices++; | |
| }); | |
| } | |
| if (addedChoices === 0) { | |
| choicesElement.innerHTML = '<p><i>No exits or actions available yet.</i></p>'; | |
| } | |
| console.log("Updating stats, inventory, action info..."); | |
| updateStatsDisplay(); | |
| updateInventoryDisplay(); | |
| updateActionInfo(); | |
| console.log("renderCurrentPageUI finished."); | |
| } | |
| // Wrapper because inline onclick can have scope issues with modules | |
| 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>'; | |
| } 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; | |
| } | |
| 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(); // Setup ThreeJS first | |
| if (!scene || !camera || !renderer) throw new Error("Three.js failed to initialize."); | |
| startGame(); // Now start game logic | |
| console.log("Game world initialization sequence complete."); | |
| } catch (error) { | |
| console.error("Initialization failed:", error); | |
| storyTitleElement.textContent = "Initialization Error"; | |
| storyContentElement.innerHTML = `<p style="color:red;">Failed to start game:</p><pre style="color:red; white-space: pre-wrap;">${error.stack || error}</pre><p style="color:yellow;">Check console (F12) for details.</p>`; | |
| if(sceneContainer) sceneContainer.innerHTML = '<p style="color:red; padding: 20px;">3D Scene Failed</p>'; | |
| // Hide game UI elements on error | |
| const statsInvContainer = document.getElementById('stats-inventory-container'); | |
| const choicesCont = document.getElementById('choices-container'); | |
| if (statsInvContainer) statsInvContainer.style.display = 'none'; | |
| if (choicesCont) choicesCont.style.display = 'none'; | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |