Spaces:

awacke1
/

ChooseYourOwnAdventure2

Running

App Files Files Community

awacke1 commited on Apr 28

Commit

b21bc95

verified ·

1 Parent(s): 5de4218

Update index.html

Browse files

Files changed (1) hide show

index.html +44 -39

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 (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; }
@@ -37,7 +37,6 @@
         .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>
 <body>
@@ -83,7 +82,7 @@
         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 }),
@@ -101,6 +100,42 @@
             placementPreview: new THREE.MeshBasicMaterial({ color: 0x00ff00, transparent: true, opacity: 0.5, wireframe: true }),
         };
         function initThreeJS() {
             scene = new THREE.Scene();
             scene.background = new THREE.Color(0x1a1a1a);
@@ -290,41 +325,11 @@
              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 },
-             'cave': { creator: createCaveZone }
-        };
-        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",
-                 options: [ { text: "Leave Cave", transitionTo: 'start' } ]
-             }
-        };
-        let gameState = {
-            currentLocationId: null,
-            character: {
-                name: "Player",
-                stats: { hp: 20, maxHp: 20, xp: 0 },
-                inventory: []
-            }
-        };
         function startGame() {
             const defaultChar = {
                 name: "Player",
                 stats: { hp: 20, maxHp: 20, xp: 0 },
-                inventory: ["Rusty Sword"] // Start with an item for testing placement
             };
             gameState = {
                 currentLocationId: null,
@@ -450,7 +455,7 @@
              inventoryElement.querySelectorAll('.item-tag').forEach(tag => {
                  tag.onclick = (event) => {
-                     event.stopPropagation(); // Prevent click from triggering pickup
                      togglePlacementMode(tag.dataset.itemname);
                  };
              });
@@ -467,14 +472,14 @@
         }
         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);
                 }
@@ -542,8 +547,8 @@
                  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);

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Persistent Procedural World (Fixed Again)</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-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>
 <body>
         let locationGroups = {};
         let currentMessage = "";
         let currentPlacingItem = null;
+        let currentLights = [];
         const MAT = {
             stone: new THREE.MeshStandardMaterial({ color: 0x777788, roughness: 0.85, metalness: 0.1 }),
             placementPreview: new THREE.MeshBasicMaterial({ color: 0x00ff00, transparent: true, opacity: 0.5, wireframe: true }),
         };
+        // ---> Item Data Definition (Ensure this exists globally) <---
+        const itemsData = {
+            "Rusty Sword": {type:"weapon", description:"Old but sharp."},
+            "Torch": {type:"consumable", description:"Provides light.", use: "light"},
+            "Key": {type:"quest", description:"A simple iron key."},
+            "Mysterious Cube": {type:"unknown", description:"A plain stone cube."} // Added item from default zone
+        };
+        // ---> Location/Zone Definitions <---
+        const locationData = {
+             'start': { creator: createDefaultZone },
+             'forest': { creator: createForestZone },
+             'cave': { creator: createCaveZone }
+        };
+        // ---> Navigation/Story Graph <---
+        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",
+                 options: [ { text: "Leave Cave", transitionTo: 'start' } ]
+             }
+        };
+        // ---> Game State Variable <---
+        let gameState = {}; // Initialized in startGame
+        // --- Core Functions ---
         function initThreeJS() {
             scene = new THREE.Scene();
             scene.background = new THREE.Color(0x1a1a1a);
              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} };
          }
         function startGame() {
             const defaultChar = {
                 name: "Player",
                 stats: { hp: 20, maxHp: 20, xp: 0 },
+                inventory: ["Rusty Sword"]
             };
             gameState = {
                 currentLocationId: null,
              inventoryElement.querySelectorAll('.item-tag').forEach(tag => {
                  tag.onclick = (event) => {
+                     event.stopPropagation();
                      togglePlacementMode(tag.dataset.itemname);
                  };
              });
         }
         function pickupItem() {
+            if (currentPlacingItem) return;
             raycaster.setFromCamera(mouse, camera);
             const currentGroup = locationGroups[gameState.currentLocationId];
             if (!currentGroup) return;
             const pickupables = [];
+            currentGroup.traverseVisible(child => {
                 if (child.userData.isPickupable) {
                      pickupables.push(child);
                 }
                  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, isPickupable: true, description: `Placed ${itemName}` };
                  currentGroup.add(placedMesh);
                  gameState.character.inventory = gameState.character.inventory.filter(i => i !== itemName);