From 1a34539e08ee6edc3055a25fa82c664806f4cd0c Mon Sep 17 00:00:00 2001
From: Kenneth <kennethnym@outlook.com>
Date: Sun, 21 Jul 2024 00:31:02 +0100
Subject: [PATCH] feat: animate cat pics!!

---
 web/script.js | 15 +++++++++++++++
 web/style.css | 14 ++++++++++++--
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/web/script.js b/web/script.js
index a721d62..f1d761d 100644
--- a/web/script.js
+++ b/web/script.js
@@ -1,4 +1,5 @@
 const playBtn = document.getElementById("play-btn");
+const catImg = document.getElementsByClassName("cat")[0];
 
 const CROSSFADE_DURATION_MS = 5000;
 const CROSSFADE_INTERVAL_MS = 20;
@@ -68,6 +69,18 @@ function fadeOut() {
 	}, CROSSFADE_INTERVAL_MS);
 }
 
+function animateCat() {
+	let current = 0;
+	setInterval(() => {
+		if (current === 3) {
+			current = 0;
+		} else {
+			current += 1;
+		}
+		catImg.src = `/images/cat-${current}.png`;
+	}, 500);
+}
+
 playBtn.onclick = () => {
 	if (isPlaying) {
 		pauseAudio();
@@ -75,3 +88,5 @@ playBtn.onclick = () => {
 		playAudio();
 	}
 };
+
+animateCat();
diff --git a/web/style.css b/web/style.css
index dda5d7c..a4bbfe6 100644
--- a/web/style.css
+++ b/web/style.css
@@ -47,7 +47,12 @@ main {
   display: flex;
   flex-direction: column;
   align-items: start;
-  margin: 4rem;
+  margin: 2rem;
+}
+@media (min-width: 1024px) {
+  main {
+    margin: 4rem;
+  }
 }
 
 .container {
@@ -69,10 +74,15 @@ main {
 .cat {
   position: absolute;
   bottom: 0px;
-  right: 10%;
+  right: 2rem;
   image-rendering: pixelated;
   height: 30px;
 }
+@media (min-width: 1024px) {
+  .cat {
+    right: 4rem;
+  }
+}
 
 .eeping-cat {
   position: absolute;