more explicit names for draw<Shape>

src/drawSquare.js

@@ -0,0 +1,48 @@
+
+import {sqrt2} from './utils.js';
+
+export default class DrawSquare {
+	constructor(settings) {
+		this.squareX = [1, 1, -1, -1];
+		this.squareY = [1, -1, -1, 1];
+		this.diamondX = [sqrt2, 0, -sqrt2, 0];
+		this.diamondY = [0, -sqrt2, 0, sqrt2];
+	}
+
+	filled(context, cell) {
+		let x = cell.x;
+		let y = cell.y;
+		let scale = cell.scale;
+		let squareCornerX = cell.pointyTop ? this.diamondX : this.squareX;
+		let squareCornerY = cell.pointyTop ? this.diamondY : this.squareY;
+
+		context.beginPath();
+		context.moveTo(x + scale * squareCornerX[0], y + scale * squareCornerY[0]);
+		context.lineTo(x + scale * squareCornerX[1], y + scale * squareCornerY[1]);
+		context.lineTo(x + scale * squareCornerX[2], y + scale * squareCornerY[2]);
+		context.lineTo(x + scale * squareCornerX[3], y + scale * squareCornerY[3]);
+
+		context.fillStyle = cell.getColor();
+		context.fill();
+	}
+
+	outline(context, cell) {
+		let x = cell.x;
+		let y = cell.y;
+		let scale = cell.scale;
+		let squareCornerX = cell.pointyTop ? this.diamondX : this.squareX;
+		let squareCornerY = cell.pointyTop ? this.diamondY : this.squareY;
+
+		context.beginPath();
+		context.moveTo(x + scale * squareCornerX[0], y + scale * squareCornerY[0]);
+		context.lineTo(x + scale * squareCornerX[1], y + scale * squareCornerY[1]);
+		context.lineTo(x + scale * squareCornerX[2], y + scale * squareCornerY[2]);
+		context.lineTo(x + scale * squareCornerX[3], y + scale * squareCornerY[3]);
+		context.closePath();
+
+		context.lineWidth = cell.width;
+		context.strokeStyle = cell.getColor();
+		context.stroke();
+	}
+}
+