Update templates/adventure.html

templates/adventure.html

@@ -8,16 +8,121 @@
 
 {% block content %}
 <div class="container">
-    <div class="adventure-container">
-        <h1>Explore Vrindavan with Krishna!</h1>
-        <div id="adventure-scene" class="adventure-scene">
-            <p>Loading your Vrindavan adventure...</p>
+    <h1>Vrindavan Adventure with Little Krishna</h1>
+    
+    <div class="adventure-game">
+        <!-- Scene display area -->
+        <div id="scene-container" class="scene-container">
+            <div id="scene-content" class="scene-content">
+                <p>Welcome to Vrindavan! Let's begin our adventure with Little Krishna.</p>
+            </div>
+        </div>
+        
+        <!-- Choices will appear here -->
+        <div id="choices-container" class="choices-container">
+            <button id="start-btn" class="choice-btn">Begin Adventure</button>
+        </div>
+        
+        <!-- Krishna image that changes based on scene -->
+        <div class="krishna-character">
+            <img id="krishna-img" src="{{ url_for('static', filename='assets/krishna_normal.png') }}" alt="Little Krishna">
         </div>
-        <div id="adventure-choices" class="adventure-choices"></div>
     </div>
 </div>
 {% endblock %}
 
 {% block scripts %}
-<script src="{{ url_for('static', filename='js/adventure.js') }}"></script>
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    const sceneContent = document.getElementById('scene-content');
+    const choicesContainer = document.getElementById('choices-container');
+    const startBtn = document.getElementById('start-btn');
+    const krishnaImg = document.getElementById('krishna-img');
+    
+    let currentScene = 'start';
+    
+    // Start the adventure
+    startBtn.addEventListener('click', function() {
+        loadScene(currentScene);
+        this.remove(); // Remove the start button
+    });
+    
+    // Function to load a scene
+    async function loadScene(sceneId, choice = '') {
+        try {
+            // Show loading state
+            sceneContent.innerHTML = '<p>Krishna is thinking...</p>';
+            choicesContainer.innerHTML = '';
+            
+            // Send request to server
+            const response = await fetch('/adventure', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/x-www-form-urlencoded',
+                },
+                body: `current_scene=${sceneId}&choice=${encodeURIComponent(choice)}`
+            });
+            
+            const data = await response.json();
+            
+            if (data.scene) {
+                // Update scene content
+                sceneContent.innerHTML = `<p>${data.scene}</p>`;
+                currentScene = data.current_scene || sceneId;
+                
+                // Update Krishna image based on scene
+                updateKrishnaImage(currentScene);
+                
+                // If there are choices, show them
+                if (data.choices && data.choices.length > 0) {
+                    choicesContainer.innerHTML = '';
+                    data.choices.forEach(choiceText => {
+                        const choiceBtn = document.createElement('button');
+                        choiceBtn.className = 'choice-btn';
+                        choiceBtn.textContent = choiceText;
+                        choiceBtn.addEventListener('click', () => {
+                            loadScene(currentScene, choiceText);
+                        });
+                        choicesContainer.appendChild(choiceBtn);
+                    });
+                } else {
+                    // No more choices - end of adventure
+                    choicesContainer.innerHTML = `
+                        <button class="choice-btn restart-btn" onclick="location.reload()">
+                            Play Again
+                        </button>
+                    `;
+                }
+            } else {
+                throw new Error('Invalid scene data');
+            }
+        } catch (error) {
+            console.error('Error:', error);
+            sceneContent.innerHTML = `
+                <p>Oh no! Something went wrong in Vrindavan.</p>
+                <button class="choice-btn" onclick="loadScene('start')">
+                    Start Over
+                </button>
+            `;
+        }
+    }
+    
+    // Change Krishna's image based on the scene
+    function updateKrishnaImage(sceneId) {
+        let imageName = 'krishna_normal.png';
+        
+        if (sceneId.includes('peacock') || sceneId.includes('tree')) {
+            imageName = 'krishna_playing.png';
+        } else if (sceneId.includes('butter') || sceneId.includes('yamuna')) {
+            imageName = 'krishna_mischievous.png';
+        } else if (sceneId.includes('flute')) {
+            imageName = 'krishna_flute.png';
+        } else if (!choicesContainer.querySelector('.choice-btn')) {
+            imageName = 'krishna_smiling.png';
+        }
+        
+        krishnaImg.src = `{{ url_for('static', filename='assets/') }}${imageName}`;
+    }
+});
+</script>
 {% endblock %}