LocalPet - Locally Hosted Widget!

If there's anything I love about having a little web-menagerie, it's having little interactive pets. And online, there are tons of little pet widgets you can use like Gifypet, Webneko, anything by abowman, BunnyHeroLabs, etc. I absolutely love them! But the only problem with these awesome projects is that they're hosted on someone else's site. That's fine, but it would definitely suck if those sites ever get shut down, leaving the widget on your own site completely nonfunctional. So, I decided to make my own little widget, with some extremely simple interactive features. The idea is that everything within is hosted on YOUR site alone, and once you copy-paste the code, it's yours forever. The CSS can be fully customized to your liking, you can add your own features, and it can accomodate any page adopt or cyber pets you might have collected on your site and wished you could pet or feed.

The only graphics you'll need are three bowls (empty, full of food, and full of water), your adopt, a background of your choosing, and 6 stat bars (feel free to yoink the ones I made, pictured below).

Your widget may flicker or glitch a little when swapping out images, this can be avoided by making your pet and bowl images the same height in pixels by including some empty space above the food bowl images, setting a different height for your pet, or by including a transparent image (like this one) and setting its height to be the same as the tallest image in the row. There are many options and workarounds!

Put it all together and define some widths and heights and you get something like this:

(Lucy licks at her paw idly. She looks a little bored. Perhaps you should pet her!)

Made with LocalPet | Pet Source

So, here's the script. Anything in ALL CAPS!!! must be changed for everything to work. And if you have multiple pets on one page, make sure they each have unique IDs for their stat bars, the pet, and their food and water bowls.

<br>

</div>

<div style="width: DIV-WIDTH; margin: 0 auto"><p style="font-family: Arial; font-size: 10px; text-align: right"><a href="https://wygolvillage.neocities.org/pets/localpet" target="_blank">Made with LocalPet</a> | <a href="PET-SOURCE-LINK" target="_blank">Pet Source</a></p></div>
<script>
document.getElementById("PETNAME").addEventListener("click", function(){
    document.getElementById('PETNAMEhappybar').innerHTML = '<img src = FULL-HAPPINESS-BAR>';
    document.getElementById('PETNAME').innerHTML = '<img src = PET-IMAGE title="(HERE YOU CAN SWAP OUT FOR A SECOND IMAGE OF YOUR PET, OR SIMPLY CHANGE THE MESSAGE THAT APPEARS ON MOUSE-OVER)">';
});
</script>
<script>
document.getElementById("PETNAMEfood").addEventListener("click", function(){
    document.getElementById('PETNAMEfoodbar').innerHTML = '<img src = FULL-HUNGER-BAR>';
        document.getElementById('PETNAMEfood').innerHTML = "<img src = FULL-FOOD-BOWL-IMAGE title='(The bowl is full of food.)'>";

});
</script>
<script>
document.getElementById("PETNAMEwater").addEventListener("click", function(){
    document.getElementById('PETNAMEhirstbar').innerHTML = '<img src = FULL-THIRST-BAR-IMAGE>';
    document.getElementById('PETNAMEwater').innerHTML = "<img src = FULL-WATER-BOWL-IMAGE title='(The bowl is full of water.)'>";
});
</script>

Of course, once you have your LocalPet set up, you can add whatever you want to it to make it more immersive. Here are some quick ideas that you might enjoy as low-stakes coding challenges:

-Context-specific cursors for filling the food bowl, water bowl and petting your adoptable.

-Sound effects that play on click.

-A cleanliness bar that fills up once you click and drag a brush. (See the Stable in my Clovenglade shrine for an example)

-Code a timer that resets the stat bars after a certain amount of time if the tab stays open.

-Click and drag toys to arrange inside your pet's room.

-A way to switch the background and take your pet on "vacation".

And more! You can do anything with LocalPet, as the whole idea is that everything contained within it is yours alone. It will survive as long as your website does, which is kind of the point. The code is a tad spaghetti-ish but I hope you enjoy and find it useful or fun!