dropdowns refactor

app.py

@@ -62,10 +62,10 @@ def get_monsters():
 
 
 @app.route("/monster/<monster_name>")
-def monster_info(monster_name):
+def monster_stats(monster_name):
     cursor = g.db.cursor()
 
-    # Retrieve monster information from the database based on name
+    # Retrieve monster stats from the database based on name
     cursor.execute(
         """
         SELECT
@@ -81,39 +81,39 @@ def monster_info(monster_name):
         (monster_name,),
     )
 
-    monster_info = cursor.fetchone()
+    monster_stats = cursor.fetchone()
 
-    if monster_info is None:
+    if monster_stats is None:
         abort(404)
 
     # Retrieve skills for the monster
-    cursor.execute("SELECT skill FROM skills WHERE monster_id = ?", (monster_info[0],))
+    cursor.execute("SELECT skill FROM skills WHERE monster_id = ?", (monster_stats[0],))
     skills = [row[0] for row in cursor.fetchall()]
 
     # Retrieve spawn locations for the monster
     cursor.execute(
         "SELECT map, description FROM spawn_locations WHERE monster_id = ?",
-        (monster_info[0],),
+        (monster_stats[0],),
     )
     spawn_locations = [
         {"map": row[0], "description": row[1]} for row in cursor.fetchall()
     ]
 
     return render_template(
-        "monsters.html",
+        "stats.html",
         monster={
-            "id": monster_info[0],
+            "id": monster_stats[0],
-            "name": monster_info[1],
+            "name": monster_stats[1],
-            "family": monster_info[2],
+            "family": monster_stats[2],
-            "in_story": "Yes" if monster_info[3] else "No",
+            "in_story": "Yes" if monster_stats[3] else "No",
-            "agl": monster_info[4],
+            "agl": monster_stats[4],
-            "int": monster_info[5],
+            "int": monster_stats[5],
-            "maxlvl": monster_info[6],
+            "maxlvl": monster_stats[6],
-            "atk": monster_info[7],
+            "atk": monster_stats[7],
-            "mp": monster_info[8],
+            "mp": monster_stats[8],
-            "exp": monster_info[9],
+            "exp": monster_stats[9],
-            "hp": monster_info[10],
+            "hp": monster_stats[10],
-            "def": monster_info[11],
+            "def": monster_stats[11],
             "skills": skills,
             "spawn_locations": spawn_locations,
         },
@@ -121,8 +121,9 @@ def monster_info(monster_name):
 
 
 # Add this route for fetching breeding combinations
-@app.route("/get_breeding_combinations")
+@app.route("/breeds")
 def get_breeding_combinations():
+    
     selected_monster = request.args.get("monster")
     if not selected_monster:
         return jsonify({"error": "Invalid input"})
@@ -133,14 +134,14 @@ def get_breeding_combinations():
     if breed_id is None:
         return jsonify({"error": f"No breed information found for {selected_monster}"})
 
-    base_combinations, mate_combinations = get_breeding_info(breed_id)
+    base_pair, mate_pair = get_breeding_pairs(breed_id)
 
     return render_template(
-        "breeding.html",
+        "breeds.html",
         selected_monster={
             "name": selected_monster,
-            "base_combinations": base_combinations,
+            "base_pair": base_pair,
-            "mate_combinations": mate_combinations,
+            "mate_pair": mate_pair,
         },
     )
 
@@ -166,7 +167,7 @@ def get_breed_id(target_monster):
         return None
 
 
-def get_breeding_info(breed_id):
+def get_breeding_pairs(breed_id):
     cursor = g.db.cursor()
 
     # Fetch base and mate breeding combinations based on the breed ID
@@ -181,18 +182,18 @@ def get_breeding_info(breed_id):
 
     breeding_info = cursor.fetchall()
 
-    base_combinations = [
+    base_pair = [
         value
         for (requirement_type, value) in breeding_info
         if requirement_type == "base"
     ]
-    mate_combinations = [
+    mate_pair = [
         value
         for (requirement_type, value) in breeding_info
         if requirement_type == "mate"
     ]
 
-    return base_combinations, mate_combinations
+    return base_pair, mate_pair
 
 
 @app.route("/footer")

static/js/indexListener.js

@@ -1,11 +1,17 @@
 document.addEventListener("DOMContentLoaded", function () {
     const familyDropdown = document.getElementById("familyDropdown");
     const monsterDropdown = document.getElementById("monsterDropdown");
+    //const parent = document.getElementById("parent")
 
-    // Initialize dropdowns and iframes
+    // Implementing Family Icon Grid in place of family dropdown
-    updateMonstersDropdown();
+    //const familyGrid = document.getElementById("familyGrid")
 
-    // Fetch families data from the server
+    // Initialize dropdowns
+    updateMonstersDropdownByFamily();
+    // Initialize Family Grid();
+    // populateFamilyGrid();
+
+    // Fetch families data from the server and populate families dropdown
     fetch("/get_families")
         .then(response => response.json())
         .then(data => {
@@ -13,13 +19,24 @@ document.addEventListener("DOMContentLoaded", function () {
         })
         .catch(error => console.error("Error fetching families:", error));
 
+    // Listeners for Dropdown Changes
     familyDropdown.addEventListener("change", function () {
-        updateMonstersDropdown();
+        updateMonstersDropdownByFamily();
     });
 
     monsterDropdown.addEventListener("change", function () {
         updateIframes();
     });
 
+    // Listener for a click on the one of the family icons
+    //familyGrid.addEventListener("click", function() {
+    //    updateMonsterGrid(); // Need a function for this too...
+    //});
+
+    // Listener for a click on a breeding parent
+    //parent.addEventListener("click", function() {
+    //    updateMonstersDropdownBySelected();
+    //    updateIFrames();  
+    //});
 
 });

static/js/updateIFrames.js

@@ -13,7 +13,7 @@ function updateIframes() {
 
     // Update breedingIframe src based on the selected monster
     const breedingIframeSrc = selectedMonster
-        ? `/get_breeding_combinations?monster=${selectedMonster}`
+        ? `/breeds?monster=${selectedMonster}`
         : "about:blank";
 
     breedingIframe.src = breedingIframeSrc;

static/js/updateMonstersDropdownByFamily.js

@@ -1,4 +1,4 @@
-function updateMonstersDropdown() {
+function updateMonstersDropdownByFamily() {
     const selectedFamily = familyDropdown.value;
 
     // Fetch monsters data from the server based on the selected family

static/js/updateMonstersDropdownBySelected.js

@@ -0,0 +1,9 @@
+//function updateMonstersDropdownBySelected() {
+//    const selectedMonster = parent.value;
+//
+//    // Fetch monsters data from the server based on the selected monster
+//    fetch(`/monster/${selectedMonster}`)
+//        .then(response => response.json())
+//        .then(data => populateDropdown(monsterDropdown, data))
+//        .catch(error => console.error("Error fetching monsters:", error));
+//}

templates/breeds.html

@@ -5,22 +5,22 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Breeding Combinations</title>
+    <title>Breeding Pairs</title>
     <link rel="stylesheet" href="../static/style/output.css" />
   </head>
   <body class="font-mono text-white bg-slate-700">
-    <div id="breedingCombinations">
+    <div id="breedingPairs">
       {% if selected_monster %}
       <h2 class="text-xl font-bold text-center">Breeding Pairs</h2>
       <div class="grid grid-cols-2 gap-1">
         <div class="col-span-1">
           <h3 class="text-lg font-bold">Base</h3>
           <ul>
-            {% for combination in selected_monster.base_combinations %}
+            {% for pair in selected_monster.base_pair %}
-            <li class="text-center cursor-pointer hover:text-red-700 w-fit">
+            <li id="parent" class="text-center cursor-pointer hover:text-red-700 w-fit">
               <!-- Add a class to make the monster name clickable -->
-              <span class="monster-name" data-name="{{ combination }}"
+              <span class="monster-name" data-name="{{ pair }}"
-                >{{ combination }}</span
+                >{{ pair }}</span
               >
             </li>
             {% endfor %}
@@ -29,11 +29,11 @@
         <div class="col-span-1">
           <h3 class="text-lg font-bold">Mates</h3>
           <ul>
-            {% for combination in selected_monster.mate_combinations %}
+            {% for pair in selected_monster.mate_pair %}
-            <li class="cursor-pointer hover:text-red-700 w-fit">
+            <li id="parent" class="cursor-pointer hover:text-red-700 w-fit">
               <!-- Add a class to make the monster name clickable -->
-              <span class="monster-name" data-name="{{ combination }}"
+              <span class="monster-name" data-name="{{ pair }}"
-                >{{ combination }}</span
+                >{{ pair }}</span
               >
             </li>
             {% endfor %}

templates/stats.html

@@ -3,11 +3,10 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Monster Information</title>
+    <title>Monster Stats</title>
     <link rel="stylesheet" href="../static/style/output.css">
 </head>
 <body class="p-2 font-mono text-white bg-slate-700">
-    <h1>Monster Information</h1>
     <div>
         <h2>{{ monster.name }}</h2>
         <p><strong>Family:</strong> {{ monster.family }}</p>