feat: add cursor settings, enhance setup wizard and loading animations

bun.lock

@@ -21,6 +21,7 @@
         "osu-classes": "3.1.0",
         "osu-parsers": "4.1.7",
         "radix-icons-svelte": "1.2.1",
+        "svelte-confetti": "^2.0.0",
       },
       "devDependencies": {
         "@lucide/svelte": "^0.482.0",
@@ -557,6 +558,8 @@
 
     "svelte-check": ["svelte-check@4.2.2", "", { "dependencies": { "@jridgewell/trace-mapping": "^0.3.25", "chokidar": "^4.0.1", "fdir": "^6.2.0", "picocolors": "^1.0.0", "sade": "^1.7.4" }, "peerDependencies": { "svelte": "^4.0.0 || ^5.0.0-next.0", "typescript": ">=5.0.0" }, "bin": { "svelte-check": "bin/svelte-check" } }, "sha512-1+31EOYZ7NKN0YDMKusav2hhEoA51GD9Ws6o//0SphMT0ve9mBTsTUEX7OmDMadUP3KjNHsSKtJrqdSaD8CrGQ=="],
 
+    "svelte-confetti": ["svelte-confetti@2.3.1", "", { "peerDependencies": { "svelte": ">=5.0.0" } }, "sha512-bKd8etTOeBQyeS9LDPuSd7Oqy5msf0xvxItzsHPajKaarr/LWFzqPq7rp6QQO5rGTzLgM0fmjovOvLkRbrd2gg=="],
+
     "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=="],

package.json

@@ -32,7 +32,8 @@
     "lucide-svelte": "0.523.0",
     "osu-classes": "3.1.0",
     "osu-parsers": "4.1.7",
-    "radix-icons-svelte": "1.2.1"
+    "radix-icons-svelte": "1.2.1",
+    "svelte-confetti": "^2.0.0"
   },
   "devDependencies": {
     "@lucide/svelte": "^0.482.0",

src/lib/displayUtils.ts

@@ -0,0 +1,20 @@
+export function estimateRefreshRate(): Promise<number> {
+  return new Promise((resolve) => {
+    let last = performance.now();
+    let frames = 0;
+
+    function loop() {
+      const now = performance.now();
+      frames++;
+
+      if (now - last >= 1000) {
+        console.log(`Estimated Refresh Rate: ${frames} FPS`);
+        resolve(frames); // estimated Hz
+      } else {
+        requestAnimationFrame(loop);
+      }
+    }
+
+    requestAnimationFrame(loop);
+  });
+}

src/lib/global.ts

@@ -4,6 +4,7 @@ import type { Component } from 'svelte';
 import Loading from '../pages/Loading.svelte';
 
 export const current_view = writable<Component>(Loading);
+export const first_startup = writable<boolean>(false);
 
 export const server_ping = writable<number | undefined>(undefined);
 export const server_connection_fails = writable(0);

src/lib/userSettings.ts

@@ -1,8 +1,11 @@
 import { writable } from 'svelte/store';
 import { Config } from './config';
 
-export const userSettings = writable<Config>(new Config());
+export const userSettings = writable<Config>(new Config(false));
 
 export const customCursor = writable<boolean>(true);
 export const cursorSmoothening = writable<boolean>(true);
+export const cursorSmoothness = writable<number>(180);
 export const reduceAnimations = writable<boolean>(false);
+
+export const osuInstallationPath = writable<string>('');

src/pages/Launch.svelte

@@ -27,7 +27,7 @@
   import Label from '@/components/ui/label/label.svelte';
   import { cursorSmoothening, customCursor, reduceAnimations, userSettings } from '@/userSettings';
 
-  let selectedTab = $state('settings');
+  let selectedTab = $state('home');
   let launching = $state(false);
 </script>
 
@@ -264,7 +264,11 @@
       </div>
       <div
         class="mt-auto bg-theme-900/90 border border-theme-800/90 rounded-lg px-6 py-3"
-        in:scale={{ duration: $reduceAnimations ? 0 : 400, start: 0.98 }}
+        in:scale={{
+          duration: $reduceAnimations ? 0 : 400,
+          delay: $reduceAnimations ? 0 : 50,
+          start: 0.98,
+        }}
       >
         <div class="flex flex-row items-center gap-2">
           <Gamepad2 class="text-muted-foreground" size="24" />
@@ -336,6 +340,76 @@
             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
+        class="bg-theme-900/90 flex flex-col justify-center gap-3 border border-theme-800/90 rounded-lg"
+        in:scale={{
+          duration: $reduceAnimations ? 0 : 400,
+          delay: $reduceAnimations ? 0 : 50,
+          start: 0.98,
+        }}
+      >
+        <div class="flex flex-row items-center gap-3 font-semibold text-xl px-3 pt-3">
+          <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"
+        >
+          <div class="flex flex-col">
+            <Label class="text-sm" for="setting-custom-cursor">Lazer-Style Cursor</Label>
+            <div class="text-muted-foreground text-xs">
+              Enable a custom cursor in the Launcher like in the lazer build of osu!
+            </div>
+          </div>
+          <Checkbox
+            id="setting-custom-cursor"
+            checked={$customCursor}
+            onCheckedChange={async (e) => {
+              if (!e) {
+                cursorSmoothening.set(false);
+              }
+              customCursor.set(e);
+
+              $userSettings.save();
+            }}
+            class="flex items-center justify-center w-5 h-5"
+          ></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">

src/pages/Loading.svelte

@@ -1,7 +1,12 @@
 <script lang="ts">
   import Logo from '$assets/logo.png';
-  import { animate } from 'animejs';
+  import { estimateRefreshRate } from '@/displayUtils';
+  import { current_view, first_startup } from '@/global';
+  import { cursorSmoothness } from '@/userSettings';
+  import { animate, utils } from 'animejs';
   import { onMount } from 'svelte';
+  import SetupWizard from './SetupWizard.svelte';
+  import Launch from './Launch.svelte';
 
   let ezppLogo: HTMLImageElement;
   let spinnerCircle: SVGCircleElement;
@@ -26,25 +31,61 @@
     }, 450);
   };
 
-  // Animate logo on mount: pop-in, then pulse
+  const calculateCursorSmoothness = async () => {
+    const refreshRate = await estimateRefreshRate();
+    const hzMin = 60;
+    const hzMax = 144;
+    const durationMin = 70;
+    const durationMax = 180;
+
+    const duration =
+      durationMin + ((refreshRate - hzMin) / (hzMax - hzMin)) * (durationMax - durationMin);
+
+    cursorSmoothness.set(Math.round(duration));
+  };
+
+  const prepare = async () => {
+    await calculateCursorSmoothness();
+    animate(ezppLogo, {
+      opacity: [1, 0],
+      scale: [1, 1.05],
+      duration: 1000,
+      ease: (t: number) => (t - 1) ** 7 + 1,
+      onComplete: () => {},
+    });
+    animate(spinnerCircle, {
+      opacity: 0,
+      duration: 1000,
+      ease: (t: number) => (t - 1) ** 7 + 1,
+      onComplete: () => {},
+    });
+    setTimeout(() => {
+      if ($first_startup) current_view.set(SetupWizard);
+      else current_view.set(Launch);
+    }, 250);
+  };
+
   onMount(() => {
-    // Logo pop-in and pulse
     animate(ezppLogo, {
       opacity: [0, 1],
-      scale: [0, 1],
+      scale: [0.95, 1],
       duration: 900,
-      ease: (t: number) => Math.pow(2, -5 * t) * Math.sin((t - 0.075) * 20.94) + 1 - 0.0005 * t,
+      ease: (t: number) => (t - 1) ** 7 + 1,
       onComplete: doBPMAnimation,
     });
-    // Spinner animation (seamless, starts at 12 o'clock)
-    if (spinnerCircle) {
     animate(spinnerCircle, {
       strokeDashoffset: [0, -565],
       duration: 1800,
       easing: 'linear',
       loop: true,
     });
-    }
+
+    prepare();
+
+    return () => {
+      utils.remove(ezppLogo);
+      utils.remove(spinnerCircle);
+    };
   });
 </script>
 

src/pages/SetupWizard.svelte

@@ -4,10 +4,16 @@
   import Input from '@/components/ui/input/input.svelte';
   import { animate } from 'animejs';
   import { onMount } from 'svelte';
-  import { fade } from 'svelte/transition';
+  import { fade, scale } from 'svelte/transition';
   import { invoke } from '@tauri-apps/api/core';
-  import { Check, CheckCircle, CircleOff } from 'lucide-svelte';
+  import { Check, CheckCircle, CircleOff, Settings2 } from 'lucide-svelte';
   import { open } from '@tauri-apps/plugin-dialog';
+  import Checkbox from '@/components/ui/checkbox/checkbox.svelte';
+  import { cursorSmoothening, customCursor, reduceAnimations, userSettings } from '@/userSettings';
+  import Label from '@/components/ui/label/label.svelte';
+  import { current_view } from '@/global';
+  import Launch from './Launch.svelte';
+  import Confetti from 'svelte-confetti';
 
   let selectedStep = $state(1);
   const steps = ['Welcome', 'Locate your osu! Installation', 'Appearance Settings'];
@@ -16,6 +22,7 @@
   let manualSelect = $state(false);
   let manualSelectValid = $state(false);
   let autoDetectedOsuPath = $state(false);
+  let wizardFinished = $state(false);
 
   let ezppLogo: HTMLImageElement | undefined = $state(undefined);
 
@@ -57,6 +64,7 @@
       osuInstallationPath = selectedPath;
       autoDetectedOsuPath = false;
       manualSelectValid = true;
+      $userSettings.value('osu_installation_path').set(osuInstallationPath);
     }
   };
 
@@ -66,10 +74,29 @@
     if (osuInstallPath) {
       osuInstallationPath = osuInstallPath;
       autoDetectedOsuPath = true;
+      $userSettings.value('osu_installation_path').set(osuInstallationPath);
     }
   });
 </script>
 
+{#if wizardFinished}
+  <div class="relative flex flex-col items-center justify-center mt-[50px] h-[calc(100vh-50px)]">
+    <div class="absolute h-fit w-fit top-1/2 left-1/2">
+      <Confetti amount={200} y={[-1, 1.5]} x={[-2.3, 2.3]} colorArray={['#C6A0F3']} />
+    </div>
+    <h1 class="text-3xl font-semibold">EZPPLauncher Setup completed!</h1>
+    <p class="text-muted-foreground mt-2">You are now ready to farm some maps!</p>
+    <Button
+      class="mt-4"
+      onclick={async () => {
+        await $userSettings.save();
+        current_view.set(Launch);
+      }}
+    >
+      Finish
+    </Button>
+  </div>
+{:else}
   <div class="grid grid-cols-[0.41fr_1fr] mt-[50px] h-[calc(100vh-50px)]">
     <div class="w-full h-full border-r border-theme-800/90 flex flex-col gap-6 p-3">
       {#each steps as step, i (step)}
@@ -81,7 +108,10 @@
               : 'border-theme-800 bg-theme-900'} rounded-lg p-2 transition-all"
         >
           <div
-          class="flex flex-col items-center justify-center h-8 w-8 border-[2px] {selectedStep > i + 1 ? "border-green-600" : "border-theme-600"} rounded-full"
+            class="flex flex-col items-center justify-center h-8 w-8 border-[2px] {selectedStep >
+            i + 1
+              ? 'border-green-600'
+              : 'border-theme-600'} rounded-full"
           >
             {#if selectedStep > i + 1}
               <Check class="mt-0.5 text-green-400" />
@@ -103,7 +133,7 @@
       {#if selectedStep === 1}
         <div
           class="my-auto h-full w-full bg-theme-800/15 rounded-lg border border-900/60 p-6 flex flex-col items-center justify-center"
-        in:fade={{ duration: 100 }}
+          in:fade={{ duration: $reduceAnimations ? 0 : 200 }}
         >
           <img
             src={Logo}
@@ -124,7 +154,7 @@
       {:else if selectedStep === 2}
         <div
           class="my-auto h-full w-full bg-theme-800/15 rounded-lg border border-900/60 p-6 flex flex-col items-center justify-center"
-        in:fade={{ duration: 100 }}
+          in:fade={{ duration: $reduceAnimations ? 0 : 200 }}
         >
           <h1 class="text-3xl font-semibold">Locate your osu! Installation</h1>
           <p class="text-muted-foreground mt-2">
@@ -156,7 +186,8 @@
                 class="flex flex-row gap-3 bg-red-800/20 border border-red-900/20 text-red-500 p-4 rounded-lg mt-4"
               >
                 <CircleOff />
-              <span>Could not auto-detect osu! installation path. Please select it manually.</span>
+                <span>Could not auto-detect osu! installation path. Please select it manually.</span
+                >
               </div>
             {/if}
           {:else if manualSelectValid}
@@ -172,11 +203,75 @@
             >
               <CircleOff />
               <span
-              >Selected osu! installation path is invalid! Please select a valid osu! installation.</span
+                >Selected osu! installation path is invalid! Please select a valid osu!
+                installation.</span
               >
             </div>
           {/if}
         </div>
+      {:else if selectedStep === 3}
+        <div
+          class="bg-theme-900/90 flex flex-col justify-center gap-3 border border-theme-800/90 rounded-lg"
+          in:fade={{ duration: $reduceAnimations ? 0 : 200 }}
+        >
+          <div class="flex flex-row items-center gap-3 font-semibold text-xl px-3 pt-3">
+            <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"
+          >
+            <div class="flex flex-col">
+              <Label class="text-sm" for="setting-custom-cursor">Lazer-Style Cursor</Label>
+              <div class="text-muted-foreground text-xs">
+                Enable a custom cursor in the Launcher like in the lazer build of osu!
+              </div>
+            </div>
+            <Checkbox
+              id="setting-custom-cursor"
+              checked={$customCursor}
+              onCheckedChange={async (e) => {
+                if (!e) {
+                  cursorSmoothening.set(false);
+                }
+                customCursor.set(e);
+              }}
+              class="flex items-center justify-center w-5 h-5"
+            ></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);
+              }}
+              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);
+              }}
+              disabled={!$customCursor}
+              class="flex items-center justify-center w-5 h-5"
+            ></Checkbox>
+          </div>
+        </div>
       {/if}
 
       <div class="mt-auto flex flex-row items-center justify-between">
@@ -187,10 +282,15 @@
           disabled={selectedStep <= 1}>Previous</Button
         >
         <Button
-        onclick={() => (selectedStep = Math.min(selectedStep + 1, steps.length))}
+          onclick={() => {
-        disabled={selectedStep >= steps.length ||
+            if (selectedStep >= steps.length) wizardFinished = true;
-          (selectedStep === 2 && osuInstallationPath.length <= 0)}>Next</Button
+            else selectedStep = Math.min(selectedStep + 1, steps.length);
+          }}
+          disabled={selectedStep > steps.length ||
+            (selectedStep === 2 && osuInstallationPath.length <= 0)}
+          >{selectedStep >= steps.length ? 'Finish' : 'Next'}</Button
         >
       </div>
     </div>
   </div>
+{/if}

src/routes/+layout.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import Titlebar from '@/components/ui/titlebar/titlebar.svelte';
   import '../app.css';
-  import { current_view, setupValues } from '@/global';
+  import { current_view, 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';
@@ -27,11 +27,7 @@
     cursorSmoothening.subscribe((val) => config_cursor_smoothening.set(val));
     reduceAnimations.subscribe((val) => config_reduce_animations.set(val));
 
-    if (!firstStartup) {
+    first_startup.set(firstStartup);
-      current_view.set(Launch);
-      return;
-    }
-    /* current_view.set(SetupWizard); */
   });
 </script>
 

src/routes/+page.svelte

@@ -1,7 +1,12 @@
 <script lang="ts">
   import { current_view } from '@/global';
+  import { fade } from 'svelte/transition';
 
   const View = $derived($current_view);
 </script>
 
+{#key View}
+  <div in:fade={{ duration: 300 }}>
     <View />
+  </div>
+{/key}