mirror of
https://github.com/zyllian/zyllian.github.io.git
synced 2025-05-09 18:16:43 -07:00
add noscript to the pet me counter and make noscript on the virtual pet bigger
This commit is contained in:
parent
4ed52b0a35
commit
e20d28bc4d
4 changed files with 22 additions and 15 deletions
|
@ -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>
|
||||||
|
|
||||||
|
|
|
@ -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";
|
||||||
})();
|
})();
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue