gavin/Tessellate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Flags (#12)

Browse Source
This commit is contained in:
gavin
2018-08-04 18:10:18 +00:00
committed by Gitea
parent d147a520bb
commit 56a769588d
4 changed files with 166 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/drawHexagon.js
View File

@@ -2,7 +2,8 @@ import {FLAT, POINTY} from './consts.js';
import {range, toFixed} from './utils.js'; import {range, toFixed} from './utils.js';
const DEFAULTS = { const DEFAULTS = {
pipScale: 0.05, flagScale: 0.5,
pipScale: 0.15,
pipDistance: 0.4, pipDistance: 0.4,
}; };
@@ -39,27 +40,33 @@ export default class DrawHexagon {
this.hexPips[FLAT] = []; this.hexPips[FLAT] = [];
this.hexPips[POINTY] = []; 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 // start with 0,0 as center
this.hexPips[FLAT][1] = [[0, 0]].map(getFlatVertex); this.hexPips[FLAT][1] = [0].map(getFlatVertex);
this.hexPips[FLAT][2] = [[1, 1], [4, 4]].map(getFlatVertex); this.hexPips[FLAT][2] = [1, 4].map(getFlatVertex);
this.hexPips[FLAT][3] = [[1, 1], [3, 3], [5, 5]].map(getFlatVertex); this.hexPips[FLAT][3] = [1, 3, 5].map(getFlatVertex);
this.hexPips[FLAT][4] = [[0, 0], [2, 2], [4, 4], [6, 6]].map(getFlatVertex); this.hexPips[FLAT][4] = [0, 2, 4, 6].map(getFlatVertex);
this.hexPips[FLAT][5] = [[0, 0], [2, 2], [3, 3], [5, 5], [6, 6]].map(getFlatVertex); this.hexPips[FLAT][5] = [0, 2, 3, 5, 6].map(getFlatVertex);
this.hexPips[FLAT][6] = [[1, 1], [2, 2], [3, 3], [4, 4], [5, 5], [6, 6]].map(getFlatVertex); this.hexPips[FLAT][6] = [1, 2, 3, 4, 5, 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][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 // start with 0,0 as center
this.hexPips[POINTY][1] = [[0, 0]].map(getPointyVertex); this.hexPips[POINTY][1] = [0].map(getPointyVertex);
this.hexPips[POINTY][2] = [[2, 2], [5, 5]].map(getPointyVertex); this.hexPips[POINTY][2] = [2, 5].map(getPointyVertex);
this.hexPips[POINTY][3] = [[1, 1], [3, 3], [5, 5]].map(getPointyVertex); this.hexPips[POINTY][3] = [1, 3, 5].map(getPointyVertex);
this.hexPips[POINTY][4] = [[0, 0], [2, 2], [4, 4], [6, 6]].map(getPointyVertex); this.hexPips[POINTY][4] = [0, 2, 4, 6].map(getPointyVertex);
this.hexPips[POINTY][5] = [[0, 0], [1, 1], [3, 3], [4, 4], [6, 6]].map(getPointyVertex); this.hexPips[POINTY][5] = [0, 1, 3, 4, 6].map(getPointyVertex);
this.hexPips[POINTY][6] = [[1, 1], [2, 2], [3, 3], [4, 4], [5, 5], [6, 6]].map(getPointyVertex); this.hexPips[POINTY][6] = [1, 2, 3, 4, 5, 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][7] = [0, 1, 2, 3, 4, 5, 6].map(getPointyVertex);
} }
outline(context, scale, x, y, cell) { outline(context, scale, x, y, cell) {
@@ -103,7 +110,7 @@ export default class DrawHexagon {
const y = cellY + (pipDistance * vertexY); const y = cellY + (pipDistance * vertexY);
context.moveTo(x, y); 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) { pips(context, scale, x, y, cell) {
@@ -123,5 +130,16 @@ export default class DrawHexagon {
context.fill(); 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();
}
} }

62
src/drawSquare.js
View File

@@ -2,7 +2,8 @@ import {sqrt2} from './utils.js';
import {FLAT, POINTY} from './consts.js'; import {FLAT, POINTY} from './consts.js';
const DEFAULTS = { const DEFAULTS = {
pipScale: 0.05, flagScale: 0.5,
pipScale: 0.15,
pipDistance: 0.4, pipDistance: 0.4,
}; };
@@ -19,31 +20,37 @@ export default class DrawSquare {
this.squarePips[FLAT] = []; this.squarePips[FLAT] = [];
this.squarePips[POINTY] = []; 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 // start with 0,0 as center
this.squarePips[FLAT][1] = [[0, 0]].map(getFlatVertex); this.squarePips[FLAT][1] = [0].map(getFlatVertex);
this.squarePips[FLAT][2] = [[1, 1], [3, 3]].map(getFlatVertex); this.squarePips[FLAT][2] = [1, 3].map(getFlatVertex);
this.squarePips[FLAT][3] = [[0, 0], [1, 1], [3, 3]].map(getFlatVertex); this.squarePips[FLAT][3] = [0, 1, 3].map(getFlatVertex);
this.squarePips[FLAT][4] = [[1, 1], [2, 2], [3, 3], [4, 4]].map(getFlatVertex); this.squarePips[FLAT][4] = [1, 2, 3, 4].map(getFlatVertex);
this.squarePips[FLAT][5] = [[0, 0], [1, 1], [2, 2], [3, 3], [4, 4]].map(getFlatVertex); this.squarePips[FLAT][5] = [0, 1, 2, 3, 4].map(getFlatVertex);
this.squarePips[FLAT][6] = [[1, 0], [1, 1], [2, 2], [3, 0], [3, 3], [4, 4]].map(getFlatVertex); this.squarePips[FLAT][6] = [1, 2, 3, 4, 5, 6].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][7] = [0, 1, 2, 3, 4, 5, 6].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][8] = [1, 2, 3, 4, 5, 6, 7, 8].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][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 // start with 0,0 as center
this.squarePips[POINTY][1] = [[0, 0]].map(getPointyVertex); this.squarePips[POINTY][1] = [0].map(getPointyVertex);
this.squarePips[POINTY][2] = [[1, 1], [3, 3]].map(getPointyVertex); this.squarePips[POINTY][2] = [1, 3].map(getPointyVertex);
this.squarePips[POINTY][3] = [[0, 0], [1, 1], [3, 3]].map(getPointyVertex); this.squarePips[POINTY][3] = [0, 1, 3].map(getPointyVertex);
this.squarePips[POINTY][4] = [[1, 1], [2, 2], [3, 3], [4, 4]].map(getPointyVertex); this.squarePips[POINTY][4] = [1, 2, 3, 4].map(getPointyVertex);
this.squarePips[POINTY][5] = [[0, 0], [1, 1], [2, 2], [3, 3], [4, 4]].map(getPointyVertex); this.squarePips[POINTY][5] = [0, 1, 2, 3, 4].map(getPointyVertex);
this.squarePips[POINTY][6] = [[1, 1], [2, 2], [3, 3], [4, 4], [5, 5], [6, 6]].map(getPointyVertex); this.squarePips[POINTY][6] = [1, 2, 3, 4, 5, 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][7] = [0, 1, 2, 3, 4, 5, 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][8] = [1, 2, 3, 4, 5, 6, 7, 8].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][9] = [0, 1, 2, 3, 4, 5, 6, 7, 8].map(getPointyVertex);
} }
fill(context, scale, x, y, cell) { fill(context, scale, x, y, cell) {
@@ -83,7 +90,7 @@ export default class DrawSquare {
const y = cellY + (pipDistance * vertexY); const y = cellY + (pipDistance * vertexY);
context.moveTo(x, y); 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) { pips(context, scale, x, y, cell) {
@@ -103,5 +110,16 @@ export default class DrawSquare {
context.fill(); 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();
}
} }

36
src/main.js
View File

@@ -39,6 +39,7 @@ class Demo {
this.map = {}; this.map = {};
this.taps = []; this.taps = [];
this.flags = {};
this.ripples = []; this.ripples = [];
this.setOriginTile(); this.setOriginTile();
@@ -89,7 +90,8 @@ class Demo {
const key = `${ x },${ z != null ? z : y }`; 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); console.log(this.map[key].pips);
} }
@@ -114,18 +116,27 @@ class Demo {
}) })
}); });
this.taps.push(this.createTile({ if (tap.event.mobile) {
x: tap.tile.x, this.toggleFlag(tap.tile)
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),
}));
} }
press(tap) { 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, createTile({x, y,
@@ -193,6 +204,11 @@ class Demo {
Tessellate.TILES[cell.tileStyle][cell.drawStyle](context, scale, pixelPoint.getX(), pixelPoint.getY(), cell); 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) { if (!this.notFirstTime) {
this.notFirstTime = true; this.notFirstTime = true;
console.log(tilePoints); console.log(tilePoints);

81
src/onTap.js
View File

@@ -36,6 +36,8 @@ export default class OnTap {
'tapStart', 'tapStart',
'pressStart', 'pressStart',
'contextmenu',
'mousedown', 'mousedown',
'mouseup', 'mouseup',
'mousemove', '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.settings.debug) console.debug('onTap.tapStart', event);
if (!this.state.tapStartTime) { if (!this.state.tapStartTime) {
const {mobile} = event;
this.state.tapStartTime = event.timeStamp; this.state.tapStartTime = event.timeStamp;
if (mobile || this.settings.desktopPress) { if (mobile || this.settings.desktopPress) {
clearTimeout(this.state.pressTO); 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); this.settings.tapStart(event);
@@ -70,10 +85,19 @@ export default class OnTap {
mousedown(event) { mousedown(event) {
if (this.settings.debug) console.debug('onTap.mousedown', event); if (this.settings.debug) console.debug('onTap.mousedown', event);
Object.assign(event, {
mobile: false,
});
this.state.lastX = event.offsetX; this.state.lastX = event.offsetX;
this.state.lastY = event.offsetY; 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) { touchstart(event) {
@@ -81,6 +105,10 @@ export default class OnTap {
if (this.settings.debug) console.debug('onTap.touchstart', event); if (this.settings.debug) console.debug('onTap.touchstart', event);
Object.assign(event, {
mobile: true,
});
const touches = [...event.touches]; const touches = [...event.touches];
event.offsetX = touches.reduce((memo, touch) => memo + touch.pageX, 0) / touches.length; event.offsetX = touches.reduce((memo, touch) => memo + touch.pageX, 0) / touches.length;
event.offsetY = touches.reduce((memo, touch) => memo + touch.pageY, 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); 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); if (this.settings.debug) console.debug('onTap.pressStart', event);
this.settings.pressStart(event); this.settings.pressStart(event);
@@ -105,9 +133,12 @@ export default class OnTap {
mouseup(event) { mouseup(event) {
if (this.settings.debug) console.debug('onTap.mouseup', event); if (this.settings.debug) console.debug('onTap.mouseup', event);
if (!this.state.moving) { Object.assign(event, {
event.duration = event.timeStamp - this.state.tapStartTime; mobile: false,
duration: event.timeStamp - this.state.tapStartTime,
});
if (!this.state.moving) {
if (this.settings.desktopPress && event.duration >= this.settings.pressThreshold) { if (this.settings.desktopPress && event.duration >= this.settings.pressThreshold) {
this.settings.press(event); this.settings.press(event);
} }
@@ -129,6 +160,11 @@ export default class OnTap {
if (this.settings.debug) console.debug('onTap.touchend', event); if (this.settings.debug) console.debug('onTap.touchend', event);
Object.assign(event, {
mobile: true,
duration: event.timeStamp - this.state.tapStartTime,
});
const touches = [...event.touches]; const touches = [...event.touches];
if (touches.length) { if (touches.length) {
@@ -144,8 +180,6 @@ export default class OnTap {
} }
if (!(this.state.moving || this.state.pinching)) { if (!(this.state.moving || this.state.pinching)) {
event.duration = event.timeStamp - this.state.tapStartTime;
if (event.duration >= this.settings.pressThreshold) { if (event.duration >= this.settings.pressThreshold) {
this.settings.press(event); this.settings.press(event);
} }
@@ -181,8 +215,12 @@ export default class OnTap {
} }
if (this.state.moving) { if (this.state.moving) {
event.deltaX = event.offsetX - this.state.lastX, Object.assign(event, {
event.deltaY = event.offsetY - this.state.lastY mobile: false,
deltaX: event.offsetX - this.state.lastX,
deltaY: event.offsetY - this.state.lastY,
});
this.settings.move(event); this.settings.move(event);
this.state.lastX = event.offsetX; this.state.lastX = event.offsetX;
@@ -198,11 +236,15 @@ export default class OnTap {
if (this.state.tapStartTime) { if (this.state.tapStartTime) {
const touches = [...event.touches]; 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) { if (this.state.pinching) {
event.scaleStep = event.scale / (this.state.lastPinch || 1);
this.settings.zoom(event); this.settings.zoom(event);
@@ -218,8 +260,10 @@ export default class OnTap {
} }
if (this.state.moving) { if (this.state.moving) {
event.deltaX = event.offsetX - this.state.lastX, Object.assign(event, {
event.deltaY = event.offsetY - this.state.lastY deltaX: event.offsetX - this.state.lastX,
deltaY: event.offsetY - this.state.lastY,
});
this.settings.move(event); this.settings.move(event);
@@ -236,7 +280,10 @@ export default class OnTap {
wheel(event) { wheel(event) {
if (this.settings.debug) console.debug('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); this.settings.zoom(event);
} }