Display Breeding Pairs with js and style
This commit is contained in:
parent
7714781a05
commit
4f45a602ea
@ -25,5 +25,6 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
updateMonsterFamily();
|
||||
updateMonsterLocation();
|
||||
updateMonsterSkills();
|
||||
updateBreedingPairs();
|
||||
});
|
||||
});
|
||||
|
||||
53
static/js/updateBreedingPairs.js
Normal file
53
static/js/updateBreedingPairs.js
Normal file
@ -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> + <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);
|
||||
});
|
||||
}
|
||||
@ -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 {
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user