6502
/
8bitworkshop
mirror of https://github.com/sehugg/8bitworkshop.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

basic: fixed transcript bottom, moved teletype to file, added label field to errors

This commit is contained in:
Steven Hugg 2020-08-09 20:40:17 -05:00
parent 8b7b581217
commit 52a1107114
7 changed files with 309 additions and 298 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
css/ui.css
View File

@ -168,6 +168,9 @@ div.has-errors {
div.is-busy-unused {
background-color: #8888bb !important;
}
#error_alert {
max-width: 45%;
}
#error_alert_msg {
margin-right: 2em;
}
@ -585,6 +588,10 @@ div.asset_toolbar {
user-select: text;
font-family: Verdana, Geneva, sans-serif;
}
.transcript-bottom {
background-color: #fff;
width: 100%;
}
.transcript-split {
padding: 0.5em;
background: #eee;

22
src/common/basic/compiler.ts
View File

@ -31,7 +31,7 @@ export enum TokenType {
export type ExprTypes = BinOp | UnOp | IndOp | Literal;
export type Expr = ExprTypes & SourceLocated;
export type Expr = ExprTypes; // & SourceLocated;
export type Opcode = string;
@ -52,7 +52,7 @@ export interface UnOp {
expr: Expr;
}
export interface IndOp extends SourceLocated {
export interface IndOp {
name: string;
args: Expr[];
}
@ -282,7 +282,7 @@ export class BASICParser {
compileError(msg: string, loc?: SourceLocation) {
if (!loc) loc = this.peekToken().$loc;
// TODO: pass SourceLocation to errors
this.errors.push({path:loc.path, line:loc.line, msg:msg});
this.errors.push({path:loc.path, line:loc.line, label:loc.label, msg:msg});
throw new CompileError(`${msg} (line ${loc.line})`); // TODO: label too?
}
dialectError(what: string, loc?: SourceLocation) {
@ -371,13 +371,13 @@ export class BASICParser {
this.tokens.push({
str: s,
type: i,
$loc: { path: this.path, line: this.lineno, start: m.index, end: m.index+s.length }
$loc: { path: this.path, line: this.lineno, start: m.index, end: m.index+s.length, label: this.curlabel }
});
break;
}
}
}
this.eol = { type: TokenType.EOL, str: "", $loc: { path: this.path, line: this.lineno, start: line.length } };
this.eol = { type: TokenType.EOL, str: "", $loc: { path: this.path, line: this.lineno, start: line.length, label: this.curlabel } };
}
parse() : BASICLine {
var line = {label: null, stmts: []};
@ -386,8 +386,8 @@ export class BASICParser {
this.parseOptLabel(line);
if (this.tokens.length) {
line.stmts = this.parseCompoundStatement();
this.curlabel = null;
}
this.curlabel = null;
}
return line;
}
@ -446,7 +446,7 @@ export class BASICParser {
this.compileError(`There should be a command here.`);
return null;
}
if (stmt) stmt.$loc = { path: cmdtok.$loc.path, line: cmdtok.$loc.line, start: cmdtok.$loc.start, end: this.peekToken().$loc.start };
if (stmt) stmt.$loc = { path: cmdtok.$loc.path, line: cmdtok.$loc.line, start: cmdtok.$loc.start, end: this.peekToken().$loc.start, label: this.curlabel };
return stmt;
}
parseVarSubscriptOrFunc(): IndOp {
@ -460,7 +460,7 @@ export class BASICParser {
args = this.parseExprList();
this.expectToken(')', `There should be another expression or a ")" here.`);
}
return { name: tok.str, args: args, $loc: tok.$loc };
return { name: tok.str, args: args };
default:
this.compileError(`There should be a variable name here.`);
break;
@ -513,9 +513,9 @@ export class BASICParser {
case TokenType.Int:
case TokenType.Float1:
case TokenType.Float2:
return { value: this.parseNumber(tok.str), $loc: tok.$loc };
return { value: this.parseNumber(tok.str)/*, $loc: tok.$loc*/ };
case TokenType.String:
return { value: stripQuotes(tok.str), $loc: tok.$loc };
return { value: stripQuotes(tok.str)/*, $loc: tok.$loc*/ };
case TokenType.Ident:
if (tok.str == 'NOT') {
let expr = this.parsePrimary();
@ -682,7 +682,7 @@ export class BASICParser {
this.pushbackToken(prompt);
promptstr = "";
}
return { command:'INPUT', prompt:{ value: promptstr, $loc: prompt.$loc }, args:this.parseLexprList() };
return { command:'INPUT', prompt:{ value: promptstr }, args:this.parseLexprList() };
}
stmt__DATA() : DATA_Statement {
return { command:'DATA', datums:this.parseExprList() };

2
src/common/basic/run.ts
View File

@ -62,7 +62,7 @@ runtime.resume = function() {
rl.close();
}
} catch (e) {
console.log("### " + e.message);
console.log(`### ${e.message} (line ${runtime.getCurrentSourceLocation().label})`);
process.exit(1);
}
});

251
src/common/teletype.ts Normal file
View File

@ -0,0 +1,251 @@
export class TeleType {
page: HTMLElement;
fixed: boolean;
scrolldiv: HTMLElement;
curline: HTMLElement;
curstyle: number;
reverse: boolean;
col: number;
row: number;
lines: HTMLElement[];
ncharsout : number;
constructor(page: HTMLElement, fixed: boolean) {
this.page = page;
this.fixed = fixed;
this.clear();
}
clear() {
this.curline = null;
this.curstyle = 0;
this.reverse = false;
this.col = 0;
this.row = -1;
this.lines = [];
this.ncharsout = 0;
$(this.page).empty();
this.showPrintHead(true);
}
ensureline() {
if (this.curline == null) {
this.curline = this.lines[++this.row];
if (this.curline == null) {
this.curline = $('<div class="transcript-line"/>')[0];
this.page.appendChild(this.curline);
this.lines[this.row] = this.curline;
this.scrollToBottom();
}
}
}
flushline() {
this.curline = null;
}
// TODO: support fixed-width window (use CSS grid?)
addtext(line: string, style: number) {
this.ensureline();
if (line.length) {
// in fixed mode, only do characters
if (this.fixed && line.length > 1) {
for (var i = 0; i < line.length; i++)
this.addtext(line[i], style);
return;
}
var span = $("<span/>").text(line);
for (var i = 0; i < 8; i++) {
if (style & (1 << i))
span.addClass("transcript-style-" + (1 << i));
}
if (this.reverse) span.addClass("transcript-reverse");
//span.data('vmip', this.vm.pc);
// in fixed mode, we can overwrite individual characters
if (this.fixed && line.length == 1 && this.col < this.curline.childNodes.length) {
this.curline.replaceChild(span[0], this.curline.childNodes[this.col]);
} else {
span.appendTo(this.curline);
}
this.col += line.length;
// TODO: wrap @ 80 columns
this.ncharsout += line.length;
this.movePrintHead(true);
}
}
newline() {
this.flushline();
this.col = 0;
this.movePrintHead(false);
}
// TODO: bug in interpreter where it tracks cursor position but maybe doesn't do newlines?
print(val: string) {
// split by newlines
var lines = val.split("\n");
for (var i = 0; i < lines.length; i++) {
if (i > 0) this.newline();
this.addtext(lines[i], this.curstyle);
}
}
move_cursor(col: number, row: number) {
if (!this.fixed) return; // fixed windows only
// ensure enough row elements
while (this.lines.length <= row) {
this.flushline();
this.ensureline();
}
// select row element
this.curline = this.lines[row];
this.row = row;
// get children in row (individual text cells)
var children = $(this.curline).children();
// add whitespace to line?
if (children.length > col) {
this.col = col;
} else {
while (this.col < col)
this.addtext(' ', this.curstyle);
}
}
setrows(size: number) {
if (!this.fixed) return; // fixed windows only
// truncate rows?
var allrows = $(this.page).children();
if (allrows.length > size) {
this.flushline();
allrows.slice(size).remove();
this.lines = this.lines.slice(0, size);
//this.move_cursor(0,0);
}
}
formfeed() {
this.newline();
}
scrollToBottom() {
this.curline.scrollIntoView();
}
movePrintHead(printing: boolean) {
/*
var ph = $("#printhead"); // TODO: speed?
var x = $(this.page).position().left + this.col * ($(this.page).width() / 80) - 200;
ph.stop().animate({left: x}, {duration:20});
//ph.offset({left: x});
if (printing) ph.addClass("printing");
else ph.removeClass("printing");
*/
}
showPrintHead(show: boolean) {
/*
var ph = $("#printhead"); // TODO: speed?
if (show) ph.show(); else ph.hide();
*/
}
}
export class TeleTypeWithKeyboard extends TeleType {
input : HTMLInputElement;
keepinput : boolean = true;
focused : boolean = true;
scrolling : number = 0;
waitingfor : string;
resolveInput;
uppercaseOnly : boolean;
constructor(page: HTMLElement, fixed: boolean, input: HTMLInputElement) {
super(page, fixed);
this.input = input;
this.input.onkeypress = (e) => {
this.sendkey(e);
};
this.input.onfocus = (e) => {
this.focused = true;
console.log('inputline gained focus');
};
$("#workspace").on('click', (e) => {
this.focused = false;
console.log('inputline lost focus');
});
this.page.onclick = (e) => {
this.input.focus();
};
this.hideinput();
}
clear() {
super.clear();
this.hideinput();
}
focusinput() {
this.ensureline();
this.showPrintHead(false);
// don't steal focus while editing
if (this.keepinput)
$(this.input).css('visibility', 'visible');
else
$(this.input).appendTo(this.curline).show()[0];
this.scrollToBottom();
if (this.focused) {
$(this.input).focus();
}
// change size
if (this.waitingfor == 'char')
$(this.input).addClass('transcript-input-char')
else
$(this.input).removeClass('transcript-input-char')
}
hideinput() {
this.showPrintHead(true);
if (this.keepinput)
$(this.input).css('visibility','hidden');
else
$(this.input).appendTo($(this.page).parent()).hide();
}
clearinput() {
this.input.value = '';
this.waitingfor = null;
}
sendkey(e: KeyboardEvent) {
if (this.waitingfor == 'line') {
if (e.key == "Enter") {
this.sendinput(this.input.value.toString());
}
} else if (this.waitingfor == 'char') {
this.sendchar(e.keyCode);
e.preventDefault();
}
}
sendinput(s: string) {
if (this.resolveInput) {
if (this.uppercaseOnly)
s = s.toUpperCase();
this.addtext(s, 4);
this.flushline();
this.resolveInput(s.split(',')); // TODO: should parse quotes, etc
this.resolveInput = null;
}
this.clearinput();
this.hideinput(); // keep from losing input handlers
}
sendchar(code: number) {
this.sendinput(String.fromCharCode(code));
}
ensureline() {
if (!this.keepinput) $(this.input).hide();
super.ensureline();
}
scrollToBottom() {
// TODO: fails when lots of lines are scrolled
if (this.scrolldiv) {
this.scrolling++;
var top = $(this.page).height() + $(this.input).height();
$(this.scrolldiv).stop().animate({scrollTop: top}, 200, 'swing', () => {
this.scrolling = 0;
this.ncharsout = 0;
});
} else {
this.input.scrollIntoView();
}
}
isBusy() {
// stop execution when scrolling and printing non-newlines
return this.scrolling > 0 && this.ncharsout > 0;
}
}

5
src/common/workertypes.ts
View File

@ -77,11 +77,8 @@ export interface WorkerMessage extends WorkerBuildStep {
buildsteps:WorkerBuildStep[]
}
export interface WorkerError {
line:number,
export interface WorkerError extends SourceLocation {
msg:string,
path?:string
//TODO
}
export interface CodeListing {

6
src/ide/ui.ts
View File

@ -1069,7 +1069,7 @@ async function updateSelector() {
function getErrorElement(err : WorkerError) {
var span = $('<p/>');
if (err.path != null) {
var s = err.line ? `(${err.path}:${err.line})` : `(${err.path})`
var s = err.line ? err.label ? `(${err.path} @ ${err.label})` : `(${err.path}:${err.line})` : `(${err.path})`
var link = $('<a/>').text(s);
var path = err.path;
// TODO: hack because examples/foo.a only gets listed as foo.a
@ -1887,7 +1887,9 @@ function globalErrorHandler(msgevent) {
var err = msgevent.error;
var werr : WorkerError = {msg:msg, line:0};
if (err instanceof EmuHalt && err.$loc) {
werr = {msg:msg, path:err.$loc.path, line:err.$loc.line}; // TODO: get start/end columns
werr = Object.create(err.$loc);
werr.msg = msg;
console.log(werr);
}
showErrorAlert([werr]);
}

314
src/platform/basic.ts
View File

@ -4,309 +4,59 @@ import { PLATFORMS, AnimationTimer, EmuHalt } from "../common/emu";
import { loadScript } from "../ide/ui";
import { BASICRuntime } from "../common/basic/runtime";
import { BASICProgram } from "../common/basic/compiler";
import { TeleTypeWithKeyboard } from "../common/teletype";
const BASIC_PRESETS = [
{ id: 'hello.bas', name: 'Hello World' }
];
class TeleType {
page: HTMLElement;
fixed: boolean;
scrolldiv: HTMLElement;
curline: HTMLElement;
curstyle: number;
reverse: boolean;
col: number;
row: number;
lines: HTMLElement[];
ncharsout : number;
constructor(page: HTMLElement, fixed: boolean) {
this.page = page;
this.fixed = fixed;
this.clear();
}
clear() {
this.curline = null;
this.curstyle = 0;
this.reverse = false;
this.col = 0;
this.row = -1;
this.lines = [];
this.ncharsout = 0;
$(this.page).empty();
this.showPrintHead(true);
}
ensureline() {
if (this.curline == null) {
this.curline = this.lines[++this.row];
if (this.curline == null) {
this.curline = $('<div class="transcript-line"/>')[0];
this.page.appendChild(this.curline);
this.lines[this.row] = this.curline;
this.scrollToBottom();
}
}
}
flushline() {
this.curline = null;
}
// TODO: support fixed-width window (use CSS grid?)
addtext(line: string, style: number) {
this.ensureline();
if (line.length) {
// in fixed mode, only do characters
if (this.fixed && line.length > 1) {
for (var i = 0; i < line.length; i++)
this.addtext(line[i], style);
return;
}
var span = $("<span/>").text(line);
for (var i = 0; i < 8; i++) {
if (style & (1 << i))
span.addClass("transcript-style-" + (1 << i));
}
if (this.reverse) span.addClass("transcript-reverse");
//span.data('vmip', this.vm.pc);
// in fixed mode, we can overwrite individual characters
if (this.fixed && line.length == 1 && this.col < this.curline.childNodes.length) {
this.curline.replaceChild(span[0], this.curline.childNodes[this.col]);
} else {
span.appendTo(this.curline);
}
this.col += line.length;
// TODO: wrap @ 80 columns
this.ncharsout += line.length;
this.movePrintHead(true);
}
}
newline() {
this.flushline();
this.col = 0;
this.movePrintHead(false);
}
// TODO: bug in interpreter where it tracks cursor position but maybe doesn't do newlines?
print(val: string) {
// split by newlines
var lines = val.split("\n");
for (var i = 0; i < lines.length; i++) {
if (i > 0) this.newline();
this.addtext(lines[i], this.curstyle);
}
}
move_cursor(col: number, row: number) {
if (!this.fixed) return; // fixed windows only
// ensure enough row elements
while (this.lines.length <= row) {
this.flushline();
this.ensureline();
}
// select row element
this.curline = this.lines[row];
this.row = row;
// get children in row (individual text cells)
var children = $(this.curline).children();
// add whitespace to line?
if (children.length > col) {
this.col = col;
} else {
while (this.col < col)
this.addtext(' ', this.curstyle);
}
}
setrows(size: number) {
if (!this.fixed) return; // fixed windows only
// truncate rows?
var allrows = $(this.page).children();
if (allrows.length > size) {
this.flushline();
allrows.slice(size).remove();
this.lines = this.lines.slice(0, size);
//this.move_cursor(0,0);
}
}
formfeed() {
this.newline();
}
scrollToBottom() {
this.curline.scrollIntoView();
}
movePrintHead(printing: boolean) {
/*
var ph = $("#printhead"); // TODO: speed?
var x = $(this.page).position().left + this.col * ($(this.page).width() / 80) - 200;
ph.stop().animate({left: x}, {duration:20});
//ph.offset({left: x});
if (printing) ph.addClass("printing");
else ph.removeClass("printing");
*/
}
showPrintHead(show: boolean) {
/*
var ph = $("#printhead"); // TODO: speed?
if (show) ph.show(); else ph.hide();
*/
}
}
class TeleTypeWithKeyboard extends TeleType {
input : HTMLInputElement;
runtime : BASICRuntime;
platform : BASICPlatform;
keepinput : boolean = true;
focused : boolean = true;
scrolling : number = 0;
waitingfor : string;
resolveInput;
constructor(page: HTMLElement, fixed: boolean, input: HTMLInputElement, platform: BASICPlatform) {
super(page, fixed);
this.input = input;
this.platform = platform;
this.runtime = platform.runtime;
this.runtime.input = async (prompt:string, nargs:number) => {
return new Promise( (resolve, reject) => {
if (prompt != null) {
this.addtext(prompt, 0);
this.addtext('? ', 0);
this.waitingfor = 'line';
} else {
this.waitingfor = 'char';
}
this.focusinput();
this.resolveInput = resolve;
});
}
this.input.onkeypress = (e) => {
this.sendkey(e);
};
this.input.onfocus = (e) => {
this.focused = true;
console.log('inputline gained focus');
};
$("#workspace").on('click', (e) => {
this.focused = false;
console.log('inputline lost focus');
});
this.page.onclick = (e) => {
this.input.focus();
};
this.hideinput();
}
clear() {
super.clear();
this.hideinput();
}
focusinput() {
this.ensureline();
this.showPrintHead(false);
// don't steal focus while editing
if (this.keepinput)
$(this.input).css('visibility', 'visible');
else
$(this.input).appendTo(this.curline).show()[0];
this.scrollToBottom();
if (this.focused) {
$(this.input).focus();
}
// change size
if (this.waitingfor == 'char')
$(this.input).addClass('transcript-input-char')
else
$(this.input).removeClass('transcript-input-char')
}
hideinput() {
this.showPrintHead(true);
if (this.keepinput)
$(this.input).css('visibility','hidden');
else
$(this.input).appendTo($(this.page).parent()).hide();
}
clearinput() {
this.input.value = '';
this.waitingfor = null;
}
sendkey(e: KeyboardEvent) {
if (this.waitingfor == 'line') {
if (e.key == "Enter") {
this.sendinput(this.input.value.toString());
}
} else if (this.waitingfor == 'char') {
this.sendchar(e.keyCode);
e.preventDefault();
}
}
sendinput(s: string) {
if (this.resolveInput) {
if (this.platform.program.opts.uppercaseOnly)
s = s.toUpperCase();
this.addtext(s, 4);
this.flushline();
this.resolveInput(s.split(',')); // TODO: should parse quotes, etc
this.resolveInput = null;
}
this.clearinput();
this.hideinput(); // keep from losing input handlers
}
sendchar(code: number) {
this.sendinput(String.fromCharCode(code));
}
ensureline() {
if (!this.keepinput) $(this.input).hide();
super.ensureline();
}
scrollToBottom() {
// TODO: fails when lots of lines are scrolled
if (this.scrolldiv) {
this.scrolling++;
$(this.scrolldiv).stop().animate({scrollTop: $(this.page).height()}, 200, 'swing', () => {
this.scrolling = 0;
this.ncharsout = 0;
});
} else {
this.input.scrollIntoView();
}
}
isBusy() {
// stop execution when scrolling and printing non-newlines
return this.scrolling > 0 && this.ncharsout > 0;
}
}
class BASICPlatform implements Platform {
mainElement: HTMLElement;
program: BASICProgram;
runtime: BASICRuntime;
timer: AnimationTimer;
tty: TeleTypeWithKeyboard;
ips: number = 500;
ips: number = 1000;
clock: number = 0;
hotReload: boolean = false;
debugstop: boolean = false; // TODO: should be higher-level support
constructor(mainElement: HTMLElement) {
//super();
this.mainElement = mainElement;
mainElement.style.overflowY = 'auto';
mainElement.style.backgroundColor = 'white';
}
async start() {
await loadScript('./gen/common/basic/runtime.js');
await loadScript('./gen/common/teletype.js');
// create runtime
this.runtime = new BASICRuntime();
this.runtime.reset();
// create divs
var parent = this.mainElement;
// TODO: input line should be always flush left
var gameport = $('<div id="gameport" style="margin-top:80vh"/>').appendTo(parent);
var gameport = $('<div id="gameport" style="margin-top:calc(100vh - 8em)"/>').appendTo(parent);
var windowport = $('<div id="windowport" class="transcript transcript-style-2"/>').appendTo(gameport);
var inputline = $('<input class="transcript-input transcript-style-2" type="text" style="max-width:95%"/>').appendTo(parent);
var inputport = $('<div id="inputport" class="transcript-bottom"/>').appendTo(gameport);
var inputline = $('<input class="transcript-input transcript-style-2" type="text" style="max-width:95%"/>').appendTo(inputport);
//var printhead = $('<div id="printhead" class="transcript-print-head"/>').appendTo(parent);
//var printshield = $('<div id="printhead" class="transcript-print-shield"/>').appendTo(parent);
this.tty = new TeleTypeWithKeyboard(windowport[0], true, inputline[0] as HTMLInputElement, this);
this.tty = new TeleTypeWithKeyboard(windowport[0], true, inputline[0] as HTMLInputElement);
this.tty.scrolldiv = parent;
this.runtime.input = async (prompt:string, nargs:number) => {
return new Promise( (resolve, reject) => {
if (prompt != null) {
this.tty.addtext(prompt, 0);
this.tty.addtext('? ', 0);
this.tty.waitingfor = 'line';
} else {
this.tty.waitingfor = 'char';
}
this.tty.focusinput();
this.tty.resolveInput = resolve;
});
}
this.timer = new AnimationTimer(60, this.animate.bind(this));
this.resize = () => {
// set font size proportional to window width
@ -361,6 +111,7 @@ class BASICPlatform implements Platform {
var didExit = this.runtime.exited;
this.program = data;
this.runtime.load(data);
this.tty.uppercaseOnly = this.program.opts.uppercaseOnly;
// only reset if we exited, otherwise we try to resume
if (!this.hotReload || didExit) this.reset();
}
@ -370,13 +121,12 @@ class BASICPlatform implements Platform {
}
reset(): void {
var didExit = this.runtime.exited;
this.tty.clear();
this.runtime.reset();
// restart program if it's finished, otherwise reset and hold
if (didExit) {
if (this.debugstop)
this.break();
else
this.resume();
}
}
pause(): void {
@ -385,6 +135,7 @@ class BASICPlatform implements Platform {
resume(): void {
this.clock = 0;
this.debugstop = false;
this.timer.start();
}
@ -436,14 +187,17 @@ class BASICPlatform implements Platform {
this.onBreakpointHit = null;
}
step() {
this.pause();
this.advance();
this.break();
if (this.tty.waitingfor == null) {
this.pause();
this.advance();
this.break();
}
}
break() {
// TODO: don't highlight text in editor
// TODO: why doesn't highlight go away on resume?
if (this.onBreakpointHit) {
//TODO: this.onBreakpointHit(this.saveState());
this.onBreakpointHit(this.saveState());
this.debugstop = true;
}
}
}