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

gonna move the color to out-of-line styles

Browse source
This commit is contained in:
mehbark 2023-07-20 22:43:01 -04:00
parent cdfa4a4d69
commit fc95938ad8
1 changed files with 27 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

74
html/pixels.tsx
View file

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