From 56a769588d0c0bc6f90541aff31beb578345887c Mon Sep 17 00:00:00 2001 From: gavin Date: Sat, 4 Aug 2018 18:10:18 +0000 Subject: [PATCH] Flags (#12) --- src/drawHexagon.js | 54 ++++++++++++++++++++----------- src/drawSquare.js | 62 ++++++++++++++++++++++------------- src/main.js | 36 +++++++++++++++------ src/onTap.js | 81 ++++++++++++++++++++++++++++++++++++---------- 4 files changed, 166 insertions(+), 67 deletions(-) diff --git a/src/drawHexagon.js b/src/drawHexagon.js index 4f16160..fd6a2e8 100644 --- a/src/drawHexagon.js +++ b/src/drawHexagon.js @@ -2,7 +2,8 @@ import {FLAT, POINTY} from './consts.js'; import {range, toFixed} from './utils.js'; const DEFAULTS = { - pipScale: 0.05, + flagScale: 0.5, + pipScale: 0.15, pipDistance: 0.4, }; @@ -39,27 +40,33 @@ export default class DrawHexagon { this.hexPips[FLAT] = []; this.hexPips[POINTY] = []; - const getFlatVertex = ([x, y]) => [x ? this.flatTopCornerX[x - 1] : 0, y ? this.flatTopCornerY[y - 1] : 0]; + const flatPipVerticesX = [0].concat(this.flatTopCornerX); + const flatPipVerticesY = [0].concat(this.flatTopCornerY); + + const getFlatVertex = n => [flatPipVerticesX[n], flatPipVerticesY[n]]; // start with 0,0 as center - this.hexPips[FLAT][1] = [[0, 0]].map(getFlatVertex); - this.hexPips[FLAT][2] = [[1, 1], [4, 4]].map(getFlatVertex); - this.hexPips[FLAT][3] = [[1, 1], [3, 3], [5, 5]].map(getFlatVertex); - this.hexPips[FLAT][4] = [[0, 0], [2, 2], [4, 4], [6, 6]].map(getFlatVertex); - this.hexPips[FLAT][5] = [[0, 0], [2, 2], [3, 3], [5, 5], [6, 6]].map(getFlatVertex); - this.hexPips[FLAT][6] = [[1, 1], [2, 2], [3, 3], [4, 4], [5, 5], [6, 6]].map(getFlatVertex); - this.hexPips[FLAT][7] = [[0, 0], [1, 1], [2, 2], [3, 3], [4, 4], [5, 5], [6, 6]].map(getFlatVertex); + this.hexPips[FLAT][1] = [0].map(getFlatVertex); + this.hexPips[FLAT][2] = [1, 4].map(getFlatVertex); + this.hexPips[FLAT][3] = [1, 3, 5].map(getFlatVertex); + this.hexPips[FLAT][4] = [0, 2, 4, 6].map(getFlatVertex); + this.hexPips[FLAT][5] = [0, 2, 3, 5, 6].map(getFlatVertex); + this.hexPips[FLAT][6] = [1, 2, 3, 4, 5, 6].map(getFlatVertex); + this.hexPips[FLAT][7] = [0, 1, 2, 3, 4, 5, 6].map(getFlatVertex); - const getPointyVertex = ([x, y]) => [x ? this.pointyTopCornerX[x - 1] : 0, y ? this.pointyTopCornerY[y - 1] : 0]; + const pointyPipVerticesX = [0].concat(this.pointyTopCornerX); + const pointyPipVerticesY = [0].concat(this.pointyTopCornerY); + + const getPointyVertex = n => [pointyPipVerticesX[n], pointyPipVerticesY[n]]; // start with 0,0 as center - this.hexPips[POINTY][1] = [[0, 0]].map(getPointyVertex); - this.hexPips[POINTY][2] = [[2, 2], [5, 5]].map(getPointyVertex); - this.hexPips[POINTY][3] = [[1, 1], [3, 3], [5, 5]].map(getPointyVertex); - this.hexPips[POINTY][4] = [[0, 0], [2, 2], [4, 4], [6, 6]].map(getPointyVertex); - this.hexPips[POINTY][5] = [[0, 0], [1, 1], [3, 3], [4, 4], [6, 6]].map(getPointyVertex); - this.hexPips[POINTY][6] = [[1, 1], [2, 2], [3, 3], [4, 4], [5, 5], [6, 6]].map(getPointyVertex); - this.hexPips[POINTY][7] = [[0, 0], [1, 1], [2, 2], [3, 3], [4, 4], [5, 5], [6, 6]].map(getPointyVertex); + this.hexPips[POINTY][1] = [0].map(getPointyVertex); + this.hexPips[POINTY][2] = [2, 5].map(getPointyVertex); + this.hexPips[POINTY][3] = [1, 3, 5].map(getPointyVertex); + this.hexPips[POINTY][4] = [0, 2, 4, 6].map(getPointyVertex); + this.hexPips[POINTY][5] = [0, 1, 3, 4, 6].map(getPointyVertex); + this.hexPips[POINTY][6] = [1, 2, 3, 4, 5, 6].map(getPointyVertex); + this.hexPips[POINTY][7] = [0, 1, 2, 3, 4, 5, 6].map(getPointyVertex); } outline(context, scale, x, y, cell) { @@ -103,7 +110,7 @@ export default class DrawHexagon { const y = cellY + (pipDistance * vertexY); context.moveTo(x, y); - context.arc(x, y, pipRadius*3, 0, Math.PI*2, true); + context.arc(x, y, pipRadius, 0, Math.PI*2, true); } pips(context, scale, x, y, cell) { @@ -123,5 +130,16 @@ export default class DrawHexagon { context.fill(); } } + + flag (context, scale, x, y) { + context.beginPath(); + + context.moveTo(x, y); + context.arc(x, y, scale * this.settings.flagScale, 0, Math.PI*2, true); + + context.closePath(); + context.fillStyle = 'rgb(255,0,0)'; + context.fill(); + } } diff --git a/src/drawSquare.js b/src/drawSquare.js index 322298c..24b046c 100644 --- a/src/drawSquare.js +++ b/src/drawSquare.js @@ -2,7 +2,8 @@ import {sqrt2} from './utils.js'; import {FLAT, POINTY} from './consts.js'; const DEFAULTS = { - pipScale: 0.05, + flagScale: 0.5, + pipScale: 0.15, pipDistance: 0.4, }; @@ -19,31 +20,37 @@ export default class DrawSquare { this.squarePips[FLAT] = []; this.squarePips[POINTY] = []; - const getFlatVertex = ([x, y]) => [x ? this.squareX[x - 1] : 0, y ? this.squareY[y - 1] : 0]; + const flatPipVerticesX = [0].concat(this.squareX).concat([this.squareX[1], this.squareX[3], 0, 0]); + const flatPipVerticesY = [0].concat(this.squareY).concat([0, 0, this.squareY[1], this.squareY[3]]); + + const getFlatVertex = n => [flatPipVerticesX[n], flatPipVerticesY[n]]; // start with 0,0 as center - this.squarePips[FLAT][1] = [[0, 0]].map(getFlatVertex); - this.squarePips[FLAT][2] = [[1, 1], [3, 3]].map(getFlatVertex); - this.squarePips[FLAT][3] = [[0, 0], [1, 1], [3, 3]].map(getFlatVertex); - this.squarePips[FLAT][4] = [[1, 1], [2, 2], [3, 3], [4, 4]].map(getFlatVertex); - this.squarePips[FLAT][5] = [[0, 0], [1, 1], [2, 2], [3, 3], [4, 4]].map(getFlatVertex); - this.squarePips[FLAT][6] = [[1, 0], [1, 1], [2, 2], [3, 0], [3, 3], [4, 4]].map(getFlatVertex); - this.squarePips[FLAT][7] = [[0, 0], [1, 0], [1, 1], [2, 2], [3, 0], [3, 3], [4, 4]].map(getFlatVertex); - this.squarePips[FLAT][8] = [[0, 1], [0, 3], [1, 0], [1, 1], [2, 2], [3, 0], [3, 3], [4, 4]].map(getFlatVertex); - this.squarePips[FLAT][9] = [[0, 0], [0, 1], [0, 3], [1, 0], [1, 1], [2, 2], [3, 0], [3, 3], [4, 4]].map(getFlatVertex); + this.squarePips[FLAT][1] = [0].map(getFlatVertex); + this.squarePips[FLAT][2] = [1, 3].map(getFlatVertex); + this.squarePips[FLAT][3] = [0, 1, 3].map(getFlatVertex); + this.squarePips[FLAT][4] = [1, 2, 3, 4].map(getFlatVertex); + this.squarePips[FLAT][5] = [0, 1, 2, 3, 4].map(getFlatVertex); + this.squarePips[FLAT][6] = [1, 2, 3, 4, 5, 6].map(getFlatVertex); + this.squarePips[FLAT][7] = [0, 1, 2, 3, 4, 5, 6].map(getFlatVertex); + this.squarePips[FLAT][8] = [1, 2, 3, 4, 5, 6, 7, 8].map(getFlatVertex); + this.squarePips[FLAT][9] = [0, 1, 2, 3, 4, 5, 6, 7, 8].map(getFlatVertex); - const getPointyVertex = ([x, y]) => [x ? this.diamondX[x - 1] : 0, y ? this.diamondY[y - 1] : 0]; + const pointyPipVerticesX = [0].concat(this.diamondX).concat([this.diamondX[4], this.diamondX[5]]); + const pointyPipVerticesY = [0].concat(this.diamondY).concat([this.diamondY[5], this.diamondY[4]]); + + const getPointyVertex = n => [pointyPipVerticesX[n], pointyPipVerticesY[n]]; // start with 0,0 as center - this.squarePips[POINTY][1] = [[0, 0]].map(getPointyVertex); - this.squarePips[POINTY][2] = [[1, 1], [3, 3]].map(getPointyVertex); - this.squarePips[POINTY][3] = [[0, 0], [1, 1], [3, 3]].map(getPointyVertex); - this.squarePips[POINTY][4] = [[1, 1], [2, 2], [3, 3], [4, 4]].map(getPointyVertex); - this.squarePips[POINTY][5] = [[0, 0], [1, 1], [2, 2], [3, 3], [4, 4]].map(getPointyVertex); - this.squarePips[POINTY][6] = [[1, 1], [2, 2], [3, 3], [4, 4], [5, 5], [6, 6]].map(getPointyVertex); - this.squarePips[POINTY][7] = [[0, 0], [1, 1], [2, 2], [3, 3], [4, 4], [5, 5], [6, 6]].map(getPointyVertex); - this.squarePips[POINTY][8] = [[1, 1], [2, 2], [3, 3], [4, 4], [5, 5], [5, 6], [6, 5], [6, 6]].map(getPointyVertex); - this.squarePips[POINTY][9] = [[0, 0], [1, 1], [2, 2], [3, 3], [4, 4], [5, 5], [5, 6], [6, 5], [6, 6]].map(getPointyVertex); + this.squarePips[POINTY][1] = [0].map(getPointyVertex); + this.squarePips[POINTY][2] = [1, 3].map(getPointyVertex); + this.squarePips[POINTY][3] = [0, 1, 3].map(getPointyVertex); + this.squarePips[POINTY][4] = [1, 2, 3, 4].map(getPointyVertex); + this.squarePips[POINTY][5] = [0, 1, 2, 3, 4].map(getPointyVertex); + this.squarePips[POINTY][6] = [1, 2, 3, 4, 5, 6].map(getPointyVertex); + this.squarePips[POINTY][7] = [0, 1, 2, 3, 4, 5, 6].map(getPointyVertex); + this.squarePips[POINTY][8] = [1, 2, 3, 4, 5, 6, 7, 8].map(getPointyVertex); + this.squarePips[POINTY][9] = [0, 1, 2, 3, 4, 5, 6, 7, 8].map(getPointyVertex); } fill(context, scale, x, y, cell) { @@ -83,7 +90,7 @@ export default class DrawSquare { const y = cellY + (pipDistance * vertexY); context.moveTo(x, y); - context.arc(x, y, pipRadius*3, 0, Math.PI*2, true); + context.arc(x, y, pipRadius, 0, Math.PI*2, true); } pips(context, scale, x, y, cell) { @@ -103,5 +110,16 @@ export default class DrawSquare { context.fill(); } } + + flag (context, scale, x, y) { + context.beginPath(); + + context.moveTo(x, y); + context.arc(x, y, scale * this.settings.flagScale, 0, Math.PI*2, true); + + context.closePath(); + context.fillStyle = 'rgb(255,0,0)'; + context.fill(); + } } diff --git a/src/main.js b/src/main.js index a9eac96..cc0aebe 100644 --- a/src/main.js +++ b/src/main.js @@ -39,6 +39,7 @@ class Demo { this.map = {}; this.taps = []; + this.flags = {}; this.ripples = []; this.setOriginTile(); @@ -89,7 +90,8 @@ class Demo { const key = `${ x },${ z != null ? z : y }`; - this.map[key].pips = Tessellate.utils.random(1,7); + const pipMax = this.settings.tile === Tessellate.TILE_STYLES.HEX ? 7 : 9; + this.map[key].pips = Tessellate.utils.random(1, pipMax); console.log(this.map[key].pips); } @@ -114,18 +116,27 @@ class Demo { }) }); - this.taps.push(this.createTile({ - x: tap.tile.x, - y: tap.tile.y, - - drawStyle: Tessellate.utils.random(Tessellate.DRAW_STYLES), - tileStyle: Tessellate.utils.random(Tessellate.TILE_STYLES), - orientation: Tessellate.utils.random(Tessellate.TILE_ORIENTATIONS), - })); + if (tap.event.mobile) { + this.toggleFlag(tap.tile) + } } press(tap) { - console.log('PRESS END'); + if (!tap.event.mobile) { + this.toggleFlag(tap.tile) + } + } + + toggleFlag(tile) { + const {x, y, z} = tile.getPoint(); + const key = `${ x },${ z != null ? z : y }`; + + if (this.flags[key]) { + delete this.flags[key]; + } + else { + this.flags[key] = tile; + } } createTile({x, y, @@ -193,6 +204,11 @@ class Demo { Tessellate.TILES[cell.tileStyle][cell.drawStyle](context, scale, pixelPoint.getX(), pixelPoint.getY(), cell); }); + Tessellate.funky.forEach(this.flags, cell => { + const pixelPoint = this.tessellate.tileToPixel(cell.x, cell.y); + Tessellate.TILES[this.settings.tile].flag(context, scale, pixelPoint.getX(), pixelPoint.getY()); + }); + if (!this.notFirstTime) { this.notFirstTime = true; console.log(tilePoints); diff --git a/src/onTap.js b/src/onTap.js index 956c433..67b27fc 100644 --- a/src/onTap.js +++ b/src/onTap.js @@ -36,6 +36,8 @@ export default class OnTap { 'tapStart', 'pressStart', + 'contextmenu', + 'mousedown', 'mouseup', 'mousemove', @@ -52,15 +54,28 @@ export default class OnTap { }); } - tapStart(event, mobile = false) { + contextmenu(event) { + event.preventDefault(); + } + + tapStart(event) { if (this.settings.debug) console.debug('onTap.tapStart', event); if (!this.state.tapStartTime) { + const {mobile} = event; this.state.tapStartTime = event.timeStamp; if (mobile || this.settings.desktopPress) { clearTimeout(this.state.pressTO); - this.state.pressTO = setTimeout(this.pressStart, this.settings.pressThreshold); + + this.state.pressTO = setTimeout(() => { + this.pressStart({ + mobile, + timeStamp: Date.now(), + offsetX: this.state.lastX, + offsetY: this.state.lastY, + }); + }, this.settings.pressThreshold); } this.settings.tapStart(event); @@ -70,10 +85,19 @@ export default class OnTap { mousedown(event) { if (this.settings.debug) console.debug('onTap.mousedown', event); + Object.assign(event, { + mobile: false, + }); + this.state.lastX = event.offsetX; this.state.lastY = event.offsetY; - this.tapStart(event, false); + if (event.which && event.which !== 1) { + this.settings.pressStart(event); + } + else { + this.tapStart(event); + } } touchstart(event) { @@ -81,6 +105,10 @@ export default class OnTap { if (this.settings.debug) console.debug('onTap.touchstart', event); + Object.assign(event, { + mobile: true, + }); + const touches = [...event.touches]; event.offsetX = touches.reduce((memo, touch) => memo + touch.pageX, 0) / touches.length; event.offsetY = touches.reduce((memo, touch) => memo + touch.pageY, 0) / touches.length; @@ -93,10 +121,10 @@ export default class OnTap { clearTimeout(this.state.pressTO); } - this.tapStart(event, true); + this.tapStart(event); } - pressStart(event = {timeStamp: Date.now(), offsetX: this.state.lastX, offsetY: this.state.lastY}) { + pressStart(event) { if (this.settings.debug) console.debug('onTap.pressStart', event); this.settings.pressStart(event); @@ -105,9 +133,12 @@ export default class OnTap { mouseup(event) { if (this.settings.debug) console.debug('onTap.mouseup', event); - if (!this.state.moving) { - event.duration = event.timeStamp - this.state.tapStartTime; + Object.assign(event, { + mobile: false, + duration: event.timeStamp - this.state.tapStartTime, + }); + if (!this.state.moving) { if (this.settings.desktopPress && event.duration >= this.settings.pressThreshold) { this.settings.press(event); } @@ -129,6 +160,11 @@ export default class OnTap { if (this.settings.debug) console.debug('onTap.touchend', event); + Object.assign(event, { + mobile: true, + duration: event.timeStamp - this.state.tapStartTime, + }); + const touches = [...event.touches]; if (touches.length) { @@ -144,8 +180,6 @@ export default class OnTap { } if (!(this.state.moving || this.state.pinching)) { - event.duration = event.timeStamp - this.state.tapStartTime; - if (event.duration >= this.settings.pressThreshold) { this.settings.press(event); } @@ -181,8 +215,12 @@ export default class OnTap { } if (this.state.moving) { - event.deltaX = event.offsetX - this.state.lastX, - event.deltaY = event.offsetY - this.state.lastY + Object.assign(event, { + mobile: false, + deltaX: event.offsetX - this.state.lastX, + deltaY: event.offsetY - this.state.lastY, + }); + this.settings.move(event); this.state.lastX = event.offsetX; @@ -198,11 +236,15 @@ export default class OnTap { if (this.state.tapStartTime) { const touches = [...event.touches]; - event.offsetX = touches.reduce((memo, touch) => memo + touch.pageX, 0) / touches.length; - event.offsetY = touches.reduce((memo, touch) => memo + touch.pageY, 0) / touches.length; + + Object.assign(event, { + offsetX: touches.reduce((memo, touch) => memo + touch.pageX, 0) / touches.length, + offsetY: touches.reduce((memo, touch) => memo + touch.pageY, 0) / touches.length, + scaleStep: event.scale / (this.state.lastPinch || 1), + mobile: true, + }); if (this.state.pinching) { - event.scaleStep = event.scale / (this.state.lastPinch || 1); this.settings.zoom(event); @@ -218,8 +260,10 @@ export default class OnTap { } if (this.state.moving) { - event.deltaX = event.offsetX - this.state.lastX, - event.deltaY = event.offsetY - this.state.lastY + Object.assign(event, { + deltaX: event.offsetX - this.state.lastX, + deltaY: event.offsetY - this.state.lastY, + }); this.settings.move(event); @@ -236,7 +280,10 @@ export default class OnTap { wheel(event) { if (this.settings.debug) console.debug('onTap.wheel', event); - event.scaleStep = 1 + (event.deltaY / this.settings.wheelFactor); + Object.assign(event, { + scaleStep: 1 + (event.deltaY / this.settings.wheelFactor), + mobile: false, + }); this.settings.zoom(event); }