6502
/
8bitworkshop
mirror of https://github.com/sehugg/8bitworkshop.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

added nice bevel

This commit is contained in:
Steven Hugg 2017-04-22 15:02:34 -04:00
parent 52c80a98e1
commit fa0d0ac872
2 changed files with 19 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
index.html
View File

@ -180,6 +180,19 @@ a.dropdown-toggle {
-moz-border-radius:6px 0 6px 6px;
border-radius:6px 0 6px 6px;
}
.emubevel {
padding:4%;
background:#333;
}
.emuvideo {
border-radius:20px;
border: 4px solid #222;
padding: 30px;
margin-top: 20px;
margin-bottom: 20px;
background: #000;
outline-color: #666;
}
canvas.pixelated {
image-rendering: optimizeSpeed; /* Older versions of FF */
image-rendering: -moz-crisp-edges; /* FF 6.0+ */
@ -209,7 +222,7 @@ canvas.pixelated {
<!--<li><a class="dropdown-item" href="?platform=apple2" id="item_platform_apple2">Apple ][</a></li>-->
<li><a class="dropdown-item" href="?platform=vicdual" id="item_platform_vicdual">VIC Dual</a></li>
<li><a class="dropdown-item" href="?platform=mw8080bw" id="item_platform_mw8080bw">Midway 8080</a></li>
<li><a class="dropdown-item" href="?platform=galaxian-scramble" id="item_platform_galaxian_scramble">Scramble Hardware</a></li>
<li><a class="dropdown-item" href="?platform=galaxian-scramble" id="item_platform_galaxian_scramble">Galaxian/Scramble Hardware</a></li>
<li><a class="dropdown-item" href="?platform=vector-z80color" id="item_platform_vector_z80color">Atari Color Vector (Z80)</a></li>
<li><a class="dropdown-item" href="?platform=williams-z80" id="item_platform_williams_z80">Williams (Z80)</a></li>
<li><a class="dropdown-item" href="?platform=sound_williams-z80" id="item_platform_sound_williams_z80">Williams Sound (Z80)</a></li>

11
src/emu.js
View File

@ -12,14 +12,13 @@ function __createCanvas(mainElement, width, height) {
// TODO
var fsElement = document.createElement('div');
fsElement.style.position = "relative";
fsElement.style.padding = "5%";
fsElement.style.overflow = "hidden";
fsElement.style.background = "black";
fsElement.classList.add("emubevel");
var canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
canvas.style['class'] = "emuvideo";
canvas.classList.add("emuvideo");
canvas.style.width = "100%";
canvas.style.height = "100%";
canvas.tabIndex = "-1"; // Make it focusable
@ -39,10 +38,10 @@ var RasterVideo = function(mainElement, width, height, options) {
if (options && options.rotate) {
// TODO: aspect ratio?
canvas.style.transform = "rotate("+options.rotate+"deg)";
if (canvas.width > canvas.height)
canvas.style.paddingTop = canvas.style.paddingBottom = "10%";
else
if (canvas.width < canvas.height)
canvas.style.paddingLeft = canvas.style.paddingRight = "10%";
//else
// canvas.style.paddingTop = canvas.style.paddingBottom = "10%";
}
ctx = canvas.getContext('2d');
imageData = ctx.createImageData(width, height);