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

bun.lock

@@ -33,11 +33,13 @@
         "autoprefixer": "10.4.21",
         "bits-ui": "^1.4.7",
         "clsx": "2.1.1",
+        "mode-watcher": "^1.0.6",
         "prettier": "^3.6.1",
         "prettier-plugin-svelte": "^3.4.0",
         "sass-embedded": "1.89.2",
         "svelte": "5.34.8",
         "svelte-check": "4.2.2",
+        "svelte-sonner": "^0.3.25",
         "tailwind-merge": "2.5.5",
         "tailwind-variants": "0.3.1",
         "tailwindcss": "3.4.17",
@@ -410,6 +412,8 @@
 
     "minipass": ["minipass@7.1.2", "", {}, "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw=="],
 
+    "mode-watcher": ["mode-watcher@1.1.0", "", { "dependencies": { "runed": "^0.25.0", "svelte-toolbelt": "^0.7.1" }, "peerDependencies": { "svelte": "^5.27.0" } }, "sha512-mUT9RRGPDYenk59qJauN1rhsIMKBmWA3xMF+uRwE8MW/tjhaDSCCARqkSuDTq8vr4/2KcAxIGVjACxTjdk5C3g=="],
+
     "mri": ["mri@1.2.0", "", {}, "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA=="],
 
     "mrmime": ["mrmime@2.0.1", "", {}, "sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ=="],
@@ -560,6 +564,8 @@
 
     "svelte-confetti": ["svelte-confetti@2.3.1", "", { "peerDependencies": { "svelte": ">=5.0.0" } }, "sha512-bKd8etTOeBQyeS9LDPuSd7Oqy5msf0xvxItzsHPajKaarr/LWFzqPq7rp6QQO5rGTzLgM0fmjovOvLkRbrd2gg=="],
 
+    "svelte-sonner": ["svelte-sonner@0.3.28", "", { "peerDependencies": { "svelte": "^3.0.0 || ^4.0.0 || ^5.0.0-next.1" } }, "sha512-K3AmlySeFifF/cKgsYNv5uXqMVNln0NBAacOYgmkQStLa/UoU0LhfAACU6Gr+YYC8bOCHdVmFNoKuDbMEsppJg=="],
+
     "svelte-toolbelt": ["svelte-toolbelt@0.7.1", "", { "dependencies": { "clsx": "^2.1.1", "runed": "^0.23.2", "style-to-object": "^1.0.8" }, "peerDependencies": { "svelte": "^5.0.0" } }, "sha512-HcBOcR17Vx9bjaOceUvxkY3nGmbBmCBBbuWLLEWO6jtmWH8f/QoWmbyUfQZrpDINH39en1b8mptfPQT9VKQ1xQ=="],
 
     "sync-child-process": ["sync-child-process@1.0.2", "", { "dependencies": { "sync-message-port": "^1.0.0" } }, "sha512-8lD+t2KrrScJ/7KXCSyfhT3/hRq78rC0wBFqNJXv3mZyn6hW2ypM05JmlSvtqRbeq6jqA94oHbxAr2vYsJ8vDA=="],
@@ -626,6 +632,8 @@
 
     "micromatch/picomatch": ["picomatch@2.3.1", "", {}, "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="],
 
+    "mode-watcher/runed": ["runed@0.25.0", "", { "dependencies": { "esm-env": "^1.0.0" }, "peerDependencies": { "svelte": "^5.7.0" } }, "sha512-7+ma4AG9FT2sWQEA0Egf6mb7PBT2vHyuHail1ie8ropfSjvZGtEAx8YTmUjv/APCsdRRxEVvArNjALk9zFSOrg=="],
+
     "string-width-cjs/emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],
 
     "string-width-cjs/strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],

package.json

@@ -45,11 +45,13 @@
     "autoprefixer": "10.4.21",
     "bits-ui": "^1.4.7",
     "clsx": "2.1.1",
+    "mode-watcher": "^1.0.6",
     "prettier": "^3.6.1",
     "prettier-plugin-svelte": "^3.4.0",
     "sass-embedded": "1.89.2",
     "svelte": "5.34.8",
     "svelte-check": "4.2.2",
+    "svelte-sonner": "^0.3.25",
     "tailwind-merge": "2.5.5",
     "tailwind-variants": "0.3.1",
     "tailwindcss": "3.4.17",

src-tauri/src/lib.rs

@@ -41,6 +41,11 @@ fn valid_osu_folder(folder: String) -> bool {
         "scores.db",
     ];
 
+    let folder_files: Vec<&str> = osu_folder_files.iter().map(|&s| s).collect();
+    if folder_files.iter().any(|&file| file == "osu!.exe") == false {
+        return false;
+    }
+
     let path = PathBuf::from(folder);
     let match_percentage = check_folder_completeness(path, &osu_folder_files) >= 70.0;
     if match_percentage {
@@ -145,7 +150,11 @@ pub fn run() {
     }
 
     builder
-        .invoke_handler(tauri::generate_handler![get_hwid, find_osu_installation, valid_osu_folder])
+        .invoke_handler(tauri::generate_handler![
+            get_hwid,
+            find_osu_installation,
+            valid_osu_folder
+        ])
         .plugin(tauri_plugin_dialog::init())
         .plugin(tauri_plugin_shell::init())
         .plugin(tauri_plugin_sql::Builder::default().build())

src/app.html

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

src/lib/components/ui/sonner/index.ts

@@ -0,0 +1 @@
+export { default as Toaster } from "./sonner.svelte";

src/lib/components/ui/sonner/sonner.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Toaster as Sonner, type ToasterProps as SonnerProps } from "svelte-sonner";
+	import { mode } from "mode-watcher";
+
+	let { ...restProps }: SonnerProps = $props();
+</script>
+
+<Sonner
+	theme={mode.current}
+	class="toaster group"
+	toastOptions={{
+		classes: {
+			toast: "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+			description: "group-[.toast]:text-muted-foreground",
+			actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+			cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+		},
+	}}
+	{...restProps}
+/>

src/lib/userAuthentication.ts

@@ -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>("")

src/pages/Launch.svelte

@@ -25,10 +25,45 @@
   import { fade, fly, scale } from 'svelte/transition';
   import { Checkbox } from '@/components/ui/checkbox';
   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 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>
 
 <AlertDialog.Root bind:open={launching}>
@@ -370,62 +405,26 @@
           <Settings2 /> EZPPLauncher Settings
         </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">
-            <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>
-          <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>
-          <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>
     {/if}

src/pages/Loading.svelte

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

src/routes/+layout.svelte

@@ -1,27 +1,83 @@
 <script lang="ts">
-  import Titlebar from '@/components/ui/titlebar/titlebar.svelte';
   import '../app.css';
-  import { current_view, first_startup, setupValues } from '@/global';
+  import Titlebar from '@/components/ui/titlebar/titlebar.svelte';
+  import { first_startup, setupValues } from '@/global';
   import { onMount } from 'svelte';
   import OsuCursor from '@/components/ui/osu-cursor/OsuCursor.svelte';
-  import { cursorSmoothening, customCursor, reduceAnimations, userSettings } from '@/userSettings';
+  import {
+    cursorSmoothening,
+    customCursor,
+    osuInstallationPath,
+    reduceAnimations,
+    userSettings,
+  } from '@/userSettings';
   import { Buffer } from 'buffer';
-  import SetupWizard from '../pages/SetupWizard.svelte';
+  import { Toaster } from '@/components/ui/sonner';
-  import Launch from '../pages/Launch.svelte';
   let { children } = $props();
 
+  function disableReload() {
+    if (window.location.hostname !== 'tauri.localhost') {
+      return;
+    }
+    document.addEventListener('keydown', function (event) {
+      if (
+        event.key === 'F3' ||
+        event.key === 'F5' ||
+        event.key === 'F7' ||
+        event.key === 'F8' ||
+        event.key === 'F10' ||
+        event.key === 'F12' ||
+        (event.ctrlKey && event.key === 'r') ||
+        (event.metaKey && event.key === 'r') ||
+        (event.ctrlKey && event.key === 'f') ||
+        (event.metaKey && event.key === 'f') ||
+        (event.ctrlKey && event.key === 'g') ||
+        (event.metaKey && event.key === 'g') ||
+        (event.ctrlKey && event.key === 'j') ||
+        (event.metaKey && event.key === 'j') ||
+        (event.ctrlKey && event.key === 'p') ||
+        (event.metaKey && event.key === 'p') ||
+        (event.ctrlKey && event.key === 'u') ||
+        (event.metaKey && event.key === 'u')
+      ) {
+        event.preventDefault();
+      }
+    });
+
+    document.addEventListener(
+      'contextmenu',
+      (e) => {
+        e.preventDefault();
+        return false;
+      },
+      { capture: true }
+    );
+
+    document.addEventListener(
+      'selectstart',
+      (e) => {
+        e.preventDefault();
+        return false;
+      },
+      { capture: true }
+    );
+  }
+
   onMount(async () => {
     window.Buffer = Buffer;
+    disableReload();
     setupValues();
     const firstStartup = await $userSettings.init();
 
     const config_custom_cursor = $userSettings.value('custom_cursor');
     const config_cursor_smoothening = $userSettings.value('cursor_smoothening');
     const config_reduce_animations = $userSettings.value('reduce_animations');
+    const config_osu_installation_path = $userSettings.value('osu_installation_path');
 
     customCursor.set(config_custom_cursor.get(true));
     cursorSmoothening.set(config_cursor_smoothening.get(true));
     reduceAnimations.set(config_reduce_animations.get(false));
+    osuInstallationPath.set(config_osu_installation_path.get(''));
 
     customCursor.subscribe((val) => config_custom_cursor.set(val));
     cursorSmoothening.subscribe((val) => config_cursor_smoothening.set(val));
@@ -35,6 +91,8 @@
   <OsuCursor smoothCursor={$cursorSmoothening} />
 {/if}
 
+<Toaster richColors closeButton />
+
 <Titlebar />
 <main>
   {@render children()}