match view: toggle sidebar

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>

web/pw-server/src/routes/__layout.svelte

@@ -2,12 +2,11 @@
   import { afterNavigate } from "$app/navigation";
 
   import "./style.css";
-  import Fa from 'svelte-fa'
-  import { faBars } from '@fortawesome/free-solid-svg-icons'
+  import Fa from "svelte-fa";
+  import { faBars } from "@fortawesome/free-solid-svg-icons";
 
   import { get_session_token, clear_session_token } from "$lib/auth";
   import { currentUser } from "$lib/stores/current_user";
-  
 
   import { onMount } from "svelte";
 

web/pw-server/src/routes/matches/[match_id].svelte

@@ -29,6 +29,7 @@
 
   export let matchLog: string | undefined;
   export let matchData: object;
+  let showSidebar = true;
 
   onMount(async () => {
     const apiClient = new ApiClient();
@@ -54,6 +55,10 @@
     return matchPlayer["owner_id"] === user?.["user_id"];
   }
 
+  function toggleSidebar() {
+    showSidebar = !showSidebar;
+  }
+
   // using the same value here causes svelte to freeze
   let dropdownSelectedPlayer: any;
   let selectedPlayer: any;
@@ -65,8 +70,14 @@
 </script>
 
 <div class="container">
-  <Visualizer {matchLog} {matchData} />
-  {#if playersWithVisibleLog.length > 0}
+  <Visualizer {matchLog} {matchData}>
+    <div slot="menu">
+      {#if playersWithVisibleLog.length > 0}
+        <div class="toggle-sidebar" on:click={toggleSidebar}>toggle sidebar</div>
+      {/if}
+    </div>
+  </Visualizer>
+  {#if showSidebar && playersWithVisibleLog.length > 0}
     <div class="output-pane">
       <div class="player-select">
         {#if playersWithVisibleLog.length == 1}
@@ -126,4 +137,9 @@
     flex-direction: column;
     background-color: variables.$bg-color;
   }
+
+  .toggle-sidebar:hover {
+    cursor: pointer;
+    color: #ccc;
+  }
 </style>