<script lang="ts">
    import DisplayStateSvelte from "$lib/DisplayState.svelte";
    import type { Player } from "$lib/Player";

    let winners = $derived(() => {
        let highscore = 0;

        for (const player of DisplayStateSvelte.players) {
            if (player.points > highscore) highscore = player.points;
        }
        let _winners: Player[] = [];
        for (const player of DisplayStateSvelte.players) {
            if (player.points >= highscore) _winners.push(player);
        }
        return _winners;
    });
</script>

<div class="flex grow flex-col items-center justify-center gap-4 text-5xl">
    <div class="m-32">Herzlichen Glückwunsch</div>
    {#each winners() as player}
        <div class="text-7xl">
            {player.name}
        </div>
    {/each}
    <div class="m-32">
        {#if winners().length > 1}
            haben
        {:else}
            hat
        {/if}
        gewonnen!
    </div>
</div>

<style>
    .m-32 {
        margin: 32px;
    }
</style>
