Add help with keyboard controls & about page

localization/de.js

@@ -85,6 +85,12 @@ config({
       turnAround: "umdrehen",
     },
   },
+  help: {
+    controls: "Steuerung",
+    about: "Info",
+    builtin: "Anweisung",
+    key: "Taste",
+  },
   error: {
     browser_feature_not_available: "Der Browser ist veraltet und unterstützt diese Funktionalität nicht.",
     invalid_world_file: "Das ist keine valide *.kdw Datei.",

localization/en.js

@@ -88,6 +88,12 @@ config({
       turnAround: "turnAround",
     },
   },
+  help: {
+    controls: "Controls",
+    about: "About",
+    builtin: "Command",
+    key: "Key",
+  },
   error: {
     browser_feature_not_available: "Your browser does not support his feature. Consider switch to an up-to-date browser.",
     invalid_world_file: "This does not appear to be a valid *.kdw file.",

src/global.scss

@@ -9,6 +9,7 @@
   --font-family: Roboto, Open Sans, Ubuntu, Verdana, Arial, Helvetica, sans-serif;
   --font-family-mono: "FiraCode", Consolas, Monaco, monospace;
   --border-radius: 3px;
+  --accent-color: #0c8;
 }
 
 * {

src/localization.ts

@@ -137,6 +137,12 @@ export type Translations = {
       turnAround: string
     }
   }
+  help: {
+    controls: string
+    about: string
+    builtin: string
+    key: string
+  }
   error: {
     browser_feature_not_available: string
     invalid_world_file: string

src/ui/Help.module.scss

@@ -0,0 +1,69 @@
+.root {
+  line-height: 1.5em;
+
+  h3, h4 {
+    margin: 1.5em 0 1em;
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+  p, ul, dl {
+    margin: 0 0 1em;
+  }
+  ul {
+    padding: 0 1.5em;
+    list-style-type: square;
+  }
+  dl {
+    display: grid;
+    grid-template-columns: auto auto;
+    gap: .5em 0;
+    align-items: center;
+  }
+  dd {
+    margin: 0;
+  }
+  dt {
+    display: flex;
+    gap: .5em;
+    margin: 0;
+    justify-content: center;
+    align-items: center;
+
+    > span {
+      border: 2px solid #aaa;
+      border-radius: var(--border-radius);
+      height: 2em;
+      width: 2em;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+  .dlTitle {
+    font-weight: bold;
+  }
+  a {
+    color: #8af;
+    &:hover, &:focus, &:active {
+      color: #68f;
+    }
+  }
+}
+
+.content {
+  width: 20em;
+  max-height: calc(80vh - 5rem);
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: 1em 1em 0;
+  user-select: text;
+}
+
+.urlLink {
+  font-family: var(--font-family-mono);
+  font-size: .75em;
+  // margin: .25em;
+  display: block;
+  line-height: 1.25em;
+}

src/ui/Help.tsx

@@ -0,0 +1,101 @@
+import {h, JSX} from "preact"
+
+import {translate as t} from "../localization"
+import {IconArrowDown, IconArrowLeft, IconArrowRight, IconArrowUp} from "./Icon"
+import {Tab, Tabs} from "./Tabs"
+import {keyMap} from "./WorldControls"
+
+import * as classes from "./Help.module.scss"
+
+const keyIcons: Record<string, JSX.Element> = {
+  ArrowUp: <IconArrowUp />,
+  ArrowDown: <IconArrowDown />,
+  ArrowLeft: <IconArrowLeft />,
+  ArrowRight: <IconArrowRight />,
+}
+
+const inverseKeyMap = Object.entries(keyMap).reduce((acc, [key, builtin]) => ({
+  ...acc,
+  [builtin]: acc[builtin] ? [...acc[builtin], key] : [key],
+}), {} as Record<string, string[]>)
+
+export const Help = () =>
+  <div class={classes.root}>
+    <Tabs>
+
+      <Tab title={t("help.controls")}>
+        <dl class={classes.content}>
+          <dd class={classes.dlTitle}>{t("help.builtin")}</dd>
+          <dt class={classes.dlTitle}>{t("help.key")}</dt>
+          {Object.entries(inverseKeyMap).flatMap(([builtin, keys]) => [
+            <dd key={"dd-" + builtin}>
+              <code>
+                <span class="token identifier builtin">
+                  {t(`language.builtins.${builtin}`)[0]}
+                </span>
+                <span class="token punctuation">()</span>
+              </code>
+            </dd>,
+            <dt key={"dt-" + builtin}>
+              {keys.flatMap((key, idx, {length}) => [
+                <span key={builtin + " " + key}>{keyIcons[key] || key}</span>,
+                idx < length - 1 && t("or"),
+              ])}
+            </dt>,
+          ])}
+        </dl>
+      </Tab>
+
+      <Tab title={t("help.about")}>
+        <div class={classes.content}>
+          <p>
+            Online Karol is inspired by
+            {" "}<a href="https://de.wikipedia.org/wiki/Robot_Karol">Robot karol</a>.
+          </p>
+          <p>
+            To follow the development, visit
+            {" "}<a href="https://github.com/philer/karol">
+              github.com/philer/karol
+            </a>.
+            You can also download a release and host it at your
+            school with custom settings.
+          </p>
+          <p>
+            If you find any bugs or you have a suggestion,
+            please report an
+            {" "}<a href="https://github.com/philer/karol/issues">issue</a>{" "}
+            or send an email to karol at philer dot org.
+          </p>
+          <p>
+            You can also help translate online Karol into more languages!
+          </p>
+
+          <h3>Acknowledgements</h3>
+          <ul>
+            <li>
+              "botty" sprite theme:
+              <Link>https://opengameart.org/content/botty</Link>
+            </li>
+            <li>
+              "neoz7" sprite theme:
+              <Link>https://neoz7.deviantart.com/art/NEW-Iso-Tiles-Free-487740820</Link>
+            </li>
+            <li>
+              "Fira Code" monospace font:
+              <Link>https://github.com/tonsky/FiraCode</Link>
+            </li>
+            <li>
+              "noisejs" library:
+              <Link>https://github.com/josephg/noisejs</Link>
+            </li>
+          </ul>
+
+        </div>
+      </Tab>
+
+    </Tabs>
+  </div>
+
+
+const Link = ({children}: {children: string}) =>
+  <a href={children} class={classes.urlLink}>{children}</a>

src/ui/Icon.tsx

@@ -10,6 +10,8 @@ import {
 // see https://fontawesome.com/how-to-use/use-with-node-js#tree-shaking
 import {
   faArrowDown, 
+  faArrowLeft,
+  faArrowRight,
   faArrowUp,
   faCheck,
   faCheckSquare,
@@ -57,6 +59,8 @@ export type IconProps = IconParams & PartialRecord<ClassName, boolean> & {
 
 type IP = IconProps
 export const IconArrowDown = (ip: IP) => <Icon faIcon={faArrowDown} {...ip} />
+export const IconArrowLeft = (ip: IP) => <Icon faIcon={faArrowLeft} {...ip} />
+export const IconArrowRight = (ip: IP) => <Icon faIcon={faArrowRight} {...ip} />
 export const IconArrowUp = (ip: IP) => <Icon faIcon={faArrowUp} {...ip} />
 export const IconCheck = (ip: IP) => <Icon faIcon={faCheck} {...ip} />
 export const IconCheckSquare = (ip: IP) => <Icon faIcon={faCheckSquare} {...ip} />

src/ui/LanguageHelp.module.scss

@@ -49,7 +49,7 @@
 
       &:hover, &:focus, &:active {
         background-color: #444;
-        color: #0c8;
+        color: var(--accent-color);
       }
     }
   }

src/ui/Tabs.module.scss

@@ -0,0 +1,27 @@
+.tabs {
+  // display: flex;
+  // justify-content: stretch;
+  display: grid;
+  grid-auto-columns: 1fr;
+  grid-auto-flow: column;
+
+  > button {
+    flex: 1 1 auto;
+    padding: .5em 1em;
+    border: none;
+    border-bottom: 2px solid #666;
+    font-size: 1.2em;
+    text-align: center;
+    background-color: transparent;
+
+    &:hover {
+      background-color: #fff2;
+      border-bottom-color: #888;
+    }
+    &:disabled {
+      background-color: #fff1;
+      color: white;
+      border-bottom-color: var(--accent-color);
+    }
+  }
+}

src/ui/Tabs.tsx

@@ -0,0 +1,34 @@
+import {ComponentChild, Fragment, h, VNode} from "preact"
+import {useState} from "preact/hooks"
+
+import * as classes from "./Tabs.module.scss"
+
+export type TabProps = {
+  children: ComponentChild,
+  title: string,
+}
+
+export const Tab = ({children}: TabProps) => <>{children}</>
+
+export type TabsProps = {
+  children: VNode<TabProps> | VNode<TabProps>[]
+}
+
+export const Tabs = ({children}: TabsProps) => {
+  const childArray = Array.isArray(children) ? children : [children]
+  const [selected, setSelected] = useState(0)
+  return (
+    <>
+      <nav class={classes.tabs}>
+        {childArray.map(({props, key}, idx) =>
+          <button
+            key={key || idx}
+            disabled={idx === selected}
+            onClick={() => setSelected(idx)}
+          >{props.title}</button>,
+        )}
+      </nav>
+      {childArray[selected]}
+    </>
+  )
+}

src/ui/WorldControls.tsx

@@ -12,7 +12,7 @@ import {Tooltip} from "./Tooltip"
 
 import * as classes from "./WorldControls.module.scss"
 
-const keyMap: Record<string, keyof Builtins> = {
+export const keyMap: Readonly<Record<string, keyof Builtins>> = {
   ArrowUp: "step",
   ArrowDown: "stepBackwards",
   ArrowLeft: "turnLeft",

src/ui/WorldPanel.module.scss

@@ -60,17 +60,15 @@
   place-self: start end;
   padding: 1em;
 }
-.tools .separator {
-  margin: .5em .33em;
-  border: 1px solid white;
-  border-right-color: #ddd;
+.toolsPopover {
+  margin-top: .5em;
 }
-
 .settings {
-  margin-top: .5em;
   padding: 1em 1em 0;
   h3 {
     margin: 0 0 1rem;
+    font-size: 1.5em;
+    font-weight: normal;
   }
   fieldset {
     border: none;
@@ -103,10 +101,9 @@
 }
 .numberInput {
   --base-color: #666;
-  --highlight-color: #0c8;
   &:hover {
     > input[type="number"], > button {
-      border-color: var(--highlight-color);
+      border-color: var(--accent-color);
     }
   }
   > button {
@@ -126,7 +123,7 @@
 
     &:hover, &:focus, &:active {
       background-color: #666a;
-      color: var(--highlight-color);
+      color: var(--accent-color);
     }
     &:first-of-type {
       order: 1;
@@ -156,14 +153,14 @@
 
     &:hover, &:focus, &:active {
       outline: none;
-      border-color: var(--highlight-color);
+      border-color: var(--accent-color);
       & ~ button {
-        border-color: var(--highlight-color);
+        border-color: var(--accent-color);
       }
     }
     &:focus {
       font-weight: bold;
-      color: var(--highlight-color);
+      color: var(--accent-color);
     }
   }
 }
@@ -177,7 +174,7 @@
       color: #aaa;
     }
     &:hover {
-      color: #0c8;
+      color: var(--accent-color);
     }
   }
   > input {