version bump

.babelrc

@@ -1,3 +0,0 @@
-{
-  "presets": ["env"]
-}

package.json

@@ -1,10 +1,11 @@
 {
   "name": "tessellate",
-  "version": "1.2.0",
+  "version": "1.4.1",
   "description": "",
   "main": "./public/js/tessellate.js",
   "scripts": {
-    "build": "webpack --mode production",
+    "build:dev": "webpack --mode development",
+    "build:prod": "webpack --mode production",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
@@ -18,10 +19,10 @@
   },
   "homepage": "https://gitea.daggertrout.com/mcdoh/Tessellate#README",
   "devDependencies": {
-    "babel-core": "^6.26.3",
-    "babel-loader": "^7.1.4",
-    "babel-preset-env": "^1.7.0",
-    "webpack": "^4.12.0",
-    "webpack-cli": "^3.0.8"
+    "@babel/core": "^7.2.2",
+    "@babel/preset-env": "^7.3.1",
+    "babel-loader": "^8.0.5",
+    "webpack": "^4.29.3",
+    "webpack-cli": "^3.2.3"
   }
 }

src/cartographer.js

@@ -38,6 +38,8 @@ export default class Cartographer {
 			'wrap',
 		]));
 
+		if (!this.width || !this.height) delete this.wrap;
+
 		this.checkScale(this.settings.canvasHeight, this.settings.canvasWidth);
 
 		this.setOriginX(this.settings.canvasWidth, this.settings.centerX);

src/cartographerFlatXY.js

@@ -8,7 +8,9 @@ import Square from './square.js';
 
 const tilePointToSquare = ({tilePoint, mapPoint, pixelPoint}) => ({
 	tile: tilePoint instanceof Square ? tilePoint : new Square(tilePoint),
-	mapTile: mapPoint instanceof Square ? mapPoint : new Square(mapPoint),
+	mapTile: mapPoint instanceof Square ? mapPoint :
+		mapPoint ? new Square(mapPoint) :
+		mapPoint,
 	pixelPoint,
 });
 

src/cartographerFlatXYZ.js

@@ -8,7 +8,9 @@ import Point from './point.js';
 
 const tilePointToHex = ({tilePoint, mapPoint, pixelPoint}) => ({
 	tile: tilePoint instanceof Hex ? tilePoint : new Hex(tilePoint),
-	mapTile: mapPoint instanceof Hex ? mapPoint : new Hex(mapPoint),
+	mapTile: mapPoint instanceof Hex ? mapPoint :
+		mapPoint ? new Hex(mapPoint) :
+		mapPoint,
 	pixelPoint,
 });
 
@@ -210,6 +212,9 @@ export default class CartographerFlatXYZ extends Cartographer {
 					&& (!this.height || (y <= (Math.floor(x / 2) * -1) && (-y - Math.floor(x / 2)) < this.height));
 			}
 		}
+		else {
+			return true;
+		}
 	}
 
 	enforceBoundries ({tilePoint, pixelPoint}) {

src/cartographerPointyXY.js

@@ -8,7 +8,9 @@ import Point from './point.js';
 
 const tilePointToSquare = ({tilePoint, mapPoint, pixelPoint}) => ({
 	tile: tilePoint instanceof Square ? tilePoint : new Square(tilePoint),
-	mapTile: mapPoint instanceof Square ? mapPoint : new Square(mapPoint),
+	mapTile: mapPoint instanceof Square ? mapPoint :
+		mapPoint ? new Square(mapPoint) :
+		mapPoint,
 	pixelPoint,
 });
 

src/cartographerPointyXYZ.js

@@ -8,7 +8,9 @@ import Point from './point.js';
 
 const tilePointToHex = ({tilePoint, mapPoint, pixelPoint}) => ({
 	tile: tilePoint instanceof Hex ? tilePoint : new Hex(tilePoint),
-	mapTile: mapPoint instanceof Hex ? mapPoint : new Hex(mapPoint),
+	mapTile: mapPoint instanceof Hex ? mapPoint :
+		mapPoint ? new Hex(mapPoint) :
+		mapPoint,
 	pixelPoint,
 });
 
@@ -212,6 +214,9 @@ export default class CartographerPointyXYZ extends Cartographer {
 					&& (!this.height || (hex.y <= (Math.floor(hex.x / 2) * -1) && (-hex.y - Math.floor(hex.x / 2)) < this.height));
 			}
 		}
+		else {
+			return true;
+		}
 	}
 
 	enforceBoundries ({tilePoint, pixelPoint}) {

src/drawShapes.js

@@ -41,7 +41,7 @@ const DEFAULTS = {
 				red: 255,
 				blue: 255,
 				green: 255,
-				alpha: 0.8,
+				alpha: 0.9,
 			},
 		},
 		body: {
@@ -211,7 +211,7 @@ export default class DrawShapes {
 		});
 	}
 
-	pips (context, scale, x, y, cell) {
+	pips (context, scale, x, y, cell, alpha = 1) {
 		const {tileStyle, orientation, pips} = cell;
 
 		if (this.pipVertices[tileStyle]
@@ -225,7 +225,9 @@ export default class DrawShapes {
 			const scaleWidth = (scale * 2) * cell.scale;
 			const scaleHeight = (scale * 2) * cell.scale;
 
+			context.globalAlpha = alpha;
 			context.drawImage(this.pipCache.pips[pips], x - (scaleWidth / 2), y - (scaleHeight / 2), scaleWidth, scaleHeight);
+			context.globalAlpha = 1;
 		}
 	}
 

src/main.js

@@ -3,6 +3,9 @@ import FPS from './fps.js';
 const ONE_SECOND = 1000;
 const PRESS_RIPPLE = ONE_SECOND / 3;
 
+const INTERACTION_WINDOW = 100;
+const IDLE_DRAW_DELAY = 100;
+
 const DEFAULTS = {
 	board:       Tessellate.BOARD_STYLES.HEX,
 	style:       Tessellate.DRAW_STYLES.FILL,
@@ -270,11 +273,12 @@ class Demo {
 		}
 	}
 
-	draw({context, height, width, scale, locationSets, now, lastNow}) {
+	draw({context, height, width, scale, interacted, moved, locationSets, now, lastNow}) {
 		this.counts = [
 			0, // tiles
 			0, // pips
 			0, // mines
+			0, // drawDelay
 		];
 
 		Tessellate.Shapes.background(context, height, width, {
@@ -303,13 +307,13 @@ class Demo {
 			Tessellate.TILES[cell.tileStyle][cell.drawStyle](context, scale, pixelPoint.getX(), pixelPoint.getY(), cell);
 		});
 
-//		Tessellate.funky.forEach(this.mines, cell => {
-//			this.counts[2] += 1;
-//			const pixelPoint = this.tessellate.tileToPixel(cell);
-//			Tessellate.Shapes.mine(context, scale, pixelPoint.getX(), pixelPoint.getY());
-//		});
+		const drawDelay = moved || this.ripples.length || (now - interacted) < INTERACTION_WINDOW ? 0 : IDLE_DRAW_DELAY;
+
+		this.counts[3] = drawDelay;
 
 		this.fps.frame(now, lastNow, this.counts);
+
+		return drawDelay;
 	}
 }
 

src/sketch.js

@@ -13,7 +13,6 @@ export default class Sketch {
 
 		this.draw = settings.draw || noop;
 		this.resize = settings.resize || noop;
-		this.drawDelay = settings.drawDelay;
 		this.container = settings.element || document.body;
 
 		window.addEventListener('resize', this.onResize);
@@ -69,11 +68,11 @@ export default class Sketch {
 		this.context.now = now;
 		this.context.lastNow = this.lastNow;
 
-		this.draw(this.context);
+		const drawDelay = this.draw(this.context);
 
 		this.lastNow = now;
 
-		if (this.drawDelay) setTimeout(() => requestAnimationFrame(this.render), this.drawDelay);
+		if (drawDelay) setTimeout(() => requestAnimationFrame(this.render), drawDelay);
 		else requestAnimationFrame(this.render);
 	}
 }

src/tessellate.js

@@ -93,13 +93,15 @@ export class Tessellate {
 			'remap',
 		].map(method => {this[method] = this[method].bind(this)});
 
+		this.interacted = Date.now();
+
 		this.checkSettings(settings);
 
-		this.sketch = new Sketch(Object.assign({
+		this.sketch = new Sketch({
 			element: this.settings.element,
 			draw: this.draw,
 			resize: this.resize,
-		}, funky.pick(this.settings, ['drawDelay'])));
+		});
 
 		this.onTap = new OnTap(Object.assign({
 			element: this.settings.element,
@@ -152,6 +154,8 @@ export class Tessellate {
 		const tile = this.cartographer.pixelToTile(point);
 		const mapTile = this.cartographer.teleport(tile);
 
+		this.interacted = Date.now();
+
 		this.settings.tap({
 			event,
 			mapTile,
@@ -166,6 +170,9 @@ export class Tessellate {
 		const tile = this.cartographer.pixelToTile(point);
 		const mapTile = this.cartographer.teleport(tile);
 
+		this.interacted = true;
+		this.interacted = Date.now();
+
 		let tap = {
 			event,
 			map,
@@ -182,20 +189,8 @@ export class Tessellate {
 		const tile = this.cartographer.pixelToTile(point);
 		const mapTile = this.cartographer.teleport(tile);
 
-		let tap = {
-			event,
-			mapTile,
-			point,
-			tile
-		};
-
-		console.log(tap);
-	}
-
-	pressStart (event) {
-		const point = new Point(event.offsetX, event.offsetY);
-		const tile = this.cartographer.pixelToTile(point);
-		const mapTile = this.cartographer.teleport(tile);
+		this.interacted = true;
+		this.interacted = Date.now();
 
 		this.settings.pressStart({
 			event,
@@ -210,6 +205,9 @@ export class Tessellate {
 		const tile = this.cartographer.pixelToTile(point);
 		const mapTile = this.cartographer.teleport(tile);
 
+		this.interacted = true;
+		this.interacted = Date.now();
+
 		this.settings.press({
 			event,
 			mapTile,
@@ -219,10 +217,12 @@ export class Tessellate {
 	}
 
 	move (event) {
+		this.interacted = Date.now();
 		return this.cartographer.move(event);
 	}
 
 	zoom (event) {
+		this.interacted = Date.now();
 		this.cartographer.zoom(event);
 	}
 
@@ -234,7 +234,25 @@ export class Tessellate {
 		return this.cartographer.tileToPixel(tilePoint);
 	}
 
-	getLocationSets ({upperLeftX, upperLeftY, lowerRightX, lowerRightY}) {
+	newLocation (corners) {
+		this.lastLocation = this.lastLocation || {};
+
+		const currentLocation = utils.extend({
+			scale: this.cartographer.getScale(),
+			originX: this.cartographer.getOriginX(),
+			originY: this.cartographer.getOriginY(),
+		}, corners);
+
+		const changed = funky.reduce(currentLocation, (same, val, key) => same || this.lastLocation[key] !== val, false);
+
+		this.lastLocation = currentLocation;
+
+		return changed;
+	}
+
+	getLocationSets (corners) {
+		const {upperLeftX, upperLeftY, lowerRightX, lowerRightY} = corners;
+
 		const upperLeft =  new Point(upperLeftX, upperLeftY);
 		const upperRight = new Point(lowerRightX, 0);
 		const lowerLeft =  new Point(0, lowerRightY);
@@ -255,9 +273,10 @@ export class Tessellate {
 			lowerRightY: height
 		};
 
-		const locationSets = this.getLocationSets(corners);
+		const moved = this.newLocation(corners);
+		this.locationSets = moved ? this.getLocationSets(corners) : this.locationSets;
 
-		this.settings.draw({
+		return this.settings.draw({
 			context,
 
 			height, width,
@@ -266,7 +285,9 @@ export class Tessellate {
 			lastNow: context.lastUTC,
 			now: context.utc,
 
-			locationSets,
+			moved,
+			interacted: this.interacted,
+			locationSets: this.locationSets,
 		});
 	}
 

webpack.config.js

@@ -1,4 +1,5 @@
-var path = require('path');
+const path = require('path');
+const mode = process.argv.slice(-1)[0];
 
 module.exports = {
 	entry: {
@@ -10,13 +11,16 @@ module.exports = {
 		path: path.join(__dirname, 'public', 'js'),
 		filename: '[name].js'
 	},
-	devtool: 'inline-source-map',
+	devtool: mode === 'development' ? 'inline-source-map' : '',
 	module: {
 		rules: [
 			{
 				test: path.join(__dirname, 'src'),
 				use: {
-					loader: 'babel-loader'
+					loader: 'babel-loader',
+					options: {
+						presets: ['@babel/preset-env']
+					}
 				}
 			}
 		]