Paramaterized tile board layout
Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>
This commit is contained in:
James Ketrenos
parent
dee04e86fb
commit
b32340cb11
@ -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%);
|
||||
}
|
||||
@ -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 = <div
|
||||
pip={pip}
|
||||
key={`pip-${order}`}
|
||||
className="Pip"
|
||||
style={{
|
||||
width: `${scale*2}em`,
|
||||
height: `${scale*2}em`,
|
||||
top: `${y}px`,
|
||||
left: `${x}px`,
|
||||
backgroundImage: `url(${assetsPath}/gfx/pip-numbers.png)`,
|
||||
@ -32,10 +51,10 @@ const Board = ({ game }) => {
|
||||
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 = <div
|
||||
key={`${tile.type}-${tile.card}`}
|
||||
className="Tile"
|
||||
style={{
|
||||
width: `${tileImageWidth}px`,
|
||||
height: `${tileImageHeight}px`,
|
||||
top: `${y}px`,
|
||||
left: `${x}px`,
|
||||
backgroundImage: `url(${assetsPath}/gfx/tiles-${tile.type}.png)`,
|
||||
backgroundPositionY: `-${tile.card*77.5}px`
|
||||
backgroundPositionY: `-${tile.card*tileHeight}px`
|
||||
}}
|
||||
/>;
|
||||
|
||||
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 <div
|
||||
key={`border-${index}}`}
|
||||
key={`border-${order}`}
|
||||
className="Border"
|
||||
style={{
|
||||
width: `${borderImageWidth}px`,
|
||||
height: `${borderImageHeight}px`,
|
||||
top: `${y}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} )`
|
||||
}}
|
||||
/>;
|
||||
});
|
||||
};
|
||||
|
||||
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 (
|
||||
<div className="Board">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user