WIP custom font support

index.html

@@ -139,6 +139,9 @@
 
           <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">
+          <input type="text" placeholder="normal 8px Arial" v-model="customFont"/>
         </div>
 
         <div class="settings-row">
@@ -151,7 +154,7 @@
             <input type="radio" id="custom-ticker" value="1" v-model="tickerType">
             <label for="custom-ticker" class="radio-label">Custom Ticker</label>
 
-            <ticker-settings :show="tickerType == 1" :processor="processor" :font-index="fontIndex" :fonts-loaded="fontsLoaded"></ticker-settings>
+            <ticker-settings :show="tickerType == 1" :processor="processor" :font-index="fontIndex" :fonts-loaded="fontsLoaded" :custom-font="customFont"></ticker-settings>
           </div>
         </div>
 

script/app.js

@@ -27,7 +27,7 @@ Vue.component('bitmap-preview', {
 });
 
 Vue.component('ticker-settings', {
-  props: ['processor', 'fontsLoaded', 'fontIndex', 'show'],
+  props: ['processor', 'fontsLoaded', 'fontIndex', 'customFont', 'show'],
   data: function() {
     return ({
       text: "Created with GBNP on " + (new Date).toISOString().slice(0, 10) + "!"
@@ -35,12 +35,18 @@ Vue.component('ticker-settings', {
   },
   methods: {
     updateBitmap: function() {
-      const bitmap = (new TickerText(this.text, this.fontIndex, this.$refs.canvas)).generate()
+      const bitmap = (new TickerText(
+        this.text,
+        this.fontIndex,
+        this.customFont,
+        this.$refs.canvas
+      )).generate()
       this.processor.tickerBitmap = bitmap;
     }
   },
   watch: {
     fontIndex: function() { this.updateBitmap() },
+    customFont: function() { this.updateBitmap() },
     fontsLoaded: function () { this.updateBitmap() },
     text: function() { this.updateBitmap() }
   },
@@ -69,6 +75,7 @@ let app = new Vue({
     romData: '',
     singleRomMapData: '',
     fontIndex: 0,
+    customFont: null,
     forceDMG: false,
     englishPatch: false,
     cartType: 0,
@@ -132,7 +139,15 @@ let app = new Vue({
       this.writeSettingsToStorage();
     },
     fontIndex: function() {
-      for (let i = 0; i < this.roms.length; i++) { this.roms[i].updateBitmap(this.fontIndex); }
+      for (let i = 0; i < this.roms.length; i++) {
+        this.roms[i].updateBitmap(this.fontIndex, this.customFont);
+      }
+      this.writeSettingsToStorage();
+    },
+    customFont: function() {
+      for (let i = 0; i < this.roms.length; i++) {
+        this.roms[i].updateBitmap(this.fontIndex, this.customFont);
+      }
       this.writeSettingsToStorage();
     },
   },
@@ -140,7 +155,7 @@ let app = new Vue({
     addMenu: function(e) {
       let fileReader = new FileReader()
       fileReader.onload = () => {
-        const parsedRoms = this.processor.parseMenuData(fileReader.result, this.fontIndex);
+        const parsedRoms = this.processor.parseMenuData(fileReader.result, this.fontIndex, this.customFont);
         if (parsedRoms.length > 0) { this.roms = parsedRoms; }
       }
       fileReader.readAsArrayBuffer(e.target.files[0]);
@@ -152,9 +167,9 @@ let app = new Vue({
       for (let i = 0; i < files.length; i++) {
         let fileReader = new FileReader();
         fileReader.onload = () => {
-          const rom = new ROM(fileReader.result, this.fontIndex);
+          const rom = new ROM(fileReader.result, this.fontIndex, this.customFont);
           if (rom.isMenu()) {
-            const parsedRoms = this.processor.parseMenuData(fileReader.result, this.fontIndex);
+            const parsedRoms = this.processor.parseMenuData(fileReader.result, this.fontIndex, this.customFont);
             parsedRoms.forEach((rom) => this.roms.push(rom));
           } else if (!rom.bad) {
             this.roms.push(rom);

script/gbnp.js

@@ -53,7 +53,7 @@ class Menu {
 }
 
 class ROM {
-  constructor(arrayBuffer, fontIndex) {
+  constructor(arrayBuffer, fontIndex, customFont) {
     let file = new FileSeeker(arrayBuffer);
 
     file.seek(0x134);
@@ -70,7 +70,7 @@ class ROM {
     this.romByte = file.readByte();
     this.ramByte = file.readByte();
 
-    this.updateBitmap(fontIndex);
+    this.updateBitmap(fontIndex, customFont);
 
     file.rewind();
     this.arrayBuffer = new ArrayBuffer(this.paddedRomSizeKB() * 1024);
@@ -130,7 +130,7 @@ class ROM {
     this.updateBitmap(fontIndex);
   }
 
-  updateBitmap(fontIndex) {
+  updateBitmap(fontIndex, customFont) {
     let buffer = [];
 
     const canvas = document.createElement("canvas");
@@ -140,7 +140,15 @@ class ROM {
     ctx.imageSmoothingEnabled = false;
     ctx.fillStyle = 'white';
     ctx.fillRect(0, 0, 128, 8);
-    const font = FONTS[fontIndex || 0];
+
+    let font = { style: customFont, y: 7 };
+    if (fontIndex < FONTS.length) {
+      font = FONTS[fontIndex];
+    }
+
+    // console.log(font)
+
+    // const font = FONTS[fontIndex || 0];
     ctx.font = font.style;
     ctx.fillStyle = 'black';
 
@@ -472,7 +480,7 @@ class Processor {
     }
   }
 
-  parseMenuData(menuBuffer, fontIndex) {
+  parseMenuData(menuBuffer, fontIndex, customFont) {
     const roms = [];
     const menuFile = new FileSeeker(menuBuffer);
 
@@ -500,7 +508,7 @@ class Processor {
         for (let i = 0; i < romSizes.length; i++) {
           const romData = menuFile.read(romSizes[i] * 128 * 1024);
           const romBuffer = (new Uint8Array(romData)).buffer;
-          roms.push(new ROM(romBuffer, fontIndex))
+          roms.push(new ROM(romBuffer, fontIndex, customFont))
         }
       } catch(e) {
         console.log(e)
@@ -515,9 +523,10 @@ class Processor {
 }
 
 class TickerText {
-  constructor(text, fontIndex, canvas) {
+  constructor(text, fontIndex, customFont, canvas) {
     this.text = text;
     this.fontIndex = fontIndex;
+    this.customFont = customFont;
     this.canvas = canvas;
   }
 
@@ -528,7 +537,10 @@ class TickerText {
     if (this.fontIndex == 3) {
       text = text.toUpperCase();
     }
-    const font =  FONTS[this.fontIndex].style;
+    let font = this.customFont;
+    if (this.fontIndex < FONTS.length) {
+      font = FONTS[this.fontIndex].style;
+    }
 
     const ctx = canvas.getContext('2d');
     ctx.font = font;