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

feat: update finished modal to finished banner with improved styling and layout

Browse Source
This commit is contained in:
Stan Runge
2026-03-01 18:33:30 +01:00
parent ac02f4e913
commit 08a9544f64
1 changed files with 9 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/routes/(app)/matches/[id]/+page.svelte
View File

@@ -468,35 +468,17 @@
</div> </div>
{/if} {/if}
<!-- FINISHED MODAL --> <!-- FINISHED BANNER -->
{#if m.state === 'FINISHED'} {#if m.state === 'FINISHED'}
{@const winner = m.participants.find((p: any) => p.teamId === m.winnerId)} {@const winner = m.participants.find((p: any) => p.teamId === m.winnerId)}
<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm"> <div class="mt-6 rounded-xl border border-accent/30 bg-surface-800 p-6 text-center">
<div class="w-full max-w-md rounded-xl border border-accent/30 bg-surface-800 p-8 text-center shadow-2xl"> <div class="text-3xl">🏆</div>
<div class="text-4xl">🏆</div> <h2 class="mt-3 text-xl font-800">
<h2 class="mt-4 text-2xl font-800"> <span class="text-accent">{winner?.team.name}</span> wins!
<span class="text-accent">{winner?.team.name}</span> wins! </h2>
</h2> <p class="mt-1 text-base font-700 tabular-nums text-text-secondary">
<p class="mt-2 text-lg font-700 tabular-nums text-text-secondary"> {p1?.score} – {p2?.score}
{p1?.score} – {p2?.score} </p>
</p>
<div class="mt-6 flex flex-col gap-1">
{#each m.games as game}
{@const bm = data.beatmapCache[game.slot?.beatmapId]}
{@const winnerP = m.participants.find((p: any) => p.id === game.winnerParticipantId)}
<div class="flex items-center gap-2 rounded bg-surface-700 px-3 py-1.5 text-xs">
<span class="font-600 {catColors[game.slot?.category]?.split(' ')[1] ?? 'text-text-secondary'}">{game.slot?.category}{game.slot?.orderInCategory}</span>
<span class="flex-1 truncate text-text-secondary">{bm ? `${bm.artist} - ${bm.title}` : `#${game.slot?.beatmapId}`}</span>
<span class="font-600 {winnerP?.id === p1?.id ? 'text-blue-400' : 'text-red-400'}">{winnerP?.team.name}</span>
</div>
{/each}
</div>
<a href="/" class="mt-6 inline-block rounded-md bg-accent px-6 py-2.5 text-sm font-600 text-surface-900 transition-colors hover:bg-accent-hover">
Back to Dashboard
</a>
</div>
</div> </div>
{/if} {/if}