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,17 +15,22 @@ document.addEventListener("DOMContentLoaded", function () {
 });
 
 function updateDropdownAndIframes(selectedMonster, familyDropdown, monsterDropdown) {
+    // Check if both familyDropdown and monsterDropdown exist
+    if (familyDropdown && monsterDropdown) {
         // Update the monsterDropdown value
         monsterDropdown.value = selectedMonster;
 
-    // Update families dropdown (if needed)
+        // Update families dropdown
         updateMonstersDropdown(familyDropdown);
 
         // Trigger updateIframes function
         updateIframes(familyDropdown, monsterDropdown);
+    }
 }
 
 function updateMonstersDropdown(familyDropdown) {
+    // Check if familyDropdown exists
+    if (familyDropdown) {
         const selectedFamily = familyDropdown.value;
 
         // Fetch monsters data from the server based on the selected family
@@ -35,9 +38,12 @@ function updateMonstersDropdown(familyDropdown) {
             .then(response => response.json())
             .then(data => populateDropdown(monsterDropdown, data))
             .catch(error => console.error("Error fetching monsters:", error));
+    }
 }
 
 function updateIframes(familyDropdown, monsterDropdown) {
+    // Check if both familyDropdown and monsterDropdown exist
+    if (familyDropdown && monsterDropdown) {
         const selectedFamily = familyDropdown.value;
         const selectedMonster = monsterDropdown.value;
 
@@ -60,9 +66,12 @@ function updateIframes(familyDropdown, monsterDropdown) {
             : "about:blank";
 
         breedingIframe.src = breedingIframeSrc;
+    }
 }
 
 function populateDropdown(dropdown, data) {
+    // Check if dropdown exists
+    if (dropdown) {
         // Clear existing options
         dropdown.innerHTML = '<option value="">All</option>';
 
@@ -73,4 +82,5 @@ function populateDropdown(dropdown, data) {
             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>