fix: adjust layout and positioning of user stats and login prompts in Launch screen
This commit is contained in:
1 file changed
+173
-166
+173
-166
@@ -1376,181 +1376,188 @@
|
|||||||
onClick={launch}
|
onClick={launch}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="relative h-50">
|
||||||
{#if $currentUserInfo}
|
{#if $currentUserInfo}
|
||||||
<div
|
<div
|
||||||
class="m-1 w-72 h-48 bg-black/40 backdrop-blur-sm rounded-md ring-1 ring-inset ring-white/5 flex flex-col items-center p-3"
|
class="m-1 w-72 h-48 bg-black/40 backdrop-blur-sm rounded-md ring-1 ring-inset ring-white/5 flex flex-col items-center p-3 absolute top-0 left-0"
|
||||||
in:fly={{ duration: $reduceAnimations ? 0 : 400, y: 5, opacity: 0 }}
|
in:fly={{ duration: $reduceAnimations ? 0 : 400, y: 5, opacity: 0 }}
|
||||||
out:fly={{ duration: $reduceAnimations ? 0 : 400, y: -5, opacity: 0 }}
|
out:fly={{ duration: $reduceAnimations ? 0 : 400, y: -5, opacity: 0 }}
|
||||||
>
|
|
||||||
<Select.Root
|
|
||||||
type="single"
|
|
||||||
value={selectedGamemode.toFixed()}
|
|
||||||
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>
|
</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-primary-200">
|
||||||
{@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(
|
||||||
{:else if gamemod.mode === 1}
|
$currentUserInfo.stats[selectedGamemode].pp ?? 0
|
||||||
<Drum size={16} />
|
)}pp
|
||||||
{:else if gamemod.mode === 2}
|
</span>
|
||||||
<Cherry size={16} />
|
{:else}
|
||||||
{:else if gamemod.mode === 3}
|
<NumberFlow
|
||||||
<Piano size={16} />
|
trend={0}
|
||||||
{/if}
|
suffix="pp"
|
||||||
{getGamemodeName(modeIntToStr(gamemod.mode), typeIntToStr(gamemod.type))}
|
value={$currentUserInfo.stats[selectedGamemode].pp ?? 0}
|
||||||
</div>
|
/>
|
||||||
</Select.Item>
|
{/if}
|
||||||
{/each}
|
</div>
|
||||||
</Select.Content>
|
{:else}
|
||||||
</Select.Root>
|
<div in:fade>
|
||||||
<div class="grid grid-cols-2 gap-2 w-full m-3">
|
<LoaderCircle class="animate-spin" size={21} />
|
||||||
<div class="flex flex-col">
|
</div>
|
||||||
<span class="text-xs text-muted-foreground font-semibold">Rank</span>
|
{/if}
|
||||||
<div class="flex items-center h-full font-semibold text-theme-50">
|
</div>
|
||||||
{#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>
|
<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-primary-200">
|
{#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>
|
<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].acc ?? 0).toFixed(2)}%
|
$currentUserInfo.stats[selectedGamemode].plays ?? 0
|
||||||
</span>
|
)}
|
||||||
{:else}
|
</span>
|
||||||
<NumberFlow
|
{:else}
|
||||||
trend={0}
|
<NumberFlow
|
||||||
suffix="%"
|
trend={0}
|
||||||
value={$currentUserInfo.stats[selectedGamemode].acc.toFixed(2) ?? 0}
|
value={$currentUserInfo.stats[selectedGamemode].plays ?? 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">
|
|
||||||
<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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
{:else}
|
||||||
{:else}
|
<div
|
||||||
<div
|
class="m-1 w-72 h-48 bg-black/40 backdrop-blur-sm rounded-md ring-1 ring-inset ring-white/5 flex flex-col items-center justify-center p-3 gap-3 absolute top-0 left-0"
|
||||||
class="m-1 w-72 h-48 bg-black/40 backdrop-blur-sm rounded-md ring-1 ring-inset ring-white/5 flex flex-col items-center justify-center p-3 gap-3"
|
in:fly={{ duration: $reduceAnimations ? 0 : 400, y: 5, opacity: 0 }}
|
||||||
in:fly={{ duration: $reduceAnimations ? 0 : 400, y: 5, opacity: 0 }}
|
out:fly={{ duration: $reduceAnimations ? 0 : 400, y: -5, opacity: 0 }}
|
||||||
out:fly={{ duration: $reduceAnimations ? 0 : 400, y: -5, opacity: 0 }}
|
>
|
||||||
>
|
<div class="flex flex-col items-center gap-1 text-center">
|
||||||
<div class="flex flex-col items-center gap-1 text-center">
|
<span class="font-semibold text-theme-50 text-sm">See your stats here</span>
|
||||||
<span class="font-semibold text-theme-50 text-sm">See your stats here</span>
|
<span class="text-xs text-muted-foreground"
|
||||||
<span class="text-xs text-muted-foreground"
|
>Log in with your EZPPFarm account to track your rank, PP, accuracy and playcount.</span
|
||||||
>Log in with your EZPPFarm account to track your rank, PP, accuracy and playcount.</span
|
>
|
||||||
>
|
</div>
|
||||||
|
<div class="flex flex-col gap-2 w-full">
|
||||||
|
<Button
|
||||||
|
class="flex-1 h-7 text-xs"
|
||||||
|
onclick={() => {
|
||||||
|
selectedView = 'login';
|
||||||
|
}}>Log In</Button
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
class="flex-1 h-7 text-xs border-theme-800 text-muted-foreground hover:text-theme-50"
|
||||||
|
onclick={async () => {
|
||||||
|
await openURL('https://ez-pp.farm/register');
|
||||||
|
}}>Register</Button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-col gap-2 w-full">
|
{/if}
|
||||||
<Button
|
</div>
|
||||||
class="flex-1 h-7 text-xs"
|
|
||||||
onclick={() => {
|
|
||||||
selectedView = 'login';
|
|
||||||
}}>Log In</Button
|
|
||||||
>
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
class="flex-1 h-7 text-xs border-theme-800 text-muted-foreground hover:text-theme-50"
|
|
||||||
onclick={async () => {
|
|
||||||
await openURL('https://ez-pp.farm/register');
|
|
||||||
}}>Register</Button
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
<div class="flex flex-col mb-auto mt-12 px-6">
|
<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-4xl font-bold drop-shadow-lg">EZPPLauncher</span>
|
||||||
<span class="text-muted-foreground font-semibold drop-shadow-lg"
|
<span class="text-muted-foreground font-semibold drop-shadow-lg"
|
||||||
|
|||||||
Reference in new issue
Block a user