diff --git a/index.html b/index.html index 232ac6e..12c3508 100644 --- a/index.html +++ b/index.html @@ -9,22 +9,39 @@ - +
+
+

playground

+ | + A zigtools initiative. + | + Warning Zig's self-hosted WebAssembly backend is still experimental! +
+
+ + +
+
-
+
-
+
+
 
+
+
- - - \ No newline at end of file + diff --git a/package-lock.json b/package-lock.json index 5c3550e..1520099 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,9 @@ "@codemirror/view": "^6.9.3", "@ndim/codemirror-lang-zig": "^0.2.0", "@ndim/lezer-zig": "^0.2.0", + "@xterm/addon-fit": "^0.12.0-beta.292", + "@xterm/addon-image": "^0.10.0-beta.292", + "@xterm/xterm": "^6.1.0-beta.292", "codemirror": "^6.0.1", "vscode-languageserver-protocol": "^3.17.3" }, @@ -861,6 +864,33 @@ "node": ">=16.20.0" } }, + "node_modules/@xterm/addon-fit": { + "version": "0.12.0-beta.292", + "resolved": "https://registry.npmjs.org/@xterm/addon-fit/-/addon-fit-0.12.0-beta.292.tgz", + "integrity": "sha512-SIuWR0KM2IpmumVqL4L43aOUeTEUeN82ItyrUFHGFtfj3veoAIbPapxJPj7O0tYngfiiHZqqm1+XsZp/Fc8LLA==", + "license": "MIT", + "peerDependencies": { + "@xterm/xterm": "^6.1.0-beta.292" + } + }, + "node_modules/@xterm/addon-image": { + "version": "0.10.0-beta.292", + "resolved": "https://registry.npmjs.org/@xterm/addon-image/-/addon-image-0.10.0-beta.292.tgz", + "integrity": "sha512-kFhxNiZ5eU1acMYvp/aS0wYs2wJ3j/ueq54FSNnWwnchirOuAVQxxdlFdxlZFHVLSas7rijqaRN1dniN+30HGQ==", + "license": "MIT", + "peerDependencies": { + "@xterm/xterm": "^6.1.0-beta.292" + } + }, + "node_modules/@xterm/xterm": { + "version": "6.1.0-beta.292", + "resolved": "https://registry.npmjs.org/@xterm/xterm/-/xterm-6.1.0-beta.292.tgz", + "integrity": "sha512-17zqK5tM/l6qeD7McF42OrEJ6w3XqJ2vFVKdWqu0cYLzdFqMWAHp2oFNc8Fj5DmqDSl1E1FZEg6IFflDllTvLA==", + "license": "MIT", + "workspaces": [ + "addons/*" + ] + }, "node_modules/codemirror": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-6.0.1.tgz", diff --git a/package.json b/package.json index 2c168f2..c256610 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,9 @@ "@codemirror/view": "^6.9.3", "@ndim/codemirror-lang-zig": "^0.2.0", "@ndim/lezer-zig": "^0.2.0", + "@xterm/addon-fit": "^0.12.0-beta.292", + "@xterm/addon-image": "^0.10.0-beta.292", + "@xterm/xterm": "^6.1.0-beta.292", "codemirror": "^6.0.1", "vscode-languageserver-protocol": "^3.17.3" }, diff --git a/src/editor.ts b/src/editor.ts index dff936d..2d29b34 100644 --- a/src/editor.ts +++ b/src/editor.ts @@ -5,6 +5,10 @@ import { formatDocument } from "@codemirror/lsp-client"; import { indentWithTab } from "@codemirror/commands"; import { indentUnit, syntaxHighlighting } from "@codemirror/language"; import { zigLanguage } from "@ndim/codemirror-lang-zig"; +import { Terminal } from "@xterm/xterm"; +import { FitAddon } from "@xterm/addon-fit"; +import { ImageAddon } from "@xterm/addon-image"; +import "@xterm/xterm/css/xterm.css"; import { editorTheme, highlightStyle } from "./theme.ts"; import { lspClient } from "./lsp.ts"; // @ts-ignore @@ -12,13 +16,23 @@ import ZigWorker from './workers/zig.ts?worker'; // @ts-ignore import RunnerWorker from './workers/runner.ts?worker'; // @ts-ignore -import zigMainSource from './main.zig?raw'; +import helloWorldSource from './examples/hello-world.zig?raw'; +// @ts-ignore +import ansiTextSource from './examples/ansi-text.zig?raw'; +// @ts-ignore +import fizzBuzzSource from './examples/fizz-buzz.zig?raw'; +// @ts-ignore +import fibonacciSource from './examples/fibonacci.zig?raw'; +// @ts-ignore +import mandelbrotSource from './examples/mandelbrot.zig?raw'; +// @ts-ignore +import kittyImageSource from './examples/kitty-image.zig?raw'; const editor = new EditorView({ extensions: [], parent: document.getElementById("editor")!, state: EditorState.create({ - doc: zigMainSource, + doc: helloWorldSource, extensions: [ basicSetup, editorTheme, @@ -37,58 +51,85 @@ const editor = new EditorView({ }), }); +const output = document.getElementById("output")!; +const executionStatus = document.getElementById("execution-status")!; +const outputStyle = getComputedStyle(document.documentElement); +const terminal = new Terminal({ + disableStdin: true, + convertEol: true, + cursorBlink: false, + fontSize: 16, + fontFamily: "monospace", + scrollback: 1000, + theme: { + background: outputStyle.getPropertyValue("--output-background").trim(), + foreground: outputStyle.getPropertyValue("--output-text").trim(), + }, +}); +const fitAddon = new FitAddon(); +terminal.loadAddon(fitAddon); +terminal.loadAddon(new ImageAddon()); +terminal.open(output); +terminal.write("\x1b[?25l"); // hide cursor +fitAddon.fit(); +new ResizeObserver(() => fitAddon.fit()).observe(output); + function revealOutputWindow() { - const outputs = document.getElementById("output")!; - outputs.scrollTo(0, outputs.scrollHeight!); - const editorHeightPercent = parseFloat(splitPane.style.getPropertyValue("--editor-height-percent")); - if (editorHeightPercent == 100) { - splitPane.style.setProperty("--editor-height-percent", `${resizeBarPreviousSize}%`); + const editorWidthPercent = parseFloat(splitPane.style.getPropertyValue("--editor-width-percent")); + if (editorWidthPercent == 100) { + splitPane.style.setProperty("--editor-width-percent", `${resizeBarPreviousSize}%`); } } let zigWorker = new ZigWorker(); +let compilationStartedAt = 0; +let isCompiling = false; +let executionId = 0; zigWorker.onmessage = (ev: MessageEvent) => { if (ev.data.stderr) { - document.querySelector(".zig-output:last-child")!.textContent += ev.data.stderr; + terminal.write(ev.data.stderr); revealOutputWindow(); return; - } else if (ev.data.failed) { - const outputSplit = document.createElement("div"); - outputSplit.classList.add("output-split"); - document.getElementById("output")!.appendChild(outputSplit); } else if (ev.data.compiled) { - let runnerWorker = new RunnerWorker(); + const compilationTime = Math.round(performance.now() - compilationStartedAt); + const currentExecutionId = executionId; + const runStartedAt = performance.now(); + isCompiling = false; + executionStatus.textContent = `Compiled in ${compilationTime} ms | Running...`; - const zigOutput = document.createElement("div"); - zigOutput.classList.add("runner-output"); - zigOutput.classList.add("latest"); - document.getElementById("output")!.appendChild(zigOutput); + let runnerWorker = new RunnerWorker(); runnerWorker.postMessage({ run: ev.data.compiled }); runnerWorker.onmessage = (rev: MessageEvent) => { if (rev.data.stderr) { - document.querySelector(".runner-output:last-child")!.textContent += rev.data.stderr; + terminal.write(rev.data.stderr); revealOutputWindow(); return; } else if (rev.data.done) { + if (currentExecutionId == executionId) { + const runTime = Math.round(performance.now() - runStartedAt); + executionStatus.textContent = `Compiled in ${compilationTime} ms | Ran in ${runTime} ms | Exit code ${rev.data.exitCode}`; + } runnerWorker.terminate(); - const outputSplit = document.createElement("div"); - outputSplit.classList.add("output-split"); - document.getElementById("output")!.appendChild(outputSplit); } } + } else if (ev.data.failed) { + const compilationTime = Math.round(performance.now() - compilationStartedAt); + isCompiling = false; + executionStatus.textContent = `Compilation failed in ${compilationTime} ms`; } } const splitPane = document.getElementById("split-pane")! as HTMLDivElement; const resizeBar = document.getElementById("resize-bar")! as HTMLDivElement; -let resizeBarPreviousSize = 70; +let resizeBarPreviousSize = 60; function onResizeBarMove(event: MouseEvent) { - const percent = Math.min(Math.max(10, event.clientY / splitPane.getBoundingClientRect().height * 100), 100); - splitPane.style.setProperty("--editor-height-percent", `${percent}%`); + const bounds = splitPane.getBoundingClientRect(); + const percent = Math.min(Math.max(10, (event.clientX - bounds.left) / bounds.width * 100), 100); + splitPane.style.setProperty("--editor-width-percent", `${percent}%`); } function onResizeBarMouseUp(event: MouseEvent) { window.removeEventListener("mousemove", onResizeBarMove); @@ -98,9 +139,9 @@ function onResizeBarMouseUp(event: MouseEvent) { document.body.style.removeProperty("cursor"); // fully close the output window when it's almost closed - const editorHeightPercent = parseFloat(splitPane.style.getPropertyValue("--editor-height-percent")); - if (editorHeightPercent >= 90) { - splitPane.style.setProperty("--editor-height-percent", "100%"); + const editorWidthPercent = parseFloat(splitPane.style.getPropertyValue("--editor-width-percent")); + if (editorWidthPercent >= 90) { + splitPane.style.setProperty("--editor-width-percent", "100%"); } } @@ -109,32 +150,50 @@ resizeBar.addEventListener("mousedown", event => { window.addEventListener("mousemove", onResizeBarMove); window.addEventListener("mouseup", onResizeBarMouseUp); document.body.style.userSelect = "none"; - document.body.style.cursor = "row-resize"; + document.body.style.cursor = "col-resize"; } }); resizeBar.addEventListener("dblclick", event => { - const editorHeightPercent = parseFloat(splitPane.style.getPropertyValue("--editor-height-percent")); - if (editorHeightPercent == 100) { - splitPane.style.setProperty("--editor-height-percent", `${resizeBarPreviousSize}%`); + const editorWidthPercent = parseFloat(splitPane.style.getPropertyValue("--editor-width-percent")); + if (editorWidthPercent == 100) { + splitPane.style.setProperty("--editor-width-percent", `${resizeBarPreviousSize}%`); } else { - resizeBarPreviousSize = editorHeightPercent; - splitPane.style.setProperty("--editor-height-percent", `100%`); + resizeBarPreviousSize = editorWidthPercent; + splitPane.style.setProperty("--editor-width-percent", `100%`); } }); const outputsRun = document.getElementById("run")! as HTMLButtonElement; +const exampleSelect = document.getElementById("example-select")! as HTMLSelectElement; + +const examples: Record = { + "hello-world": helloWorldSource, + "ansi-text": ansiTextSource, + "fizz-buzz": fizzBuzzSource, + "fibonacci": fibonacciSource, + "mandelbrot": mandelbrotSource, + "kitty-image": kittyImageSource, +}; + +exampleSelect.addEventListener("change", () => { + editor.dispatch({ + changes: { + from: 0, + to: editor.state.doc.length, + insert: examples[exampleSelect.value], + }, + }); +}); + outputsRun.addEventListener("click", async () => { - for (const zo of document.querySelectorAll(".zig-output")) { - zo.classList.remove("latest"); - } - for (const ro of document.querySelectorAll(".runner-output")) { - ro.classList.remove("latest"); - } + if (isCompiling) return; - const zigOutput = document.createElement("div"); - zigOutput.classList.add("zig-output"); - zigOutput.classList.add("latest"); - document.getElementById("output")!.appendChild(zigOutput); + isCompiling = true; + executionId += 1; + compilationStartedAt = performance.now(); + executionStatus.textContent = "Compiling..."; + terminal.reset(); + terminal.write("\x1b[?25l"); // hide cursor revealOutputWindow(); zigWorker.postMessage({ diff --git a/src/examples/ansi-text.zig b/src/examples/ansi-text.zig new file mode 100644 index 0000000..ec97d68 --- /dev/null +++ b/src/examples/ansi-text.zig @@ -0,0 +1,17 @@ +const std = @import("std"); + +pub fn main(init: std.process.Init) !void { + var buffer: [4096]u8 = undefined; + var file_writer = std.Io.File.stdout().writerStreaming(init.io, &buffer); + const stdout = &file_writer.interface; + + try stdout.writeAll("\x1b[31mred\n"); + try stdout.writeAll("\x1b[32mgreen\n"); + try stdout.writeAll("\x1b[33myellow\n"); + try stdout.writeAll("\x1b[34mblue\n"); + try stdout.writeAll("\x1b[35mmagenta\n"); + try stdout.writeAll("\x1b[36mcyan\n"); + try stdout.writeAll("\x1b[37mwhite\n"); + try stdout.writeAll("\x1b[0mreset\n"); + try stdout.flush(); +} diff --git a/src/examples/fibonacci.zig b/src/examples/fibonacci.zig new file mode 100644 index 0000000..52e3262 --- /dev/null +++ b/src/examples/fibonacci.zig @@ -0,0 +1,19 @@ +const std = @import("std"); + +pub fn main(init: std.process.Init) !void { + var buffer: [4096]u8 = undefined; + var file_writer = std.Io.File.stdout().writerStreaming(init.io, &buffer); + const stdout = &file_writer.interface; + + var a: u32 = 0; + var b: u32 = 1; + + for (0..12) |_| { + try stdout.print("{d}\n", .{a}); + const c = a + b; + a = b; + b = c; + } + + try stdout.flush(); +} diff --git a/src/examples/fizz-buzz.zig b/src/examples/fizz-buzz.zig new file mode 100644 index 0000000..bb6e5f2 --- /dev/null +++ b/src/examples/fizz-buzz.zig @@ -0,0 +1,21 @@ +const std = @import("std"); + +pub fn main(init: std.process.Init) !void { + var buffer: [4096]u8 = undefined; + var file_writer = std.Io.File.stdout().writerStreaming(init.io, &buffer); + const stdout = &file_writer.interface; + + for (1..21) |number| { + if (number % 15 == 0) { + try stdout.writeAll("FizzBuzz\n"); + } else if (number % 3 == 0) { + try stdout.writeAll("Fizz\n"); + } else if (number % 5 == 0) { + try stdout.writeAll("Buzz\n"); + } else { + try stdout.print("{d}\n", .{number}); + } + } + + try stdout.flush(); +} diff --git a/src/main.zig b/src/examples/hello-world.zig similarity index 100% rename from src/main.zig rename to src/examples/hello-world.zig diff --git a/src/examples/kitty-image.zig b/src/examples/kitty-image.zig new file mode 100644 index 0000000..5b49110 --- /dev/null +++ b/src/examples/kitty-image.zig @@ -0,0 +1,57 @@ +const std = @import("std"); + +fn color(x: f64, y: f64) [3]f64 { + const dx = x - 0.5; + const dy = y - 0.5; + const radius = 0.3; + const center_dist = @sqrt(dx * dx + dy * dy) - radius; + if (center_dist < 0) { + return .{ 1.0, 1.0, 1.0 }; + } else { + return .{ x, y, 1.0 - x }; + } +} + +pub fn main(init: std.process.Init) !void { + var buffer: [4096]u8 = undefined; + var file_writer = std.Io.File.stdout().writerStreaming(init.io, &buffer); + const stdout = &file_writer.interface; + + const width = 400; + const height = 400; + // https://sw.kovidgoyal.net/kitty/graphics-protocol/#remote-client + // from Kitty docs "The pixel data must first be base64 encoded then chunked up into chunks no larger than 4096 bytes." + // 1024 RGB pixels -> 3072 bytes -> 3072 / 3 * 4 = 4096 Base64 bytes + const pixels_per_chunk = 1024; + var pixels: [pixels_per_chunk * 3]u8 = undefined; + var encoded: [4096]u8 = undefined; + + var pixel: usize = 0; + while (pixel < width * height) { + const chunk_end = @min(pixel + pixels_per_chunk, width * height); + const more: usize = @intFromBool(chunk_end < width * height); + + if (pixel == 0) { + try stdout.print("\x1b_Ga=T,f=24,s={d},v={d},m={d};", .{ width, height, more }); + } else { + try stdout.print("\x1b_Gm={d};", .{more}); + } + + var count: usize = 0; + while (pixel < chunk_end) : (pixel += 1) { + const x = @as(f64, @floatFromInt(pixel % width)) / (width - 1); + const y = @as(f64, @floatFromInt(pixel / width)) / (height - 1); + const rgb = color(x, y); + pixels[count] = @intFromFloat(rgb[0] * 255); + pixels[count + 1] = @intFromFloat(rgb[1] * 255); + pixels[count + 2] = @intFromFloat(rgb[2] * 255); + count += 3; + } + + const Encoder = std.base64.standard.Encoder; + try stdout.writeAll(Encoder.encode(&encoded, pixels[0..count])); + try stdout.writeAll("\x1b\\"); + } + + try stdout.flush(); +} diff --git a/src/examples/mandelbrot.zig b/src/examples/mandelbrot.zig new file mode 100644 index 0000000..9b73c0a --- /dev/null +++ b/src/examples/mandelbrot.zig @@ -0,0 +1,43 @@ +const std = @import("std"); + +pub fn main(init: std.process.Init) !void { + var buffer: [4096]u8 = undefined; + var file_writer = std.Io.File.stdout().writerStreaming(init.io, &buffer); + const stdout = &file_writer.interface; + + const width = 64; + const height = 24; + const iterations = 60; + const shades = " .:-=+*#%@"; + const real_min = -2.2; + const real_max = 1.0; + const imag_min = -1.2; + const imag_max = 1.2; + const real_ratio = (real_max - real_min) / @as(f64, @floatFromInt(width - 1)); + const imag_ratio = (imag_max - imag_min) / @as(f64, @floatFromInt(height - 1)); + + for (0..height) |y| { + const imag = imag_min + @as(f64, @floatFromInt(y)) * imag_ratio; + + for (0..width) |x| { + const real = real_min + @as(f64, @floatFromInt(x)) * real_ratio; + + var zx: f64 = 0; + var zy: f64 = 0; + var i: usize = 0; + + while (zx * zx + zy * zy <= 4 and i < iterations) : (i += 1) { + const next_zx = zx * zx - zy * zy + real; + zy = 2 * zx * zy + imag; + zx = next_zx; + } + + const shade = i * (shades.len - 1) / iterations; + try stdout.writeByte(shades[shade]); + } + + try stdout.writeByte('\n'); + } + + try stdout.flush(); +} diff --git a/src/workers/runner.ts b/src/workers/runner.ts index 559283f..f380205 100644 --- a/src/workers/runner.ts +++ b/src/workers/runner.ts @@ -18,19 +18,18 @@ async function run(wasmData: BufferSource) { "wasi_snapshot_preview1": wasi.wasiImport, });; + let exitCode = 0; try { // @ts-ignore - const exitCode = wasi.start(instance); - - postMessage({ - stderr: `\n\n---\nexit with exit code ${exitCode}\n---\n`, - }); + exitCode = wasi.start(instance); } catch (err) { postMessage({ stderr: `${err}` }); + exitCode = 1; } postMessage({ done: true, + exitCode, }); } diff --git a/src/workers/zig.ts b/src/workers/zig.ts index ba3ce1b..e35e082 100644 --- a/src/workers/zig.ts +++ b/src/workers/zig.ts @@ -1,46 +1,51 @@ import { WASI, PreopenDirectory, Fd, File, OpenFile, Inode } from "@bjorn3/browser_wasi_shim"; import { getLatestZigArchive, stderrOutput } from "../utils"; +async function compileZigModule() { + return WebAssembly.compileStreaming(fetch(new URL("../../zig-out/bin/zig.wasm", import.meta.url))); +} + +const resources = Promise.all([ + getLatestZigArchive(), + fetch(new URL("../../zig-out/compiler_rt.o", import.meta.url)) + .then(response => response.arrayBuffer()), + compileZigModule(), +]); +const cacheDirectory = new Map(); + let currentlyRunning = false; async function run(source: string) { if (currentlyRunning) return; currentlyRunning = true; - const libDirectory = await getLatestZigArchive(); - const compilerRtObject = await fetch(new URL("../../zig-out/compiler_rt.o", import.meta.url)); - - const args = [ - "zig.wasm", - "build-exe", - "main.zig", - "compiler_rt.o", - "-fno-compiler-rt", // manually linked because the self hosted webassembly backend cannot compile it by itself - "-fno-ubsan-rt", - ]; - const env: string[] = []; - const fds = [ - new OpenFile(new File([])), // stdin - stderrOutput(), // stdout - stderrOutput(), // stderr - new PreopenDirectory(".", new Map([ - ["main.zig", new File(new TextEncoder().encode(source))], - ["compiler_rt.o", new File(await compilerRtObject.arrayBuffer())] - ])), - new PreopenDirectory("/lib", libDirectory.contents), - new PreopenDirectory("/cache", new Map()), - ] satisfies Fd[]; - const wasi = new WASI(args, env, fds, { debug: false }); - - const { instance } = await WebAssembly.instantiateStreaming(fetch(new URL("../../zig-out/bin/zig.wasm", import.meta.url)), { - "wasi_snapshot_preview1": wasi.wasiImport, - }); - - postMessage({ - stderr: "Compiling...\n", - }); - try { + const [libDirectory, compilerRtObject, zigModule] = await resources; + const args = [ + "zig.wasm", + "build-exe", + "main.zig", + "compiler_rt.o", + "-fno-compiler-rt", // manually linked for perf + "-fno-ubsan-rt", + ]; + const env: string[] = []; + const fds = [ + new OpenFile(new File([])), // stdin + stderrOutput(), // stdout + stderrOutput(), // stderr + new PreopenDirectory(".", new Map([ + ["main.zig", new File(new TextEncoder().encode(source))], + ["compiler_rt.o", new File(compilerRtObject)] + ])), + new PreopenDirectory("/lib", libDirectory.contents), + new PreopenDirectory("/cache", cacheDirectory), + ] satisfies Fd[]; + const wasi = new WASI(args, env, fds, { debug: false }); + const instance = await WebAssembly.instantiate(zigModule, { + "wasi_snapshot_preview1": wasi.wasiImport, + }); + // @ts-ignore const exitCode = wasi.start(instance); @@ -49,20 +54,23 @@ async function run(source: string) { const mainWasm = cwd.dir.contents.get("main.wasm") as File | undefined; if (mainWasm) { postMessage({ compiled: mainWasm.data }); + return; } } + + postMessage({ failed: true }); } catch (err) { postMessage({ stderr: `${err}`, }); postMessage({ failed: true }); + } finally { + currentlyRunning = false; } - - currentlyRunning = false; } onmessage = (event) => { - if (event.data.run) { + if (event.data.run !== undefined) { run(event.data.run); } } diff --git a/style/style.css b/style/style.css index b3a1483..f20e2bb 100644 --- a/style/style.css +++ b/style/style.css @@ -3,20 +3,13 @@ :root { --button-background: hsl(40, 75%, 40%); - --output-background: hsl(0, 0%, 90%); - --footer-background: hsl(0, 0%, 95%); - --footer-text: black; + --output-background: white; --output-text: black; + --header-background: hsl(0, 0%, 95%); + --header-text: black; --resizer-color: hsl(0, 0%, 75%); --resizer-pivot-color: hsl(0, 0%, 30%); - --output-zig-outdated-background: hsl(37, 20%, 25%); - --output-zig-latest-background: hsl(37, 40%, 80%); - --output-runner-outdated-background: hsl(200, 15%, 25%); - --output-runner-latest-background: hsl(200, 30%, 80%); - --output-outdated-text: hsl(0, 0%, 60%); - --output-latest-text: hsl(0, 0%, 0%); - --tooltip-background: hsl(0, 0%, 100%); --tooltip-text: hsl(0, 0%, 0%); @@ -27,20 +20,13 @@ @media (prefers-color-scheme: dark) { :root { --button-background: hsl(40, 75%, 25%); - --output-background: hsl(0, 0%, 8%); - --footer-background: hsl(0, 0%, 10%); - --footer-text: hsl(0, 0%, 80%); - --output-text: hsl(0, 0%, 90%); + --output-background: black; + --output-text: white; + --header-background: hsl(0, 0%, 10%); + --header-text: hsl(0, 0%, 80%); --resizer-color: hsl(0, 0%, 18%); --resizer-pivot-color: hsl(0, 0%, 70%); - --output-zig-outdated-background: hsl(37, 93%, 5%); - --output-zig-latest-background: hsl(37, 93%, 10%); - --output-runner-outdated-background: hsl(200, 93%, 5%); - --output-runner-latest-background: hsl(200, 93%, 10%); - --output-outdated-text: hsl(0, 0%, 60%); - --output-latest-text: hsl(0, 0%, 100%); - --tooltip-background: hsl(0, 0%, 0%); --tooltip-text: hsl(0, 0%, 100%); } @@ -68,25 +54,33 @@ body { } main { - height: 100%; - - flex-grow: 1; - - height: calc(100% - 80px); + flex: 1 1 auto; + min-height: 0; } -footer { +header { display: flex; - padding: 0.5rem; - text-align: center; - align-items: center; justify-content: space-between; + padding: 0.5rem 0.75rem; + align-items: center; font-size: 0.85em; line-height: 1.25; - background-color: var(--footer-background); - color: var(--footer-text); + background-color: var(--header-background); + color: var(--header-text); + + .header-info { + display: flex; + gap: 0.65rem; + align-items: center; + } + + .header-controls { + display: flex; + gap: 0.5rem; + align-items: center; + } - &>h1 { + .header-info>h1 { font-size: 1em; font-weight: 900; letter-spacing: -1px; @@ -125,28 +119,30 @@ a { #split-pane { display: flex; - - flex-direction: column; + flex-direction: row; height: 100%; overflow: hidden; &>*:first-child { - height: var(--editor-height-percent); + flex: 0 0 var(--editor-width-percent); + max-width: calc(100% - 0.5rem); + min-width: 0; } &>#resize-bar { - height: 0.5rem; + flex: 0 0 0.5rem; } &>*:last-child { - height: calc(100% - 0.5rem - var(--editor-height-percent)); + flex: 1 1 auto; + min-width: 0; } } #resize-bar { position: relative; - width: 100%; - cursor: row-resize; + height: 100%; + cursor: col-resize; background-color: var(--resizer-color); } @@ -155,7 +151,7 @@ a { position: absolute; width: 100%; height: 100%; - transform: scale(3); + transform: scaleX(3); } #resize-bar::after { @@ -163,7 +159,7 @@ a { position: absolute; top: 50%; left: 50%; - width: 5rem; + height: 5rem; border: 2px dashed var(--resizer-pivot-color); border-radius: 100px; transform: translate(-50%,-50%); @@ -173,8 +169,14 @@ code { font-family: monospace; } +/* prevent white flash on page reload */ +#editor { + background-color: var(--code-background-color); +} + .cm-editor { height: 100%; + font-size: 16px; } .cm-focused { @@ -220,11 +222,18 @@ ul { line-height: 1.5; } +#example-select { + border: 1px solid var(--resizer-color); + border-radius: 3px; + padding: 0.5rem 0.75rem; + font-size: 1em; + font-weight: 700; + cursor: pointer; + background-color: var(--header-background); + color: var(--header-text); +} + #run { - position: fixed; - top: 1rem; - right: 1rem; - z-index: 1; border: none; border-radius: 3px; padding: 0.5rem 1.85rem; @@ -235,48 +244,35 @@ ul { color: var(--button-text); } -#output { +#output-pane { + min-width: 0; height: 100%; - overflow-y: auto; + display: flex; + flex-direction: column; + overflow: hidden; background-color: var(--output-background); color: var(--output-text); +} - &>div { - white-space: pre; - font-family: monospace; - } - - &>.zig-output { - padding: 1rem; - - &.latest { - background-color: var(--output-zig-latest-background); - color: var(--output-latest-text); - } - - &:not(.latest) { - background-color: var(--output-zig-outdated-background); - color: var(--output-outdated-text); - } - } - - &>.runner-output { - padding: 1rem; - - &.latest { - background-color: var(--output-runner-latest-background); - color: var(--output-latest-text); - } +#execution-status { + flex: 0 0 auto; + padding: 0.5rem 0.75rem; + border-bottom: 1px solid var(--resizer-color); + font-family: monospace; + font-size: 12px; + line-height: 1; + background-color: var(--header-background); + color: var(--header-text); +} - &:not(.latest) { - background-color: var(--output-runner-outdated-background); - color: var(--output-outdated-text); - } - } +#output { + flex: 1 1 auto; + min-width: 0; + min-height: 0; + padding: 0.75rem; + overflow: hidden; - &>.output-split { - width: 100%; - height: 1px; - background-color: white; + &>.xterm { + height: 100%; } }