From 4f45a602eab2167c6866f7a55b220b68cb826597 Mon Sep 17 00:00:00 2001
From: 0ceanSlim <chriskerr@gmx.com>
Date: Fri, 23 Feb 2024 11:50:07 -0500
Subject: [PATCH] Display Breeding Pairs with js and style

---
 static/js/indexListener.js       |   1 +
 static/js/updateBreedingPairs.js |  53 ++++++++++++
 static/style/output.css          | 140 ++++++++++++++++++++++---------
 templates/app.html               |   6 +-
 4 files changed, 159 insertions(+), 41 deletions(-)
 create mode 100644 static/js/updateBreedingPairs.js

diff --git a/static/js/indexListener.js b/static/js/indexListener.js
index fb49b7b..ffb0e08 100644
--- a/static/js/indexListener.js
+++ b/static/js/indexListener.js
@@ -25,5 +25,6 @@ document.addEventListener("DOMContentLoaded", function () {
         updateMonsterFamily();
         updateMonsterLocation();
         updateMonsterSkills();
+        updateBreedingPairs();
     });
 });
diff --git a/static/js/updateBreedingPairs.js b/static/js/updateBreedingPairs.js
new file mode 100644
index 0000000..1852845
--- /dev/null
+++ b/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);
+        });
+}
\ No newline at end of file
diff --git a/static/style/output.css b/static/style/output.css
index ae4df18..c8d145c 100644
--- a/static/style/output.css
+++ b/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 {
-  margin-top: 0.25rem;
+.mr-2 {
+  margin-right: 0.5rem;
 }
 
-.mb-1 {
-  margin-bottom: 0.25rem;
+.mb-0 {
+  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 {
diff --git a/templates/app.html b/templates/app.html
index 34b7d39..577d26b 100644
--- a/templates/app.html
+++ b/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