add proper menu

package.json

@@ -21,7 +21,10 @@
     "@tauri-apps/plugin-fs": "~2",
     "@tauri-apps/plugin-shell": "^2",
     "@tauri-apps/plugin-sql": "^2.2.0",
+    "ky": "^1.7.3",
     "lucide-svelte": "^0.468.0",
+    "osu-classes": "^3.1.0",
+    "osu-parsers": "^4.1.7",
     "radix-icons-svelte": "^1.2.1"
   },
   "devDependencies": {

src/app.css

@@ -2,6 +2,20 @@
 @tailwind components;
 @tailwind utilities;
 
+* {
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -o-user-select: none;
+  user-select: none;
+
+  -webkit-user-drag: none;
+  -khtml-user-drag: none;
+  -moz-user-drag: none;
+  -o-user-drag: none;
+  user-drag: none;
+}
+
 @layer base {
   :root {
     --background: 0 0% 100%;
@@ -24,7 +38,7 @@
     --destructive-foreground: 210 20% 98%;
     --ring: 224 71.4% 4.1%;
     --radius: 0.5rem;
-	--sidebar-background: 0 0% 98%;
+    --sidebar-background: 0 0% 98%;
     --sidebar-foreground: 240 5.3% 26.1%;
     --sidebar-primary: 240 5.9% 10%;
     --sidebar-primary-foreground: 0 0% 98%;
@@ -54,7 +68,7 @@
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 210 20% 98%;
     --ring: 216 12.2% 83.9%;
-	--sidebar-background: 240 5.9% 10%;
+    --sidebar-background: 240 5.9% 10%;
     --sidebar-foreground: 240 4.8% 95.9%;
     --sidebar-primary: 224.3 76.3% 48%;
     --sidebar-primary-foreground: 0 0% 100%;
@@ -72,4 +86,4 @@
   body {
     @apply bg-background text-foreground;
   }
-}
+}

src/lib/api/osudirect.ts

@@ -0,0 +1,13 @@
+import ky from "ky";
+
+const API_ENDPOINT = "https://osu.direct/api/";
+
+export const osudirect = {
+  osu: async (mapId: number): Promise<string | undefined> => {
+    try {
+      return await ky(API_ENDPOINT + `osu/${mapId}?raw`).text();
+    } catch {
+      return undefined;
+    }
+  },
+};

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">
+<div
-  <img
+  class="absolute w-screen h-screen overflow-hidden pointer-events-none rounded"
-    src={background}
+>
-    alt="background"
+  <div
-    class="absolute top-0 left-0 w-screen -z-10 pointer-events-none blur opacity-10"
+    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-1 scale-90'
-    : 'translate-y-5 scale-125'} transition-transform select-none"
+    : 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}>
+  <div
-    <img class="absolute pulse-logo" src={ezppLogo} alt="logo-pulse" />
+    class="logo-animation relative w-44 h-44 mx-auto cursor-pointer"
-    <img class="absolute main-logo" src={ezppLogo} alt="logo" />
+    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>

src/lib/utils.ts

@@ -2,5 +2,11 @@ import { type ClassValue, clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
-	return twMerge(clsx(inputs));
+  return twMerge(clsx(inputs));
 }
+
+export const playAudio = (path: string, volume: number) => {
+  const audio = new Audio(path);
+  audio.volume = volume;
+  audio.play();
+};