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';
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();
}
}

62
src/drawSquare.js
View File

@@ -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();
}
}

36
src/main.js
View File

@@ -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);

81
src/onTap.js
View File

@@ -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);
}