add save bot form

2 files changed, 58 insertions, 5 deletions

diff --git a/web/pw-server/src/lib/components/SubmitPane.svelte b/web/pw-server/src/lib/components/SubmitPane.svelte
index cfdb672..d647b46 100644
--- a/web/pw-server/src/lib/components/SubmitPane.svelte
+++ b/web/pw-server/src/lib/components/SubmitPane.svelte
@@ -4,6 +4,7 @@
 
   let availableBots: object[] = [];
   let selectedOpponent = "simplebot";
+  let botName: string | undefined = undefined;
 
   const optionIdentifier = "name";
   const labelIdentifier = "name";
@@ -23,8 +24,14 @@
 
   const dispatch = createEventDispatcher();
 
-  function submit() {
-    dispatch("submit");
+  function submitBot() {
+    dispatch("submitBot");
+  }
+
+  function saveBot() {
+    dispatch("saveBot", {
+      botName: botName,
+    });
   }
 </script>
 
@@ -39,7 +46,12 @@
         bind:value={selectedOpponent}
       />
     </div>
-    <button class="play-button" on:click={submit}>Play</button>
+    <button class="submit-button play-button" on:click={submitBot}>Play</button>
+  </div>
+  <div class="save-form">
+    <h4>Save your bot</h4>
+    <input type="text" class="bot-name-input" placeholder="bot name" bind:value={botName} />
+    <button class="submit-button save-button" on:click={saveBot}>Save</button>
   </div>
 </div>
 
@@ -47,12 +59,29 @@
   .submit-pane {
     margin: 20px;
     flex: 1;
+    display: flex;
+    flex-direction: column;
   }
 
   .opponentSelect {
     margin: 20px 0;
   }
 
+  .save-form {
+    margin-top: 8em;
+  }
+
+  .submit-button {
+    padding: 8px 16px;
+    border-radius: 8px;
+    border: 0;
+    font-size: 18pt;
+    display: block;
+    margin: 10px auto;
+    background-color: lightgreen;
+    cursor: pointer;
+  }
+
   .play-button {
     padding: 8px 16px;
     border-radius: 8px;
@@ -63,4 +92,15 @@
     background-color: lightgreen;
     cursor: pointer;
   }
+
+  .bot-name-input {
+    width: 100%;
+  }
+
+  .save-button {
+    background-color: lightgreen;
+    cursor: pointer;
+    padding: 8px 16px;
+    border: 0;
+  }
 </style>
diff --git a/web/pw-server/src/routes/index.svelte b/web/pw-server/src/routes/index.svelte
index a7b1884..b9e5c2e 100644
--- a/web/pw-server/src/routes/index.svelte
+++ b/web/pw-server/src/routes/index.svelte
@@ -38,7 +38,7 @@
     (editSession as any).on("change", debounce(saveCode, 2000));
   }
 
-  async function submitCode() {
+  async function submitBot() {
     let response = await fetch("/api/submit_bot", {
       method: "POST",
       headers: {
@@ -62,6 +62,19 @@
     await selectMatch(matchData["id"]);
   }
 
+  async function saveBot(e: CustomEvent) {
+    let response = await fetch("/api/save_bot", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        bot_name: e.detail["botName"],
+        code: editSession.getDocument().getValue(),
+      }),
+    });
+  }
+
   async function selectMatch(matchId: string) {
     selectedMatchId = matchId;
     selectedMatchLog = null;
@@ -168,7 +181,7 @@
       {#if selectedMatchId}
         <OutputPane matchLog={selectedMatchLog} />
       {:else}
-        <SubmitPane on:submit={submitCode} />
+        <SubmitPane on:submitBot={submitBot} on:saveBot={saveBot} />
       {/if}
     </div>
   </div>