<script lang="ts">
	import type { GamePlayer } from "$lib/GamePlayer";
	import { getMeContext } from "$lib/meContext";

	const { players, withReadyStatus = false } = $props();
	const me = getMeContext();

	function getClasses(player: GamePlayer, withReadyStatus: boolean) {
		let classes = "";

		if (withReadyStatus) {
			classes += player.isReady ? "ready" : "unready";
		}

		if (me !== null && player.id === me.id) {
			classes += " you";
		}

		return classes;
	}
</script>

<div class="list">
	<ol>
		{#each players as player}
			<li class={getClasses(player, withReadyStatus)}>{player.username}</li>
		{/each}
	</ol>
</div>

<style>
	.you {
		font-weight: bold;
	}

	.ready::after {
		content: " [ready]";
		color: green;
		font-weight: bold;
	}

	.unready::after {
		content: " [unready]";
		color: red;
		font-weight: bold;
	}

	.list {
		border: 1pt gray solid;
		background: white;
		height: 100%;
		width: 100%;
	}
</style>
