Add color property

Author: mbolis

app.js

@@ -130,8 +130,10 @@ <h2>Properties:</h2>
           </blockquote>
         </div>
         <dl>
-          <dt>foreground: <em>color string</em></dt>
+          <dt>color: <em>color string</em></dt>
           <dd>Set the color of the pencil.</dd>
+          <dt>foreground: <em>color string</em></dt>
+          <dd>Set the color of all the strokes on paper.</dd>
           <dt>background: <em>color string</em></dt>
           <dd>Set the color of the paper. Set to "transparent" to revert to the default background.</dd>
           <dt>speed: <em>number</em></dt>

app.js.map

@@ -1,13 +1,13 @@
-import MainLoop from "mainloop.js"
+import MainLoop from "mainloop.js";
 
 import CodeMirror from "codemirror";
 import "codemirror/lib/codemirror.css";
 import "codemirror/mode/javascript/javascript";
 
+import * as disk from "./disk";
 import { Animation, Frame } from "./frames";
-import { Interpreter, Instruction } from "./interpreter";
 import { DEFAULT_SCALE, Painter } from "./gui";
-import * as disk from "./disk";
+import { Instruction, Interpreter } from "./interpreter";
 import * as output from "./output";
 import "./style.css";
 
@@ -403,15 +403,19 @@ function ensureRunning() {
     try {
       interpreter = new Interpreter(txtCode.value);
     } catch (err) {
-      //console.error(err)
       setState("done");
 
-      const [, message, line, ch] = /(.*) \((\d+):(\d+)\)\s*$/.exec(err.message);
-      const startPos = CodeMirror.Pos(+line, +ch);
-      const token = editor.getTokenAt(startPos, true);
-      startPos.line--;
-      const endPos = { ...startPos, ch: startPos.ch + token.string.length };
-      markErrorPos(startPos, endPos, `${message} '${token.string}' (${line}:${ch})`);
+      const errMessage = /(.*) \((\d+):(\d+)\)\s*$/.exec(err.message);
+      if (errMessage) {
+        const [, message, line, ch] = errMessage;
+        const startPos = CodeMirror.Pos(+line, +ch);
+        const token = editor.getTokenAt(startPos, true);
+        startPos.line--;
+        const endPos = { ...startPos, ch: startPos.ch + token.string.length };
+        markErrorPos(startPos, endPos, `${message} '${token.string}' (${line}:${ch})`);
+      } else {
+        output.error(err);
+      }
 
       throw err;
     }

index.html

@@ -1,12 +1,12 @@
-import JSInterpreter from "js-interpreter";
 import { Node } from "acorn";
+import JSInterpreter from "js-interpreter";
 import { deg2rad, Degrees, Vector2d } from "./geometry";
 
 import { Animation, Frame } from "./frames";
-import { Stroke } from "./scene";
 import * as output from "./output";
+import { Stroke } from "./scene";
 
-import MainLoop from "mainloop.js" // FIXME: we don't want you here!
+import MainLoop from "mainloop.js"; // FIXME: we don't want you here!
 import { Bezier } from "./bezier";
 
 export type State = {
@@ -147,7 +147,15 @@ export class Interpreter {
   }
 
   private readonly init: InitFunc = (interpreter, scope) => {
-    setFn("forward", (distance: number, color?: string) => {
+    let currentColor = "black";
+    prop("color", {
+      get: fn(() => currentColor),
+      set: fn((c: any) => {
+        currentColor = String(c);
+      }),
+    });
+
+    setFn("forward", (distance: number, color = currentColor) => {
       this.animation = new Animation(MOVE_DURATION * distance / 10, (delta: number, keyFrame: Frame) => {
         const from = keyFrame.position, angle = keyFrame.facingRadians;
         const to = from.plus(Vector2d.polar(angle, distance * delta));
@@ -158,7 +166,7 @@ export class Interpreter {
         return keyFrame.with({ position: to });
       });
     });
-    setFn("back", (distance: number, color?: string) => {
+    setFn("back", (distance: number, color = currentColor) => {
       this.animation = new Animation(MOVE_DURATION * distance / 10, (delta: number, keyFrame: Frame) => {
         const from = keyFrame.position, angle = keyFrame.facingRadians;
         const to = from.plus(Vector2d.polar(angle, -distance * delta));