add proper menu
This commit is contained in:
parent
b7d50f8b9d
commit
7ca2678a6f
|
@ -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": {
|
||||
|
|
20
src/app.css
20
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
13
src/lib/api/osudirect.ts
Normal file
13
src/lib/api/osudirect.ts
Normal file
|
@ -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;
|
||||
}
|
||||
},
|
||||
};
|
|
@ -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>
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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();
|
||||
};
|
||||
|
|
BIN
static/audio/menuBack.wav
Normal file
BIN
static/audio/menuBack.wav
Normal file
Binary file not shown.
BIN
static/audio/menuHeartbeat.mp3
Normal file
BIN
static/audio/menuHeartbeat.mp3
Normal file
Binary file not shown.
BIN
static/audio/menuHit.wav
Normal file
BIN
static/audio/menuHit.wav
Normal file
Binary file not shown.
Loading…
Reference in New Issue
Block a user