From dc415a81259dba1afdc3570c9882288940bd3c29 Mon Sep 17 00:00:00 2001
From: Ilion Beyst <ilion.beyst@gmail.com>
Date: Mon, 7 Feb 2022 21:36:54 +0100
Subject: cleanup editor code

---
 web/pw-server/src/lib/components/Editor.svelte     | 27 -------------------
 web/pw-server/src/lib/components/EditorView.svelte | 31 ++++++++++++++++++++++
 web/pw-server/src/routes/index.svelte              | 26 +++++++++---------
 3 files changed, 43 insertions(+), 41 deletions(-)
 delete mode 100644 web/pw-server/src/lib/components/Editor.svelte
 create mode 100644 web/pw-server/src/lib/components/EditorView.svelte

(limited to 'web')

diff --git a/web/pw-server/src/lib/components/Editor.svelte b/web/pw-server/src/lib/components/Editor.svelte
deleted file mode 100644
index 5acbca5..0000000
--- a/web/pw-server/src/lib/components/Editor.svelte
+++ /dev/null
@@ -1,27 +0,0 @@
-<script lang="ts">
-  import type { Ace } from "ace-builds";
-  import ace from "ace-builds/src-noconflict/ace?client";
-  import * as aceGithubTheme from "ace-builds/src-noconflict/theme-github?client";
-
-  import { onMount } from "svelte";
-
-  export let editSession: Ace.EditSession;
-
-  let editorDiv: HTMLDivElement | undefined;
-  let editor: Ace.Editor | undefined;
-
-  onMount(async () => {
-    let renderer = new ace.VirtualRenderer(editorDiv);
-    editor = new ace.Editor(renderer, editSession);
-    editor.setTheme(aceGithubTheme);
-  });
-</script>
-
-<div bind:this={editorDiv} class="editor" />
-
-<style>
-  .editor {
-    width: 100%;
-    height: 100%;
-  }
-</style>
diff --git a/web/pw-server/src/lib/components/EditorView.svelte b/web/pw-server/src/lib/components/EditorView.svelte
new file mode 100644
index 0000000..c0dd109
--- /dev/null
+++ b/web/pw-server/src/lib/components/EditorView.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+  import type { Ace } from "ace-builds";
+  import ace from "ace-builds/src-noconflict/ace?client";
+  import * as aceGithubTheme from "ace-builds/src-noconflict/theme-github?client";
+
+  import { onMount } from "svelte";
+
+  export let editSession: Ace.EditSession;
+
+  let editorDiv: HTMLDivElement | undefined;
+  let editor: Ace.Editor | undefined;
+
+  onMount(() => {
+    let renderer = new ace.VirtualRenderer(editorDiv);
+    editor = new ace.Editor(renderer, editSession);
+    editor.setTheme(aceGithubTheme);
+  });
+
+  $: if (editor !== undefined) {
+    editor.setSession(editSession);
+  }
+</script>
+
+<div bind:this={editorDiv} class="editor" />
+
+<style>
+  .editor {
+    width: 100%;
+    height: 100%;
+  }
+</style>
diff --git a/web/pw-server/src/routes/index.svelte b/web/pw-server/src/routes/index.svelte
index 76f6295..7cecba7 100644
--- a/web/pw-server/src/routes/index.svelte
+++ b/web/pw-server/src/routes/index.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-  import { goto } from "$app/navigation";
   import Visualizer from "$lib/components/Visualizer.svelte";
+  import EditorView from "$lib/components/EditorView.svelte";
   import { onMount } from "svelte";
   import "./style.css";
 
-  import ace from "ace-builds/src-noconflict/ace?client";
-  import Editor from "$lib/components/Editor.svelte";
   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";
 
   let matches = [];
 
@@ -15,12 +15,11 @@
 
   let editSession: Ace.EditSession;
 
-  onMount(async () => {
-    await init_editor();
+  onMount(() => {
+    init_editor();
   });
 
-  async function init_editor() {
-    const AcePythonMode = await import("ace-builds/src-noconflict/mode-python");
+  function init_editor() {
     editSession = new ace.EditSession("");
     editSession.setMode(new AcePythonMode.Mode());
   }
@@ -85,7 +84,11 @@
       </div>
       <ul class="match-list">
         {#each matches as match}
-          <li class="match-card sidebar-item" on:click={() => selectMatch(match.matchId)}>
+          <li
+            class="match-card sidebar-item"
+            on:click={() => selectMatch(match.matchId)}
+            class:selected={match.matchId === selectedMatchId}
+          >
             <div class="match-name">{match.matchId}</div>
           </li>
         {/each}
@@ -95,7 +98,7 @@
       {#if selectedMatchLog !== undefined}
         <Visualizer matchLog={selectedMatchLog} />
       {:else}
-        <Editor {editSession} />
+        <EditorView {editSession} />
       {/if}
     </div>
     <div class="sidebar-right">
@@ -168,11 +171,6 @@
     background-color: #333;
   }
 
-  .toolbar-editor {
-    padding: 15px;
-    color: #eee;
-  }
-
   .match-list {
     list-style: none;
     color: #eee;
-- 
cgit v1.2.3