families and locations added to stats api

src/api/get_monster_stats.py

@@ -12,22 +12,29 @@ def get_monster_stats():
 
     if selected_monster:
 # Fetch specific stats for the monster
-        cursor.execute("""
+        query = """
             SELECT
-                name,
-                agl AS agility,
-                int AS intelligence,
-                maxlvl AS max_level,
-                exp AS experience,
-                hp AS health_points,
-                atk AS attack,
-                def AS defense
+                monsters.name,
+                monsters.agl AS agility,
+                monsters.int AS intelligence,
+                monsters.maxlvl AS max_level,
+                monsters.exp AS experience,
+                monsters.hp AS health_points,
+                monsters.atk AS attack,
+                monsters.def AS defense,
+                families.name AS family,
+                spawn_locations.map || ' - ' || spawn_locations.description AS location
             FROM monsters
-            WHERE LOWER(name) = LOWER(?)
-        """, (selected_monster.lower(),))
+            LEFT JOIN families ON monsters.family_id = families.id
+            LEFT JOIN spawn_locations ON monsters.id = spawn_locations.monster_id
+            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
@@ -38,13 +45,15 @@ 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"])}
+                **{stat_labels[key]: monster_stats[i + 1] for i, key in enumerate(["agility", "intelligence", "max_level", "experience", "health_points", "attack", "defense", "family", "location"])}
             }
 
             return jsonify(formatted_stats)

static/js/indexListener.js

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

static/js/updateMonsterName.js

@@ -0,0 +1,16 @@
+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,15 +3,12 @@ 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 = `<h2>${data.name} Stats</h2>
-                                   <p>Agility: ${data.Agility}</p>
+        statsContainer.innerHTML = `<p>Agility: ${data.Agility}</p>
                                    <p>Attack: ${data.Attack}</p>
                                    <p>Defense: ${data.Defense}</p>
                                    <p>Experience: ${data.Experience}</p>

templates/app.html

@@ -28,6 +28,26 @@
     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"
@@ -56,11 +76,6 @@
 </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>