kennethnym/infinifi
1
0
Fork 0
Code Issues 2 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

feat: add heart animation when cat is pet :3

Browse Source
This commit is contained in:
Kenneth
2024-07-26 23:53:21 +01:00
parent 120130bea9
commit dca52b26c4
4 changed files with 64 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
web/images/heart.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 492 B

5
web/index.html
View File

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

12
web/script.js
View File

@@ -3,7 +3,8 @@ const CROSSFADE_INTERVAL_MS = 20;
const AUDIO_DURATION_MS = 60000; const AUDIO_DURATION_MS = 60000;
const playBtn = document.getElementById("play-btn"); 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 volumeSlider = document.getElementById("volume-slider");
const currentVolumeLabel = document.getElementById("current-volume-label"); const currentVolumeLabel = document.getElementById("current-volume-label");
const clickAudio = document.getElementById("click-audio"); const clickAudio = document.getElementById("click-audio");
@@ -192,6 +193,15 @@ volumeSlider.oninput = () => {
}; };
volumeSlider.value = 100; 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", () => { window.addEventListener("offline", () => {
ws = null; ws = null;
}); });

72
web/style.css
View File

@@ -132,27 +132,6 @@ a {
margin-bottom: 1rem; 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) { @media (min-width: 768px) {
main { main {
width: 80%; width: 80%;
@@ -304,4 +283,53 @@ input[type="range"]::-ms-fill-upper {
.button:after { .button:after {
opacity: 0.5; 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;
}