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, tileHeight = tileWidth * hexRatio,
tileHalfHeight = tileHeight * 0.5, tileHalfHeight = tileHeight * 0.5,
radius = tileHeight * 2, 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 */ /* Actual sizing */
const const
@ -286,7 +287,7 @@ const Board = ({ game }) => {
return game.borderOrder.map(order => { return game.borderOrder.map(order => {
const border = game.borders[order]; const border = game.borders[order];
side++; 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; y = Math.cos(Math.PI - side / sides * 2. * Math.PI) * radius;
let prev = (order === 0) ? 6 : order; let prev = (order === 0) ? 6 : order;
const file = `borders-${order+1}.${prev}.png`; const file = `borders-${order+1}.${prev}.png`;
@ -299,7 +300,7 @@ const Board = ({ game }) => {
height: `${borderImageHeight}px`, height: `${borderImageHeight}px`,
top: `${y}px`, top: `${y}px`,
left: `${x}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} )` backgroundImage: `url(${assetsPath}/gfx/${file} )`
}} }}
/>; />;