show player names in visualizer

This commit is contained in:
Ilion Beyst 2022-04-17 20:58:21 +02:00
parent 39cec55bbe
commit 6a39dc214a
2 changed files with 33 additions and 2 deletions

View file

@ -4,9 +4,22 @@
import init_wasm_module from "planetwars-rs"; import init_wasm_module from "planetwars-rs";
export let matchLog = null; export let matchLog = null;
export let matchData: object; // match object as returned by api
let initialized = false; let initialized = false;
const PLAYER_COLORS = [
"#ff8000",
"#0080ff",
"#ff6693",
"#3fcb55",
"#cbc33f",
"#cf40e9",
"#ff3f0d",
"#1beef0",
"#0dc5ff",
];
onMount(async () => { onMount(async () => {
await init_wasm_module(); await init_wasm_module();
@ -44,7 +57,11 @@
<div id="main" class="loading"> <div id="main" class="loading">
<canvas id="canvas" /> <canvas id="canvas" />
<div id="name" /> <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="meta">
<div id="turnCounter">0 / 0</div> <div id="turnCounter">0 / 0</div>
@ -70,4 +87,16 @@
<style scoped> <style scoped>
@import "pw-visualizer/src/style.css"; @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> </style>

View file

@ -128,6 +128,8 @@
return timestamp.toFormat("dd/MM"); return timestamp.toFormat("dd/MM");
} }
} }
$: selectedMatch = matches.find((m) => m["id"] === selectedMatchId);
</script> </script>
<div class="container"> <div class="container">
@ -165,7 +167,7 @@
</div> </div>
<div class="editor-container"> <div class="editor-container">
{#if viewMode === ViewMode.MatchVisualizer} {#if viewMode === ViewMode.MatchVisualizer}
<Visualizer matchLog={selectedMatchLog} /> <Visualizer matchData={selectedMatch} matchLog={selectedMatchLog} />
{:else if viewMode === ViewMode.Editor} {:else if viewMode === ViewMode.Editor}
<EditorView {editSession} /> <EditorView {editSession} />
{:else if viewMode === ViewMode.Rules} {:else if viewMode === ViewMode.Rules}