diff --git a/1 - Blockcode/resources/js/elements.js b/1 - Blockcode/resources/js/elements.js
index b948ad4..4642be0 100644
--- a/1 - Blockcode/resources/js/elements.js
+++ b/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 = `
+
+
+
+
+
+ `;
+ }
+ 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 = `
+
+
+
+
+
+ `;
+ }
+ action(Painter) {
+ Painter.brushColor = this.value;
+ Painter.canvasContext.fillStyle = this.value;
+ Painter.canvasContext.strokeStyle = this.value;
+ }
}
diff --git a/1 - Blockcode/resources/js/globals.js b/1 - Blockcode/resources/js/globals.js
index 311114d..2e20cb9 100644
--- a/1 - Blockcode/resources/js/globals.js
+++ b/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;
diff --git a/1 - Blockcode/resources/js/script-runner.js b/1 - Blockcode/resources/js/script-runner.js
index b631f1e..6b8f283 100644
--- a/1 - Blockcode/resources/js/script-runner.js
+++ b/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 );