rendering a board of squares

src/tessellate.js

@@ -14,81 +14,90 @@ export {DrawCircle, DrawHexagon, DrawSquare};
 import Cell from './cell.js';
 export {Cell};
 
-import ExWhyZee from './exWhyZee.js';
+//import ExWhy from './exWhy.js';
+//import ExWhyZee from './exWhyZee.js';
+import CartographerXY from './cartographerXY.js';
+
+const DEFAULTS = {
+	tap: utils.noop,
+	draw: utils.noop,
+	pointyTop: false,
+};
 
 export default class Tessellate {
 	constructor(settings) {
 		['tap', 'draw', 'drawMap', 'move', 'zoom'].map(method => {this[method] = this[method].bind(this)});
 
-		this.tapCB = settings.tap || utils.noop;
-		this.drawCB = settings.draw || utils.noop;
-		this.element = document.querySelector(settings.element);
+		this.settings = utils.extend(DEFAULTS, settings);
+		this.settings.element = this.settings.element instanceof HTMLElement ? this.settings.element :
+			document.querySelector(this.settings.element);
 
 		this.sketch = new Sketch({
-			element: this.element,
+			element: this.settings.element,
 			draw: this.draw
 		});
 
 		this.onTap = new OnTap({
-			element: this.element,
+			element: this.settings.element,
 			tap: this.tap,
 			move: this.move,
 			zoom: this.zoom
 		});
 
 		this.map = [];
-		this.xyz = new ExWhyZee({
-			pointyTop: true,
+		this.cartographer = new CartographerXY({
+			pointyTop: this.settings.pointyTop,
 			originX: this.sketch.getContext().canvas.width / 2,
 			originY: this.sketch.getContext().canvas.height / 2
 		});
 
 		this.circle = new DrawCircle();
 		this.hexagon = new DrawHexagon();
+		this.square = new DrawSquare();
 	}
 
 	tap(event) {
 		let point = new Point(event.offsetX, event.offsetY);
-		let hex = this.xyz.pixelToHex(point);
+		let tile = this.cartographer.pixelToTile(point);
 
 		let tap = {
 			event,
 			point,
-			hex
+			tile
 		};
 
-		this.tapCB(tap);
+		this.settings.tap(tap);
 	}
 
 	move(event) {
-		this.xyz.move(event);
+		this.cartographer.move(event);
 	}
 
 	zoom(event) {
-		this.xyz.zoom(event);
+		this.cartographer.zoom(event);
 	}
 
 	drawMap(context) {
-		let scale = this.xyz.getScale();
+		let scale = this.cartographer.getScale();
 		let upperLeft = new Point(0, 0);
 		let lowerRight = new Point(context.canvas.width, context.canvas.height);
-		let hexagons = this.xyz.boundingBox(upperLeft, lowerRight);
+		let tiles = this.cartographer.boundingBox(upperLeft, lowerRight);
 
-		let height = hexagons.length;
+		let height = tiles.length;
 		for (let r=0; r<height; r++) {
-			let width = hexagons[r].length;
+			let width = tiles[r].length;
 
 			for (let c=0; c<width; c++) {
-				let hex = hexagons[r][c];
-				let hexPoint = this.xyz.hexToPixel(hex);
+				let tile = tiles[r][c];
+				let tilePoint = this.cartographer.tileToPixel(tile);
 
-				if (!this.map[hex.getX()]) this.map[hex.getX()] = [];
+				if (!this.map[tile.getX()]) this.map[tile.getX()] = [];
 
-				if (!this.map[hex.getX()][hex.getY()]) {
-					this.map[hex.getX()][hex.getY()] = new Cell({
-						x: hex.getX(),
-						y: hex.getY(),
-						pointyTop: true,
+				if (!this.map[tile.getX()][tile.getY()]) {
+					this.map[tile.getX()][tile.getY()] = new Cell({
+						x: tile.getX(),
+						y: tile.getY(),
+						pointyTop: this.settings.pointyTop,
 						red: utils.random(255),
 						green: utils.random(255),
 						blue: utils.random(255),
@@ -97,7 +106,7 @@ export default class Tessellate {
 					});
 				}
 
-				this.hexagon.filled(context, scale, hexPoint.getX(), hexPoint.getY(), this.map[hex.getX()][hex.getY()]);
+				this.square.filled(context, scale, tilePoint.getX(), tilePoint.getY(), this.map[tile.getX()][tile.getY()]);
 
 //				let cell = map.getXY(hex.getX(), hex.getY());
 //
@@ -115,6 +124,6 @@ export default class Tessellate {
 
 		this.drawMap(context);
 
-		this.drawCB(context);
+		this.settings.draw(context);
 	}
 }