more refactoring of breeds for clariy and uniformity

app.py

@@ -121,8 +121,9 @@ def monster_stats(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"})
@@ -136,7 +137,7 @@ def get_breeding_combinations():
     base_combinations, mate_combinations = get_breeding_info(breed_id)
 
     return render_template(
-        "breeding.html",
+        "breeds.html",
         selected_monster={
             "name": selected_monster,
             "base_combinations": base_combinations,

static/js/indexListener.js

@@ -1,6 +1,8 @@
 document.addEventListener("DOMContentLoaded", function () {
     const familyDropdown = document.getElementById("familyDropdown");
     const monsterDropdown = document.getElementById("monsterDropdown");
+    //const parent = document.getElementById("parent")
+
     // Implementing Family Icon Grid in place of family dropdown
     //const familyGrid = document.getElementById("familyGrid")
 
@@ -27,8 +29,14 @@ document.addEventListener("DOMContentLoaded", function () {
     });
 
     // Listener for a click on the one of the family icons
-    //familyGrid.addEventListener("on click", function() {
+    //familyGrid.addEventListener("click", function() {
     //    updateMonsterGrid(); // Need a function for this too...
     //});
 
+    // Listener for a click on a breeding parent
+    //parent.addEventListener("click", function() {
+    //    updateMonstersDropdown();
+    //    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;

templates/breeds.html

@@ -17,7 +17,7 @@
           <h3 class="text-lg font-bold">Base</h3>
           <ul>
             {% for combination in selected_monster.base_combinations %}
-            <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 }}"
                 >{{ combination }}</span
@@ -30,7 +30,7 @@
           <h3 class="text-lg font-bold">Mates</h3>
           <ul>
             {% for combination in selected_monster.mate_combinations %}
-            <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 }}"
                 >{{ combination }}</span
@@ -42,5 +42,6 @@
       </div>
       {% endif %}
     </div>
+
   </body>
 </html>