feat: add heart animation when cat is pet :3

web/index.html

@@ -39,8 +39,9 @@
 				</div>
 			</main>
 
-			<img class="cat" src="./images/cat-0.png">
-			<img class="eeping-cat" src="./images/eeping-cat.png">
+			<img id="cat" src="./images/cat-0.png">
+			<img id="eeping-cat" src="./images/eeping-cat.png">
+			<img id="heart" src="./images/heart.png">
 		</div>
 
 		<footer>

web/script.js

@@ -3,7 +3,8 @@ const CROSSFADE_INTERVAL_MS = 20;
 const AUDIO_DURATION_MS = 60000;
 
 const playBtn = document.getElementById("play-btn");
-const catImg = document.getElementsByClassName("cat")[0];
+const catImg = document.getElementById("cat");
+const heartImg = document.getElementById("heart");
 const volumeSlider = document.getElementById("volume-slider");
 const currentVolumeLabel = document.getElementById("current-volume-label");
 const clickAudio = document.getElementById("click-audio");
@@ -192,6 +193,15 @@ volumeSlider.oninput = () => {
 };
 volumeSlider.value = 100;
 
+meowAudio.onplay = () => {
+	heartImg.style.display = "block";
+	heartImg.style.animation = "1s linear 0s heart-animation";
+	setTimeout(() => {
+		heartImg.style.display = "none";
+		heartImg.style.animation = "";
+	}, 900);
+};
+
 window.addEventListener("offline", () => {
 	ws = null;
 });

web/style.css

@@ -132,27 +132,6 @@ a {
   margin-bottom: 1rem;
 }
 
-.cat {
-  position: absolute;
-  bottom: 0px;
-  right: 2rem;
-  image-rendering: pixelated;
-  height: 30px;
-}
-@media (min-width: 1024px) {
-  .cat {
-    right: 4rem;
-  }
-}
-
-.eeping-cat {
-  position: absolute;
-  image-rendering: pixelated;
-  top: -16px;
-  right: 50%;
-  height: 15px;
-}
-
 @media (min-width: 768px) {
   main {
     width: 80%;
@@ -304,4 +283,53 @@ input[type="range"]::-ms-fill-upper {
   .button:after {
     opacity: 0.5;
   }
-}
+}
+
+#cat {
+  position: absolute;
+  bottom: 0px;
+  right: 2rem;
+  image-rendering: pixelated;
+  height: 30px;
+}
+@media (min-width: 1024px) {
+  #cat {
+    right: 4rem;
+  }
+}
+
+#heart {
+  display: none;
+  position: absolute;
+  bottom: 24px;
+  right: 2rem;
+  image-rendering: pixelated;
+}
+@media (min-width: 1024px) {
+  #heart {
+    right: 4rem;
+  }
+}
+
+@keyframes heart-animation {
+  0% {
+    display: block;
+  }
+
+  50% {
+    transform: translate(0, -24px);
+  }
+
+  100% {
+    opacity: 0;
+    transform: translate(0, -30px);
+  }
+}
+
+#eeping-cat {
+  position: absolute;
+  image-rendering: pixelated;
+  top: -16px;
+  right: 50%;
+  height: 15px;
+}