add turns and update token logic.

This commit is contained in:
2025-02-17 15:21:03 -08:00
parent f413b74a1f
commit c08a15f01f
34 changed files with 698 additions and 151 deletions

View File

@ -1,52 +1,59 @@
<script lang="ts">
type GameData = {id: number, name: string, players: string[]}
const games: GameData[] = [
{id: 1, name: "The Worst", players: ["Bob", "Ted", "George"]},
{id: 2, name: "The Best", players: ["Shelly", "William", "Abby"]},
{id: 3, name: "The One with the Treasure Chest", players: ["Jack"]},
];
import PlayerList from "$lib/components/PlayerList.svelte";
import type { GameData } from "$lib/GameData.js";
import type { Listing } from "$lib/Listing";
const { data } = $props();
const games = data.games;
const prettyDate = (date: Date) => {
return `${date.toLocaleString()}`;
};
</script>
<main>
<h1>Let&#146;s Play Ten Thousand</h1>
<table>
<thead>
<tr>
<td>No.</td>
<td>Name</td>
<td>Players</td>
</tr>
</thead>
<tbody>
{#each games as game}
{@render GameRow(game)}
{/each}
</tbody>
</table>
</main>
<h1>Let&#146;s Play Ten Thousand</h1>
{#snippet GameRow (game: GameData)}
<tr>
<td>{game.id}</td>
<td>{game.name}</td>
<td>{game.players.length}</td>
</tr>
<h2>Games</h2>
<div class="game-list">
{#each games as game}
{@render GameRow(game)}
{/each}
</div>
{#snippet GameRow(game: Listing<GameData>)}
<div class="game-listing">
<div>{prettyDate(new Date(game.createdAt))}</div>
<div>
{#each games as game}
<PlayerList players={game.data.players} />
{/each}
</div>
<form method="GET" action={`/games/${game.id}`}>
<input type="submit" value="JOIN" />
</form>
</div>
{/snippet}
<style>
main {
width: 60rem;
margin: auto;
}
.game-list {
width: 100%;
}
td {
border: solid black 1px;
padding: 1rem;
}
.game-listing {
display: flex;
gap: 3rem;
padding: 0.5rem;
}
table {
width: 100%;
}
.game-listing > div {
flex: 1 1 auto;
}
form {
display: flex;
flex: 1 1 auto;
}
form input {
width: 100%;
}
</style>