fade to gray on Enter

src/main.js

@@ -25,6 +25,7 @@ class Demo {
 	constructor() {
 		[
 			'setOriginTile',
+			'setFadeToGray',
 			'tap',
 			'pressStart',
 			'press',
@@ -41,7 +42,9 @@ class Demo {
 		this.taps = [];
 		this.mines = {};
 		this.ripples = [];
+
 		this.setOriginTile();
+		this.setFadeToGray();
 
 		this.tessellate = new Tessellate(Object.assign({
 			element: '#container',
@@ -90,6 +93,14 @@ class Demo {
 		});
 	}
 
+	setFadeToGray () {
+		window.addEventListener('keydown', event => {
+			if (!event.repeat && event.key === 'Enter') {
+				this.gray = this.gray ? null : Date.now();
+			}
+		});
+	}
+
 	tap(tap) {
 		const {x, y, z} = tap.tile.getPoint();
 
@@ -169,6 +180,21 @@ class Demo {
 		});
 	}
 
+	fadeToGray (tile, fadeFactor) {
+		tile.color.grayscale = tile.color.grayscale || Tessellate.utils.grayscale(tile.color);
+
+		const grayscale = tile.color.grayscale;
+		const color = {
+			red: parseInt(tile.color.red - ((tile.color.red - grayscale) * fadeFactor)),
+			green: parseInt(tile.color.green - ((tile.color.green - grayscale) * fadeFactor)),
+			blue: parseInt(tile.color.blue - ((tile.color.blue - grayscale) * fadeFactor)),
+		};
+
+		tile = Tessellate.utils.extend(tile, {color});
+
+		return tile;
+	}
+
 	drawTile({x, y, z}, context, scale) {
 		const key = `${ x },${ z != null ? z : y }`;
 
@@ -179,9 +205,12 @@ class Demo {
 			orientation: this.settings.orientation,
 		});
 
-		const tile = this.map[key];
+		let tile = this.map[key];
 		const pixelPoint = this.tessellate.tileToPixel(x, y, z);
 
+		const fadeFactor = this.gray ? Math.min((Date.now() - this.gray) / 5000, 1) : null;
+		tile = this.gray ? this.fadeToGray(tile, fadeFactor) : tile;
+
 		Tessellate.TILES[tile.tileStyle][tile.drawStyle](context, scale, pixelPoint.getX(), pixelPoint.getY(), tile);
 		Tessellate.Shapes.pips(context, scale, pixelPoint.getX(), pixelPoint.getY(), tile);
 	}
@@ -216,11 +245,6 @@ class Demo {
 			const pixelPoint = this.tessellate.tileToPixel(cell.x, cell.y);
 			Tessellate.Shapes.mine(context, scale, pixelPoint.getX(), pixelPoint.getY());
 		});
-
-//		if (!this.notFirstTime) {
-//			this.notFirstTime = true;
-//			console.log(tilePoints);
-//		}
 	}
 }
 

src/utils.js

@@ -150,7 +150,7 @@ export function extend (obj, ...sources) {
 		forEach(src, (value, key) => {
 			if (has(src, key)) {
 				if (isObject(value) && isObject(extended[key])) {
-					extended[key] = extendDeep(extended[key], value);
+					extended[key] = extend(extended[key], value);
 				}
 				else {
 					extended[key] = value;