feat: implement osu! installation path input in Launch.svelte, and enhance loading animation cleanup

This commit is contained in:
HorizonCode 2025-07-01 16:30:31 +02:00
parent afbb4df906
commit 7df448eea8
4 changed files with 64 additions and 56 deletions

View File

@ -4,7 +4,7 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Tauri + SvelteKit + Typescript App</title> <title>EZPPLauncher</title>
%sveltekit.head% %sveltekit.head%
</head> </head>

View File

@ -0,0 +1,7 @@
import { writable } from 'svelte/store';
import { Config } from './config';
export const userAuth = writable<Config>(new Config(true));
export const username = writable<string>("");
export const password = writable<string>("")

View File

@ -25,10 +25,45 @@
import { fade, fly, scale } from 'svelte/transition'; import { fade, fly, scale } from 'svelte/transition';
import { Checkbox } from '@/components/ui/checkbox'; import { Checkbox } from '@/components/ui/checkbox';
import Label from '@/components/ui/label/label.svelte'; import Label from '@/components/ui/label/label.svelte';
import { cursorSmoothening, customCursor, reduceAnimations, userSettings } from '@/userSettings'; import {
cursorSmoothening,
customCursor,
osuInstallationPath,
reduceAnimations,
userSettings,
} from '@/userSettings';
import Input from '@/components/ui/input/input.svelte';
import { open } from '@tauri-apps/plugin-dialog';
import { invoke } from '@tauri-apps/api/core';
import { toast } from 'svelte-sonner';
let selectedTab = $state('home'); let selectedTab = $state('home');
let launching = $state(false); let launching = $state(false);
const browse_osu_installation = async () => {
const selectedPath = await open({
directory: true,
multiple: false,
title: 'Select osu! Installation Folder',
});
if (typeof selectedPath === 'string') {
/* if (selectedPath === $osuInstallationPath) {
return;
} */
const validFolder: boolean = await invoke('valid_osu_folder', { folder: selectedPath });
if (!validFolder) {
toast.error(
'The selected folder is not a valid osu! installation folder. Please select the correct folder.'
);
return;
}
osuInstallationPath.set(selectedPath);
$userSettings.value('osu_installation_path').set(selectedPath);
$userSettings.save();
toast.success('osu! installation path set successfully.');
}
};
</script> </script>
<AlertDialog.Root bind:open={launching}> <AlertDialog.Root bind:open={launching}>
@ -370,62 +405,26 @@
<Settings2 /> EZPPLauncher Settings <Settings2 /> EZPPLauncher Settings
</div> </div>
<div <div
class="grid grid-cols-[1fr_auto] gap-y-5 items-center border-t border-theme-800 py-3 px-6" class="grid grid-cols-[0.7fr_auto] gap-y-5 items-center border-t border-theme-800 py-3 px-6"
> >
<div class="flex flex-col"> <div class="flex flex-col">
<Label class="text-sm" for="setting-custom-cursor">Lazer-Style Cursor</Label> <Label class="text-sm" for="setting-custom-cursor">osu! installation path</Label>
<div class="text-muted-foreground text-xs"> <div class="text-muted-foreground text-xs">The path to your osu! installation.</div>
Enable a custom cursor in the Launcher like in the lazer build of osu!
</div>
</div> </div>
<Checkbox <div class="flex flex-row w-full">
id="setting-custom-cursor" <Input
checked={$customCursor} class="mt-4 w-full bg-theme-950 border-theme-800 border-r-0 rounded-r-none"
onCheckedChange={async (e) => { type="text"
if (!e) { value={$osuInstallationPath}
cursorSmoothening.set(false); placeholder="Path to osu! installation"
} readonly
customCursor.set(e); />
<Button
$userSettings.save(); class="mt-4 bg-theme-950 border-theme-800 rounded-l-none"
}} variant="outline"
class="flex items-center justify-center w-5 h-5" onclick={browse_osu_installation}>Browse</Button
></Checkbox> >
<div class="flex flex-col">
<Label class="text-sm" for="setting-cursor-smoothening">Cursor Smoothening</Label>
<div class="text-muted-foreground text-xs">
Makes the custom cursor movement smoother.
</div>
</div> </div>
<Checkbox
id="setting-cursor-smoothening"
checked={$cursorSmoothening}
onCheckedChange={async (e) => {
if (!$customCursor) return;
cursorSmoothening.set(e);
$userSettings.save();
}}
disabled={!$customCursor}
class="flex items-center justify-center w-5 h-5"
></Checkbox>
<div class="flex flex-col">
<Label class="text-sm" for="setting-cursor-smoothening">Reduce Animations</Label>
<div class="text-muted-foreground text-xs">
Disables some animations in the Launcher to improve performance on low-end devices.
</div>
</div>
<Checkbox
id="setting-cursor-smoothening"
checked={$reduceAnimations}
onCheckedChange={async (e) => {
reduceAnimations.set(e);
$userSettings.save();
}}
disabled={!$customCursor}
class="flex items-center justify-center w-5 h-5"
></Checkbox>
</div> </div>
</div> </div>
{/if} {/if}

View File

@ -10,11 +10,13 @@
let ezppLogo: HTMLImageElement; let ezppLogo: HTMLImageElement;
let spinnerCircle: SVGCircleElement; let spinnerCircle: SVGCircleElement;
let animateInterval: number | undefined;
//TODO: use this to check for updates upon launch //TODO: use this to check for updates upon launch
const doBPMAnimation = () => { const doBPMAnimation = () => {
setInterval(async () => { if (animateInterval) return;
animateInterval = window.setInterval(async () => {
animate(ezppLogo, { animate(ezppLogo, {
scale: 1.1, scale: 1.1,
duration: 900, duration: 900,
@ -83,7 +85,7 @@
prepare(); prepare();
return () => { return () => {
utils.remove(ezppLogo); window.clearInterval(animateInterval);
utils.remove(spinnerCircle); utils.remove(spinnerCircle);
}; };
}); });