jketreno/peddlers-of-ketran
1
0
Fork 0
Code Issues 42 Activity

Line up the borders to reduce gaps

Browse Source 
Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>
This commit is contained in:
James Ketrenos 2022-02-04 22:00:49 -08:00
parent 7e7b016a70
commit dbedd9bacb
1 changed files with 4 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
client/src/Board.js
View File

@ -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} )`
}}
/>;