allow selecting a map in editor view

This commit is contained in:
Ilion Beyst 2022-08-27 17:05:11 +02:00
parent e26f13c8bb
commit c80ce33279
4 changed files with 39 additions and 18 deletions

View file

@ -133,6 +133,7 @@ pub fn api() -> Router {
"/matches/:match_id/log", "/matches/:match_id/log",
get(routes::matches::get_match_log), get(routes::matches::get_match_log),
) )
.route("/maps", get(routes::maps::list_maps))
.route("/leaderboard", get(routes::bots::get_ranking)) .route("/leaderboard", get(routes::bots::get_ranking))
.route("/submit_bot", post(routes::demo::submit_bot)) .route("/submit_bot", post(routes::demo::submit_bot))
.route("/save_bot", post(routes::bots::save_bot)) .route("/save_bot", post(routes::bots::save_bot))

View file

@ -1,4 +1,5 @@
pub mod bots; pub mod bots;
pub mod demo; pub mod demo;
pub mod maps;
pub mod matches; pub mod matches;
pub mod users; pub mod users;

View file

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

View file

@ -24,3 +24,4 @@ function createMatchHistory() {
export const matchHistory = createMatchHistory(); export const matchHistory = createMatchHistory();
export const selectedOpponent = writable(null); export const selectedOpponent = writable(null);
export const selectedMap = writable(null);