Compare commits

..

No commits in common. "d751ff4505c5a4215bbc8578fb211ba72e5c9df2" and "b7d50f8b9d71da75613e3516df75762a111dda50" have entirely different histories.

11 changed files with 17 additions and 138 deletions

BIN
bun.lockb

Binary file not shown.

View File

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

View File

@ -2,20 +2,6 @@
@tailwind components; @tailwind components;
@tailwind utilities; @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 { @layer base {
:root { :root {
--background: 0 0% 100%; --background: 0 0% 100%;

View File

@ -1,13 +0,0 @@
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;
}
},
};

View File

@ -2,11 +2,10 @@
import background from "../../../../assets/background.gif"; import background from "../../../../assets/background.gif";
</script> </script>
<div <div class="absolute w-screen h-screen overflow-hidden pointer-events-none">
class="absolute w-screen h-screen overflow-hidden pointer-events-none rounded" <img
> src={background}
<div alt="background"
style="background: url(https://osu.direct/api/media/background/2226722)" class="absolute top-0 left-0 w-screen -z-10 pointer-events-none blur opacity-10"
class="absolute top-0 left-0 w-full h-full !bg-cover -z-10 pointer-events-none blur opacity-10 rounded" />
></div>
</div> </div>

View File

@ -1,9 +1,5 @@
<script lang="ts"> <script lang="ts">
import { onMount } from "svelte";
import ezppLogo from "../../../../assets/logo.png"; import ezppLogo from "../../../../assets/logo.png";
import { osudirect } from "@/api/osudirect";
import { playAudio } from "@/utils";
import { BeatmapDecoder } from "osu-parsers";
type logoProps = { type logoProps = {
extended: boolean; extended: boolean;
@ -11,97 +7,18 @@
}; };
let { extended, onclick }: logoProps = $props(); 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> </script>
<div <div
class="w-screen {extended class="w-screen {extended
? hovered ? '-translate-y-2 scale-90'
? '-translate-y-1 scale-100'
: '-translate-y-1 scale-90'
: hovered
? 'translate-y-5 scale-150'
: 'translate-y-5 scale-125'} transition-transform select-none" : 'translate-y-5 scale-125'} transition-transform select-none"
> >
<!-- svelte-ignore a11y_click_events_have_key_events --> <!-- svelte-ignore a11y_click_events_have_key_events -->
<!-- svelte-ignore a11y_no_static_element_interactions --> <!-- svelte-ignore a11y_no_static_element_interactions -->
<div <div class="logo-animation relative w-44 h-44 mx-auto cursor-pointer" {onclick}>
class="logo-animation relative w-44 h-44 mx-auto cursor-pointer" <img class="absolute pulse-logo" src={ezppLogo} alt="logo-pulse" />
onmouseenter={() => (hovered = true)} <img class="absolute main-logo" src={ezppLogo} alt="logo" />
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>
</div> </div>
@ -125,8 +42,7 @@
} }
} }
@keyframes beat-pulse { @keyframes beat-pulse {
0%, 0% {
10% {
scale: 0.5; scale: 0.5;
opacity: 0.5; opacity: 0.5;
filter: blur(0px); filter: blur(0px);

View File

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

View File

@ -4,9 +4,3 @@ import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) { 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();
};

Binary file not shown.

Binary file not shown.

Binary file not shown.