Bitmap rendering overhaul, working nicely

index.html

@@ -4,7 +4,6 @@
     <title>Game Boy Nintendo Power ROM Builder</title>
     <script src="script/vue.js"></script>
     <script src="script/gbnp.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>
     <link rel="stylesheet" type="text/css" href="style.css" />
   </head>
 
@@ -97,7 +96,7 @@
       <h2>3. Download Files</h2>
       <section>
         <div>
-          <label id="filename-label" for="filename-input">Filename: </label><input id="filename-input" type="text" :value="filename"/>
+          <label id="filename-label" for="filename-input">Filename: </label><input id="filename-input" type="text" v-model:value="filename"/>
         </div>
         <br/>
         <a class='download-link' :download="filename + '.map'" :href="downloadEnabled ? mapData : null" type="application/octet-stream" v-on:click="downloadMapFile" :class="{ disabled: !downloadEnabled }">Download MAP File</a>

script/app.js

@@ -80,12 +80,23 @@ let app = new Vue({
 Vue.component('bitmap-preview', {
   props: ['data'],
   mounted: function() {
-    let canvas = this.$refs.canvas;
-    const ctx = canvas.getContext('2d');
-    ctx.putImageData(new ImageData(this.data, 96, 8), 0, 0);
-    ctx.imageSmoothingEnabled = false;
-    ctx.scale(2, 2);
-    ctx.drawImage(ctx.canvas, 0, 0);
+    this.renderCanvas();
+  },
+  watch: {
+    data: function() {
+      this.renderCanvas();
+    }
+  },
+  methods: {
+    renderCanvas: function() {
+      let canvas = this.$refs.canvas;
+      const ctx = canvas.getContext('2d');
+      ctx.putImageData(new ImageData(this.data, 96, 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>'
 });

script/gbnp.js

@@ -98,39 +98,47 @@ class ROM {
   updateBitmap() {
     let buffer = [];
 
-    for (let byte = 0; byte < 24; byte++){
-      buffer.push(0x00);
-    }
-    for (let byte = 0; byte < 24; byte++){
-      buffer.push(0b01010101);
-    }
-    for (let byte = 0; byte < 24; byte++){
-      buffer.push(0b10101010);
-    }
-    for (let byte = 0; byte < 24; byte++){
-      buffer.push(0xFF);
-    }
-    for (let byte = 0; byte < 24; byte++){
-      buffer.push(0x00);
-    }
-    for (let byte = 0; byte < 24; byte++){
-      buffer.push(0b01010101);
-    }
-    for (let byte = 0; byte < 24; byte++){
-      buffer.push(0b10101010);
-    }
-    for (let byte = 0; byte < 24; byte++){
-      buffer.push(0xFF);
-    }
+    const canvas = document.createElement("canvas");
+    canvas.height = 8;
+    canvas.width = 96;
+    const ctx = canvas.getContext('2d');
+    ctx.imageSmoothingEnabled = false;
+    ctx.fillStyle = 'white';
+    ctx.fillRect(0, 0, 96, 8);
+    ctx.font = '8px Early-Gameboy'
+    ctx.fillStyle = '#777';
+    ctx.fillText(this.menuText,1,7);
+    const imageData = ctx.getImageData(0, 0, 96, 8).data;
 
-    for (let byte = 0; byte < 24; byte++){
-      for (let i = 0; i < 8; i++) {
-        buffer[byte+i*24] = buffer[byte+i*24] | 0b11000000;
+    for (let i = 0; i < imageData.length; i+=16){
+      let byte = 0;
+      for (let j = 0; j < 4; j++) {
+        let red = imageData[i+j*4];
+        if (red < 127) {
+          byte = byte | 0b11 << (6 - j*2);
+        }
       }
-      console.log("g")
+      buffer.push(byte)
     }
 
-    this.bitmapBuffer = new Uint8Array(buffer);
+    let outputBuffer = []
+    for (let h = 0; h < 24; h+=2) {
+      for (let i = h; i < 192; i+=24) {
+        let a = buffer[i]
+        let b = buffer[i+1]
+
+        let outputA =
+          (a & 0b10000000) | ((a & 0b00100000) << 1) | ((a & 0b00001000) << 2) | ((a & 0b00000010) << 3) |
+          ((b & 0b10000000) >> 4) | ((b & 0b00100000) >> 3) | ((b & 0b00001000) >> 2) | ((b & 0b00000010) >> 1);
+        let outputB =
+          ((a & 0b01000000) << 1) | ((a & 0b00010000) << 2) | ((a & 0b00000100) << 3) | ((a & 0b00000001) << 4) |
+          ((b & 0b01000000) >> 3) | ((b & 0b00010000) >> 2) | ((b & 0b00000100) >> 1) | (b & 0b00000001);
+
+        outputBuffer.push(outputA, outputB);
+      }
+    }
+
+    this.bitmapBuffer = new Uint8Array(outputBuffer);
     this.updateBitmapPreview(buffer);
   }
 
@@ -294,6 +302,8 @@ class Processor {
       // romFile.writeByteUntil(0xFF, romFileIndex + 63 + 192); // solid black
       romFile.writeBytes(rom.bitmapBuffer);
 
+      rom.bitmapBuffer
+
       romFileIndex += 512
     }
 

style.css

@@ -10,6 +10,13 @@ html {
   font-style: normal;
 }
 
+@font-face {
+  font-family: "Early-Gameboy";
+  src: url("./Early-Gameboy.woff") format("woff");
+  font-weight: normal;
+  font-style: normal;
+}
+
 h1 {
   color: #000079;
 }