crimewriter: eh, done enough enough

#1.6.scm#

@@ -0,0 +1,5 @@
+(define (new-if predicate then-clause else-clause)
+  (cond (predicate then-clause)
+	(else else-clause)))
+
+(new-if (= 1 1) 0 5)

html/common.tsx

@@ -267,3 +267,7 @@ export const css = {
     min_content: "min-content",
     max_content: "max-content",
 } as const;
+
+export const Filler = ({ height }: { height: string }) => (
+    <div style={`height:${height}`}></div>
+);

html/crumble.tsx

@@ -79,10 +79,8 @@ export const Fall = ({
 const msg = `
 i haven't seen this on other blogs, but some of the posts on mine seem to be kinda unstable?
 if that makes sense?
-like, sometimes i see them shake, and i swear i saw some letters fall, not to mention the terrible line-wrapping
-
+like, sometimes i see them shake, and i swear i saw some letters fall, not to mention the terrible line-wrapping.
 i know i'm a (convicted?) css criminal, so i'm thinking that this might just be the w3 gods punishing me.
-
 so. yeah. if you see anything like that on any of my posts, let me know
 `.trim();
 

html/meltings.tsx

@@ -0,0 +1,2 @@
+// like crumbling but more complex and maybe cooler (ha) looking
+// nah. too derivative

html/write.tsx

@@ -1,42 +1,57 @@
-import { toChildArray, ComponentChildren } from "preact";
-import { Main, render_and_copy } from "./common.tsx";
+// new idea: beeg tree
 
-// 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>
+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>
 );
 
-const sentence = "cwm fjord bank glyphs vext quiz";
+// 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 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>;
+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(
-    <Main>
-        <Keyboard>
-            <KeyRow keys="qwertyuiop" />
-            <KeyRow keys="asdfghjkl" />
-            <KeyRow keys="zxcvbnm" />
-        </Keyboard>
-        <Out />
-    </Main>
+    <>
+        <Filler height="8rem" />
+        <Screen remaining_depth={5} />
+    </>
 );