implement basic MatchBrowser component

4 files changed, 106 insertions, 38 deletions

diff --git a/web/pw-frontend/src/App.svelte b/web/pw-frontend/src/App.svelte
index 614cf6f..468b925 100644
--- a/web/pw-frontend/src/App.svelte
+++ b/web/pw-frontend/src/App.svelte
@@ -1,11 +1,9 @@
 <script lang="ts">
-  import Visualizer from './lib/Visualizer.svelte';
+import MatchBrowser from './lib/MatchBrowser.svelte';
 </script>
 
 <main>
-  <!-- <img src={logo} alt="Svelte Logo" /> -->
-  <!-- <h1>Hello Typescript!</h1> -->
-  <Visualizer />
+  <MatchBrowser />
 </main>
 
 <style>
@@ -13,35 +11,4 @@
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
       Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   }
-
-  img {
-    height: 16rem;
-    width: 16rem;
-  }
-
-  h1 {
-    color: #ff3e00;
-    text-transform: uppercase;
-    font-size: 4rem;
-    font-weight: 100;
-    line-height: 1.1;
-    margin: 2rem auto;
-    max-width: 14rem;
-  }
-
-  p {
-    max-width: 14rem;
-    margin: 1rem auto;
-    line-height: 1.35;
-  }
-
-  @media (min-width: 480px) {
-    h1 {
-      max-width: none;
-    }
-
-    p {
-      max-width: none;
-    }
-  }
 </style>
diff --git a/web/pw-frontend/src/assets/svelte.png b/web/pw-frontend/src/assets/svelte.png
deleted file mode 100644
index e673c91..0000000
--- a/web/pw-frontend/src/assets/svelte.png
+++ /dev/null
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">