fixes for pointy-top square boards

src/tessellate.js

@@ -43,7 +43,7 @@ export default class Tessellate {
 	static get BOARD_STYLES () {return {HEX, SQUARE}}
 
 	constructor(settings) {
-		['tap', 'draw', 'drawMap', 'move', 'zoom'].map(method => {this[method] = this[method].bind(this)});
+		['seedTiles', 'tap', 'draw', 'drawMap', 'move', 'zoom'].map(method => {this[method] = this[method].bind(this)});
 
 		this.settings = utils.extend(DEFAULTS, settings);
 		this.settings.element = this.settings.element instanceof HTMLElement ? this.settings.element :
@@ -62,6 +62,7 @@ export default class Tessellate {
 		});
 
 		this.map = [];
+		this.seedTiles();
 
 		const boardSettings = {
 			pointyTop: this.settings.pointyTop,
@@ -72,6 +73,54 @@ export default class Tessellate {
 		this.cartographer = this.settings.board === HEX ? new CartographerXYZ(boardSettings) : new CartographerXY(boardSettings);
 	}
 
+	seedTiles() {
+		this.map[0] = [];
+//		this.map[1] = [];
+//		this.map[-1] = [];
+//		this.map[-5] = [];
+
+		this.map[0][0] = new Cell({
+			x: 0,
+			y: 0,
+			pointyTop: this.settings.pointyTop,
+			red: 0,
+			green: 0,
+			blue: 0,
+			alpha: 75/100,
+			scale: 9/10,
+		});
+//		this.map[1][1] = new Cell({
+//			x: 1,
+//			y: 1,
+//			pointyTop: this.settings.pointyTop,
+//			red: 0,
+//			green: 0,
+//			blue: 255,
+//			alpha: 90/100,
+//			scale: 9/10,
+//		});
+//		this.map[-1][-1] = new Cell({
+//			x: -1,
+//			y: -1,
+//			pointyTop: this.settings.pointyTop,
+//			red: 255,
+//			green: 0,
+//			blue: 0,
+//			alpha: 90/100,
+//			scale: 9/10,
+//		});
+//		this.map[-5][5] = new Cell({
+//			x: -5,
+//			y: 5,
+//			pointyTop: this.settings.pointyTop,
+//			red: 0,
+//			green: 255,
+//			blue: 0,
+//			alpha: 90/100,
+//			scale: 9/10,
+//		});
+	}
+
 	tap(event) {
 		let point = new Point(event.offsetX, event.offsetY);
 		let tile = this.cartographer.pixelToTile(point);
@@ -94,12 +143,16 @@ export default class Tessellate {
 	}
 
 	drawMap(context) {
-		let scale = this.cartographer.getScale();
-		let upperLeft = new Point(0, 0);
-		let lowerRight = new Point(context.canvas.width, context.canvas.height);
-		let tiles = this.cartographer.boundingBox(upperLeft, lowerRight);
+		const scale = this.cartographer.getScale();
 
-		let height = tiles.length;
+		const upperLeft = new Point(0, 0);
+		const upperRight = new Point(context.canvas.width, 0);
+		const lowerLeft = new Point(0, context.canvas.height);
+		const lowerRight = new Point(context.canvas.width, context.canvas.height);
+
+		const tiles = this.cartographer.boundingBox(upperLeft, upperRight, lowerLeft, lowerRight);
+
+		const height = tiles.length;
 		for (let r=0; r<height; r++) {
 			let width = tiles[r].length;
 
@@ -114,11 +167,11 @@ export default class Tessellate {
 						x: tile.getX(),
 						y: tile.getY(),
 						pointyTop: this.settings.pointyTop,
-						red: utils.random(255),
-						green: utils.random(255),
-						blue: utils.random(255),
-						alpha: utils.random(25, 75) / 100,
-						scale: utils.random(6,9)/10
+						red:   utils.random(64, 192),
+						green: utils.random(64, 192),
+						blue:  utils.random(64, 192),
+						alpha: 0.75,
+						scale: utils.random(7, 9) / 10
 					});
 				}