mirror of
https://github.com/whscullin/apple2js.git
synced 2024-01-12 14:14:38 +00:00
Blink! and better touch/mobile behaviors.
This commit is contained in:
parent
22acb1b6da
commit
a807dc9aae
@ -44,7 +44,7 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#display {
|
#display {
|
||||||
margin: 5px 0px;
|
margin: 5px auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.overscan {
|
.overscan {
|
||||||
@ -137,6 +137,36 @@ canvas {
|
|||||||
image-rendering: optimize-contrast;
|
image-rendering: optimize-contrast;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media all and (device-width: 320px) {
|
||||||
|
canvas {
|
||||||
|
width: 537px;
|
||||||
|
height: 368px;
|
||||||
|
left: 30px;
|
||||||
|
top: 24px;
|
||||||
|
}
|
||||||
|
#scanlines: {
|
||||||
|
width: 537px;
|
||||||
|
height: 368px;
|
||||||
|
left: 30px;
|
||||||
|
top: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media all and (device-width: 768px) {
|
||||||
|
canvas {
|
||||||
|
width: 564px;
|
||||||
|
height: 386px;
|
||||||
|
left: 14px;
|
||||||
|
top: 15px;
|
||||||
|
}
|
||||||
|
#scanlines {
|
||||||
|
width: 564px;
|
||||||
|
height: 386px;
|
||||||
|
left: 14px;
|
||||||
|
top: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
:-webkit-full-screen {
|
:-webkit-full-screen {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@ -227,7 +257,11 @@ canvas {
|
|||||||
padding: 0px;
|
padding: 0px;
|
||||||
height: 42px;
|
height: 42px;
|
||||||
font-family: Helvetica;
|
font-family: Helvetica;
|
||||||
width: 605px;
|
width: 570px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.apple2e #keyboard .row {
|
||||||
|
width: 610px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#keyboard .row0 {
|
#keyboard .row0 {
|
||||||
|
@ -28,10 +28,15 @@ var context = null;
|
|||||||
|
|
||||||
function LoresPage(page)
|
function LoresPage(page)
|
||||||
{
|
{
|
||||||
|
// $00-$3F inverse
|
||||||
|
// $40-$7F flashing
|
||||||
|
// $80-$FF normal
|
||||||
|
|
||||||
var _page = page;
|
var _page = page;
|
||||||
var _buffer = [];
|
var _buffer = [];
|
||||||
var _refreshing = false;
|
var _refreshing = false;
|
||||||
var _greenMode = false;
|
var _greenMode = false;
|
||||||
|
var _blink = false;
|
||||||
|
|
||||||
var _black = [0x00,0x00,0x00];
|
var _black = [0x00,0x00,0x00];
|
||||||
var _white = [0xff,0xff,0xff];
|
var _white = [0xff,0xff,0xff];
|
||||||
@ -86,7 +91,13 @@ function LoresPage(page)
|
|||||||
_init();
|
_init();
|
||||||
|
|
||||||
return {
|
return {
|
||||||
start: function() { return (0x04 * _page); },
|
start: function() {
|
||||||
|
var self = this;
|
||||||
|
window.setInterval(function() {
|
||||||
|
self.blink();
|
||||||
|
}, 267);
|
||||||
|
return (0x04 * _page);
|
||||||
|
},
|
||||||
end: function() { return (0x04 * _page) + 0x03; },
|
end: function() { return (0x04 * _page) + 0x03; },
|
||||||
read: function(page, off) {
|
read: function(page, off) {
|
||||||
var addr = (page << 8) | off,
|
var addr = (page << 8) | off,
|
||||||
@ -119,7 +130,7 @@ function LoresPage(page)
|
|||||||
off = (col * 7 + row * 280 * 8) * 4;
|
off = (col * 7 + row * 280 * 8) * 4;
|
||||||
|
|
||||||
if (textMode || (mixedMode && row > 19)) {
|
if (textMode || (mixedMode && row > 19)) {
|
||||||
if (val & 0x80) {
|
if (val & 0x80 || ((val & 0x40) && _blink)) {
|
||||||
fore = _greenMode ? _green : _white;
|
fore = _greenMode ? _green : _white;
|
||||||
back = _black;
|
back = _black;
|
||||||
} else {
|
} else {
|
||||||
@ -161,6 +172,18 @@ function LoresPage(page)
|
|||||||
}
|
}
|
||||||
_refreshing = false;
|
_refreshing = false;
|
||||||
},
|
},
|
||||||
|
blink: function() {
|
||||||
|
var addr = 0x400 * _page;
|
||||||
|
_refreshing = true;
|
||||||
|
_blink = !_blink;
|
||||||
|
for (var idx = 0; idx < 0x400; idx++, addr++) {
|
||||||
|
var b = _buffer[idx];
|
||||||
|
if ((b & 0xC0) == 0x40) {
|
||||||
|
this.write(addr >> 8, addr & 0xff, _buffer[idx]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
_refreshing = false;
|
||||||
|
},
|
||||||
green: function(on) {
|
green: function(on) {
|
||||||
_greenMode = on;
|
_greenMode = on;
|
||||||
this.refresh();
|
this.refresh();
|
||||||
|
@ -35,10 +35,15 @@ var context = null;
|
|||||||
|
|
||||||
function LoresPage(page)
|
function LoresPage(page)
|
||||||
{
|
{
|
||||||
|
// $00-$3F inverse
|
||||||
|
// $40-$7F flashing
|
||||||
|
// $80-$FF normal
|
||||||
|
|
||||||
var _page = page;
|
var _page = page;
|
||||||
var _buffer = [];
|
var _buffer = [];
|
||||||
var _refreshing = false;
|
var _refreshing = false;
|
||||||
var _greenMode = false;
|
var _greenMode = false;
|
||||||
|
var _blink = false;
|
||||||
|
|
||||||
var _black = [0x00,0x00,0x00];
|
var _black = [0x00,0x00,0x00];
|
||||||
var _white = [0xff,0xff,0xff];
|
var _white = [0xff,0xff,0xff];
|
||||||
@ -76,6 +81,12 @@ function LoresPage(page)
|
|||||||
_init();
|
_init();
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
start: function() {
|
||||||
|
var self = this;
|
||||||
|
window.setInterval(function() {
|
||||||
|
self.blink();
|
||||||
|
}, 267);
|
||||||
|
},
|
||||||
bank0: function() {
|
bank0: function() {
|
||||||
var self = this;
|
var self = this;
|
||||||
return {
|
return {
|
||||||
@ -114,7 +125,9 @@ function LoresPage(page)
|
|||||||
|
|
||||||
// These are used by both bank 0 and 1
|
// These are used by both bank 0 and 1
|
||||||
|
|
||||||
_start: function() { return (0x04 * _page); },
|
_start: function() {
|
||||||
|
return (0x04 * _page);
|
||||||
|
},
|
||||||
_end: function() { return (0x04 * _page) + 0x03; },
|
_end: function() { return (0x04 * _page) + 0x03; },
|
||||||
_read: function(page, off, bank) {
|
_read: function(page, off, bank) {
|
||||||
var addr = (page << 8) | off,
|
var addr = (page << 8) | off,
|
||||||
@ -151,8 +164,10 @@ function LoresPage(page)
|
|||||||
var color;
|
var color;
|
||||||
if (textMode || (mixedMode && row > 19)) {
|
if (textMode || (mixedMode && row > 19)) {
|
||||||
var b;
|
var b;
|
||||||
fore = _greenMode ? _green : _white;
|
var flash = ((val & 0xc0) == 0x40) &&
|
||||||
back = _black;
|
_blink && !_80colMode;
|
||||||
|
fore = flash ? _black : (_greenMode ? _green : _white);
|
||||||
|
back = flash ? _white : _black;
|
||||||
|
|
||||||
if (!altCharMode && !_80colMode) {
|
if (!altCharMode && !_80colMode) {
|
||||||
val = (val >= 0x40 && val < 0x80) ? val - 0x40 : val;
|
val = (val >= 0x40 && val < 0x80) ? val - 0x40 : val;
|
||||||
@ -238,6 +253,18 @@ function LoresPage(page)
|
|||||||
}
|
}
|
||||||
_refreshing = false;
|
_refreshing = false;
|
||||||
},
|
},
|
||||||
|
blink: function() {
|
||||||
|
var addr = 0x400 * _page;
|
||||||
|
_refreshing = true;
|
||||||
|
_blink = !_blink;
|
||||||
|
for (var idx = 0; idx < 0x400; idx++, addr++) {
|
||||||
|
var b = _buffer[0][idx];
|
||||||
|
if ((b & 0xC0) == 0x40) {
|
||||||
|
this._write(addr >> 8, addr & 0xff, _buffer[0][idx], 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
_refreshing = false;
|
||||||
|
},
|
||||||
green: function(on) {
|
green: function(on) {
|
||||||
_greenMode = on;
|
_greenMode = on;
|
||||||
},
|
},
|
||||||
|
@ -569,6 +569,8 @@ function MMU(cpu, lores1, lores2, hires1, hires2, io, rom)
|
|||||||
start: function mmu_start() {
|
start: function mmu_start() {
|
||||||
// Fake call start to register switches
|
// Fake call start to register switches
|
||||||
io.start();
|
io.start();
|
||||||
|
lores1.start();
|
||||||
|
lores2.start();
|
||||||
|
|
||||||
// Do us afterward because we override some of the above
|
// Do us afterward because we override some of the above
|
||||||
io.registerSwitches(this, LOC);
|
io.registerSwitches(this, LOC);
|
||||||
|
@ -14,9 +14,8 @@
|
|||||||
/*globals debug: false, toHex: false, reset: false */
|
/*globals debug: false, toHex: false, reset: false */
|
||||||
/*exported KeyBoard */
|
/*exported KeyBoard */
|
||||||
|
|
||||||
// keycode: [plain, cntl, shift]
|
|
||||||
|
|
||||||
function KeyBoard(io) {
|
function KeyBoard(io) {
|
||||||
|
// keycode: [plain, cntl, shift]
|
||||||
var keymap = {
|
var keymap = {
|
||||||
// Most of these won't happen
|
// Most of these won't happen
|
||||||
0x00: [0x00, 0x00, 0x00], //
|
0x00: [0x00, 0x00, 0x00], //
|
||||||
@ -165,6 +164,26 @@ function KeyBoard(io) {
|
|||||||
return 0xFF;
|
return 0xFF;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
shiftKey: function keyboard_shiftKey(down) {
|
||||||
|
shifted = down;
|
||||||
|
if (down) {
|
||||||
|
io.buttonDown(2);
|
||||||
|
$("#keyboard .key-SHIFT").addClass("active");
|
||||||
|
} else {
|
||||||
|
io.buttonUp(2);
|
||||||
|
$("#keyboard .key-SHIFT").removeClass("active");
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
controlKey: function keyboard_controlKey(down) {
|
||||||
|
controlled = down;
|
||||||
|
if (down) {
|
||||||
|
$("#keyboard .key-CTRL").addClass("active");
|
||||||
|
} else {
|
||||||
|
$("#keyboard .key-CTRL").removeClass("active");
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
create: function keyboard_create(kb) {
|
create: function keyboard_create(kb) {
|
||||||
var x, y, row, key, key1, key2, label, label1, label2;
|
var x, y, row, key, key1, key2, label, label1, label2;
|
||||||
|
|
||||||
@ -177,17 +196,16 @@ function KeyBoard(io) {
|
|||||||
return span;
|
return span;
|
||||||
}
|
}
|
||||||
|
|
||||||
function _mousedown() {
|
function _mousedown(ev) {
|
||||||
$(this).addClass("pressed");
|
$(ev.currentTarget).addClass("pressed");
|
||||||
}
|
}
|
||||||
|
|
||||||
function _mouseup() {
|
function _mouseup(ev) {
|
||||||
$(this).removeClass("pressed");
|
$(ev.currentTarget).removeClass("pressed");
|
||||||
}
|
}
|
||||||
|
|
||||||
function _click() {
|
function _click(ev) {
|
||||||
var self = this,
|
var key = $(ev.currentTarget).data(shifted ? "key2" : "key1");
|
||||||
key = $(self).data(shifted ? "key2" : "key1");
|
|
||||||
switch (key) {
|
switch (key) {
|
||||||
case "BELL":
|
case "BELL":
|
||||||
key = "G";
|
key = "G";
|
||||||
@ -215,11 +233,11 @@ function KeyBoard(io) {
|
|||||||
switch (key) {
|
switch (key) {
|
||||||
case "SHIFT":
|
case "SHIFT":
|
||||||
shifted = !shifted;
|
shifted = !shifted;
|
||||||
$("#keyboard .key-SHIFT").toggleClass("shifted");
|
$("#keyboard .key-SHIFT").toggleClass("active");
|
||||||
break;
|
break;
|
||||||
case "CTRL":
|
case "CTRL":
|
||||||
controlled = !controlled;
|
controlled = !controlled;
|
||||||
$("#keyboard .key-CTRL").toggleClass("controlled");
|
$("#keyboard .key-CTRL").toggleClass("active");
|
||||||
break;
|
break;
|
||||||
case "RESET":
|
case "RESET":
|
||||||
reset();
|
reset();
|
||||||
@ -265,10 +283,20 @@ function KeyBoard(io) {
|
|||||||
label.append(label1);
|
label.append(label1);
|
||||||
key.append(label);
|
key.append(label);
|
||||||
key.data({"key1": key1, "key2": key2});
|
key.data({"key1": key1, "key2": key2});
|
||||||
key.bind("mousedown", _mousedown);
|
|
||||||
key.bind("mouseup mouseout", _mouseup);
|
|
||||||
|
|
||||||
key.click(_click);
|
if (window.ontouchstart === undefined) {
|
||||||
|
key.bind("mousedown", function(event) {
|
||||||
|
_mousedown(event);
|
||||||
|
_click(event);
|
||||||
|
});
|
||||||
|
key.bind("mouseup mouseout", _mouseup);
|
||||||
|
} else {
|
||||||
|
key.bind("touchstart", function(event) {
|
||||||
|
_mousedown(event);
|
||||||
|
_click(event);
|
||||||
|
});
|
||||||
|
key.bind("touchend touchleave", _mouseup);
|
||||||
|
}
|
||||||
row.append(key);
|
row.append(key);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -261,8 +261,8 @@ function KeyBoard(io) {
|
|||||||
$(this).removeClass("pressed");
|
$(this).removeClass("pressed");
|
||||||
}
|
}
|
||||||
|
|
||||||
function _click() {
|
function _click(ev) {
|
||||||
var key = $(this).data(shifted ? "key2" : "key1");
|
var key = $(ev.currentTarget).data(shifted ? "key2" : "key1");
|
||||||
switch (key) {
|
switch (key) {
|
||||||
case "BELL":
|
case "BELL":
|
||||||
key = "G";
|
key = "G";
|
||||||
@ -366,9 +366,21 @@ function KeyBoard(io) {
|
|||||||
label.append(label1);
|
label.append(label1);
|
||||||
key.append(label);
|
key.append(label);
|
||||||
key.data({"key1": key1, "key2": key2});
|
key.data({"key1": key1, "key2": key2});
|
||||||
key.bind("mousedown", _mousedown);
|
|
||||||
|
if (window.ontouchstart === undefined) {
|
||||||
|
key.bind("mousedown", function(event) {
|
||||||
|
_mousedown(event);
|
||||||
|
_click(event);
|
||||||
|
});
|
||||||
key.bind("mouseup mouseout", _mouseup);
|
key.bind("mouseup mouseout", _mouseup);
|
||||||
key.click(_click);
|
} else {
|
||||||
|
key.bind("touchstart", function(event) {
|
||||||
|
_mousedown(event);
|
||||||
|
_click(event);
|
||||||
|
});
|
||||||
|
key.bind("touchend touchleave", _mouseup);
|
||||||
|
}
|
||||||
|
|
||||||
row.append(key);
|
row.append(key);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user