.gitignore

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

app.py

@@ -3,7 +3,7 @@ import sqlite3, os
 
 app = Flask(__name__)
 
-DATABASE = "src/database.db"
+DATABASE = "static/data/monsters.db"
 
 
 def connect_db():
@@ -32,29 +32,26 @@ def show_app():
     js_files = get_js_files()
     return render_template("app.html", js_files=js_files)
 
-#Serve Monster Sprites
+#Retrieve 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')
 
-#Serve Favicon
+#Retrieve Favicon
 @app.route('/img/favicon.ico')
 def serve_favicon():
     return send_from_directory( '','static/img/favicon.ico')
 
-#API Calls
+@app.route("/get_families")
-
+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("/api/monsters")
+@app.route("/get_monsters")
-def json_monsters():
+def get_monsters():
     selected_family = request.args.get("family")
     cursor = g.db.cursor()
 
@@ -73,58 +70,6 @@ def json_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("/api/families")
+    fetch("/get_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(`/api/monsters?family=${selectedFamily}`)
+    fetch(`/get_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,6 +540,40 @@ 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;
 }
@@ -631,29 +665,14 @@ video {
   border-color: rgb(20 184 166 / var(--tw-border-opacity));
 }
 
-.border-purple-600 {
+.bg-slate-700 {
-  --tw-border-opacity: 1;
+  --tw-bg-opacity: 1;
-  border-color: rgb(147 51 234 / var(--tw-border-opacity));
+  background-color: rgb(51 65 85 / var(--tw-bg-opacity));
 }
 
-.border-purple-500 {
+.bg-slate-800 {
-  --tw-border-opacity: 1;
+  --tw-bg-opacity: 1;
-  border-color: rgb(168 85 247 / var(--tw-border-opacity));
+  background-color: rgb(30 41 59 / var(--tw-bg-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 {
@@ -661,21 +680,6 @@ 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-neutral-800">
+  <body class="content-center justify-center p-2 m-2 font-mono text-white bg-slate-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 rounded-md border-slate-400"
+      class="pl-2 pr-2 ml-4 border-2 border-teal-500 rounded-md"
       height="456"
       width="280"
     >
@@ -30,7 +30,7 @@
       <iframe
         id="monsterSpriteIframe"
         src=""
-        class="p-2 ml-8 border-2 rounded-md border-slate-400"
+        class="p-2 ml-8 border-2 border-teal-500 rounded-md"
         height="200"
         width="200"
       >
@@ -38,7 +38,7 @@
       <iframe
         id="breedingIframe"
         src=""
-        class="p-2 mt-4 border-2 rounded-md border-slate-400"
+        class="p-2 mt-4 border-2 border-teal-500 rounded-md"
         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 ">
+  <div class="mt-4 text-purple-400 hover:text-purple-200">
     <a
       href="https://git.happytavern.co/oceanslim/dwm-app"
       target="_blank"
-      class="text-purple-400 hover:text-purple-200 hover:underline"
+      class="text-teal-500 hover:underline"
     >
       View the git repository
     </a>