diff --git a/src/web/thurtle/jsx.ts b/src/web/thurtle/jsx.ts index 37b91f3..16a0b18 100644 --- a/src/web/thurtle/jsx.ts +++ b/src/web/thurtle/jsx.ts @@ -67,7 +67,10 @@ export const createElement = ( return element; }; -const appendChild = (parent: HTMLElement, child: Child | Child[]) => { +const appendChild = (parent: HTMLElement, child: Child | Child[] | null) => { + if (child == null) { + return; + } if (Array.isArray(child)) child.forEach((nestedChild) => appendChild(parent, nestedChild)); else diff --git a/src/web/thurtle/thurtle.css b/src/web/thurtle/thurtle.css index 5fe0a1e..38c5dda 100644 --- a/src/web/thurtle/thurtle.css +++ b/src/web/thurtle/thurtle.css @@ -6,6 +6,10 @@ height: calc(100% - 40px); } +.no-nav .main { + height: 100%; +} + .editor { flex: 1; } @@ -15,6 +19,10 @@ padding-bottom: 0 !important; } +.no-nav nav { + display: none; +} + .world { border: thin solid rgb(171, 208, 166); border-radius: 0.5em; @@ -32,17 +40,17 @@ .output { font-size: 0.75em; overflow: auto; - min-height: calc( - 100vh - 438px - ); /* hack because i can't figure out how to auto scale this */ - max-height: calc( - 100vh - 438px - ); /* hack because i can't figure out how to auto scale this */ height: calc( 100vh - 438px ); /* hack because i can't figure out how to auto scale this */ } +.no-nav .output { + height: calc( + 100vh - 398px + ); /* hack because i can't figure out how to auto scale this */ +} + label { font-weight: 500; } diff --git a/src/web/thurtle/thurtle.tsx b/src/web/thurtle/thurtle.tsx index 9478b38..18ad668 100644 --- a/src/web/thurtle/thurtle.tsx +++ b/src/web/thurtle/thurtle.tsx @@ -1,3 +1,11 @@ +///////////////////////////////////////////////////////////////////////// +// Query parameters: +// `p`: Base64-encoded program +// `pn`: Program name. If `p` is not provided, looks up builtin example +// `ar`: Auto-run program +// `sn`: Show navbar (default: 1) +///////////////////////////////////////////////////////////////////////// + import * as jsx from "./jsx"; import WAForth from "waforth"; import "./thurtle.css"; @@ -15,6 +23,25 @@ import { saveAs } from "file-saver"; declare let bootstrap: any; +function parseQS(sqs = window.location.search) { + const qs: Record = {}; + const sqss = sqs + .substring(sqs.indexOf("?") + 1) + .replace(/\+/, " ") + .split("&"); + for (const p of sqss) { + const j = p.indexOf("="); + if (j > 0) { + qs[decodeURIComponent(p.substring(0, j))] = decodeURIComponent( + p.substring(j + 1) + ); + } + } + return qs; +} + +const qs = parseQS(); + function About() { return ( <> @@ -27,7 +54,7 @@ function About() { const editor = new Editor(); const rootEl = ( -
+ -
-

- -

-
+ {qs.sn !== "0" ? ( +
+

+ +

+
+ ) : null}