From 1cbe2b6d22565ae06b071d78bfb069e31e9ae4ca Mon Sep 17 00:00:00 2001
From: Atul Varma <varmaa@gmail.com>
Date: Fri, 2 Apr 2021 19:00:29 -0400
Subject: [PATCH] Improve layout (#74)

This improves the layout of all our pages to look more like the mandala page.

Additionally, some form widgets now have better layout, and the header takes up less vertical space.

At an implementation level, the component hierarchy of pages has been inverted to make this kind of layout easier.  Now fully laid-out pages are contained within `<Page>` components that are at the top of the component hierarchy, and which are defined by each specific page (mandala, creature, vocabulary, etc).

I had to do a few architectural things to avoid circular imports, though; most notably, this involved the creation of a new React context called a `PageContext`.

It uses CSS grid, which should be pretty well-supported amongst recent browsers.
---
 index.html                    |  85 ++++++++++++++++++-------
 lib/browser-main.tsx          |  70 ++++-----------------
 lib/page.tsx                  |  60 ++++++++++++++++++
 lib/pages/creature-page.tsx   |  90 ++++++++++++++-------------
 lib/pages/debug-page.tsx      |  30 +++++----
 lib/pages/index.tsx           |  28 +++++++++
 lib/pages/mandala-page.tsx    | 113 ++++++++++++++++------------------
 lib/pages/vocabulary-page.tsx |  69 +++++++++++----------
 lib/pages/waves-page.tsx      | 106 ++++++++++++++++---------------
 lib/vocabulary-widget.tsx     |   4 +-
 10 files changed, 376 insertions(+), 279 deletions(-)
 create mode 100644 lib/page.tsx
 create mode 100644 lib/pages/index.tsx

diff --git a/index.html b/index.html
index 54ad5bc..6aa9c9d 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,44 @@
 <title>Mystic Symbolic</title>
 <style>
 html, body {
+  margin: 0;
+  padding: 0;
   font-family: "Calibri", "Arial", "Helvetica Neue", sans-serif;
+  overflow: hidden;
+}
+
+.page {
+  display: grid;
+  column-gap: 8px;
+  padding: 8px;
+  box-sizing: border-box;
+  height: 100vh;
+  width: 100vw;
+  grid-template-columns: auto 20em;
+  grid-template-rows: 3em auto 3em;
+  grid-template-areas:
+    "header header"
+    "canvas sidebar"
+    "footer footer";
+}
+
+header {
+  grid-area: header;
+  display: flex;
+}
+
+header h1 {
+  margin: 0;
+  flex-grow: 1;
+}
+
+.sidebar {
+  grid-area: sidebar;
+  overflow-y: auto;
+}
+
+footer {
+  grid-area: footer;
 }
 
 select, input[type="text"] {
@@ -31,6 +68,10 @@ select, input[type="text"] {
   margin-bottom: 10px;
 }
 
+.thingy:first-child {
+  margin-top: 0;
+}
+
 ul.navbar {
   display: flex;
   list-style-type: none;
@@ -47,59 +88,61 @@ ul.navbar li {
 
 ul.navbar li:last-child {
   border-right: none;
+  padding-right: 0;
+  margin-right: 0;
 }
 
-.mandala-container {
-  position: relative;
-}
-
-.mandala-container .canvas {
+.flex-widget {
+  display: flex;
+  flex-direction: column;
+}
+
+.flex-widget label {
+  margin-bottom: 8px;
+}
+
+.canvas {
+  grid-area: canvas;
   display: flex;
-  width: 100%;
-  height: 85vh;
   align-items: center;
   justify-content: center;
   overflow: hidden;
 }
 
-.mandala-container .sidebar {
-  position: absolute;
-  right: 0;
-  top: 0;
-  padding: 8px;
-  width: 20em;
-  background-color: rgba(255, 255, 255, 0.9);
+.canvas.scrollable {
+  display: block;
+  overflow: auto;
 }
 
-.mandala-container label.checkbox {
+.sidebar label.checkbox {
   display: block;
   margin-top: 10px;
   margin-bottom: 10px;
 }
 
-.mandala-container .color-widget {
+.sidebar .color-widget {
   display: flex;
 }
 
-.mandala-container .color-widget label {
+.sidebar .color-widget label {
   flex-grow: 1;
 }
 
-.mandala-container .numeric-slider {
+.sidebar .numeric-slider {
   display: flex;
   flex-direction: column;
 }
 
-.mandala-container .numeric-slider .slider {
+.sidebar .numeric-slider .slider {
   display: flex;
 }
 
-.mandala-container .numeric-slider .slider input {
+.sidebar .numeric-slider .slider input {
   flex-basis: 90%;
 }
 </style>
 <noscript>
   <p>Alas, you need JavaScript to peruse this page.</p>
 </noscript>
-<div id="app"></div>
+<div id="app" className="app"></div>
 <script src="lib/browser-main.tsx"></script>
diff --git a/lib/browser-main.tsx b/lib/browser-main.tsx
index 9d80a46..5dbd366 100644
--- a/lib/browser-main.tsx
+++ b/lib/browser-main.tsx
@@ -1,22 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import { WavesPage } from "./pages/waves-page";
-import { VocabularyPage } from "./pages/vocabulary-page";
-import { CreaturePage } from "./pages/creature-page";
-import { MandalaPage } from "./pages/mandala-page";
-import { DebugPage } from "./pages/debug-page";
-
-const Pages = {
-  vocabulary: VocabularyPage,
-  creature: CreaturePage,
-  waves: WavesPage,
-  mandala: MandalaPage,
-  debug: DebugPage,
-};
-
-type PageName = keyof typeof Pages;
-
-const pageNames = Object.keys(Pages) as PageName[];
+import { PageContext, PAGE_QUERY_ARG } from "./page";
+import { pageNames, Pages, toPageName, DEFAULT_PAGE } from "./pages";
 
 const APP_ID = "app";
 
@@ -26,53 +11,20 @@ if (!appEl) {
   throw new Error(`Unable to find #${APP_ID}!`);
 }
 
-const Navbar: React.FC<{ currPageName: string }> = (props) => (
-  <ul className="navbar">
-    {pageNames.map((pageName) => (
-      <li key={pageName}>
-        {props.currPageName === pageName ? (
-          pageName
-        ) : (
-          <a href={`?p=${encodeURIComponent(pageName)}`}>{pageName}</a>
-        )}
-      </li>
-    ))}
-  </ul>
-);
-
 const App: React.FC<{}> = (props) => {
   const page = new URLSearchParams(window.location.search);
-  const currPageName = toPageName(page.get("p") || "", "vocabulary");
-  const PageComponent = Pages[currPageName];
+  const currPage = toPageName(page.get(PAGE_QUERY_ARG) || "", DEFAULT_PAGE);
+  const PageComponent = Pages[currPage];
+  const ctx: PageContext = {
+    currPage,
+    allPages: pageNames,
+  };
 
   return (
-    <>
-      <header>
-        <Navbar currPageName={currPageName} />
-      </header>
-      <main>
-        <PageComponent />
-      </main>
-      <footer>
-        <p>
-          For more details about this project, see its{" "}
-          <a href="https://github.com/toolness/mystic-symbolic" target="_blank">
-            GitHub repository
-          </a>
-          .
-        </p>
-      </footer>
-    </>
+    <PageContext.Provider value={ctx}>
+      <PageComponent />
+    </PageContext.Provider>
   );
 };
 
 ReactDOM.render(<App />, appEl);
-
-function isPageName(page: string): page is PageName {
-  return pageNames.includes(page as any);
-}
-
-function toPageName(page: string, defaultValue: PageName): PageName {
-  if (isPageName(page)) return page;
-  return defaultValue;
-}
diff --git a/lib/page.tsx b/lib/page.tsx
new file mode 100644
index 0000000..e7f1b98
--- /dev/null
+++ b/lib/page.tsx
@@ -0,0 +1,60 @@
+import React, { useContext } from "react";
+import type { PageName } from "./pages";
+
+export type PageContext = {
+  currPage: PageName;
+  allPages: PageName[];
+};
+
+export const PageContext = React.createContext<PageContext>({
+  currPage: "vocabulary",
+  allPages: [],
+});
+
+export const PAGE_QUERY_ARG = "p";
+
+const PageLink: React.FC<{ page: PageName }> = ({ page }) => (
+  <a href={`?${PAGE_QUERY_ARG}=${encodeURIComponent(page)}`}>{page}</a>
+);
+
+const Navbar: React.FC<{}> = (props) => {
+  const pc = useContext(PageContext);
+
+  return (
+    <nav>
+      <ul className="navbar">
+        {pc.allPages.map((pageName) => (
+          <li key={pageName}>
+            {pc.currPage === pageName ? pageName : <PageLink page={pageName} />}
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+};
+
+export type PageProps = {
+  title: string;
+  children?: any;
+};
+
+export const Page: React.FC<PageProps> = ({ title, children }) => {
+  return (
+    <div className="page">
+      <header>
+        <h1>{title}</h1>
+        <Navbar />
+      </header>
+      {children}
+      <footer>
+        <p>
+          For more details about this project, see its{" "}
+          <a href="https://github.com/toolness/mystic-symbolic" target="_blank">
+            GitHub repository
+          </a>
+          .
+        </p>
+      </footer>
+    </div>
+  );
+};
diff --git a/lib/pages/creature-page.tsx b/lib/pages/creature-page.tsx
index 9f5af8b..fd93594 100644
--- a/lib/pages/creature-page.tsx
+++ b/lib/pages/creature-page.tsx
@@ -25,6 +25,7 @@ import {
   CompositionContextWidget,
   createSvgCompositionContext,
 } from "../svg-composition-context";
+import { Page } from "../page";
 
 /** Symbols that can be the "root" (i.e., main body) of a creature. */
 const ROOT_SYMBOLS = SvgVocabulary.items.filter(
@@ -190,49 +191,54 @@ export const CreaturePage: React.FC<{}> = () => {
   });
 
   return (
-    <>
-      <h1>Creature!</h1>
-      <CompositionContextWidget ctx={compCtx} onChange={setCompCtx} />
-      <div className="thingy"></div>
-      <div className="thingy">
-        <NumericSlider
-          label="Random creature complexity"
-          min={0}
-          max={MAX_COMPLEXITY_LEVEL}
-          step={1}
-          value={complexity}
-          onChange={(value) => {
-            setComplexity(value);
-            newRandomSeed();
-          }}
-        />
+    <Page title="Creature!">
+      <div className="sidebar">
+        <CompositionContextWidget ctx={compCtx} onChange={setCompCtx} />
+        <div className="thingy">
+          <NumericSlider
+            label="Random creature complexity"
+            min={0}
+            max={MAX_COMPLEXITY_LEVEL}
+            step={1}
+            value={complexity}
+            onChange={(value) => {
+              setComplexity(value);
+              newRandomSeed();
+            }}
+          />
+        </div>
+        <div className="thingy">
+          <Checkbox
+            label="Randomly invert symbols"
+            value={randomlyInvert}
+            onChange={setRandomlyInvert}
+          />
+        </div>
+        <div className="thingy">
+          <button accessKey="r" onClick={newRandomSeed}>
+            <u>R</u>andomize!
+          </button>{" "}
+          <ExportWidget
+            basename={getDownloadBasename(randomSeed)}
+            svgRef={svgRef}
+          />
+        </div>
       </div>
-      <div className="thingy">
-        <Checkbox
-          label="Randomly invert symbols"
-          value={randomlyInvert}
-          onChange={setRandomlyInvert}
-        />
+      <div className="canvas" style={{ backgroundColor: compCtx.background }}>
+        <CreatureContext.Provider value={ctx}>
+          <HoverDebugHelper>
+            <AutoSizingSvg
+              padding={20}
+              ref={svgRef}
+              bgColor={compCtx.background}
+            >
+              <SvgTransform transform={svgScale(0.5)}>
+                <CreatureSymbol {...creature} />
+              </SvgTransform>
+            </AutoSizingSvg>
+          </HoverDebugHelper>
+        </CreatureContext.Provider>
       </div>
-      <div className="thingy">
-        <button accessKey="r" onClick={newRandomSeed}>
-          <u>R</u>andomize!
-        </button>{" "}
-        <button onClick={() => window.location.reload()}>Reset</button>{" "}
-        <ExportWidget
-          basename={getDownloadBasename(randomSeed)}
-          svgRef={svgRef}
-        />
-      </div>
-      <CreatureContext.Provider value={ctx}>
-        <HoverDebugHelper>
-          <AutoSizingSvg padding={20} ref={svgRef} bgColor={compCtx.background}>
-            <SvgTransform transform={svgScale(0.5)}>
-              <CreatureSymbol {...creature} />
-            </SvgTransform>
-          </AutoSizingSvg>
-        </HoverDebugHelper>
-      </CreatureContext.Provider>
-    </>
+    </Page>
   );
 };
diff --git a/lib/pages/debug-page.tsx b/lib/pages/debug-page.tsx
index 4453088..8fb8301 100644
--- a/lib/pages/debug-page.tsx
+++ b/lib/pages/debug-page.tsx
@@ -3,6 +3,7 @@ import { AutoSizingSvg } from "../auto-sizing-svg";
 import { CreatureContext, CreatureContextType } from "../creature-symbol";
 import { createCreatureSymbolFactory } from "../creature-symbol-factory";
 import { HoverDebugHelper } from "../hover-debug-helper";
+import { Page } from "../page";
 import { createSvgSymbolContext } from "../svg-symbol";
 import { svgScale, SvgTransform } from "../svg-transform";
 import { SvgVocabulary } from "../svg-vocabulary";
@@ -60,18 +61,21 @@ export const DebugPage: React.FC<{}> = () => {
   };
 
   return (
-    <>
-      <h1>Debug!</h1>
-      <SymbolContextWidget ctx={symbolCtx} onChange={setSymbolCtx} />
-      <CreatureContext.Provider value={ctx}>
-        <HoverDebugHelper>
-          <AutoSizingSvg padding={20}>
-            <SvgTransform transform={svgScale(0.5)}>
-              {EYE_CREATURE}
-            </SvgTransform>
-          </AutoSizingSvg>
-        </HoverDebugHelper>
-      </CreatureContext.Provider>
-    </>
+    <Page title="Debug!">
+      <div className="sidebar">
+        <SymbolContextWidget ctx={symbolCtx} onChange={setSymbolCtx} />
+      </div>
+      <div className="canvas">
+        <CreatureContext.Provider value={ctx}>
+          <HoverDebugHelper>
+            <AutoSizingSvg padding={20}>
+              <SvgTransform transform={svgScale(0.5)}>
+                {EYE_CREATURE}
+              </SvgTransform>
+            </AutoSizingSvg>
+          </HoverDebugHelper>
+        </CreatureContext.Provider>
+      </div>
+    </Page>
   );
 };
diff --git a/lib/pages/index.tsx b/lib/pages/index.tsx
new file mode 100644
index 0000000..37c87d0
--- /dev/null
+++ b/lib/pages/index.tsx
@@ -0,0 +1,28 @@
+import { WavesPage } from "./waves-page";
+import { VocabularyPage } from "./vocabulary-page";
+import { CreaturePage } from "./creature-page";
+import { MandalaPage } from "./mandala-page";
+import { DebugPage } from "./debug-page";
+
+export const Pages = {
+  vocabulary: VocabularyPage,
+  creature: CreaturePage,
+  waves: WavesPage,
+  mandala: MandalaPage,
+  debug: DebugPage,
+};
+
+export type PageName = keyof typeof Pages;
+
+export const pageNames = Object.keys(Pages) as PageName[];
+
+export const DEFAULT_PAGE: PageName = "vocabulary";
+
+export function isPageName(page: string): page is PageName {
+  return pageNames.includes(page as any);
+}
+
+export function toPageName(page: string, defaultValue: PageName): PageName {
+  if (isPageName(page)) return page;
+  return defaultValue;
+}
diff --git a/lib/pages/mandala-page.tsx b/lib/pages/mandala-page.tsx
index fdbc512..ea75e4c 100644
--- a/lib/pages/mandala-page.tsx
+++ b/lib/pages/mandala-page.tsx
@@ -29,6 +29,7 @@ import {
   CompositionContextWidget,
   createSvgCompositionContext,
 } from "../svg-composition-context";
+import { Page } from "../page";
 
 type ExtendedMandalaCircleParams = MandalaCircleParams & {
   scaling: number;
@@ -281,71 +282,65 @@ export const MandalaPage: React.FC<{}> = () => {
   }
 
   return (
-    <>
-      <h1>Mandala!</h1>
-      <div
-        className="mandala-container"
-        style={{ backgroundColor: baseCompCtx.background }}
-      >
-        <div className="sidebar">
-          <CompositionContextWidget
-            ctx={baseCompCtx}
-            onChange={setBaseCompCtx}
+    <Page title="Mandala!">
+      <div className="sidebar">
+        <CompositionContextWidget ctx={baseCompCtx} onChange={setBaseCompCtx} />
+        <fieldset>
+          <legend>First circle</legend>
+          <ExtendedMandalaCircleParamsWidget
+            idPrefix="c1"
+            value={circle1}
+            onChange={setCircle1}
           />
+        </fieldset>
+        <div className="thingy">
+          <Checkbox
+            label="Add a second circle"
+            value={useTwoCircles}
+            onChange={setUseTwoCircles}
+          />
+        </div>
+        {useTwoCircles && (
           <fieldset>
-            <legend>First circle</legend>
+            <legend>Second circle</legend>
             <ExtendedMandalaCircleParamsWidget
-              idPrefix="c1"
-              value={circle1}
-              onChange={setCircle1}
+              idPrefix="c2"
+              value={circle2}
+              onChange={setCircle2}
+            />
+            <Checkbox
+              label="Invert colors"
+              value={invertCircle2}
+              onChange={setInvertCircle2}
+            />{" "}
+            <Checkbox
+              label="Place behind first circle"
+              value={firstBehindSecond}
+              onChange={setFirstBehindSecond}
             />
           </fieldset>
-          <div className="thingy">
-            <Checkbox
-              label="Add a second circle"
-              value={useTwoCircles}
-              onChange={setUseTwoCircles}
-            />
-          </div>
-          {useTwoCircles && (
-            <fieldset>
-              <legend>Second circle</legend>
-              <ExtendedMandalaCircleParamsWidget
-                idPrefix="c2"
-                value={circle2}
-                onChange={setCircle2}
-              />
-              <Checkbox
-                label="Invert colors"
-                value={invertCircle2}
-                onChange={setInvertCircle2}
-              />{" "}
-              <Checkbox
-                label="Place behind first circle"
-                value={firstBehindSecond}
-                onChange={setFirstBehindSecond}
-              />
-            </fieldset>
-          )}
-          <div className="thingy">
-            <button accessKey="r" onClick={randomize}>
-              <u>R</u>andomize!
-            </button>{" "}
-            <ExportWidget basename="mandala" svgRef={svgRef} />
-          </div>
-        </div>
-        <div className="canvas">
-          <HoverDebugHelper>
-            <AutoSizingSvg
-              padding={20}
-              ref={svgRef}
-              bgColor={baseCompCtx.background}
-            >
-              <SvgTransform transform={svgScale(0.5)}>{circles}</SvgTransform>
-            </AutoSizingSvg>
-          </HoverDebugHelper>
+        )}
+        <div className="thingy">
+          <button accessKey="r" onClick={randomize}>
+            <u>R</u>andomize!
+          </button>{" "}
+          <ExportWidget basename="mandala" svgRef={svgRef} />
         </div>
       </div>
-    </>
+      <div
+        className="canvas"
+        style={{ backgroundColor: baseCompCtx.background }}
+      >
+        <HoverDebugHelper>
+          <AutoSizingSvg
+            padding={20}
+            ref={svgRef}
+            bgColor={baseCompCtx.background}
+          >
+            <SvgTransform transform={svgScale(0.5)}>{circles}</SvgTransform>
+          </AutoSizingSvg>
+        </HoverDebugHelper>
+      </div>
+    </Page>
   );
 };
diff --git a/lib/pages/vocabulary-page.tsx b/lib/pages/vocabulary-page.tsx
index e625d85..67941ae 100644
--- a/lib/pages/vocabulary-page.tsx
+++ b/lib/pages/vocabulary-page.tsx
@@ -9,6 +9,7 @@ import { SvgVocabulary } from "../svg-vocabulary";
 import { SvgSymbolContext } from "../svg-symbol";
 import { SymbolContextWidget } from "../symbol-context-widget";
 import { HoverDebugHelper } from "../hover-debug-helper";
+import { Page } from "../page";
 
 type SvgSymbolProps = {
   data: SvgSymbolData;
@@ -49,43 +50,47 @@ export const VocabularyPage: React.FC<{}> = () => {
   );
 
   return (
-    <>
-      <h1>Mystic Symbolic Vocabulary</h1>
-      <div className="thingy">
-        <label htmlFor="filter">Search: </label>
-        <input
-          type="text"
-          id="filter"
-          value={filter}
-          onChange={(e) => setFilter(e.target.value)}
-        />
+    <Page title="Mystic Symbolic Vocabulary">
+      <div className="sidebar">
+        <div className="flex-widget">
+          <label htmlFor="filter">Search for symbols: </label>
+          <input
+            type="text"
+            id="filter"
+            value={filter}
+            onChange={(e) => setFilter(e.target.value)}
+            placeholder="🔎"
+          />
+        </div>
+        <SymbolContextWidget ctx={ctx} onChange={setCtx} />
       </div>
-      <SymbolContextWidget ctx={ctx} onChange={setCtx} />
-      <HoverDebugHelper>
-        {items.map((symbolData) => (
-          <div
-            key={symbolData.name}
-            style={{
-              display: "inline-block",
-              border: "1px solid black",
-              margin: "4px",
-            }}
-          >
+      <div className="canvas scrollable">
+        <HoverDebugHelper>
+          {items.map((symbolData) => (
             <div
+              key={symbolData.name}
               style={{
-                backgroundColor: "black",
-                color: "white",
-                padding: "4px",
+                display: "inline-block",
+                border: "1px solid black",
+                margin: "4px",
               }}
             >
-              {symbolData.name}
+              <div
+                style={{
+                  backgroundColor: "black",
+                  color: "white",
+                  padding: "4px",
+                }}
+              >
+                {symbolData.name}
+              </div>
+              <div className="checkerboard-bg" style={{ lineHeight: 0 }}>
+                <SvgSymbol data={symbolData} scale={0.25} {...ctx} />
+              </div>
             </div>
-            <div className="checkerboard-bg" style={{ lineHeight: 0 }}>
-              <SvgSymbol data={symbolData} scale={0.25} {...ctx} />
-            </div>
-          </div>
-        ))}
-      </HoverDebugHelper>
-    </>
+          ))}
+        </HoverDebugHelper>
+      </div>
+    </Page>
   );
 };
diff --git a/lib/pages/waves-page.tsx b/lib/pages/waves-page.tsx
index 234be23..f7c2303 100644
--- a/lib/pages/waves-page.tsx
+++ b/lib/pages/waves-page.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import { ColorWidget } from "../color-widget";
 import { NumericSlider } from "../numeric-slider";
+import { Page } from "../page";
 
 const WAVE_STROKE = "#79beda";
 const WAVE_FILL = "#2b7c9e";
@@ -104,61 +105,64 @@ const Waves: React.FC<{}> = () => {
 
   return (
     <>
-      <svg width="1280px" height="720px" viewBox="0 0 1280 720">
-        {waves}
-      </svg>
-      <p>
-        <ColorWidget value={stroke} onChange={setStroke} label="Stroke" />{" "}
-        <ColorWidget value={fill} onChange={setFill} label="Fill" />
-      </p>
-      <NumericSlider
-        label="Number of waves"
-        min={1}
-        max={NUM_WAVES * 2}
-        value={numWaves}
-        step={1}
-        onChange={setNumWaves}
-      />
-      <NumericSlider
-        label="Cycle duration"
-        min={0.1}
-        max={3}
-        value={duration}
-        step={0.1}
-        onChange={setDuration}
-        valueSuffix="s"
-      />
-      <NumericSlider
-        label="Initial y-velocity"
-        min={1}
-        max={WAVE_PARALLAX_TRANSLATE_VELOCITY * 4}
-        value={initialYVel}
-        step={1}
-        onChange={setInitialYVel}
-      />
-      <NumericSlider
-        label="Y-acceleration"
-        min={1}
-        max={WAVE_PARALLAX_TRANSLATE_ACCEL * 2}
-        value={yAccel}
-        step={1}
-        onChange={setYAccel}
-      />
-      <NumericSlider
-        label="Scale velocity"
-        min={1.0}
-        max={2}
-        value={scaleVel}
-        step={0.025}
-        onChange={setScaleVel}
-      />
+      <div className="canvas">
+        <svg width="1280px" height="720px" viewBox="0 0 1280 720">
+          {waves}
+        </svg>
+      </div>
+      <div className="sidebar">
+        <div className="thingy">
+          <ColorWidget value={stroke} onChange={setStroke} label="Stroke" />{" "}
+          <ColorWidget value={fill} onChange={setFill} label="Fill" />
+        </div>
+        <NumericSlider
+          label="Number of waves"
+          min={1}
+          max={NUM_WAVES * 2}
+          value={numWaves}
+          step={1}
+          onChange={setNumWaves}
+        />
+        <NumericSlider
+          label="Cycle duration"
+          min={0.1}
+          max={3}
+          value={duration}
+          step={0.1}
+          onChange={setDuration}
+          valueSuffix="s"
+        />
+        <NumericSlider
+          label="Initial y-velocity"
+          min={1}
+          max={WAVE_PARALLAX_TRANSLATE_VELOCITY * 4}
+          value={initialYVel}
+          step={1}
+          onChange={setInitialYVel}
+        />
+        <NumericSlider
+          label="Y-acceleration"
+          min={1}
+          max={WAVE_PARALLAX_TRANSLATE_ACCEL * 2}
+          value={yAccel}
+          step={1}
+          onChange={setYAccel}
+        />
+        <NumericSlider
+          label="Scale velocity"
+          min={1.0}
+          max={2}
+          value={scaleVel}
+          step={0.025}
+          onChange={setScaleVel}
+        />
+      </div>
     </>
   );
 };
 
 export const WavesPage: React.FC<{}> = () => (
-  <>
-    <h1>Waves!</h1>
+  <Page title="Waves!">
     <Waves />
-  </>
+  </Page>
 );
diff --git a/lib/vocabulary-widget.tsx b/lib/vocabulary-widget.tsx
index 8a26de3..c3dac7c 100644
--- a/lib/vocabulary-widget.tsx
+++ b/lib/vocabulary-widget.tsx
@@ -20,7 +20,7 @@ export function VocabularyWidget<T extends VocabularyType>({
   id = id || slugify(label);
 
   return (
-    <>
+    <div className="flex-widget">
       <label htmlFor={id}>{label}: </label>
       <select
         id={id}
@@ -33,6 +33,6 @@ export function VocabularyWidget<T extends VocabularyType>({
           </option>
         ))}
       </select>
-    </>
+    </div>
   );
 }