Tile, pip, and border ordering is working!
Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>
This commit is contained in:
James Ketrenos
parent
7af8d02802
commit
6cf6ab9612
@ -1,4 +1,4 @@
|
||||
import React, { useCallback, useRef, useState, useEffect } from "react";
|
||||
import React, { useState, useEffect } from "react";
|
||||
import "./Board.css";
|
||||
|
||||
const base = process.env.PUBLIC_URL;
|
||||
@ -15,24 +15,20 @@ const Board = ({ game }) => {
|
||||
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 divs = [], count = 19;
|
||||
for (let i = 0; i < count; i++) {
|
||||
let code = (i === (count - 1))
|
||||
? 'robber'
|
||||
: String.fromCharCode(65 + i);
|
||||
divs.push(
|
||||
<div
|
||||
key={`pip-${(i).toString(16)}`}
|
||||
className="Pip"
|
||||
style={{
|
||||
top: `${y}px`,
|
||||
left: `${x}px`,
|
||||
backgroundImage: `url(${assetsPath}/gfx/pip-numbers.png)`,
|
||||
backgroundPositionX: `${ 100. * (i % 6) / 5.}%`,
|
||||
backgroundPositionY: `${ 100 * Math.floor(i / 6) / 5. }%`
|
||||
}}/>
|
||||
);
|
||||
|
||||
return game.pipOrder.map(order => {
|
||||
const pip = game.pips[order];
|
||||
const div = <div
|
||||
key={`pip-${order}`}
|
||||
className="Pip"
|
||||
style={{
|
||||
top: `${y}px`,
|
||||
left: `${x}px`,
|
||||
backgroundImage: `url(${assetsPath}/gfx/pip-numbers.png)`,
|
||||
backgroundPositionX: `${ 100. * (order % 6) / 5.}%`,
|
||||
backgroundPositionY: `${ 100 * Math.floor(order / 6) / 5. }%`
|
||||
}}
|
||||
/>;
|
||||
|
||||
if (++rowCount === rows[row]) {
|
||||
row++;
|
||||
rowCount = 0;
|
||||
@ -41,98 +37,68 @@ const Board = ({ game }) => {
|
||||
} else {
|
||||
x += 77.5;
|
||||
}
|
||||
}
|
||||
return divs;
|
||||
|
||||
return div;
|
||||
});
|
||||
};
|
||||
|
||||
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;
|
||||
return game.tileOrder.map(order => {
|
||||
const tile = game.tiles[order];
|
||||
let div = <div
|
||||
key={`${tile.type}-${tile.card}`}
|
||||
className="Tile"
|
||||
style={{
|
||||
top: `${y}px`,
|
||||
left: `${x}px`,
|
||||
backgroundImage: `url(${assetsPath}/gfx/tiles-${tile.type}.png)`,
|
||||
backgroundPositionY: `-${tile.card*77.5}px`
|
||||
}}
|
||||
/>;
|
||||
|
||||
if (++rowCount === rows[row]) {
|
||||
row++;
|
||||
rowCount = 0;
|
||||
y += 67;
|
||||
x = center.x - (rows[row] - 1) * 0.5 * 77.5;
|
||||
} else {
|
||||
x += 77.5;
|
||||
}
|
||||
|
||||
return [ "wood", "wheat", "stone", "sheep", "brick", "robber" ].map((type) => {
|
||||
let count;
|
||||
switch (type) {
|
||||
case "robber":
|
||||
count = 1;
|
||||
break;
|
||||
case "brick":
|
||||
count = 3;
|
||||
break;
|
||||
case "wood":
|
||||
count = 4;
|
||||
break;
|
||||
case "sheep":
|
||||
count = 4;
|
||||
break;
|
||||
case "stone":
|
||||
count = 3;
|
||||
break;
|
||||
case "wheat":
|
||||
count = 4;
|
||||
break;
|
||||
default:
|
||||
console.error(`Invalid type: ${type}`);
|
||||
break;
|
||||
}
|
||||
let divs = [];
|
||||
|
||||
for (let i = 0; i < count; i++) {
|
||||
divs.push(
|
||||
<div
|
||||
key={`${type}-${(i).toString(16)}`}
|
||||
className="Tile"
|
||||
style={{
|
||||
top: `${y}px`,
|
||||
left: `${x}px`,
|
||||
backgroundImage: `url(${assetsPath}/gfx/tiles-${type}.png)`,
|
||||
backgroundPositionY: `-${i*77.5}px`
|
||||
}}/>
|
||||
);
|
||||
|
||||
if (++rowCount === rows[row]) {
|
||||
row++;
|
||||
rowCount = 0;
|
||||
y += 67;
|
||||
x = center.x - (rows[row] - 1) * 0.5 * 77.5;
|
||||
} else {
|
||||
x += 77.5;
|
||||
}
|
||||
}
|
||||
|
||||
return divs;
|
||||
return div;
|
||||
});
|
||||
};
|
||||
|
||||
const generateBorders = () => {
|
||||
const divs = [],
|
||||
radius = 77.5 * 2;
|
||||
const sides = 6;
|
||||
for (let side = 0; side < sides; side++) {
|
||||
const radius = 77.5 * 2,
|
||||
sides = 6;
|
||||
let index = 0;
|
||||
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;
|
||||
let prev = (side === 0) ? 6 : side;
|
||||
const file = `borders-${side+1}.${prev}.png`;
|
||||
divs.push(<div
|
||||
key={`border-${side.toString(16)}`}
|
||||
index++;
|
||||
return <div
|
||||
key={`border-${index}}`}
|
||||
className="Border"
|
||||
style={{
|
||||
top: `${y}px`,
|
||||
left: `${x}px`,
|
||||
transform: `rotate(${side*(360/sides)}deg) translate(89px, 0) scale(-1, -1)`,
|
||||
backgroundImage: `url(${assetsPath}/gfx/${file} )`
|
||||
}}>{side}</div>);
|
||||
}
|
||||
return divs;
|
||||
}}
|
||||
/>;
|
||||
});
|
||||
};
|
||||
|
||||
const updateBorders = () => {
|
||||
for (let i = 0; i < 6; i++) {
|
||||
|
||||
}
|
||||
}
|
||||
useEffect(() => {
|
||||
if (game && game.signature != signature) {
|
||||
if (game && game.signature !== signature) {
|
||||
console.log(`Generate for ${game.signature}`);
|
||||
setPips(generatePips);
|
||||
setBorders(generateBorders);
|
||||
@ -143,7 +109,17 @@ const Board = ({ game }) => {
|
||||
console.log(`No game in Board`);
|
||||
}
|
||||
}
|
||||
}, [ setPips, setBorders, setTiles, setSignature, game]);
|
||||
}, [
|
||||
setPips,
|
||||
setBorders,
|
||||
setTiles,
|
||||
setSignature,
|
||||
generatePips,
|
||||
generateBorders,
|
||||
generateTiles,
|
||||
game,
|
||||
signature
|
||||
]);
|
||||
|
||||
return (
|
||||
<div className="Board" style={{backgroundImage: `url(${assetsPath}/gfx/tabletop.png)`}}>
|
||||
|
||||
@ -36,25 +36,25 @@ function shuffle(array) {
|
||||
|
||||
const assetData = {
|
||||
tiles: [
|
||||
"wood",
|
||||
"wood",
|
||||
"wood",
|
||||
"wood",
|
||||
"wheat",
|
||||
"wheat",
|
||||
"wheat",
|
||||
"wheat",
|
||||
"stone",
|
||||
"stone",
|
||||
"stone",
|
||||
"sheep",
|
||||
"sheep",
|
||||
"sheep",
|
||||
"sheep",
|
||||
"brick",
|
||||
"brick",
|
||||
"brick",
|
||||
"robber"
|
||||
{ type: "robber", card: 0 },
|
||||
{ type: "wood", card: 0 },
|
||||
{ type: "wood", card: 1 },
|
||||
{ type: "wood", card: 2 },
|
||||
{ type: "wood", card: 3 },
|
||||
{ type: "wheat", card: 0 },
|
||||
{ type: "wheat", card: 1 },
|
||||
{ type: "wheat", card: 2 },
|
||||
{ type: "wheat", card: 3 },
|
||||
{ type: "stone", card: 0 },
|
||||
{ type: "stone", card: 1 },
|
||||
{ type: "stone", card: 2 },
|
||||
{ type: "sheep", card: 0 },
|
||||
{ type: "sheep", card: 1 },
|
||||
{ type: "sheep", card: 2 },
|
||||
{ type: "sheep", card: 3 },
|
||||
{ type: "brick", card: 0 },
|
||||
{ type: "brick", card: 1 },
|
||||
{ type: "brick", card: 2 }
|
||||
],
|
||||
pips: [
|
||||
{ roll: 7, pips: 0 },
|
||||
@ -681,11 +681,11 @@ const shuffleBoard = (game) => {
|
||||
for (let i = 0, p = 0; i < sequence.length; i++) {
|
||||
const target = sequence[i];
|
||||
/* If the target tile is the desert (18), then set the
|
||||
* pip value to the robber (0) otherwise set
|
||||
* pip value to the robber (18) otherwise set
|
||||
* the target pip value to the currently incremeneting
|
||||
* pip value. */
|
||||
if (game.tileOrder[target] === 18) {
|
||||
game.pipOrder[target] = 0;
|
||||
if (game.tiles[game.tileOrder[target]].type === 'robber') {
|
||||
game.pipOrder[target] = 18;
|
||||
} else {
|
||||
game.pipOrder[target] = p++;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user