added mp to api and updated containers

src/api/get_monster_stats.py

@@ -20,6 +20,7 @@ def get_monster_stats():
                 monsters.maxlvl AS max_level,
                 monsters.exp AS experience,
                 monsters.hp AS health_points,
+                monsters.mp AS mana_points,
                 monsters.atk AS attack,
                 monsters.def AS defense,
                 families.name AS family,
@@ -45,6 +46,7 @@ def get_monster_stats():
                 "max_level": "Max Level",
                 "experience": "Experience",
                 "health_points": "Health Points",
+                "mana_points": "Mana Points",
                 "attack": "Attack",
                 "defense": "Defense",
                 "agility": "Agility",
@@ -57,7 +59,7 @@ def get_monster_stats():
             # 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", "skills"])}
+                **{stat_labels[key]: monster_stats[i + 1] for i, key in enumerate(["agility", "intelligence", "max_level", "experience", "health_points", "mana_points", "attack", "defense", "family", "location", "skills"])}
             }
 
             return jsonify(formatted_stats)

static/js/updateMonsterLocation.js

@@ -10,7 +10,7 @@ function updateMonsterLocation() {
       if (data.Location !== null) {
         // Update the HTML content with the monster location
         var locationContainer = document.getElementById("monsterLocationContainer");
-        locationContainer.innerHTML = `<h2>${data.Location}</h2>`;
+        locationContainer.innerHTML = `<h2>Known Locations:<br>${data.Location}</h2>`;
       } else {
         // Handle the case when location is null (optional)
         var locationContainer = document.getElementById("monsterLocationContainer");

static/js/updateMonsterSkills.js

@@ -1,16 +1,20 @@
 function updateMonsterSkills() {
-    // Get the selected monster from the dropdown
+  // Get the selected monster from the dropdown
-    var selectedMonster = document.getElementById("monsterDropdown").value;
+  var selectedMonster = document.getElementById("monsterDropdown").value;
 
-    // Make an API request to get the stats for the selected monster
+  // Make an API request to get the stats for the selected monster
-    fetch(`/api/monster/stats?monster=${selectedMonster}`)
+  fetch(`/api/monster/stats?monster=${selectedMonster}`)
       .then(response => response.json())
       .then(data => {
-        // Update the HTML content with the monster skills
+          // Split the skills string into an array and join with line breaks
-        var skillsContainer = document.getElementById("monsterSkillsContainer");
+          var skillsArray = data.Skills.split(",");
-        skillsContainer.innerHTML = `<h2>Skills: ${data.Skills}</h2>`;
+          var formattedSkills = skillsArray.join(",<br>");
+
+          // Update the HTML content with the monster skills
+          var skillsContainer = document.getElementById("monsterSkillsContainer");
+          skillsContainer.innerHTML = `<h2>Skills:<br> ${formattedSkills}</h2>`;
       })
       .catch(error => {
-        console.error("Error fetching monster skills:", error);
+          console.error("Error fetching monster skills:", error);
       });
-  }
+}

static/js/updateMonsterStats.js

@@ -11,6 +11,7 @@ function updateMonsterStats() {
         statsContainer.innerHTML = `<p>Max Level: ${data["Max Level"]}</p>
                                     <p>Experience: ${data.Experience}</p>
                                     <p>Health Points: ${data["Health Points"]}</p>
+                                    <p>Mana Points: ${data["Mana Points"]}</p>
                                     <p>Attack: ${data.Attack}</p>
                                     <p>Defense: ${data.Defense}</p>
                                     <p>Agility: ${data.Agility}</p>