feat: add cursor settings, enhance setup wizard and loading animations
This commit is contained in:
@@ -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">
|
||||
|
||||
@@ -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,
|
||||
});
|
||||
}
|
||||
animate(spinnerCircle, {
|
||||
strokeDashoffset: [0, -565],
|
||||
duration: 1800,
|
||||
easing: 'linear',
|
||||
loop: true,
|
||||
});
|
||||
|
||||
prepare();
|
||||
|
||||
return () => {
|
||||
utils.remove(ezppLogo);
|
||||
utils.remove(spinnerCircle);
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@@ -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,131 +74,223 @@
|
||||
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)]">
|
||||
<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
|
||||
class="flex flex-row items-center gap-2 border {selectedStep === i + 1
|
||||
? 'border-primary-800/30 bg-primary-900/30'
|
||||
: selectedStep > i
|
||||
? 'border-green-800/30 bg-green-900/30'
|
||||
: '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"
|
||||
>
|
||||
{#if selectedStep > i + 1}
|
||||
<Check class="mt-0.5 text-green-400" />
|
||||
{:else}
|
||||
<span class="text-lg font-semibold text-theme-100">{i + 1}</span>
|
||||
{/if}
|
||||
</div>
|
||||
<span
|
||||
class="{selectedStep === i + 1
|
||||
? 'text-white'
|
||||
: selectedStep > i
|
||||
? 'text-green-500'
|
||||
: "'text-muted-foreground'"} transition-all text-sm font-bold">{step}</span
|
||||
>
|
||||
</div>
|
||||
{/each}
|
||||
{#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>
|
||||
<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"
|
||||
in:fade={{ duration: 100 }}
|
||||
>
|
||||
<img
|
||||
src={Logo}
|
||||
alt="EZPPLauncher Logo"
|
||||
class="w-52 h-52 mb-2"
|
||||
bind:this={ezppLogo}
|
||||
onmouseenter={logo_mouseenter}
|
||||
onmouseleave={logo_mouseleave}
|
||||
/>
|
||||
<h1 class="text-3xl font-semibold">Welcome to EZPPLauncher!</h1>
|
||||
<p class="text-muted-foreground mt-2">
|
||||
This setup wizard will guide you through the initial setup of EZPPLauncher.
|
||||
</p>
|
||||
<div class="bg-red-800/20 border border-red-900/20 text-red-500 p-4 rounded-lg mt-4">
|
||||
Please make sure you have osu! installed on your system before proceeding.
|
||||
</div>
|
||||
</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"
|
||||
in:fade={{ duration: 100 }}
|
||||
>
|
||||
<h1 class="text-3xl font-semibold">Locate your osu! Installation</h1>
|
||||
<p class="text-muted-foreground mt-2">
|
||||
Please select the folder where your osu! installation is located.
|
||||
</p>
|
||||
<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"
|
||||
placeholder="Path to osu! installation"
|
||||
value={osuInstallationPath}
|
||||
/>
|
||||
<Button
|
||||
class="mt-4 bg-theme-950 border-theme-800 rounded-l-none"
|
||||
variant="outline"
|
||||
onclick={browse_osu_installation}>Browse</Button
|
||||
{: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
|
||||
class="flex flex-row items-center gap-2 border {selectedStep === i + 1
|
||||
? 'border-primary-800/30 bg-primary-900/30'
|
||||
: selectedStep > i
|
||||
? 'border-green-800/30 bg-green-900/30'
|
||||
: '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"
|
||||
>
|
||||
{#if selectedStep > i + 1}
|
||||
<Check class="mt-0.5 text-green-400" />
|
||||
{:else}
|
||||
<span class="text-lg font-semibold text-theme-100">{i + 1}</span>
|
||||
{/if}
|
||||
</div>
|
||||
<span
|
||||
class="{selectedStep === i + 1
|
||||
? 'text-white'
|
||||
: selectedStep > i
|
||||
? 'text-green-500'
|
||||
: "'text-muted-foreground'"} transition-all text-sm font-bold">{step}</span
|
||||
>
|
||||
</div>
|
||||
{#if !manualSelect}
|
||||
{#if autoDetectedOsuPath}
|
||||
{/each}
|
||||
</div>
|
||||
<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"
|
||||
in:fade={{ duration: $reduceAnimations ? 0 : 200 }}
|
||||
>
|
||||
<img
|
||||
src={Logo}
|
||||
alt="EZPPLauncher Logo"
|
||||
class="w-52 h-52 mb-2"
|
||||
bind:this={ezppLogo}
|
||||
onmouseenter={logo_mouseenter}
|
||||
onmouseleave={logo_mouseleave}
|
||||
/>
|
||||
<h1 class="text-3xl font-semibold">Welcome to EZPPLauncher!</h1>
|
||||
<p class="text-muted-foreground mt-2">
|
||||
This setup wizard will guide you through the initial setup of EZPPLauncher.
|
||||
</p>
|
||||
<div class="bg-red-800/20 border border-red-900/20 text-red-500 p-4 rounded-lg mt-4">
|
||||
Please make sure you have osu! installed on your system before proceeding.
|
||||
</div>
|
||||
</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"
|
||||
in:fade={{ duration: $reduceAnimations ? 0 : 200 }}
|
||||
>
|
||||
<h1 class="text-3xl font-semibold">Locate your osu! Installation</h1>
|
||||
<p class="text-muted-foreground mt-2">
|
||||
Please select the folder where your osu! installation is located.
|
||||
</p>
|
||||
<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"
|
||||
placeholder="Path to osu! installation"
|
||||
value={osuInstallationPath}
|
||||
/>
|
||||
<Button
|
||||
class="mt-4 bg-theme-950 border-theme-800 rounded-l-none"
|
||||
variant="outline"
|
||||
onclick={browse_osu_installation}>Browse</Button
|
||||
>
|
||||
</div>
|
||||
{#if !manualSelect}
|
||||
{#if autoDetectedOsuPath}
|
||||
<div
|
||||
class="flex flex-row gap-3 bg-green-800/20 border border-green-900/20 text-green-500 p-4 rounded-lg mt-4"
|
||||
>
|
||||
<CheckCircle />
|
||||
<span>Auto-detected osu! installation path! Please check if its correct!</span>
|
||||
</div>
|
||||
{:else}
|
||||
<div
|
||||
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
|
||||
>
|
||||
</div>
|
||||
{/if}
|
||||
{:else if manualSelectValid}
|
||||
<div
|
||||
class="flex flex-row gap-3 bg-green-800/20 border border-green-900/20 text-green-500 p-4 rounded-lg mt-4"
|
||||
>
|
||||
<CheckCircle />
|
||||
<span>Auto-detected osu! installation path! Please check if its correct!</span>
|
||||
<span>Selected osu! installation path is valid!</span>
|
||||
</div>
|
||||
{:else}
|
||||
<div
|
||||
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
|
||||
>Selected osu! installation path is invalid! Please select a valid osu!
|
||||
installation.</span
|
||||
>
|
||||
</div>
|
||||
{/if}
|
||||
{:else if manualSelectValid}
|
||||
<div
|
||||
class="flex flex-row gap-3 bg-green-800/20 border border-green-900/20 text-green-500 p-4 rounded-lg mt-4"
|
||||
>
|
||||
<CheckCircle />
|
||||
<span>Selected osu! installation path is valid!</span>
|
||||
</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>
|
||||
{:else}
|
||||
<div
|
||||
class="flex flex-row gap-3 bg-red-800/20 border border-red-900/20 text-red-500 p-4 rounded-lg mt-4"
|
||||
class="grid grid-cols-[1fr_auto] gap-y-5 items-center border-t border-theme-800 py-3 px-6"
|
||||
>
|
||||
<CircleOff />
|
||||
<span
|
||||
>Selected osu! installation path is invalid! Please select a valid osu! installation.</span
|
||||
>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
<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="mt-auto flex flex-row items-center justify-between">
|
||||
<Button
|
||||
class="bg-theme-950 hover:bg-theme-800"
|
||||
variant="outline"
|
||||
onclick={() => (selectedStep = Math.max(selectedStep - 1, 1))}
|
||||
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
|
||||
>
|
||||
<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">
|
||||
<Button
|
||||
class="bg-theme-950 hover:bg-theme-800"
|
||||
variant="outline"
|
||||
onclick={() => (selectedStep = Math.max(selectedStep - 1, 1))}
|
||||
disabled={selectedStep <= 1}>Previous</Button
|
||||
>
|
||||
<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}
|
||||
|
||||
Reference in New Issue
Block a user