+ style={{backgroundImage:`url(assets/gfx/placard-${this.props.type}.png)`}}>
);
}
@@ -179,7 +190,7 @@ class Development extends React.Component {
const array = [];
for (let i = 0; i < this.props.count; i++) {
if (this.props.type.match(/-$/)) {
- array.push(Math.ceil(Math.random() * this.props.max));
+ array.push(i + 1);//Math.ceil(Math.random() * this.props.max));
} else {
array.push("");
}
@@ -188,7 +199,7 @@ class Development extends React.Component {
+ <>
+ { array.length > 0 &&
+
{ React.Children.map(array, i => (
+ style={{backgroundImage:`url(assets/gfx/card-${this.props.type}.png)`}}>
)) }
+ }
+
);
}
};
@@ -217,13 +232,24 @@ class Resource extends React.Component {
class Board extends React.Component {
constructor(props) {
super(props);
+ this.state = {
+ total: 0,
+ wood: 0,
+ sheep: 0,
+ brick: 0,
+ stone: 0,
+ wheat: 0
+ };
this.componentDidMount = this.componentDidMount.bind(this);
this.updateDimensions = this.updateDimensions.bind(this);
this.drawFrame = this.drawFrame.bind(this);
this.drawBorders = this.drawBorders.bind(this);
this.drawPips = this.drawPips.bind(this);
+ this.drawDie = this.drawDie.bind(this);
+ this.keyUp = this.keyUp.bind(this);
this.mouseMove = this.mouseMove.bind(this);
this.randomize = this.randomize.bind(this);
+ this.throwDice = this.throwDice.bind(this);
this.mouse = { x: 0, y: 0 };
this.radius = 0.317;
@@ -271,6 +297,64 @@ class Board extends React.Component {
window.requestAnimationFrame(this.drawFrame);
}
+ keyUp(event) {
+ if (event.keyCode == 78) { /* n */
+ this.randomize();
+ return;
+ }
+
+ if (event.keyCode == 32) { /* space */
+ this.throwDice();
+ return;
+ }
+ }
+
+ throwDice() {
+ for (let i = 0; i < 2; i++) {
+ dice[i] = {
+ pips: Math.ceil(Math.random() * 6),
+ angle: Math.random() * Math.PI * 2,
+ jitter: (Math.random() - 0.5) * diceSize * 0.125
+ }
+ }
+ window.requestAnimationFrame(this.drawFrame);
+
+ const sum = dice[0].pips + dice[1].pips;
+ if (sum == 7) { /* Robber! */
+ if (this.state.total > 7) {
+ let half = Math.ceil(this.state.total * 0.5);
+ this.state.total -= half;
+ while (half) {
+ switch (Math.floor(Math.random() * 5)) {
+ case 0: if (this.state.wood) { this.state.wood--; half--; } break;
+ case 1: if (this.state.sheep) { this.state.sheep--; half--; } break;
+ case 2: if (this.state.stone) { this.state.stone--; half--; } break;
+ case 3: if (this.state.brick) { this.state.brick--; half--; } break;
+ case 4: if (this.state.wheat) { this.state.wheat--; half--; } break;
+ }
+ }
+ }
+ } else {
+ this.tiles.forEach((tile) => {
+ if (tile.pip.roll != sum) {
+ return;
+ }
+ this.state[tile.type]++;
+ this.state.total++;
+ });
+ }
+
+ this.setState({
+ total: this.state.total,
+ wood: this.state.wood,
+ sheep: this.state.sheep,
+ stone: this.state.stone,
+ brick: this.state.brick,
+ wheat: this.state.wheat
+ });
+ }
+
+
mouseMove(event) {
const rect = this.canvas.parentElement.getBoundingClientRect();
let x, y;
@@ -371,6 +455,9 @@ class Board extends React.Component {
*
* If the view is wider than taller, then
*/
+ const tableLeft = 32 * this.table.width / 1080,
+ tableRight = 1010 * this.table.width / 1080,
+ tableLeaf = 978 * this.table.width / 1080;
/* If view is taller than wide, tile the table vertically */
ctx.save();
@@ -399,17 +486,17 @@ class Board extends React.Component {
const tableWidth = this.canvas.height * this.table.width / this.table.height;
ctx.drawImage(this.table,
0, 0,
- 1010, this.table.height,
+ tableRight, this.table.height,
0, 0,
- this.canvas.height * 1010 / this.table.height, this.canvas.height);
- let left = this.canvas.height * 1010 / this.table.height;
+ this.canvas.height * tableRight / this.table.height, this.canvas.height);
+ let left = this.canvas.height * tableRight / this.table.height;
while (left < this.canvas.width) {
ctx.drawImage(this.table,
- 32, 0,
- 978, this.table.height,
+ tableLeft, 0,
+ tableLeaf, this.table.height,
left, 0,
- this.canvas.height * 978 / this.table.height, this.canvas.height);
- left += this.canvas.height * 978 / this.table.height;
+ this.canvas.height * tableLeaf / this.table.height, this.canvas.height);
+ left += this.canvas.height * tableLeaf / this.table.height;
}
}
ctx.restore();
@@ -491,6 +578,101 @@ class Board extends React.Component {
ctx.fill();
}
+ ctx.save();
+ {
+ ctx.translate(tileWidth * -2.5, -tileWidth * 2);
+ ctx.rotate(Math.PI * -0.25)
+
+ if (dice[0].pips) {
+ ctx.translate(-0.5 * (diceSize + diceMargin), 0);
+ this.drawDie(ctx, dice[0]);
+ }
+
+ if (dice[1].pips) {
+ ctx.translate(diceSize + diceMargin, 0);
+ this.drawDie(ctx, dice[1]);
+ }
+ }
+ ctx.restore();
+
+ ctx.restore();
+ }
+
+ drawDie(ctx, die) {
+ const radius = diceSize * 0.125,
+ offset = diceSize * 0.5 - radius,
+ pips = die.pips;
+
+ ctx.save();
+ ctx.rotate(die.angle);
+ ctx.translate(die.jitter, 0);
+
+ ctx.strokeStyle = "#666";
+ ctx.fillStyle = "#444";
+
+ ctx.beginPath();
+ ctx.arc(-offset, -offset, radius, Math.PI, Math.PI * 1.5);
+ ctx.arc(+offset, -offset, radius, Math.PI * 1.5, 0);
+ ctx.arc(+offset, +offset, radius, 0, Math.PI * 0.5);
+ ctx.arc(-offset, +offset, radius, Math.PI * 0.5, Math.PI);
+ ctx.closePath();
+ ctx.fill();
+ ctx.stroke();
+
+ ctx.strokeStyle = "#bbb";
+ ctx.fillStyle = "#ddd";
+ /* center pip */
+ if (pips == 1 || pips == 3 || pips == 5) {
+ ctx.beginPath();
+ ctx.arc(0, 0, diceSize * 0.0625, 0, Math.PI * 2);
+ ctx.fill();
+ ctx.stroke();
+ }
+
+ /* upper left pip */
+ if (pips == 2 || pips == 3 || pips == 4 || pips == 5 || pips == 6) {
+ ctx.beginPath();
+ ctx.arc(-diceSize * 0.250, -diceSize * 0.250, diceSize * 0.0625, 0, Math.PI * 2);
+ ctx.fill();
+ ctx.stroke();
+ }
+
+ /* upper right pip */
+ if (pips == 4 || pips == 5 || pips == 6) {
+ ctx.beginPath();
+ ctx.arc(+diceSize * 0.250, -diceSize * 0.250, diceSize * 0.0625, 0, Math.PI * 2);
+ ctx.fill();
+ ctx.stroke();
+ }
+
+ /* lower right pip */
+ if (pips == 2 || pips == 3 || pips == 4 || pips == 5 || pips == 6) {
+ ctx.beginPath();
+ ctx.arc(+diceSize * 0.250, +diceSize * 0.250, diceSize * 0.0625, 0, Math.PI * 2);
+ ctx.fill();
+ ctx.stroke();
+ }
+
+ /* lower left pip */
+ if (pips == 4 || pips == 5 || pips == 6) {
+ ctx.beginPath();
+ ctx.arc(-diceSize * 0.250, +diceSize * 0.250, diceSize * 0.0625, 0, Math.PI * 2);
+ ctx.fill();
+ ctx.stroke();
+ }
+
+ /* middle left and right pip */
+ if (pips == 6) {
+ ctx.beginPath();
+ ctx.arc(-diceSize * 0.250, 0, diceSize * 0.0625, 0, Math.PI * 2);
+ ctx.fill();
+ ctx.stroke();
+ ctx.beginPath();
+ ctx.arc(+diceSize * 0.250, 0, diceSize * 0.0625, 0, Math.PI * 2);
+ ctx.fill();
+ ctx.stroke();
+ }
+
ctx.restore();
}
@@ -533,7 +715,7 @@ class Board extends React.Component {
let angle,
radius = this.radius,
- index = 1, pip;
+ index = 1, pip, roll = dice[0].pips + dice[1].pips;
/* Outer row */
angle = 0;
@@ -544,8 +726,15 @@ class Board extends React.Component {
} else {
pip = this.pips.pips[index++];
}
+ this.tiles[i].pip = pip;
drawTile(this.tiles[i], angle, radius - (i % 2) * 0.04);
+ if (roll == pip.roll) {
+ ctx.scale(1.25, 1.25);
+ }
drawPip(pip, angle, radius - (i % 2) * 0.04, this.tiles[i].jitter);
+ if (roll == pip.roll) {
+ ctx.scale(0.8, 0.8);
+ }
}
/* Middle row */
@@ -558,8 +747,15 @@ class Board extends React.Component {
} else {
pip = this.pips.pips[index++];
}
+ this.tiles[i].pip = pip;
drawTile(this.tiles[i], angle, radius);
+ if (roll == pip.roll) {
+ ctx.scale(1.25, 1.25);
+ }
drawPip(pip, angle, radius, this.tiles[i].jitter);
+ if (roll == pip.roll) {
+ ctx.scale(0.8, 0.8);
+ }
}
/* Center */
@@ -569,8 +765,15 @@ class Board extends React.Component {
} else {
pip = this.pips.pips[index++];
}
+ this.tiles[i].pip = pip;
drawTile(this.tiles[i], 0, 0);
+ if (roll == pip.roll) {
+ ctx.scale(1.25, 1.25);
+ }
drawPip(pip, 0, 0, this.tiles[i].jitter);
+ if (roll == pip.roll) {
+ ctx.scale(0.8, 0.8);
+ }
}
drawBorders(ctx) {
@@ -594,7 +797,7 @@ class Board extends React.Component {
componentDidMount() {
this.start = new Date();
- window.addEventListener("mousedown", this.randomize);
+ document.addEventListener("keyup", this.keyUp);
window.addEventListener("touchmove", this.mouseMove);
window.addEventListener("mousemove", this.mouseMove);
window.addEventListener("resize", this.updateDimensions);
@@ -607,7 +810,7 @@ class Board extends React.Component {
clearTimeout(this.updateSizeTimer);
this.updateSizeTimer = 0;
}
- window.removeEventListener("mousedown", this.randomize);
+ document.removeEventListener("keyup", this.keyUp);
window.removeEventListener("mousemove", this.mouseMove);
window.removeEventListener("touchmove", this.mouseMove);
window.removeEventListener("resize", this.updateDimensions);
@@ -620,11 +823,11 @@ class Board extends React.Component {
In hand
-
-
-
-
-
+
+
+
+
+
Available to play
@@ -651,7 +854,7 @@ class Board extends React.Component {
Stats
Points: 7
-
Cards: 8
+
Cards: {this.state.total}
Roads remaining: 4
Longest road: 7
Cities remaining: 4