A big portion of your repo's code is targeting your particular UI. In order to make it easily reusable consider checking program options for program.init to make it more accesible.
Example
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Applesoft BASIC in Javascript</h1>
<!-- Source -->
<div style="float: left; margin: 5px;">
Enter code:
<button id="btn_run">▶ Run</button
<!-- Source code editor inserted here -->
<textarea name="source" id="source"></textarea>
</div>
<!-- Screen -->
<div id="frame" class="jsb-frame" style="float: left; margin: 5px;" tabIndex="0">
<div id="screen-wrapper" class="jsb-wrapper">
<div id="screen" class="jsb-tty"></div>
</div>
</div>
<script src="https://www.calormen.com/jsbasic/basic.js?2012-02-08"></script>
<script src="https://www.calormen.com/jsbasic/tty.js"></script>
JS
var stopped = true;
var frame = $('#frame');
var keyboard = frame;
var tty = new TTY($('#screen'), keyboard);
var program;
$('#btn_run').click(function(e) {
e.preventDefault();
try {
program = basic.compile($('#source').val());
} catch (e) {
alert(e);
return;
}
stopped = false;
updateUI();
program.init({
tty: tty
});
setTimeout(driver, 0);
});
function updateUI() {
$("#btn_run").disabled = stopped ? "disabled" : "";
}
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
}
}
A big portion of your repo's code is targeting your particular UI. In order to make it easily reusable consider checking program options for
program.initto make it more accesible.Example
HTML
JS