Take Good Care of Your Virtual Pet!

Hunger: 50

Energy: 50

Cleanliness: 50

Mood: 50

<!-- HTML Content -->
<div id="virtual-pet-wrapper">
  <h1>Take Good Care of Your Virtual Pet!</h1>

  <div id="mainPart">
    <img id="pet_pics" src="https://assets.puzzlefactory.pl/puzzle/254/191/original.webp" alt="Virtual Pet" />
  </div>

  <div id="button">
    <input type="button" onclick="feed();" id="feed" value="Feed" class="pet-action-button">
    <input type="button" onclick="play();" id="pet" value="Play" class="pet-action-button">
    <input type="button" onclick="bath();" id="bath" value="Bath" class="pet-action-button">
    <input type="button" onclick="goToBed();" id="goToBed" value="Go to Bed" class="pet-action-button">
  </div>

  <div id="pet_hunger">Hunger: 50</div>
  <div id="pet_energy">Energy: 50</div>
  <div id="pet_cleanliness">Cleanliness: 50</div>
  <div id="pet_mood">Mood: 50</div>
  
</div>

<!-- CSS Styles -->
<style>
  /* Wrapper to prevent interference with Webflow's original layout */
  #virtual-pet-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: Arial, sans-serif;
    background-color: #f8f9fa;
    color: #333;
    padding: 20px;
    max-width: 100%;
    margin: auto;
    overflow: hidden;
    box-sizing: border-box;
  }

  #virtual-pet-wrapper h1 {
    color: #4CAF50;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
  }

  #virtual-pet-wrapper #mainPart {
    background-color: #fff;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
  }

  #virtual-pet-wrapper #pet_pics {
    max-width: 100%;
    width: 300px;
    border-radius: 15px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
  }

  #virtual-pet-wrapper #pet_hunger, 
  #virtual-pet-wrapper #pet_energy, 
  #virtual-pet-wrapper #pet_cleanliness, 
  #virtual-pet-wrapper #pet_mood {
    background-color: #e0f7fa;
    padding: 10px 20px;
    margin: 5px;
    border-radius: 8px;
    width: 250px;
    font-size: 1.1em;
    text-align: center;
    color: #00796b;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
  }

  #virtual-pet-wrapper #button {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    justify-content: center;
  }

  #virtual-pet-wrapper .pet-action-button {
    width: 120px;
    height: 50px;
    font-size: 1em;
    background-color: #4CAF50;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, transform 0.2s ease;
  }

  #virtual-pet-wrapper .pet-action-button:hover {
    background-color: #388E3C;
    transform: scale(1.05);
  }

  #virtual-pet-wrapper .pet-action-button:active {
    transform: scale(0.98);
  }

  #virtual-pet-wrapper footnote {
    text-align: center;
    margin-top: 30px;
  }

  
</style>

<!-- JavaScript Functions -->
<script>
  let petData = {
    hunger: 50,
    energy: 50,
    cleanliness: 50,
    mood: 50
  };

  let petPics = {
    default: "https://assets.puzzlefactory.pl/puzzle/254/191/original.webp",
    play: "https://i.gifer.com/Nf1Q.gif",
    feed: "https://i.gifer.com/1APR.gif",
    bath: "https://i.gifer.com/V5NA.gif",
    sleep: "https://i.gifer.com/O035.gif"
  };

  let petAudio = {
    play: new Audio('https://www.myinstants.com/media/sounds/pikachu-pika-pika-sound-fx.mp3'),
    feed: new Audio('https://www.myinstants.com/media/sounds/025-kanto-pikachu.mp3'),
    bath: new Audio('https://www.myinstants.com/media/sounds/pikachu_scream.mp3'),
    sleep: new Audio('https://www.myinstants.com/media/sounds/pika-pikachuwuwu.mp3')
  };

  var ongoing_activity = false;

  function updatePetData() {
    document.getElementById("pet_hunger").innerHTML = "Hunger: " + petData.hunger;
    document.getElementById("pet_energy").innerHTML = "Energy: " + petData.energy;
    document.getElementById("pet_cleanliness").innerHTML = "Cleanliness: " + petData.cleanliness;
    document.getElementById("pet_mood").innerHTML = "Mood: " + petData.mood;
  };

  async function animation(action_name) {
    ongoing_activity = true;
    document.getElementById("pet_pics").src = petPics[action_name];
    document.getElementById("pet_pics").width = 650;
    petAudio[action_name].play();
    await sleep(5000);
    document.getElementById("pet_pics").src = petPics.default;
    document.getElementById("pet_pics").width = 500;
    ongoing_activity = false;
  }

  async function feed() {
    if (ongoing_activity) return;
    await animation("feed");
    petData.hunger -= 30;
    petData.energy += 20;
    petData.mood += 10;
    updatePetData();
  };

  async function play() {
    if (ongoing_activity) return;
    await animation("play");
    petData.hunger += 20;
    petData.energy -= 20;
    petData.cleanliness -= 20;
    petData.mood += 20;
    updatePetData();
  }

  async function bath() {
    if (ongoing_activity) return;
    await animation("bath");
    petData.hunger += 10;
    petData.cleanliness += 20;
    petData.mood += 20;
    updatePetData();
  }

  async function goToBed() {
    if (ongoing_activity) return;
    await animation("sleep");
    petData.hunger += 10;
    petData.energy += 40;
    petData.mood -= 10;
    updatePetData();
  }

  function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
  }
</script>