From 6690f109fc19dc7ebfbd55f1238f211ff32988f0 Mon Sep 17 00:00:00 2001 From: mehbark <terezi@pyrope.net> Date: Thu, 4 Jan 2024 21:31:57 -0500 Subject: [PATCH] gameboy: screen working nicely. now frame --- html/common.tsx | 8 +++++- html/draw.tsx | 0 html/gameboy.tsx | 71 ++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 78 insertions(+), 1 deletion(-) delete mode 100644 html/draw.tsx create mode 100644 html/gameboy.tsx diff --git a/html/common.tsx b/html/common.tsx index c8d888d..5e370aa 100644 --- a/html/common.tsx +++ b/html/common.tsx @@ -310,18 +310,24 @@ export const Cycle = ({ height_px, children, style, + credit = true, }: { width_px: number; height_px: number; children: [ComponentChild, ...ComponentChild[]]; style?: Record<string, string>; + credit?: boolean; }) => ( <div style={{ width: `${width_px}px`, height: `${height_px}px`, overflow: "hidden", - filter: "url(https://mehbark.github.io/#INFINITE%20CREDIT%20TO%20@BLACKLE)", + ...(credit + ? { + filter: "url(https://mehbark.github.io/#INFINITE%20CREDIT%20TO%20@BLACKLE)", + } + : {}), ...style, }} > diff --git a/html/draw.tsx b/html/draw.tsx deleted file mode 100644 index e69de29..0000000 diff --git a/html/gameboy.tsx b/html/gameboy.tsx new file mode 100644 index 0000000..0ff7ab8 --- /dev/null +++ b/html/gameboy.tsx @@ -0,0 +1,71 @@ +// 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" + /> +);