gameboy: screen working nicely. now frame

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",
+            ...(credit
+                ? {
                       filter: "url(https://mehbark.github.io/#INFINITE%20CREDIT%20TO%20@BLACKLE)",
+                  }
+                : {}),
             ...style,
         }}
     >

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