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 {
filter: drop-shadow(2.5px 2.5px 1.5px rgba(0, 0, 0, 0.75));
z-index: 10;
position: absolute;
display: flex;
align-items: center;
justify-items: center;
box-sizing: border-box;
border: 1px solid transparent;
/* border: 2px solid black;*/
border-radius: 50%;
width: 2.5em;
height: 2.5em;
width: 1.5em;
height: 1.5em;
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 {
background-color: rgba(255, 255, 255, 0.5);
}
.Corner:hover {
border-color: black;
.Corner-Shape:hover {
background-color: white;
}
.Road {
@ -70,38 +80,52 @@
align-items: center;
justify-items: center;
box-sizing: border-box;
border: 1px solid transparent;
/* border: 2px solid black; */
transform-origin: 50% 0;
width: 1.75em;
width: 0.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 {
background-color: rgba(255, 255, 255, 0.5);
}
.Road:hover {
border-color: black;
.Road-Shape:hover {
background-color: white;
}
.Selected {
background-color: rgba(0, 0, 0, 0.5);
background-color: rgba(0, 0, 0, 1);
box-shadow: 5px 5px 5px black;
}
[data-color='R'] {
background-color: rgba(255, 0, 0, 0.5);
[data-color='R'] > .Corner-Shape,
[data-color='R'] > .Road-Shape {
background-color: rgba(255, 0, 0, 1);
}
[data-color='O'] {
background-color: rgba(255, 196, 0, 0.5);
[data-color='O'] > .Corner-Shape,
[data-color='O'] > .Road-Shape {
background-color: rgba(255, 196, 0, 1);
}
[data-color='W'] {
background-color: rgba(255, 255, 255, 0.5);
[data-color='W'] > .Corner-Shape,
[data-color='W'] > .Road-Shape {
background-color: rgba(255, 255, 255, 1);
}
[data-color='B'] {
background-color: rgba(0, 0, 255, 0.5);
[data-color='B'] > .Corner-Shape,
[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`,
left: `${road.left}px`
}}
></div>;
><div className="Road-Shape"/></div>;
};
const Corner = ({corner}) => {
@ -75,14 +75,14 @@ const Board = ({ table, game }) => {
return;
};
return <div className="Corner"
return <div className="Corner"
onClick={onClick}
data-index={corner.index}
style={{
top: `${corner.top}px`,
left: `${corner.left}px`
}}
></div>;
><div className="Corner-Shape"/></div>;
};
const generateRoads = () => {