Update templates/adventure.html

templates/adventure.html

@@ -1,68 +1,119 @@
-{% extends 'base.html' %}
+{% extends "base.html" %}
+
 {% block content %}
+<div class="container">
+  <div class="adventure-container">
     <h1>Explore Vrindavan with Krishna!</h1>
-    <div id="adventure-container">
-        <div id="adventure-scene"></div>
-        <form id="adventure-form">
-            <div id="adventure-choices"></div>
-            <input type="hidden" id="current-scene" name="current_scene">
-            <button type="submit" id="adventure-submit" style="display: none;">Continue</button>
-        </form>
-        <button id="restart-adventure" style="display: none;">Restart Adventure</button>
+
+    <div id="adventure-scene" class="adventure-scene">
+      <p>Error loading adventure—try again</p>
+    </div>
+
+    <div id="adventure-choices" class="adventure-choices">
+      <!-- Choices will be populated dynamically -->
     </div>
-    <script>
-        document.addEventListener('DOMContentLoaded', () => {
-            const adventureScene = document.getElementById('adventure-scene');
-            const adventureChoices = document.getElementById('adventure-choices');
-            const adventureForm = document.getElementById('adventure-form');
-            const currentSceneInput = document.getElementById('current-scene');
-            const adventureSubmit = document.getElementById('adventure-submit');
-            const restartAdventure = document.getElementById('restart-adventure');
+  </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+  async function loadAdventure() {
+    try {
+      const response = await fetch('/adventure', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/x-www-form-urlencoded',
+        },
+        body: new URLSearchParams({
+          'current_scene': document.getElementById('current-scene') ? document.getElementById('current-scene').value : 'start',
+          'choice': ''
+        })
+      });
+
+      const data = await response.json();
+      if (data.scene) {
+        document.getElementById('adventure-scene').innerHTML = `<p>${data.scene}</p>`;
+
+        const choicesDiv = document.getElementById('adventure-choices');
+        choicesDiv.innerHTML = '';
+        if (data.choices && data.choices.length > 0) {
+          data.choices.forEach(choice => {
+            const button = document.createElement('button');
+            button.textContent = choice;
+            button.onclick = () => selectChoice(choice, data.current_scene);
+            choicesDiv.appendChild(button);
+          });
+        } else {
+          const restartButton = document.createElement('button');
+          restartButton.textContent = 'Restart Adventure';
+          restartButton.onclick = () => loadAdventure();
+          choicesDiv.appendChild(restartButton);
+        }
+
+        // Update hidden input for current scene
+        let currentSceneInput = document.getElementById('current-scene');
+        if (!currentSceneInput) {
+          currentSceneInput = document.createElement('input');
+          currentSceneInput.type = 'hidden';
+          currentSceneInput.id = 'current-scene';
+          document.getElementById('adventure-scene').appendChild(currentSceneInput);
+        }
+        currentSceneInput.value = data.current_scene || 'start';
+      } else {
+        throw new Error('No scene data returned');
+      }
+    } catch (error) {
+      console.error('Error loading adventure:', error);
+      document.getElementById('adventure-scene').innerHTML = '<p class="adventure-error">Error loading adventure—try again</p>';
+    }
+  }
 
-            // Load the initial scene
-            loadScene('start');
+  async function selectChoice(choice, currentScene) {
+    try {
+      const response = await fetch('/adventure', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/x-www-form-urlencoded',
+        },
+        body: new URLSearchParams({
+          'current_scene': currentScene,
+          'choice': choice
+        })
+      });
 
-            async function loadScene(scene) {
-                try {
-                    const response = await fetch('/adventure', {
-                        method: scene === 'start' ? 'GET' : 'POST',
-                        headers: {
-                            'Content-Type': 'application/x-www-form-urlencoded',
-                        },
-                        body: scene !== 'start' ? `current_scene=${encodeURIComponent(currentSceneInput.value)}&choice=${encodeURIComponent(document.querySelector('input[name="choice"]:checked')?.value || '')}` : null
-                    });
-                    const data = await response.json();
-                    adventureScene.innerHTML = `<p>${data.scene}</p>`;
-                    currentSceneInput.value = data.current_scene || '';
+      const data = await response.json();
+      if (data.scene) {
+        document.getElementById('adventure-scene').innerHTML = `<p>${data.scene}</p>`;
 
-                    if (data.choices.length > 0) {
-                        adventureChoices.innerHTML = data.choices.map(choice => `
-                            <label>
-                                <input type="radio" name="choice" value="${choice}" required>
-                                ${choice}
-                            </label>
-                        `).join('<br>');
-                        adventureSubmit.style.display = 'block';
-                        restartAdventure.style.display = 'none';
-                    } else {
-                        adventureChoices.innerHTML = '';
-                        adventureSubmit.style.display = 'none';
-                        restartAdventure.style.display = 'block';
-                    }
-                } catch (error) {
-                    console.error('Error loading adventure scene:', error);
-                    adventureScene.innerHTML = '<p>Error loading adventure—try again!</p>';
-                }
-            }
+        const choicesDiv = document.getElementById('adventure-choices');
+        choicesDiv.innerHTML = '';
+        if (data.choices && data.choices.length > 0) {
+          data.choices.forEach(choice => {
+            const button = document.createElement('button');
+            button.textContent = choice;
+            button.onclick = () => selectChoice(choice, data.current_scene);
+            choicesDiv.appendChild(button);
+          });
+        } else {
+          const restartButton = document.createElement('button');
+          restartButton.textContent = 'Restart Adventure';
+          restartButton.onclick = () => loadAdventure();
+          choicesDiv.appendChild(restartButton);
+        }
 
-            adventureForm.addEventListener('submit', (e) => {
-                e.preventDefault();
-                loadScene();
-            });
+        // Update hidden input for current scene
+        document.getElementById('current-scene').value = data.current_scene || 'start';
+      } else {
+        throw new Error('No scene data returned');
+      }
+    } catch (error) {
+      console.error('Error selecting choice:', error);
+      document.getElementById('adventure-scene').innerHTML = '<p class="adventure-error">Error loading adventure—try again</p>';
+    }
+  }
 
-            restartAdventure.addEventListener('click', () => {
-                loadScene('start');
-            });
-        });
-    </script>
+  // Load the initial adventure scene when the page loads
+  document.addEventListener('DOMContentLoaded', loadAdventure);
+</script>
 {% endblock %}