From fc95938ad83d3fce9098f62e7733a0cdc17f073b Mon Sep 17 00:00:00 2001
From: mehbark <terezi@pyrope.net>
Date: Thu, 20 Jul 2023 22:43:01 -0400
Subject: [PATCH] gonna move the color to out-of-line styles

---
 html/pixels.tsx | 74 ++++++++++++++++++-------------------------------
 1 file changed, 27 insertions(+), 47 deletions(-)

diff --git a/html/pixels.tsx b/html/pixels.tsx
index b4de922..f7d4b16 100644
--- a/html/pixels.tsx
+++ b/html/pixels.tsx
@@ -1,63 +1,43 @@
 import { ComponentChildren, JSX } from "preact";
 import { Main, render_and_copy } from "./common.tsx";
 
-// kind of made this not generic :(
-const Toggle = ({ a, b }: { a: JSX.Element; b: JSX.Element }) => (
+// don't want to do randomly on since it's not unique anyway
+const Pixel = ({ color_a, color_b }: { color_a: string; color_b: string }) => (
     <details
         class="toggle"
         style="position: relative; margin: 0; cursor: pointer;"
     >
-        <summary style="list-style: none;">
-            <div style="margin: 0; display: block; width: 100%; height: 100%;">
-                {a}
-            </div>
-        </summary>
-        <div style="margin: 0; display: block; width: 100%; height: 100%; position: absolute; top: 0; pointer-events: none;">
-            {b}
-        </div>
+        <summary
+            style={`list-style: none; margin: 0; display: block; width: 100%; height: 100%; background-color: ${color_a};`}
+        ></summary>
+        <div
+            style={`margin: 0; display: block; width: 100%; height: 100%; position: absolute; top: 0; pointer-events: none; background-color: ${color_b};`}
+        ></div>
     </details>
 );
 
-const Pixel = ({ color_a, color_b }: { color_a: string; color_b: string }) => (
-    <Toggle
-        a={
-            <div
-                style={{
-                    backgroundColor: color_a,
-                    width: "100%",
-                    height: "100%",
-                }}
-            />
-        }
-        b={
-            <div
-                style={{
-                    backgroundColor: color_b,
-                    width: "100%",
-                    height: "100%",
-                }}
-            />
-        }
-    />
+const Pixels = ({
+    n,
+    color_a,
+    color_b,
+}: {
+    n: number;
+    color_a: string;
+    color_b: string;
+}) => (
+    <>
+        {...new Array(n)
+            .fill(null)
+            .map(() => <Pixel color_a={color_a} color_b={color_b} />)}
+    </>
 );
 
 render_and_copy(
     <Main>
-        <Pixel color_a="white" color_b="black" />
-        <Pixel color_a="white" color_b="black" />
-        <Pixel color_a="white" color_b="black" />
-        <Pixel color_a="white" color_b="black" />
-        <Pixel color_a="white" color_b="black" />
-        <Pixel color_a="white" color_b="black" />
-        <Pixel color_a="white" color_b="black" />
-        <Pixel color_a="white" color_b="black" />
-        <Pixel color_a="white" color_b="black" />
-        <Pixel color_a="white" color_b="black" />
-        <Pixel color_a="white" color_b="black" />
-        <Pixel color_a="white" color_b="black" />
-        <Pixel color_a="white" color_b="black" />
-        <Pixel color_a="white" color_b="black" />
-        <Pixel color_a="white" color_b="black" />
-        <Pixel color_a="white" color_b="black" />
+        <Pixels
+            n={20 ** 2}
+            color_a="rgb(var(--color-background))"
+            color_b="rgb(var(--color-foreground))"
+        />
     </Main>
 );