added tessellated map

src/tessellate.js

@@ -14,9 +14,11 @@ export {DrawCircle, DrawHexagon, DrawSquare};
 import Cell from './cell.js';
 export {Cell};
 
+import ExWhyZee from './exWhyZee.js';
+
 export default class Tessellate {
 	constructor(settings) {
-		['click', 'draw'].map(method => {this[method] = this[method].bind(this)});
+		['click', 'draw', 'drawMap'].map(method => {this[method] = this[method].bind(this)});
 
 		this.drawCB = settings.draw || utils.noop;
 		this.clickCB = settings.click || utils.noop;
@@ -31,12 +33,51 @@ export default class Tessellate {
 			element: this.element,
 			click: this.click
 		});
+
+		this.xyz = new ExWhyZee({
+			pointyTop: true,
+			originX: this.sketch.getContext().canvas.width / 2,
+			originY: this.sketch.getContext().canvas.height / 2
+		});
+
+		this.circle = new DrawCircle();
 	}
 
 	click(event) {
 		this.clickCB(event);
 	}
 
+	drawMap(context) {
+		let scale = this.xyz.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 height = hexagons.length;
+		for (let r=0; r<height; r++) {
+			let width = hexagons[r].length;
+
+			for (let c=0; c<width; c++) {
+				let hex = hexagons[r][c];
+				let hexPoint = this.xyz.hexToPixel(hex);
+
+				this.circle.outline(context, new Cell({
+					x: hexPoint.getX(),
+					y: hexPoint.getY(),
+					red: utils.random(255),
+					green: utils.random(255),
+					blue: utils.random(255),
+					alpha: utils.random(25, 75) / 100,
+					scale: scale * 0.8
+				}));
+
+//				let cell = map.getXY(hex.getX(), hex.getY());
+//
+//				hexTiles.filled(hexPoint.getX(), hexPoint.getY(), scale * 0.9, {color: cell.getColor()});
+			}
+		}
+	}
+
 	draw(context) {
 		let canvas = context.canvas;
 		let width = canvas.width;
@@ -44,6 +85,8 @@ export default class Tessellate {
 
 		context.clearRect(0, 0, width, height);
 
+		this.drawMap(context);
+
 		this.drawCB(context);
 	}
 }