pseudorandom hottake done

actually 6 hours ago but i forgot to commit. oops

html/eggbug-spamclick-battle.tsx

@@ -0,0 +1,12 @@
+import { debug_render } from "./html.ts";
+import { Component } from "./jsx/jsx-runtime.ts";
+
+const Eggbug: Component = () => (
+    <img
+        class="eggbug"
+        src="https://staging.cohostcdn.org/attachment/f33b4285-0455-4128-96b8-117054af40c3/eggbugSquare.png"
+        alt="eggbug, smiling"
+    />
+);
+
+debug_render(<Eggbug />);

html/hot_people_who_eat_croissants_are_dangerous.tsx

@@ -8,12 +8,17 @@ const peopleify = (...people: string[]): string[] =>
 
 const animation_length = (num_items: number): number => /*num_items / 5*/ 3;
 
-const wheel_style = (num_items: number, width?: number, n?: number): string =>
+const wheel_style = (
+    num_items: number,
+    width?: number,
+    shl?: number,
+    n?: number
+): string =>
     `transform: translateY(calc(2rem * -${num_items})); animation: ${animation_length(
         num_items
     )}s ease-in-out reverse none running spin; ${
         width ? `width: ${width * 100}%;` : ""
-    } ${n ? `margin-left: calc(-${(width ?? 0) * 100}% * ${n})` : ""}`;
+    } ${shl && n ? `margin-left: -${shl * (n + 1)}px;` : ""}`;
 
 const get_delays = (...lengths: number[]): number[] => {
     let out = [0];
@@ -23,19 +28,24 @@ const get_delays = (...lengths: number[]): number[] => {
     return out;
 };
 
-const Wheel: Component = ({ items, width, n, classes }, _) => (
+const Wheel: Component = ({ items, width, calc_width, shl, n, classes }, _) => (
     <details class="wheel" style={width ? `width: ${width * 100}%;` : ""}>
         <summary class={classes ? classes.join(" ") : ""}>
-            {...items.map((i: string) => <div class="wheel-item">{i}</div>)}
+            {/* {...items.map((i: string) => <div class="wheel-item">{i}</div>)} */}
         </summary>
         <div
             class={`wheel-inner ${classes ? classes.join(" ") : ""}`}
-            style={wheel_style(items.length, width, n)}
+            style={wheel_style(items.length, width)}
         >
             {/* <div class="wheel-item empty"></div> */}
             {...items.map((item: string, i: number) => (
                 <div
                     class={`wheel-item ${i + 1 == items.length ? "last" : ""}`}
+                    style={
+                        calc_width && n
+                            ? `margin-left: -${calc_width * n + (shl ?? 0)}px;`
+                            : ""
+                    }
                 >
                     {item}
                 </div>
@@ -53,12 +63,14 @@ function weird_slices<T>(arr: T[]): T[][] {
     return arr.map(item => [...arr.filter(t => t != item), item]);
 }
 
-const MultiWheel: Component = ({ items, type }, _) => (
+const MultiWheel: Component = ({ items, calc_width, shl, type }, _) => (
     <span class={`multiwheel ${type ? type : ""}`}>
-        {...weird_slices(items).map((items, n) => (
+        {...weird_slices(items).map((sliced_items, n) => (
             <Wheel
-                items={items}
+                items={sliced_items}
                 width={1 / items.length}
+                calc_width={calc_width}
+                shl={shl}
                 n={n}
                 summary_classes={[type]}
             />
@@ -72,11 +84,16 @@ const MultiWheel: Component = ({ items, type }, _) => (
 // it would be possible to have it so the final text is actually properyly selectable maybe but eh
 const Take: Component = ({ subjects, objects, adjectives }, _) => (
     <div class="take">
-        <MultiWheel type="subjects" items={subjects} />{" "}
+        <MultiWheel
+            calc_width={11.4333}
+            shl={46}
+            type="subjects"
+            items={subjects}
+        />{" "}
         <div class="bridge">who eat</div>{" "}
-        <MultiWheel type="objects" items={objects} />{" "}
+        <MultiWheel calc_width={4.7} shl={40} type="objects" items={objects} />{" "}
         <div class="bridge">are</div>{" "}
-        <MultiWheel type="adjectives" items={adjectives} />
+        <MultiWheel calc_width={8} type="adjectives" items={adjectives} />
     </div>
 );
 

html/html.ts

@@ -85,7 +85,8 @@ function indent(str: string, amount = 4, char = " "): string {
 }
 
 // incomplete, obviously
-const NON_SELF_CLOSING = ["div", "p", "a"];
+// i hate html
+const NON_SELF_CLOSING = ["div", "p", "a", "summary"];
 
 function render_elem(
   { tag, attributes, children }: NonText,