mirror of
https://github.com/inexorabletash/jsbasic.git
synced 2025-06-21 12:24:00 +00:00
dos2unix; factor out index.js; use addEvent/getClassList shims; change screen style using CSS classes
This commit is contained in:
Joshua Bell
254
index.htm
254
index.htm
@ -5,7 +5,7 @@
|
|||||||
<title>Applesoft BASIC in JavaScript</title>
|
<title>Applesoft BASIC in JavaScript</title>
|
||||||
<link rel="Stylesheet" href="styles.css" type="text/css">
|
<link rel="Stylesheet" href="styles.css" type="text/css">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Suppress browser compat button -->
|
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Suppress browser compat button -->
|
||||||
<script type="text/javascript" src="../polyfill/polyfill.js?update=2011-12-17"></script>
|
<script type="text/javascript" src="../polyfill/polyfill.js?update=2012-02-08"></script>
|
||||||
<script type="text/javascript" src="../polyfill/harmony.js?update=2011-12-17"></script>
|
<script type="text/javascript" src="../polyfill/harmony.js?update=2011-12-17"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
(function () {
|
(function () {
|
||||||
@ -176,7 +176,6 @@ By <a href="mailto:inexorabletash@hotmail.com">Joshua Bell</a>
|
|||||||
.CodeMirror-scroll { height: 100%; }
|
.CodeMirror-scroll { height: 100%; }
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
||||||
<script type="text/javascript" src="basic.js?2012-02-08"></script>
|
<script type="text/javascript" src="basic.js?2012-02-08"></script>
|
||||||
<script type="text/javascript" src="bell.js"></script>
|
<script type="text/javascript" src="bell.js"></script>
|
||||||
<script type="text/javascript" src="tty.js"></script>
|
<script type="text/javascript" src="tty.js"></script>
|
||||||
@ -185,257 +184,8 @@ By <a href="mailto:inexorabletash@hotmail.com">Joshua Bell</a>
|
|||||||
<script type="text/javascript" src="dos.js"></script>
|
<script type="text/javascript" src="dos.js"></script>
|
||||||
<script type="text/javascript" src="printer.js"></script>
|
<script type="text/javascript" src="printer.js"></script>
|
||||||
<script type="text/javascript" src="feed.js"></script>
|
<script type="text/javascript" src="feed.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript" src="index.js"></script>
|
||||||
|
|
||||||
// not quite ready for jQuery...
|
|
||||||
var $ = function (id) { return document.getElementById(id); };
|
|
||||||
|
|
||||||
//
|
|
||||||
// Main
|
|
||||||
//
|
|
||||||
window.onload = function() {
|
|
||||||
|
|
||||||
$('lb_files').selectedIndex = 0;
|
|
||||||
|
|
||||||
var bell = (function() {
|
|
||||||
var b = new Bell(/^.*\/|/.exec(window.location)[0]);
|
|
||||||
return function() { b.play(); };
|
|
||||||
} ());
|
|
||||||
|
|
||||||
|
|
||||||
var tty = new TTY($('screen'), $('keyboard'), bell);
|
|
||||||
var dos = new DOS(tty);
|
|
||||||
|
|
||||||
var lores = new LoRes($('lores'), 40, 48);
|
|
||||||
var hires = new HiRes($('hires'), 280, 192);
|
|
||||||
var hires2 = new HiRes($('hires2'), 280, 192);
|
|
||||||
var display = {
|
|
||||||
state: { graphics: false, full: true, page1: true, lores: true },
|
|
||||||
setState: function(state, value /* ... */) {
|
|
||||||
var args = Array.prototype.slice.call(arguments);
|
|
||||||
while (args.length) {
|
|
||||||
state = args.shift();
|
|
||||||
value = args.shift();
|
|
||||||
this.state[state] = value;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.state.graphics) {
|
|
||||||
lores.show(this.state.lores);
|
|
||||||
hires.show(!this.state.lores && this.state.page1);
|
|
||||||
hires2.show(!this.state.lores && !this.state.page1);
|
|
||||||
tty.splitScreen(tty.getScreenSize().height - (this.state.full ? 0 : 4));
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
lores.show(false);
|
|
||||||
hires.show(false);
|
|
||||||
hires2.show(false);
|
|
||||||
tty.splitScreen(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
var pdl = [0, 0, 0, 0];
|
|
||||||
|
|
||||||
// Lexical highlighting
|
|
||||||
var editor = new CodeMirror($('editorframe'), {
|
|
||||||
mode: 'basic',
|
|
||||||
tabMode: 'default',
|
|
||||||
content: $('source').value,
|
|
||||||
height: '100%'
|
|
||||||
});
|
|
||||||
|
|
||||||
$('btn_share').onclick = function() {
|
|
||||||
// Load up the hidden text area with the current source
|
|
||||||
$('source').value = getSource();
|
|
||||||
};
|
|
||||||
|
|
||||||
function getSource() {
|
|
||||||
return editor.getValue();
|
|
||||||
}
|
|
||||||
|
|
||||||
function setSource(source) {
|
|
||||||
editor.setValue(source);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Do not let certain events take focus away from "keyboard"
|
|
||||||
function keyboardFocus(e) {
|
|
||||||
e = e ? e : window.event;
|
|
||||||
|
|
||||||
tty.focus();
|
|
||||||
e.cancelBubble = true; // IE
|
|
||||||
e.returnValue = false;
|
|
||||||
if (e.stopPropagation) { e.stopPropagation(); } // W3C
|
|
||||||
if (e.preventDefault) { e.preventDefault(); } // e.g. to block arrows from scrolling the page
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
$('lores').onclick = keyboardFocus;
|
|
||||||
$('hires').onclick = keyboardFocus;
|
|
||||||
$('hires2').onclick = keyboardFocus;
|
|
||||||
$('screen').onclick = keyboardFocus;
|
|
||||||
$('frame').onclick = keyboardFocus;
|
|
||||||
$('frame').onblur = keyboardFocus; // Needed on IE, not sure why it tries to get focus
|
|
||||||
|
|
||||||
$('keyboard').onfocus = function() { $('frame').style.backgroundColor = '#204020'; };
|
|
||||||
$('keyboard').onblur = function() { $('frame').style.backgroundColor = ''; };
|
|
||||||
|
|
||||||
var program;
|
|
||||||
$('btn_run').onclick = function() {
|
|
||||||
dos.reset();
|
|
||||||
tty.reset();
|
|
||||||
tty.autoScroll = true;
|
|
||||||
|
|
||||||
try {
|
|
||||||
program = basic.compile(getSource());
|
|
||||||
}
|
|
||||||
catch (e) {
|
|
||||||
if (e instanceof basic.ParseError) {
|
|
||||||
editor.setCursor({ line: e.line - 1, ch: e.column - 1 });
|
|
||||||
console.log(e.message +
|
|
||||||
' (source line:' + e.line + ', column:' + e.column + ')');
|
|
||||||
}
|
|
||||||
alert(e);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
stopped = false;
|
|
||||||
updateUI();
|
|
||||||
|
|
||||||
program.init({
|
|
||||||
tty: tty,
|
|
||||||
hires: hires,
|
|
||||||
hires2: hires2,
|
|
||||||
lores: lores,
|
|
||||||
display: display,
|
|
||||||
paddle: function(n) { return pdl[n]; }
|
|
||||||
});
|
|
||||||
setTimeout(driver, 0);
|
|
||||||
};
|
|
||||||
|
|
||||||
$('btn_stop').onclick = function() {
|
|
||||||
tty.reset(); // cancel any blocking input
|
|
||||||
stopped = true;
|
|
||||||
updateUI();
|
|
||||||
};
|
|
||||||
|
|
||||||
$('lb_files').onchange = function() {
|
|
||||||
var sel = $('lb_files');
|
|
||||||
loadFile('samples/' + sel.value + ".txt", setSource);
|
|
||||||
};
|
|
||||||
|
|
||||||
$('btn_save').onclick = function() { window.localStorage.setItem("save_program", getSource()); };
|
|
||||||
$('btn_load').onclick = function() { setSource(window.localStorage.getItem("save_program")); };
|
|
||||||
|
|
||||||
// Add a "printer" on demand
|
|
||||||
$('btn_capture').onclick = function() {
|
|
||||||
|
|
||||||
$('btn_capture').disabled = true;
|
|
||||||
var printer = new Printer(tty);
|
|
||||||
|
|
||||||
printer.onclose = function() {
|
|
||||||
$('btn_capture').disabled = false;
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
// Mouse-as-Joystick
|
|
||||||
var wrapper = $('screen-wrapper');
|
|
||||||
wrapper.onmousemove = function(e) {
|
|
||||||
e = e || window.event;
|
|
||||||
|
|
||||||
// compute relative coordinates
|
|
||||||
var x = e.clientX, y = e.clientY, elem = wrapper;
|
|
||||||
while (elem) {
|
|
||||||
x -= elem.offsetLeft - elem.scrollLeft;
|
|
||||||
y -= elem.offsetTop - elem.scrollTop;
|
|
||||||
elem = elem.offsetParent;
|
|
||||||
}
|
|
||||||
|
|
||||||
function clamp(n, min, max) { return Math.min(Math.max(n, min), max); }
|
|
||||||
pdl[0] = clamp(x / (wrapper.offsetWidth - 1), 0, 1);
|
|
||||||
pdl[1] = clamp(y / (wrapper.offsetHeight - 1), 0, 1);
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
var stopped = true;
|
|
||||||
function updateUI() {
|
|
||||||
$("btn_stop").disabled = stopped ? "disabled" : "";
|
|
||||||
$("btn_run").disabled = stopped ? "" : "disabled";
|
|
||||||
$("lb_files").disabled = stopped ? "" : "disabled";
|
|
||||||
|
|
||||||
if (stopped) {
|
|
||||||
$("btn_run").focus();
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
tty.focus();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// TODO: Expose a RESPONSIVE |---+--------| FAST slider in the UI
|
|
||||||
// Number of steps to execute before yielding execution
|
|
||||||
// (Use a prime to minimize risk of phasing with loops)
|
|
||||||
var NUM_SYNCHRONOUS_STEPS = 37;
|
|
||||||
|
|
||||||
function driver() {
|
|
||||||
var state = basic.STATE_RUNNING;
|
|
||||||
var statements = NUM_SYNCHRONOUS_STEPS;
|
|
||||||
|
|
||||||
while (!stopped && state === basic.STATE_RUNNING && statements > 0) {
|
|
||||||
|
|
||||||
try {
|
|
||||||
state = program.step(driver);
|
|
||||||
}
|
|
||||||
catch (e) {
|
|
||||||
console.log(e);
|
|
||||||
alert(e.message ? e.message : e);
|
|
||||||
stopped = true;
|
|
||||||
updateUI();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
statements -= 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (state === basic.STATE_STOPPED || stopped) {
|
|
||||||
stopped = true;
|
|
||||||
updateUI();
|
|
||||||
}
|
|
||||||
else if (state === basic.STATE_BLOCKED) {
|
|
||||||
// Fall out
|
|
||||||
}
|
|
||||||
else // state === basic.STATE_RUNNING
|
|
||||||
{
|
|
||||||
setTimeout(driver, 0); // Keep going
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
function loadFile(filename, callback) {
|
|
||||||
var req = new XMLHttpRequest();
|
|
||||||
var url = encodeURI(filename); // not encodeURIComponent, so paths can be specified
|
|
||||||
var async = true;
|
|
||||||
req.open("GET", url, async);
|
|
||||||
req.onreadystatechange = function() {
|
|
||||||
if (req.readyState === XMLHttpRequest.DONE) {
|
|
||||||
if (req.status === 200 || req.status === 0) // 0 for file:// protocol
|
|
||||||
{
|
|
||||||
callback(req.responseText);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
req.send(null);
|
|
||||||
}
|
|
||||||
|
|
||||||
// load default
|
|
||||||
loadFile('samples/sample.default.txt', setSource);
|
|
||||||
|
|
||||||
// Show change history
|
|
||||||
atomToHtml('feed.xml?' + Math.random(), $('feed'));
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var _gaq = _gaq || [];
|
var _gaq = _gaq || [];
|
||||||
_gaq.push(['_setAccount', 'UA-18610679-3']);
|
_gaq.push(['_setAccount', 'UA-18610679-3']);
|
||||||
|
|||||||
236
index.js
Normal file
236
index.js
Normal file
@ -0,0 +1,236 @@
|
|||||||
|
|
||||||
|
window.onload = function () {
|
||||||
|
|
||||||
|
var $ = function (s) { return document.querySelector(s); };
|
||||||
|
|
||||||
|
$('#lb_files').selectedIndex = 0;
|
||||||
|
|
||||||
|
var bell = (function () {
|
||||||
|
var b = new Bell(/^.*\/|/.exec(window.location)[0]);
|
||||||
|
return function () { b.play(); };
|
||||||
|
} ());
|
||||||
|
|
||||||
|
|
||||||
|
var tty = new TTY($('#screen'), $('#keyboard'), bell);
|
||||||
|
var dos = new DOS(tty);
|
||||||
|
|
||||||
|
var lores = new LoRes($('#lores'), 40, 48);
|
||||||
|
var hires = new HiRes($('#hires'), 280, 192);
|
||||||
|
var hires2 = new HiRes($('#hires2'), 280, 192);
|
||||||
|
var display = {
|
||||||
|
state: { graphics: false, full: true, page1: true, lores: true },
|
||||||
|
setState: function (state, value /* ... */) {
|
||||||
|
var args = Array.prototype.slice.call(arguments);
|
||||||
|
while (args.length) {
|
||||||
|
state = args.shift();
|
||||||
|
value = args.shift();
|
||||||
|
this.state[state] = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.state.graphics) {
|
||||||
|
lores.show(this.state.lores);
|
||||||
|
hires.show(!this.state.lores && this.state.page1);
|
||||||
|
hires2.show(!this.state.lores && !this.state.page1);
|
||||||
|
tty.splitScreen(tty.getScreenSize().height - (this.state.full ? 0 : 4));
|
||||||
|
} else {
|
||||||
|
lores.show(false);
|
||||||
|
hires.show(false);
|
||||||
|
hires2.show(false);
|
||||||
|
tty.splitScreen(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
var pdl = [0, 0, 0, 0];
|
||||||
|
|
||||||
|
// Lexical highlighting
|
||||||
|
var editor = new CodeMirror($('#editorframe'), {
|
||||||
|
mode: 'basic',
|
||||||
|
tabMode: 'default',
|
||||||
|
content: $('#source').value,
|
||||||
|
height: '100%'
|
||||||
|
});
|
||||||
|
|
||||||
|
$('#btn_share').onclick = function () {
|
||||||
|
// Load up the hidden text area with the current source
|
||||||
|
$('#source').value = getSource();
|
||||||
|
};
|
||||||
|
|
||||||
|
function getSource() {
|
||||||
|
return editor.getValue();
|
||||||
|
}
|
||||||
|
|
||||||
|
function setSource(source) {
|
||||||
|
editor.setValue(source);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Do not let certain events take focus away from "keyboard"
|
||||||
|
function keyboardFocus(e) {
|
||||||
|
tty.focus();
|
||||||
|
e.stopPropagation(); // W3C
|
||||||
|
e.preventDefault(); // e.g. to block arrows from scrolling the page
|
||||||
|
}
|
||||||
|
|
||||||
|
addEvent($('#lores'), 'click', keyboardFocus);
|
||||||
|
addEvent($('#hires'), 'click', keyboardFocus);
|
||||||
|
addEvent($('#hires2'), 'click', keyboardFocus);
|
||||||
|
addEvent($('#screen'), 'click', keyboardFocus);
|
||||||
|
addEvent($('#frame'), 'click', keyboardFocus);
|
||||||
|
addEvent($('#frame'), 'blur', keyboardFocus); // Needed on IE, not sure why it tries to get focus
|
||||||
|
|
||||||
|
addEvent($('#keyboard'), 'focus', function () {
|
||||||
|
getClassList($('#frame')).add('focused');
|
||||||
|
});
|
||||||
|
addEvent($('#keyboard'), 'blur', function () {
|
||||||
|
getClassList($('#frame')).remove('focused');
|
||||||
|
});
|
||||||
|
|
||||||
|
var program;
|
||||||
|
addEvent($('#btn_run'), 'click', function () {
|
||||||
|
dos.reset();
|
||||||
|
tty.reset();
|
||||||
|
tty.autoScroll = true;
|
||||||
|
|
||||||
|
try {
|
||||||
|
program = basic.compile(getSource());
|
||||||
|
} catch (e) {
|
||||||
|
if (e instanceof basic.ParseError) {
|
||||||
|
editor.setCursor({ line: e.line - 1, ch: e.column - 1 });
|
||||||
|
console.log(e.message +
|
||||||
|
' (source line:' + e.line + ', column:' + e.column + ')');
|
||||||
|
}
|
||||||
|
alert(e);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
stopped = false;
|
||||||
|
updateUI();
|
||||||
|
|
||||||
|
program.init({
|
||||||
|
tty: tty,
|
||||||
|
hires: hires,
|
||||||
|
hires2: hires2,
|
||||||
|
lores: lores,
|
||||||
|
display: display,
|
||||||
|
paddle: function (n) { return pdl[n]; }
|
||||||
|
});
|
||||||
|
setTimeout(driver, 0);
|
||||||
|
});
|
||||||
|
|
||||||
|
addEvent($('#btn_stop'), 'click', function () {
|
||||||
|
tty.reset(); // cancel any blocking input
|
||||||
|
stopped = true;
|
||||||
|
updateUI();
|
||||||
|
});
|
||||||
|
|
||||||
|
addEvent($('#lb_files'), 'change', function () {
|
||||||
|
var sel = $('#lb_files');
|
||||||
|
loadFile('samples/' + sel.value + ".txt", setSource);
|
||||||
|
});
|
||||||
|
|
||||||
|
addEvent($('#btn_save'), 'click', function () {
|
||||||
|
window.localStorage.setItem("save_program", getSource());
|
||||||
|
});
|
||||||
|
addEvent($('#btn_load'), 'click', function () {
|
||||||
|
setSource(window.localStorage.getItem("save_program"));
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add a "printer" on demand
|
||||||
|
addEvent($('#btn_capture'), 'click', function () {
|
||||||
|
$('#btn_capture').disabled = true;
|
||||||
|
var printer = new Printer(tty);
|
||||||
|
|
||||||
|
printer.onclose = function () {
|
||||||
|
$('#btn_capture').disabled = false;
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// Mouse-as-Joystick
|
||||||
|
var wrapper = $('#screen-wrapper');
|
||||||
|
addEvent(wrapper, 'mousemove', function (e) {
|
||||||
|
// compute relative coordinates
|
||||||
|
var x = e.clientX, y = e.clientY, elem = wrapper;
|
||||||
|
while (elem) {
|
||||||
|
x -= elem.offsetLeft - elem.scrollLeft;
|
||||||
|
y -= elem.offsetTop - elem.scrollTop;
|
||||||
|
elem = elem.offsetParent;
|
||||||
|
}
|
||||||
|
|
||||||
|
function clamp(n, min, max) { return Math.min(Math.max(n, min), max); }
|
||||||
|
pdl[0] = clamp(x / (wrapper.offsetWidth - 1), 0, 1);
|
||||||
|
pdl[1] = clamp(y / (wrapper.offsetHeight - 1), 0, 1);
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
var stopped = true;
|
||||||
|
function updateUI() {
|
||||||
|
$("#btn_stop").disabled = stopped ? "disabled" : "";
|
||||||
|
$("#btn_run").disabled = stopped ? "" : "disabled";
|
||||||
|
$("#lb_files").disabled = stopped ? "" : "disabled";
|
||||||
|
|
||||||
|
if (stopped) {
|
||||||
|
$("#btn_run").focus();
|
||||||
|
} else {
|
||||||
|
tty.focus();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// TODO: Expose a RESPONSIVE |---+--------| FAST slider in the UI
|
||||||
|
// Number of steps to execute before yielding execution
|
||||||
|
// (Use a prime to minimize risk of phasing with loops)
|
||||||
|
var NUM_SYNCHRONOUS_STEPS = 37;
|
||||||
|
|
||||||
|
function driver() {
|
||||||
|
var state = basic.STATE_RUNNING;
|
||||||
|
var statements = NUM_SYNCHRONOUS_STEPS;
|
||||||
|
|
||||||
|
while (!stopped && state === basic.STATE_RUNNING && statements > 0) {
|
||||||
|
|
||||||
|
try {
|
||||||
|
state = program.step(driver);
|
||||||
|
} catch (e) {
|
||||||
|
console.log(e);
|
||||||
|
alert(e.message ? e.message : e);
|
||||||
|
stopped = true;
|
||||||
|
updateUI();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
statements -= 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (state === basic.STATE_STOPPED || stopped) {
|
||||||
|
stopped = true;
|
||||||
|
updateUI();
|
||||||
|
} else if (state === basic.STATE_BLOCKED) {
|
||||||
|
// Fall out
|
||||||
|
} else { // state === basic.STATE_RUNNING
|
||||||
|
setTimeout(driver, 0); // Keep going
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function loadFile(filename, callback) {
|
||||||
|
var req = new XMLHttpRequest();
|
||||||
|
var url = encodeURI(filename); // not encodeURIComponent, so paths can be specified
|
||||||
|
var async = true;
|
||||||
|
req.open("GET", url, async);
|
||||||
|
req.onreadystatechange = function () {
|
||||||
|
if (req.readyState === XMLHttpRequest.DONE) {
|
||||||
|
if (req.status === 200 || req.status === 0) {
|
||||||
|
callback(req.responseText);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
req.send(null);
|
||||||
|
}
|
||||||
|
|
||||||
|
// load default
|
||||||
|
loadFile('samples/sample.default.txt', setSource);
|
||||||
|
|
||||||
|
// Show change history
|
||||||
|
atomToHtml('feed.xml?' + Math.random(), $('#feed'));
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
@ -6,11 +6,13 @@ td { vertical-align: top; }
|
|||||||
|
|
||||||
/* Apple II Screen */
|
/* Apple II Screen */
|
||||||
.frame {width: 560px; height: 384px; border-style: ridge; border-width: 10px; border-color: gray; padding: 10px; background-color: #202020; }
|
.frame {width: 560px; height: 384px; border-style: ridge; border-width: 10px; border-color: gray; padding: 10px; background-color: #202020; }
|
||||||
|
.frame.focused { background-color: #204020; }
|
||||||
.wrapper { width: 560px; height: 384px; overflow: hidden; padding: 0; margin: 0; position: relative; }
|
.wrapper { width: 560px; height: 384px; overflow: hidden; padding: 0; margin: 0; position: relative; }
|
||||||
.lores {position: absolute; z-index: 2; left: 0; top: 0; width: 560px; height: 384px; overflow: hidden; visibility: hidden; }
|
.lores {position: absolute; z-index: 2; left: 0; top: 0; width: 560px; height: 384px; overflow: hidden; visibility: hidden; }
|
||||||
.hires {position: absolute; z-index: 2; left: 0; top: 0; width: 560px; height: 384px; overflow: hidden; visibility: hidden; background-color: #000000; }
|
.hires {position: absolute; z-index: 2; left: 0; top: 0; width: 560px; height: 384px; overflow: hidden; visibility: hidden; background-color: #000000; }
|
||||||
.tty {position: absolute; z-index: 3; left: 0; top: 0; width: 560px; height: 384px; overflow: hidden; }
|
.tty {position: absolute; z-index: 3; left: 0; top: 0; width: 560px; height: 384px; overflow: hidden; }
|
||||||
|
|
||||||
|
|
||||||
/* Character cells */
|
/* Character cells */
|
||||||
.normal { background-color: #000000; color: #80ff80; }
|
.normal { background-color: #000000; color: #80ff80; }
|
||||||
.inverse { background-color: #80ff80; color: #000000; }
|
.inverse { background-color: #80ff80; color: #000000; }
|
||||||
|
|||||||
Reference in New Issue
Block a user