chore: add launch button states

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ezpplauncher",
-  "version": "3.0.10",
+  "version": "3.1.0",
   "description": "",
   "type": "module",
   "scripts": {

src-tauri/Cargo.lock

@@ -1007,7 +1007,7 @@ dependencies = [
 
 [[package]]
 name = "ezpplauncher"
-version = "3.0.10"
+version = "3.1.0"
 dependencies = [
  "base64 0.22.1",
  "discord-rich-presence",

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "ezpplauncher"
-version = "3.0.10"
+version = "3.1.0"
 description = "EZPPLauncher redefined."
 authors = ["HorizonCode"]
 edition = "2024"

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "EZPPLauncher",
-  "version": "3.0.10",
+  "version": "3.1.0",
   "identifier": "farm.EZPPFarm.Launcher",
   "mainBinaryName": "ezpplauncher",
   "build": {

src/screens/Launch.svelte

@@ -169,6 +169,7 @@
   };
 
   const launch = async () => {
+    if ($launching) return;
     if ($trackingEnabled) umami.track('app_launch_osu');
     const osuRunning = await isOsuRunning();
     if (osuRunning) {
@@ -955,154 +956,167 @@
                   : 'Launching...'
               : $serverConnectionFails > 1
                 ? 'No connection'
-                : 'Launch'}
+                : $osuInstallationPath === ''
-            subtext={$launching && !cleanup ? launchInfo : undefined}
+                  ? 'Hmmm..'
-            disabled={$launching || $osuInstallationPath === '' || $serverConnectionFails > 1}
+                  : 'Launch'}
+            subtext={$launching && !cleanup
+              ? launchInfo
+              : $osuInstallationPath === ''
+                ? 'osu! path is not set!'
+                : $serverConnectionFails > 1
+                  ? 'No connection...'
+                  : undefined}
+            disabled={$osuInstallationPath === '' || $serverConnectionFails > 1}
             onClick={launch}
           />
         </div>
-        <div
+
-          class="m-1 w-72 h-48 bg-black/40 backdrop-blur-sm rounded-md border border-black/40 flex flex-col items-center p-3"
+        {#if $currentUserInfo}
-        >
+          <div
-          <Select.Root
+            class="m-1 w-72 h-48 bg-black/40 backdrop-blur-sm rounded-md border border-black/40 flex flex-col items-center p-3"
-            type="single"
+            in:fly={{ duration: 400, y: 10, opacity: 0 }}
-            value={selectedGamemode.toFixed()}
+            out:fly={{ duration: 400, y: -10, opacity: 0 }}
-            onValueChange={updateGamemode}
           >
-            <Select.Trigger
+            <Select.Root
-              class="border-theme-800/90 bg-theme-900/90 hover:bg-theme-800/90 !text-muted-foreground font-semibold"
+              type="single"
+              value={selectedGamemode.toFixed()}
+              onValueChange={updateGamemode}
             >
-              <div class="flex flex-row items-center gap-2">
+              <Select.Trigger
-                {#if selectedMode === 0}
+                class="border-theme-800/90 bg-theme-900/90 hover:bg-theme-800/90 !text-muted-foreground font-semibold"
-                  <Circle size={16} class="text-theme-200" />
+              >
-                {:else if selectedMode === 1}
+                <div class="flex flex-row items-center gap-2">
-                  <Drum size={16} class="text-theme-200" />
+                  {#if selectedMode === 0}
-                {:else if selectedMode === 2}
+                    <Circle size={16} class="text-theme-200" />
-                  <Cherry size={16} class="text-theme-200" />
+                  {:else if selectedMode === 1}
-                {:else if selectedMode === 3}
+                    <Drum size={16} class="text-theme-200" />
-                  <Piano size={16} class="text-theme-200" />
+                  {:else if selectedMode === 2}
-                {/if}
+                    <Cherry size={16} class="text-theme-200" />
-                {getGamemodeName(modeIntToStr(selectedMode), typeIntToStr(selectedType))}
+                  {:else if selectedMode === 3}
+                    <Piano size={16} class="text-theme-200" />
+                  {/if}
+                  {getGamemodeName(modeIntToStr(selectedMode), typeIntToStr(selectedType))}
+                </div>
+              </Select.Trigger>
+              <Select.Content class="bg-theme-950 border border-theme-900 rounded-lg">
+                {#each validModeTypeCombinationsSorted as gamemode (gamemode)}
+                  {@const gamemod = getModeAndTypeFromGamemode(gamemode)}
+                  <Select.Item value={gamemode.toFixed()}>
+                    <div class="flex flex-row gap-2 items-center">
+                      {#if gamemod.mode === 0}
+                        <Circle size={16} />
+                      {:else if gamemod.mode === 1}
+                        <Drum size={16} />
+                      {:else if gamemod.mode === 2}
+                        <Cherry size={16} />
+                      {:else if gamemod.mode === 3}
+                        <Piano size={16} />
+                      {/if}
+                      {getGamemodeName(modeIntToStr(gamemod.mode), typeIntToStr(gamemod.type))}
+                    </div>
+                  </Select.Item>
+                {/each}
+              </Select.Content>
+            </Select.Root>
+            <div class="grid grid-cols-2 gap-2 w-full m-3">
+              <div class="flex flex-col">
+                <span class="text-xs text-muted-foreground font-semibold">Rank</span>
+                <div class="flex items-center h-full font-semibold text-theme-50">
+                  {#if $currentUserInfo}
+                    <div in:fade>
+                      {#if $reduceAnimations}
+                        <span>
+                          #{numberHumanReadable($currentUserInfo.stats[selectedGamemode].rank ?? 0)}
+                        </span>
+                      {:else}
+                        <NumberFlow
+                          trend={0}
+                          prefix="#"
+                          value={$currentUserInfo.stats[selectedGamemode].rank ?? 0}
+                        />
+                      {/if}
+                    </div>
+                  {:else}
+                    <div in:fade>
+                      <LoaderCircle class="animate-spin" size={21} />
+                    </div>
+                  {/if}
+                </div>
               </div>
-            </Select.Trigger>
+              <div class="flex flex-col">
-            <Select.Content class="bg-theme-950 border border-theme-900 rounded-lg">
+                <span class="text-xs text-muted-foreground font-semibold">PP</span>
-              {#each validModeTypeCombinationsSorted as gamemode (gamemode)}
+                <div class="flex items-center h-full font-semibold text-pink-300">
-                {@const gamemod = getModeAndTypeFromGamemode(gamemode)}
+                  {#if $currentUserInfo}
-                <Select.Item value={gamemode.toFixed()}>
+                    <div in:fade>
-                  <div class="flex flex-row gap-2 items-center">
+                      {#if $reduceAnimations}
-                    {#if gamemod.mode === 0}
+                        <span>
-                      <Circle size={16} />
+                          {numberHumanReadable($currentUserInfo.stats[selectedGamemode].pp ?? 0)}pp
-                    {:else if gamemod.mode === 1}
+                        </span>
-                      <Drum size={16} />
+                      {:else}
-                    {:else if gamemod.mode === 2}
+                        <NumberFlow
-                      <Cherry size={16} />
+                          trend={0}
-                    {:else if gamemod.mode === 3}
+                          suffix="pp"
-                      <Piano size={16} />
+                          value={$currentUserInfo.stats[selectedGamemode].pp ?? 0}
-                    {/if}
+                        />
-                    {getGamemodeName(modeIntToStr(gamemod.mode), typeIntToStr(gamemod.type))}
+                      {/if}
-                  </div>
+                    </div>
-                </Select.Item>
+                  {:else}
-              {/each}
+                    <div in:fade>
-            </Select.Content>
+                      <LoaderCircle class="animate-spin" size={21} />
-          </Select.Root>
+                    </div>
-          <div class="grid grid-cols-2 gap-2 w-full m-3">
+                  {/if}
-            <div class="flex flex-col">
+                </div>
-              <span class="text-xs text-muted-foreground font-semibold">Rank</span>
-              <div class="flex items-center h-full font-semibold text-theme-50">
-                {#if $currentUserInfo}
-                  <div in:fade>
-                    {#if $reduceAnimations}
-                      <span>
-                        #{numberHumanReadable($currentUserInfo.stats[selectedGamemode].rank ?? 0)}
-                      </span>
-                    {:else}
-                      <NumberFlow
-                        trend={0}
-                        prefix="#"
-                        value={$currentUserInfo.stats[selectedGamemode].rank ?? 0}
-                      />
-                    {/if}
-                  </div>
-                {:else}
-                  <div in:fade>
-                    <LoaderCircle class="animate-spin" size={21} />
-                  </div>
-                {/if}
               </div>
-            </div>
+              <div class="flex flex-col">
-            <div class="flex flex-col">
+                <span class="text-xs text-muted-foreground font-semibold">Accuracy</span>
-              <span class="text-xs text-muted-foreground font-semibold">PP</span>
+                <div class="flex items-center h-full font-semibold text-theme-50">
-              <div class="flex items-center h-full font-semibold text-pink-300">
+                  {#if $currentUserInfo}
-                {#if $currentUserInfo}
+                    <div in:fade>
-                  <div in:fade>
+                      {#if $reduceAnimations}
-                    {#if $reduceAnimations}
+                        <span>
-                      <span>
+                          {($currentUserInfo.stats[selectedGamemode].acc ?? 0).toFixed(2)}%
-                        {numberHumanReadable($currentUserInfo.stats[selectedGamemode].pp ?? 0)}pp
+                        </span>
-                      </span>
+                      {:else}
-                    {:else}
+                        <NumberFlow
-                      <NumberFlow
+                          trend={0}
-                        trend={0}
+                          suffix="%"
-                        suffix="pp"
+                          value={$currentUserInfo.stats[selectedGamemode].acc.toFixed(2) ?? 0}
-                        value={$currentUserInfo.stats[selectedGamemode].pp ?? 0}
+                        />
-                      />
+                      {/if}
-                    {/if}
+                    </div>
-                  </div>
+                  {:else}
-                {:else}
+                    <div in:fade>
-                  <div in:fade>
+                      <LoaderCircle class="animate-spin" size={21} />
-                    <LoaderCircle class="animate-spin" size={21} />
+                    </div>
-                  </div>
+                  {/if}
-                {/if}
+                </div>
               </div>
-            </div>
+              <div class="flex flex-col">
-            <div class="flex flex-col">
+                <span class="text-xs text-muted-foreground font-semibold">Playcount</span>
-              <span class="text-xs text-muted-foreground font-semibold">Accuracy</span>
+                <div class="flex items-center h-full font-semibold text-theme-50">
-              <div class="flex items-center h-full font-semibold text-theme-50">
+                  {#if $currentUserInfo}
-                {#if $currentUserInfo}
+                    <div in:fade>
-                  <div in:fade>
+                      {#if $reduceAnimations}
-                    {#if $reduceAnimations}
+                        <span>
-                      <span>
+                          {numberHumanReadable($currentUserInfo.stats[selectedGamemode].plays ?? 0)}
-                        {($currentUserInfo.stats[selectedGamemode].acc ?? 0).toFixed(2)}%
+                        </span>
-                      </span>
+                      {:else}
-                    {:else}
+                        <NumberFlow
-                      <NumberFlow
+                          trend={0}
-                        trend={0}
+                          value={$currentUserInfo.stats[selectedGamemode].plays ?? 0}
-                        suffix="%"
+                        />
-                        value={$currentUserInfo.stats[selectedGamemode].acc.toFixed(2) ?? 0}
+                      {/if}
-                      />
+                    </div>
-                    {/if}
+                  {:else}
-                  </div>
+                    <div in:fade>
-                {:else}
+                      <LoaderCircle class="animate-spin" size={21} />
-                  <div in:fade>
+                    </div>
-                    <LoaderCircle class="animate-spin" size={21} />
+                  {/if}
-                  </div>
+                </div>
-                {/if}
-              </div>
-            </div>
-            <div class="flex flex-col">
-              <span class="text-xs text-muted-foreground font-semibold">Playcount</span>
-              <div class="flex items-center h-full font-semibold text-theme-50">
-                {#if $currentUserInfo}
-                  <div in:fade>
-                    {#if $reduceAnimations}
-                      <span>
-                        {numberHumanReadable($currentUserInfo.stats[selectedGamemode].plays ?? 0)}
-                      </span>
-                    {:else}
-                      <NumberFlow
-                        trend={0}
-                        value={$currentUserInfo.stats[selectedGamemode].plays ?? 0}
-                      />
-                    {/if}
-                  </div>
-                {:else}
-                  <div in:fade>
-                    <LoaderCircle class="animate-spin" size={21} />
-                  </div>
-                {/if}
               </div>
             </div>
           </div>
-        </div>
+        {/if}
         <div class="flex flex-col mb-auto mt-12 px-6">
           <span class="text-4xl font-bold drop-shadow-lg">EZPPLauncher</span>
           <span class="text-muted-foreground font-semibold drop-shadow-lg"

src/screens/SetupWizard.svelte

@@ -163,7 +163,7 @@
     <div class="flex flex-col gap-6 w-full h-full bg-theme-900/40 p-6">
       {#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"
+          class="my-auto h-full w-full bg-theme-800/15 rounded-lg border border-900/60 p-6 mt-5 flex flex-col items-center justify-center"
           in:fade={{ duration: $reduceAnimations ? 0 : 200 }}
         >
           <img
@@ -184,7 +184,7 @@
         </div>
       {: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"
+          class="my-auto h-full w-full bg-theme-800/15 rounded-lg border border-900/60 p-6 mt-5 flex flex-col items-center justify-center"
           in:fade={{ duration: $reduceAnimations ? 0 : 200 }}
         >
           <h1 class="text-3xl font-semibold">Locate your osu! Installation</h1>
@@ -242,7 +242,7 @@
         </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"
+          class="bg-theme-900/90 flex flex-col justify-center gap-3 mt-5 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">