feat: implement osu! installation path input in Launch.svelte, and enhance loading animation cleanup
This commit is contained in:
parent
afbb4df906
commit
7df448eea8
@ -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>
|
||||||
|
|
||||||
|
7
src/lib/userAuthentication.ts
Normal file
7
src/lib/userAuthentication.ts
Normal 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>("")
|
@ -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}
|
||||||
|
@ -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);
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
Loading…
x
Reference in New Issue
Block a user