Display the character set

inspector/index.html

@@ -18,7 +18,7 @@
         <script type="module">
             // import "https://esm.sh/*preact/devtools"
             import { render } from "preact"
-            import { propView, bodyView, fileList } from "./index.js"
+            import { propView, bodyView, fileList, charsetView } from "./index.js"
             import { html, errors } from "./view.js"
 
             const indexView = (_) => html`
@@ -35,6 +35,12 @@ <h3>Props</h3>
                 <h3>Beta-only</h3>
                 <p>From: <a href="https://github.com/Museum-of-Art-and-Digital-Entertainment/habitat/tree/master/habitat/Beta/Images">habitat/Beta/Images</a></p>
                 <${fileList} indexFile="beta.json" childView=${propView} href="detail.html"/>
+                <h3>Character set</h3>
+                <p>From: <a href="https://github.com/Museum-of-Art-and-Digital-Entertainment/habitat/blob/master/sources/c64/charset.m">sources/c64/charset.m</a></p>
+                <h4>Full size:</h4>
+                <${charsetView} colors=${{ pixelHeight: 2, pattern: 0xaa }}/>
+                <h4>Half size:</h4>
+                <${charsetView} colors=${{ halfSize: true, pattern: 0xaa }}/>
                 <${errors}/>`
 
             render(html`<${indexView}/>`, document.getElementById("content"))

inspector/index.js

@@ -1,6 +1,8 @@
-import { useBinary, useJson } from "./data.js"
+import { useMemo } from "preact/hooks"
+import { useBinary, useJson, charset } from "./data.js"
 import { decodeProp, decodeBody } from "./codec.js"
 import { html, catcher } from "./view.js"
+import { bitmapFromChar, canvasFromBitmap, canvasImage } from "./render.js"
 import { propAnimation, celmaskImage, actionAnimation } from "./show.js"
 
 export const propView = ({ filename }) => {
@@ -42,3 +44,37 @@ export const fileList = ({ indexFile, childView, href }) =>
                     <${childView} filename=${filename}/>
                 <//>`)}
         </div>`
+
+const uncaughtCharView = ({ charset, byte, colors }) => {
+    const canvas = useMemo(() => {
+        const bitmap = bitmapFromChar(charset, byte, colors)
+        return canvasFromBitmap(bitmap)
+    }, [charset, byte, colors.halfSize])
+    return html`<${canvasImage} canvas=${canvas}/>`
+}
+
+const charView = (props) => html`
+    <${catcher} filename=${`char:${props.byte}`}>
+        <${uncaughtCharView} ...${props}/>
+    <//>`
+
+export const charsetView = ({ colors }) => {
+    if (!charset()) { return null }
+    const rows = []
+    const headers = [html`<th/>`]
+    for (let x = 0; x < 16; x ++) {
+        headers.push(html`<th>_${x.toString(16)}</th>`)
+    }
+    rows.push(html`<tr>${headers}</tr>`)
+    for (let y = 0; y < 8; y ++) {
+        const columns = [html`<td>${y.toString(16)}_</td>`]
+        for (let x = 0; x < 16; x ++) {
+            columns.push(html`<td><${charView} charset=${charset()} byte=${x + (y * 16)} colors=${colors}/></td>`)
+        }
+        rows.push(html`<tr>${columns}</tr>`)
+    }
+    return html`
+        <table>
+            ${rows}
+        </table>`
+}

inspector/render.js

@@ -157,8 +157,8 @@ const TXTCMD = {
     space: 0x20,
 }
 
-export const bitmapFromChar = (charset, byte, colors) => {
-    const { pixelWidth, pixelHeight, halfSize, inverse, pattern } = { ...defaultColors, ...colors }
+export const bitmapFromChar = (charset, byte, colors = {}) => {
+    const { pixelWidth = 1, pixelHeight = 1, halfSize = false, inverse = true, pattern } = { ...defaultColors, ...colors }
     const charWidth = pixelWidth * (halfSize ? 4 : 8)
     const charHeight = pixelHeight * 8
     const masks = halfSize ? [0x80, 0x20, 0x08, 0x02] : [0x80, 0x40, 0x20, 0x10, 0x08, 0x04, 0x02, 0x01]