diff --git a/index.html b/index.html index b8f12a7..6a80a3e 100644 --- a/index.html +++ b/index.html @@ -139,6 +139,9 @@ + + +
@@ -151,7 +154,7 @@ - +
diff --git a/script/app.js b/script/app.js index d84966d..67b2fe8 100644 --- a/script/app.js +++ b/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); diff --git a/script/gbnp.js b/script/gbnp.js index 5c629df..2e8a42d 100644 --- a/script/gbnp.js +++ b/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;