59 lines
1.4 KiB
JavaScript
59 lines
1.4 KiB
JavaScript
|
|
import Tessellate from './tessellate.js';
|
|
|
|
import {utils} from './tessellate.js';
|
|
import {DrawCircle, DrawHexagon, DrawSquare} from './tessellate.js';
|
|
import {Cell} from './tessellate.js';
|
|
|
|
class Demo {
|
|
constructor() {
|
|
['onTap', 'draw'].map(method => this[method] = this[method].bind(this));
|
|
|
|
this.map = [];
|
|
|
|
let tessellate = new Tessellate({
|
|
element: '#container',
|
|
board: Tessellate.BOARD_STYLES.SQUARE,
|
|
tile: Tessellate.TILE_STYLES.SQUARE,
|
|
tap: this.onTap,
|
|
draw: this.draw,
|
|
pointyTop: true, //utils.random(1) ? true : false,
|
|
});
|
|
|
|
this.circle = new DrawCircle();
|
|
this.square = new DrawSquare();
|
|
this.hexagon = new DrawHexagon();
|
|
|
|
this.tiles = ['circle', 'hexagon', 'square'];
|
|
this.styles = ['filled', 'outline'];
|
|
}
|
|
|
|
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,
|
|
pointyTop: utils.random(1) ? true : false,
|
|
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));
|
|
}
|
|
}
|
|
|
|
let demo = new Demo();
|
|
|