diff options
| -rw-r--r-- | web/pw-server/src/lib/components/SubmitPane.svelte | 46 | ||||
| -rw-r--r-- | web/pw-server/src/routes/index.svelte | 17 |
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> |