I added a meow sound for cat and some fixed and added cursor for volume #7
1
.gitignore
vendored
@@ -249,4 +249,3 @@ $RECYCLE.BIN/
|
||||
|
||||
# End of https://www.toptal.com/developers/gitignore/api/python,windows,macos,linux
|
||||
|
||||
*.mp3
|
||||
|
||||
BIN
web/audio/cat-meow.mp3
Normal file
@@ -1,22 +1,22 @@
|
||||
|
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
|
||||
<meta charset="utf-8">
|
||||
|
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
|
||||
<title>infinifi</title>
|
||||
|
||||
<link rel="preload" href="./style.css" as="style" />
|
||||
|
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
|
||||
<link rel="modulepreload" href="./bg.js" />
|
||||
|
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
|
||||
<link rel="modulepreload" href="./script.js" />
|
||||
|
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
|
||||
<link rel="preload" href="./images/cat-0.png" as="image" />
|
||||
|
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
|
||||
<link rel="preload" href="./images/eeping-cat.png" as="image" />
|
||||
|
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
|
||||
<link rel="stylesheet" href="./style.css" />
|
||||
|
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
|
||||
<link rel="preload" href="./style.css" as="style">
|
||||
|
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
|
||||
<link rel="modulepreload" href="./bg.js">
|
||||
|
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
|
||||
<link rel="modulepreload" href="./script.js">
|
||||
|
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
|
||||
<link rel="preload" href="./images/cat-0.png" as="image">
|
||||
|
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
|
||||
<link rel="preload" href="./images/eeping-cat.png" as="image">
|
||||
|
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
|
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
|
||||
|
||||
<meta name="twitter:card" content="summary" />
|
||||
|
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
|
||||
<meta name="twitter:site" content="@kennethnym" />
|
||||
|
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
|
||||
<meta name="twitter:title" content="infinifi" />
|
||||
|
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
|
||||
<meta name="twitter:description" content="infinite lo-fi beats in the background" />
|
||||
|
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
|
||||
<meta name="twitter:card" content="summary">
|
||||
|
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
|
||||
<meta name="twitter:site" content="@kennethnym">
|
||||
|
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
|
||||
<meta name="twitter:title" content="infinifi">
|
||||
|
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
|
||||
<meta name="twitter:description" content="infinite lo-fi beats in the background">
|
||||
|
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
@@ -28,11 +28,11 @@
|
||||
|
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
|
||||
</div>
|
||||
<div class="volume-slider-container">
|
||||
<output id="current-volume-label" for="volume-slider">100%</output>
|
||||
<input id="volume-slider" type="range" min="0" max="100" step="1" />
|
||||
|
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
|
||||
<input id="volume-slider" type="range" min="0" max="100" step="1">
|
||||
|
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
|
||||
</div>
|
||||
</main>
|
||||
<img class="cat" src="./images/cat-0.png" />
|
||||
|
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
|
||||
<img class="eeping-cat" src="./images/eeping-cat.png" />
|
||||
|
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
|
||||
<img class="cat" src="./images/cat-0.png">
|
||||
|
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
|
||||
<img class="eeping-cat" src="./images/eeping-cat.png">
|
||||
|
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
@@ -43,11 +43,7 @@
|
||||
|
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
|
||||
<canvas id="bg"></canvas>
|
||||
|
||||
<audio id="click-audio" preload="auto" src="./audio/click.wav"></audio>
|
||||
<audio
|
||||
|
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
|
||||
id="click-release-audio"
|
||||
|
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
|
||||
preload="auto"
|
||||
|
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
|
||||
src="./audio/click-release.wav"
|
||||
|
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
|
||||
></audio>
|
||||
|
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
|
||||
<audio id="click-release-audio" preload="auto" src="./audio/click-release.wav"></audio>
|
||||
|
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
|
||||
<audio id="meow-audio" preload="auto" src="./audio/cat-meow.mp3"></audio>
|
||||
|
||||
<script type="module" src="./bg.js"></script>
|
||||
|
||||
|
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment) if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
|
||||
@@ -53,7 +53,8 @@ function fadeIn() {
|
||||
|
||||
// volume ranges from 0 to 100, this determines by how much the volume number
|
||||
// should be incremented at every step of the fade in
|
||||
const volumeStep = maxVolume / (CROSSFADE_DURATION_MS / CROSSFADE_INTERVAL_MS);
|
||||
const volumeStep =
|
||||
maxVolume / (CROSSFADE_DURATION_MS / CROSSFADE_INTERVAL_MS);
|
||||
const handle = setInterval(() => {
|
||||
currentVolume += volumeStep;
|
||||
if (currentVolume >= maxVolume) {
|
||||
@@ -71,7 +72,8 @@ function fadeOut() {
|
||||
|
||||
// volume ranges from 0 to 100, this determines by how much the volume number
|
||||
// should be decremented at every step of the fade out
|
||||
const volumeStep = maxVolume / (CROSSFADE_DURATION_MS / CROSSFADE_INTERVAL_MS);
|
||||
const volumeStep =
|
||||
maxVolume / (CROSSFADE_DURATION_MS / CROSSFADE_INTERVAL_MS);
|
||||
const handle = setInterval(() => {
|
||||
currentVolume -= volumeStep;
|
||||
if (currentVolume <= 0) {
|
||||
@@ -100,20 +102,20 @@ function animateCat() {
|
||||
* Allow audio to be played/paused using the space bar
|
||||
*/
|
||||
function enableSpaceBarControl() {
|
||||
document.addEventListener("keydown", event => {
|
||||
document.addEventListener("keydown", (event) => {
|
||||
if (event.code === "Space") {
|
||||
playBtn.classList.add("button-active");
|
||||
playBtn.dispatchEvent(new MouseEvent("mousedown"));
|
||||
clickAudio.play();
|
||||
}
|
||||
});
|
||||
document.addEventListener("keyup", event => {
|
||||
document.addEventListener("keyup", (event) => {
|
||||
if (event.code === "Space") {
|
||||
playBtn.classList.remove("button-active");
|
||||
clickReleaseAudio.play();
|
||||
}
|
||||
});
|
||||
document.addEventListener("keypress", event => {
|
||||
document.addEventListener("keypress", (event) => {
|
||||
if (event.code === "Space") {
|
||||
playBtn.click();
|
||||
}
|
||||
@@ -127,7 +129,7 @@ playBtn.onmousedown = () => {
|
||||
() => {
|
||||
clickReleaseAudio.play();
|
||||
},
|
||||
{ once: true }
|
||||
{ once: true },
|
||||
- this is a very very cute interaction 🥺. i think `mousedown` will make it even better as it will feel like ur petting the cat!!
- to align with the rest of the code, prefer using catImg.onmouseenter instead of `addEventListener` (no particular reason why i preferred one over the other but `onxxx` was what i used at the beginning so i stuck with it)
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)
if u could revert the indent changes back to using tab that would be great. (biome doesn't support html at the moment)