created brush related elms; added brush resret logic; refactored naming convention around brush lift state

1 - Blockcode/resources/js/elements.js

@@ -93,7 +93,7 @@ class ForwardElement extends BaseInputScriptElement {
         Painter.x1    = x2
         Painter.y1    = y2
 
-        if (Painter.isPenLifted) {
+        if (Painter.isBrushLifted) {
             Painter.canvasContext.moveTo(x2, y2);
             return;
         }
@@ -117,7 +117,7 @@ class BackElement extends BaseInputScriptElement {
         Painter.x1    = x2
         Painter.y1    = y2
 
-        if (Painter.isPenLifted) {
+        if (Painter.isBrushLifted) {
             Painter.canvasContext.moveTo(x2, y2);
             return;
         }
@@ -143,13 +143,13 @@ class CircleElement extends BaseInputScriptElement {
 class PenUpElement extends BaseScriptElement {
     get prefix()    { return 'Pen Up'; }
     constructor()   { super(); }
-    action(Painter) { Painter.isPenLifted = true; }
+    action(Painter) { Painter.isBrushLifted = true; }
 }
 
 class PenDownElement extends BaseScriptElement {
     get prefix()    { return 'Pen Down'; }
     constructor()   { super(); }
-    action(Painter) { Painter.isPenLifted = false; }
+    action(Painter) { Painter.isBrushLifted = false; }
 }
 
 class BackToCenterElement extends BaseScriptElement {
@@ -162,7 +162,42 @@ class BackToCenterElement extends BaseScriptElement {
     }
 }
 
-class HideTurtleElement extends BaseScriptElement {
-    get prefix()  { return 'Hide Turtle'; }
-    constructor() { super(); }
+class BrushSizeElement extends BaseInputScriptElement {
+    get prefix()        { return 'Brush Size'; }
+    get defaultValue()  { return 24; }
+    get postfix()       { return 'px'; }
+    constructor()       { super(); }
+    connectedCallback() {
+        this.innerHTML = `
+            <li>
+                <label>${this.prefix}</label>
+                <input type="text" class="script-input" value="${this.defaultValue}"/>
+                <label>${this.postfix}</label>
+            </li>
+        `;
+    }
+    action(Painter) {
+        Painter.brushSize                 = this.value;
+        Painter.canvasContext.lineWidth   = this.value;
+    }
+}
+
+class BrushColorElement extends BaseInputScriptElement {
+    get prefix()        { return 'Brush Color'; }
+    get defaultValue()  { return '#000000'; }
+    constructor()       { super(); }
+    connectedCallback() {
+        this.innerHTML = `
+            <li>
+                <label>${this.prefix}</label>
+                <input type="color" class="script-input" value="${this.defaultValue}"/>
+                <label>${this.postfix}</label>
+            </li>
+        `;
+    }
+    action(Painter) {
+        Painter.brushColor                = this.value;
+        Painter.canvasContext.fillStyle   = this.value;
+        Painter.canvasContext.strokeStyle = this.value;
+    }
 }

1 - Blockcode/resources/js/globals.js

@@ -1,23 +1,29 @@
 const ScriptElms = {
-    "repeat-element": RepeatElement,
-    "left-element": LeftElement,
-    "right-element": RightElement,
-    "forward-element": ForwardElement,
-    "back-element": BackElement,
+    "brush-size-element": BrushSizeElement,
+    "brush-color-element": BrushColorElement,
+    "back-to-center-element": BackToCenterElement,
     "circle-element": CircleElement,
     "pen-up-element": PenUpElement,
     "pen-down-element": PenDownElement,
-    "back-to-center-element": BackToCenterElement,
-    "hider-turtle-element": HideTurtleElement
+    "repeat-element": RepeatElement,
+    "forward-element": ForwardElement,
+    "back-element": BackElement,
+    "left-element": LeftElement,
+    "right-element": RightElement
 };
 
-let Painter = {
+const BRUSH_SIZE  = 2;
+const BRUSH_COLOR = "#000000";
+
+let Painter       = {
     canvas:        null,
     canvasContext: null,
+    brushSize:     BRUSH_SIZE,
+    brushColor:    BRUSH_COLOR,
     rotation:      0,
     x1:            0,
     y1:            0,
-    isPenLifted:   false
+    isBrushLifted: false
 }
 
 let draggedElm    = null;

1 - Blockcode/resources/js/script-runner.js

@@ -1,20 +1,40 @@
 const setupScriptRunner = () => {
-    canvasContext = canvas.getContext("2d");
+    canvasContext         = canvas.getContext("2d");
     Painter.canvas        = canvas;
     Painter.canvasContext = canvasContext;
 }
 
 const runScript = () => {
-    setToCenter();
-    resetRotation();
-    clearCanvas();
-
+    resetCanvasState();
     for (const elm of script.children) {
         elm.action(Painter);
     }
 }
 
-const setToCenter = () => {
+const resetCanvasState = () => {
+    resetRotation();
+    resetCanvasBrush();
+    clearCanvas();
+}
+
+const resetCanvasBrush = () => {
+    setDefaultBrushSize();
+    setDefaultBrushColor();
+    setBrushToCenter();
+}
+
+const setDefaultBrushSize = () => {
+    Painter.brushSize                 = BRUSH_SIZE;
+    Painter.canvasContext.lineWidth   = BRUSH_SIZE;
+}
+
+const setDefaultBrushColor = () => {
+    Painter.brushColor                = BRUSH_COLOR;
+    Painter.canvasContext.fillStyle   = BRUSH_COLOR;
+    Painter.canvasContext.strokeStyle = BRUSH_COLOR;
+}
+
+const setBrushToCenter = () => {
     Painter.x1 = Painter.canvas.width  / 2
     Painter.y1 = Painter.canvas.height / 2
     Painter.canvasContext.moveTo( Painter.x1, Painter.y1 );