chore: only display user stats when logged in
This commit is contained in:
HorizonCode committed
1 parent
f1b909e248
commit
11798318f4
1 file changed
+139
-134
+139
-134
@@ -961,148 +961,153 @@
|
|||||||
onClick={launch}
|
onClick={launch}
|
||||||
/>
|
/>
|
||||||
</div>
|
</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>
|
</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>
|
<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>
|
<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>
|
||||||
</div>
|
</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