stan/esports
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: refactor leaderboard display to use tables for better structure and readability

Browse Source
This commit is contained in:
Stan Runge
2026-03-01 01:08:16 +00:00
parent 263670dcae
commit e915ba4919
1 changed files with 131 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

213
src/routes/(app)/leaderboard/+page.svelte
View File

@@ -57,131 +57,109 @@
<!-- Top Players --> <!-- Top Players -->
{#if activeTab === 'players'} {#if activeTab === 'players'}
<div class="mt-6 rounded-lg border border-border bg-surface-800"> <div class="mt-6 overflow-x-auto rounded-lg border border-border bg-surface-800">
{#if data.topPlayers.length === 0} {#if data.topPlayers.length === 0}
<div class="py-12 text-center"> <div class="py-12 text-center">
<p class="text-sm text-text-secondary">No ranked players yet. Play some matches!</p> <p class="text-sm text-text-secondary">No ranked players yet. Play some matches!</p>
</div> </div>
{:else} {:else}
<div <table class="w-full">
class="grid grid-cols-[auto_auto_1fr_auto_auto_auto] gap-4 border-b border-border px-4 py-3" <thead>
> <tr class="border-b border-border text-left text-xs font-600 text-text-secondary">
<span class="text-xs font-600 text-text-secondary">#</span> <th class="w-10 py-3 pl-4 text-center">#</th>
<span class="text-xs font-600 text-text-secondary"></span> <th class="w-10 py-3"></th>
<span class="text-xs font-600 text-text-secondary">Player</span> <th class="py-3">Player</th>
<span class="text-xs font-600 text-text-secondary">ELO</span> <th class="w-16 py-3 pr-4 text-right">ELO</th>
<span class="text-xs font-600 text-text-secondary">W/L</span> <th class="w-16 py-3 pr-4 text-right">W/L</th>
<span class="text-xs font-600 text-text-secondary">Win %</span> <th class="w-16 py-3 pr-4 text-right">Win %</th>
</div> </tr>
</thead>
<tbody>
{#each data.topPlayers as p} {#each data.topPlayers as p}
{@const medal = rankBadge(p.rank)} {@const medal = rankBadge(p.rank)}
<div <tr class="border-b border-border/50 last:border-b-0 {p.rank <= 3 ? 'bg-accent/[0.02]' : ''}">
class="grid grid-cols-[auto_auto_1fr_auto_auto_auto] items-center gap-4 border-b border-border/50 px-4 py-3 last:border-b-0 {p.rank <= <td class="py-3 pl-4 text-center text-sm font-700 tabular-nums {medal?.color ?? 'text-text-secondary'}">
3
? 'bg-accent/[0.02]'
: ''}"
>
<!-- Rank -->
<span class="w-6 text-center text-sm font-700 tabular-nums {medal?.color ?? 'text-text-secondary'}">
{medal ? medal.emoji : p.rank} {medal ? medal.emoji : p.rank}
</span> </td>
<td class="py-3">
<!-- Avatar -->
{#if p.image} {#if p.image}
<img src={p.image} alt="" class="h-8 w-8 rounded-full" /> <img src={p.image} alt="" class="h-8 w-8 rounded-full" />
{:else} {:else}
<div <div class="flex h-8 w-8 items-center justify-center rounded-full bg-surface-600 text-xs font-700 text-text-secondary">
class="flex h-8 w-8 items-center justify-center rounded-full bg-surface-600 text-xs font-700 text-text-secondary"
>
{p.name.charAt(0).toUpperCase()} {p.name.charAt(0).toUpperCase()}
</div> </div>
{/if} {/if}
</td>
<!-- Name --> <td class="py-3 text-sm font-600">{p.name}</td>
<span class="truncate text-sm font-600">{p.name}</span> <td class="py-3 pr-4 text-right text-sm font-700 tabular-nums {eloColor(p.elo)}">{p.elo}</td>
<td class="py-3 pr-4 text-right text-xs tabular-nums text-text-secondary">
<!-- ELO -->
<span class="text-sm font-700 tabular-nums {eloColor(p.elo)}">{p.elo}</span>
<!-- W/L -->
<span class="text-xs tabular-nums text-text-secondary">
<span class="text-green-400">{p.wins}</span>/<span class="text-red-400">{p.losses}</span> <span class="text-green-400">{p.wins}</span>/<span class="text-red-400">{p.losses}</span>
</span> </td>
<td class="py-3 pr-4 text-right text-xs font-600 tabular-nums {p.winRate !== '—' && parseFloat(p.winRate) >= 50 ? 'text-green-400' : 'text-text-secondary'}">
<!-- Win Rate -->
<span class="text-xs font-600 tabular-nums {p.winRate !== '—' && parseFloat(p.winRate) >= 50 ? 'text-green-400' : 'text-text-secondary'}">
{p.winRate}{p.winRate !== '—' ? '%' : ''} {p.winRate}{p.winRate !== '—' ? '%' : ''}
</span> </td>
</div> </tr>
{/each} {/each}
</tbody>
</table>
{/if} {/if}
</div> </div>
{/if} {/if}
<!-- Top Teams --> <!-- Top Teams -->
{#if activeTab === 'teams'} {#if activeTab === 'teams'}
<div class="mt-6 rounded-lg border border-border bg-surface-800"> <div class="mt-6 overflow-x-auto rounded-lg border border-border bg-surface-800">
{#if data.topTeams.length === 0} {#if data.topTeams.length === 0}
<div class="py-12 text-center"> <div class="py-12 text-center">
<p class="text-sm text-text-secondary">No team results yet.</p> <p class="text-sm text-text-secondary">No team results yet.</p>
</div> </div>
{:else} {:else}
<div class="grid grid-cols-[auto_auto_1fr_auto_auto] gap-4 border-b border-border px-4 py-3"> <table class="w-full">
<span class="text-xs font-600 text-text-secondary">#</span> <thead>
<span class="text-xs font-600 text-text-secondary"></span> <tr class="border-b border-border text-left text-xs font-600 text-text-secondary">
<span class="text-xs font-600 text-text-secondary">Team</span> <th class="w-10 py-3 pl-4 text-center">#</th>
<span class="text-xs font-600 text-text-secondary">Wins</span> <th class="w-10 py-3"></th>
<span class="text-xs font-600 text-text-secondary">Matches</span> <th class="py-3">Team</th>
</div> <th class="w-16 py-3 pr-4 text-right">Wins</th>
<th class="w-20 py-3 pr-4 text-right">Matches</th>
</tr>
</thead>
<tbody>
{#each data.topTeams as t} {#each data.topTeams as t}
{@const medal = rankBadge(t.rank)} {@const medal = rankBadge(t.rank)}
<div <tr class="border-b border-border/50 last:border-b-0 {t.rank <= 3 ? 'bg-accent/[0.02]' : ''}">
class="grid grid-cols-[auto_auto_1fr_auto_auto] items-center gap-4 border-b border-border/50 px-4 py-3 last:border-b-0 {t.rank <= <td class="py-3 pl-4 text-center text-sm font-700 tabular-nums {medal?.color ?? 'text-text-secondary'}">
3
? 'bg-accent/[0.02]'
: ''}"
>
<!-- Rank -->
<span class="w-6 text-center text-sm font-700 tabular-nums {medal?.color ?? 'text-text-secondary'}">
{medal ? medal.emoji : t.rank} {medal ? medal.emoji : t.rank}
</span> </td>
<td class="py-3">
<!-- Avatar -->
{#if t.avatarUrl} {#if t.avatarUrl}
<img src={t.avatarUrl} alt="" class="h-8 w-8 rounded-full" /> <img src={t.avatarUrl} alt="" class="h-8 w-8 rounded-full" />
{:else} {:else}
<div <div class="flex h-8 w-8 items-center justify-center rounded-full bg-surface-600 text-xs font-700 text-text-secondary">
class="flex h-8 w-8 items-center justify-center rounded-full bg-surface-600 text-xs font-700 text-text-secondary"
>
{t.name.charAt(0).toUpperCase()} {t.name.charAt(0).toUpperCase()}
</div> </div>
{/if} {/if}
</td>
<!-- Name --> <td class="py-3">
<div class="min-w-0"> <span class="text-sm font-600">{t.name}</span>
<span class="truncate text-sm font-600">{t.name}</span>
{#if t.isPersonal} {#if t.isPersonal}
<span class="ml-1 text-[10px] text-text-secondary">(solo)</span> <span class="ml-1 text-[10px] text-text-secondary">(solo)</span>
{/if} {/if}
<p class="text-xs text-text-secondary">{t.memberCount} member{t.memberCount !== 1 ? 's' : ''}</p> <p class="text-xs text-text-secondary">{t.memberCount} member{t.memberCount !== 1 ? 's' : ''}</p>
</div> </td>
<td class="py-3 pr-4 text-right text-sm font-700 tabular-nums text-green-400">{t.wins}</td>
<!-- Wins --> <td class="py-3 pr-4 text-right text-xs tabular-nums text-text-secondary">{t.totalMatches}</td>
<span class="text-sm font-700 tabular-nums text-green-400">{t.wins}</span> </tr>
<!-- Total Matches -->
<span class="text-xs tabular-nums text-text-secondary">{t.totalMatches}</span>
</div>
{/each} {/each}
</tbody>
</table>
{/if} {/if}
</div> </div>
{/if} {/if}
<!-- High Scores --> <!-- High Scores -->
{#if activeTab === 'scores'} {#if activeTab === 'scores'}
<div class="mt-6 rounded-lg border border-border bg-surface-800"> <div class="mt-6 overflow-x-auto rounded-lg border border-border bg-surface-800">
{#if data.highScores.length === 0} {#if data.highScores.length === 0}
<div class="py-12 text-center"> <div class="py-12 text-center">
<p class="text-sm text-text-secondary">No scores recorded yet.</p> <p class="text-sm text-text-secondary">No scores recorded yet.</p>
@@ -190,71 +168,56 @@
<div class="px-4 py-2.5 border-b border-border"> <div class="px-4 py-2.5 border-b border-border">
<p class="text-xs text-text-secondary">Ranked by pp (performance points) when available, then score</p> <p class="text-xs text-text-secondary">Ranked by pp (performance points) when available, then score</p>
</div> </div>
<div <table class="w-full">
class="grid grid-cols-[auto_auto_1fr_auto_auto_auto_auto] gap-3 border-b border-border px-4 py-3" <thead>
> <tr class="border-b border-border text-left text-xs font-600 text-text-secondary">
<span class="text-xs font-600 text-text-secondary">#</span> <th class="w-10 py-3 pl-4 text-center">#</th>
<span class="text-xs font-600 text-text-secondary"></span> <th class="w-10 py-3"></th>
<span class="text-xs font-600 text-text-secondary">Player</span> <th class="py-3">Player</th>
<span class="text-xs font-600 text-text-secondary">Map</span> <th class="w-12 py-3 pr-4 text-right">Map</th>
<span class="text-xs font-600 text-accent">PP</span> <th class="w-16 py-3 pr-4 text-right text-accent">PP</th>
<span class="text-xs font-600 text-text-secondary">Score</span> <th class="w-24 py-3 pr-4 text-right">Score</th>
<span class="text-xs font-600 text-text-secondary">Acc</span> <th class="w-16 py-3 pr-4 text-right">Acc</th>
</div> </tr>
</thead>
<tbody>
{#each data.highScores as s} {#each data.highScores as s}
{@const medal = rankBadge(s.rank)} {@const medal = rankBadge(s.rank)}
<div <tr class="border-b border-border/50 last:border-b-0 {s.rank <= 3 ? 'bg-accent/[0.02]' : ''}">
class="grid grid-cols-[auto_auto_1fr_auto_auto_auto_auto] items-center gap-3 border-b border-border/50 px-4 py-3 last:border-b-0 {s.rank <= <td class="py-3 pl-4 text-center text-sm font-700 tabular-nums {medal?.color ?? 'text-text-secondary'}">
3
? 'bg-accent/[0.02]'
: ''}"
>
<!-- Rank -->
<span class="w-6 text-center text-sm font-700 tabular-nums {medal?.color ?? 'text-text-secondary'}">
{medal ? medal.emoji : s.rank} {medal ? medal.emoji : s.rank}
</span> </td>
<td class="py-3">
<!-- Avatar -->
{#if s.playerImage} {#if s.playerImage}
<img src={s.playerImage} alt="" class="h-8 w-8 rounded-full" /> <img src={s.playerImage} alt="" class="h-8 w-8 rounded-full" />
{:else} {:else}
<div <div class="flex h-8 w-8 items-center justify-center rounded-full bg-surface-600 text-xs font-700 text-text-secondary">
class="flex h-8 w-8 items-center justify-center rounded-full bg-surface-600 text-xs font-700 text-text-secondary"
>
{s.playerName.charAt(0).toUpperCase()} {s.playerName.charAt(0).toUpperCase()}
</div> </div>
{/if} {/if}
</td>
<!-- Player + match context --> <td class="py-3">
<div class="min-w-0"> <span class="text-sm font-600">{s.playerName}</span>
<span class="truncate text-sm font-600">{s.playerName}</span>
<p class="truncate text-xs text-text-secondary"> <p class="truncate text-xs text-text-secondary">
<a href="/matches/{s.matchId}" class="hover:text-accent">{s.matchName}</a> <a href="/matches/{s.matchId}" class="hover:text-accent">{s.matchName}</a>
</p> </p>
</div> </td>
<td class="py-3 pr-4 text-right text-xs font-600 {catColors[s.mapCategory] ?? 'text-text-secondary'}">
<!-- Map slot -->
<span class="text-xs font-600 {catColors[s.mapCategory] ?? 'text-text-secondary'}">
{s.mapCategory}{s.mapOrder} {s.mapCategory}{s.mapOrder}
</span> </td>
<td class="py-3 pr-4 text-right text-sm font-700 tabular-nums {s.pp != null ? 'text-accent' : 'text-text-secondary/40'}">
<!-- PP -->
<span class="text-sm font-700 tabular-nums {s.pp != null ? 'text-accent' : 'text-text-secondary/40'}">
{s.pp != null ? `${Math.round(s.pp)}pp` : '—'} {s.pp != null ? `${Math.round(s.pp)}pp` : '—'}
</span> </td>
<td class="py-3 pr-4 text-right text-sm font-700 tabular-nums text-text-primary">
<!-- Score -->
<span class="text-sm font-700 tabular-nums text-text-primary">
{s.score.toLocaleString()} {s.score.toLocaleString()}
</span> </td>
<td class="py-3 pr-4 text-right text-xs tabular-nums text-text-secondary">
<!-- Accuracy -->
<span class="text-xs tabular-nums text-text-secondary">
{s.accuracy > 0 ? `${(s.accuracy * 100).toFixed(1)}%` : '—'} {s.accuracy > 0 ? `${(s.accuracy * 100).toFixed(1)}%` : '—'}
</span> </td>
</div> </tr>
{/each} {/each}
</tbody>
</table>
{/if} {/if}
</div> </div>
{/if} {/if}