// 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} /> </> );