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

UI tweaks

This commit is contained in:
Joshua Bell 2015-12-06 16:30:35 -08:00
parent 20f302339f
commit 266f60893e
2 changed files with 77 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
index.html
View File

@ -49,60 +49,67 @@ By <a href="mailto:inexorabletash@gmail.com">Joshua Bell</a>
<!-- Source --> <!-- Source -->
<div style="float: left; margin: 5px;"> <div style="float: left; margin: 5px;">
Enter code: &nbsp;&nbsp; Enter code: &nbsp;&nbsp;
<input type="button" value="Run" id="btn_run"> <button id="btn_run">&#x25B6; Run</button>
<input type="button" value="Stop" id="btn_stop" disabled="disabled"> <button id="btn_stop" disabled>&#x25FC; Stop</button>
<select id="lb_files"> <select id="lb_files">
<option disabled selected="selected">Select a file...</option> <option disabled selected="selected">Select a sample...</option>
<option value="sample.basic">DEMOS</option> <option value="sample.basic">DEMOS</option>
<option disabled>---- Tests ----</option> <option disabled>____________________________________________</option>
<option value="sample.unittests">Unit Tests</option> <option disabled>Tests</option>
<option value="sample.keyboard">Keyboard Test</option> <option value="sample.unittests">&nbsp; Unit Tests</option>
<option value="sample.charset">Charset Test</option> <option value="sample.keyboard">&nbsp; Keyboard Test</option>
<option value="sample.charset">&nbsp; Charset Test</option>
<option disabled>---- User Submissions ----</option> <option disabled>____________________________________________</option>
<option disabled>Games</option> <option disabled>Games</option>
<option value="simple.pong">SIMPLE.PONG</option>
<option value="sample.adventure">Text Adventure (Floyd McWilliams)</option>
<option value="sample.pacman">(Not Really) ASCII Pac-Man (Michael Kemp)</option>
<option value="sample.puzzler">Puzzler (Gregg Buntin)</option>
<option value="sample.hangman">Hangman (Mike Gleason)</option>
<option value="sample.raindrops">Catch the Raindrop (Nicholas Merchant)</option>
<option value="sample.jot">JOT (Mike Gleason)</option>
<option value="simple.pong">&nbsp; SIMPLE.PONG</option>
<option value="sample.adventure">&nbsp; Text Adventure (Floyd McWilliams)</option>
<option value="sample.pacman">&nbsp; (Not Really) ASCII Pac-Man (Michael Kemp)</option>
<option value="sample.puzzler">&nbsp; Puzzler (Gregg Buntin)</option>
<option value="sample.hangman">&nbsp; Hangman (Mike Gleason)</option>
<option value="sample.raindrops">&nbsp; Catch the Raindrop (Nicholas Merchant)</option>
<option value="sample.jot">&nbsp; JOT (Mike Gleason)</option>
<option disabled>____________________________________________</option>
<option disabled>Graphics</option> <option disabled>Graphics</option>
<option value="sample.rodscolorpattern">Rod's Color Pattern</option>
<option value="sample.hacker">Hacker Logo (markwstock)</option>
<option value="sample.loreswalk">Random LoRes (John Melesky)</option>
<option value="sample.hireswalk">Random HiRes (John Melesky)</option>
<option value="sample.sierpinski">Sierpinski Triangles (Kevin Miller)</option>
<option value="sample.stringart">String Art (Chris Heric)</option>
<option value="sample.paint">Drawing Program (Brian Broker)</option>
<option value="sample.scribble">Scribble (William Simms)</option>
<option value="sample.connections">Connections (Gregg Buntin)</option>
<option value="sample.squiggle">Squiggle (Gregg Buntin)</option>
<option value="sample.boys_surface">Boy's Surface (Lukas Innig)</option>
<option value="sample.gaussian">Gaussian Distribution 2D (John Russ)</option>
<option value="sample.bitmaps">Bitmap Images (Brian Broker)</option>
<option value="sample.mandelbrot">Mandelbrot Set (c/o Gregory Lewis)</option>
<option value="sample.mandelbrot2">Mandelbrot Set in Color</option>
<option value="sample.steve">Steve (Nicola Foggi)</option>
<option value="sample.logo">Apple Logo (Brendan Robert)</option>
<option value="sample.rodscolorpattern">&nbsp; Rod's Color Pattern</option>
<option value="sample.hacker">&nbsp; Hacker Logo (markwstock)</option>
<option value="sample.loreswalk">&nbsp; Random LoRes (John Melesky)</option>
<option value="sample.hireswalk">&nbsp; Random HiRes (John Melesky)</option>
<option value="sample.sierpinski">&nbsp; Sierpinski Triangles (Kevin Miller)</option>
<option value="sample.stringart">&nbsp; String Art (Chris Heric)</option>
<option value="sample.paint">&nbsp; Drawing Program (Brian Broker)</option>
<option value="sample.scribble">&nbsp; Scribble (William Simms)</option>
<option value="sample.connections">&nbsp; Connections (Gregg Buntin)</option>
<option value="sample.squiggle">&nbsp; Squiggle (Gregg Buntin)</option>
<option value="sample.boys_surface">&nbsp; Boy's Surface (Lukas Innig)</option>
<option value="sample.gaussian">&nbsp; Gaussian Distribution 2D (John Russ)</option>
<option value="sample.bitmaps">&nbsp; Bitmap Images (Brian Broker)</option>
<option value="sample.mandelbrot">&nbsp; Mandelbrot Set (c/o Gregory Lewis)</option>
<option value="sample.mandelbrot2">&nbsp; Mandelbrot Set in Color</option>
<option value="sample.steve">&nbsp; Steve (Nicola Foggi)</option>
<option value="sample.logo">&nbsp; Apple Logo (Brendan Robert)</option>
<option disabled>____________________________________________</option>
<option disabled>Other</option> <option disabled>Other</option>
<option value="sample.primes">Prime Sieve (Kevin Miller)</option>
<option value="sample.february">February Surprise (Antti Pirskanen)</option>
<option value="sample.hellosine">Hello World Sine Wave (Jamie Beu)</option>
<option value="sample.bodymass">Body Mass Index Calculator (Tim Dwyer)</option>
<option disabled>---- Traveller RPG Utilities ----</option> <option value="sample.primes">&nbsp; Prime Sieve (Kevin Miller)</option>
<option value="TRADER C">TRADER</option> <option value="sample.february">&nbsp; February Surprise (Antti Pirskanen)</option>
<option value="sample.sectorgen">Traveller Sector Generator</option> <option value="sample.hellosine">&nbsp; Hello World Sine Wave (Jamie Beu)</option>
<option value="sample.zhorelay">Zhodani Relay Station Placement</option> <option value="sample.bodymass">&nbsp; Body Mass Index Calculator (Tim Dwyer)</option>
<option value="sample.readsector">Read Sector File</option>
<option disabled>____________________________________________</option>
<option disabled>Traveller RPG Utilities</option>
<option value="TRADER C">&nbsp; TRADER</option>
<option value="sample.sectorgen">&nbsp; Traveller Sector Generator</option>
<option value="sample.zhorelay">&nbsp; Zhodani Relay Station Placement</option>
<option value="sample.readsector">&nbsp; Read Sector File</option>
</select> </select>
<!-- Source code editor inserted here --> <!-- Source code editor inserted here -->
@ -111,12 +118,13 @@ By <a href="mailto:inexorabletash@gmail.com">Joshua Bell</a>
<form id="submission" method="post" enctype="text/plain" action="mailto:inexorabletash@gmail.com?subject=Applesoft%20Sample%20Submission"> <form id="submission" method="post" enctype="text/plain" action="mailto:inexorabletash@gmail.com?subject=Applesoft%20Sample%20Submission">
<textarea name="source" id="source" style="display: none;"> <textarea name="source" id="source" style="display: none;">
</textarea> </textarea>
<button id="btn_save" title="Save">&#x1f4be;</button>
<button id="btn_load" title="Load">&#x1f4c2;</button>
<input type="submit" id="btn_share" value="Share your sample!"> <button id="btn_save" title="Save as a file">&#x1F4BE; Save</button>
<input type="button" id="show_paper" value="Show output" title="Echo all output to a &quot;print-out&quot;, so you can copy/paste"> <button id="btn_load" title="Load a file">&#x1F4C2; Load</button>
<input type="button" id="hide_paper" value="Hide output" title="Hide the &quot;print-out&quot;"> <button id="btn_share" title="Share by email">&#x1F4E9; Share</button>
<button id="show_paper" title="Echo all output to a &quot;print-out&quot;, so you can copy/paste">&#x1F4C3; Show output</button>
<button id="hide_paper" title="Hide the &quot;print-out&quot;">&#x1F6AB; Hide output</button>
</form> </form>
</div> </div>

38
index.js
View File

@ -1,7 +1,7 @@
window.addEventListener('DOMContentLoaded', function () { window.addEventListener('DOMContentLoaded', function() {
var $ = function (s) { return document.querySelector(s); }; var $ = function(s) { return document.querySelector(s); };
$('#lb_files').selectedIndex = 0; $('#lb_files').selectedIndex = 0;
@ -39,7 +39,7 @@ window.addEventListener('DOMContentLoaded', function () {
var hires2 = new HiRes($('#hires2'), 280, 192); var hires2 = new HiRes($('#hires2'), 280, 192);
var display = { var display = {
state: { graphics: false, full: true, page1: true, lores: true }, state: { graphics: false, full: true, page1: true, lores: true },
setState: function (state, value /* ... */) { setState: function(state, value /* ... */) {
var args = Array.prototype.slice.call(arguments); var args = Array.prototype.slice.call(arguments);
while (args.length) { while (args.length) {
state = args.shift(); state = args.shift();
@ -72,26 +72,26 @@ window.addEventListener('DOMContentLoaded', function () {
height: '100%' height: '100%'
}); });
} else { } else {
editor = (function () { editor = (function() {
var textArea = document.createElement('textarea'); var textArea = document.createElement('textarea');
$('#editorframe').appendChild(textArea); $('#editorframe').appendChild(textArea);
textArea.style.width = '598px'; textArea.style.width = '598px';
textArea.style.height = '384px'; textArea.style.height = '384px';
return { return {
getValue: function () { getValue: function() {
return textArea.value; return textArea.value;
}, },
setValue: function (value) { setValue: function(value) {
textArea.value = value; textArea.value = value;
}, },
setCursor: function (line, column) { setCursor: function(line, column) {
// TODO: Implement me! // TODO: Implement me!
} }
}; };
}()); }());
} }
$('#btn_share').onclick = function () { $('#btn_share').onclick = function(e) {
// Load up the hidden text area with the current source // Load up the hidden text area with the current source
$('#source').value = getSource(); $('#source').value = getSource();
}; };
@ -105,7 +105,9 @@ window.addEventListener('DOMContentLoaded', function () {
} }
var program; var program;
$('#btn_run').addEventListener('click', function () { $('#btn_run').addEventListener('click', function(e) {
e.preventDefault();
dos.reset(); dos.reset();
tty.reset(); tty.reset();
tty.autoScroll = true; tty.autoScroll = true;
@ -132,18 +134,20 @@ window.addEventListener('DOMContentLoaded', function () {
hires2: hires2, hires2: hires2,
lores: lores, lores: lores,
display: display, display: display,
paddle: function (n) { return pdl[n]; } paddle: function(n) { return pdl[n]; }
}); });
setTimeout(driver, 0); setTimeout(driver, 0);
}); });
$('#btn_stop').addEventListener('click', function () { $('#btn_stop').addEventListener('click', function(e) {
e.preventDefault();
tty.reset(); // cancel any blocking input tty.reset(); // cancel any blocking input
stopped = true; stopped = true;
updateUI(); updateUI();
}); });
$('#lb_files').addEventListener('change', function () { $('#lb_files').addEventListener('change', function() {
var sel = $('#lb_files'); var sel = $('#lb_files');
loadFile('samples/' + sel.value + ".txt", setSource); loadFile('samples/' + sel.value + ".txt", setSource);
}); });
@ -179,11 +183,13 @@ window.addEventListener('DOMContentLoaded', function () {
// Add a "printer" on demand // Add a "printer" on demand
var printer = null; var printer = null;
var paper = $('#paper'); var paper = $('#paper');
$('#show_paper').addEventListener('click', function () { $('#show_paper').addEventListener('click', function(e) {
e.preventDefault();
document.body.classList.add('printout'); document.body.classList.add('printout');
printer = new Printer(tty, paper); printer = new Printer(tty, paper);
}); });
$('#hide_paper').addEventListener('click', function () { $('#hide_paper').addEventListener('click', function(e) {
e.preventDefault();
document.body.classList.remove('printout'); document.body.classList.remove('printout');
printer.close(); printer.close();
printer = null; printer = null;
@ -191,7 +197,7 @@ window.addEventListener('DOMContentLoaded', function () {
// Mouse-as-Joystick // Mouse-as-Joystick
var wrapper = $('#screen-wrapper'); var wrapper = $('#screen-wrapper');
wrapper.addEventListener('mousemove', function (e) { wrapper.addEventListener('mousemove', function(e) {
var rect = wrapper.getBoundingClientRect(), var rect = wrapper.getBoundingClientRect(),
x = e.clientX - rect.left, y = e.clientY - rect.top; x = e.clientX - rect.left, y = e.clientY - rect.top;
function clamp(n, min, max) { return n < min ? min : n > max ? max : n; } function clamp(n, min, max) { return n < min ? min : n > max ? max : n; }
@ -264,7 +270,7 @@ window.addEventListener('DOMContentLoaded', function () {
var url = encodeURI(filename); // not encodeURIComponent, so paths can be specified var url = encodeURI(filename); // not encodeURIComponent, so paths can be specified
var async = true; var async = true;
req.open("GET", url, async); req.open("GET", url, async);
req.onreadystatechange = function () { req.onreadystatechange = function() {
if (req.readyState === XMLHttpRequest.DONE) { if (req.readyState === XMLHttpRequest.DONE) {
if (req.status === 200 || req.status === 0) { if (req.status === 200 || req.status === 0) {
callback(req.responseText); callback(req.responseText);