cohost/html/gameboy.tsx

92 lines
2.9 KiB
TypeScript
Raw Normal View History

// 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,
}}
2024-01-04 22:23:08 -05:00
class="screen"
>
{...new Array(width * height)
.fill(null)
.map(() => <Pixel width_px={pixel_width_px} colors={colors} />)}
</div>
);
2024-01-04 22:23:08 -05:00
// you know what, let's just to the dark grey part. sorry!
const Shell = ({ children }: { children: ComponentChild }) => (
2024-01-04 22:23:08 -05:00
<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"
2024-01-04 22:35:23 -05:00
// horrid url, but color-picked from
2024-01-04 22:23:08 -05:00
// 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(
2024-01-04 22:23:08 -05:00
<>
<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">
2024-01-04 22:35:23 -05:00
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
2024-01-04 22:23:08 -05:00
</p>
</>
);