From d140759ea539c43f3b9a50b37719b34b58ba430e Mon Sep 17 00:00:00 2001
From: Ilion Beyst <ilion.beyst@gmail.com>
Date: Sat, 12 Nov 2022 10:41:40 +0100
Subject: match view: toggle sidebar

---
 web/pw-server/src/lib/components/Visualizer.svelte | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

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

diff --git a/web/pw-server/src/lib/components/Visualizer.svelte b/web/pw-server/src/lib/components/Visualizer.svelte
index eac1c52..9859a59 100644
--- a/web/pw-server/src/lib/components/Visualizer.svelte
+++ b/web/pw-server/src/lib/components/Visualizer.svelte
@@ -47,11 +47,14 @@
 <div id="main" class="loading">
   <canvas id="canvas" />
   <div id="name" />
-  <ul class="player-labels">
-    {#each matchData["players"] as player, i}
-      <li style="color:{PLAYER_COLORS[i]}">{player["bot_name"] || "player"}</li>
-    {/each}
-  </ul>
+  <div class="ui-topright">
+    <slot name="menu" />
+    <ul class="player-labels">
+      {#each matchData["players"] as player, i}
+        <li style="color:{PLAYER_COLORS[i]}">{player["bot_name"] || "player"}</li>
+      {/each}
+    </ul>
+  </div>
 
   <div id="meta">
     <div id="turnCounter">0 / 0</div>
@@ -78,15 +81,21 @@
 <style scoped>
   @import "pw-visualizer/src/style.css";
 
-  .player-labels {
+  .ui-topright {
     position: absolute;
     top: 10px;
     right: 10px;
     color: white;
+  }
+
+  .player-labels {
     list-style: none;
+    padding-left: 0;
+    margin-top: 0.5em;
   }
 
   .player-labels li {
+    text-align: right;
     margin-bottom: 0.5em;
   }
 </style>
-- 
cgit v1.2.3