Spaces:

awacke1
/

ChooseYourOwnAdventure2

Running

App Files Files Community

awacke1 commited on Apr 28

Commit

5de4218

verified ·

1 Parent(s): ade1218

Update index.html

Browse files

Files changed (1) hide show

index.html +53 -44

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Persistent Procedural World</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; }
@@ -36,7 +36,7 @@
         .message-failure { color: #f88; border-left-color: #a44; }
         .message-info { color: #aaa; border-left-color: #666; }
         .message-item { color: #8bf; border-left-color: #46a; }
-        #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: none; }
     </style>
 </head>
@@ -68,7 +68,7 @@
     <script type="module">
         import * as THREE from 'three';
-        import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; // Using controls for navigation now
         const sceneContainer = document.getElementById('scene-container');
         const storyTitleElement = document.getElementById('story-title');
@@ -78,12 +78,12 @@
         const inventoryElement = document.getElementById('inventory-display');
         const actionInfoElement = document.getElementById('action-info');
         let scene, camera, renderer, clock, controls, raycaster, mouse;
-        let worldGroup = null; // Parent for all world objects
-        let locationGroups = {}; // Store groups for each location/zone { locationId: group }
-        let currentMessage = ""; // To accumulate UI messages
-        let currentPlacingItem = null; // Item name being placed
         const MAT = {
             stone: new THREE.MeshStandardMaterial({ color: 0x777788, roughness: 0.85, metalness: 0.1 }),
@@ -127,7 +127,7 @@
             controls.enableDamping = true;
             controls.dampingFactor = 0.1;
             controls.target.set(0, 1, 0);
-            controls.maxPolarAngle = Math.PI / 2 - 0.05; // Prevent looking below ground
             window.addEventListener('resize', onWindowResize, false);
             renderer.domElement.addEventListener('mousemove', onMouseMove, false);
@@ -146,8 +146,9 @@
         }
         function onMouseMove( event ) {
-            mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
-            mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;
         }
         function onMouseClick( event ) {
@@ -183,12 +184,14 @@
              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; // Mark for raycasting
              return ground;
         }
         function setupLighting(type = 'default') {
-             currentLights.forEach(light => scene.remove(light));
              currentLights = [];
              let ambientIntensity = 0.4;
@@ -231,14 +234,14 @@
              }
         }
-         function createDefaultZone() {
             const group = new THREE.Group();
             group.add(createGround(MAT.dirt, 20));
             const boxGeo = new THREE.BoxGeometry(1, 1, 1);
             const interactBox = createMesh(boxGeo, MAT.stone, {y: 0.5, x: 2, z: 2});
             interactBox.userData = { isPickupable: true, itemName: "Mysterious Cube", description: "A plain stone cube."};
             group.add(interactBox);
-            group.visible = false; // Start hidden
             return { group, lighting: 'default', entryText: "You are in a default, featureless area.", cameraPos: {x:0, y:5, z:10}, targetPos: {x:0, y:1, z:0} };
         }
@@ -287,7 +290,6 @@
              return { group, lighting: 'cave', entryText: "It's dark and damp in here.", cameraPos: {x:0, y:4, z:8}, targetPos: {x:0, y:1, z:0} };
          }
         const locationData = {
              'start': { creator: createDefaultZone },
              'forest': { creator: createForestZone },
@@ -297,11 +299,11 @@
         const pageGraph = {
             'start': {
                  title: "The Crossroads",
-                 options: [ { text: "Enter Forest", transitionTo: 'forest' } ]
              },
              'forest': {
                  title: "Dark Forest",
-                 options: [ { text: "Return to Crossroads", transitionTo: 'start' }, { text: "Explore Deeper (TBC)", transitionTo: 'forest' }]
              },
              'cave': {
                  title: "Dim Cave",
@@ -322,7 +324,7 @@
             const defaultChar = {
                 name: "Player",
                 stats: { hp: 20, maxHp: 20, xp: 0 },
-                inventory: []
             };
             gameState = {
                 currentLocationId: null,
@@ -335,7 +337,7 @@
         function transitionToLocation(newLocationId) {
              console.log(`Transitioning from ${gameState.currentLocationId} to ${newLocationId}`);
              currentMessage = "";
-             currentPlacingItem = null; // Cancel placement on transition
              if (gameState.currentLocationId && locationGroups[gameState.currentLocationId]) {
                  locationGroups[gameState.currentLocationId].visible = false;
@@ -356,12 +358,14 @@
                     worldGroup.add(newGroup);
                     newGroup.visible = true;
                 } else {
-                    console.error(`Location data or creator missing for ID: ${newLocationId}`);
-                    locationInfo = locationData['start'].creator();
-                    newGroup = locationInfo.group;
-                    locationGroups['start'] = newGroup;
-                    locationData['start'].cachedInfo = locationInfo;
-                    worldGroup.add(newGroup);
                     newGroup.visible = true;
                      newLocationId = 'start';
                      currentMessage += `<p class="message message-failure">Error: Couldn't load target location, returned to start.</p>`;
@@ -390,6 +394,7 @@
                 choicesElement.innerHTML = `<button class="choice-button" onclick="handleTransition({transitionTo: 'start'})">Return to Start</button>`;
                 updateStatsDisplay();
                 updateInventoryDisplay();
                 return;
             }
@@ -421,7 +426,7 @@
                  console.warn("Choice option has no transitionTo property:", option);
             }
         }
-        window.handleTransition = handleTransition; // Make accessible from inline onclick
         function updateStatsDisplay() {
             const { hp, maxHp, xp } = gameState.character.stats;
@@ -438,13 +443,16 @@
                      const itemDef = itemsData[item] || { type: 'unknown', description: '???' };
                      const itemClass = `item-${itemDef.type || 'unknown'}`;
                      const placingClass = (item === currentPlacingItem) ? ' placing' : '';
-                     invHtml += `<span class="item-tag ${itemClass}${placingClass}" title="${itemDef.description}" data-itemname="${item}">${item}</span>`;
                  });
              }
              inventoryElement.innerHTML = invHtml;
              inventoryElement.querySelectorAll('.item-tag').forEach(tag => {
-                 tag.onclick = () => { togglePlacementMode(tag.dataset.itemname); };
              });
         }
@@ -453,19 +461,20 @@
                 actionInfoElement.textContent = `Placing: ${currentPlacingItem} (Click ground)`;
                 actionInfoElement.style.display = 'block';
             } else {
-                 actionInfoElement.textContent = `Mode: Explore (Click items)`;
-                 actionInfoElement.style.display = 'block'; // Keep it visible
             }
         }
         function pickupItem() {
             raycaster.setFromCamera(mouse, camera);
             const currentGroup = locationGroups[gameState.currentLocationId];
             if (!currentGroup) return;
             const pickupables = [];
-            currentGroup.traverse(child => {
                 if (child.userData.isPickupable) {
                      pickupables.push(child);
                 }
@@ -487,8 +496,8 @@
                            currentMessage += `<p class="message message-info"><em>(You already had one)</em></p>`;
                        }
-                       clickedObject.visible = false; // Hide it instead of removing, simpler state
-                       clickedObject.userData.isPickupable = false; // Prevent re-picking
                        renderCurrentPageUI();
                   }
@@ -496,14 +505,15 @@
         }
          function togglePlacementMode(itemName) {
              if (currentPlacingItem === itemName) {
-                 currentPlacingItem = null; // Cancel placement
                  console.log("Placement cancelled.");
              } else {
                  currentPlacingItem = itemName;
                  console.log(`Ready to place: ${itemName}`);
              }
-             updateInventoryDisplay(); // Update highlighting
              updateActionInfo();
          }
@@ -515,7 +525,7 @@
              if (!currentGroup) return;
              const grounds = [];
-             currentGroup.traverse(child => { if(child.userData.isGround) grounds.push(child); });
              const intersects = raycaster.intersectObjects(grounds);
@@ -526,30 +536,29 @@
                  console.log(`Placing ${itemName} at ${point.x.toFixed(1)}, ${point.z.toFixed(1)}`);
-                 const itemGeo = new THREE.BoxGeometry(0.5, 0.5, 0.5); // Simple representation
                  const itemMat = MAT.simple.clone();
                  if(itemDef.type === 'weapon') itemMat.color.setHex(0xaa4444);
                  else if(itemDef.type === 'consumable') itemMat.color.setHex(0xaa7744);
                  else itemMat.color.setHex(0x8888aa);
-                 const placedMesh = createMesh(itemGeo, itemMat, {x: point.x, y: 0.25, z: point.z});
-                 placedMesh.userData = { isPlacedItem: true, itemName: itemName };
                  currentGroup.add(placedMesh);
                  gameState.character.inventory = gameState.character.inventory.filter(i => i !== itemName);
                  currentMessage = `<p class="message message-item"><em>Placed ${itemName}.</em></p>`;
-                 currentPlacingItem = null; // Exit placement mode
                  renderCurrentPageUI();
              } else {
                  console.log("Placement click missed ground.");
                  currentMessage = `<p class="message message-failure"><em>Cannot place item there.</em></p>`;
-                 currentPlacingItem = null; // Exit placement mode on miss
                  renderCurrentPageUI();
              }
          }
         document.addEventListener('DOMContentLoaded', () => {
              console.log("DOM Ready - Initializing Persistent World Adventure.");
              try {

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Persistent Procedural World (Fixed)</title>
     <style>
         body { font-family: 'Courier New', monospace; background-color: #111; color: #eee; margin: 0; padding: 0; overflow: hidden; display: flex; flex-direction: column; height: 100vh; }
         #game-container { display: flex; flex-grow: 1; overflow: hidden; }
         .message-failure { color: #f88; border-left-color: #a44; }
         .message-info { color: #aaa; border-left-color: #666; }
         .message-item { color: #8bf; border-left-color: #46a; }
+        #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: none; z-index: 10;}
     </style>
 </head>
     <script type="module">
         import * as THREE from 'three';
+        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
         const sceneContainer = document.getElementById('scene-container');
         const storyTitleElement = document.getElementById('story-title');
         const inventoryElement = document.getElementById('inventory-display');
         const actionInfoElement = document.getElementById('action-info');
         let scene, camera, renderer, clock, controls, raycaster, mouse;
+        let worldGroup = null;
+        let locationGroups = {};
+        let currentMessage = "";
+        let currentPlacingItem = null;
+        let currentLights = []; // <<<< ENSURE THIS IS DECLARED GLOBALLY
         const MAT = {
             stone: new THREE.MeshStandardMaterial({ color: 0x777788, roughness: 0.85, metalness: 0.1 }),
             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);
         }
         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 ) {
              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;
              }
         }
+        function createDefaultZone() {
             const group = new THREE.Group();
             group.add(createGround(MAT.dirt, 20));
             const boxGeo = new THREE.BoxGeometry(1, 1, 1);
             const interactBox = createMesh(boxGeo, MAT.stone, {y: 0.5, x: 2, z: 2});
             interactBox.userData = { isPickupable: true, itemName: "Mysterious Cube", description: "A plain stone cube."};
             group.add(interactBox);
+            group.visible = false;
             return { group, lighting: 'default', entryText: "You are in a default, featureless area.", cameraPos: {x:0, y:5, z:10}, targetPos: {x:0, y:1, z:0} };
         }
              return { group, lighting: 'cave', entryText: "It's dark and damp in here.", cameraPos: {x:0, y:4, z:8}, targetPos: {x:0, y:1, z:0} };
          }
         const locationData = {
              'start': { creator: createDefaultZone },
              'forest': { creator: createForestZone },
         const pageGraph = {
             'start': {
                  title: "The Crossroads",
+                 options: [ { text: "Enter Forest", transitionTo: 'forest' }, { text: "Enter Cave", transitionTo: 'cave'} ]
              },
              'forest': {
                  title: "Dark Forest",
+                 options: [ { text: "Return to Crossroads", transitionTo: 'start' } ]
              },
              'cave': {
                  title: "Dim Cave",
             const defaultChar = {
                 name: "Player",
                 stats: { hp: 20, maxHp: 20, xp: 0 },
+                inventory: ["Rusty Sword"] // Start with an item for testing placement
             };
             gameState = {
                 currentLocationId: null,
         function transitionToLocation(newLocationId) {
              console.log(`Transitioning from ${gameState.currentLocationId} to ${newLocationId}`);
              currentMessage = "";
+             currentPlacingItem = null;
              if (gameState.currentLocationId && locationGroups[gameState.currentLocationId]) {
                  locationGroups[gameState.currentLocationId].visible = false;
                     worldGroup.add(newGroup);
                     newGroup.visible = true;
                 } else {
+                    console.error(`Location data or creator missing for ID: ${newLocationId}, attempting fallback to 'start'`);
+                    if (!locationGroups['start']) {
+                        locationData['start'].cachedInfo = locationData['start'].creator();
+                        locationGroups['start'] = locationData['start'].cachedInfo.group;
+                        worldGroup.add(locationGroups['start']);
+                    }
+                    locationInfo = locationData['start'].cachedInfo;
+                    newGroup = locationGroups['start'];
                     newGroup.visible = true;
                      newLocationId = 'start';
                      currentMessage += `<p class="message message-failure">Error: Couldn't load target location, returned to start.</p>`;
                 choicesElement.innerHTML = `<button class="choice-button" onclick="handleTransition({transitionTo: 'start'})">Return to Start</button>`;
                 updateStatsDisplay();
                 updateInventoryDisplay();
+                updateActionInfo();
                 return;
             }
                  console.warn("Choice option has no transitionTo property:", option);
             }
         }
+        window.handleTransition = handleTransition;
         function updateStatsDisplay() {
             const { hp, maxHp, xp } = gameState.character.stats;
                      const itemDef = itemsData[item] || { type: 'unknown', description: '???' };
                      const itemClass = `item-${itemDef.type || 'unknown'}`;
                      const placingClass = (item === currentPlacingItem) ? ' placing' : '';
+                     invHtml += `<span class="item-tag ${itemClass}${placingClass}" title="Click to Place: ${itemDef.description}" data-itemname="${item}">${item}</span>`;
                  });
              }
              inventoryElement.innerHTML = invHtml;
              inventoryElement.querySelectorAll('.item-tag').forEach(tag => {
+                 tag.onclick = (event) => {
+                     event.stopPropagation(); // Prevent click from triggering pickup
+                     togglePlacementMode(tag.dataset.itemname);
+                 };
              });
         }
                 actionInfoElement.textContent = `Placing: ${currentPlacingItem} (Click ground)`;
                 actionInfoElement.style.display = 'block';
             } else {
+                 actionInfoElement.textContent = `Mode: Explore (Click items/Use UI)`;
+                 actionInfoElement.style.display = 'block';
             }
         }
         function pickupItem() {
+            if (currentPlacingItem) return; // Don't pick up while placing
             raycaster.setFromCamera(mouse, camera);
             const currentGroup = locationGroups[gameState.currentLocationId];
             if (!currentGroup) return;
             const pickupables = [];
+            currentGroup.traverseVisible(child => { // Only check visible objects
                 if (child.userData.isPickupable) {
                      pickupables.push(child);
                 }
                            currentMessage += `<p class="message message-info"><em>(You already had one)</em></p>`;
                        }
+                       clickedObject.visible = false;
+                       clickedObject.userData.isPickupable = false;
                        renderCurrentPageUI();
                   }
         }
          function togglePlacementMode(itemName) {
+             if (!itemName) return;
              if (currentPlacingItem === itemName) {
+                 currentPlacingItem = null;
                  console.log("Placement cancelled.");
              } else {
                  currentPlacingItem = itemName;
                  console.log(`Ready to place: ${itemName}`);
              }
+             updateInventoryDisplay();
              updateActionInfo();
          }
              if (!currentGroup) return;
              const grounds = [];
+             currentGroup.traverseVisible(child => { if(child.userData.isGround) grounds.push(child); });
              const intersects = raycaster.intersectObjects(grounds);
                  console.log(`Placing ${itemName} at ${point.x.toFixed(1)}, ${point.z.toFixed(1)}`);
+                 const itemGeo = new THREE.BoxGeometry(0.5, 0.5, 0.5);
                  const itemMat = MAT.simple.clone();
                  if(itemDef.type === 'weapon') itemMat.color.setHex(0xaa4444);
                  else if(itemDef.type === 'consumable') itemMat.color.setHex(0xaa7744);
                  else itemMat.color.setHex(0x8888aa);
+                 const placedMesh = createMesh(itemGeo, itemMat, {x: point.x, y: 0.25, z: point.z}); // Place slightly above ground
+                 placedMesh.userData = { isPlacedItem: true, itemName: itemName, isPickupable: true, description: `Placed ${itemName}` }; // Make it pickupable again
                  currentGroup.add(placedMesh);
                  gameState.character.inventory = gameState.character.inventory.filter(i => i !== itemName);
                  currentMessage = `<p class="message message-item"><em>Placed ${itemName}.</em></p>`;
+                 currentPlacingItem = null;
                  renderCurrentPageUI();
              } else {
                  console.log("Placement click missed ground.");
                  currentMessage = `<p class="message message-failure"><em>Cannot place item there.</em></p>`;
+                 currentPlacingItem = null;
                  renderCurrentPageUI();
              }
          }
         document.addEventListener('DOMContentLoaded', () => {
              console.log("DOM Ready - Initializing Persistent World Adventure.");
              try {