progress on clicking breeding partners

static/js/breeding.js

@@ -1,5 +1,3 @@
-// breeding.js
-
 document.addEventListener("DOMContentLoaded", function () {
     const monsterNames = document.querySelectorAll(".monster-name");
     const familyDropdown = document.getElementById("familyDropdown");
@@ -17,60 +15,72 @@ document.addEventListener("DOMContentLoaded", function () {
 });
 
 function updateDropdownAndIframes(selectedMonster, familyDropdown, monsterDropdown) {
-    // Update the monsterDropdown value
-    monsterDropdown.value = selectedMonster;
+    // Check if both familyDropdown and monsterDropdown exist
+    if (familyDropdown && monsterDropdown) {
+        // Update the monsterDropdown value
+        monsterDropdown.value = selectedMonster;
 
-    // Update families dropdown (if needed)
-    updateMonstersDropdown(familyDropdown);
+        // Update families dropdown
+        updateMonstersDropdown(familyDropdown);
 
-    // Trigger updateIframes function
-    updateIframes(familyDropdown, monsterDropdown);
+        // Trigger updateIframes function
+        updateIframes(familyDropdown, monsterDropdown);
+    }
 }
 
 function updateMonstersDropdown(familyDropdown) {
-    const selectedFamily = familyDropdown.value;
+    // Check if familyDropdown exists
+    if (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));
+        // 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;
+    // Check if both familyDropdown and monsterDropdown exist
+    if (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";
+        // 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");
+        // Assuming you have these iframe elements defined somewhere
+        const monsterIframe = document.getElementById("monsterIframe");
+        const breedingIframe = document.getElementById("breedingIframe");
 
-    monsterIframe.src = monsterIframeSrc;
+        monsterIframe.src = monsterIframeSrc;
 
-    // Update breedingIframe src based on the selected monster
-    const breedingIframeSrc = selectedMonster
-        ? `/get_breeding_combinations?monster=${selectedMonster}`
-        : "about:blank";
+        // Update breedingIframe src based on the selected monster
+        const breedingIframeSrc = selectedMonster
+            ? `/get_breeding_combinations?monster=${selectedMonster}`
+            : "about:blank";
 
-    breedingIframe.src = breedingIframeSrc;
+        breedingIframe.src = breedingIframeSrc;
+    }
 }
 
 function populateDropdown(dropdown, data) {
-    // Clear existing options
-    dropdown.innerHTML = '<option value="">All</option>';
+    // Check if dropdown exists
+    if (dropdown) {
+        // 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);
-    });
+        // Populate dropdown options
+        data.forEach(item => {
+            const option = document.createElement("option");
+            option.value = item;
+            option.text = item;
+            dropdown.appendChild(option);
+        });
+    }
 }

static/style/output.css

@@ -540,40 +540,6 @@ 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;
 }
@@ -650,6 +616,11 @@ video {
   background-color: rgb(30 41 59 / var(--tw-bg-opacity));
 }
 
+.bg-purple-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(168 85 247 / var(--tw-bg-opacity));
+}
+
 .p-2 {
   padding: 0.5rem;
 }

templates/index.html

@@ -35,7 +35,8 @@
           src=""
           class="p-2 ml-4 border-2 border-teal-500 rounded-md"
           height="200"
-          width="272">
+          width="272"
+        >
         </iframe>
       </div>
     </div>