jketreno/peddlers-of-ketran
1
0
Fork 0
Code Issues 42 Activity

Added road display and improved pip random placement

Browse Source 
Signed-off-by: James Ketrenos <james.p.ketrenos@intel.com>
This commit is contained in:
James Ketrenos 2020-04-05 21:39:15 -07:00
parent 5fc01766a7
commit a883779be0
1 changed files with 49 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
src/Board.js
View File

@ -56,6 +56,7 @@ const Tiles = (board) => {
tile.x = 0;
tile.pos = { x: 0, y: 0 };
}
tile.jitter = 0;
});
image.addEventListener("load", (event) => {
console.log(`Done loading ${file}`);
@ -203,8 +204,14 @@ class Board extends React.Component {
}
randomize() {
this.borders = shuffle(this.borders);
//this.borders = shuffle(this.borders);
this.tiles = shuffle(this.tiles);
this.tiles.forEach((tile) => {
tile.roads = [];
tile.settlements = [];
tile.jitter = Math.random() - 0.5;
});
this.closest.tile = null;
window.requestAnimationFrame(this.drawFrame);
}
@ -293,6 +300,7 @@ class Board extends React.Component {
}
const ctx = this.canvas.getContext("2d");
ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
ctx.save();
ctx.strokeStyle = 'white';
@ -306,7 +314,7 @@ class Board extends React.Component {
ctx.scale(this.minSize / hexagonRatio, this.minSize / hexagonRatio);
ctx.translate(0.5 * hexagonRatio, 0.5 * hexagonRatio);
ctx.lineWidth = 1. / this.minSize;
ctx.lineWidth = 2. / this.minSize;
/* Board dimensions:
* ________
@ -336,34 +344,37 @@ class Board extends React.Component {
ctx.beginPath();
ctx.arc(0, 0, tileHeight * 0.5, 0, Math.PI * 2.);
ctx.stroke();
/* road */
if (1 || this.closest.info.distance > 0.1 * tileWidth * 0.5) {
const angle = Math.round(this.closest.info.angle / (Math.PI / 3.)) * (Math.PI / 3.);
ctx.strokeStyle = "green";
ctx.rotate(angle);
ctx.translate(-tileHeight * 0.5, 0);
ctx.beginPath();
ctx.rect(-roadSize * 0.125, -roadSize * 0.5, roadSize * 0.25, roadSize);
ctx.stroke();
ctx.translate(tileHeight * 0.5, 0);
ctx.rotate(-angle);
}
let angle = Math.round(this.closest.info.angle / (Math.PI / 3.)) * (Math.PI / 3.);
ctx.strokeStyle = "rgb(64, 64, 255)";
ctx.fillStyle = "rgb(0, 0, 255)";
ctx.rotate(angle);
ctx.translate(-tileHeight * 0.5, 0);
ctx.beginPath();
ctx.rect(-roadSize * 0.125, -roadSize * 0.5, roadSize * 0.25, roadSize);
ctx.fill();
ctx.stroke();
ctx.translate(tileHeight * 0.5, 0);
ctx.rotate(-angle);
/* village */
if (1 || this.closest.info.distance > 0.1 * tileHeight * 0.5) {
let angle = (this.closest.info.angle - Math.PI / 6.);
angle = Math.round(angle / (Math.PI / 3.)) * (Math.PI / 3.);
angle += Math.PI / 6.;
ctx.strokeStyle = "blue";
ctx.rotate(angle);
ctx.translate(-tileWidth * 0.5, 0);
ctx.rotate(-angle);
ctx.beginPath();
ctx.rect(-settlementSize * 0.5, -settlementSize * 0.5, settlementSize, settlementSize);
ctx.stroke();
ctx.rotate(angle);
ctx.translate(+tileWidth * 0.5, 0);
ctx.rotate(-angle);
}
angle = (this.closest.info.angle - Math.PI / 6.);
angle = Math.round(angle / (Math.PI / 3.)) * (Math.PI / 3.);
angle += Math.PI / 6.;
ctx.strokeStyle = "rgb(64, 64, 255)";
ctx.fillStyle = "rgb(0, 0, 255)";
ctx.rotate(angle);
ctx.translate(-tileWidth * 0.5, 0);
ctx.rotate(-angle);
ctx.beginPath();
ctx.rect(-settlementSize * 0.5, -settlementSize * 0.5, settlementSize, settlementSize);
ctx.fill();
ctx.stroke();
ctx.rotate(angle);
ctx.translate(+tileWidth * 0.5, 0);
ctx.rotate(-angle);
ctx.restore();
}
@ -401,11 +412,16 @@ class Board extends React.Component {
ctx.restore();
}
function drawPip(pip, angle, radius) {
function drawPip(pip, angle, radius, jitter) {
ctx.save();
ctx.rotate(angle);
ctx.translate(0., radius);
ctx.rotate(-angle);
/* Offset into a random direction by a random amount */
ctx.rotate(Math.PI * 2. * jitter);
ctx.translate(0, tileHeight * 0.1 * jitter);
/* Undo random rotation for position, and add random rotation
* for pip placement */
ctx.rotate(-angle - Math.PI * 2. * jitter + jitter * 0.4);
ctx.drawImage(image,
pip.x * image.width, pip.y * image.height,
image.width / 6., image.height / 6.,
@ -428,7 +444,7 @@ class Board extends React.Component {
pip = this.pips.pips[index++];
}
drawTile(this.tiles[i], angle, radius - (i % 2) * 0.04);
drawPip(pip, angle, radius - (i % 2) * 0.04);
drawPip(pip, angle, radius - (i % 2) * 0.04, this.tiles[i].jitter);
}
/* Middle row */
@ -442,7 +458,7 @@ class Board extends React.Component {
pip = this.pips.pips[index++];
}
drawTile(this.tiles[i], angle, radius);
drawPip(pip, angle, radius);
drawPip(pip, angle, radius, this.tiles[i].jitter);
}
/* Center */
@ -453,7 +469,7 @@ class Board extends React.Component {
pip = this.pips.pips[index++];
}
drawTile(this.tiles[i], 0, 0);
drawPip(pip, 0, 0);
drawPip(pip, 0, 0, this.tiles[i].jitter);
}
drawBorders(ctx) {