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