embedlines for errors; demo.html

This commit is contained in:
Steven Hugg 2018-07-26 09:43:49 -04:00
parent 2759db6920
commit 5756f3b467
9 changed files with 179 additions and 23 deletions

View File

@ -37,7 +37,8 @@
visibility: visible;
}
.tooltiperror {
color: #ff3333;
color: #ff6666;
font-weight: bold;
}
.tooltiperrorline {
color:#ffcccc;

154
demo.html Normal file
View File

@ -0,0 +1,154 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
if (window.location.host.endsWith('8bitworkshop.com')) {
ga('create', 'UA-54497476-9', 'auto');
ga('set', 'anonymizeIp', true);
ga('send', 'pageview');
}
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="redir.html">8bitworkshop.com</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<form class="navbar-form navbar-right">
<button type="button" class="btn btn-default" aria-label="Continue to IDE Button">
Continue to IDE
<span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span>
</button>
</form>
</div><!--/.navbar-collapse -->
</div>
</nav>
<div class="jumbotron">
<div class="container">
<div class="col-md-6">
<h1>Write 8-bit code in your browser.</h1>
<p>
Ever wanted to be an old-school game programmer?<br>
Learn how classic game hardware worked.</br>
Write code and see it run instantly.
</p>
<p><a class="btn btn-primary btn-lg" href="redir.html" role="button">Continue to 8bitworkshop IDE
<span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span>
</a></p>
</div>
<div class="col-md-6">
<br><br>
<img class="img-responsive" src="images/ide_screenshot1.png">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
<h2><a href="redir.html?platform=vcs">Atari 2600</a></h2>
<p>
Learn how to program the
<a href="redir.html?platform=vcs">Atari 2600</a>
with dozens of fully commented examples.
Our 6502 assembler runs as you type and flags any errors.
We've got debugging tools too; single step through your code and use our CPU Cycle Analyzer to
develop that perfect Stella kernel.
</p>
</div>
<div class="col-md-4">
<h2>Arcade Games</h2>
<p>
You can develop your own games on classic arcade game hardware, using our in-browser C compiler.
Platforms include
<a href="redir.html?platform=vicdual">VIC Dual</a>,
<a href="redir.html?platform=mw8080bw">Midway 8080</a>,
<a href="redir.html?platform=galaxian-scramble">Galaxian/Scramble</a>,
<a href="redir.html?platform=vector-z80color">Atari Vector</a>,
and
<a href="redir.html?platform=williams-z80">Williams</a>.
</p>
</div>
<div class="col-md-4">
<h2>Hardware Design</h2>
<p>
Software not enough for you?
Use our
<a href="redir.html?platform=verilog">Verilog</a>
compiler to design a 8-bit game platform.
We'll run your design in real time in the browser, showing the output on a simulated CRT.
Plenty of examples are available.
</p>
</div>
</div>
<h1 class="text-center">Learn More With a Book!</h1>
<div class="container">
<div class="row">
<div class="col-md-3">
<a target="_blank" href="https://www.amazon.com/gp/product/1541021304/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=1541021304&linkCode=as2&tag=pzp-20&linkId=c149f6365c0a676065eb6d7c5f8dd6ae">
<img border="0" src="//ws-na.amazon-adsystem.com/widgets/q?_encoding=UTF8&MarketPlace=US&ASIN=1541021304&ServiceVersion=20070822&ID=AsinImage&WS=1&Format=_SL250_&tag=pzp-20" ></a>
<img src="//ir-na.amazon-adsystem.com/e/ir?t=pzp-20&l=am2&o=1&a=1541021304" />
</div>
<div class="col-md-8">
<a target="_blank" href="https://www.amazon.com/gp/product/1541021304/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=1541021304&linkCode=as2&tag=pzp-20&linkId=c149f6365c0a676065eb6d7c5f8dd6ae">
<h3>Making Games For The Atari 2600</h3>
</a>
<p>The Atari 2600 was released in 1977, and now there's finally a book about how to write games for it! You'll learn about the 6502 CPU, NTSC frames, scanlines, cycle counting, players, missiles, collisions, procedural generation, pseudo-3D, and more. While using the manual, take advantage of our Web-based IDE to write 6502 assembly code, and see your code run instantly in the browser. We'll cover the same programming tricks that master programmers used to make classic games. Create your own graphics and sound, and share your games with friends!</p>
</div>
</div>
<div class="row">
<div class="col-md-3">
<a target="_blank" href="https://www.amazon.com/gp/product/1545484759/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=1545484759&linkCode=as2&tag=pzp-20&linkId=2f3c42111bffe3466830939fff4053fc">
<img border="0" src="//ws-na.amazon-adsystem.com/widgets/q?_encoding=UTF8&MarketPlace=US&ASIN=1545484759&ServiceVersion=20070822&ID=AsinImage&WS=1&Format=_SL250_&tag=pzp-20" ></a>
<img src="//ir-na.amazon-adsystem.com/e/ir?t=pzp-20&l=am2&o=1&a=1545484759" />
</div>
<div class="col-md-8">
<a target="_blank" href="https://www.amazon.com/gp/product/1545484759/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=1545484759&linkCode=as2&tag=pzp-20&linkId=2f3c42111bffe3466830939fff4053fc">
<h3>Making 8-Bit Arcade Games in C</h3>
</a>
<p>With this book, you'll learn all about the hardware of Golden Age 8-bit arcade games produced in the late 1970s to early 1980s. We'll learn how to use the C programming language to write code for the Z80 CPU. The following arcade platforms are covered: * Midway 8080 (Space Invaders) * VIC Dual (Carnival) * Galaxian/Scramble (Namco) * Atari Color Vector * Williams (Defender, Robotron) We'll describe how to create video and sound for each platform. Use the online 8bitworkshop IDE to compile your C programs and play them right in the browser!</p>
</div>
</div>
</div>
<hr>
<footer>
<p>&copy; 2018 Puzzling Plans LLC.</p>
</footer>
</div> <!-- /container -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

BIN
images/ide_screenshot1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 279 KiB

View File

@ -130,16 +130,18 @@ if (window.location.host.endsWith('8bitworkshop.com')) {
<li>
<a class="dropdown-item dropdown-link" target="_book_a2600" href="https://www.amazon.com/gp/product/1541021304/ref=as_li_qf_sp_asin_il_tl?ie=UTF8&tag=pzp-20&camp=1789&creative=9325&linkCode=as2&creativeASIN=B01N4DSRIZ&linkId=04d39e274c06e6c93b93d20a9a977111">
<img src="images/book_a2600.png"/>
&nbsp;&nbsp;<b>Making Games For The Atari 2600</b> (Print/Kindle Editions)
&nbsp;&nbsp;<b>Making Games For The Atari 2600</b><!-- (Print/Kindle Editions)-->
</a>
<a class="dropdown-item dropdown-link" target="_book_arcade" href="https://www.amazon.com/gp/product/1545484759/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=1545484759&linkCode=as2&tag=pzp-20&linkId=b27709c022d2ebe639e90316d9f4fd5b">
<img src="images/book_arcade.png"/>
&nbsp;&nbsp;<b>Making 8-bit Arcade Games in C</b> (Print Edition)
&nbsp;&nbsp;<b>Making 8-bit Arcade Games in C</b><!-- (Print Edition)-->
</a>
<!--
<a class="dropdown-item dropdown-link" target="_book_arcade_pdf" href="https://gumroad.com/l/8bitworkshoparcadebook">
<img src="images/book_arcade.png"/>
&nbsp;&nbsp;<b>Making 8-bit Arcade Games in C</b> (Downloadable PDF)
</a>
-->
</li>
</ul>
</span>

View File

@ -51,7 +51,7 @@ EXITDOS equ $03D0
; Build Options
; ------------------------------------
NOISY equ 1 ; 0 = Sound off, 1 = Sound on
NOISY equ 0 ; 0 = Sound off, 1 = Sound on
CHARSET equ 1 ; 0 = Olde Skoole, 1 = Pixel, 2 = Inverse, 3 = Small O's, 4 = Enhanced
INIT_PATTERN equ 0 ; 0 = Glider gun, 1 = "Random", 2 = Edge test
TEST_PERF equ 0 ; 0 = Normal, 1 = Instrument for emulator cycle counting (forces Glider gun layout and sound off)

View File

@ -2,7 +2,7 @@
import { FileData, Dependency, SourceLine, SourceFile, CodeListing, CodeListingMap, WorkerError, WorkerResult } from "./workertypes";
type BuildResultCallback = (result:WorkerResult, intermediate:boolean) => void;
type BuildResultCallback = (result:WorkerResult) => void;
type BuildStatusCallback = (busy:boolean) => void;
type LoadFilesCallback = (err:string, result?:Dependency[]) => void;
type IterateFilesCallback = (path:string, data:FileData) => void;
@ -39,8 +39,7 @@ export class CodeProject {
this.pendingWorkerMessages = 0;
if (e.data && !e.data.unchanged) {
this.processBuildResult(e.data);
var intermediate = false; // TODO?
if (this.callbackBuildResult) this.callbackBuildResult(e.data, intermediate); // call with data when changed
if (this.callbackBuildResult) this.callbackBuildResult(e.data); // call with data when changed
}
};
}

View File

@ -86,8 +86,8 @@ function initProject() {
current_project = new CodeProject(newWorker(), platform_id, platform, store);
projectWindows = new ProjectWindows($("#workspace")[0], current_project);
current_project.callbackGetRemote = $.get;
current_project.callbackBuildResult = (result:WorkerResult, intermediate:boolean) => {
setCompileOutput(result, intermediate);
current_project.callbackBuildResult = (result:WorkerResult) => {
setCompileOutput(result);
refreshWindowList();
};
current_project.callbackBuildStatus = (busy:boolean) => {
@ -96,7 +96,7 @@ function initProject() {
} else {
toolbar.removeClass("is-busy");
toolbar.removeClass("has-errors"); // may be added in next callback
projectWindows.setErrors(null, false);
projectWindows.setErrors(null);
}
$('#compile_spinner').css('visibility', busy ? 'visible' : 'hidden');
};
@ -376,10 +376,10 @@ function updateSelector() {
});
}
function setCompileOutput(data: WorkerResult, intermediate:boolean) {
function setCompileOutput(data: WorkerResult) {
// errors? mark them in editor
if (data.errors && data.errors.length > 0) {
projectWindows.setErrors(data.errors, intermediate);
projectWindows.setErrors(data.errors);
toolbar.addClass("has-errors");
} else {
// process symbol map
@ -400,7 +400,7 @@ function setCompileOutput(data: WorkerResult, intermediate:boolean) {
} catch (e) {
console.log(e);
toolbar.addClass("has-errors");
projectWindows.setErrors([{line:0,msg:e+""}], false);
projectWindows.setErrors([{line:0,msg:e+""}]);
current_output = null;
}
/* TODO?

View File

@ -14,7 +14,7 @@ export interface ProjectView {
getSourceFile?() : SourceFile;
setGutterBytes?(line:number, s:string) : void;
openBitmapEditorAtCursor?() : void;
markErrors?(errors:WorkerError[], intermediate?:boolean) : void;
markErrors?(errors:WorkerError[], embedlines:boolean) : void;
clearErrors?() : void;
};
@ -111,9 +111,9 @@ export class SourceEditor implements ProjectView {
getPath() : string { return this.path; }
addErrorMarker(line:number, msg:string, intermediate:boolean) {
addErrorMarker(line:number, msg:string, embedlines:boolean) {
// add line widget w/ error msg
if (!intermediate) {
if (embedlines) {
var errspan = document.createElement("span");
errspan.setAttribute("class", "tooltiperrorline");
errspan.appendChild(document.createTextNode(msg));
@ -133,7 +133,7 @@ export class SourceEditor implements ProjectView {
this.editor.setGutterMarker(line, "gutter-info", div);
}
markErrors(errors:WorkerError[], intermediate?:boolean) {
markErrors(errors:WorkerError[], embedlines:boolean) {
// TODO: move cursor to error line if offscreen?
this.clearErrors();
var numLines = this.editor.lineCount();
@ -142,7 +142,7 @@ export class SourceEditor implements ProjectView {
if (!info.path || this.path.endsWith(info.path)) {
var line = info.line-1;
if (line < 0 || line >= numLines) line = 0;
this.addErrorMarker(line, info.msg, intermediate);
this.addErrorMarker(line, info.msg, embedlines);
}
}
}

View File

@ -46,7 +46,7 @@ export class ProjectWindows {
this.activewnd = wnd;
$(div).show();
this.refresh();
this.refreshErrors(false);
this.refreshErrors();
}
this.activeid = id;
return wnd;
@ -66,15 +66,15 @@ export class ProjectWindows {
this.activewnd.tick();
}
setErrors(errors:WorkerError[], intermediate:boolean) {
setErrors(errors:WorkerError[]) {
this.lasterrors = errors;
this.refreshErrors(intermediate);
this.refreshErrors();
}
refreshErrors(intermediate:boolean) {
refreshErrors(embedlines?:boolean) {
if (this.activewnd && this.activewnd.markErrors) {
if (this.lasterrors && this.lasterrors.length)
this.activewnd.markErrors(this.lasterrors, intermediate);
this.activewnd.markErrors(this.lasterrors, embedlines);
else
this.activewnd.clearErrors();
}