dialogue thing

html/dialogue.tsx

@@ -0,0 +1,49 @@
+import { Html, render } from "./html.ts";
+import { Component } from "./jsx/jsx-runtime.ts";
+
+type DOption = [Html, Dialogue];
+type Dialogue = Html | [Html, ...DOption[]];
+
+function not_empty<T>(arr: T[]): arr is [T, ...T[]] {
+    return arr.length > 0;
+}
+
+function reify_dialogue(d: Dialogue): Html {
+    if (!Array.isArray(d)) return d;
+
+    const [r, ...rest] = d;
+    if (rest.length == 0) {
+        return r;
+    } else {
+        return (
+            <div class="dialogue">
+                {r}
+                {...rest.map(([r, d]) => {
+                    return (
+                        <details>
+                            <summary class="option">{r}</summary>
+                            <div class="response">{reify_dialogue(d)}</div>
+                        </details>
+                    );
+                })}
+            </div>
+        );
+    }
+}
+
+const rd = reify_dialogue([
+    "Hi!",
+    ["Hello!", "How are you!"],
+    [
+        "Bye",
+        [
+            ":(",
+            ["Sorry", <span class="blue">:D</span>],
+            ["Not sorry", <span class="red">D:</span>],
+        ],
+    ],
+]);
+
+console.log(rd);
+console.log(render(rd));
+console.log(render(rd, "mini"));

html/html.ts

@@ -96,7 +96,7 @@ function render_elem(
     let string_last = false;
     for (let i = 0; i < children.length; i++) {
       let child = children[i];
-      const rendered = render(child, mini);
+      const rendered = render(child, mini ? "mini" : undefined);
 
       if (is_string(child)) {
         mini && string_last && (inner += " ");
@@ -124,7 +124,7 @@ function render_elem(
 // THIS MEANS MINIFICATION IS SEMANTICALLY DIFFERENT
 // JK I DID IT THE HARD WAY :]
 
-export function render(elem: Html, mini = true): string {
+export function render(elem: Html, mini?: "mini"): string {
   if (is_string(elem)) {
     return escape(elem);
   } else if (elem.tag == Fragment) {
@@ -140,7 +140,7 @@ export function render(elem: Html, mini = true): string {
 
     return render_elem(
       { tag, attributes, children: expanded.children },
-      mini,
+      mini == "mini",
     );
   }
 }

html/jsx/jsx-runtime.ts

@@ -15,7 +15,6 @@ export function create_element(
   type: Component | string,
   props_?: Props,
 ): Html {
-  console.log(arguments);
   const props: Props = props_ ?? { children: [] };
   const children: Html[] = [props.children ?? []].flat();
   const attributes: Attributes = {};
@@ -27,8 +26,6 @@ export function create_element(
     attributes[key] = val;
   }
 
-  console.log(attributes, children);
-
   if (typeof type == "string") {
     return { tag: type, attributes, children };
   } else {

html/main.tsx

@@ -1,32 +0,0 @@
-import { Html, render } from "./html.ts";
-import { Component } from "./jsx/jsx-runtime.ts";
-
-const Homestuck: Component = (attrs, children) => (
-    <div {...attrs} homestuck={true}>
-        {...children}
-    </div>
-);
-
-const bla: Html = (
-    <Homestuck>
-        <Homestuck awesome={true} />
-        <a href="https://bambosh.dev/unofficial-homestuck-collection">text</a>
-        <div class="has-fragments">
-            <>
-                homestuck
-                <em>is</em>
-                cool
-            </>
-            <>
-                vast error is
-                <em>also</em>
-                cool
-            </>
-        </div>
-    </Homestuck>
-);
-console.log(bla);
-console.log(render(bla, false));
-console.log(render(bla, true));
-
-export {};