styling changes

.gitignore

@@ -0,0 +1 @@
+__pycache__

app.py

@@ -3,7 +3,7 @@ import sqlite3, os
 
 app = Flask(__name__)
 
-DATABASE = "static/data/monsters.db"
+DATABASE = "src/database.db"
 
 
 def connect_db():
@@ -32,26 +32,29 @@ def show_app():
     js_files = get_js_files()
     return render_template("app.html", js_files=js_files)
 
-#Retrieve Monster Sprites
+#Serve Monster Sprites
 @app.route('/img/monster/<selected_monster>.png')
 def serve_monster_sprite(selected_monster):
     return send_from_directory('static/img/monster/', f'{selected_monster}.png')
 
-#Retrieve Favicon
+#Serve Favicon
 @app.route('/img/favicon.ico')
 def serve_favicon():
     return send_from_directory( '','static/img/favicon.ico')
 
-@app.route("/get_families")
+#API Calls
-def get_families():
+
+# List All Families
+@app.route("/api/families")
+def json_families():
     cursor = g.db.cursor()
     cursor.execute("SELECT DISTINCT name FROM families")
     families = [row[0] for row in cursor.fetchall()]
     return jsonify(families)
 
-
+# List All Monsters
-@app.route("/get_monsters")
+@app.route("/api/monsters")
-def get_monsters():
+def json_monsters():
     selected_family = request.args.get("family")
     cursor = g.db.cursor()
 
@@ -70,6 +73,58 @@ def get_monsters():
     return jsonify(monsters)
 
 
+@app.route("/api/monsters/stats")
+def json_monsters_stats():
+    cursor = g.db.cursor()
+
+    # Check if 'monster' argument is provided
+    selected_monster = request.args.get("monster")
+
+    if selected_monster:
+        # Fetch specific stats for the monster
+        cursor.execute("""
+            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
+            FROM monsters
+            WHERE LOWER(name) = LOWER(?)
+        """, (selected_monster.lower(),))
+
+        # Fetch the result and convert it to a dictionary
+        monster_stats = cursor.fetchone()
+
+        if monster_stats:
+            # Map stat names to descriptive labels
+            stat_labels = {
+                "max_level": "Max Level",
+                "experience": "Experience",
+                "health_points": "Health Points",
+                "attack": "Attack",
+                "defense": "Defense",
+                "agility": "Agility",
+                "intelligence": "Intelligence"            
+                }
+
+            # 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"])}
+            }
+
+            return jsonify(formatted_stats)
+        else:
+            return jsonify({"error": "Monster not found"}), 404
+    else:
+        return jsonify({"error": "Monster name not provided"}), 400
+    
+# Render HTML Templates
+
 @app.route("/monster/<monster_name>")
 def monster_stats(monster_name):
     cursor = g.db.cursor()

static/js/indexListener.js

@@ -6,7 +6,7 @@ document.addEventListener("DOMContentLoaded", function () {
     updateMonsterDropdownByFamily();
 
     // Fetch families data from the server and populate families dropdown
-    fetch("/get_families")
+    fetch("/api/families")
         .then(response => response.json())
         .then(data => {
             populateDropdown(familyDropdown, data);

static/js/updateMonsterDropdownByFamily.js

@@ -2,7 +2,7 @@ function updateMonsterDropdownByFamily() {
     const selectedFamily = familyDropdown.value;
 
     // Fetch monsters data from the server based on the selected family
-    fetch(`/get_monsters?family=${selectedFamily}`)
+    fetch(`/api/monsters?family=${selectedFamily}`)
         .then(response => response.json())
         .then(data => populateDropdown(monsterDropdown, data))
         .catch(error => console.error("Error fetching monsters:", error));

static/style/output.css

@@ -540,40 +540,6 @@ video {
   --tw-backdrop-sepia:  ;
 }
 
-.container {
-  width: 100%;
-}
-
-@media (min-width: 640px) {
-  .container {
-    max-width: 640px;
-  }
-}
-
-@media (min-width: 768px) {
-  .container {
-    max-width: 768px;
-  }
-}
-
-@media (min-width: 1024px) {
-  .container {
-    max-width: 1024px;
-  }
-}
-
-@media (min-width: 1280px) {
-  .container {
-    max-width: 1280px;
-  }
-}
-
-@media (min-width: 1536px) {
-  .container {
-    max-width: 1536px;
-  }
-}
-
 .static {
   position: static;
 }
@@ -665,14 +631,29 @@ video {
   border-color: rgb(20 184 166 / var(--tw-border-opacity));
 }
 
-.bg-slate-700 {
+.border-purple-600 {
-  --tw-bg-opacity: 1;
+  --tw-border-opacity: 1;
-  background-color: rgb(51 65 85 / var(--tw-bg-opacity));
+  border-color: rgb(147 51 234 / var(--tw-border-opacity));
 }
 
-.bg-slate-800 {
+.border-purple-500 {
-  --tw-bg-opacity: 1;
+  --tw-border-opacity: 1;
-  background-color: rgb(30 41 59 / var(--tw-bg-opacity));
+  border-color: rgb(168 85 247 / var(--tw-border-opacity));
+}
+
+.border-purple-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(192 132 252 / var(--tw-border-opacity));
+}
+
+.border-orange-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(251 146 60 / var(--tw-border-opacity));
+}
+
+.border-slate-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(148 163 184 / var(--tw-border-opacity));
 }
 
 .bg-slate-900 {
@@ -680,6 +661,21 @@ video {
   background-color: rgb(15 23 42 / var(--tw-bg-opacity));
 }
 
+.bg-gray-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
+}
+
+.bg-gray-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
+}
+
+.bg-neutral-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(38 38 38 / var(--tw-bg-opacity));
+}
+
 .p-2 {
   padding: 0.5rem;
 }

templates/.layout.html

@@ -7,7 +7,7 @@
     <link rel="stylesheet" href="../static/style/output.css" />
     {% block head %}{% endblock %}
   </head>
-  <body class="content-center justify-center p-2 m-2 font-mono text-white bg-slate-800">
+  <body class="content-center justify-center p-2 m-2 font-mono text-white bg-neutral-800">
     {% block body %} {% endblock %}
   </body>
   {% for file in js_files %}

templates/app.html

@@ -21,7 +21,7 @@
     <iframe
       id="monsterIframe"
       src=""
-      class="pl-2 pr-2 ml-4 border-2 border-teal-500 rounded-md"
+      class="pl-2 pr-2 ml-4 border-2 rounded-md border-slate-400"
       height="456"
       width="280"
     >
@@ -30,7 +30,7 @@
       <iframe
         id="monsterSpriteIframe"
         src=""
-        class="p-2 ml-8 border-2 border-teal-500 rounded-md"
+        class="p-2 ml-8 border-2 rounded-md border-slate-400"
         height="200"
         width="200"
       >
@@ -38,7 +38,7 @@
       <iframe
         id="breedingIframe"
         src=""
-        class="p-2 mt-4 border-2 border-teal-500 rounded-md"
+        class="p-2 mt-4 border-2 rounded-md border-slate-400"
         height="200"
         width="272"
       >
@@ -57,11 +57,11 @@
     repository. Feel free to explore the code, report issues, and submit pull
     requests.
   </p>
-  <div class="mt-4 text-purple-400 hover:text-purple-200">
+  <div class="mt-4 ">
     <a
       href="https://git.happytavern.co/oceanslim/dwm-app"
       target="_blank"
-      class="text-teal-500 hover:underline"
+      class="text-purple-400 hover:text-purple-200 hover:underline"
     >
       View the git repository
     </a>