add proper menu

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

@@ -2,10 +2,11 @@
   import background from "../../../../assets/background.gif";
 </script>
 
-<div class="absolute w-screen h-screen overflow-hidden pointer-events-none">
-  <img
-    src={background}
-    alt="background"
-    class="absolute top-0 left-0 w-screen -z-10 pointer-events-none blur opacity-10"
-  />
+<div
+  class="absolute w-screen h-screen overflow-hidden pointer-events-none 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,5 +1,9 @@
 <script lang="ts">
+  import { onMount } from "svelte";
   import ezppLogo from "../../../../assets/logo.png";
+  import { osudirect } from "@/api/osudirect";
+  import { playAudio } from "@/utils";
+  import { BeatmapDecoder } from "osu-parsers";
 
   type logoProps = {
     extended: boolean;
@@ -7,18 +11,95 @@
   };
 
   let { 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();
+      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 = () => {
+        playAudio("/audio/menuHeartbeat.mp3", hovered ? 1 : 0.3);
+      };
+
+      // Function to synchronize the heartbeat with the song
+      const syncHeartbeat = () => {
+        const currentTime = audio.currentTime * 1000; // Convert to milliseconds
+        const timingPoint = beatmap.controlPoints.timingPointAt(currentTime);
+        if (timingPoint && bpm !== timingPoint.bpm) {
+          bpm = timingPoint.bpm;
+
+          if (lastTimeout) {
+            clearTimeout(lastTimeout);
+          }
+
+          const interval = (1000 * 60) / bpm; // Interval in milliseconds
+          const nextBeat = interval - (currentTime % interval); // Time to the next beat
+          setTimeout(() => {
+            playHeartbeat();
+            lastTimeout = setInterval(playHeartbeat, interval);
+          }, nextBeat);
+        }
+        // Continue syncing
+        requestAnimationFrame(syncHeartbeat);
+      };
+
+      // Start playback and syncing
+      audio.addEventListener("play", () => {
+        syncHeartbeat();
+      });
+
+      await audio.play();
+    }
+  });
 </script>
 
 <div
   class="w-screen {extended
-    ? '-translate-y-2 scale-90'
-    : 'translate-y-5 scale-125'} transition-transform select-none"
+    ? '-translate-y-1 scale-90'
+    : hovered
+      ? 'translate-y-5 scale-150'
+      : 'translate-y-5 scale-125'} transition-transform select-none"
 >
   <!-- svelte-ignore a11y_click_events_have_key_events -->
   <!-- svelte-ignore a11y_no_static_element_interactions -->
-  <div class="logo-animation relative w-44 h-44 mx-auto cursor-pointer" {onclick}>
-    <img class="absolute pulse-logo" src={ezppLogo} alt="logo-pulse" />
-    <img class="absolute main-logo" src={ezppLogo} alt="logo" />
+  <div
+    class="logo-animation relative w-44 h-44 mx-auto cursor-pointer"
+    onmouseenter={() => (hovered = true)}
+    onmouseleave={() => (hovered = false)}
+    onclick={() => {
+      if (extended) {
+        playAudio("/audio/menuBack.wav", 1);
+      } else {
+        playAudio("/audio/menuHit.wav", 1);
+      }
+      onclick();
+    }}
+  >
+    <img
+      class="absolute pulse-logo"
+      style="animation-duration: {(1000 * 60) / bpm}ms;"
+      src={ezppLogo}
+      alt="logo-pulse"
+    />
+    <img
+      class="absolute main-logo"
+      style="animation-duration: {(1000 * 60) / bpm}ms;"
+      src={ezppLogo}
+      alt="logo"
+    />
   </div>
 </div>
 
@@ -42,7 +123,8 @@
     }
   }
   @keyframes beat-pulse {
-    0% {
+    0%,
+    10% {
       scale: 0.5;
       opacity: 0.5;
       filter: blur(0px);

src/lib/components/ui/titlebar/titlebar.svelte

@@ -22,7 +22,7 @@
   <div class="titlebar-button" id="titlebar-minimize">
     <Minimize size={18} />
   </div>
-  <div class="titlebar-button close" id="titlebar-close">
+  <div class="titlebar-button close rounded-tr" id="titlebar-close">
     <Close size={18} />
   </div>
 </div>