Apple-2-SW
/
jsbasic
mirror of https://github.com/inexorabletash/jsbasic.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

dos2unix; factor out index.js; use addEvent/getClassList shims; change screen style using CSS classes

This commit is contained in:
Joshua Bell 2012-02-08 22:37:04 -05:00
parent 9aa91a4410
commit a49ed766c9
12 changed files with 4091 additions and 4103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

254
index.htm
View File

@ -5,7 +5,7 @@
<title>Applesoft BASIC in JavaScript</title>
<link rel="Stylesheet" href="styles.css" type="text/css">
<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">
(function () {
@ -176,7 +176,6 @@ By <a href="mailto:inexorabletash@hotmail.com">Joshua Bell</a>
.CodeMirror-scroll { height: 100%; }
</style>
<script type="text/javascript" src="basic.js?2012-02-08"></script>
<script type="text/javascript" src="bell.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="printer.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">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-18610679-3']);

236
index.js Normal file
View 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'));
};

2
styles.css
View File

@ -6,11 +6,13 @@ td { vertical-align: top; }
/* Apple II Screen */
.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; }
.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; }
.tty {position: absolute; z-index: 3; left: 0; top: 0; width: 560px; height: 384px; overflow: hidden; }
/* Character cells */
.normal { background-color: #000000; color: #80ff80; }
.inverse { background-color: #80ff80; color: #000000; }