cycle: somewhat tractable

html/common.tsx

@@ -303,3 +303,69 @@ export function make_sync_no_matter_the_cost<T>(promise: Promise<T>): T {
 
     return out as T;
 }
+
+// INFINITE CREDIT TO @BLACKLE https://cohost.org/blackle/post/72096-h3-style-text-alig
+export const Cycle = ({
+    width_px,
+    height_px,
+    children,
+    style,
+}: {
+    width_px: number;
+    height_px: number;
+    children: [ComponentChild, ...ComponentChild[]];
+    style?: Record<string, string>;
+}) => (
+    <div
+        style={{
+            width: `${width_px}px`,
+            height: `${height_px}px`,
+            overflow: "hidden",
+            ...style,
+        }}
+    >
+        <div
+            style={{
+                display: "inline-flex",
+                height: `${height_px}px`,
+                paddingRight: `${width_px}px`,
+                position: "relative",
+                cursor: "pointer",
+            }}
+        >
+            {...children.map((c, i) => (
+                <details>
+                    <summary
+                        style={{
+                            position: "absolute",
+                            top: "0px",
+                            left: `calc(-${width_px * 100}% + ${
+                                width_px * width_px + width_px * i
+                            }px)`,
+                            // width: `${width_px}px`,
+                            width: `calc(${
+                                width_px * (children.length - 1) * 2 +
+                                width_px -
+                                width_px * i * 2
+                            }px)`,
+                            height: `${height_px}px`,
+                            listStyle: "none",
+                            overflow: "hidden",
+                        }}
+                    >
+                        {c}
+                    </summary>
+                    <div
+                        style={{
+                            width: `${
+                                i == children.length - 1
+                                    ? children.length - 1
+                                    : 1
+                            }px`,
+                        }}
+                    ></div>
+                </details>
+            ))}
+        </div>
+    </div>
+);

html/cycle-test.tsx

@@ -0,0 +1,16 @@
+import { Cycle, render_and_copy } from "./common.tsx";
+
+render_and_copy(
+    <Cycle
+        width_px={30}
+        height_px={30}
+        style={{ margin: "0 auto", outline: "1px solid black" }}
+    >
+        <div>this</div>
+        <div>won't</div>
+        <div>work</div>
+        <div>!</div>
+        <div>!!</div>
+        <div>!!!</div>
+    </Cycle>
+);