From 3830419b72236cfa0647eecead263f4609fcc91e Mon Sep 17 00:00:00 2001 From: Gavin McDonald Date: Sun, 24 Jun 2018 14:58:31 -0400 Subject: [PATCH] make sure Hex stuff still works --- src/cartographer.js | 115 +----------------------- src/{exWhyZee.js => cartographerXYZ.js} | 58 +++--------- src/main.js | 2 + src/tessellate.js | 32 +++++-- 4 files changed, 39 insertions(+), 168 deletions(-) rename src/{exWhyZee.js => cartographerXYZ.js} (89%) diff --git a/src/cartographer.js b/src/cartographer.js index a15f064..2ae2419 100644 --- a/src/cartographer.js +++ b/src/cartographer.js @@ -1,25 +1,13 @@ - import {extend} from './utils.js'; -//import Point from './point.js'; - export default class Cartographer { constructor(settings) { [ -// 'maxWidth', -// 'minWidth', -// 'maxDistance', -// 'minDistance', 'getOriginX', 'getOriginY', + 'getScale', -// 'getCellWidth', -// 'getCellHeight', -// 'getHorzDistance', -// 'getVertDistance', -// 'tileToPixel', -// 'pixelToTile', -// 'boundingBox', + 'move', 'zoom' ].map(method => this[method] = this[method].bind(this)); @@ -48,109 +36,10 @@ export default class Cartographer { this.height = parseInt(this.height); } -// maxWidth() { -// return this.scale * 2; -// } -// -// minWidth() { -// return this.maxWidth() * sqrt3; -// } -// -// maxDistance() { -// return this.maxWidth() * (3/4); -// } -// -// minDistance() { -// return this.minWidth(); -// } - getOriginX() {return this.originX;} getOriginY() {return this.originY;} getScale() {return this.scale;} -// getCellWidth() {return this.pointyTop ? this.minWidth() : this.maxWidth();} -// getCellHeight() {return this.pointyTop ? this.maxWidth() : this.minWidth();} -// getHorzDistance() {return this.pointyTop ? this.minDistance() : this.maxDistance();} -// getVertDistance() {return this.pointyTop ? this.maxDistance() : this.minDistance();} - -// tileToPixel(tile) { -// let scale = this.scale; -// -// function minWidth(a, b) { -// return scale * sqrt3 * (a + (b / 2)) -// }; -// -// function maxWidth(a) { -// return scale * 3/2 * a -// }; -// -// let pixelX = this.pointyTop ? minWidth(tile.getQ(), tile.getR()) : maxWidth(tile.getQ()); -// let pixelY = this.pointyTop ? maxWidth(tile.getR()) : minWidth(tile.getR(), tile.getQ()); -// -// pixelX += this.originX; -// pixelY += this.originY; -// -// return new Point(pixelX, pixelY); -// } - -// pixelToTile(point) { -// let scale = this.scale; -// -// function radiusLong(a, b) { -// return ((a * (sqrt3 / 3)) - (b / 3)) / scale; -// }; -// -// function radiusShort(a) { -// return (a * (2 / 3)) / scale; -// }; -// -// let pixelX = point.getX() - this.originX; -// let pixelY = point.getY() - this.originY; -// -// let q = this.pointyTop ? radiusLong(pixelX, pixelY) : radiusShort(pixelX); -// let r = this.pointyTop ? radiusShort(pixelY) : radiusLong(pixelY, pixelX); -// -// return new Tile(q, r); -// } - -// boundingBox(upperLeftPoint, lowerRightPoint) { -// let hexagons = []; -// let upperRightPoint = new Point(lowerRightPoint.getX(), upperLeftPoint.getY()); -// -// // push out by a 1 axially to account for interlocking hexagons -// // possibly return hexagons not within bounds -// let upperLeftTile = this.pixelToTile(upperLeftPoint).moveAxial({q: 0, r: -1}); -// let lowerRightTile = this.pixelToTile(lowerRightPoint).moveAxial({q: 0, r: 1}); -// let upperRightTile = this.pixelToTile(upperRightPoint).moveAxial({q: 1, r: -1}); -// -// let height = lowerRightTile.getR() - upperRightTile.getR(); -// let width = upperRightTile.getQ() - upperLeftTile.getQ(); -// -// if (this.pointyTop) { -// for (let row = 0; row <= height; row++) { -// hexagons[row] = []; -// let r = upperLeftTile.getR() + row; -// let qOffset = upperLeftTile.getQ() - Math.floor(row / 2); -// -// for (let q = qOffset; q <= qOffset + width; q++) { -// hexagons[row].push(new Tile(q, r)); -// } -// } -// } -// else { -// for (let col = 0; col <= width; col++) { -// hexagons[col] = []; -// let q = upperLeftTile.getQ() + col; -// let rOffset = upperLeftTile.getR() - Math.floor(col / 2); -// -// for (let r = rOffset; r <= rOffset + height; r++) { -// hexagons[col].push(new Tile(q, r)); -// } -// } -// } -// -// return hexagons; -// } move(event) { if (event.deltaX) { diff --git a/src/exWhyZee.js b/src/cartographerXYZ.js similarity index 89% rename from src/exWhyZee.js rename to src/cartographerXYZ.js index 8e4f4bc..9ecf6dc 100644 --- a/src/exWhyZee.js +++ b/src/cartographerXYZ.js @@ -1,28 +1,30 @@ +import Cartographer from './cartographer.js'; import {sqrt3, extend} from './utils.js'; import Hex from './hex.js'; import Point from './point.js'; -export default class ExWhyZee { +export default class CartographerXYZ extends Cartographer { constructor(settings) { + super(settings); + [ 'maxWidth', 'minWidth', + 'maxDistance', 'minDistance', - 'getOriginX', - 'getOriginY', - 'getScale', + 'getCellWidth', 'getCellHeight', + 'getHorzDistance', 'getVertDistance', - 'hexToPixel', + + 'tileToPixel', 'pixelToTile', 'boundingBox', - 'move', - 'zoom' ].map(method => this[method] = this[method].bind(this)); this.pointyTop = settings.pointyTop; @@ -65,16 +67,13 @@ export default class ExWhyZee { return this.minWidth(); } - getOriginX() {return this.originX;} - getOriginY() {return this.originY;} - - getScale() {return this.scale;} getCellWidth() {return this.pointyTop ? this.minWidth() : this.maxWidth();} getCellHeight() {return this.pointyTop ? this.maxWidth() : this.minWidth();} + getHorzDistance() {return this.pointyTop ? this.minDistance() : this.maxDistance();} getVertDistance() {return this.pointyTop ? this.maxDistance() : this.minDistance();} - hexToPixel(hex) { + tileToPixel(hex) { let scale = this.scale; function minWidth(a, b) { @@ -152,41 +151,6 @@ export default class ExWhyZee { return hexagons; } - - move(event) { - if (event.deltaX) { - - this.originX = Math.floor((this.originX*1000) + (event.deltaX*1000)) / 1000; - } - - if (event.deltaY) { - - this.originY = Math.floor((this.originY*1000) + (event.deltaY*1000)) / 1000; - } - } - - zoom(event) { - let scaleOrig = this.scale; - - let scaleTemp = parseInt((scaleOrig + (event.deltaY / -10)) * 1000) / 1000; - - // make sure 'scale' doesn't get too small nor too big - if (scaleTemp < this.scaleMin) - scaleTemp = this.scaleMin; - else if (scaleTemp > this.scaleMax) - scaleTemp = this.scaleMax; - - if (scaleOrig != scaleTemp) { - - this.scale = scaleTemp; - - // zoom to the current mouse location - this.move({ - deltaX: (((event.offsetX - this.originX) / scaleOrig) * (scaleOrig - scaleTemp)), - deltaY: (((event.offsetY - this.originY) / scaleOrig) * (scaleOrig - scaleTemp)) - }); - } - } } // function getCoordinates(canvasX, canvasY) { diff --git a/src/main.js b/src/main.js index a6c91ed..92c1710 100644 --- a/src/main.js +++ b/src/main.js @@ -13,6 +13,8 @@ class Demo { let tessellate = new Tessellate({ element: '#container', + board: Tessellate.BOARD_STYLES.HEX, + tile: Tessellate.TILE_STYLES.CIRCLE, tap: this.onTap, draw: this.draw, pointyTop: false, //utils.random(1) ? true : false, diff --git a/src/tessellate.js b/src/tessellate.js index aa86e87..3d57f98 100644 --- a/src/tessellate.js +++ b/src/tessellate.js @@ -14,17 +14,34 @@ export {DrawCircle, DrawHexagon, DrawSquare}; import Cell from './cell.js'; export {Cell}; -//import ExWhy from './exWhy.js'; -//import ExWhyZee from './exWhyZee.js'; import CartographerXY from './cartographerXY.js'; +import CartographerXYZ from './cartographerXYZ.js'; + +const HEX = 'hex'; +const CIRCLE = 'circle'; +const SQUARE = 'square'; + +const TILE_STYLES = {HEX, CIRCLE, SQUARE}; + +const TILES = { + [HEX]: new DrawHexagon(), + [CIRCLE]: new DrawCircle(), + [SQUARE]: new DrawSquare(), +}; const DEFAULTS = { + tile: HEX, + board: HEX, tap: utils.noop, draw: utils.noop, pointyTop: false, }; export default class Tessellate { + static get TILES () {return TILES} + static get TILE_STYLES () {return TILE_STYLES} + static get BOARD_STYLES () {return {HEX, SQUARE}} + constructor(settings) { ['tap', 'draw', 'drawMap', 'move', 'zoom'].map(method => {this[method] = this[method].bind(this)}); @@ -45,15 +62,14 @@ export default class Tessellate { }); this.map = []; - this.cartographer = new CartographerXY({ + + const boardSettings = { pointyTop: this.settings.pointyTop, originX: this.sketch.getContext().canvas.width / 2, originY: this.sketch.getContext().canvas.height / 2 - }); + }; - this.circle = new DrawCircle(); - this.hexagon = new DrawHexagon(); - this.square = new DrawSquare(); + this.cartographer = this.settings.board === HEX ? new CartographerXYZ(boardSettings) : new CartographerXY(boardSettings); } tap(event) { @@ -106,7 +122,7 @@ export default class Tessellate { }); } - this.square.filled(context, scale, tilePoint.getX(), tilePoint.getY(), this.map[tile.getX()][tile.getY()]); + TILES[this.settings.tile].filled(context, scale, tilePoint.getX(), tilePoint.getY(), this.map[tile.getX()][tile.getY()]); // let cell = map.getXY(hex.getX(), hex.getY()); //