Update index.html

index.html

@@ -161,6 +161,11 @@
         .item-text { color: #6af; font-style: italic; font-size: 0.9em; margin-bottom: 1em; border-left: 3px solid #369; padding-left: 8px; background-color: rgba(0, 100, 200, 0.1); padding: 5px;}
         .stat-increase-text { color: #9f9; font-style: italic; font-size: 0.9em; margin-bottom: 1em; border-left: 3px solid #4a4; padding-left: 8px; background-color: rgba(0, 200, 0, 0.1); padding: 5px;}
 
+        #start-game-container {
+            padding: 30px 0;
+            text-align: center;
+        }
+
 
     </style>
 </head>
@@ -168,16 +173,19 @@
     <div id="game-container">
         <div id="scene-container"></div>
         <div id="ui-container">
-            <h2 id="story-title">Loading Adventure...</h2>
+            <h2 id="story-title">Welcome, Adventurer</h2>
             <div id="story-content">
-                <p>Please wait while the adventure loads.</p>
+                <p>The world awaits your decisions.</p>
+                 <div id="start-game-container">
+                    <button id="start-button" class="choice-button" style="width: 80%; margin: 20px auto; text-align: center; padding: 15px;">Begin Your Adventure</button>
+                </div>
             </div>
-            <div id="stats-inventory-container">
+            <div id="stats-inventory-container" style="display: none;">
                 <div id="stats-display"></div>
                 <div id="effects-display"></div>
                 <div id="inventory-display"></div>
             </div>
-            <div id="choices-container">
+            <div id="choices-container" style="display: none;">
                 <h3>What will you do?</h3>
                 <div id="choices"></div>
             </div>
@@ -203,6 +211,10 @@
         const statsElement = document.getElementById('stats-display');
         const effectsElement = document.getElementById('effects-display');
         const inventoryElement = document.getElementById('inventory-display');
+        const startGameContainer = document.getElementById('start-game-container');
+        const statsInventoryContainer = document.getElementById('stats-inventory-container');
+        const choicesContainer = document.getElementById('choices-container');
+
 
         let scene, camera, renderer, clock;
         let currentAssemblyGroup = null;
@@ -1426,12 +1438,15 @@
                 currentAssemblyGroup = null;
             }
              currentLights.forEach(light => {
-                 if (light !== scene.children.find(c => c.isAmbientLight)) {
+                 if (light && light !== scene.children.find(c => c && c.isAmbientLight)) {
                      scene.remove(light);
                      if (light.dispose) light.dispose();
                  }
              });
-             currentLights = [scene.children.find(c => c.isAmbientLight)];
+
+             const ambientLight = scene.children.find(c => c && c.isAmbientLight);
+             currentLights = ambientLight ? [ambientLight] : [];
+
 
              scene.fog = null;
              currentFog = null;
@@ -1722,6 +1737,30 @@
 
         }
 
+         function setupStartButton() {
+            const startButton = document.getElementById('start-button');
+
+            if (startButton && startGameContainer) {
+                statsInventoryContainer.style.display = 'none';
+                choicesContainer.style.display = 'none';
+                storyTitleElement.textContent = "Welcome";
+                storyContentElement.innerHTML = "<p>Click 'Begin Your Adventure' to start.</p>" + startGameContainer.innerHTML;
+                startGameContainer.style.display = 'block';
+
+                startButton.onclick = () => {
+                    console.log("Start button clicked.");
+                    startGameContainer.style.display = 'none';
+                    statsInventoryContainer.style.display = 'block';
+                    choicesContainer.style.display = 'block';
+                    startGame();
+                };
+            } else {
+                console.error("Start button or container not found!");
+                storyContentElement.innerHTML = "<p style='color:red;'>Error: Could not set up start button.</p>";
+            }
+        }
+
+
         document.addEventListener('DOMContentLoaded', () => {
             console.log("DOM Ready - Initializing Enhanced Adventure.");
             try {
@@ -1729,8 +1768,8 @@
                  if (!scene || !camera || !renderer) {
                     throw new Error("Three.js core component initialization failed.");
                  }
-                startGame();
-                console.log("Game started.");
+                 setupStartButton();
+                 console.log("Initialization complete. Ready to start.");
             } catch (error) {
                 console.error("Initialization failed:", error);
                 storyTitleElement.textContent = "Error During Initialization";