aboutsummaryrefslogtreecommitdiff
path: root/web/pw-server/src
diff options
context:
space:
mode:
Diffstat (limited to 'web/pw-server/src')
-rw-r--r--web/pw-server/src/lib/components/EditorView.svelte (renamed from web/pw-server/src/lib/components/Editor.svelte)6
-rw-r--r--web/pw-server/src/routes/index.svelte26
2 files changed, 17 insertions, 15 deletions
diff --git a/web/pw-server/src/lib/components/Editor.svelte b/web/pw-server/src/lib/components/EditorView.svelte
index 5acbca5..c0dd109 100644
--- a/web/pw-server/src/lib/components/Editor.svelte
+++ b/web/pw-server/src/lib/components/EditorView.svelte
@@ -10,11 +10,15 @@
let editorDiv: HTMLDivElement | undefined;
let editor: Ace.Editor | undefined;
- onMount(async () => {
+ 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" />
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;