diff --git a/css/ui.css b/css/ui.css index 12177d29..06e02fbc 100644 --- a/css/ui.css +++ b/css/ui.css @@ -244,12 +244,12 @@ div.emuspacer { border-radius:20px; border: 4px solid #222; outline-color: #666; - padding: 30px; + padding: 20px; background: #000; margin-top:40px; - margin-left:7.5%; - margin-right:7.5%; - width: 85%; + margin-left:5%; + margin-right:5%; + width:90%; pointer-events:auto; } canvas.pixelated { diff --git a/src/emu.ts b/src/emu.ts index 497cb622..c5d785b5 100644 --- a/src/emu.ts +++ b/src/emu.ts @@ -53,7 +53,9 @@ function _setKeyboardEvents(canvas:HTMLElement, callback:KeyboardCallback) { }; }; -export var RasterVideo = function(mainElement:HTMLElement, width:number, height:number, options?) { +type VideoCanvasOptions = {rotate?:number, overscan?:boolean}; + +export var RasterVideo = function(mainElement:HTMLElement, width:number, height:number, options?:VideoCanvasOptions) { var canvas, ctx; var imageData, arraybuf, buf8, datau32; var vcanvas; @@ -79,6 +81,9 @@ export var RasterVideo = function(mainElement:HTMLElement, width:number, height: if (options && options.rotate) { this.setRotate(options.rotate); } + if (options && options.overscan) { + vcanvas.css('padding','0px'); + } ctx = canvas.getContext('2d'); imageData = ctx.createImageData(width, height); datau32 = new Uint32Array(imageData.data.buffer); diff --git a/src/platform/coleco.ts b/src/platform/coleco.ts index 4b05c9ab..18877b06 100644 --- a/src/platform/coleco.ts +++ b/src/platform/coleco.ts @@ -123,7 +123,7 @@ const _ColecoVisionPlatform = function(mainElement) { } }; cpu = this.newCPU(membus, iobus); - video = new RasterVideo(mainElement,canvasWidth,numVisibleScanlines); + video = new RasterVideo(mainElement,canvasWidth,numVisibleScanlines,{overscan:true}); video.create(); audio = new MasterAudio(); psg = new SN76489_Audio(audio); diff --git a/src/platform/nes.ts b/src/platform/nes.ts index b51a0be9..ee14cd77 100644 --- a/src/platform/nes.ts +++ b/src/platform/nes.ts @@ -78,7 +78,7 @@ const _JSNESPlatform = function(mainElement) { start() { var self = this; - video = new RasterVideo(mainElement,256,224); + video = new RasterVideo(mainElement,256,224,{overscan:true}); audio = new SampleAudio(audioFrequency); video.create(); var idata = video.getFrameData();