show match pane when a match is selected

web/pw-server/src/lib/components/OutputPane.svelte

@@ -1,7 +1,11 @@
 <script lang="ts">
   export let matchLog: string;
 
-  function getStdErr(log: string, botId: number): string {
+  function getStdErr(botId: number, log?: string): string {
+    if (!log) {
+      return "";
+    }
+
     let output = [];
     log
       .split("\n")
@@ -15,7 +19,7 @@
     return output.join("\n");
   }
 
-  $: botStdErr = getStdErr(matchLog, 1);
+  $: botStdErr = getStdErr(1, matchLog);
 </script>
 
 <div class="output">

web/pw-server/src/lib/components/Visualizer.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { onMount } from "svelte";
+  import { onDestroy, onMount } from "svelte";
   import * as visualizer from "pw-visualizer";
   import init_wasm_module from "planetwars-rs";
 
@@ -15,6 +15,11 @@
     visualizer.set_loading(false);
   });
 
+  onDestroy(() => {
+    // TODO: do a more thorough cleanup
+    visualizer.stop();
+  });
+
   $: if (initialized) {
     if (matchLog === null) {
       visualizer.set_loading(true);

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

@@ -59,7 +59,7 @@
 
     matches.unshift(matchData);
     matches = matches;
-    selectMatch(matchData["id"]);
+    await selectMatch(matchData["id"]);
   }
 
   async function selectMatch(matchId: string) {
@@ -158,14 +158,14 @@
       </ul>
     </div>
     <div class="editor-container">
-      {#if selectedMatchLog}
+      {#if selectedMatchId}
         <Visualizer matchLog={selectedMatchLog} />
       {:else}
         <EditorView {editSession} />
       {/if}
     </div>
     <div class="sidebar-right">
-      {#if selectedMatchLog}
+      {#if selectedMatchId}
         <OutputPane matchLog={selectedMatchLog} />
       {:else}
         <SubmitPane on:submit={submitCode} />