From cdfa4a4d6985018b74f9728f8dbd1633456c449a Mon Sep 17 00:00:00 2001
From: mehbark <terezi@pyrope.net>
Date: Thu, 20 Jul 2023 22:27:24 -0400
Subject: [PATCH] getting rid of toggle

---
 html/chessboard.tsx |  2 +-
 html/pixels.tsx     | 63 +++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 64 insertions(+), 1 deletion(-)
 create mode 100644 html/pixels.tsx

diff --git a/html/chessboard.tsx b/html/chessboard.tsx
index 3418785..c1ffc08 100644
--- a/html/chessboard.tsx
+++ b/html/chessboard.tsx
@@ -95,6 +95,7 @@ const Pieces = () => {
 
 render_and_copy(
     <Main>
+        <Pieces />
         <Row n={0} />
         <Row n={1} />
         <Row n={2} />
@@ -103,7 +104,6 @@ render_and_copy(
         <Row n={5} />
         <Row n={6} />
         <Row n={7} />
-        <Pieces />
     </Main>,
     true
 );
diff --git a/html/pixels.tsx b/html/pixels.tsx
new file mode 100644
index 0000000..b4de922
--- /dev/null
+++ b/html/pixels.tsx
@@ -0,0 +1,63 @@
+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 }) => (
+    <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>
+    </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%",
+                }}
+            />
+        }
+    />
+);
+
+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" />
+    </Main>
+);