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

Refactor Maps (#2)

Browse Source
This commit is contained in:
gavin
2018-07-17 21:28:17 +00:00
committed by Gitea
parent 0545c0a5d9
commit 57ada13a8d
13 changed files with 167 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
src/main.js
View File

@@ -4,22 +4,34 @@ import {utils} from './tessellate.js';
import {DrawCircle, DrawHexagon, DrawSquare} from './tessellate.js';
import {Cell} from './tessellate.js';
const DEFAULTS = {
board: Tessellate.BOARD_STYLES.HEX,
style: Tessellate.DRAW_STYLES.FILL,
orientation: Tessellate.TILE_ORIENTATIONS.FLAT,
tile: Tessellate.TILE_STYLES.HEX,
};
class Demo {
constructor() {
['onTap', 'draw'].map(method => this[method] = this[method].bind(this));
[
'onTap',
'createTile',
'drawTile',
'draw',
].map(method => this[method] = this[method].bind(this));
this.map = [];
this.map = {};
this.taps = [];
const queryStringObj = utils.getQueryStringObj();
let tessellate = new Tessellate(Object.assign({
this.settings = Object.assign({}, DEFAULTS, queryStringObj);
this.tessellate = new Tessellate(Object.assign({
element: '#container',
board: Tessellate.BOARD_STYLES.HEX,
tile: Tessellate.TILE_STYLES.HEX,
tap: this.onTap,
draw: this.draw,
orientation: Tessellate.TILE_ORIENTATIONS.FLAT,
}, queryStringObj));
}, this.settings));
this.circle = new DrawCircle();
this.square = new DrawSquare();
@@ -30,28 +42,59 @@ class Demo {
}
onTap(tap) {
let scale = utils.random(10, 50);
console.log(tap.tile.getPoint());
this.map.push(new Cell({
tile: this.tiles[utils.random(this.tiles.length-1)],
style: this.styles[utils.random(this.styles.length-1)],
x: tap.point.x,
y: tap.point.y,
scale,
orientation: utils.random(1) ? Tessellate.TILE_ORIENTATIONS.FLAT : Tessellate.TILE_ORIENTATIONS.POINTY,
this.taps.push(this.createTile(
tap.tile.x,
tap.tile.y,
utils.random(Tessellate.DRAW_STYLES),
utils.random(Tessellate.TILE_STYLES),
utils.random(Tessellate.TILE_ORIENTATIONS),
));
console.log(this.map[this.map.length - 1]);
}
createTile(x, y, drawStyle, tileStyle, orientation) {
return new Cell({
x, y,
scale: utils.random(7, 9) / 10,
drawStyle,
tileStyle,
orientation,
red: utils.random(255),
green: utils.random(255),
blue: utils.random(255),
alpha: utils.random(25,75)/100
}));
console.log(this.map[this.map.length - 1]);
});
}
draw(context) {
let scale = 1;
this.map.forEach(cell => this[cell.tile][cell.style](context, scale, cell.x, cell.y, cell));
drawTile({x, y, z}, context, scale) {
const key = `${ x },${ z != null ? z : y }`;
this.map[key] = this.map[key] || this.createTile(x, y, this.settings.style, this.settings.tile, this.settings.orientation);
const tile = this.map[key];
const pixelPoint = this.tessellate.tileToPixel(x, y, z);
Tessellate.TILES[tile.tileStyle][tile.drawStyle](context, scale, pixelPoint.getX(), pixelPoint.getY(), tile);
}
draw({context, scale, tilePoints}) {
tilePoints.forEach(tilePoint => this.drawTile(tilePoint, context, scale));
this.taps.forEach(cell => {
const pixelPoint = this.tessellate.tileToPixel(cell.x, cell.y);
Tessellate.TILES[cell.tileStyle][cell.drawStyle](context, scale, pixelPoint.getX(), pixelPoint.getY(), cell);
});
if (!this.notFirstTime) {
this.notFirstTime = true;
console.log(tilePoints);
}
}
}