fix: bpm timing

package.json

@@ -15,6 +15,7 @@
   },
   "license": "MIT",
   "dependencies": {
+    "@elron/svelte-audio-store": "^1.0.0",
     "@tailwindcss/typography": "^0.5.15",
     "@tauri-apps/api": "^2",
     "@tauri-apps/plugin-dialog": "~2",

src/lib/components/ui/background/background.svelte

@@ -1,12 +1,15 @@
 <script lang="ts">
   import background from "../../../../assets/background.gif";
+
+  const prop: {beatmapId: number} = $props();
+
 </script>
 
 <div
   class="absolute w-screen h-screen overflow-hidden pointer-events-none rounded"
 >
   <div
-    style="background: url(https://osu.direct/api/media/background/2226722)"
+    style="background: url(https://osu.direct/api/media/background/{prop.beatmapId})"
     class="absolute top-0 left-0 w-full h-full !bg-cover -z-10 pointer-events-none blur opacity-10 rounded"
   ></div>
 </div>

src/lib/components/ui/logo/logo.svelte

@@ -2,22 +2,22 @@
   import { onMount } from "svelte";
   import ezppLogo from "../../../../assets/logo.png";
   import { osudirect } from "@/api/osudirect";
-  import { playAudio } from "@/utils";
+  import { gameSounds, playAudio } from "@/utils";
   import { BeatmapDecoder } from "osu-parsers";
 
   type logoProps = {
+    beatmapId: number;
     extended: boolean;
     onclick: () => void;
   };
 
-  let { extended, onclick }: logoProps = $props();
+  let { beatmapId, extended, onclick }: logoProps = $props();
 
   let hovered = $state(false);
   let bpm = $state(150); // 1000 * 60 / bpm
   let lastTimeout: number | undefined = undefined;
 
   onMount(async () => {
-    const beatmapId = 2226722;
     const beatmapData = await osudirect.osu(beatmapId);
     if (beatmapData) {
       const decoder = new BeatmapDecoder();
@@ -31,39 +31,54 @@
 
       // Function to play the heartbeat sound
       const playHeartbeat = () => {
-        playAudio("/audio/menuHeartbeat.mp3", hovered ? 1 : 0.3);
+        gameSounds.play("menuHeartbeat", {
+          volume: hovered ? 1 : 0.3,
+        });
       };
 
       // Function to synchronize the heartbeat with the song
       const syncHeartbeat = () => {
-        const currentTime = audio.currentTime * 1000; // Convert to milliseconds
+        const currentTime = audio.currentTime * 1000 - 25; // Convert to milliseconds
         const timingPoint = beatmap.controlPoints.timingPointAt(currentTime);
+        const timingPointTime = timingPoint.startTime;
+        console.log(currentTime, timingPointTime);
         if (timingPoint && bpm !== timingPoint.bpm) {
           bpm = timingPoint.bpm;
 
-          if (lastTimeout) {
-            clearTimeout(lastTimeout);
-          }
+          if (lastTimeout) window.clearTimeout(lastTimeout);
 
           const interval = (1000 * 60) / bpm; // Interval in milliseconds
-          const nextBeat = interval - (currentTime % interval); // Time to the next beat
-          setTimeout(() => {
+          const nextBeat = currentTime % interval; // Invert: time since last beat
+
+          // Schedule the next heartbeat at the correct time
+          lastTimeout = window.setTimeout(() => {
             playHeartbeat();
-            lastTimeout = setInterval(playHeartbeat, interval);
+            // Clear any previous interval
+            if (lastTimeout) {
+              window.clearInterval(lastTimeout);
+              lastTimeout = undefined;
+            }
+            if (!lastTimeout)
+              lastTimeout = window.setInterval(playHeartbeat, interval);
           }, nextBeat);
         }
         // Continue syncing
         requestAnimationFrame(syncHeartbeat);
       };
 
-      // Start playback and syncing
-      audio.addEventListener("play", () => {
+      // Wait for audio to be ready before starting playback and syncing
+      audio.addEventListener("canplay", async () => {
+        audio.addEventListener("play", syncHeartbeat);
+        audio.addEventListener("ended", async() => await audio.play());
+        await audio.play();
         syncHeartbeat();
       });
-
-      await audio.play();
     }
   });
+
+  onMount(() => {
+    gameSounds.preload();
+  });
 </script>
 
 <div
@@ -83,9 +98,9 @@
     onmouseleave={() => (hovered = false)}
     onclick={() => {
       if (extended) {
-        playAudio("/audio/menuBack.wav", 1);
+        gameSounds.play("menuBack");
       } else {
-        playAudio("/audio/menuHit.wav", 1);
+        gameSounds.play("menuHit");
       }
       onclick();
     }}

src/lib/utils.ts

@@ -1,6 +1,15 @@
+import { createAudioStore } from "@elron/svelte-audio-store";
 import { type ClassValue, clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 
+const sounds = {
+  menuHeartbeat: "/audio/menuHeartbeat.mp3",
+  menuBack: "/audio/menuBack.wav",
+  menuHit: "/audio/menuHit.wav",
+};
+
+export const gameSounds = createAudioStore(sounds);
+
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }

src/routes/+page.svelte

@@ -6,10 +6,13 @@
   import Progressbar from "@/components/ui/progressbar/progressbar.svelte";
   let progress = $state(0);
   let extended = $state(false);
+
+  let beatmapId = $state(3820896);
+
 </script>
 
 <div class="relative h-screen w-screen">
-  <Background />
+  <Background {beatmapId} />
   <div class="absolute top-2 right-2 py-7">
     <Avatar.Root>
       <Avatar.AvatarFallback>U</Avatar.AvatarFallback>
@@ -22,7 +25,7 @@
   >
     <!-- svelte-ignore a11y_no_static_element_interactions -->
     <!-- svelte-ignore a11y_click_events_have_key_events -->
-    <Logo {extended} onclick={() => (extended = !extended)} />
+    <Logo {beatmapId} {extended} onclick={() => (extended = !extended)} />
     <div
       class="{extended
         ? 'opacity-100 translate-y-0'