Refactor Maps (#2)

src/tessellate.js

@@ -2,6 +2,9 @@
 import * as utils from './utils';
 export {utils};
 
+import * as funky from './funky';
+export {funky};
+
 import OnTap from './onTap.js';
 import Point from './point.js';
 import Sketch from './sketch.js';
@@ -25,6 +28,8 @@ import {
 	BOARD_STYLES,
 	FLAT, POINTY,
 	TILE_ORIENTATIONS,
+	FILL, OUTLINE,
+	DRAW_STYLES,
 } from './consts.js';
 
 const TILES = {
@@ -61,9 +66,18 @@ export default class Tessellate {
 	static get TILE_STYLES()       {return TILE_STYLES}
 	static get BOARD_STYLES()      {return BOARD_STYLES}
 	static get TILE_ORIENTATIONS() {return TILE_ORIENTATIONS}
+	static get DRAW_STYLES()       {return DRAW_STYLES}
 
 	constructor(settings) {
-		['seedTiles', 'tap', 'draw', 'drawMap', 'move', 'zoom'].map(method => {this[method] = this[method].bind(this)});
+		[
+			'tap',
+			'move',
+			'zoom',
+			'pixelToTile',
+			'tileToPixel',
+			'getTilePoints',
+			'draw']
+		.map(method => {this[method] = this[method].bind(this)});
 
 		this.settings = Object.assign(DEFAULTS, settings);
 		this.settings.element = this.settings.element instanceof HTMLElement ? this.settings.element :
@@ -98,21 +112,6 @@ export default class Tessellate {
 		});
 	}
 
-	seedTiles() {
-		this.map[0] = [];
-
-		this.map[0][0] = new Cell({
-			x: 0,
-			y: 0,
-			orientation: this.settings.orientation,
-			red: 0,
-			green: 0,
-			blue: 0,
-			alpha: 75/100,
-			scale: 9/10,
-		});
-	}
-
 	tap(event) {
 		let point = new Point(event.offsetX, event.offsetY);
 		let tile = this.cartographer.pixelToTile(point);
@@ -134,47 +133,41 @@ export default class Tessellate {
 		this.cartographer.zoom(event);
 	}
 
-	drawMap(context) {
-		const scale = this.cartographer.getScale();
+	pixelToTile(x, y) {
+		return this.cartographer.pixelToTile(x, y);
+	}
 
-		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);
+	tileToPixel(x, y, z) {
+		return this.cartographer.tileToPixel(x, y, z);
+	}
 
-		const tiles = this.cartographer.boundingBox(upperLeft, upperRight, lowerLeft, lowerRight);
+	getTilePoints({upperLeftX, upperLeftY, lowerRightX, lowerRightY}) {
+		const upperLeft =  new Point(upperLeftX, upperLeftY);
+		const upperRight = new Point(lowerRightX, 0);
+		const lowerLeft =  new Point(0, lowerRightY);
+		const lowerRight = new Point(lowerRightX, lowerRightY);
 
-		tiles.forEach(row => row.forEach(tile => {
-			const tilePoint = this.cartographer.tileToPixel(tile);
-
-			if (!this.map[tile.getX()]) this.map[tile.getX()] = [];
-
-			if (!this.map[tile.getX()][tile.getY()]) {
-				this.map[tile.getX()][tile.getY()] = new Cell({
-					x: tile.getX(),
-					y: tile.getY(),
-					orientation: this.settings.orientation,
-					red:   utils.random(64, 192),
-					green: utils.random(64, 192),
-					blue:  utils.random(64, 192),
-					alpha: 0.75,
-					scale: utils.random(7, 9) / 10
-				});
-			}
-
-			TILES[this.settings.tile].filled(context, scale, tilePoint.getX(), tilePoint.getY(), this.map[tile.getX()][tile.getY()]);
-		}));
+		return funky.flatten(this.cartographer.boundingBox(upperLeft, upperRight, lowerLeft, lowerRight));
 	}
 
 	draw(context) {
-		let canvas = context.canvas;
-		let width = canvas.width;
-		let height = canvas.height;
+		const canvas = context.canvas;
+		const width = canvas.width;
+		const height = canvas.height;
 
 		context.clearRect(0, 0, width, height);
 
-		this.drawMap(context);
+		this.settings.draw({
+			context,
 
-		this.settings.draw(context);
+			scale: this.cartographer.getScale(),
+
+			tilePoints: this.getTilePoints({
+				upperLeftX: 0,
+				upperLeftY: 0,
+				lowerRightX: width,
+				lowerRightY: height
+			}),
+		});
 	}
 }