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

Board can now be moved around in its own element

Browse Source 
Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>
This commit is contained in:
James Ketrenos 2022-02-03 11:54:51 -08:00
parent c228d73c5b
commit bb9345cb3d
3 changed files with 19 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
client/src/Board.css
View File

@ -1,8 +1,17 @@
.Board { .Board {
display: block; display: flex;
align-self: center;
position: relative;
width: 518px;
height: 450px;
}
/* Offset 'BorderBox' such that 0,0 is the center
* of 'Board' */
.BoardBox {
position: absolute; position: absolute;
width: 100%; left: 50%;
height: 100%; top: 50%;
} }
.Tile { .Tile {

10
client/src/Board.js
View File

@ -5,7 +5,7 @@ const base = process.env.PUBLIC_URL;
const assetsPath = `${base}/assets`; const assetsPath = `${base}/assets`;
const Board = ({ game }) => { const Board = ({ game }) => {
const center = { x: 300, y: 350 }, rows = [3, 4, 5, 4, 3]; const center = { x: 0, y: 33.5 }, 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(<></>);
@ -123,9 +123,11 @@ const Board = ({ game }) => {
return ( return (
<div className="Board"> <div className="Board">
{ borders } <div className="BoardBox">
{ tiles } { borders }
{ pips } { tiles }
{ pips }
</div>
</div> </div>
); );
}; };

2
client/src/Table.css
View File

@ -4,7 +4,7 @@
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
height: 100%; height: 100%;
justify-content: right; justify-content: space-between; /* left-justify 'board', right-justify 'game' */
background-image: url("./assets/tabletop.png"); background-image: url("./assets/tabletop.png");
} }