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

Prettier settlements and roads

Browse Source 
Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>
This commit is contained in:
James Ketrenos 2022-02-05 18:03:43 -08:00
parent d8c8b74e53
commit 76bd9611d1
2 changed files with 48 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
client/src/Board.css
View File

@ -43,25 +43,35 @@
} }
.Corner { .Corner {
filter: drop-shadow(2.5px 2.5px 1.5px rgba(0, 0, 0, 0.75));
z-index: 10;
position: absolute; position: absolute;
display: flex; display: flex;
align-items: center; align-items: center;
justify-items: center; justify-items: center;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid transparent; width: 1.5em;
/* border: 2px solid black;*/ height: 1.5em;
border-radius: 50%;
width: 2.5em;
height: 2.5em;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
z-index: 5;
}
.Corner-Shape {
display: flex;
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
clip-path: polygon(50% 0%,70% 15%,70% 2%,90% 2%,90% 30%,100% 40%,100% 100%,65% 100%,65% 65%,35% 65%,35% 100%,0% 100%,0% 40%);
} }
.Corner .Option { .Corner .Option {
background-color: rgba(255, 255, 255, 0.5); background-color: rgba(255, 255, 255, 0.5);
} }
.Corner:hover { .Corner-Shape:hover {
border-color: black; background-color: white;
} }
.Road { .Road {
@ -70,38 +80,52 @@
align-items: center; align-items: center;
justify-items: center; justify-items: center;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid transparent;
/* border: 2px solid black; */
transform-origin: 50% 0; transform-origin: 50% 0;
width: 1.75em; width: 0.5em;
height: 2.5em; height: 2.5em;
z-index: 0;
} }
.Road-Shape {
display: flex;
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
clip-path: polygon(0% 20%,0% 80%,100% 80%,100% 20%);
}
.Road .Option { .Road .Option {
background-color: rgba(255, 255, 255, 0.5); background-color: rgba(255, 255, 255, 0.5);
} }
.Road:hover { .Road-Shape:hover {
border-color: black; background-color: white;
} }
.Selected { .Selected {
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 1);
box-shadow: 5px 5px 5px black; box-shadow: 5px 5px 5px black;
} }
[data-color='R'] { [data-color='R'] > .Corner-Shape,
background-color: rgba(255, 0, 0, 0.5); [data-color='R'] > .Road-Shape {
background-color: rgba(255, 0, 0, 1);
} }
[data-color='O'] { [data-color='O'] > .Corner-Shape,
background-color: rgba(255, 196, 0, 0.5); [data-color='O'] > .Road-Shape {
background-color: rgba(255, 196, 0, 1);
} }
[data-color='W'] { [data-color='W'] > .Corner-Shape,
background-color: rgba(255, 255, 255, 0.5); [data-color='W'] > .Road-Shape {
background-color: rgba(255, 255, 255, 1);
} }
[data-color='B'] { [data-color='B'] > .Corner-Shape,
background-color: rgba(0, 0, 255, 0.5); [data-color='B'] > .Road-Shape {
background-color: rgba(0, 0, 255, 1);
} }

6
client/src/Board.js
View File

@ -65,7 +65,7 @@ const Board = ({ table, game }) => {
top: `${road.top}px`, top: `${road.top}px`,
left: `${road.left}px` left: `${road.left}px`
}} }}
></div>; ><div className="Road-Shape"/></div>;
}; };
const Corner = ({corner}) => { const Corner = ({corner}) => {
@ -75,14 +75,14 @@ const Board = ({ table, game }) => {
return; return;
}; };
return <div className="Corner" return <div className="Corner"
onClick={onClick} onClick={onClick}
data-index={corner.index} data-index={corner.index}
style={{ style={{
top: `${corner.top}px`, top: `${corner.top}px`,
left: `${corner.left}px` left: `${corner.left}px`
}} }}
></div>; ><div className="Corner-Shape"/></div>;
}; };
const generateRoads = () => { const generateRoads = () => {