From f22e2994ce5cd8b9564c5e7e205fb8659a5029b5 Mon Sep 17 00:00:00 2001
From: 0ceanSlim <chriskerr@gmx.com>
Date: Wed, 21 Feb 2024 10:31:56 -0500
Subject: [PATCH] styling stats

---
 static/js/updateMonsterFamily.js |  2 +-
 static/js/updateMonsterName.js   |  2 +-
 static/js/updateMonsterStats.js  | 13 +++++++------
 static/style/output.css          |  8 ++++++++
 templates/app.html               | 32 ++++++++++++++++++--------------
 5 files changed, 35 insertions(+), 22 deletions(-)

diff --git a/static/js/updateMonsterFamily.js b/static/js/updateMonsterFamily.js
index 40fda5c..2a70cbf 100644
--- a/static/js/updateMonsterFamily.js
+++ b/static/js/updateMonsterFamily.js
@@ -8,7 +8,7 @@ function updateMonsterFamily() {
       .then(data => {
         // Update the HTML content with the monster family
         var familyContainer = document.getElementById("monsterFamilyContainer");
-        familyContainer.innerHTML = `<h2>${data.Family}</h2>`;
+        familyContainer.innerHTML = `<h2>Family: ${data.Family}</h2>`;
       })
       .catch(error => {
         console.error("Error fetching monster family:", error);
diff --git a/static/js/updateMonsterName.js b/static/js/updateMonsterName.js
index 24677dc..ca7ba39 100644
--- a/static/js/updateMonsterName.js
+++ b/static/js/updateMonsterName.js
@@ -8,7 +8,7 @@ function updateMonsterName() {
       .then(data => {
         // Update the HTML content with the monster name
         var nameContainer = document.getElementById("monsterNameContainer");
-        nameContainer.innerHTML = `<h2>${data.name}</h2>`;
+        nameContainer.innerHTML = `<h2 class="text-3xl font-bold">${data.name}</h2>`;
       })
       .catch(error => {
         console.error("Error fetching monster name:", error);
diff --git a/static/js/updateMonsterStats.js b/static/js/updateMonsterStats.js
index c047950..50f96b1 100644
--- a/static/js/updateMonsterStats.js
+++ b/static/js/updateMonsterStats.js
@@ -8,13 +8,14 @@ function updateMonsterStats() {
       .then(data => {
         // Update the HTML content with the monster stats
         var statsContainer = document.getElementById("monsterStatsContainer");
-        statsContainer.innerHTML = `<p>Agility: ${data.Agility}</p>
-                                   <p>Attack: ${data.Attack}</p>
-                                   <p>Defense: ${data.Defense}</p>
-                                   <p>Experience: ${data.Experience}</p>
-                                   <p>Health Points: ${data["Health Points"]}</p>
+        statsContainer.innerHTML = `<p>Max Level: ${data["Max Level"]}</p>
+                                    <p>Experience: ${data.Experience}</p>
+                                    <p>Health Points: ${data["Health Points"]}</p>
+                                    <p>Attack: ${data.Attack}</p>
+                                    <p>Defense: ${data.Defense}</p>
+                                    <p>Agility: ${data.Agility}</p>
                                    <p>Intelligence: ${data.Intelligence}</p>
-                                   <p>Max Level: ${data["Max Level"]}</p>`;
+                                   `;
       })
       .catch(error => {
         console.error("Error fetching monster stats:", error);
diff --git a/static/style/output.css b/static/style/output.css
index 1b8f4ac..52f71a1 100644
--- a/static/style/output.css
+++ b/static/style/output.css
@@ -585,6 +585,10 @@ video {
   margin-top: 1rem;
 }
 
+.ml-2 {
+  margin-left: 0.5rem;
+}
+
 .block {
   display: block;
 }
@@ -626,6 +630,10 @@ video {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
+.content-center {
+  align-content: center;
+}
+
 .items-center {
   align-items: center;
 }
diff --git a/templates/app.html b/templates/app.html
index bcc9ee8..bec11b6 100644
--- a/templates/app.html
+++ b/templates/app.html
@@ -29,22 +29,26 @@
   >
   </iframe>
 
-  <div id="monsterNameContainer">
-    <!-- Monster name will be displayed here -->
-  </div>
+  <div class="grid-cols-1 p-2 ml-2 border-2 rounded-md border-slate-400">
+    <div id="monsterNameContainer" class="text-center">
+      <!-- Monster name will be displayed here -->
+    </div>
 
-  <div id="monsterFamilyContainer">
-    <!-- Monster Family will be displayed here-->
+    <div id="monsterFamilyContainer">
+      <!-- Monster Family will be displayed here-->
+    </div>
+    
+    <div id="monsterStatsContainer">
+      <!-- Monster stats will be displayed here -->
+    </div>
+    <!--TODO Add monster Skills to API-->
+    <div id="monsterSkillsContainer">
+      <!-- Monster Skills will be displayed here-->
+    </div>
+    <div id="monsterLocationContainer">
+      <!-- Monster Location will be displayed here-->
+    </div>
   </div>
-  
-  <div id="monsterStatsContainer">
-    <!-- Monster stats will be displayed here -->
-  </div>
-  
-  <div id="monsterLocationContainer">
-    <!-- Monster Location will be displayed here-->
-  </div>
-