src/api/get_monster_stats.py

@@ -11,30 +11,23 @@ def get_monster_stats():
     selected_monster = request.args.get("monster")
 
     if selected_monster:
-# Fetch specific stats for the monster
+        # Fetch specific stats for the monster
-        query = """
+        cursor.execute("""
             SELECT
-                monsters.name,
+                name,
-                monsters.agl AS agility,
+                agl AS agility,
-                monsters.int AS intelligence,
+                int AS intelligence,
-                monsters.maxlvl AS max_level,
+                maxlvl AS max_level,
-                monsters.exp AS experience,
+                exp AS experience,
-                monsters.hp AS health_points,
+                hp AS health_points,
-                monsters.atk AS attack,
+                atk AS attack,
-                monsters.def AS defense,
+                def AS defense
-                families.name AS family,
-                spawn_locations.map || ' - ' || spawn_locations.description AS location
             FROM monsters
-            LEFT JOIN families ON monsters.family_id = families.id
+            WHERE LOWER(name) = LOWER(?)
-            LEFT JOIN spawn_locations ON monsters.id = spawn_locations.monster_id
+        """, (selected_monster.lower(),))
-            WHERE LOWER(monsters.name) = LOWER(?)
-        """
-
-        cursor.execute(query, (selected_monster.lower(),))
 
         # Fetch the result and convert it to a dictionary
         monster_stats = cursor.fetchone()
-        print("Result:", monster_stats)
 
         if monster_stats:
             # Map stat names to descriptive labels
@@ -45,15 +38,13 @@ def get_monster_stats():
                 "attack": "Attack",
                 "defense": "Defense",
                 "agility": "Agility",
-                "intelligence": "Intelligence",
+                "intelligence": "Intelligence"            
-                "family": "Family",
+                }
-                "location": "Location"
-            }
 
             # Create a new dictionary with descriptive stat names
             formatted_stats = {
                 "name": monster_stats[0],
-                **{stat_labels[key]: monster_stats[i + 1] for i, key in enumerate(["agility", "intelligence", "max_level", "experience", "health_points", "attack", "defense", "family", "location"])}
+                **{stat_labels[key]: monster_stats[i + 1] for i, key in enumerate(["agility", "intelligence", "max_level", "experience", "health_points", "attack", "defense"])}
             }
 
             return jsonify(formatted_stats)

static/js/indexListener.js

@@ -20,7 +20,9 @@ document.addEventListener("DOMContentLoaded", function () {
 
     monsterDropdown.addEventListener("change", function () {
         updateIframes();
+    });
+
+    monsterDropdown.addEventListener("change", function () {
         updateMonsterStats();
-        updateMonsterName();
     });
 });

static/js/updateMonsterName.js

@@ -1,16 +0,0 @@
-function updateMonsterName() {
-    // Get the selected monster from the dropdown
-    var selectedMonster = document.getElementById("monsterDropdown").value;
-
-    // Make an API request to get the stats for the selected monster
-    fetch(`/api/monster/stats?monster=${selectedMonster}`)
-      .then(response => response.json())
-      .then(data => {
-        // Update the HTML content with the monster name
-        var nameContainer = document.getElementById("monsterNameContainer");
-        nameContainer.innerHTML = `<h2>${data.name}</h2>`;
-      })
-      .catch(error => {
-        console.error("Error fetching monster name:", error);
-      });
-  }

static/js/updateMonsterStats.js

@@ -3,12 +3,15 @@ function updateMonsterStats() {
     var selectedMonster = document.getElementById("monsterDropdown").value;
 
     // Make an API request to get the stats for the selected monster
+    // You can use fetch or any other method to make the API request
+    // Replace the API endpoint with the actual endpoint of your Flask app
     fetch(`/api/monster/stats?monster=${selectedMonster}`)
       .then(response => response.json())
       .then(data => {
         // Update the HTML content with the monster stats
         var statsContainer = document.getElementById("monsterStatsContainer");
-        statsContainer.innerHTML = `<p>Agility: ${data.Agility}</p>
+        statsContainer.innerHTML = `<h2>${data.name} Stats</h2>
+                                   <p>Agility: ${data.Agility}</p>
                                    <p>Attack: ${data.Attack}</p>
                                    <p>Defense: ${data.Defense}</p>
                                    <p>Experience: ${data.Experience}</p>

templates/app.html

@@ -28,26 +28,6 @@
     width="280"
   >
   </iframe>
-
-  <div id="monsterNameContainer">
-    <!-- Monster name will be displayed here -->
-  </div>
-
-  <div id="monsterStatsContainer">
-    <!-- Monster stats will be displayed here -->
-  </div>
-  
-  <div id="monsterLocationContainer">
-    <!-- Monster Location will be displayed here
-    TODO Add location to stats api -->
-  </div>
-
-  <div id="monsterFamilyContainer">
-    <!-- Monster Family will be displayed here
-    TODO Add family to stats api -->
-  </div>
-
-
   <div class="grid items-center justify-center grid-cols-1 ml-4">
     <iframe
       id="monsterSpriteIframe"
@@ -76,6 +56,11 @@
 </div>
 
 
+<div id="monsterStatsContainer">
+  <!-- Monster stats will be displayed here -->
+</div>
+
+
 <br /><br />
 <div class="mx-auto footer">
   <h2 class="m-2 text-2xl font-bold">About The App</h2>