From 76bd9611d1157d615165d5b1ddece52d9c87d959 Mon Sep 17 00:00:00 2001
From: James Ketrenos <james_eikona@ketrenos.com>
Date: Sat, 5 Feb 2022 18:03:43 -0800
Subject: [PATCH] Prettier settlements and roads

Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>
---
 client/src/Board.css | 66 ++++++++++++++++++++++++++++++--------------
 client/src/Board.js  |  6 ++--
 2 files changed, 48 insertions(+), 24 deletions(-)

diff --git a/client/src/Board.css b/client/src/Board.css
index c325d97..dbce636 100644
--- a/client/src/Board.css
+++ b/client/src/Board.css
@@ -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);
 }
\ No newline at end of file
diff --git a/client/src/Board.js b/client/src/Board.js
index 4d0baa7..26954cc 100644
--- a/client/src/Board.js
+++ b/client/src/Board.js
@@ -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 = () => {