From 4b528bfb8254f200ab34a472abb14c97cf551409 Mon Sep 17 00:00:00 2001
From: David Higgins <zoul0813@me.com>
Date: Fri, 29 Nov 2024 11:53:14 -0500
Subject: [PATCH] * ADD: Fonts sub-panel for Video Tab

---
 index.html            |  8 ++++++++
 view/css/emulator.css | 18 ++++++++++++++----
 view/tabs/video.js    | 15 ++++++++++++++-
 3 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index 7134f84..ac7a28d 100644
--- a/index.html
+++ b/index.html
@@ -360,6 +360,10 @@ <h4>Ready?</h4>
             <input type="checkbox" id="video-palette" class="toggle" name="palette" checked />
             Show Palette
           </label>
+          <label>
+            <input type="checkbox" id="video-palette" class="toggle" name="fonts"  />
+            Show Fonts
+          </label>
           <label>
             <input type="checkbox" id="video-tileset" class="toggle" name="tileset" checked />
             Show Tileset
@@ -373,6 +377,10 @@ <h4>Ready?</h4>
           <summary>Palette</summary>
           <div class="palette"></div>
         </details>
+        <details class="sub-panel" name="fonts">
+          <summary>Fonts</summary>
+          <div class="fonts"></div>
+        </details>
         <details class="sub-panel" name="tileset" open>
           <summary>Tileset</summary>
           <div class="tileset"></div>
diff --git a/view/css/emulator.css b/view/css/emulator.css
index 6f843d6..057f94d 100644
--- a/view/css/emulator.css
+++ b/view/css/emulator.css
@@ -575,18 +575,28 @@ hr {
         }
     }
 
+    .fonts,
     .tileset {
+        --gap: 1ch;
+        --column: 64px;
         display: grid;
-        gap: .5em;
-        grid-template-columns: repeat(auto-fit, 64px);
+        gap: var(--gap);
+        grid-template-columns: repeat(auto-fit, var(--column));
         > canvas {
-            width: 64px;
-            height: 64px;
+            width: var(--column);
+            aspect-ratio: 1;
             cursor: help;
             image-rendering: pixelated;
         }
     }
 
+    .fonts {
+        --column: 32px;
+        > canvas {
+            aspect-ratio: 8 / 12;
+        }
+    }
+
     .layers {
         > canvas {
             max-width: 100%;
diff --git a/view/tabs/video.js b/view/tabs/video.js
index 9b262bd..f991913 100644
--- a/view/tabs/video.js
+++ b/view/tabs/video.js
@@ -9,6 +9,7 @@
   if(!_panels) {
     panels = {
       "palette": { "open": true, "visible": true },
+      "fonts": { "open": true, "visible": false },
       "tileset": { "open": true, "visible": true },
       "tilemap": { "open": false, "visible": false }
     }
@@ -22,7 +23,7 @@
   });
 
   $('#video-dump').on('click', () => {
-    const { tileset, palette, layer0, layer1, sprites } = zealcom.vchip.dump();
+    const { tileset, palette, layer0, layer1, sprites, font } = zealcom.vchip.dump();
 
     const $palette = $('#video .palette').empty();
     const palette888 = palette.getPalette();
@@ -34,6 +35,18 @@
       `);
     });
 
+    const $font = $('#video .fonts').empty();
+    for(let i = 0; i < 256; i++) {
+      const img = font.getCharacterImg(i, [0,0,0], [255,255,255]);
+      const canvas = document.createElement('canvas');
+      $(canvas).attr('title', `Char ${i}`).css('background-color', `#${background}`);
+      canvas.width = 8;
+      canvas.height = 12;
+      var ctx = canvas.getContext('2d');
+      ctx.putImageData(img, 0, 0);
+      $font.append(canvas);
+    }
+
     const $tileset = $('#video .tileset').empty();
     const mode8bit = tileset.getColorMode8Bit();
     const tile_count = mode8bit ? 256 : 512;