From dbedd9bacbbf34c7564c24052ed16d67ef2cf9e0 Mon Sep 17 00:00:00 2001
From: James Ketrenos <james_eikona@ketrenos.com>
Date: Fri, 4 Feb 2022 22:00:49 -0800
Subject: [PATCH] Line up the borders to reduce gaps

Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>
---
 client/src/Board.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/client/src/Board.js b/client/src/Board.js
index 832c356..dafee6b 100644
--- a/client/src/Board.js
+++ b/client/src/Board.js
@@ -22,7 +22,8 @@ const Board = ({ game }) => {
     tileHeight = tileWidth * hexRatio,
     tileHalfHeight = tileHeight * 0.5,
     radius = tileHeight * 2,
-    borderOffset = 86; /* ~1/10th border image width... hand tuned */
+    borderOffsetX = 86, /* ~1/10th border image width... hand tuned */
+    borderOffsetY = 3;
 
   /* Actual sizing */
   const
@@ -286,7 +287,7 @@ const Board = ({ game }) => {
     return game.borderOrder.map(order => {
       const border = game.borders[order];
       side++;
-      let x = Math.sin(Math.PI - side / sides * 2. * Math.PI) * radius,
+      let x =  + Math.sin(Math.PI - side / sides * 2. * Math.PI) * radius,
         y = Math.cos(Math.PI - side / sides * 2. * Math.PI) * radius;
       let prev = (order === 0) ? 6 : order;
       const file = `borders-${order+1}.${prev}.png`;
@@ -299,7 +300,7 @@ const Board = ({ game }) => {
           height: `${borderImageHeight}px`,
           top: `${y}px`,
           left: `${x}px`,
-          transform: `rotate(${side*(360/sides)}deg) translate(${borderOffset}px, 0) scale(-1, -1)`,
+          transform: `rotate(${side*(360/sides)}deg) translate(${borderOffsetX}px, ${borderOffsetY}px) scale(-1, -1)`,
           backgroundImage: `url(${assetsPath}/gfx/${file} )`
         }}
       />;