Clean up ticker settings

index.html

@@ -104,6 +104,8 @@
           <label for="font3" id="gamer" class="radio-label">Gamer</label>
         </div>
 
+        <ticker-settings :processor="processor" :font-index="fontIndex" :fonts-loaded="fontsLoaded"></ticker-settings>
+
         <div class="settings-row">
           <label class="settings-label" id="disableCGB-label" for="disableCGB-input">Disable CGB Palette: </label>
           <input id="disableCGB-input" type="checkbox" v-model:checked="disableCGB"/>
@@ -120,8 +122,6 @@
           <label class="settings-label" id="filename-label" for="filename-input">Download Filename: </label>
           <input id="filename-input" type="text" v-model:value="filename"/>
         </div>
-
-        <ticker-settings :processor="processor"/>
       </section>
 
       <h2>3. Download Files</h2>
@@ -132,8 +132,6 @@
       </section>
     </div>
 
-    <canvas id="scratch-canvas"></canvas>
-
     <footer>
       <a href="https://github.com/orangeglo/gbnp">view this project on github</a>
       -

script/app.js

@@ -19,20 +19,16 @@ Vue.component('bitmap-preview', {
       ctx.setTransform(1, 0, 0, 1, 0, 0);
     }
   },
-  template: '<canvas width="256" height="16" ref="canvas"></canvas>'
+  template: '<canvas style="vertical-align: middle" width="256" height="16" ref="canvas"></canvas>'
 });
 
 Vue.component('ticker-settings', {
-  props: ['processor'],
+  props: ['processor', 'fontsLoaded', 'fontIndex'],
   data: function() {
     return ({
-      fontIndex: 0,
-      text: "Created with GBNP on April 6, 2020"
+      text: "Created with GBNP on " + (new Date).toISOString().slice(0, 10) + "!"
     });
   },
-  mounted: function() {
-    this.updateBitmap();
-  },
   methods: {
     updateBitmap: function() {
       const bitmap = (new TickerText(this.text, this.fontIndex, this.$refs.canvas)).generate()
@@ -41,32 +37,19 @@ Vue.component('ticker-settings', {
   },
   watch: {
     fontIndex: function() { this.updateBitmap() },
+    fontsLoaded: function () { this.updateBitmap() },
     text: function() { this.updateBitmap() }
   },
   template: `
-    <div>
+    <div class="settings-row">
       <span class="settings-label">Ticker Text: </span>
 
       <div style="display:inline-block;">
         <div>
-          <input type="text" v-model="text"/>
+          <input style="width: 450px;" type="text" v-model="text"/>
         </div>
 
-        <div>
-          <input type="radio" id="ticker-font0" name="ticker-font" value="0" v-model="fontIndex">
-          <label for="ticker-font0" id="gameboy" class="radio-label">Game Boy</label>
-
-          <input type="radio" id="ticker-font1" name="ticker-font" value="1" v-model="fontIndex">
-          <label for="ticker-font1" id="pokemon" class="radio-label">POKEMON</label>
-
-          <input type="radio" id="ticker-font2" name="ticker-font" value="2" v-model="fontIndex">
-          <label for="ticker-font2" id="nokia" class="radio-label">Nokia</label>
-
-          <input type="radio" id="ticker-font3" name="ticker-font" value="3" v-model="fontIndex">
-          <label for="ticker-font3" id="gamer" class="radio-label">Gamer</label>
-        </div>
-
-        <div>
+        <div style="height: 16px; background-color: black">
           <canvas id="ticker-canvas" ref="canvas" height="16"></canvas>
         </div>
       </div>
@@ -85,7 +68,8 @@ let app = new Vue({
     romData: '',
     fontIndex: 0,
     disableCGB: false,
-    forceDMG: false
+    forceDMG: false,
+    fontsLoaded: false
   },
   created: function() {
     this.processor.menu = this.menu;
@@ -170,3 +154,5 @@ let app = new Vue({
     triggerAddRomLabel: function(e) { this.$refs.addRomLabel.click(); }
   }
 });
+
+document.fonts.ready.then(function() { app.fontsLoaded = true });

script/gbnp.js

@@ -428,12 +428,12 @@ class TickerText {
     let buffer = [];
     const canvas = this.canvas;
     const text = this.text;
-    const font =  'normal 24px Gamer';
+    const font =  FONTS[this.fontIndex].style;
 
     const ctx = canvas.getContext('2d');
     ctx.imageSmoothingEnabled = false;
     ctx.font = font;
-    let width = Math.ceil(ctx.measureText(text).width)
+    let width = Math.ceil(ctx.measureText(text).width) + 2
     for (let i = 0; i < 16; i++) {
       if ((width % 16) == 0) { break; }
       width++
@@ -444,8 +444,10 @@ class TickerText {
     ctx.font = font;
     ctx.fillStyle = 'black';
     ctx.fillRect(0, 0, canvas.width, canvas.height);
+    ctx.fillStyle = '#888';
+    ctx.fillText(text,3,14);
     ctx.fillStyle = 'white';
-    ctx.fillText(text,1,13);
+    ctx.fillText(text,1,12);
 
     const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
 
@@ -453,8 +455,12 @@ class TickerText {
       let byte = 0;
       for (let j = 0; j < 4; j++) {
         let red = imageData[i+j*4];
-        if (red < 127) {
+        if (red < 128) {
           byte = byte | 0b11 << (6 - j*2);
+        } else if (red < 162) {
+          byte = byte | 0b01 << (6 - j*2);
+        } else if (red < 192) {
+          byte = byte | 0b10 << (6 - j*2);
         }
       }
       buffer.push(byte)

style/style.css

@@ -66,10 +66,6 @@ button {
   font-weight: bold;
 }
 
-canvas {
-  vertical-align: middle;
-}
-
 button.upload {
   padding: 3px 0;
   color: blue;