Fix bird button naming scheme

This commit is contained in:
2026-09-13 10:15:49 +02:00
parent c4a1b1fbbd
commit 82117c4fb5
+15 -11
View File
@@ -28,13 +28,17 @@
<svg id="barTemplate" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 8.47 8.47"><path fill="none" stroke="#3d2f1f" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.8" d="m1.5 4.23.23-.1a6 6 0 0 1 5.01 0l.23.1" style="paint-order:markers stroke fill"/></svg>
</span>
</div>
<nav>
<a href="/" data-link>Home</a>
<span>-</span>
<a href="/about" data-link>About</a>
<span>-</span>
<a href="/photography" data-link>Photography</a>
</nav>
<nav>
<a href="/" data-link>Home</a>
<span>-</span>
<a href="/about" data-link>About</a>
<span>-</span>
<a href="/photography" data-link>Photography</a>
</nav>
</header>
<!-- Nav Bar -->
<div id="app"></div>
@@ -131,8 +135,8 @@
// Bird Button
const DISTANCE = 40
const birdIcon = document.getElementById("birdButton");
const DISTANCE = 20
const birdButton = document.getElementById("birdButton");
const birdSound = new Audio("SnowBuntingSound.ogg");
const template = document.getElementById("barTemplate");
const wrap = document.querySelector(".bird-wrap");
@@ -144,7 +148,7 @@
clone.style.setProperty("--angle", `${angle}deg`);
clone.style.setProperty("--distance", `${-distance}px`);
clone.style.setProperty("--delay", `${delay}s`);
wrap.appendChild(clone);
birdButton.appendChild(clone);
clone.addEventListener("animationend", () => clone.remove());
}
@@ -158,7 +162,7 @@
spawnBar(DISTANCE, -rightRandom, 0.8)
}
birdIcon.addEventListener("click", (e) => {
birdButton.addEventListener("click", (e) => {
if (!birdSound.paused) return;
birdSound.play();
birdSoundAnim()