Merge branch 'tauri' of https://git.ez-pp.farm/EZPPFarm/EZPPLauncher into tauri

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,17 +1,12 @@
 <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"
 >
-  <img
+  <div
-    src={background}
+    style="background: url(https://osu.direct/api/media/background/{prop.beatmapId})"
-    alt="background"
-    class="absolute top-0 left-0 w-full h-full !bg-cover -z-10 pointer-events-none blur opacity-10 rounded"
-  />
-  <!-- <div
-    style="background: url(https://osu.direct/api/media/background/2226722)"
     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

@@ -1,16 +1,82 @@
 <script lang="ts">
   import ezppLogo from "../../../../assets/logo.png";
-  import { playAudio } from "@/utils";
+  import { osudirect } from "@/api/osudirect";
+  import { gameSounds, playAudio } from "@/utils";
+  import { BeatmapDecoder } from "osu-parsers";
+  import { onMount } from "svelte";
 
   type logoProps = {
+    beatmapId: number;
     extended: boolean;
     onclick: () => void;
   };
 
-  let { extended, onclick }: logoProps = $props();
+  let { beatmapId, extended, onclick }: logoProps = $props();
 
   let hovered = $state(false);
-  const bpm = $state(130);
+  let bpm = $state(150); // 1000 * 60 / bpm
+  let lastTimeout: number | undefined = undefined;
+
+  onMount(async () => {
+    gameSounds.preload();
+    
+    const beatmapData = await osudirect.osu(beatmapId);
+    if (beatmapData) {
+      const decoder = new BeatmapDecoder();
+      const beatmap = decoder.decodeFromString(beatmapData);
+      console.log(beatmap);
+
+      const audio = new Audio(
+        `https://osu.direct/api/media/audio/${beatmapId}`
+      );
+      audio.volume = 0.3;
+
+      // Function to play the heartbeat sound
+      const playHeartbeat = () => {
+        gameSounds.play("menuHeartbeat", {
+          volume: hovered ? 1 : 0.3,
+        });
+      };
+
+      // Function to synchronize the heartbeat with the song
+      const syncHeartbeat = () => {
+        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) window.clearTimeout(lastTimeout);
+
+          const interval = (1000 * 60) / bpm; // Interval in milliseconds
+          const nextBeat = currentTime % interval; // Invert: time since last beat
+
+          // Schedule the next heartbeat at the correct time
+          lastTimeout = window.setTimeout(() => {
+            playHeartbeat();
+            // Clear any previous interval
+            if (lastTimeout) {
+              window.clearInterval(lastTimeout);
+              lastTimeout = undefined;
+            }
+            if (!lastTimeout)
+              lastTimeout = window.setInterval(playHeartbeat, interval);
+          }, nextBeat);
+        }
+        // Continue syncing
+        requestAnimationFrame(syncHeartbeat);
+      };
+
+      // 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();
+      });
+    }
+  });
 </script>
 
 <div
@@ -30,9 +96,9 @@
     onmouseleave={() => (hovered = false)}
     onclick={() => {
       if (extended) {
-        playAudio("/audio/menuBack.wav", 0.35);
+        gameSounds.play("menuBack");
       } else {
-        playAudio("/audio/menuHit.wav", 0.35);
+        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

@@ -14,6 +14,7 @@
   let progress = $state(0);
   let extended = $state(false);
 
+  let beatmapId = $state(3820896);
   const current = WebviewWindow.getCurrent();
   current.setAlwaysOnTop(true);
 </script>
@@ -41,7 +42,9 @@
       </DropdownMenu.Trigger>
       <DropdownMenu.Content class="w-48 max-w-48 mx-2" side="bottom">
         <DropdownMenu.Group>
-          <DropdownMenu.GroupHeading class="truncate">Hello, Quetzalcoatl!</DropdownMenu.GroupHeading>
+          <DropdownMenu.GroupHeading class="truncate"
+            >Hello, Quetzalcoatl!</DropdownMenu.GroupHeading
+          >
           <DropdownMenu.Separator />
           <DropdownMenu.Group>
             <DropdownMenu.Item class="cursor-pointer">
@@ -64,7 +67,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'