report location of hex coordinate on tap

src/main.js

@@ -7,13 +7,13 @@ import {Cell} from './tessellate.js';
 
 class Demo {
 	constructor() {
-		['click', 'draw'].map(method => this[method] = this[method].bind(this));
+		['onTap', 'draw'].map(method => this[method] = this[method].bind(this));
 
 		this.map = [];
 
 		let tessellate = new Tessellate({
 			element: '#container',
-			click: this.click,
+			tap: this.onTap,
 			draw: this.draw
 		});
 
@@ -25,16 +25,16 @@ class Demo {
 		this.styles = ['filled', 'outline'];
 	}
 
-	click(event) {
+	onTap(tap) {
-		let x = event.pageX;
-		let y = event.pageY;
 		let scale = utils.random(10, 50);
 
+		console.log(tap.hex.getHex());
+
 		this.map.push(new Cell({
 			tile: this.tiles[utils.random(this.tiles.length-1)],
 			style: this.styles[utils.random(this.styles.length-1)],
-			x,
+			x: tap.point.x,
-			y,
+			y: tap.point.y,
 			scale,
 			pointyTop: utils.random(1) ? true : false,
 			red: utils.random(255),

src/onTap.js

@@ -46,8 +46,6 @@ export default class OnTap {
 			this.state.clickStartY = event.pageY;
 			this.state.clickStartTime = event.timeStamp;
 		}
-
-		console.log('mousedown', event);
 	}
 
 	touchstart(event) {
@@ -56,22 +54,19 @@ export default class OnTap {
 			this.state.clickStartY = event.pageY;
 			this.state.clickStartTime = event.timeStamp;
 		}
-
-		console.log('touchstart', event);
 	}
 
 	mouseup(event) {
 
 		if (!this.state.moving) {
-			console.log('mouseup', event);
 			this.actions.tap.callback(event);
 		}
 		else {
-			console.log({
+//			console.log({
-				duration: event.timeStamp - this.state.clickStartTime,
+//				duration: event.timeStamp - this.state.clickStartTime,
-				deltaX: event.pageX - this.state.clickStartX,
+//				deltaX: event.pageX - this.state.clickStartX,
-				deltaY: event.pageY - this.state.clickStartY
+//				deltaY: event.pageY - this.state.clickStartY
-			});
+//			});
 		}
 
 		this.state.moving = null;
@@ -85,15 +80,14 @@ export default class OnTap {
 	touchend(event) {
 
 		if (!this.state.moving) {
-			console.log('touchend', event);
 			this.actions.tap.callback(event);
 		}
 		else {
-			console.log({
+//			console.log({
-				duration: event.timeStamp - this.state.clickStartTime,
+//				duration: event.timeStamp - this.state.clickStartTime,
-				deltaX: event.pageX - this.state.clickStartX,
+//				deltaX: event.pageX - this.state.clickStartX,
-				deltaY: event.pageY - this.state.clickStartY
+//				deltaY: event.pageY - this.state.clickStartY
-			});
+//			});
 		}
 
 		this.state.moving = null;

src/tessellate.js

@@ -20,8 +20,8 @@ export default class Tessellate {
 	constructor(settings) {
 		['tap', 'draw', 'drawMap', 'move', 'zoom'].map(method => {this[method] = this[method].bind(this)});
 
+		this.tapCB = settings.tap || utils.noop;
 		this.drawCB = settings.draw || utils.noop;
-		this.clickCB = settings.click || utils.noop;
 		this.element = document.querySelector(settings.element);
 
 		this.sketch = new Sketch({
@@ -48,7 +48,16 @@ export default class Tessellate {
 	}
 
 	tap(event) {
-		this.clickCB(event);
+		let point = new Point(event.offsetX, event.offsetY);
+		let hex = this.xyz.pixelToHex(point);
+
+		let tap = {
+			event,
+			point,
+			hex
+		};
+
+		this.tapCB(tap);
 	}
 
 	move(event) {