58 lines
1.9 KiB
Svelte
58 lines
1.9 KiB
Svelte
<script lang="ts">
|
||
import { scale } from 'svelte/transition';
|
||
import { elasticOut } from 'svelte/easing';
|
||
import { SIDE_COLORS, initials } from '$lib/components/match/theme';
|
||
import type { OverlayProps } from './context';
|
||
|
||
const { data, props, h, accent }: OverlayProps = $props();
|
||
const view = $derived(data.view);
|
||
const winner = $derived(view?.sides.find((side) => side.id === view.winner) ?? null);
|
||
const loser = $derived(view?.sides.find((side) => side.id !== view?.winner) ?? null);
|
||
</script>
|
||
|
||
{#if view && winner && loser}
|
||
{@const colors = SIDE_COLORS[winner.color]}
|
||
{@const avatar = winner.avatarUrl ?? (winner.isPersonal ? winner.players[0]?.avatarUrl : null)}
|
||
<div class="flex size-full flex-col items-center justify-center gap-4 text-center">
|
||
<div class="text-2xl font-black tracking-[0.5em]" style="color:{accent}">
|
||
{props.headline || 'WINNER'}
|
||
</div>
|
||
{#key winner.id}
|
||
<div
|
||
in:scale={{ start: 0.4, duration: 1200, easing: elasticOut }}
|
||
class="flex items-center gap-8"
|
||
>
|
||
{#if avatar}
|
||
<img
|
||
src={avatar}
|
||
alt=""
|
||
class="rounded-3xl object-cover ring-8"
|
||
style="width:{h * 0.4}px;height:{h *
|
||
0.4}px;--tw-ring-color:{colors.ring};box-shadow:0 0 80px {colors.solid}"
|
||
/>
|
||
{:else}
|
||
<div
|
||
class="grid place-items-center rounded-3xl font-black"
|
||
style="width:{h * 0.4}px;height:{h *
|
||
0.4}px;background:{colors.soft};color:{colors.text};font-size:{h * 0.15}px"
|
||
>
|
||
{initials(winner.name)}
|
||
</div>
|
||
{/if}
|
||
<div
|
||
class="font-black tracking-tight"
|
||
style="font-size:{Math.min(
|
||
140,
|
||
h * 0.28
|
||
)}px;line-height:1;color:{colors.text};text-shadow:0 0 50px {colors.solid}"
|
||
>
|
||
{winner.name}
|
||
</div>
|
||
</div>
|
||
{/key}
|
||
<div class="text-4xl font-bold text-zinc-300 tabular-nums">
|
||
{winner.points} – {loser.points} <span class="text-zinc-500">vs {loser.name}</span>
|
||
</div>
|
||
</div>
|
||
{/if}
|