Expand menu entry size from 96 -> 128, add pokemon font

README.md

@@ -10,10 +10,12 @@ This tool can build the data necessary to flash new games to a [Nintendo Power G
 - Early GameBoy Font: https://www.dafont.com/early-gameboy.font
 - Nokia Cellphone FC Font: https://www.dafont.com/nokia-cellphone.font
 - Gamer Font: https://www.dafont.com/gamer-2.font
+- Pokemon Classic Font: https://www.dafont.com/pokemon-classic.font
 
 ## Ideas
+- Upload multiple games at once
 - Move more templating into components
-- Add ability to upload arbitrary 96x8 images for menu entries
+- Add ability to upload arbitrary 128x8 images for menu entries
 - Save settings to local storage
 - A setting to change scrolling ticker text
-- Other romhacks to the menu?
+- Upload custom background iamge

index.html

@@ -111,16 +111,19 @@
           <span class="settings-label">Menu Font: </span>
 
           <input type="radio" id="font0" name="font" value="0" v-model="fontIndex">
-          <label for="font0" id="pixeltype" class="radio-label">Pixeltype</label>
+          <label for="font0" id="gameboy" class="radio-label">Game Boy</label>
 
           <input type="radio" id="font1" name="font" value="1" v-model="fontIndex">
-          <label for="font1" id="gameboy" class="radio-label">Game Boy</label>
+          <label for="font1" id="pixeltype" class="radio-label">Pixeltype</label>
 
           <input type="radio" id="font2" name="font" value="2" v-model="fontIndex">
           <label for="font2" id="nokia" class="radio-label">Nokia</label>
 
           <input type="radio" id="font3" name="font" value="3" v-model="fontIndex">
           <label for="font3" id="gamer" class="radio-label">Gamer</label>
+
+          <input type="radio" id="font4" name="font" value="4" v-model="fontIndex">
+          <label for="font4" id="pokemon" class="radio-label">Pokemon</label>
         </div>
 
         <div class="settings-row">

script/app.js

@@ -100,12 +100,12 @@ Vue.component('bitmap-preview', {
     renderCanvas: function() {
       let canvas = this.$refs.canvas;
       const ctx = canvas.getContext('2d');
-      ctx.putImageData(new ImageData(this.data, 96, 8), 0, 0);
+      ctx.putImageData(new ImageData(this.data, 128, 8), 0, 0);
       ctx.imageSmoothingEnabled = false;
       ctx.scale(2, 2);
       ctx.drawImage(ctx.canvas, 0, 0);
       ctx.setTransform(1, 0, 0, 1, 0, 0);
     }
   },
-  template: '<canvas width="192" height="16" ref="canvas"></canvas>'
+  template: '<canvas width="256" height="16" ref="canvas"></canvas>'
 });

script/gbnp.js

@@ -14,10 +14,11 @@ const BITMAP_PREVIEW_BYTES = [
   [0x00, 0x00, 0x00, 0xFF] // black
 ]
 const FONTS = [
-  { style: 'normal 16px Pixeltype', y: 7 },
   { style: 'normal 8px Gameboy', y: 7 },
+  { style: 'normal 16px Pixeltype', y: 7 },
   { style: 'normal 8px Nokia', y: 7 },
-  { style: 'normal 16px Gamer', y: 7 }
+  { style: 'normal 16px Gamer', y: 7 },
+  { style: 'normal 8px Pokemon', y: 7 },
 ]
 
 class Menu {
@@ -121,16 +122,19 @@ class ROM {
 
     const canvas = document.createElement("canvas");
     canvas.height = 8;
-    canvas.width = 96;
+    canvas.width = 128;
     const ctx = canvas.getContext('2d');
     ctx.imageSmoothingEnabled = false;
     ctx.fillStyle = 'white';
-    ctx.fillRect(0, 0, 96, 8);
+    ctx.fillRect(0, 0, 128, 8);
     const font = FONTS[fontIndex || 0];
     ctx.font = font.style;
     ctx.fillStyle = 'black';
     ctx.fillText(this.menuText,1,font.y);
-    const imageData = ctx.getImageData(0, 0, 96, 8).data;
+    ctx.fillStyle = 'white';
+    ctx.fillRect(127, 0, 127, 8);
+
+    const imageData = ctx.getImageData(0, 0, 128, 8).data;
 
     for (let i = 0; i < imageData.length; i+=16){
       let byte = 0;
@@ -144,8 +148,8 @@ class ROM {
     }
 
     let outputBuffer = []
-    for (let h = 0; h < 24; h+=2) {
-      for (let i = h; i < 192; i+=24) {
+    for (let h = 0; h < 32; h+=2) {
+      for (let i = h; i < 256; i+=32) {
         let a = buffer[i]
         let b = buffer[i+1]
 
@@ -347,8 +351,6 @@ class Processor {
       // title bitmap
       romFile.writeBytes(rom.bitmapBuffer);
 
-      rom.bitmapBuffer
-
       romFileIndex += 512
     }
 

style.css

@@ -26,6 +26,13 @@
   font-style: normal;
 }
 
+@font-face {
+  font-family: "Pokemon";
+  src: url("./font/Pokemon.woff") format("woff");
+  font-weight: normal;
+  font-style: normal;
+}
+
 html {
   font-family: sans-serif;
   line-height: 1.4;
@@ -175,13 +182,19 @@ label#nokia {
 }
 
 label#gamer {
-  font-family: Gamer;
+  font-family: 'Gamer';
   font-size: 32px;
   line-height: 0;
   position: relative;
   top: -2px;
 }
 
+label#pokemon {
+  font-family: 'Pokemon';
+  position: relative;
+  top: -2px;
+}
+
 noscript {
   font-weight: bold;
   color: red;