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