tried to add family images container

static/js/index.js

@@ -70,5 +70,101 @@ document.addEventListener("DOMContentLoaded", function () {
 
         breedingIframe.src = breedingIframeSrc;
     }
+    document.addEventListener("DOMContentLoaded", function () {
+        const familyImagesContainer = document.getElementById("familyImagesContainer");
+        const monsterDropdown = document.getElementById("monsterDropdown");
+        const monsterIframe = document.getElementById("monsterIframe");
+        const breedingIframe = document.getElementById("breedingIframe");
+    
+        // Initialize family images and iframes
+        updateFamilyImages();
+        updateIframes();
+    
+        // Fetch families data from the server
+        fetch("/get_families")
+            .then(response => response.json())
+            .then(data => {
+                populateFamilyImages(familyImagesContainer, data);
+                updateIframes();
+            })
+            .catch(error => console.error("Error fetching families:", error));
+    
+        familyImagesContainer.addEventListener("click", function (event) {
+            const selectedFamily = event.target.dataset.family;
+    
+            if (selectedFamily) {
+                // Update monsterDropdown and trigger iframes update
+                updateMonsterDropdown(selectedFamily);
+                updateIframes();
+            }
+        });
+    
+        monsterDropdown.addEventListener("change", function () {
+            updateIframes();
+        });
+    
+        function populateFamilyImages(container, data) {
+            container.innerHTML = ''; // Clear existing images
+    
+            // Populate family images
+            data.forEach(family => {
+                const image = document.createElement("img");
+                image.src = `../static/img/${family}.png`;
+                image.alt = family;
+                image.dataset.family = family; // Set dataset for identification
+                container.appendChild(image);
+            });
+        }
+    
+        function updateFamilyImages() {
+            // Fetch families data from the server
+            fetch("/get_families")
+                .then(response => response.json())
+                .then(data => populateFamilyImages(familyImagesContainer, data))
+                .catch(error => console.error("Error fetching families:", error));
+        }
+    
+        function updateMonsterDropdown(selectedFamily) {
+            // 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 populateDropdown(dropdown, data) {
+            // Clear existing options
+            dropdown.innerHTML = '<option value="">All Monsters</option>';
+    
+            // Populate dropdown options
+            data.forEach(item => {
+                const option = document.createElement("option");
+                option.value = item;
+                option.text = item;
+                dropdown.appendChild(option);
+            });
+        }
+    
+        function updateIframes() {
+            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";
+    
+            monsterIframe.src = monsterIframeSrc;
+    
+            // Update breedingIframe src based on the selected monster
+            const breedingIframeSrc = selectedMonster
+                ? `/get_breeding_combinations?monster=${selectedMonster}`
+                : "about:blank";
+    
+            breedingIframe.src = breedingIframeSrc;
+        }
     
     });
+});

templates/index.html

@@ -11,7 +11,7 @@
     <h1 class="text-2xl font-black text-white">
       Welcome to the Dragon Warrior Monsters 2 App
     </h1>
-
+    <div id="familyImagesContainer" class="flex mt-2"></div>
     <div>
       <label for="familyDropdown">Select Family:</label>
       <select id="familyDropdown" class="p-2 rounded-md bg-slate-800">