mbk/cohost
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

getting rid of toggle

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
html/chessboard.tsx
View file

@ -95,6 +95,7 @@ const Pieces = () => {
render_and_copy( render_and_copy(
<Main> <Main>
<Pieces />
<Row n={0} /> <Row n={0} />
<Row n={1} /> <Row n={1} />
<Row n={2} /> <Row n={2} />
@ -103,7 +104,6 @@ render_and_copy(
<Row n={5} /> <Row n={5} />
<Row n={6} /> <Row n={6} />
<Row n={7} /> <Row n={7} />
<Pieces />
</Main>, </Main>,
true 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>
);