breeding iframe functioning as intended

app.py

@@ -113,5 +113,92 @@ def monster_info(monster_name):
     )
 
 
+# Update the breeding route
+@app.route("/breeding")
+def breeding():
+    # Get all monsters for dropdown
+    cursor = g.db.cursor()
+    cursor.execute("SELECT DISTINCT name FROM monsters")
+    monsters = [row[0] for row in cursor.fetchall()]
+
+    # Pass the monsters to the breeding template
+    return render_template("breeding.html", monsters=monsters)
+
+
+# Add this route for fetching breeding combinations
+@app.route("/get_breeding_combinations")
+def get_breeding_combinations():
+    selected_monster = request.args.get("monster")
+    if not selected_monster:
+        return jsonify({"error": "Invalid input"})
+
+    # Fetch breed ID based on the selected monster as a target
+    breed_id = get_breed_id(selected_monster)
+
+    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)
+
+    return render_template(
+        "breeding.html",
+        selected_monster={
+            "name": selected_monster,
+            "base_combinations": base_combinations,
+            "mate_combinations": mate_combinations,
+        },
+    )
+
+
+def get_breed_id(target_monster):
+    cursor = g.db.cursor()
+
+    # Fetch breed ID based on the selected monster as a target
+    cursor.execute(
+        """
+        SELECT breeds.id
+        FROM breeds
+        WHERE breeds.target = ?
+        """,
+        (target_monster,),
+    )
+
+    breed_id = cursor.fetchone()
+
+    if breed_id:
+        return breed_id[0]
+    else:
+        return None
+
+
+def get_breeding_info(breed_id):
+    cursor = g.db.cursor()
+
+    # Fetch base and mate breeding combinations based on the breed ID
+    cursor.execute(
+        """
+        SELECT requirement_type, requirement_value
+        FROM breed_requirements
+        WHERE breed_id = ?
+        """,
+        (breed_id,),
+    )
+
+    breeding_info = cursor.fetchall()
+
+    base_combinations = [
+        value
+        for (requirement_type, value) in breeding_info
+        if requirement_type == "base"
+    ]
+    mate_combinations = [
+        value
+        for (requirement_type, value) in breeding_info
+        if requirement_type == "mate"
+    ]
+
+    return base_combinations, mate_combinations
+
+
 if __name__ == "__main__":
     app.run(debug=True)

static/js/index.js

@@ -1,13 +1,12 @@
-// static/js/app.js
-
 document.addEventListener("DOMContentLoaded", function () {
     const familyDropdown = document.getElementById("familyDropdown");
     const monsterDropdown = document.getElementById("monsterDropdown");
-    const iframe = document.getElementById("monsterIframe");
+    const monsterIframe = document.getElementById("monsterIframe");
+    const breedingIframe = document.getElementById("breedingIframe");
 
-    // Initialize dropdowns and iframe
+    // Initialize dropdowns and iframes
     updateMonstersDropdown();
-    updateIframe();
+    updateIframes();
 
     // Fetch families data from the server
     fetch("/get_families")
@@ -15,17 +14,17 @@ document.addEventListener("DOMContentLoaded", function () {
         .then(data => {
             populateDropdown(familyDropdown, data);
             updateMonstersDropdown();
-            updateIframe();
+            updateIframes();
         })
         .catch(error => console.error("Error fetching families:", error));
 
     familyDropdown.addEventListener("change", function () {
         updateMonstersDropdown();
-        updateIframe();
+        updateIframes();
     });
 
     monsterDropdown.addEventListener("change", function () {
-        updateIframe();
+        updateIframes();
     });
 
     function populateDropdown(dropdown, data) {
@@ -51,17 +50,24 @@ document.addEventListener("DOMContentLoaded", function () {
             .catch(error => console.error("Error fetching monsters:", error));
     }
 
-    function updateIframe() {
+    function updateIframes() {
         const selectedFamily = familyDropdown.value;
         const selectedMonster = monsterDropdown.value;
 
-        // Update iframe src based on selected family and monster
-        const iframeSrc = selectedMonster
+        // Update monsterIframe src based on selected family and monster
+        const monsterIframeSrc = selectedMonster
             ? `/monster/${selectedMonster}`
             : selectedFamily
             ? `/monster/${selectedFamily}`
             : "about:blank";
 
-        iframe.src = iframeSrc;
+        monsterIframe.src = monsterIframeSrc;
+
+        // Update breedingIframe src based on the selected monster
+        const breedingIframeSrc = selectedMonster
+            ? `/get_breeding_combinations?monster=${selectedMonster}`
+            : "about:blank";
+
+        breedingIframe.src = breedingIframeSrc;
     }
 });

static/style/output.css

@@ -544,6 +544,10 @@ video {
   position: static;
 }
 
+.col-span-1 {
+  grid-column: span 1 / span 1;
+}
+
 .m-4 {
   margin: 1rem;
 }
@@ -564,14 +568,18 @@ video {
   margin-top: 1rem;
 }
 
-.mt-8 {
-  margin-top: 2rem;
+.flex {
+  display: flex;
 }
 
 .grid {
   display: grid;
 }
 
+.h-auto {
+  height: auto;
+}
+
 .w-auto {
   width: auto;
 }
@@ -592,19 +600,10 @@ video {
   border-radius: 0.375rem;
 }
 
-.border {
-  border-width: 1px;
-}
-
 .border-2 {
   border-width: 2px;
 }
 
-.border-gray-400 {
-  --tw-border-opacity: 1;
-  border-color: rgb(156 163 175 / var(--tw-border-opacity));
-}
-
 .border-teal-500 {
   --tw-border-opacity: 1;
   border-color: rgb(20 184 166 / var(--tw-border-opacity));
@@ -628,10 +627,6 @@ video {
   padding: 1rem;
 }
 
-.p-8 {
-  padding: 2rem;
-}
-
 .font-mono {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }

templates/breeding.html

@@ -0,0 +1,40 @@
+<!-- breeding.html -->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Breeding Combinations</title>
+    <link rel="stylesheet" href="../static/style/output.css" />
+  </head>
+  <body class="bg-slate-700">
+    <h1 class="font-bold text-blue-500">Breeding Combinations</h1>
+
+    <div id="breedingCombinations">
+      {% if selected_monster %}
+      <h2 class="font-bold text-blue-500 mt-4">
+        Breeding Combinations for {{ selected_monster.name }}
+      </h2>
+      <div class="grid grid-cols-2 gap-1">
+        <div class="col-span-1">
+          <h3 class="font-bold text-blue-500">Base Combinations</h3>
+          <ul>
+            {% for combination in selected_monster.base_combinations %}
+            <li>{{ combination }}</li>
+            {% endfor %}
+          </ul>
+        </div>
+        <div class="col-span-1">
+          <h3 class="font-bold text-blue-500">Mate Combinations</h3>
+          <ul>
+            {% for combination in selected_monster.mate_combinations %}
+            <li>{{ combination }}</li>
+            {% endfor %}
+          </ul>
+        </div>
+      </div>
+      {% endif %}
+    </div>
+  </body>
+</html>

templates/index.html

@@ -1,32 +1,47 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>DWM APP</title>
-    <link rel="stylesheet" href="../static/style/output.css">
+    <link rel="stylesheet" href="../static/style/output.css" />
     <script src="{{ url_for('static', filename='js/index.js') }}"></script>
-</head>
-<body class="p-4 m-4 font-mono text-white bg-slate-700">
-    <h1 class="text-2xl font-black text-white">Welcome to the Dragon Warrior Monsters 2 App</h1>
+  </head>
+  <body class="p-4 m-4 font-mono text-white bg-slate-700">
+    <h1 class="text-2xl font-black text-white">
+      Welcome to the Dragon Warrior Monsters 2 App
+    </h1>
 
     <div>
-        <label for="familyDropdown">Select Family:</label>
-        <select id="familyDropdown" class="p-2 rounded-md bg-slate-800">
-            <option value="" >All Families</option>
-        </select>
+      <label for="familyDropdown">Select Family:</label>
+      <select id="familyDropdown" class="p-2 rounded-md bg-slate-800">
+        <option value="">All Families</option>
+      </select>
 
-        <label for="monsterDropdown">Select Monster:</label>
-        <select id="monsterDropdown" class="p-2 rounded-md bg-slate-800">
-            <option value="">All Monsters</option>
-        </select>
+      <label for="monsterDropdown">Select Monster:</label>
+      <select id="monsterDropdown" class="p-2 rounded-md bg-slate-800">
+        <option value="">All Monsters</option>
+      </select>
+      <div id="modules" class="flex">
+        <iframe
+          id="monsterIframe"
+          src=""
+          class="w-auto mt-4 ml-4 border-2 border-teal-500 rounded-md"
+          onload="resizeIframe(this)"
+        ></iframe>
 
-        <iframe id="monsterIframe" src="" class="w-auto mt-4 ml-4 border-2 border-teal-500 rounded-md" onload="resizeIframe(this)"></iframe>
+        <iframe
+          id="breedingIframe"
+          class="w-auto mt-4 ml-4 h-auto border-2 border-teal-500 rounded-md"
+          onload="resizeIframe(this)"
+        ></iframe>
+      </div>
     </div>
     <script>
-        function resizeIframe(iframe) {
-            iframe.style.height = iframe.contentWindow.document.body.scrollHeight+ 16 +'px';
-        }
+      function resizeIframe(iframe) {
+        iframe.style.height =
+          iframe.contentWindow.document.body.scrollHeight + 4 + "px";
+      }
     </script>
-</body>
+  </body>
 </html>