58 lines
1.4 KiB
TypeScript
58 lines
1.4 KiB
TypeScript
// new idea: beeg tree
|
|
|
|
import { render } from "preact-render-to-string";
|
|
import { Filler, render_and_copy } from "./common.tsx";
|
|
|
|
// there's more size savings to be had but jsx is bad for that
|
|
const Key = ({
|
|
code,
|
|
content,
|
|
remaining_depth,
|
|
}: {
|
|
code: string;
|
|
content: string;
|
|
remaining_depth: number;
|
|
}) => (
|
|
<details>
|
|
<summary>{code}</summary>
|
|
<Screen content={content + code} remaining_depth={remaining_depth} />
|
|
</details>
|
|
);
|
|
|
|
// toki pono or whatever that is
|
|
// oh my gosh this is such a stupid alphabet
|
|
const alphabet = "acgt";
|
|
// i went to immense pains to make it so that you have 6 characters for catcat
|
|
// nvm this isn't working
|
|
|
|
const Screen = ({
|
|
content = "",
|
|
remaining_depth,
|
|
}: {
|
|
content?: string;
|
|
remaining_depth: number;
|
|
}) =>
|
|
remaining_depth == 0 ? (
|
|
<div style="background:#fff;position:absolute;inset:0">{content}</div>
|
|
) : (
|
|
<div style={`background:#fff;position:absolute;inset:0`}>
|
|
{content == ""
|
|
? "come on do it write some dna"
|
|
: content + ".".repeat(remaining_depth)}
|
|
{alphabet.split("").map(c => (
|
|
<Key
|
|
code={c}
|
|
content={content}
|
|
remaining_depth={remaining_depth - 1}
|
|
/>
|
|
))}
|
|
</div>
|
|
);
|
|
|
|
render_and_copy(
|
|
<>
|
|
<Filler height="8rem" />
|
|
<Screen remaining_depth={5} />
|
|
</>
|
|
);
|