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 (