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 -->
<div style="float: left; margin: 5px;">
Enter code: &nbsp;&nbsp;
<input type="button" value="Run" id="btn_run">
<input type="button" value="Stop" id="btn_stop" disabled="disabled">
<button id="btn_run">&#x25B6; Run</button>
<button id="btn_stop" disabled>&#x25FC; Stop</button>
<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 disabled>---- Tests ----</option>
<option value="sample.unittests">Unit Tests</option>
<option value="sample.keyboard">Keyboard Test</option>
<option value="sample.charset">Charset Test</option>
<option disabled>____________________________________________</option>
<option disabled>Tests</option>
<option value="sample.unittests">&nbsp; Unit Tests</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 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 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 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="TRADER C">TRADER</option>
<option value="sample.sectorgen">Traveller Sector Generator</option>
<option value="sample.zhorelay">Zhodani Relay Station Placement</option>
<option value="sample.readsector">Read Sector File</option>
<option value="sample.primes">&nbsp; Prime Sieve (Kevin Miller)</option>
<option value="sample.february">&nbsp; February Surprise (Antti Pirskanen)</option>
<option value="sample.hellosine">&nbsp; Hello World Sine Wave (Jamie Beu)</option>
<option value="sample.bodymass">&nbsp; Body Mass Index Calculator (Tim Dwyer)</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>
<!-- 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">
<textarea name="source" id="source" style="display: none;">
</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!">
<input type="button" id="show_paper" value="Show output" title="Echo all output to a &quot;print-out&quot;, so you can copy/paste">
<input type="button" id="hide_paper" value="Hide output" title="Hide the &quot;print-out&quot;">
<button id="btn_save" title="Save as a file">&#x1F4BE; Save</button>
<button id="btn_load" title="Load a file">&#x1F4C2; Load</button>
<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>
</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;
@ -39,7 +39,7 @@ window.addEventListener('DOMContentLoaded', function () {
var hires2 = new HiRes($('#hires2'), 280, 192);
var display = {
state: { graphics: false, full: true, page1: true, lores: true },
setState: function (state, value /* ... */) {
setState: function(state, value /* ... */) {
var args = Array.prototype.slice.call(arguments);
while (args.length) {
state = args.shift();
@ -72,26 +72,26 @@ window.addEventListener('DOMContentLoaded', function () {
height: '100%'
});
} else {
editor = (function () {
editor = (function() {
var textArea = document.createElement('textarea');
$('#editorframe').appendChild(textArea);
textArea.style.width = '598px';
textArea.style.height = '384px';
return {
getValue: function () {
getValue: function() {
return textArea.value;
},
setValue: function (value) {
setValue: function(value) {
textArea.value = value;
},
setCursor: function (line, column) {
setCursor: function(line, column) {
// TODO: Implement me!
}
};
}());
}
$('#btn_share').onclick = function () {
$('#btn_share').onclick = function(e) {
// Load up the hidden text area with the current source
$('#source').value = getSource();
};
@ -105,7 +105,9 @@ window.addEventListener('DOMContentLoaded', function () {
}
var program;
$('#btn_run').addEventListener('click', function () {
$('#btn_run').addEventListener('click', function(e) {
e.preventDefault();
dos.reset();
tty.reset();
tty.autoScroll = true;
@ -132,18 +134,20 @@ window.addEventListener('DOMContentLoaded', function () {
hires2: hires2,
lores: lores,
display: display,
paddle: function (n) { return pdl[n]; }
paddle: function(n) { return pdl[n]; }
});
setTimeout(driver, 0);
});
$('#btn_stop').addEventListener('click', function () {
$('#btn_stop').addEventListener('click', function(e) {
e.preventDefault();
tty.reset(); // cancel any blocking input
stopped = true;
updateUI();
});
$('#lb_files').addEventListener('change', function () {
$('#lb_files').addEventListener('change', function() {
var sel = $('#lb_files');
loadFile('samples/' + sel.value + ".txt", setSource);
});
@ -179,11 +183,13 @@ window.addEventListener('DOMContentLoaded', function () {
// Add a "printer" on demand
var printer = null;
var paper = $('#paper');
$('#show_paper').addEventListener('click', function () {
$('#show_paper').addEventListener('click', function(e) {
e.preventDefault();
document.body.classList.add('printout');
printer = new Printer(tty, paper);
});
$('#hide_paper').addEventListener('click', function () {
$('#hide_paper').addEventListener('click', function(e) {
e.preventDefault();
document.body.classList.remove('printout');
printer.close();
printer = null;
@ -191,7 +197,7 @@ window.addEventListener('DOMContentLoaded', function () {
// Mouse-as-Joystick
var wrapper = $('#screen-wrapper');
wrapper.addEventListener('mousemove', function (e) {
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; }
@ -264,7 +270,7 @@ window.addEventListener('DOMContentLoaded', function () {
var url = encodeURI(filename); // not encodeURIComponent, so paths can be specified
var async = true;
req.open("GET", url, async);
req.onreadystatechange = function () {
req.onreadystatechange = function() {
if (req.readyState === XMLHttpRequest.DONE) {
if (req.status === 200 || req.status === 0) {
callback(req.responseText);