implement ready up for players in a game lobby

src/lib/components/PlayerList.svelte

@@ -1,19 +1,29 @@
-<script>
+<script lang="ts">
+	import type { GamePlayer } from "$lib/GamePlayer";
 	import { getMeContext } from "$lib/meContext";
 
-	const { players } = $props();
-
+	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}
-			{#if me !== null && player.id === me.id}
-				<li class="you">you</li>
-			{:else}
-				<li>{player.username}</li>
-			{/if}
+			<li class={getClasses(player, withReadyStatus)}>{player.username}</li>
 		{/each}
 	</ol>
 </div>
@@ -23,6 +33,18 @@
 		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;