OceanSlim/dwm-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

styling stats

Browse Source
This commit is contained in:
0ceanSlim 2024-02-21 10:31:56 -05:00
parent cf1af07e6b
commit f22e2994ce
5 changed files with 35 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
static/js/updateMonsterFamily.js
View File

@ -8,7 +8,7 @@ function updateMonsterFamily() {
.then(data => { .then(data => {
// Update the HTML content with the monster family // Update the HTML content with the monster family
var familyContainer = document.getElementById("monsterFamilyContainer"); var familyContainer = document.getElementById("monsterFamilyContainer");
familyContainer.innerHTML = `<h2>${data.Family}</h2>`; familyContainer.innerHTML = `<h2>Family: ${data.Family}</h2>`;
}) })
.catch(error => { .catch(error => {
console.error("Error fetching monster family:", error); console.error("Error fetching monster family:", error);

2
static/js/updateMonsterName.js
View File

@ -8,7 +8,7 @@ function updateMonsterName() {
.then(data => { .then(data => {
// Update the HTML content with the monster name // Update the HTML content with the monster name
var nameContainer = document.getElementById("monsterNameContainer"); var nameContainer = document.getElementById("monsterNameContainer");
nameContainer.innerHTML = `<h2>${data.name}</h2>`; nameContainer.innerHTML = `<h2 class="text-3xl font-bold">${data.name}</h2>`;
}) })
.catch(error => { .catch(error => {
console.error("Error fetching monster name:", error); console.error("Error fetching monster name:", error);

13
static/js/updateMonsterStats.js
View File

@ -8,13 +8,14 @@ function updateMonsterStats() {
.then(data => { .then(data => {
// Update the HTML content with the monster stats // Update the HTML content with the monster stats
var statsContainer = document.getElementById("monsterStatsContainer"); var statsContainer = document.getElementById("monsterStatsContainer");
statsContainer.innerHTML = `<p>Agility: ${data.Agility}</p> statsContainer.innerHTML = `<p>Max Level: ${data["Max Level"]}</p>
<p>Attack: ${data.Attack}</p> <p>Experience: ${data.Experience}</p>
<p>Defense: ${data.Defense}</p> <p>Health Points: ${data["Health Points"]}</p>
<p>Experience: ${data.Experience}</p> <p>Attack: ${data.Attack}</p>
<p>Health Points: ${data["Health Points"]}</p> <p>Defense: ${data.Defense}</p>
<p>Agility: ${data.Agility}</p>
<p>Intelligence: ${data.Intelligence}</p> <p>Intelligence: ${data.Intelligence}</p>
<p>Max Level: ${data["Max Level"]}</p>`; `;
}) })
.catch(error => { .catch(error => {
console.error("Error fetching monster stats:", error); console.error("Error fetching monster stats:", error);

8
static/style/output.css
View File

@ -585,6 +585,10 @@ video {
margin-top: 1rem; margin-top: 1rem;
} }
.ml-2 {
margin-left: 0.5rem;
}
.block { .block {
display: block; display: block;
} }
@ -626,6 +630,10 @@ video {
grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr));
} }
.content-center {
align-content: center;
}
.items-center { .items-center {
align-items: center; align-items: center;
} }

30
templates/app.html
View File

@ -29,23 +29,27 @@
> >
</iframe> </iframe>
<div id="monsterNameContainer"> <div class="grid-cols-1 p-2 ml-2 border-2 rounded-md border-slate-400">
<!-- Monster name will be displayed here --> <div id="monsterNameContainer" class="text-center">
</div> <!-- Monster name will be displayed here -->
</div>
<div id="monsterFamilyContainer"> <div id="monsterFamilyContainer">
<!-- Monster Family will be displayed here--> <!-- Monster Family will be displayed here-->
</div> </div>
<div id="monsterStatsContainer"> <div id="monsterStatsContainer">
<!-- Monster stats will be displayed here --> <!-- Monster stats will be displayed here -->
</div>
<!--TODO Add monster Skills to API-->
<div id="monsterSkillsContainer">
<!-- Monster Skills will be displayed here-->
</div>
<div id="monsterLocationContainer">
<!-- Monster Location will be displayed here-->
</div>
</div> </div>
<div id="monsterLocationContainer">
<!-- Monster Location will be displayed here-->
</div>
<div class="grid items-center justify-center grid-cols-1 ml-4"> <div class="grid items-center justify-center grid-cols-1 ml-4">