allow selecting a map in editor view

2 files changed, 37 insertions, 18 deletions

diff --git a/web/pw-server/src/lib/components/SubmitPane.svelte b/web/pw-server/src/lib/components/SubmitPane.svelte
index 9fd2380..b0f86c8 100644
--- a/web/pw-server/src/lib/components/SubmitPane.svelte
+++ b/web/pw-server/src/lib/components/SubmitPane.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
+  import { ApiClient } from "$lib/api_client";
+
   import { get_session_token } from "$lib/auth";
   import { getBotName, saveBotName } from "$lib/bot_code";
 
   import { currentUser } from "$lib/stores/current_user";
-  import { selectedOpponent } from "$lib/stores/editor_state";
+  import { selectedOpponent, selectedMap } from "$lib/stores/editor_state";
 
   import { createEventDispatcher, onMount } from "svelte";
   import Select from "svelte-select";
@@ -11,6 +13,8 @@
   export let editSession;
 
   let availableBots: object[] = [];
+  let maps: object[] = [];
+
   let botName: string | undefined = undefined;
   // whether to show the "save succesful" message
   let saveSuccesful = false;
@@ -19,26 +23,28 @@
 
   onMount(async () => {
     botName = getBotName();
+    const apiClient = new ApiClient();
 
-    const res = await fetch("/api/bots", {
-      headers: {
-        "Content-Type": "application/json",
-      },
-    });
+    const [_bots, _maps] = await Promise.all([
+      apiClient.get("/api/bots"),
+      apiClient.get("/api/maps"),
+    ]);
 
-    if (res.ok) {
-      availableBots = await res.json();
-      if (!$selectedOpponent) {
-        selectedOpponent.set(availableBots.find((b) => b["name"] === "simplebot"));
-      }
+    availableBots = _bots;
+    maps = _maps;
+
+    if (!$selectedOpponent) {
+      selectedOpponent.set(availableBots.find((b) => b["name"] === "simplebot"));
+    }
+
+    if (!$selectedMap) {
+      selectedMap.set(maps.find((m) => m["name"] === "hex"));
     }
   });
 
   const dispatch = createEventDispatcher();
 
   async function submitBot() {
-    const opponentName = $selectedOpponent["name"];
-
     let response = await fetch("/api/submit_bot", {
       method: "POST",
       headers: {
@@ -46,7 +52,8 @@
       },
       body: JSON.stringify({
         code: editSession.getDocument().getValue(),
-        opponent_name: opponentName,
+        opponent_name: $selectedOpponent["name"],
+        map_name: $selectedMap["name"],
       }),
     });
 
@@ -103,8 +110,8 @@
 <div class="submit-pane">
   <div class="match-form">
     <h4>Play a match</h4>
-    <div class="play-text">Select an opponent to test your bot</div>
-    <div class="opponentSelect">
+    <div class="play-text">Opponent</div>
+    <div class="opponent-select">
       <Select
         optionIdentifier="name"
         labelIdentifier="name"
@@ -113,6 +120,16 @@
         isClearable={false}
       />
     </div>
+    <span>Map</span>
+    <div class="map-select">
+      <Select
+        optionIdentifier="name"
+        labelIdentifier="name"
+        items={maps}
+        bind:value={$selectedMap}
+        isClearable={false}
+      />
+    </div>
     <button class="submit-button play-button" on:click={submitBot}>Play</button>
   </div>
   <div class="save-form">
@@ -148,8 +165,9 @@
     margin-bottom: 0.3em;
   }
 
-  .opponentSelect {
-    margin: 20px 0;
+  .opponent-select,
+  .map-select {
+    margin: 8px 0;
   }
 
   .save-form {
diff --git a/web/pw-server/src/lib/stores/editor_state.ts b/web/pw-server/src/lib/stores/editor_state.ts
index 641994b..c0462e1 100644
--- a/web/pw-server/src/lib/stores/editor_state.ts
+++ b/web/pw-server/src/lib/stores/editor_state.ts
@@ -24,3 +24,4 @@ function createMatchHistory() {
 
 export const matchHistory = createMatchHistory();
 export const selectedOpponent = writable(null);
+export const selectedMap = writable(null);