spinny squares

html/spinny.tsx

@@ -0,0 +1,60 @@
+import { debug_render } from "./html.ts";
+import { Component } from "./jsx/jsx-runtime.ts";
+
+const Spinny: Component = ({ depth }) => (
+    <div class="main">
+        <Square depth={depth} num_squares={depth} />
+    </div>
+);
+
+function color(depth: number, num_squares: number): string {
+    return (
+        [
+            // roygbv
+            "#FF6961",
+            "#FFB347",
+            "#FFFF99",
+            "#77DD77",
+            "#ADD8E6",
+            "#B19CD9",
+
+            //t
+            "#5DCDFA",
+            "#F1A5B7",
+            "white",
+            "#F1A5B7",
+            "#5DCDFA",
+            // p
+            "#FE218A",
+            "#FCD800",
+            "#20B0FE",
+            // "#FFB6C1",
+            // "#98E6E6",
+            // "#FFDAB9",
+            // "#E6E6FA",
+            // "#98FF98",
+            // "#FF7F50",
+            // "#C8A2C8",
+            // "#FFA07A",
+            // "#87CEEB",
+            // "#FFCCCC",
+        ][num_squares - depth] ?? "none"
+    );
+}
+
+//TODO: MAYBE: try to get a backup pulse animation for preferes-reduced motion
+// low priority because it already turns off the animation thankfully
+// ${depth % 2 == 0 ? "cw" : "ccw"}
+const Square: Component = ({ depth, num_squares }) =>
+    depth == 0 ? (
+        <></>
+    ) : (
+        <div
+            class={`spin`}
+            style={`background-color: ${color(depth, num_squares)};`}
+        >
+            <Square depth={depth - 1} num_squares={num_squares} />
+        </div>
+    );
+
+debug_render(<Spinny depth={14} />);