General UI improvements (finished?)

0rphee · Jan 16, 2025 · e425baf · e425baf
1 parent 7a945a5
commit e425baf
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 28 deletions.
diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/package.json b/web/package.json
@@ -20,6 +20,7 @@
     "@bjorn3/browser_wasi_shim": "^0.3.0",
     "@codemirror/commands": "^6.8.0",
     "@codemirror/view": "^6.36.2",
-    "codemirror": "^6.0.1"
+    "codemirror": "^6.0.1",
+    "thememirror": "^2.0.1"
   }
 }
diff --git a/web/src/index.js b/web/src/index.js
@@ -10,6 +10,7 @@ import {
 } from "@bjorn3/browser_wasi_shim";
 import { basicSetup } from "codemirror";
 import { EditorView } from "@codemirror/view";
+import { boysAndGirls } from "thememirror";
 
 const loxFilename = "hello.lox";
 const originalLoxFileStr = `print "hello";`;
@@ -22,36 +23,36 @@ rightBox.value = "";
 
 const editorView = new EditorView({
   doc: originalLoxFileStr,
-  extensions: [basicSetup],
+  extensions: [basicSetup, boysAndGirls],
   parent: editorContainer,
 });
 
-const args = ["xolsh-exe.wasm", "hello.lox"];
-const env = [];
+const wasiArgs = ["xolsh-exe.wasm", "hello.lox"];
+const wasiEnv = [];
 
-const stdout = ConsoleStdout.lineBuffered((msg) => {
+const wasiStdout = ConsoleStdout.lineBuffered((msg) => {
   rightBox.value += `[WASI stdout] ${msg}\n`;
   // console.log(`[WASI stdout] ${msg}`);
 });
-const stderr = ConsoleStdout.lineBuffered((msg) => {
+const wasiStderr = ConsoleStdout.lineBuffered((msg) => {
   rightBox.value += `[WASI stderr] ${msg}\n`;
   // console.warn(`[WASI stderr] ${msg}`);
 });
 
 const fds = [
   new OpenFile(new File([])), // stdin
-  stdout,
-  stderr,
+  wasiStdout,
+  wasiStderr,
   new PreopenDirectory("/", [[loxFilename, loxFile]]),
 ];
-const options = { debug: false };
+const wasiOptions = { debug: false };
 const instance_exports = {};
 const wasmSource = await fetch("xolsh-exe.wasm").then((resp) =>
   resp.arrayBuffer(),
 );
 
 const runWasi = async () => {
-  const wasi = new WASI(args, env, fds, options);
+  const wasi = new WASI(wasiArgs, wasiEnv, fds, wasiOptions);
   const instance = await (async () => {
     const { instance } = await WebAssembly.instantiate(wasmSource, {
       wasi_snapshot_preview1: wasi.wasiImport,

diff --git a/web/static/index.html b/web/static/index.html
@@ -4,16 +4,30 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>xolsh</title>
+    <link href="./style.css" rel="stylesheet" />
     <link
-      href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
       rel="stylesheet"
     />
-    <link href="./style.css" rel="stylesheet" />
   </head>
   <body>
     <header>
-      <h5>xolsh - hslox</h5>
-      <button id="run-button" class="btn btn-primary">Run</button>
+      <div>
+        <h2>xolsh - hslox</h2>
+        <div>a lox interpreter</div>
+      </div>
+      <div>
+        <button id="run-button" class="btn btn-primary">
+          <i class="fa-solid fa-play"></i> Run
+        </button>
+        <a
+          href="https://github.com/0rphee/xolsh"
+          target="_blank"
+          class="btn btn-secondary"
+        >
+          <i class="fab fa-github"></i> view on github
+        </a>
+      </div>
     </header>
     <div id="content">
       <textarea

diff --git a/web/static/style.css b/web/static/style.css
@@ -3,29 +3,52 @@ body {
   flex-direction: column;
   height: 100vh;
   margin: 0;
-  font-family: Arial, sans-serif;
+  font-family: monospace;
+  color: white;
+  gap: 1px;
 }
 
 header {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
+  align-items: center;
   padding: 1.5rem;
-  border-bottom: 2px solid #e9ecef;
-  background-color: #f8f9fa;
-  /* Optional: Background color for the header */
-  font-family: monospace;
+  background-color: black;
 }
 
-header>h5 {
+a {
+  font-size: 0.9rem;
+  color: mediumturquoise;
+}
+
+a:hover {
+  color: paleturquoise
+}
+
+a:visited {
+  color: darkcyan;
+}
+
+header>div>h2 {
   margin: 0;
 }
 
+header>div {
+  margin: 0;
+  display: flex;
+  gap: 2rem;
+  align-items: center;
+}
+
 button {
   margin: 0;
-  align-self: center;
-  width: 150px;
-  font-size: 16px;
+  font-size: 1rem;
+  border: 0;
+  /* border-radius: 0.5rem; */
+  background-color: white;
+  color: black;
+  padding: 0.5rem 1.2rem;
 }
 
 .output-container {
@@ -38,27 +61,40 @@ button {
 
 textarea {
   resize: none;
-  font-family: monospace;
   font-size: 14px;
-  border: 0px solid #ced4da;
+  margin: 0;
+  border: none;
   border-radius: 0px;
   padding: 10px;
   height: 100%;
-  width: 50%;
+  width: calc(50% - 1px);
+  color: white;
+  background-color: black;
+  caret-color: #E60065;
+  box-sizing: border-box;
+}
+
+textarea:focus-visible {
+  outline: none;
 }
 
 #content {
   display: flex;
   height: 100%;
   margin: 0px;
   overflow: hidden;
+  background-color: white;
+  gap: 1px;
 }
 
 .cm-editor {
   font-size: 14px;
   height: 100%;
-  width: 50%;
+  width: calc(50% - 1px);
+}
 
+.cm-editor.cm-focused {
+  outline: none;
 }
 
 .cm-scroller {