diff options
| author | Ilion Beyst <ilion.beyst@gmail.com> | 2022-04-17 20:58:21 +0200 |
|---|---|---|
| committer | Ilion Beyst <ilion.beyst@gmail.com> | 2022-04-17 20:58:21 +0200 |
| commit | 6a39dc214a877515bc2d5494b5975b513f4c1628 (patch) | |
| tree | e8d95db3952b1a6d4fe0014d95b8ab1bdbbe0960 /web/pw-server/src/lib/components | |
| parent | 39cec55bbe738a4c5f93913b9b016050a1953d10 (diff) | |
| download | planetwars.dev-6a39dc214a877515bc2d5494b5975b513f4c1628.tar.xz planetwars.dev-6a39dc214a877515bc2d5494b5975b513f4c1628.zip | |
show player names in visualizer
Diffstat (limited to 'web/pw-server/src/lib/components')
| -rw-r--r-- | web/pw-server/src/lib/components/Visualizer.svelte | 31 |
1 files changed, 30 insertions, 1 deletions
diff --git a/web/pw-server/src/lib/components/Visualizer.svelte b/web/pw-server/src/lib/components/Visualizer.svelte index a1da923..8517a39 100644 --- a/web/pw-server/src/lib/components/Visualizer.svelte +++ b/web/pw-server/src/lib/components/Visualizer.svelte @@ -4,9 +4,22 @@ import init_wasm_module from "planetwars-rs"; export let matchLog = null; + export let matchData: object; // match object as returned by api let initialized = false; + const PLAYER_COLORS = [ + "#ff8000", + "#0080ff", + "#ff6693", + "#3fcb55", + "#cbc33f", + "#cf40e9", + "#ff3f0d", + "#1beef0", + "#0dc5ff", + ]; + onMount(async () => { await init_wasm_module(); @@ -44,7 +57,11 @@ <div id="main" class="loading"> <canvas id="canvas" /> <div id="name" /> - <div id="addbutton" class="button" /> + <ul class="player-labels"> + {#each matchData["players"] as player, i} + <li style="color:{PLAYER_COLORS[i]}">{player["bot_name"] || "player"}</li> + {/each} + </ul> <div id="meta"> <div id="turnCounter">0 / 0</div> @@ -70,4 +87,16 @@ <style scoped> @import "pw-visualizer/src/style.css"; + + .player-labels { + position: absolute; + top: 10px; + right: 10px; + color: white; + list-style: none; + } + + .player-labels li { + margin-bottom: 0.5em; + } </style> |