feat: implement leaderboard page with top players, teams, and high scores
- Added a new leaderboard route with server-side loading for top players, teams, and recent high scores. - Created a new Svelte component for the leaderboard UI, including tabs for players, teams, and scores. - Implemented ELO ranking display and win/loss statistics for players. - Added functionality to display team wins and member counts. - Included recent high scores with player context and map details. - Enhanced team management features in the teams route, including renaming and member management with permission checks.
This commit is contained in:
@@ -13,6 +13,13 @@
|
||||
},
|
||||
admin: { label: 'Admin', color: 'bg-red-500/20 text-red-400 border-red-500/30' }
|
||||
};
|
||||
|
||||
// Non-root admins can only assign player/referee
|
||||
const availableRoles = $derived(
|
||||
data.actorIsRootAdmin
|
||||
? ['player', 'referee', 'admin']
|
||||
: ['player', 'referee']
|
||||
);
|
||||
</script>
|
||||
|
||||
<div class="mx-auto max-w-4xl">
|
||||
@@ -20,6 +27,9 @@
|
||||
<h1 class="text-2xl font-700 tracking-tight">Admin Panel</h1>
|
||||
<p class="mt-1 text-sm text-text-secondary">
|
||||
{data.users.length} registered user{data.users.length !== 1 ? 's' : ''}
|
||||
{#if data.actorIsRootAdmin}
|
||||
<span class="ml-2 rounded bg-red-500/20 px-1.5 py-0.5 text-[10px] font-700 text-red-400">ROOT ADMIN</span>
|
||||
{/if}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -39,6 +49,8 @@
|
||||
|
||||
{#each data.users as u}
|
||||
{@const badge = roleBadge[u.role] ?? roleBadge.player}
|
||||
{@const isProtected = u.isRootAdmin}
|
||||
{@const canChangeRole = !isProtected && (data.actorIsRootAdmin || u.role !== 'admin')}
|
||||
<div
|
||||
class="grid grid-cols-[auto_1fr_auto_auto_auto] items-center gap-4 border-b border-border/50 px-4 py-3 last:border-b-0"
|
||||
>
|
||||
@@ -55,7 +67,12 @@
|
||||
|
||||
<!-- Name -->
|
||||
<div class="min-w-0">
|
||||
<p class="truncate text-sm font-500">{u.name}</p>
|
||||
<div class="flex items-center gap-2">
|
||||
<p class="truncate text-sm font-500">{u.name}</p>
|
||||
{#if u.isRootAdmin}
|
||||
<span class="rounded bg-red-500/20 px-1.5 py-0.5 text-[10px] font-700 text-red-400">ROOT</span>
|
||||
{/if}
|
||||
</div>
|
||||
<p class="truncate text-xs text-text-secondary">{u.email}</p>
|
||||
</div>
|
||||
|
||||
@@ -69,35 +86,68 @@
|
||||
</span>
|
||||
|
||||
<!-- Role selector -->
|
||||
<form
|
||||
method="post"
|
||||
action="?/setRole"
|
||||
use:enhance={() => {
|
||||
actionError = '';
|
||||
return async ({ result }) => {
|
||||
if (
|
||||
result.type === 'failure' ||
|
||||
(result.type === 'success' && (result.data as any)?.error)
|
||||
) {
|
||||
actionError = (result.data as any)?.error ?? 'Failed to update role';
|
||||
}
|
||||
};
|
||||
}}
|
||||
class="flex items-center gap-2"
|
||||
>
|
||||
<input type="hidden" name="userId" value={u.id} />
|
||||
<select
|
||||
name="role"
|
||||
value={u.role}
|
||||
onchange={(e) => e.currentTarget.form?.requestSubmit()}
|
||||
class="rounded-md border px-2 py-1 text-xs font-500 {badge.color} cursor-pointer bg-transparent focus:outline-none"
|
||||
{#if canChangeRole}
|
||||
<form
|
||||
method="post"
|
||||
action="?/setRole"
|
||||
use:enhance={() => {
|
||||
actionError = '';
|
||||
return async ({ result }) => {
|
||||
if (
|
||||
result.type === 'failure' ||
|
||||
(result.type === 'success' && (result.data as any)?.error)
|
||||
) {
|
||||
actionError = (result.data as any)?.error ?? 'Failed to update role';
|
||||
}
|
||||
};
|
||||
}}
|
||||
class="flex items-center gap-2"
|
||||
>
|
||||
<option value="player" class="bg-surface-800 text-text-primary">Player</option>
|
||||
<option value="referee" class="bg-surface-800 text-text-primary">Referee</option>
|
||||
<option value="admin" class="bg-surface-800 text-text-primary">Admin</option>
|
||||
</select>
|
||||
</form>
|
||||
<input type="hidden" name="userId" value={u.id} />
|
||||
<select
|
||||
name="role"
|
||||
value={u.role}
|
||||
onchange={(e) => e.currentTarget.form?.requestSubmit()}
|
||||
class="rounded-md border px-2 py-1 text-xs font-500 {badge.color} cursor-pointer bg-transparent focus:outline-none"
|
||||
>
|
||||
{#each availableRoles as r}
|
||||
<option value={r} class="bg-surface-800 text-text-primary">
|
||||
{r.charAt(0).toUpperCase() + r.slice(1)}
|
||||
</option>
|
||||
{/each}
|
||||
</select>
|
||||
</form>
|
||||
{:else}
|
||||
<span class="rounded-md border px-2 py-1 text-xs font-500 {badge.color}">
|
||||
{badge.label}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<!-- Permission Info -->
|
||||
<div class="mt-6 rounded-lg border border-border bg-surface-800 p-5">
|
||||
<h2 class="text-sm font-600">Permission Levels</h2>
|
||||
<div class="mt-3 flex flex-col gap-2 text-xs text-text-secondary">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="rounded bg-surface-600 px-1.5 py-0.5 font-600 text-text-secondary">Player</span>
|
||||
Create account, join queue, create/manage own mappools and teams
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="rounded bg-yellow-500/20 px-1.5 py-0.5 font-600 text-yellow-400">Referee</span>
|
||||
All player permissions + manage any match, force start games
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="rounded bg-red-500/20 px-1.5 py-0.5 font-600 text-red-400">Admin</span>
|
||||
Full access + manage all mappools/teams + promote players to referee
|
||||
</div>
|
||||
{#if data.actorIsRootAdmin}
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="rounded bg-red-500/20 px-1.5 py-0.5 font-700 text-red-400">Root Admin</span>
|
||||
Can promote/demote admins. Set via ROOT_ADMIN_EMAIL env var. Cannot be demoted.
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user