Merge pull request #7 from orangeglo/ticker-type

Add option to keep original ticker text

index.html

@@ -118,8 +118,8 @@
       <h2>2. Tweak Settings </h2>
       <section>
         <div class="settings-row">
-          <span class="settings-label">Cartridge Type: </span>
-          <select v-model="cartType">
+          <label class="settings-label" for='cart-type'>Cartridge Type: </label>
+          <select id='cart-type' v-model="cartType">
             <option v-bind:value="0">Nintendo GB Memory Cart</option>
             <option v-bind:value="1">insideGadgets Power Cart</option>
           </select>
@@ -141,10 +141,22 @@
           <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">
+          <span class="settings-label">Ticker Text: </span>
+
+          <div style='display: inline-block'>
+            <input type="radio" id="original-ticker" value="0" v-model="tickerType">
+            <label for="original-ticker" class="radio-label">Original Japanese Ticker</label>
+
+            <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>
+          </div>
+        </div>
 
         <div class="settings-row">
-          <label class="settings-label">ROM Hacks: </label>
+          <span class="settings-label">ROM Hacks: </span>
           <div class="flex-row">
             <div class="flex-item">
               <input id="englishPatch-input" type="checkbox" v-model:checked="englishPatch"/>

script/app.js

@@ -27,7 +27,7 @@ Vue.component('bitmap-preview', {
 });
 
 Vue.component('ticker-settings', {
-  props: ['processor', 'fontsLoaded', 'fontIndex'],
+  props: ['processor', 'fontsLoaded', 'fontIndex', 'show'],
   data: function() {
     return ({
       text: "Created with GBNP on " + (new Date).toISOString().slice(0, 10) + "!"
@@ -45,18 +45,14 @@ Vue.component('ticker-settings', {
     text: function() { this.updateBitmap() }
   },
   template: `
-    <div class="settings-row">
-      <span class="settings-label">Ticker Text: </span>
+    <div :class="{ hide: !show }" class="ticker-settings">
+      <div>
+        <input style="width: 450px;" type="text" v-model="text"/>
+      </div>
 
-      <div style="display:inline-block;">
-        <div>
-          <input style="width: 450px;" type="text" v-model="text"/>
-        </div>
-
-        <div style="height: 17px; background-color: black">
-          <img src="img/ticker_logo.png" style="height: 16px; padding-top: 1px"/>
-          <canvas id="ticker-canvas" ref="canvas" height="16" style="vertical-align: top"></canvas>
-        </div>
+      <div style="height: 17px; background-color: black">
+        <img src="img/ticker_logo.png" style="height: 16px; padding-top: 1px"/>
+        <canvas id="ticker-canvas" ref="canvas" height="16" style="vertical-align: top"></canvas>
       </div>
     </div>
   `
@@ -76,6 +72,7 @@ let app = new Vue({
     forceDMG: false,
     englishPatch: false,
     cartType: 0,
+    tickerType: 1,
     fontsLoaded: false,
   },
   created: function() {
@@ -85,6 +82,7 @@ let app = new Vue({
     this.processor.tickerText = this.tickerText;
     this.processor.forceDMG = this.forceDMG;
     this.processor.englishPatch = this.englishPatch;
+    this.processor.tickerType = this.tickerType;
 
     if (window.location.search.substr(1).toLowerCase() == 'ig') {
       this.cartType = 1;
@@ -129,6 +127,10 @@ let app = new Vue({
       this.processor.englishPatch = this.englishPatch;
       this.writeSettingsToStorage();
     },
+    tickerType: function() {
+      this.processor.tickerType = this.tickerType;
+      this.writeSettingsToStorage();
+    },
     fontIndex: function() {
       for (let i = 0; i < this.roms.length; i++) { this.roms[i].updateBitmap(this.fontIndex); }
       this.writeSettingsToStorage();
@@ -214,17 +216,20 @@ let app = new Vue({
       window.localStorage.setItem('forceDMG', this.forceDMG);
       window.localStorage.setItem('englishPatch', this.englishPatch);
       window.localStorage.setItem('cartType', this.cartType);
+      window.localStorage.setItem('tickerType', this.tickerType);
     },
     loadSettingsFromStorage: function() {
       const fontIndex = window.localStorage.getItem('fontIndex');
       const forceDMG = window.localStorage.getItem('forceDMG');
       const englishPatch = window.localStorage.getItem('englishPatch');
       const cartType = window.localStorage.getItem('cartType');
+      const tickerType = window.localStorage.getItem('tickerType');
 
       if (fontIndex) { this.fontIndex = parseInt(fontIndex); }
       if (forceDMG) { this.forceDMG = parseBool(forceDMG); }
       if (englishPatch) { this.englishPatch = parseBool(englishPatch); }
       if (cartType) { this.cartType = parseInt(cartType); }
+      if (tickerType) { this.tickerType = parseInt(tickerType); }
     },
     triggerAddMenuLabel: function(e) { this.$refs.addMenuLabel.click(); },
     triggerAddRomLabel: function(e) { this.$refs.addRomLabel.click(); },

script/gbnp.js

@@ -215,6 +215,7 @@ class Processor {
     this.tickerBitmap = [];
     this.cartType = 0;
     this.englishPatch = false;
+    this.tickerType = 1;
   }
 
   romTotalKB() {
@@ -343,10 +344,12 @@ class Processor {
     }
 
     // ticker text
-    romFile.seek(0x18040);
-    romFile.writeByteUntil(0x00, 0x19140); // overwrite existing data
-    romFile.seek(0x18040);
-    romFile.writeBytes(Array.from(this.tickerBitmap));
+    if (this.tickerType == 1) {
+      romFile.seek(0x18040);
+      romFile.writeByteUntil(0x00, 0x19140); // overwrite existing data
+      romFile.seek(0x18040);
+      romFile.writeBytes(Array.from(this.tickerBitmap));
+    }
 
     let romBase = 0x01;
     let romFileIndex = 0x1C200;

style/style.css

@@ -223,3 +223,11 @@ noscript {
 .single-rom-download {
   margin-top: 1.5rem;
 }
+
+.hide {
+  display: none;
+}
+
+.ticker-settings {
+  margin-top: 0.4rem;
+}