From f4d9cf8c5e342ee0db04c53a13f008a2369572a5 Mon Sep 17 00:00:00 2001
From: mehbark <terezi@pyrope.net>
Date: Mon, 10 Jul 2023 00:11:33 -0400
Subject: [PATCH] spinny squares

---
 html/spinny.tsx | 60 +++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 60 insertions(+)
 create mode 100644 html/spinny.tsx

diff --git a/html/spinny.tsx b/html/spinny.tsx
new file mode 100644
index 0000000..5cd827d
--- /dev/null
+++ b/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} />);