diff --git a/src/main.js b/src/main.js index 93fb122..b5099c4 100644 --- a/src/main.js +++ b/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); -// } } } diff --git a/src/utils.js b/src/utils.js index 9e61fa1..1f461eb 100644 --- a/src/utils.js +++ b/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;