adjustments, update from

click still not working

app.py

@@ -112,6 +112,63 @@ def monster_info(monster_name):
         },
     )
 
+@app.route("/monster_info_json/<monster_name>")
+def monster_info_json(monster_name):
+    cursor = g.db.cursor()
+
+    # Retrieve monster information from the database based on name
+    cursor.execute(
+        """
+        SELECT
+            monsters.id, monsters.name, families.name AS family, monsters.in_story,
+            monsters.agl, monsters.int, monsters.maxlvl, monsters.atk, monsters.mp,
+            monsters.exp, monsters.hp, monsters.def
+        FROM
+            monsters
+        JOIN families ON monsters.family_id = families.id
+        WHERE
+            monsters.name = ?
+    """,
+        (monster_name,),
+    )
+
+    monster_info = cursor.fetchone()
+
+    if monster_info is None:
+        abort(404)
+
+    # Retrieve skills for the monster
+    cursor.execute("SELECT skill FROM skills WHERE monster_id = ?", (monster_info[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],),
+    )
+    spawn_locations = [
+        {"map": row[0], "description": row[1]} for row in cursor.fetchall()
+    ]
+
+    return jsonify(
+        monster={
+            "id": monster_info[0],
+            "name": monster_info[1],
+            "family": monster_info[2],
+            "in_story": "Yes" if monster_info[3] else "No",
+            "agl": monster_info[4],
+            "int": monster_info[5],
+            "maxlvl": monster_info[6],
+            "atk": monster_info[7],
+            "mp": monster_info[8],
+            "exp": monster_info[9],
+            "hp": monster_info[10],
+            "def": monster_info[11],
+            "skills": skills,
+            "spawn_locations": spawn_locations,
+        }
+    )
+
 
 # Update the breeding route
 @app.route("/breeding")

static/js/breeding.js

@@ -0,0 +1,76 @@
+// breeding.js
+
+document.addEventListener("DOMContentLoaded", function () {
+    const monsterNames = document.querySelectorAll(".monster-name");
+    const familyDropdown = document.getElementById("familyDropdown");
+    const monsterDropdown = document.getElementById("monsterDropdown");
+
+    // Add click event listener to each monster name
+    monsterNames.forEach(name => {
+        name.addEventListener("click", function () {
+            const selectedMonster = this.dataset.name;
+
+            // Update the monsterDropdown and trigger iframes update
+            updateDropdownAndIframes(selectedMonster, familyDropdown, monsterDropdown);
+        });
+    });
+});
+
+function updateDropdownAndIframes(selectedMonster, familyDropdown, monsterDropdown) {
+    // Update the monsterDropdown value
+    monsterDropdown.value = selectedMonster;
+
+    // Update families dropdown (if needed)
+    updateMonstersDropdown(familyDropdown);
+
+    // Trigger updateIframes function
+    updateIframes(familyDropdown, monsterDropdown);
+}
+
+function updateMonstersDropdown(familyDropdown) {
+    const selectedFamily = familyDropdown.value;
+
+    // Fetch monsters data from the server based on the selected family
+    fetch(`/get_monsters?family=${selectedFamily}`)
+        .then(response => response.json())
+        .then(data => populateDropdown(monsterDropdown, data))
+        .catch(error => console.error("Error fetching monsters:", error));
+}
+
+function updateIframes(familyDropdown, monsterDropdown) {
+    const selectedFamily = familyDropdown.value;
+    const selectedMonster = monsterDropdown.value;
+
+    // Update monsterIframe src based on selected family and monster
+    const monsterIframeSrc = selectedMonster
+        ? `/monster/${selectedMonster}`
+        : selectedFamily
+        ? `/monster/${selectedFamily}`
+        : "about:blank";
+
+    // Assuming you have these iframe elements defined somewhere
+    const monsterIframe = document.getElementById("monsterIframe");
+    const breedingIframe = document.getElementById("breedingIframe");
+
+    monsterIframe.src = monsterIframeSrc;
+
+    // Update breedingIframe src based on the selected monster
+    const breedingIframeSrc = selectedMonster
+        ? `/get_breeding_combinations?monster=${selectedMonster}`
+        : "about:blank";
+
+    breedingIframe.src = breedingIframeSrc;
+}
+
+function populateDropdown(dropdown, data) {
+    // Clear existing options
+    dropdown.innerHTML = '<option value="">All</option>';
+
+    // Populate dropdown options
+    data.forEach(item => {
+        const option = document.createElement("option");
+        option.value = item;
+        option.text = item;
+        dropdown.appendChild(option);
+    });
+}

static/js/index.js

@@ -71,33 +71,4 @@ document.addEventListener("DOMContentLoaded", function () {
         breedingIframe.src = breedingIframeSrc;
     }
 
-//I was trying to get rid of the scroll bars but h-auto/fit wasn't working
-// This works to resize but still leaves some scrollbar
-//to-do:fix
-
-    // Function to resize iframe
-    //function resizeIframe(iframe) {
-    //    const body = iframe.contentDocument.body;
-    //    const html = iframe.contentDocument.documentElement;
-    //
-    //    const height = Math.max(
-    //        body.scrollHeight,
-    //        body.offsetHeight,
-    //        html.clientHeight,
-    //        html.scrollHeight,
-    //        html.offsetHeight
-    //    );
-    //
-    //    iframe.style.height = height + "px";
-    //}
-    
-
-    // Add event listeners for iframe load
-    monsterIframe.addEventListener("load", function () {
-        resizeIframe(monsterIframe);
-    });
-
-    breedingIframe.addEventListener("load", function () {
-        resizeIframe(breedingIframe);
-    });
 });

static/style/output.css

@@ -548,14 +548,6 @@ video {
   grid-column: span 1 / span 1;
 }
 
-.float-right {
-  float: right;
-}
-
-.float-left {
-  float: left;
-}
-
 .m-4 {
   margin: 1rem;
 }
@@ -576,18 +568,6 @@ video {
   margin-top: 1rem;
 }
 
-.mt-6 {
-  margin-top: 1.5rem;
-}
-
-.mt-8 {
-  margin-top: 2rem;
-}
-
-.mt-20 {
-  margin-top: 5rem;
-}
-
 .flex {
   display: flex;
 }
@@ -596,54 +576,26 @@ video {
   display: grid;
 }
 
-.h-auto {
+.h-max {
-  height: auto;
+  height: -moz-max-content;
-}
+  height: max-content;
-
-.h-fit {
-  height: -moz-fit-content;
-  height: fit-content;
-}
-
-.h-10 {
-  height: 2.5rem;
 }
 
 .h-96 {
   height: 24rem;
 }
 
-.h-1\/2 {
-  height: 50%;
-}
-
-.h-3\/4 {
-  height: 75%;
-}
-
-.h-max {
-  height: -moz-max-content;
-  height: max-content;
-}
-
 .w-auto {
   width: auto;
 }
 
-.flex-1 {
+.w-fit {
-  flex: 1 1 0%;
+  width: -moz-fit-content;
+  width: fit-content;
 }
 
-.flex-auto {
+.cursor-pointer {
-  flex: 1 1 auto;
+  cursor: pointer;
-}
-
-.flex-initial {
-  flex: 0 1 auto;
-}
-
-.resize {
-  resize: both;
 }
 
 .grid-cols-1 {
@@ -658,14 +610,6 @@ video {
   gap: 0.25rem;
 }
 
-.gap-4 {
-  gap: 1rem;
-}
-
-.overflow-hidden {
-  overflow: hidden;
-}
-
 .rounded-md {
   border-radius: 0.375rem;
 }
@@ -724,12 +668,12 @@ video {
   font-weight: 700;
 }
 
-.text-blue-500 {
-  --tw-text-opacity: 1;
-  color: rgb(59 130 246 / var(--tw-text-opacity));
-}
-
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
+
+.hover\:text-red-700:hover {
+  --tw-text-opacity: 1;
+  color: rgb(185 28 28 / var(--tw-text-opacity));
+}

templates/breeding.html

@@ -2,37 +2,45 @@
 
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+<head>
-    <meta charset="UTF-8" />
+    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Breeding Combinations</title>
-    <link rel="stylesheet" href="../static/style/output.css" />
+    <link rel="stylesheet" href="../static/style/output.css">
-  </head>
+    <script src="{{ url_for('static', filename='js/breeding.js') }}"></script>
-  <body class="bg-slate-700 font-mono text-white">
+</head>
+<body class="font-mono text-white bg-slate-700">
     <div id="breedingCombinations">
         {% if selected_monster %}
-      <h2 class="font-bold text-xl mt-4">
+            <h2 class="mt-4 text-xl font-bold">
                 Possible Breeding Pairs for {{ selected_monster.name }}
             </h2>
             <div class="grid grid-cols-2 gap-1">
                 <div class="col-span-1">
-          <h3 class="font-bold text-lg">Base</h3>
+                    <h3 class="text-lg font-bold">Base</h3>
                     <ul>
                         {% for combination in selected_monster.base_combinations %}
-            <li>{{ combination }}</li>
+                            <li 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>
+                            </li>
                         {% endfor %}
                     </ul>
                 </div>
                 <div class="col-span-1">
-          <h3 class="font-bold text-lg">Mates</h3>
+                    <h3 class="text-lg font-bold">Mates</h3>
                     <ul>
                         {% for combination in selected_monster.mate_combinations %}
-            <li>{{ combination }}</li>
+                            <li 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>
+                            </li>
                         {% endfor %}
                     </ul>
                 </div>
             </div>
         {% endif %}
     </div>
-  </body>
+    <script src="{{ url_for('static', filename='js/breeding.js') }}"></script>
+</body>
 </html>

templates/index.html

@@ -26,17 +26,17 @@
         <iframe
           id="monsterIframe"
           src=""
-          class="w-auto h-max mt-4 ml-4 border-2 border-teal-500 rounded-md"
+          class="w-auto mt-4 ml-4 border-2 border-teal-500 rounded-md h-96"
-          onload="resizeIframe(this)"
         ></iframe>
 
         <iframe
           id="breedingIframe"
           src=""
-          class="w-auto mt-4 ml-4 p-2 border-2 border-teal-500 rounded-md"
+          class="w-auto p-2 mt-4 ml-4 border-2 border-teal-500 rounded-md"
-          onload="resizeIframe(this)"
         ></iframe>
       </div>
     </div>
+    <script src="{{ url_for('static', filename='js/index.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/breeding.js') }}"></script>
   </body>
 </html>