getting rid of toggle

This commit is contained in:
mehbark 2023-07-20 22:27:24 -04:00
parent 7913133c66
commit cdfa4a4d69
2 changed files with 64 additions and 1 deletions

View file

@ -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
);

63
html/pixels.tsx Normal file
View file

@ -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>
);