zyl/webdog
1
0
Fork 0
mirror of https://github.com/zyllian/webdog.git synced 2025-05-09 18:16:40 -07:00
Code Issues Projects Releases Packages Wiki Activity

add status messages

Browse source
This commit is contained in:
zyl 2024-06-25 00:42:10 -07:00
parent 2906f17df1
commit 63b4358743
No known key found for this signature in database
3 changed files with 45 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

8
site/pages/pet.md
View file

@ -9,6 +9,14 @@ styles: ["pet.css"]
<div id="pet-display"> <div id="pet-display">
<h2 class="pet-name"></h2> <h2 class="pet-name"></h2>
<div class="the-pet"></div> <div class="the-pet"></div>
<div class="status">
<p name="hungry" class="hidden"><span class="pet-name"></span> looks hungry..</p>
<p name="starving" class="hidden"><span class="pet-name"></span> is starving!! you need to feed them!!</p>
<p name="unhappy" class="hidden"><span class="pet-name"></span> looks at you with wide eyes..</p>
<p name="messy-1" class="hidden"><span class="pet-name"></span> has left a bit of a mess! time to clean!</p>
<p name="messy-2" class="hidden">there's even more mess in here.. shouldn't you clean it for <span class="pet-name"></span>?</p>
<p name="messy-3" class="hidden">what a mess!! <span class="pet-name"></span> can't be happy.. you've gotta clean in here</p>
</div>
</div> </div>
<div id="egg"> <div id="egg">

33
site/root/js/pet.js
View file

@ -73,6 +73,15 @@
const petDisplay = document.querySelector("#pet-display"); const petDisplay = document.querySelector("#pet-display");
const thePet = petDisplay.querySelector(".the-pet"); const thePet = petDisplay.querySelector(".the-pet");
const status = petDisplay.querySelector(".status");
const statusHungry = status.querySelector("[name=hungry]");
const statusStarving = status.querySelector("[name=starving]");
const statusUnhappy = status.querySelector("[name=unhappy]");
const statusMessy1 = status.querySelector("[name=messy-1]");
const statusMessy2 = status.querySelector("[name=messy-2]");
const statusMessy3 = status.querySelector("[name=messy-3]");
const petName = document.querySelectorAll(".pet-name"); const petName = document.querySelectorAll(".pet-name");
const eggDiv = document.querySelector("div#egg"); const eggDiv = document.querySelector("div#egg");
const petSetup = document.querySelector("#pet-setup"); const petSetup = document.querySelector("#pet-setup");
@ -231,6 +240,13 @@
thePet.classList.remove("elder"); thePet.classList.remove("elder");
thePet.classList.remove("dead"); thePet.classList.remove("dead");
statusHungry.classList.add("hidden");
statusStarving.classList.add("hidden");
statusUnhappy.classList.add("hidden");
statusMessy1.classList.add("hidden");
statusMessy2.classList.add("hidden");
statusMessy3.classList.add("hidden");
let width = 0; let width = 0;
let height = 0; let height = 0;
@ -280,6 +296,22 @@
thePet.classList.add("dead"); thePet.classList.add("dead");
} else if (this.lifeStage !== LIFE_STAGE_EGG) { } else if (this.lifeStage !== LIFE_STAGE_EGG) {
thePet.classList.add(this.type); thePet.classList.add(this.type);
if (this.food <= MAX_FOOD / 10) {
statusStarving.classList.remove("hidden");
} else if (this.food <= MAX_FOOD / 2) {
statusHungry.classList.remove("hidden");
}
if (this.happiness <= MAX_HAPPINESS / 3) {
statusUnhappy.classList.remove("hidden");
}
if (this.messCounter >= MAX_MESS) {
statusMessy3.classList.remove("hidden");
} else if (this.messCounter >= MAX_MESS / 2) {
statusMessy2.classList.remove("hidden");
} else if (this.messCounter > 0) {
statusMessy1.classList.remove("hidden");
}
} }
if (this.paused) { if (this.paused) {
@ -488,6 +520,7 @@
if (document.body.classList.contains("debug")) { if (document.body.classList.contains("debug")) {
debug.classList.remove("hidden"); debug.classList.remove("hidden");
document.pet = pet;
} }
pet.updateDom(); pet.updateDom();

4
site/sass/pet.scss
View file

@ -30,6 +30,10 @@
clip-path: polygon(50% 0, 100% 100%, 0 100%); clip-path: polygon(50% 0, 100% 100%, 0 100%);
} }
} }
.status {
font-style: italic;
}
} }
#debug-section [name] { #debug-section [name] {