implement basic MatchBrowser component

2 files changed, 104 insertions, 3 deletions

diff --git a/web/pw-frontend/src/lib/MatchBrowser.svelte b/web/pw-frontend/src/lib/MatchBrowser.svelte
new file mode 100644
index 0000000..71fadb2
--- /dev/null
+++ b/web/pw-frontend/src/lib/MatchBrowser.svelte
@@ -0,0 +1,89 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import Visualizer from "./Visualizer.svelte";
+
+  let matches = [];
+  let selectedMatch = null;
+  let selectedMatchLog = null;
+
+  onMount(() => {
+    fetch("/api/matches")
+      .then((response) => response.json())
+      .then((m) => (matches = m));
+  });
+
+  function selectMatch(matchName) {
+    selectedMatch = matchName;
+    selectedMatchLog = null;
+    fetch(`/api/matches/${matchName}`)
+      .then((resp) => resp.text())
+      .then((log) => {
+        selectedMatchLog = log;
+      });
+  }
+</script>
+
+<div class="container">
+  <div class="sidebar">
+    <div class="sidebar-header" />
+    <ul class="match-list">
+      {#each matches as match (match.name)}
+        <li
+          on:click={() => selectMatch(match.name)}
+          class:selected={selectedMatch === match.name}
+          class="match-card"
+        >
+          {match.name}
+        </li>
+      {/each}
+    </ul>
+  </div>
+  <Visualizer matchLog={selectedMatchLog} />
+</div>
+
+<style scoped>
+  .container {
+    display: flex;
+    width: 100vw;
+    height: 100vh;
+    overflow-y: hidden;
+    background-color: rgb(41, 41, 41);
+  }
+
+  .sidebar {
+    width: 20%;
+    width: 350px;
+    color: #eee;
+    overflow: hidden;
+    overflow-y: scroll;
+    height: 100%;
+  }
+
+  .sidebar-header {
+    margin-top: 2em;
+    text-transform: uppercase;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.7);
+    font-size: 14px;
+    font-family: "Open Sans", sans-serif;
+    padding-left: 14px;
+  }
+
+  .match-list {
+    list-style: none;
+    padding: 0;
+  }
+
+  .match-card {
+    padding: 0.5em;
+    padding-left: 14px;
+  }
+
+  .match-card.selected {
+    background-color: #333;
+  }
+
+  .match-card:hover {
+    background-color: #333;
+  }
+</style>
diff --git a/web/pw-frontend/src/lib/Visualizer.svelte b/web/pw-frontend/src/lib/Visualizer.svelte
index 35b0677..297659c 100644
--- a/web/pw-frontend/src/lib/Visualizer.svelte
+++ b/web/pw-frontend/src/lib/Visualizer.svelte
@@ -2,12 +2,24 @@
   import { onMount } from 'svelte';
   import * as visualizer from '../lib/visualizer/index';
 
+  export let matchLog = null;
+
+  let initialized = false;
+
   onMount(() => {
     visualizer.init();
-    fetch("match.log")
-      .then(response => response.text())
-      .then(data => visualizer.set_instance(data));
+    initialized = true;
+    visualizer.set_loading(false);
   });
+
+  $: if (initialized) {
+    if (matchLog === null) {
+      visualizer.set_loading(true);
+    } else {
+      visualizer.set_instance(matchLog);
+      visualizer.set_loading(false);
+    }
+  }
 </script>
 
 <div id="main" class="loading">