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

2025-07-01 14:13:40 +02:00 · 2025-07-01 14:13:40 +02:00 · 50f6812054
commit 50f6812054
parent ba211641a6
10 changed files with 374 additions and 130 deletions
--- a/bun.lock
+++ b/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=="],
--- a/package.json
+++ b/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",
--- a/src/lib/displayUtils.ts
+++ b/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);
+  });
+}
--- a/src/lib/global.ts
+++ b/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);
--- a/src/lib/userSettings.ts
+++ b/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>('');
--- a/src/pages/Launch.svelte
+++ b/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">
--- a/src/pages/Loading.svelte
+++ b/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>

--- a/src/pages/SetupWizard.svelte
+++ b/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,11 +74,30 @@
    if (osuInstallPath) {
      osuInstallationPath = osuInstallPath;
      autoDetectedOsuPath = true;
+      $userSettings.value('osu_installation_path').set(osuInstallationPath);
    }
  });
 </script>

-<div class="grid grid-cols-[0.41fr_1fr] mt-[50px] h-[calc(100vh-50px)]">
+{#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)}
        <div
@ -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))}
-        disabled={selectedStep >= steps.length ||
-          (selectedStep === 2 && osuInstallationPath.length <= 0)}>Next</Button
+          onclick={() => {
+            if (selectedStep >= steps.length) wizardFinished = true;
+            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>
+  </div>
+{/if}
--- a/src/routes/+layout.svelte
+++ b/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) {
-      current_view.set(Launch);
-      return;
-    }
-    /* current_view.set(SetupWizard); */
+    first_startup.set(firstStartup);
  });
 </script>

--- a/src/routes/+page.svelte
+++ b/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>

-<View />
+{#key View}
+  <div in:fade={{ duration: 300 }}>
+    <View />
+  </div>
+{/key}