72 lines
2 KiB
TypeScript
72 lines
2 KiB
TypeScript
|
// let's game boy ! ! !
|
||
|
|
import { ComponentChild } from "preact";
|
||
|
|
import { Cycle, render_and_copy } from "./common.tsx";
|
||
|
|
|
||
|
|
const Pixel = ({
|
||
|
|
colors,
|
||
|
|
width_px,
|
||
|
|
}: {
|
||
|
|
colors: [string, ...string[]];
|
||
|
|
width_px: number;
|
||
|
|
}) => (
|
||
|
|
<Cycle credit={false} width_px={width_px} height_px={width_px}>
|
||
|
|
<div /*style={`width:${width_px}px;height:${width_px}px`}*/></div>
|
||
|
|
{...colors.map(c => (
|
||
|
|
// p saves four bytes per
|
||
|
|
// we aren't going to get to 20x18 but less data is courteous
|
||
|
|
<div
|
||
|
|
// this was parsing fine without px before. so weird
|
||
|
|
// oh we'd might as well switch back to 100% then
|
||
|
|
// AWESOME! THAT WAS WHAT WAS MAKING THE CYCLING REALLY NICE
|
||
|
|
style={`background:${c};width:100%;height:100%`}
|
||
|
|
></div>
|
||
|
|
))}
|
||
|
|
</Cycle>
|
||
|
|
);
|
||
|
|
|
||
|
|
const Draw = ({
|
||
|
|
width,
|
||
|
|
height = width,
|
||
|
|
pixel_width_px,
|
||
|
|
colors,
|
||
|
|
bg_color,
|
||
|
|
}: {
|
||
|
|
width: number;
|
||
|
|
height?: number;
|
||
|
|
pixel_width_px: number;
|
||
|
|
colors: [string, ...string[]];
|
||
|
|
bg_color: string;
|
||
|
|
}) => (
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
display: "grid",
|
||
|
|
gridTemplateRows: `repeat(${height}, 1fr)`,
|
||
|
|
gridTemplateColumns: `repeat(${width}, 1fr)`,
|
||
|
|
width: `${width * pixel_width_px}px`,
|
||
|
|
height: `${height * pixel_width_px}px`,
|
||
|
|
backgroundColor: bg_color,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{...new Array(width * height)
|
||
|
|
.fill(null)
|
||
|
|
.map(() => <Pixel width_px={pixel_width_px} colors={colors} />)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
const Shell = ({ children }: { children: ComponentChild }) => (
|
||
|
|
<div class="shell">{children}</div>
|
||
|
|
);
|
||
|
|
|
||
|
|
// https://www.color-hex.com/color-palette/26401
|
||
|
|
// body: "#aaaaaa"
|
||
|
|
render_and_copy(
|
||
|
|
<Draw
|
||
|
|
// the actual aspect ratio
|
||
|
|
// it has slightly more pixels though
|
||
|
|
width={10}
|
||
|
|
height={9}
|
||
|
|
pixel_width_px={20}
|
||
|
|
colors={["#8bac0f", "#306230", "#0f380f"]}
|
||
|
|
bg_color="#9bbc0f"
|
||
|
|
/>
|
||
|
|
);
|