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 => {
// Update the HTML content with the monster family
var familyContainer = document.getElementById("monsterFamilyContainer");
familyContainer.innerHTML = `<h2>${data.Family}</h2>`;
familyContainer.innerHTML = `<h2>Family: ${data.Family}</h2>`;
})
.catch(error => {
console.error("Error fetching monster family:", error);

2
static/js/updateMonsterName.js
View File

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

13
static/js/updateMonsterStats.js
View File

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

8
static/style/output.css
View File

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

30
templates/app.html
View File

@ -29,23 +29,27 @@
>
</iframe>
<div id="monsterNameContainer">
<!-- Monster name will be displayed here -->
</div>
<div class="grid-cols-1 p-2 ml-2 border-2 rounded-md border-slate-400">
<div id="monsterNameContainer" class="text-center">
<!-- Monster name will be displayed here -->
</div>
<div id="monsterFamilyContainer">
<!-- Monster Family will be displayed here-->
</div>
<div id="monsterFamilyContainer">
<!-- Monster Family will be displayed here-->
</div>
<div id="monsterStatsContainer">
<!-- Monster stats will be displayed here -->
<div id="monsterStatsContainer">
<!-- 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 id="monsterLocationContainer">
<!-- Monster Location will be displayed here-->
</div>
<div class="grid items-center justify-center grid-cols-1 ml-4">