43 lines
1.1 KiB
TypeScript
43 lines
1.1 KiB
TypeScript
|
import { toChildArray, ComponentChildren } from "preact";
|
||
|
|
import { Main, render_and_copy } from "./common.tsx";
|
||
|
|
|
||
|
|
// idea is to have buttons you can click to type out words, should be fun
|
||
|
|
// (and maybe possible)
|
||
|
|
// new idea: type out eggbug or you LOSE
|
||
|
|
const Key = ({ letter }: { letter: string }) => (
|
||
|
|
<details class="key">
|
||
|
|
<summary class="keycap">{letter}</summary>
|
||
|
|
<div
|
||
|
|
class="keyout"
|
||
|
|
style={{ left: (sentence.indexOf(letter) ?? 0) + "em" }}
|
||
|
|
>
|
||
|
|
{letter}
|
||
|
|
</div>
|
||
|
|
</details>
|
||
|
|
);
|
||
|
|
|
||
|
|
const sentence = "cwm fjord bank glyphs vext quiz";
|
||
|
|
|
||
|
|
const KeyRow = ({ keys }: { keys: string }) => (
|
||
|
|
<div class="keyrow">
|
||
|
|
{...keys.split("").map(letter => <Key letter={letter} />)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
|
||
|
|
const Keyboard = ({ children }: { children: ComponentChildren }) => (
|
||
|
|
<div class="keyboard">{...toChildArray(children)}</div>
|
||
|
|
);
|
||
|
|
|
||
|
|
const Out = () => <div class="out"></div>;
|
||
|
|
|
||
|
|
render_and_copy(
|
||
|
|
<Main>
|
||
|
|
<Keyboard>
|
||
|
|
<KeyRow keys="qwertyuiop" />
|
||
|
|
<KeyRow keys="asdfghjkl" />
|
||
|
|
<KeyRow keys="zxcvbnm" />
|
||
|
|
</Keyboard>
|
||
|
|
<Out />
|
||
|
|
</Main>
|
||
|
|
);
|