diff --git a/client/src/Board.css b/client/src/Board.css
index 936c36f..cd6ba12 100644
--- a/client/src/Board.css
+++ b/client/src/Board.css
@@ -15,26 +15,20 @@
}
.Tile {
- width: 90.75px;
- height: 77.5px;
position: absolute;
background-position-y: 0px;
background-size: cover;
- transform: translate(-45.375px, -38.75px) rotate(-30deg);
-}
-
-.Pip {
- width: 2em;
- height: 2em;
- position: absolute;
- background-size: 600% auto; /* pip-numbers is a 6x6 grid of pip images */
- transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%) rotate(-30deg);
}
.Border {
- width: 242px;
- height: 70.6px;
position: absolute;
transform-origin: 0 0;
background-size: cover;
+}
+
+.Pip {
+ position: absolute;
+ background-size: 600% auto; /* pip-numbers is a 6x6 grid of pip images */
+ transform: translate(-50%, -50%);
}
\ No newline at end of file
diff --git a/client/src/Board.js b/client/src/Board.js
index f53c672..d4d8604 100644
--- a/client/src/Board.js
+++ b/client/src/Board.js
@@ -4,8 +4,24 @@ import "./Board.css";
const base = process.env.PUBLIC_URL;
const assetsPath = `${base}/assets`;
+const scale = 1;
+
+const
+ hexRatio = 1.1547,
+ tileWidth = scale * 67,
+ tileHalfWidth = tileWidth * 0.5,
+ tileHeight = tileWidth * hexRatio,
+ borderOffset = scale * 86; /* ~1/10th border image width... hand tuned */
+
+ /* Actual sizing */
+const
+ tileImageWidth = scale * 90, /* Based on hand tuned and image width */
+ tileImageHeight = tileImageWidth/hexRatio,
+ borderImageWidth = (2 + 2/3) * tileImageWidth, /* 2.667 * .Tile.width */
+ borderImageHeight = borderImageWidth * 0.29; /* 0.29 * .Border.height */
+
const Board = ({ game }) => {
- const center = { x: 0, y: 33.5 }, rows = [3, 4, 5, 4, 3];
+ const rows = [3, 4, 5, 4, 3];
const [signature, setSignature] = useState("");
const [pips, setPips] = useState(<>>);
const [borders, setBorders] = useState(<>>);
@@ -13,14 +29,17 @@ const Board = ({ game }) => {
const generatePips = () => {
let row = 0, rowCount = 0;
- let y = center.y - rows.length * 0.5 * 67,
- x = center.x - (rows[row] - 1) * 0.5 * 77.5;
+ let y = tileHalfWidth - rows.length * 0.5 * tileWidth,
+ x = -(rows[row] - 1) * 0.5 * tileHeight;
return game.pipOrder.map(order => {
const pip = game.pips[order];
const div =
{
if (++rowCount === rows[row]) {
row++;
rowCount = 0;
- y += 67;
- x = center.x - (rows[row] - 1) * 0.5 * 77.5;
+ y += tileWidth;
+ x = - (rows[row] - 1) * 0.5 * tileHeight;
} else {
- x += 77.5;
+ x += tileHeight;
}
return div;
@@ -44,28 +63,30 @@ const Board = ({ game }) => {
const generateTiles = () => {
let row = 0, rowCount = 0;
- let y = center.y - rows.length * 0.5 * 67,
- x = center.x - (rows[row] - 1) * 0.5 * 77.5;
+ let y = tileHalfWidth - rows.length * 0.5 * tileWidth,
+ x = -(rows[row] - 1) * 0.5 * tileHeight;
return game.tileOrder.map(order => {
const tile = game.tiles[order];
let div =
;
if (++rowCount === rows[row]) {
row++;
rowCount = 0;
- y += 67;
- x = center.x - (rows[row] - 1) * 0.5 * 77.5;
+ y += tileWidth;
+ x = - (rows[row] - 1) * 0.5 * tileHeight;
} else {
- x += 77.5;
+ x += tileHeight;
}
return div;
@@ -73,53 +94,42 @@ const Board = ({ game }) => {
};
const generateBorders = () => {
- const radius = 77.5 * 2,
+ const radius = tileHeight * 2,
sides = 6;
- let index = 0;
+ let side = -1;
return game.borderOrder.map(order => {
-// const border = game.borders[order];
- const side = order;
- let x = center.x + Math.sin(Math.PI - side / sides * 2. * Math.PI) * radius,
- y = -33.5 + center.y + Math.cos(Math.PI - side / sides * 2. * Math.PI) * radius;
- let prev = (side === 0) ? 6 : side;
- const file = `borders-${side+1}.${prev}.png`;
- index++;
+ const border = game.borders[order];
+ side++;
+ 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`;
return
;
});
};
- useEffect(() => {
- if (game && game.signature !== signature) {
- console.log(`Generate for ${game.signature}`);
- setPips(generatePips);
- setBorders(generateBorders);
- setTiles(generateTiles);
- setSignature(game.signature);
- } else {
- if (!game) {
- console.log(`No game in Board`);
- }
+ if (game && game.signature !== signature) {
+ console.log(`Generate for ${game.signature}`);
+ setPips(generatePips);
+ setBorders(generateBorders);
+ setTiles(generateTiles);
+ setSignature(game.signature);
+ } else {
+ if (!game) {
+ console.log(`No game in Board`);
}
- }, [
- setPips,
- setBorders,
- setTiles,
- setSignature,
- generatePips,
- generateBorders,
- generateTiles,
- game,
- signature
- ]);
+ }
return (