window.addEventListener('DOMContentLoaded', function() { var $ = function(s) { return document.querySelector(s); }; $('#lb_files').selectedIndex = 0; var frame = $('#frame'); var keyboard = frame; if (/iPod|iPad|iPhone/.test(navigator.platform)) { keyboard = document.createElement('input'); keyboard.type = 'text'; keyboard.style.width = keyboard.style.height = '1px'; keyboard.style.border = 'none'; keyboard.style.position = 'absolute'; keyboard.style.left = keyboard.style.top = '-100px'; frame.removeAttribute('tabIndex'); frame.addEventListener('click', function() { keyboard.focus(); }); frame.parentNode.insertBefore(keyboard, frame); } var tty = new TTY($('#screen'), keyboard); (function() { // Install output hook for bell var b = new Bell(/^.*\/|/.exec(window.location)[0]); var orig = tty.writeChar; tty.writeChar = function index_writeChar(c) { if (c.charCodeAt(0) === 7) b.play(); else orig(c); }; }()); 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, if available var editor; if (typeof CodeMirror === 'function') { editor = new CodeMirror($('#editorframe'), { mode: 'basic', tabMode: 'default', content: $('#source').value, height: '100%' }); } else { editor = (function() { var textArea = document.createElement('textarea'); $('#editorframe').appendChild(textArea); textArea.style.width = '598px'; textArea.style.height = '384px'; return { getValue: function() { return textArea.value; }, setValue: function(value) { textArea.value = value; }, setCursor: function(line, column) { // TODO: Implement me! } }; }()); } $('#btn_share').onclick = function(e) { // Load up the hidden text area with the current source $('#source').value = getSource(); }; function getSource() { return editor.getValue(); } function setSource(source) { editor.setValue(source); } var program; $('#btn_run').addEventListener('click', function(e) { e.preventDefault(); 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(); $('#btn_stop').focus(); program.init({ tty: tty, hires: hires, hires2: hires2, lores: lores, display: display, paddle: function(n) { return pdl[n]; } }); setTimeout(driver, 0); }); $('#btn_stop').addEventListener('click', function(e) { e.preventDefault(); tty.reset(); // cancel any blocking input stopped = true; updateUI(); }); $('#lb_files').addEventListener('change', function() { var sel = $('#lb_files'); loadFile('samples/' + sel.value + ".txt", setSource); }); var current_file_name; $('#btn_save').addEventListener('click', function(e) { e.preventDefault(); var a = document.createElement('a'); a.download = current_file_name || 'basic_program.txt'; a.href = 'data:text/plain;base64,' + window.btoa(getSource()); document.body.appendChild(a); a.click(); a.parentElement.removeChild(a); }); $('#btn_load').addEventListener('click', function(e) { e.preventDefault(); var input = document.createElement('input'); input.type = 'file'; input.addEventListener('change', function(e) { var file = e.target.files[0]; current_file_name = file.name; var reader = new FileReader(); reader.addEventListener('load', function() { setSource(reader.result); }); reader.readAsText(file); }); document.body.appendChild(input); input.click(); input.parentElement.removeChild(input); }); // Add a "printer" on demand var printer = null; var paper = $('#paper'); $('#show_paper').addEventListener('click', function(e) { e.preventDefault(); document.body.classList.add('printout'); printer = new Printer(tty, paper); }); $('#hide_paper').addEventListener('click', function(e) { e.preventDefault(); document.body.classList.remove('printout'); printer.close(); printer = null; }); // Mouse-as-Joystick var wrapper = $('#screen-wrapper'); wrapper.addEventListener('mousemove', function(e) { var rect = wrapper.getBoundingClientRect(), x = e.clientX - rect.left, y = e.clientY - rect.top; function clamp(n, min, max) { return n < min ? min : n > max ? max : n; } pdl[0] = clamp(x / (rect.width - 1), 0, 1); pdl[1] = clamp(y / (rect.height - 1), 0, 1); }); var stopped = true; function updateUI() { var btnFocus = (document.activeElement === $("#btn_run") || document.activeElement === $("#btn_stop")); $("#btn_stop").disabled = stopped ? "disabled" : ""; $("#btn_run").disabled = stopped ? "" : "disabled"; $("#lb_files").disabled = stopped ? "" : "disabled"; if (btnFocus || stopped) { $(stopped ? "#btn_run" : "#btn_stop").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 parseQueryParams() { var params = {}; var query = document.location.search.substring(1); query.split(/&/g).forEach(function(pair) { pair = pair.replace(/\+/g, " ").split(/=/).map(decodeURIComponent); params[pair[0]] = pair.length === 1 ? pair[0] : pair[1]; }); return params; } 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 var params = parseQueryParams(); if ('source' in params) { setSource(params.source); } else { loadFile('samples/sample.default.txt', setSource); } });