add noscript to the pet me counter and make noscript on the virtual pet bigger

This commit is contained in:
zyl 2024-10-10 11:10:38 -07:00
parent 4ed52b0a35
commit e20d28bc4d
Signed by: zyl
SSH key fingerprint: SHA256:uxxbSXbdroP/OnKBGnEDk5q7EKB2razvstC/KmzdXXs
4 changed files with 22 additions and 15 deletions

View file

@ -9,17 +9,17 @@ embed:
--- ---
<div id="pet"> <div id="pet">
<noscript><p>javascript is required for the pet game!!</p></noscript> <noscript><h1>javascript is required for the pet game!!</h1></noscript>
<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"> <div class="status">
<p name="hungry" class="hidden"><span class="pet-name"></span> looks hungry..</p> <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="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="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-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-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> <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>

View file

@ -6,6 +6,7 @@
: "https://cf.zyllian.workers.dev/api/pet"; : "https://cf.zyllian.workers.dev/api/pet";
const petCounter = document.querySelector("#pet-counter"); const petCounter = document.querySelector("#pet-counter");
const internal = petCounter.querySelector(".internal");
const count = petCounter.querySelector(".count"); const count = petCounter.querySelector(".count");
const petButton = petCounter.querySelector("button"); const petButton = petCounter.querySelector("button");
@ -24,5 +25,5 @@
} }
}); });
petCounter.style.display = "block"; internal.style.display = "block";
})(); })();

View file

@ -191,8 +191,11 @@ abbr {
} }
#pet-counter { #pet-counter {
display: none;
position: fixed; position: fixed;
bottom: 4px; bottom: 4px;
right: 4px; right: 4px;
.internal {
display: none;
}
} }

View file

@ -36,8 +36,11 @@
</div> </div>
<div id="pet-counter"> <div id="pet-counter">
<span class="count">???</span> pets <noscript>enable js to pet me :3</noscript>
<button>pet me :3</button> <div class="internal">
<span class="count">???</span> pets
<button>pet me :3</button>
</div>
</div> </div>
</body> </body>