From 1cde40b45916d1f99a4cda7837b516cde761f127 Mon Sep 17 00:00:00 2001
From: Ilion Beyst <ilion.beyst@gmail.com>
Date: Sun, 2 Jan 2022 17:57:40 +0100
Subject: basic match views

---
 web/pw-server/src/routes/matches/[match_id].svelte | 31 +++++++++++++++++++
 web/pw-server/src/routes/matches/index.svelte      | 35 ++++++++++++++++++++++
 web/pw-server/src/routes/matches/new.svelte        |  2 ++
 3 files changed, 68 insertions(+)
 create mode 100644 web/pw-server/src/routes/matches/[match_id].svelte

(limited to 'web/pw-server/src/routes/matches')

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);
     }
-- 
cgit v1.2.3