Display Breeding Pairs with js and style

static/js/indexListener.js

@@ -25,5 +25,6 @@ document.addEventListener("DOMContentLoaded", function () {
         updateMonsterFamily();
         updateMonsterLocation();
         updateMonsterSkills();
+        updateBreedingPairs();
     });
 });

static/js/updateBreedingPairs.js

@@ -0,0 +1,53 @@
+function updateBreedingPairs() {
+    // Get the selected monster from the dropdown
+    var selectedMonster = document.getElementById("monsterDropdown").value;
+
+    // Fetch data from the API based on the selected monster
+    fetch(`/api/breeding/pairs/${selectedMonster}`)
+        .then(response => response.json())
+        .then(data => {
+            // Update the HTML element with breeding pairs
+            var breedingPairsContainer = document.getElementById("breedingPairsContainer");
+            breedingPairsContainer.innerHTML = `
+            <div class='text-center '>
+            <h3 class='text-xl font-bold mb-0.5'>Breeding Pairs:</h3>
+                <div class='text-xs mb-2 flex justify-center'>
+                    (<p class='text-red-300'>base</p> &nbsp;+&nbsp; <p class='text-blue-300'>mate</p>)
+                </div>
+            </div>
+            `;
+
+            if (data.breeding_pairs.length > 0) {
+                var pairsList = document.createElement("ul");
+                pairsList.classList.add('list-disc', 'ml-4');
+
+                data.breeding_pairs.forEach(pair => {
+                    var listItem = document.createElement("li");
+
+                    // Style "base" text
+                    var baseText = document.createElement("span");
+                    baseText.textContent = pair.base;
+                    baseText.classList.add('font-bold', 'text-red-300');
+
+                    // Style "mate" text
+                    var mateText = document.createElement("span");
+                    mateText.textContent = pair.mate;
+                    mateText.classList.add('font-bold', 'text-blue-300');
+
+                    // Combine "base" and "mate" texts in the list item
+                    listItem.appendChild(baseText);
+                    listItem.appendChild(document.createTextNode(" + "));
+                    listItem.appendChild(mateText);
+
+                    pairsList.appendChild(listItem);
+                });
+
+                breedingPairsContainer.appendChild(pairsList);
+            } else {
+                breedingPairsContainer.innerHTML += "<p class='text-red-500'>No breeding pairs found for " + selectedMonster + ".</p>";
+            }
+        })
+        .catch(error => {
+            console.error('Error fetching data:', error);
+        });
+}

static/style/output.css

@@ -565,6 +565,14 @@ video {
   margin-right: auto;
 }
 
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
+
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+
 .mb-4 {
   margin-bottom: 1rem;
 }
@@ -581,6 +589,10 @@ video {
   margin-left: 2rem;
 }
 
+.mt-1 {
+  margin-top: 0.25rem;
+}
+
 .mt-2 {
   margin-top: 0.5rem;
 }
@@ -589,12 +601,16 @@ video {
   margin-top: 1rem;
 }
 
-.mt-1 {
+.mr-2 {
-  margin-top: 0.25rem;
+  margin-right: 0.5rem;
 }
 
-.mb-1 {
+.mb-0 {
-  margin-bottom: 0.25rem;
+  margin-bottom: 0px;
+}
+
+.mb-0\.5 {
+  margin-bottom: 0.125rem;
 }
 
 .block {
@@ -622,6 +638,10 @@ video {
   width: 100%;
 }
 
+.flex-initial {
+  flex: 0 1 auto;
+}
+
 .border-collapse {
   border-collapse: collapse;
 }
@@ -630,6 +650,10 @@ video {
   cursor: pointer;
 }
 
+.list-disc {
+  list-style-type: disc;
+}
+
 .grid-cols-1 {
   grid-template-columns: repeat(1, minmax(0, 1fr));
 }
@@ -654,37 +678,6 @@ video {
   gap: 0.25rem;
 }
 
-.gap-0 {
-  gap: 0px;
-}
-
-.gap-0\.5 {
-  gap: 0.125rem;
-}
-
-.gap-2 {
-  gap: 0.5rem;
-}
-
-.gap-4 {
-  gap: 1rem;
-}
-
-.gap-x-0 {
-  -moz-column-gap: 0px;
-       column-gap: 0px;
-}
-
-.gap-x-0\.5 {
-  -moz-column-gap: 0.125rem;
-       column-gap: 0.125rem;
-}
-
-.gap-x-4 {
-  -moz-column-gap: 1rem;
-       column-gap: 1rem;
-}
-
 .gap-x-2 {
   -moz-column-gap: 0.5rem;
        column-gap: 0.5rem;
@@ -707,6 +700,11 @@ video {
   border-color: rgb(148 163 184 / var(--tw-border-opacity));
 }
 
+.border-gray-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(156 163 175 / var(--tw-border-opacity));
+}
+
 .bg-gray-900 {
   --tw-bg-opacity: 1;
   background-color: rgb(17 24 39 / var(--tw-bg-opacity));
@@ -768,6 +766,16 @@ video {
   line-height: 1.75rem;
 }
 
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
 .font-black {
   font-weight: 900;
 }
@@ -780,28 +788,82 @@ video {
   text-transform: capitalize;
 }
 
+.italic {
+  font-style: italic;
+}
+
 .leading-7 {
   line-height: 1.75rem;
 }
 
+.text-gray-600 {
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity));
+}
+
 .text-purple-400 {
   --tw-text-opacity: 1;
   color: rgb(192 132 252 / var(--tw-text-opacity));
 }
 
+.text-violet-500 {
+  --tw-text-opacity: 1;
+  color: rgb(139 92 246 / var(--tw-text-opacity));
+}
+
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.text-violet-400 {
+.text-red-400 {
   --tw-text-opacity: 1;
-  color: rgb(167 139 250 / var(--tw-text-opacity));
+  color: rgb(248 113 113 / var(--tw-text-opacity));
 }
 
-.text-violet-500 {
+.text-blue-500 {
   --tw-text-opacity: 1;
-  color: rgb(139 92 246 / var(--tw-text-opacity));
+  color: rgb(59 130 246 / var(--tw-text-opacity));
+}
+
+.text-green-500 {
+  --tw-text-opacity: 1;
+  color: rgb(34 197 94 / var(--tw-text-opacity));
+}
+
+.text-slate-500 {
+  --tw-text-opacity: 1;
+  color: rgb(100 116 139 / var(--tw-text-opacity));
+}
+
+.text-slate-200 {
+  --tw-text-opacity: 1;
+  color: rgb(226 232 240 / var(--tw-text-opacity));
+}
+
+.text-slate-300 {
+  --tw-text-opacity: 1;
+  color: rgb(203 213 225 / var(--tw-text-opacity));
+}
+
+.text-blue-200 {
+  --tw-text-opacity: 1;
+  color: rgb(191 219 254 / var(--tw-text-opacity));
+}
+
+.text-blue-300 {
+  --tw-text-opacity: 1;
+  color: rgb(147 197 253 / var(--tw-text-opacity));
+}
+
+.text-red-300 {
+  --tw-text-opacity: 1;
+  color: rgb(252 165 165 / var(--tw-text-opacity));
+}
+
+.text-red-500 {
+  --tw-text-opacity: 1;
+  color: rgb(239 68 68 / var(--tw-text-opacity));
 }
 
 .hover\:text-green-700:hover {

templates/app.html

@@ -21,7 +21,7 @@
 
 <div id="modules" class="flex mt-4">
 
-  <div class="grid-cols-1 p-2 ml-2 border-2 rounded-md border-slate-400">
+  <div class="p-2 m-2 border-2 rounded-md border-slate-400">
     <div id="monsterNameContainer" class="text-center">
       <!-- Monster name will be displayed here -->
     </div>
@@ -42,7 +42,9 @@
     </div>
   </div>
 
-
+  <div id="breedingPairsContainer" class="p-2 m-2 border-2 rounded-md border-slate-400">
+    <!-- Breeding pairs will be displayed here -->
+  </div>
 
   <div class="grid items-center justify-center grid-cols-1 ml-4">
     <iframe