92 lines
2.9 KiB
TypeScript
92 lines
2.9 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,
|
|
}}
|
|
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>
|
|
</>
|
|
);
|