cohost/html/gameboy.tsx

// 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,
        }}
        class="screen"
    >
        {...new Array(width * height)
            .fill(null)
            .map(() => <Pixel width_px={pixel_width_px} colors={colors} />)}
    </div>
);

// you know what, let's just to the dark grey part. sorry!
const Shell = ({ children }: { children: ComponentChild }) => (
    <div class="shell" aria-describedby={"user-content-gameboy-description"}>
        <div class="lines">
            <div class="top-line"></div>
            <div class="bottom-line"></div>
            <div class="headline">CHONK MATRIX WITH STERENO SOUND</div>
        </div>
        {children}
    </div>
);

// body: "#aaaaaa"
// horrid url, but color-picked from
// https://duet-cdn.vox-cdn.com/thumbor/0x0:2048x1364/750x500/filters:focal(1024x682:1025x683):format(webp)/cdn.vox-cdn.com/uploads/chorus_asset/file/23755199/a31768dc_f45b_4ac7_8f34_6f99e835ed358223055624103571533.jpg
render_and_copy(
    <>
        <Shell>
            <Draw
                // the actual aspect ratio
                // it has slightly more pixels though
                width={10}
                height={9}
                pixel_width_px={20}
                bg_color="#779268"
                colors={["#52643a", "#22311D", "#0E190B"]}
            />
        </Shell>
        <p id="gameboy-description" style="font-size: 0px">
            the screen and grey border of a Game Boy. at the top, it says "CHONK
            MATRIX WITH STERENO SOUND." the blank screen's pixels are comically
            large, but faithfully colored
        </p>
    </>
);