chore: add patching, change fonts

bun.lock

@@ -6,6 +6,8 @@
       "dependencies": {
         "@better-fetch/fetch": "^1.1.18",
         "@elron/svelte-audio-store": "1.0.0",
+        "@fontsource/sora": "^5.2.6",
+        "@fontsource/space-mono": "^5.2.8",
         "@number-flow/svelte": "^0.3.9",
         "@tailwindcss/typography": "0.5.16",
         "@tauri-apps/api": "2.6.0",
@@ -118,6 +120,10 @@
 
     "@floating-ui/utils": ["@floating-ui/utils@0.2.9", "", {}, "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg=="],
 
+    "@fontsource/sora": ["@fontsource/sora@5.2.6", "", {}, "sha512-OPknOmn82HIJg32UGg9iEjEVFdC+xOZBqrmQNUgsem6hFwBBrqXnTwIpro7leq/uFRdupkN42hc0JJKH20j22w=="],
+
+    "@fontsource/space-mono": ["@fontsource/space-mono@5.2.8", "", {}, "sha512-25X0fg1+kxxLes9/c6AozhrrAuBW1uLaOL584IRg4DZxVxNOMzcS3mHS1UtmsyTwtU2HpiIt9Kv23Q+7xQO+hg=="],
+
     "@internationalized/date": ["@internationalized/date@3.8.2", "", { "dependencies": { "@swc/helpers": "^0.5.0" } }, "sha512-/wENk7CbvLbkUvX1tu0mwq49CVkkWpkXubGel6birjRPyo6uQ4nQpnq5xZu823zRCwwn82zgHrvgF1vZyvmVgA=="],
 
     "@isaacs/cliui": ["@isaacs/cliui@8.0.2", "", { "dependencies": { "string-width": "^5.1.2", "string-width-cjs": "npm:string-width@^4.2.0", "strip-ansi": "^7.0.1", "strip-ansi-cjs": "npm:strip-ansi@^6.0.1", "wrap-ansi": "^8.1.0", "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0" } }, "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA=="],

package.json

@@ -18,6 +18,8 @@
   "dependencies": {
     "@better-fetch/fetch": "^1.1.18",
     "@elron/svelte-audio-store": "1.0.0",
+    "@fontsource/sora": "^5.2.6",
+    "@fontsource/space-mono": "^5.2.8",
     "@number-flow/svelte": "^0.3.9",
     "@tailwindcss/typography": "0.5.16",
     "@tauri-apps/api": "2.6.0",

src-tauri/Cargo.lock

@@ -1085,6 +1085,7 @@ version = "0.1.0"
 dependencies = [
  "hardware-id",
  "md5",
+ "open",
  "reqwest",
  "serde",
  "serde_json",

src-tauri/Cargo.toml

@@ -34,6 +34,7 @@ winapi = { version = "0.3", features = ["winuser"] }
 reqwest = { version = "0.12.22", features = ["json", "stream"] }
 md5 = "0.8.0"
 tokio = { version = "1.46.0", features = ["full"] }
+open = "5.3.2"
 
 [target.'cfg(not(any(target_os = "android", target_os = "ios")))'.dependencies]
 tauri-plugin-single-instance = "2.3.0"

src/lib/osuUtil.ts

@@ -70,7 +70,7 @@ export const getSkin = async (folder: string) => {
 };
 
 export const runUpdater = async (folder: string) => await invoke('run_osu_updater', { folder });
-export const runOsu = async (folder: string) => await invoke('run_osu', { folder });
+export const runOsu = async (folder: string, patch: boolean) => await invoke('run_osu', { folder, patch });
 
 export const getEZPPLauncherUpdateFiles = async (folder: string) => {
   const result = await invoke('get_ezpp_launcher_update_files', { folder, updateUrl });

src/lib/userSettings.ts

@@ -7,6 +7,7 @@ export const customCursor = writable<boolean>(false);
 export const cursorSmoothening = writable<boolean>(false);
 export const cursorSmoothness = writable<number>(180);
 export const reduceAnimations = writable<boolean>(false);
+export const patch = writable<boolean>(true);
 
 export const osuInstallationPath = writable<string>('');
 

src/lib/utils.ts

@@ -1,4 +1,5 @@
 import { createAudioStore } from '@elron/svelte-audio-store';
+import { invoke } from '@tauri-apps/api/core';
 import { type ClassValue, clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 
@@ -93,3 +94,7 @@ export const formatBytes = (bytes: number, decimals = 2) => {
 
   return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))}${sizes[i]}`;
 };
+
+export const openURL = async (url: string) => {
+  await invoke('open_url_in_browser', { url });
+};

src/pages/Launch.svelte

@@ -40,6 +40,7 @@
     formatBytes,
     formatTimeReadable,
     numberHumanReadable,
+    openURL,
     releaseStreamToReadable,
   } from '@/utils';
   import { fade, scale } from 'svelte/transition';
@@ -49,6 +50,7 @@
     cursorSmoothening,
     customCursor,
     osuInstallationPath,
+    patch,
     preferredMode,
     preferredType,
     reduceAnimations,
@@ -86,6 +88,7 @@
     setUserConfigValues,
   } from '@/osuUtil';
   import { getCurrentWindow } from '@tauri-apps/api/window';
+  import { Heart } from 'radix-icons-svelte';
 
   let selectedTab = $state('home');
   let progress = $state(-1);
@@ -296,7 +299,7 @@
       await replaceUIFiles(osuPath, false);
       await new Promise((res) => setTimeout(res, 1000));
       await getCurrentWindow().hide();
-      await runOsu(osuPath);
+      await runOsu(osuPath, true);
       launchInfo = 'Cleaning up...';
       await getCurrentWindow().show();
       await new Promise((res) => setTimeout(res, 1000));
@@ -776,98 +779,113 @@
         <div class="flex flex-row items-center gap-3 font-semibold text-xl px-3 pt-3">
           <Settings2 /> EZPPLauncher Settings
         </div>
-        <div
+        <div>
-          class="grid grid-cols-[1fr_auto] gap-y-5 items-center border-t border-theme-800 py-3 px-6"
+          <div
-        >
+            class="grid grid-cols-[1fr_auto] gap-y-5 items-center border-t border-theme-800 pt-4 pb-1 px-6"
-          <div class="flex flex-col">
+          >
-            <Label class="text-sm" for="setting-custom-cursor">Lazer-Style Cursor</Label>
+            <div class="flex flex-col">
-            <div class="text-muted-foreground text-xs">
+              <Label class="text-sm" for="setting-custom-cursor">Patching</Label>
-              Enable a custom cursor in the Launcher like in the lazer build of osu!
+              <div class="text-muted-foreground text-xs">Shows misses in Relax and Autopilot</div>
+            </div>
+            <Checkbox
+              id="setting-custom-cursor"
+              checked={$patch}
+              onCheckedChange={async (e) => {
+                patch.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-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">
+                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
+            class="grid grid-cols-[0.7fr_auto] gap-y-5 items-center border-theme-800 pl-6 pr-5 pb-4"
+          >
+            <div class="flex flex-col">
+              <Label class="text-sm" for="setting-custom-cursor">osu! installation path</Label>
+              <div class="text-muted-foreground text-xs">The path to your osu! installation.</div>
+            </div>
+            <div class="flex flex-row w-full">
+              <Input
+                class="mt-4 w-full bg-theme-950 border-theme-800 border-r-0 rounded-r-none"
+                type="text"
+                value={$osuInstallationPath}
+                placeholder="Path to osu! installation"
+                readonly
+              />
+              <Button
+                class="mt-4 bg-theme-950 border-theme-800 rounded-l-none"
+                variant="outline"
+                onclick={browse_osu_installation}>Browse</Button
+              >
             </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">
-              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 class="mt-auto mx-auto flex flex-row items-center gap-2">
-        class="bg-theme-900/90 flex flex-col justify-center gap-3 border border-theme-800/90 rounded-lg"
+        <Button
-        in:scale={{
+          variant="link"
-          duration: $reduceAnimations ? 0 : 400,
+          class="font-semibold font-mono text-sm text-theme-100/70"
-          delay: $reduceAnimations ? 0 : 50,
+          onclick={() => openURL('https://ez-pp.farm/u/1001')}
-          start: 0.98,
-        }}
-      >
-        <div class="flex flex-row items-center gap-3 font-semibold text-xl px-3 pt-3">
-          <Settings2 /> osu! Settings
-        </div>
-        <div
-          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">
+          made with
-            <Label class="text-sm" for="setting-custom-cursor">osu! installation path</Label>
+          <Heart class="text-red-600 animate-pulse" />
-            <div class="text-muted-foreground text-xs">The path to your osu! installation.</div>
+          by horizoncode
-          </div>
+        </Button>
-          <div class="flex flex-row w-full">
-            <Input
-              class="mt-4 w-full bg-theme-950 border-theme-800 border-r-0 rounded-r-none"
-              type="text"
-              value={$osuInstallationPath}
-              placeholder="Path to osu! installation"
-              readonly
-            />
-            <Button
-              class="mt-4 bg-theme-950 border-theme-800 rounded-l-none"
-              variant="outline"
-              onclick={browse_osu_installation}>Browse</Button
-            >
-          </div>
-        </div>
       </div>
     {/if}
   </div>

src/pages/SetupWizard.svelte

@@ -12,6 +12,7 @@
     cursorSmoothening,
     customCursor,
     osuInstallationPath,
+    patch,
     reduceAnimations,
     userSettings,
   } from '@/userSettings';
@@ -250,6 +251,20 @@
           <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">Patching</Label>
+              <div class="text-muted-foreground text-xs">Shows misses in Relax and Autopilot</div>
+            </div>
+            <Checkbox
+              id="setting-custom-cursor"
+              checked={$patch}
+              onCheckedChange={async (e) => {
+                patch.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-custom-cursor">Lazer-Style Cursor</Label>
               <div class="text-muted-foreground text-xs">

src/routes/+layout.svelte

@@ -8,12 +8,17 @@
     cursorSmoothening,
     customCursor,
     osuInstallationPath,
+    patch,
     reduceAnimations,
     userSettings,
   } from '@/userSettings';
   import { Buffer } from 'buffer';
   import { Toaster } from '@/components/ui/sonner';
   import { userAuth } from '@/userAuthentication';
+
+  import '@fontsource/sora';
+  import '@fontsource/space-mono';
+
   let { children } = $props();
 
   function disableReload() {
@@ -72,16 +77,19 @@
     $userAuth.init();
 
     currentLoadingInfo.set('Loading config...');
+    const config_patching = $userSettings.value('patching');
     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');
 
+    patch.set(config_patching.get(true));
     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(''));
 
+    patch.subscribe((val) => config_patching.set(val));
     customCursor.subscribe((val) => config_custom_cursor.set(val));
     cursorSmoothening.subscribe((val) => config_cursor_smoothening.set(val));
     reduceAnimations.subscribe((val) => config_reduce_animations.set(val));

tailwind.config.ts

@@ -1,117 +1,118 @@
-import { fontFamily } from "tailwindcss/defaultTheme";
+import { fontFamily } from 'tailwindcss/defaultTheme';
-import type { Config } from "tailwindcss";
+import type { Config } from 'tailwindcss';
-import tailwindcssAnimate from "tailwindcss-animate";
+import tailwindcssAnimate from 'tailwindcss-animate';
 
 const config: Config = {
-  darkMode: "class",
+  darkMode: 'class',
-  content: ["./src/**/*.{html,js,svelte,ts}"],
+  content: ['./src/**/*.{html,js,svelte,ts}'],
-  safelist: ["dark"],
+  safelist: ['dark'],
   theme: {
     container: {
       center: true,
-      padding: "2rem",
+      padding: '2rem',
       screens: {
-        "2xl": "1400px",
+        '2xl': '1400px',
       },
     },
     extend: {
       colors: {
         theme: {
-          DEFAULT: "#181825",
+          DEFAULT: '#181825',
-          50: "#E9E9F1",
+          50: '#E9E9F1',
-          100: "#DBDBE8",
+          100: '#DBDBE8',
-          200: "#BFBFD6",
+          200: '#BFBFD6',
-          300: "#A4A4C4",
+          300: '#A4A4C4',
-          400: "#8888B2",
+          400: '#8888B2',
-          500: "#6C6CA0",
+          500: '#6C6CA0',
-          600: "#575786",
+          600: '#575786',
-          700: "#45456B",
+          700: '#45456B',
-          800: "#33334F",
+          800: '#33334F',
-          900: "#212133",
+          900: '#212133',
-          950: "#181825",
+          950: '#181825',
         },
-        border: "hsl(var(--border) / <alpha-value>)",
+        border: 'hsl(var(--border) / <alpha-value>)',
-        input: "hsl(var(--input) / <alpha-value>)",
+        input: 'hsl(var(--input) / <alpha-value>)',
-        ring: "hsl(var(--ring) / <alpha-value>)",
+        ring: 'hsl(var(--ring) / <alpha-value>)',
-        background: "hsl(var(--background) / <alpha-value>)",
+        background: 'hsl(var(--background) / <alpha-value>)',
-        foreground: "hsl(var(--foreground) / <alpha-value>)",
+        foreground: 'hsl(var(--foreground) / <alpha-value>)',
         primary: {
-          DEFAULT: "hsl(var(--primary) / <alpha-value>)",
+          DEFAULT: 'hsl(var(--primary) / <alpha-value>)',
-          50: "#FEFDFF",
+          50: '#FEFDFF',
-          100: "#FAF6FE",
+          100: '#FAF6FE',
-          200: "#F2E9FC",
+          200: '#F2E9FC',
-          300: "#E9DBFA",
+          300: '#E9DBFA',
-          400: "#E1CEF9",
+          400: '#E1CEF9',
-          500: "#D9C0F7",
+          500: '#D9C0F7',
-          600: "#C6A0F3",
+          600: '#C6A0F3',
-          700: "#B381EF",
+          700: '#B381EF',
-          800: "#A061EB",
+          800: '#A061EB',
-          900: "#8D41E7",
+          900: '#8D41E7',
-          950: "#8331E5",
+          950: '#8331E5',
-          foreground: "hsl(var(--primary-foreground) / <alpha-value>)",
+          foreground: 'hsl(var(--primary-foreground) / <alpha-value>)',
         },
         secondary: {
-          DEFAULT: "hsl(var(--secondary) / <alpha-value>)",
+          DEFAULT: 'hsl(var(--secondary) / <alpha-value>)',
-          foreground: "hsl(var(--secondary-foreground) / <alpha-value>)",
+          foreground: 'hsl(var(--secondary-foreground) / <alpha-value>)',
         },
         destructive: {
-          DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
+          DEFAULT: 'hsl(var(--destructive) / <alpha-value>)',
-          foreground: "hsl(var(--destructive-foreground) / <alpha-value>)",
+          foreground: 'hsl(var(--destructive-foreground) / <alpha-value>)',
         },
         muted: {
-          DEFAULT: "hsl(var(--muted) / <alpha-value>)",
+          DEFAULT: 'hsl(var(--muted) / <alpha-value>)',
-          foreground: "hsl(var(--muted-foreground) / <alpha-value>)",
+          foreground: 'hsl(var(--muted-foreground) / <alpha-value>)',
         },
         accent: {
-          DEFAULT: "hsl(var(--accent) / <alpha-value>)",
+          DEFAULT: 'hsl(var(--accent) / <alpha-value>)',
-          foreground: "hsl(var(--accent-foreground) / <alpha-value>)",
+          foreground: 'hsl(var(--accent-foreground) / <alpha-value>)',
         },
         popover: {
-          DEFAULT: "hsl(var(--popover) / <alpha-value>)",
+          DEFAULT: 'hsl(var(--popover) / <alpha-value>)',
-          foreground: "hsl(var(--popover-foreground) / <alpha-value>)",
+          foreground: 'hsl(var(--popover-foreground) / <alpha-value>)',
         },
         card: {
-          DEFAULT: "hsl(var(--card) / <alpha-value>)",
+          DEFAULT: 'hsl(var(--card) / <alpha-value>)',
-          foreground: "hsl(var(--card-foreground) / <alpha-value>)",
+          foreground: 'hsl(var(--card-foreground) / <alpha-value>)',
         },
         sidebar: {
-          DEFAULT: "hsl(var(--sidebar-background))",
+          DEFAULT: 'hsl(var(--sidebar-background))',
-          foreground: "hsl(var(--sidebar-foreground))",
+          foreground: 'hsl(var(--sidebar-foreground))',
-          primary: "hsl(var(--sidebar-primary))",
+          primary: 'hsl(var(--sidebar-primary))',
-          "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
+          'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
-          accent: "hsl(var(--sidebar-accent))",
+          accent: 'hsl(var(--sidebar-accent))',
-          "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
+          'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
-          border: "hsl(var(--sidebar-border))",
+          border: 'hsl(var(--sidebar-border))',
-          ring: "hsl(var(--sidebar-ring))",
+          ring: 'hsl(var(--sidebar-ring))',
         },
       },
       borderRadius: {
-        xl: "calc(var(--radius) + 4px)",
+        xl: 'calc(var(--radius) + 4px)',
-        lg: "var(--radius)",
+        lg: 'var(--radius)',
-        md: "calc(var(--radius) - 2px)",
+        md: 'calc(var(--radius) - 2px)',
-        sm: "calc(var(--radius) - 4px)",
+        sm: 'calc(var(--radius) - 4px)',
       },
       fontFamily: {
-        sans: [...fontFamily.sans],
+        sans: ['"Sora"', ...fontFamily.sans],
+        mono: ['"Space Mono"', ...fontFamily.mono],
       },
       keyframes: {
-        "accordion-down": {
+        'accordion-down': {
-          from: { height: "0" },
+          from: { height: '0' },
-          to: { height: "var(--bits-accordion-content-height)" },
+          to: { height: 'var(--bits-accordion-content-height)' },
         },
-        "accordion-up": {
+        'accordion-up': {
-          from: { height: "var(--bits-accordion-content-height)" },
+          from: { height: 'var(--bits-accordion-content-height)' },
-          to: { height: "0" },
+          to: { height: '0' },
         },
-        "caret-blink": {
+        'caret-blink': {
-          "0%,70%,100%": { opacity: "1" },
+          '0%,70%,100%': { opacity: '1' },
-          "20%,50%": { opacity: "0" },
+          '20%,50%': { opacity: '0' },
         },
       },
       animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
+        'accordion-down': 'accordion-down 0.2s ease-out',
-        "accordion-up": "accordion-up 0.2s ease-out",
+        'accordion-up': 'accordion-up 0.2s ease-out',
-        "caret-blink": "caret-blink 1.25s ease-out infinite",
+        'caret-blink': 'caret-blink 1.25s ease-out infinite',
       },
     },
   },