8 files changed, 149 insertions, 16 deletions
diff --git a/web/pw-server/package.json b/web/pw-server/package.json
index b8a9216..eafc63f 100644
--- a/web/pw-server/package.json
+++ b/web/pw-server/package.json
@@ -32,7 +32,9 @@
   },
   "dependencies": {
     "dayjs": "^1.10.7",
-    "moment": "^2.29.1"
+    "svelte-select": "^4.4.7",
+    "pw-visualizer": "file:../pw-visualizer",
+    "planetwars-rs": "file:../planetwars-rs/pkg"
   },
   "type": "module"
 }
diff --git a/web/pw-server/src/app.html b/web/pw-server/src/app.html
index 32f9591..3193582 100644
--- a/web/pw-server/src/app.html
+++ b/web/pw-server/src/app.html
@@ -1,13 +1,22 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="description" content="" />
-    <link rel="icon" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    %svelte.head%
-  </head>
-  <body>
-    <div id="svelte">%svelte.body%</div>
-  </body>
-</html>
+
+<head>
+  <!-- polyfill global -->
+  <script>
+    const global = globalThis;
+  </script>
+  <!-- end polyfill -->
+
+  <meta charset="utf-8" />
+  <meta name="description" content="" />
+  <link rel="icon" href="/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  %svelte.head%
+</head>
+
+<body>
+  <div id="svelte">%svelte.body%</div>
+</body>
+
+</html>
+\ No newline at end of file
diff --git a/web/pw-server/src/lib/components/Visualizer.svelte b/web/pw-server/src/lib/components/Visualizer.svelte
new file mode 100644
index 0000000..d53eb36
--- /dev/null
+++ b/web/pw-server/src/lib/components/Visualizer.svelte
@@ -0,0 +1,57 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import * as visualizer from "pw-visualizer";
+  import init_wasm_module from "planetwars-rs";
+
+  export let matchLog = null;
+
+  let initialized = false;
+
+  onMount(async () => {
+    await init_wasm_module();
+
+    visualizer.init();
+    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">
+  <canvas id="canvas" />
+  <div id="name" />
+  <div id="addbutton" class="button" />
+
+  <div id="meta">
+    <div id="turnCounter">0 / 0</div>
+    <div>
+      <span>Ms per frame:&nbsp;</span>
+      <input type="number" id="speed" value="300" />
+    </div>
+    <div class="slidecontainer">
+      <input type="range" min="0" max="1" value="1" class="slider" id="turnSlider" />
+    </div>
+  </div>
+  <div class="lds-roller">
+    <div />
+    <div />
+    <div />
+    <div />
+    <div />
+    <div />
+    <div />
+    <div />
+  </div>
+</div>
+
+<style scoped>
+  @import "pw-visualizer/src/style.css";
+</style>
diff --git a/web/pw-server/src/routes/bots/[bot_id].svelte b/web/pw-server/src/routes/bots/[bot_id].svelte
index 955f1c6..3eece10 100644
--- a/web/pw-server/src/routes/bots/[bot_id].svelte
+++ b/web/pw-server/src/routes/bots/[bot_id].svelte
@@ -1,6 +1,5 @@
 <script lang="ts" context="module">
   import { get_session_token } from "$lib/auth";
-  import { mount_component } from "svelte/internal";
 
   export async function load({ page }) {
     const token = get_session_token();
diff --git a/web/pw-server/src/routes/matches/[match_id].svelte b/web/pw-server/src/routes/matches/[match_id].svelte
new file mode 100644
index 0000000..3fe98f8
--- /dev/null
+++ b/web/pw-server/src/routes/matches/[match_id].svelte
@@ -0,0 +1,31 @@
+<script lang="ts" context="module">
+  export async function load({ page }) {
+    const res = await fetch(`/api/matches/${page.params["match_id"]}`, {
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+
+    if (res.ok) {
+      return {
+        props: {
+          matchLog: await res.text(),
+        },
+      };
+    }
+
+    return {
+      status: res.status,
+      error: new Error("failed to load match"),
+    };
+  }
+</script>
+
+<script lang="ts">
+  import Visualizer from "$lib/components/Visualizer.svelte";
+  export let matchLog: string;
+</script>
+
+<div>
+  <Visualizer {matchLog} />
+</div>
diff --git a/web/pw-server/src/routes/matches/index.svelte b/web/pw-server/src/routes/matches/index.svelte
index dcfb43b..448048b 100644
--- a/web/pw-server/src/routes/matches/index.svelte
+++ b/web/pw-server/src/routes/matches/index.svelte
@@ -1 +1,36 @@
+<script lang="ts" context="module">
+  export async function load() {
+    const res = await fetch("/api/matches", {
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+
+    if (res.ok) {
+      return {
+        props: {
+          matches: await res.json(),
+        },
+      };
+    }
+
+    return {
+      status: res.status,
+      error: new Error("failed to load matches"),
+    };
+  }
+</script>
+
+<script lang="ts">
+  import dayjs from "dayjs";
+  export let matches;
+</script>
+
 <a href="/matches/new">new match</a>
+<ul>
+  {#each matches as match}
+    <li>
+      <a href="/matches/{match['id']}">{dayjs(match["created_at"]).format("YYYY-MM-DD HH:mm")}</a>
+    </li>
+  {/each}
+</ul>
diff --git a/web/pw-server/src/routes/matches/new.svelte b/web/pw-server/src/routes/matches/new.svelte
index 10ce093..eed3dbb 100644
--- a/web/pw-server/src/routes/matches/new.svelte
+++ b/web/pw-server/src/routes/matches/new.svelte
@@ -28,6 +28,7 @@
 
 <script lang="ts">
   import Select from "svelte-select";
+import { goto } from "$app/navigation";
   export let bots: object[];
   let items: object[];
   let players: object[] = [];
@@ -64,6 +65,7 @@
 
     if (res.ok) {
       // TODO
+      goto("/matches")
     } else {
       alert(res.statusText);
     }
diff --git a/web/pw-server/svelte.config.js b/web/pw-server/svelte.config.js
index 0c0c40c..b6a2cf8 100644
--- a/web/pw-server/svelte.config.js
+++ b/web/pw-server/svelte.config.js
@@ -1,6 +1,5 @@
 import adapter from "@sveltejs/adapter-auto";
 import preprocess from "svelte-preprocess";
-// import { svelte } from '@sveltejs/vite-plugin-svelte'
 import { viteCommonjs } from "@originjs/vite-plugin-commonjs";
 import wasmPack from "vite-plugin-wasm-pack";
 
@@ -18,8 +17,7 @@ const config = {
     ssr: false,
     vite: {
       plugins: [
-        // svelte(),
-        // wasmPack([], ["planetwars-rs"]),
+        wasmPack([], ["planetwars-rs"]),
         viteCommonjs({
           transformMixedEsModules: true,
         }),