From dca52b26c456866f786c8f20bbdfc5cf157e46a2 Mon Sep 17 00:00:00 2001
From: Kenneth <kennethnym@outlook.com>
Date: Fri, 26 Jul 2024 23:53:21 +0100
Subject: [PATCH] feat: add heart animation when cat is pet :3

---
 web/images/heart.png | Bin 0 -> 492 bytes
 web/index.html       |   5 +--
 web/script.js        |  12 +++++++-
 web/style.css        |  72 ++++++++++++++++++++++++++++++-------------
 4 files changed, 64 insertions(+), 25 deletions(-)
 create mode 100644 web/images/heart.png

diff --git a/web/images/heart.png b/web/images/heart.png
new file mode 100644
index 0000000000000000000000000000000000000000..6bea22c6c528de6b235ac2305dd7029be387bba3
GIT binary patch
literal 492
zcmV<I0Tcd-P)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00004b3#c}2nYxW
zd<bNS00009a7bBm000iR000iR0UVE8K>z>%8FWQhbW?9;ba!ELWdL_~cP?peYja~^
zaAhuUa%Y?FJQ@H10clA@K~y-6jnY4B6j2lf@ZZcXNHB$1gcO#71YG?Fsq`C&odKr~
zDMGLo5v*+mi(sd)jfDXN3U*?lBp{eFg=C8aRK!T;U5k0i&W^k2fx~;;|L4BP7&W5B
z&6aPo<EwRW@|g6I^qJTrmPpva&Jt;l_(p7#UNpWF=;NTGceO0zdRY=dUAsf^nk#UV
z;&SdZhu^qCZ<_;%BO(?TQyd@Hv9%S^l!^P9(cv57!B|c%P*oADtA7Pg<0oPx7wE$e
zTo?{RT|?2@P2_XJ_7xYitvoXi1}rakmpc{baW3CWn1_{>!uopAi7h(ap}0gb*D=Pc
z|Ii*e?rv*=rxJFbke-b-pB2`!J;jiC-~5B!uC&8jq%V^lQ;>cVABcOzph-TQwV(Zk
zDPxa_N5p(H&Hk+9Q&fmwIr$y&a4e<j2KT2Fc#F{*3)hJ6c-g$fDElVReWEt%+u8rT
i>E8R-=+lrgXW|de6V4a$bp<j20000<MNUMnLSTY+O4c6$

literal 0
HcmV?d00001

diff --git a/web/index.html b/web/index.html
index 33172ab..f08474a 100644
--- a/web/index.html
+++ b/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>
diff --git a/web/script.js b/web/script.js
index 9971532..e349e6f 100644
--- a/web/script.js
+++ b/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;
 });
diff --git a/web/style.css b/web/style.css
index 5611991..9385fe0 100644
--- a/web/style.css
+++ b/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;
   }
-}
\ No newline at end of file
+}
+
+#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;
+}