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

Paramaterized tile board layout

Browse Source 
Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>
This commit is contained in:
James Ketrenos 2022-02-03 17:27:18 -08:00
parent dee04e86fb
commit b32340cb11
2 changed files with 62 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
client/src/Board.css
View File

@ -15,26 +15,20 @@
} }
.Tile { .Tile {
width: 90.75px;
height: 77.5px;
position: absolute; position: absolute;
background-position-y: 0px; background-position-y: 0px;
background-size: cover; background-size: cover;
transform: translate(-45.375px, -38.75px) rotate(-30deg); transform: translate(-50%, -50%) 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%);
} }
.Border { .Border {
width: 242px;
height: 70.6px;
position: absolute; position: absolute;
transform-origin: 0 0; transform-origin: 0 0;
background-size: cover; background-size: cover;
}
.Pip {
position: absolute;
background-size: 600% auto; /* pip-numbers is a 6x6 grid of pip images */
transform: translate(-50%, -50%);
} }

100
client/src/Board.js
View File

@ -4,8 +4,24 @@ import "./Board.css";
const base = process.env.PUBLIC_URL; const base = process.env.PUBLIC_URL;
const assetsPath = `${base}/assets`; 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 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 [signature, setSignature] = useState("");
const [pips, setPips] = useState(<></>); const [pips, setPips] = useState(<></>);
const [borders, setBorders] = useState(<></>); const [borders, setBorders] = useState(<></>);
@ -13,14 +29,17 @@ const Board = ({ game }) => {
const generatePips = () => { const generatePips = () => {
let row = 0, rowCount = 0; let row = 0, rowCount = 0;
let y = center.y - rows.length * 0.5 * 67, let y = tileHalfWidth - rows.length * 0.5 * tileWidth,
x = center.x - (rows[row] - 1) * 0.5 * 77.5; x = -(rows[row] - 1) * 0.5 * tileHeight;
return game.pipOrder.map(order => { return game.pipOrder.map(order => {
const pip = game.pips[order]; const pip = game.pips[order];
const div = <div const div = <div
pip={pip}
key={`pip-${order}`} key={`pip-${order}`}
className="Pip" className="Pip"
style={{ style={{
width: `${scale*2}em`,
height: `${scale*2}em`,
top: `${y}px`, top: `${y}px`,
left: `${x}px`, left: `${x}px`,
backgroundImage: `url(${assetsPath}/gfx/pip-numbers.png)`, backgroundImage: `url(${assetsPath}/gfx/pip-numbers.png)`,
@ -32,10 +51,10 @@ const Board = ({ game }) => {
if (++rowCount === rows[row]) { if (++rowCount === rows[row]) {
row++; row++;
rowCount = 0; rowCount = 0;
y += 67; y += tileWidth;
x = center.x - (rows[row] - 1) * 0.5 * 77.5; x = - (rows[row] - 1) * 0.5 * tileHeight;
} else { } else {
x += 77.5; x += tileHeight;
} }
return div; return div;
@ -44,28 +63,30 @@ const Board = ({ game }) => {
const generateTiles = () => { const generateTiles = () => {
let row = 0, rowCount = 0; let row = 0, rowCount = 0;
let y = center.y - rows.length * 0.5 * 67, let y = tileHalfWidth - rows.length * 0.5 * tileWidth,
x = center.x - (rows[row] - 1) * 0.5 * 77.5; x = -(rows[row] - 1) * 0.5 * tileHeight;
return game.tileOrder.map(order => { return game.tileOrder.map(order => {
const tile = game.tiles[order]; const tile = game.tiles[order];
let div = <div let div = <div
key={`${tile.type}-${tile.card}`} key={`${tile.type}-${tile.card}`}
className="Tile" className="Tile"
style={{ style={{
width: `${tileImageWidth}px`,
height: `${tileImageHeight}px`,
top: `${y}px`, top: `${y}px`,
left: `${x}px`, left: `${x}px`,
backgroundImage: `url(${assetsPath}/gfx/tiles-${tile.type}.png)`, backgroundImage: `url(${assetsPath}/gfx/tiles-${tile.type}.png)`,
backgroundPositionY: `-${tile.card*77.5}px` backgroundPositionY: `-${tile.card*tileHeight}px`
}} }}
/>; />;
if (++rowCount === rows[row]) { if (++rowCount === rows[row]) {
row++; row++;
rowCount = 0; rowCount = 0;
y += 67; y += tileWidth;
x = center.x - (rows[row] - 1) * 0.5 * 77.5; x = - (rows[row] - 1) * 0.5 * tileHeight;
} else { } else {
x += 77.5; x += tileHeight;
} }
return div; return div;
@ -73,53 +94,42 @@ const Board = ({ game }) => {
}; };
const generateBorders = () => { const generateBorders = () => {
const radius = 77.5 * 2, const radius = tileHeight * 2,
sides = 6; sides = 6;
let index = 0; let side = -1;
return game.borderOrder.map(order => { return game.borderOrder.map(order => {
// const border = game.borders[order]; const border = game.borders[order];
const side = order; side++;
let x = center.x + Math.sin(Math.PI - side / sides * 2. * Math.PI) * radius, let 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; y = Math.cos(Math.PI - side / sides * 2. * Math.PI) * radius;
let prev = (side === 0) ? 6 : side; let prev = (order === 0) ? 6 : order;
const file = `borders-${side+1}.${prev}.png`; const file = `borders-${order+1}.${prev}.png`;
index++;
return <div return <div
key={`border-${index}}`} key={`border-${order}`}
className="Border" className="Border"
style={{ style={{
width: `${borderImageWidth}px`,
height: `${borderImageHeight}px`,
top: `${y}px`, top: `${y}px`,
left: `${x}px`, left: `${x}px`,
transform: `rotate(${side*(360/sides)}deg) translate(89px, 0) scale(-1, -1)`, transform: `rotate(${side*(360/sides)}deg) translate(${borderOffset}px, 0) scale(-1, -1)`,
backgroundImage: `url(${assetsPath}/gfx/${file} )` backgroundImage: `url(${assetsPath}/gfx/${file} )`
}} }}
/>; />;
}); });
}; };
useEffect(() => { if (game && game.signature !== signature) {
if (game && game.signature !== signature) { console.log(`Generate for ${game.signature}`);
console.log(`Generate for ${game.signature}`); setPips(generatePips);
setPips(generatePips); setBorders(generateBorders);
setBorders(generateBorders); setTiles(generateTiles);
setTiles(generateTiles); setSignature(game.signature);
setSignature(game.signature); } else {
} else { if (!game) {
if (!game) { console.log(`No game in Board`);
console.log(`No game in Board`);
}
} }
}, [ }
setPips,
setBorders,
setTiles,
setSignature,
generatePips,
generateBorders,
generateTiles,
game,
signature
]);
return ( return (
<div className="Board"> <div className="Board">