From fa4c684475a365055c2aacdf712c7903c9a5f2f2 Mon Sep 17 00:00:00 2001
From: Ilion Beyst <ilion.beyst@gmail.com>
Date: Mon, 22 Aug 2022 21:58:13 +0200
Subject: [PATCH] create editor store

---
 .../src/lib/components/SubmitPane.svelte      | 11 +++++---
 web/pw-server/src/lib/stores/editor_state.ts  | 26 +++++++++++++++++++
 web/pw-server/src/routes/editor.svelte        | 15 ++++-------
 3 files changed, 38 insertions(+), 14 deletions(-)
 create mode 100644 web/pw-server/src/lib/stores/editor_state.ts

diff --git a/web/pw-server/src/lib/components/SubmitPane.svelte b/web/pw-server/src/lib/components/SubmitPane.svelte
index 82f752e..9fd2380 100644
--- a/web/pw-server/src/lib/components/SubmitPane.svelte
+++ b/web/pw-server/src/lib/components/SubmitPane.svelte
@@ -3,13 +3,14 @@
   import { getBotName, saveBotName } from "$lib/bot_code";
 
   import { currentUser } from "$lib/stores/current_user";
+  import { selectedOpponent } from "$lib/stores/editor_state";
+
   import { createEventDispatcher, onMount } from "svelte";
   import Select from "svelte-select";
 
   export let editSession;
 
   let availableBots: object[] = [];
-  let selectedOpponent = undefined;
   let botName: string | undefined = undefined;
   // whether to show the "save succesful" message
   let saveSuccesful = false;
@@ -27,14 +28,16 @@
 
     if (res.ok) {
       availableBots = await res.json();
-      selectedOpponent = availableBots.find((b) => b["name"] === "simplebot");
+      if (!$selectedOpponent) {
+        selectedOpponent.set(availableBots.find((b) => b["name"] === "simplebot"));
+      }
     }
   });
 
   const dispatch = createEventDispatcher();
 
   async function submitBot() {
-    const opponentName = selectedOpponent["name"];
+    const opponentName = $selectedOpponent["name"];
 
     let response = await fetch("/api/submit_bot", {
       method: "POST",
@@ -106,7 +109,7 @@
         optionIdentifier="name"
         labelIdentifier="name"
         items={availableBots}
-        bind:value={selectedOpponent}
+        bind:value={$selectedOpponent}
         isClearable={false}
       />
     </div>
diff --git a/web/pw-server/src/lib/stores/editor_state.ts b/web/pw-server/src/lib/stores/editor_state.ts
new file mode 100644
index 0000000..641994b
--- /dev/null
+++ b/web/pw-server/src/lib/stores/editor_state.ts
@@ -0,0 +1,26 @@
+import { writable } from "svelte/store";
+
+const MAX_MATCHES = 100;
+
+function createMatchHistory() {
+  const { subscribe, update } = writable([]);
+
+  function pushMatch(match: object) {
+    update((matches) => {
+      if (matches.length == MAX_MATCHES) {
+        matches.pop();
+      }
+      matches.unshift(match);
+
+      return matches;
+    });
+  }
+
+  return {
+    subscribe,
+    pushMatch,
+  };
+}
+
+export const matchHistory = createMatchHistory();
+export const selectedOpponent = writable(null);
diff --git a/web/pw-server/src/routes/editor.svelte b/web/pw-server/src/routes/editor.svelte
index 33217d5..b1644c8 100644
--- a/web/pw-server/src/routes/editor.svelte
+++ b/web/pw-server/src/routes/editor.svelte
@@ -2,26 +2,22 @@
   import Visualizer from "$lib/components/Visualizer.svelte";
   import EditorView from "$lib/components/EditorView.svelte";
   import { onMount } from "svelte";
-
   import { DateTime } from "luxon";
 
   import type { Ace } from "ace-builds";
   import ace from "ace-builds/src-noconflict/ace?client";
   import * as AcePythonMode from "ace-builds/src-noconflict/mode-python?client";
-  import { getBotCode, saveBotCode, hasBotCode } from "$lib/bot_code";
+  import { getBotCode, saveBotCode } from "$lib/bot_code";
+  import { matchHistory } from "$lib/stores/editor_state";
   import { debounce } from "$lib/utils";
   import SubmitPane from "$lib/components/SubmitPane.svelte";
   import OutputPane from "$lib/components/OutputPane.svelte";
-  import RulesView from "$lib/components/RulesView.svelte";
-  import Leaderboard from "$lib/components/Leaderboard.svelte";
 
   enum ViewMode {
     Editor,
     MatchVisualizer,
   }
 
-  let matches = [];
-
   let viewMode = ViewMode.Editor;
   let selectedMatchId: string | undefined = undefined;
   let selectedMatchLog: string | undefined = undefined;
@@ -47,8 +43,7 @@
 
   async function onMatchCreated(e: CustomEvent) {
     const matchData = e.detail["match"];
-    matches.unshift(matchData);
-    matches = matches;
+    matchHistory.pushMatch(matchData);
     await selectMatch(matchData["id"]);
   }
 
@@ -123,7 +118,7 @@
     }
   }
 
-  $: selectedMatch = matches.find((m) => m["id"] === selectedMatchId);
+  $: selectedMatch = $matchHistory.find((m) => m["id"] === selectedMatchId);
 </script>
 
 <div class="container">
@@ -137,7 +132,7 @@
     </div>
     <div class="sidebar-header">match history</div>
     <ul class="match-list">
-      {#each matches as match}
+      {#each $matchHistory as match}
         <li
           class="match-card sidebar-item"
           on:click={() => selectMatch(match.id)}