From 6a39dc214a877515bc2d5494b5975b513f4c1628 Mon Sep 17 00:00:00 2001
From: Ilion Beyst <ilion.beyst@gmail.com>
Date: Sun, 17 Apr 2022 20:58:21 +0200
Subject: show player names in visualizer

---
 web/pw-server/src/lib/components/Visualizer.svelte | 31 +++++++++++++++++++++-
 web/pw-server/src/routes/index.svelte              |  4 ++-
 2 files changed, 33 insertions(+), 2 deletions(-)

(limited to 'web/pw-server/src')

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>
diff --git a/web/pw-server/src/routes/index.svelte b/web/pw-server/src/routes/index.svelte
index 984910e..055112a 100644
--- a/web/pw-server/src/routes/index.svelte
+++ b/web/pw-server/src/routes/index.svelte
@@ -128,6 +128,8 @@
       return timestamp.toFormat("dd/MM");
     }
   }
+
+  $: selectedMatch = matches.find((m) => m["id"] === selectedMatchId);
 </script>
 
 <div class="container">
@@ -165,7 +167,7 @@
   </div>
   <div class="editor-container">
     {#if viewMode === ViewMode.MatchVisualizer}
-      <Visualizer matchLog={selectedMatchLog} />
+      <Visualizer matchData={selectedMatch} matchLog={selectedMatchLog} />
     {:else if viewMode === ViewMode.Editor}
       <EditorView {editSession} />
     {:else if viewMode === ViewMode.Rules}
-- 
cgit v1.2.3