55 lines
936 B
Svelte
55 lines
936 B
Svelte
<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>
|