Files
jamoke/src/lib/components/PlayerList.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>