match form stubs

2 files changed, 83 insertions, 0 deletions

diff --git a/web/pw-server/src/routes/matches/index.svelte b/web/pw-server/src/routes/matches/index.svelte
new file mode 100644
index 0000000..dcfb43b
--- /dev/null
+++ b/web/pw-server/src/routes/matches/index.svelte
@@ -0,0 +1 @@
+<a href="/matches/new">new match</a>
diff --git a/web/pw-server/src/routes/matches/new.svelte b/web/pw-server/src/routes/matches/new.svelte
new file mode 100644
index 0000000..10ce093
--- /dev/null
+++ b/web/pw-server/src/routes/matches/new.svelte
@@ -0,0 +1,82 @@
+<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();
+    const res = await fetch("/api/bots", {
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${token}`,
+      },
+    });
+
+    if (res.ok) {
+      return {
+        props: {
+          bots: await res.json(),
+        },
+      };
+    }
+
+    return {
+      status: res.status,
+      error: new Error("Could not load bot"),
+    };
+  }
+</script>
+
+<script lang="ts">
+  import Select from "svelte-select";
+  export let bots: object[];
+  let items: object[];
+  let players: object[] = [];
+  let selected: object | null = null;
+
+  $: items = bots.map((bot) => {
+    return {
+      value: bot["id"],
+      label: bot["name"],
+    };
+  });
+
+  function addPlayer() {
+    if (selected === null) {
+      return;
+    }
+
+    players.push(selected);
+    players = players;
+  }
+
+  async function submitMatch() {
+    const token = get_session_token();
+    const res = await fetch("/api/matches", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${token}`,
+      },
+      body: JSON.stringify({
+        players: players.map((player) => player["value"]),
+      }),
+    });
+
+    if (res.ok) {
+      // TODO
+    } else {
+      alert(res.statusText);
+    }
+  }
+</script>
+
+Select players:
+<Select {items} bind:value={selected} />
+<button on:click={addPlayer}>add</button>
+<h3>Selected Players</h3>
+<ol>
+  {#each players as player}
+    <li>{player["label"]}</li>
+  {/each}
+</ol>
+<button on:click={submitMatch}>Play</button>