Add dark theme and improve scrolling experience

numbat-wasm/www/editor.css

@@ -5,33 +5,126 @@ html {
     margin: 0;
     padding: 0;
     height: 100%;
-    font-size: 30px;
+    width: 100%;
+
+    font-size: large;
+
+    /* Light theme */
+    --editor-bg-color-light: #FFFFFF;
+    --results-bg-color-light: #f6f8f6;
+    --editor-accent-color-light: #eee;
+    --editor-text-color-light: black;
+    --editor-text-highlight-color-light: rgb(181, 213, 255);
+
+    /* Dark theme */
+    --editor-bg-color-dark: #262826;
+    --results-bg-color-dark: #2F322F;
+    --editor-accent-color-dark: #464846;
+    --editor-text-color-dark: #eee;
+    --editor-text-highlight-color-dark: rgb(83, 157, 255);
+
+    /* Default theme */
+    --editor-bg-color: var(--editor-bg-color-light);
+    --results-bg-color: var(--results-bg-color-light);
+    --editor-accent-color: var(--editor-accent-color-light);
+    --editor-text-color: var(--editor-text-color-light);
+    --editor-text-highlight-color: var(--editor-text-highlight-color-light);
+
+    background-color: var(--editor-bg-color);
+    caret-color: var(--editor-text-color);
+}
+
+.alt-theme body,
+html.alt-theme {
+    --editor-bg-color: var(--editor-bg-color-dark);
+    --results-bg-color: var(--results-bg-color-dark);
+    --editor-accent-color: var(--editor-accent-color-dark);
+    --editor-text-color: var(--editor-text-color-dark);
+    --editor-text-highlight-color: var(--editor-text-highlight-color-dark);
+}
+
+@media (prefers-color-scheme: dark) {
+
+    body,
+    html {
+        --editor-bg-color: var(--editor-bg-color-dark);
+        --results-bg-color: var(--results-bg-color-dark);
+        --editor-accent-color: var(--editor-accent-color-dark);
+        --editor-text-color: var(--editor-text-color-dark);
+        --editor-text-highlight-color: var(--editor-text-highlight-color-dark);
+    }
+
+    .alt-theme body,
+    html.alt-theme {
+        --editor-bg-color: var(--editor-bg-color-light);
+        --results-bg-color: var(--results-bg-color-light);
+        --editor-accent-color: var(--editor-accent-color-light);
+        --editor-text-color: var(--editor-text-color-light);
+        --editor-text-highlight-color: var(--editor-text-highlight-color-light);
+    }
 }
 
+
 .split {
-    width: 100%;
-    height: 100%;
+    width: auto;
+    min-height: 100%;
     display: flex;
     flex-direction: row;
+    overflow-y: auto;
+    margin: 0px;
 }
 
+
 .gutter {
-    background-color: #eee;
+    background-color: var(--editor-accent-color);
     background-repeat: no-repeat;
     background-position: 50%;
 }
 
+
 .gutter.gutter-horizontal {
     background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
     cursor: col-resize;
+    height: 100dvh;
+    position: sticky;
+    top: 0px;
 }
 
+
 #editor {
     font-family: 'Fira Mono', monospace;
     font-size: 1em;
+    overflow-y: clip;
 }
 
 
+.terminal,
+.cmd,
+.ace_editor {
+    background-color: var(--editor-bg-color);
+    color: var(--editor-text-color);
+}
+
+.ace-tm .ace_cursor {
+    color: var(--editor-text-color)
+}
+
+.ace-tm .ace_marker-layer .ace_selection {
+    background: var(--editor-text-highlight-color)
+}
+
+#editor .ace_gutter {
+    background-color: var(--editor-accent-color);
+    color: var(--editor-text-color);
+}
+
+#theme-toggle {
+    position: absolute;
+    right: 6px;
+    top: 6px;
+    background-color: #00000000;
+}
+
 .type-expr {
     font-family: 'Fira Mono', monospace;
     font-size: 1em;
@@ -42,14 +135,23 @@ html {
     display: block;
 }
 
+
 #results {
     font-family: 'Fira Mono', monospace;
     font-size: 1em;
     padding: 0.1em;
-    background-color: #f6f8f6;
-    overflow: auto;
+    padding-bottom: 1em;
+    background-color: var(--results-bg-color);
+    color: var(--editor-text-color);
+    overflow-y: clip;
 }
 
+
+#results div {
+    white-space-collapse: preserve;
+}
+
+
 .numbat-type-identifier {
     color: #ca3b63;
 }
@@ -95,7 +197,7 @@ html {
 }
 
 .numbat-unit {
-    color: #5c12a6;
+    color: #8812a6;
 }
 
 .numbat-dimmed {
@@ -113,3 +215,31 @@ html {
 .numbat-diagnostic-bold {
     font-weight: bold;
 }
+
+
+
+@media all and (width <=900px) {
+
+    body,
+    html {
+        font-size: medium;
+    }
+
+    .split {
+        margin: 0px;
+    }
+}
+
+
+
+@media all and (width >=1900px) {
+
+    body,
+    html {
+        font-size: x-large;
+    }
+
+    .split {
+        margin: 0px 100px;
+    }
+}

numbat-wasm/www/editor.html

@@ -4,28 +4,20 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Numbat</title>
+    <link rel="icon" type="image/png" href="numbat-196x196.png" sizes="196x196">
+    <link rel="icon" type="image/png" href="numbat-32x32.png" sizes="32x32">
+    <link rel="icon" type="image/png" href="numbat-16x16.png" sizes="16x16">
     <link rel="stylesheet" href="editor.css">
 </head>
 <body>
+    <div id="theme-toggle"><img src="assets/sun.svg" /></div>
     <div class="split">
-        <div id="editor">8 km / (1 h + 25 min)
-
-atan2(30 cm, 1 m) -> deg
-
-let ω = 2π c / 660 nm
-ℏ ω -> eV
-
-
-fn braking_distance(v) = v t_reaction + v² / 2 µ g0
-  where t_reaction = 1 s # driver reaction time
-    and µ = 0.7          # coefficient of friction
-
-braking_distance(50 km/h) -> m</div>
+            <div id="editor"></div>
         <div id="results"></div>
     </div>
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/split.js/1.6.0/split.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.9.6/ace.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.36.2/ace.js"></script>
     <script type="module" src="editor.js"></script>
 </body>
 </html>

numbat-wasm/www/editor.js

@@ -11,6 +11,7 @@ async function main() {
 
     initializeEditor();
     initializeSplit();
+    initializeThemeToggle();
 }
 
 main();
@@ -25,14 +26,29 @@ function interpret(input) {
         let num_newlines = res ? res.length : 0;
 
         let brs = "<br>".repeat(num_newlines);
-
-        return brs + numbat.interpret(part).output;
+        let interpretOutput = numbat.interpret(part);
+
+        let output = part.trim().length > 0 ? interpretOutput.output.trim() : "";
+
+        if (interpretOutput.is_error) {
+            output = output.replace(/<(input:\d+)>/gm, "&lt;$1&gt;")
+        }
+        let result = "";
+
+        if (output.trim().length === 0) {
+            result = brs + "<br>";
+        } else {
+            result = brs + "<div>" + output  + "</div>";
+        }
+
+        interpretOutput.free();
+        return result;
     });
 
-    return results.join("<br><br>");
+    return results.join("<br>");
 }
 
-ace.config.set("basePath", "https://cdnjs.cloudflare.com/ajax/libs/ace/1.9.6/");
+ace.config.set("basePath", "https://cdnjs.cloudflare.com/ajax/libs/ace/1.36.2/");
 
 ace.define(
     "ace/mode/numbat_highlight_rules",
@@ -134,8 +150,23 @@ function initializeEditor() {
         showGutter: true,
         highlightActiveLine: false,
         highlightGutterLine: false,
+        scrollPastEnd: 0,
     });
 
+    editor.insert(`8 km / (1 h + 25 min)
+
+atan2(30 cm, 1 m) -> deg
+
+let ω = 2π c / 660 nm
+ℏ ω -> eV
+
+
+fn braking_distance(v) = v t_reaction + v² / 2 µ g0
+  where t_reaction = 1 s # driver reaction time
+    and µ = 0.7          # coefficient of friction
+
+braking_distance(50 km/h) -> m`);
+
     function evaluate() {
         let code = editor.getValue();
 
@@ -158,3 +189,23 @@ function initializeSplit() {
         gutterSize: 15,
     });
 }
+
+function initializeThemeToggle() { 
+    const colorSchemeQueryList = window.matchMedia('(prefers-color-scheme: dark)');
+
+    let toggleImg = document.querySelector("#theme-toggle img");
+    toggleImg.src = colorSchemeQueryList.matches ? "assets/sun.svg" : "assets/moon.svg";
+
+    function toggleTheme() {
+        let classList = document.querySelector(":root").classList;
+        let isToggledOn = classList.toggle("alt-theme");
+
+        if (colorSchemeQueryList.matches) {
+            toggleImg.src = isToggledOn ? "assets/moon.svg" : "assets/sun.svg";
+        } else {
+            toggleImg.src = isToggledOn ? "assets/sun.svg" : "assets/moon.svg";
+        }
+    } 
+
+    document.getElementById("theme-toggle").addEventListener("click", toggleTheme);
+}