From a22c360d901e6e5a0a8bc106dfec73c4008364ff Mon Sep 17 00:00:00 2001
From: James Ketrenos <james_gitlab@ketrenos.com>
Date: Sat, 11 Apr 2020 00:27:35 -0700
Subject: [PATCH] Fix highlight of rolled total

Signed-off-by: James Ketrenos <james_gitlab@ketrenos.com>
---
 src/Board.js | 38 +++++++++++++++++---------------------
 1 file changed, 17 insertions(+), 21 deletions(-)

diff --git a/src/Board.js b/src/Board.js
index dce664c..10e5413 100755
--- a/src/Board.js
+++ b/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) {