breeding pairs fixed, usage added, styled

src/data/updated_breeding_pairs.csv

@@ -202,18 +202,11 @@ deathmore1,mirudraas2,zoma,
 deathmore1,zoma,azurile,
 deathmore1,zoma,mirudraas1,
 deathmore1,zoma,mirudraas2,
-deathmore2,deathmore1,armorpion,
 deathmore2,deathmore1,titanis,
-deathmore3,deathmore1,armorpion,
+deathmore2,deathmore1,armorpion,
 deathmore3,deathmore2,darkmate,
 deathmore3,deathmore2,mudou,
 deathmore3,deathmore2,poseidon,
-deathmore3,mirudraas2,zoma,
-deathmore4,deathmore2,mudou,
-deathmore5,deathmore2,poseidon,
-deathmore5,zoma,mirudraas1,
-deathmore6,zoma,mirudraas2,
-deathmore7,zoma,azurile,
 demonite,any devil,any bird,
 devipine,any plant,gulpple,
 digong,rushfish,gigantes,

static/js/indexListener.js

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

static/js/updateBreedingPairs.js

@@ -19,10 +19,11 @@ function updateBreedingPairs() {
 
             if (data.breeding_pairs.length > 0) {
                 var pairsList = document.createElement("ul");
-                pairsList.classList.add('list-disc', 'ml-4');
+                pairsList.classList.add('m-2','p-2','list-disc', 'marker:text-slate-300');
-
+                
                 data.breeding_pairs.forEach(pair => {
                     var listItem = document.createElement("li");
+                    
 
                     // Style "base" text
                     var baseText = document.createElement("span");
@@ -38,7 +39,7 @@ function updateBreedingPairs() {
                     listItem.appendChild(baseText);
                     listItem.appendChild(document.createTextNode(" + "));
                     listItem.appendChild(mateText);
-
+                    
                     pairsList.appendChild(listItem);
                 });
 

static/js/updateBreedingUsage.js

@@ -0,0 +1,32 @@
+function updateBreedingUsage() {
+    // Get the selected monster from the dropdown
+    var selectedMonster = document.getElementById("monsterDropdown").value;
+
+    // Fetch data from the API
+    fetch(`/api/breeding/usage/${selectedMonster}`)
+      .then(response => response.json())
+      .then(data => {
+        // Update the HTML with the list of offspring monsters
+        renderOffspringList(data.used_in);
+      })
+      .catch(error => console.error('Error fetching data:', error));
+  }
+
+  function renderOffspringList(usageData) {
+    var offspringContainer = document.getElementById("offspringContainer");
+
+    // Clear previous HTML content
+    offspringContainer.innerHTML = "<h2 class='text-xl font-bold'>Used to Breed: </h2><ul class='list-disc'>";
+
+    // Create and append HTML for each offspring
+    usageData.forEach(item => {
+      var offspringHTML = `<li class='font-bold marker:text-slate-400 text-purple-300'>
+                            ${item.offspring}   
+                            </li>
+                            `;
+      offspringContainer.innerHTML += offspringHTML;
+    });
+
+    // Close the unordered list
+    offspringContainer.innerHTML += "</ul>";
+}

static/style/output.css

@@ -565,6 +565,14 @@ video {
   margin-right: auto;
 }
 
+.mb-0 {
+  margin-bottom: 0px;
+}
+
+.mb-0\.5 {
+  margin-bottom: 0.125rem;
+}
+
 .mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -577,10 +585,6 @@ video {
   margin-bottom: 1rem;
 }
 
-.ml-2 {
-  margin-left: 0.5rem;
-}
-
 .ml-4 {
   margin-left: 1rem;
 }
@@ -601,18 +605,6 @@ video {
   margin-top: 1rem;
 }
 
-.mr-2 {
-  margin-right: 0.5rem;
-}
-
-.mb-0 {
-  margin-bottom: 0px;
-}
-
-.mb-0\.5 {
-  margin-bottom: 0.125rem;
-}
-
 .block {
   display: block;
 }
@@ -638,10 +630,6 @@ video {
   width: 100%;
 }
 
-.flex-initial {
-  flex: 0 1 auto;
-}
-
 .border-collapse {
   border-collapse: collapse;
 }
@@ -666,6 +654,14 @@ video {
   grid-template-columns: repeat(4, minmax(0, 1fr));
 }
 
+.grid-cols-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.place-content-center {
+  place-content: center;
+}
+
 .items-center {
   align-items: center;
 }
@@ -700,11 +696,6 @@ 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));
@@ -766,11 +757,6 @@ video {
   line-height: 1.75rem;
 }
 
-.text-sm {
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-}
-
 .text-xs {
   font-size: 0.75rem;
   line-height: 1rem;
@@ -788,17 +774,13 @@ video {
   text-transform: capitalize;
 }
 
-.italic {
-  font-style: italic;
-}
-
 .leading-7 {
   line-height: 1.75rem;
 }
 
-.text-gray-600 {
+.text-blue-300 {
   --tw-text-opacity: 1;
-  color: rgb(75 85 99 / var(--tw-text-opacity));
+  color: rgb(147 197 253 / var(--tw-text-opacity));
 }
 
 .text-purple-400 {
@@ -806,6 +788,16 @@ video {
   color: rgb(192 132 252 / 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));
+}
+
 .text-violet-500 {
   --tw-text-opacity: 1;
   color: rgb(139 92 246 / var(--tw-text-opacity));
@@ -816,54 +808,49 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.text-red-400 {
+.text-purple-300 {
   --tw-text-opacity: 1;
-  color: rgb(248 113 113 / var(--tw-text-opacity));
+  color: rgb(216 180 254 / var(--tw-text-opacity));
 }
 
-.text-blue-500 {
+.marker\:text-sky-400 *::marker {
-  --tw-text-opacity: 1;
+  color: rgb(56 189 248 );
-  color: rgb(59 130 246 / var(--tw-text-opacity));
 }
 
-.text-green-500 {
+.marker\:text-purple-500 *::marker {
-  --tw-text-opacity: 1;
+  color: rgb(168 85 247 );
-  color: rgb(34 197 94 / var(--tw-text-opacity));
 }
 
-.text-slate-500 {
+.marker\:text-slate-500 *::marker {
-  --tw-text-opacity: 1;
+  color: rgb(100 116 139 );
-  color: rgb(100 116 139 / var(--tw-text-opacity));
 }
 
-.text-slate-200 {
+.marker\:text-slate-400 *::marker {
-  --tw-text-opacity: 1;
+  color: rgb(148 163 184 );
-  color: rgb(226 232 240 / var(--tw-text-opacity));
 }
 
-.text-slate-300 {
+.marker\:text-slate-300 *::marker {
-  --tw-text-opacity: 1;
+  color: rgb(203 213 225 );
-  color: rgb(203 213 225 / var(--tw-text-opacity));
 }
 
-.text-blue-200 {
+.marker\:text-sky-400::marker {
-  --tw-text-opacity: 1;
+  color: rgb(56 189 248 );
-  color: rgb(191 219 254 / var(--tw-text-opacity));
 }
 
-.text-blue-300 {
+.marker\:text-purple-500::marker {
-  --tw-text-opacity: 1;
+  color: rgb(168 85 247 );
-  color: rgb(147 197 253 / var(--tw-text-opacity));
 }
 
-.text-red-300 {
+.marker\:text-slate-500::marker {
-  --tw-text-opacity: 1;
+  color: rgb(100 116 139 );
-  color: rgb(252 165 165 / var(--tw-text-opacity));
 }
 
-.text-red-500 {
+.marker\:text-slate-400::marker {
-  --tw-text-opacity: 1;
+  color: rgb(148 163 184 );
-  color: rgb(239 68 68 / var(--tw-text-opacity));
+}
+
+.marker\:text-slate-300::marker {
+  color: rgb(203 213 225 );
 }
 
 .hover\:text-green-700:hover {

templates/app.html

@@ -46,6 +46,8 @@
     <!-- Breeding pairs will be displayed here -->
   </div>
 
+  <div id="offspringContainer" class="p-2 m-2 border-2 rounded-md border-slate-400"></div>
+
   <div class="grid items-center justify-center grid-cols-1 ml-4">
     <iframe
       id="monsterSpriteIframe"