Fix highlight of rolled total
Signed-off-by: James Ketrenos <james_gitlab@ketrenos.com>
This commit is contained in:
parent
0599cf2f99
commit
a22c360d90
38
src/Board.js
38
src/Board.js
@ -87,7 +87,7 @@ const Pips = (board) => {
|
||||
file = 'pip-numbers.png';
|
||||
|
||||
let pips = [
|
||||
{ roll: 0, pips: 0, y: 3. / 6., x: 0. / 6. },
|
||||
{ roll: 7, pips: 0, y: 3. / 6., x: 0. / 6. },
|
||||
{ roll: 5, pips: 4, y: 0. / 6., x: 0. / 6. },
|
||||
{ roll: 2, pips: 1, y: 0. / 6., x: 1. / 6. },
|
||||
{ roll: 6, pips: 5, y: 0. / 6., x: 2. / 6. },
|
||||
@ -525,6 +525,20 @@ class Board extends React.Component {
|
||||
this.drawPips(ctx);
|
||||
ctx.restore();
|
||||
|
||||
ctx.fillStyle = "rgba(128, 128, 0, 0.125)";
|
||||
ctx.strokeStyle = "rgba(255, 255, 0, 0.5)";
|
||||
const roll = dice[0].pips + dice[1].pips;
|
||||
if (roll) this.tiles.forEach((tile) => {
|
||||
if (tile.pip.roll == roll) {
|
||||
ctx.save();
|
||||
ctx.beginPath();
|
||||
ctx.arc(tile.pos.x, tile.pos.y, tileHeight * 0.5, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
ctx.restore();
|
||||
}
|
||||
});
|
||||
|
||||
if (this.closest.tile) {
|
||||
ctx.save();
|
||||
ctx.translate(this.closest.tile.pos.x, this.closest.tile.pos.y);
|
||||
@ -680,8 +694,8 @@ class Board extends React.Component {
|
||||
const image = this.pips.image, pipSize = 0.06;
|
||||
|
||||
function drawTile(tile, angle, radius) {
|
||||
tile.pos.x = Math.sin(angle) * radius;
|
||||
tile.pos.y = Math.cos(angle) * radius;
|
||||
tile.pos.x = Math.sin(-angle) * radius;
|
||||
tile.pos.y = Math.cos(-angle) * radius;
|
||||
const image = tile.image;
|
||||
ctx.save();
|
||||
ctx.rotate(angle);
|
||||
@ -728,13 +742,7 @@ class Board extends React.Component {
|
||||
}
|
||||
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 */
|
||||
@ -749,13 +757,7 @@ class Board extends React.Component {
|
||||
}
|
||||
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 */
|
||||
@ -767,13 +769,7 @@ class Board extends React.Component {
|
||||
}
|
||||
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) {
|
||||
|
Loading…
x
Reference in New Issue
Block a user