From a58c2ed04a6b2489bc886af9c1f25579ce7ff7a7 Mon Sep 17 00:00:00 2001
From: Sorrel Bri <sorrel.bri.june@gmail.com>
Date: Tue, 28 Jan 2020 22:20:56 -0800
Subject: [PATCH] add table styling to game buttons in game room

---
 .../stylesheets/partials/_variables.scss      |  6 +-
 .../src/components/Button/Game/Game.js        |  1 +
 .../src/components/Button/Game/Game.scss      | 66 ++++++++++++-------
 .../play-node-go/src/pages/Room/Room.scss     | 14 +++-
 4 files changed, 60 insertions(+), 27 deletions(-)

diff --git a/packages/server/play-node-go/public/stylesheets/partials/_variables.scss b/packages/server/play-node-go/public/stylesheets/partials/_variables.scss
index 8630947..43f4c62 100644
--- a/packages/server/play-node-go/public/stylesheets/partials/_variables.scss
+++ b/packages/server/play-node-go/public/stylesheets/partials/_variables.scss
@@ -18,4 +18,8 @@ $break-points: (
 
 $colors: (
   "error": #aa3333,
-);
\ No newline at end of file
+  );
+
+$backgrounds: (
+  "game_room": radial-gradient(farthest-corner at 55% 40%, rgb(189, 131, 100) 0%, rgb(175, 113, 80) 65%, rgb(150, 90, 65) 90%, rgb(125, 65, 40) 100%),
+)  
\ No newline at end of file
diff --git a/packages/server/play-node-go/src/components/Button/Game/Game.js b/packages/server/play-node-go/src/components/Button/Game/Game.js
index 923f7ea..6c457e9 100644
--- a/packages/server/play-node-go/src/components/Button/Game/Game.js
+++ b/packages/server/play-node-go/src/components/Button/Game/Game.js
@@ -72,6 +72,7 @@ const GameButton = (props) => {
               <div className="table__player-bowl table__player-bowl--black"></div>
             </div>
             <div className="table__game-board">
+              <div className="table__game-board--grid"></div>
             </div>
             <div className="table__player-area table__player-area--white">
               <div className="table__player-bowl table__player-bowl--white"></div>
diff --git a/packages/server/play-node-go/src/components/Button/Game/Game.scss b/packages/server/play-node-go/src/components/Button/Game/Game.scss
index bd60edf..b5e73a9 100644
--- a/packages/server/play-node-go/src/components/Button/Game/Game.scss
+++ b/packages/server/play-node-go/src/components/Button/Game/Game.scss
@@ -1,13 +1,13 @@
 
 div.GameButton {
   align-items: stretch;
-  background-color: #aa9933;
+  box-shadow: -2vmin 4vmin 2vmin rgba(83, 53, 35, 0.81);
   display: flex;
   flex-flow: column nowrap;
-  height: 20vw;
+  height: 20vh;
   justify-content: space-around;
   margin: 1vw;
-  width: 20vw;
+  width: 20vh;
 }
 
 div.GameButton__seat {
@@ -17,7 +17,7 @@ div.GameButton__seat {
   width: 50%;
   
   &.GameButton__seat--black {
-    border: transparent;
+    border: rgba(83, 53, 35, 0.81);
     border-radius: 5vw 5vw 0 0;
   }
   
@@ -29,18 +29,16 @@ div.GameButton__seat {
 }
 
 div.GameButton__table {
-  background-color: blue;
   height: 80%;
   margin: 0;
   width: 100%;
 }
 
 div.GameButton__table__meta {
-  background-color: transparent;
   display: flex;
   flex-flow: column nowrap;
   height: 100%;
-  justify-content: space-around;
+  justify-content: space-between;
   width: 100%;
   z-index: 2;
 }
@@ -51,9 +49,12 @@ div.GameButton__table__meta * {
 
 div.GameButton__table__image {
   align-items: center;
-  background: radial-gradient(farthest-corner at 55% 40%, rgb(150, 200, 220) 0%, rgb(97, 166, 194) 65%, rgb(70,100,120) 100%);
-  border: 0.15vw solid rgb(150, 200, 220);
-  // ! change border sides
+  background: radial-gradient(
+    farthest-corner at 55% 40%, 
+    rgb(150, 200, 220) 0%, rgb(97, 166, 194) 65%, rgb(70,100,120) 100%
+  );
+  border-top: 0.1vw solid rgb(150, 200, 220);
+  border-right: 0.05vw solid rgb(97, 166, 194);
   border-radius: 0.3vw; 
   display: flex;
   flex-flow: column nowrap;
@@ -65,9 +66,23 @@ div.GameButton__table__image {
   z-index: 1;
   
   div.table__game-board {
-    background: radial-gradient(farthest-corner at 55% 40%, rgb(244, 230, 120) 0%, rgb(234, 178, 78) 65%, rgb(200, 160, 90) 90%, rgb(200, 140, 90) 100%);
+    background: radial-gradient(
+      farthest-corner at 55% 40%, 
+      rgb(244, 230, 120) 0%, rgb(234, 178, 78) 65%, rgb(200, 160, 90) 90%, rgb(200, 140, 90) 100%
+    );
     height: 60%;
     width: 60%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    div.table__game-board--grid {
+      background: 
+        repeating-linear-gradient(0deg, #000 0%, transparent 0.75%, transparent 4.25%, #000 5%), 
+        repeating-linear-gradient(90deg, #000 0%, transparent 0.75%, transparent 4.25%, #000 5%);
+      height: 94%;
+      width: 94%;
+    }
   }
 }
 
@@ -76,38 +91,43 @@ div.table__player-area {
   width: 60%;
 
   div.table__player-bowl {
-    background: radial-gradient(farthest-corner at 48% 54%, rgb(30, 5, 0) 0%, rgb(30, 5, 0) 2%, rgb(30, 5, 0) 32%, rgb(0,0,0)35%, rgb(116,48,17) 48%, rgb(140, 60, 40) 52%, rgb(100, 40, 5) 55%, rgb(116, 48, 17) 58%, rgb(140,60,40) 65%, rgb(100, 40, 5) 80%, rgb(80, 20, 0) 90%);
+    background: radial-gradient(
+      farthest-corner at 48% 54%, 
+      rgb(30, 5, 0) 0%, rgb(30, 5, 0) 2%, rgb(30, 5, 0) 32%, rgb(0,0,0)35%, rgb(116,48,17) 48%, 
+      rgb(140, 60, 40) 52%, rgb(100, 40, 5) 55%, rgb(116, 48, 17) 58%, rgb(140,60,40) 65%, 
+      rgb(100, 40, 5) 80%, rgb(80, 20, 0) 90%
+    );
     border-radius: 50%;
-    height: 2.75vw;
-    width: 2.75vw;
+    height: 100%;
 
     &--white {
-      margin: auto 75% auto auto;
+      margin: auto auto auto 75%;
     }
     
     &--black {
-      margin: auto auto auto 75%;
+      margin: auto 75% auto auto;
     }
 
   }
 }
 
 div.GameButton__player-data {
-  background-color: rgba(155,155,155,0.5);
+  background-color: rgba(255,255,255,0.65);
   display: flex;
-  justify-content: space-between;
-  margin: 0.5vw;
+  justify-content: space-around;
   max-width: 100%;
-
+  
   &.GameButton__player-data--white {
-    margin: 0 5vw 0 0.5vw;
+    margin: 0 5vw 1vw 0.5vw;
   }
-
+  
   &.GameButton__player-data--black {
-    margin: 0 0.5vw 0 5vw;
+    margin: 1vw 0.5vw 0 5vw;
   }
 }
 
 .GameButton__link {
+  background-color: rgba(255, 255, 255, 0.95);
   margin: 0 auto;
+  padding: .5vw;
 }
\ No newline at end of file
diff --git a/packages/server/play-node-go/src/pages/Room/Room.scss b/packages/server/play-node-go/src/pages/Room/Room.scss
index 9733dac..1b73bac 100644
--- a/packages/server/play-node-go/src/pages/Room/Room.scss
+++ b/packages/server/play-node-go/src/pages/Room/Room.scss
@@ -1,10 +1,15 @@
+@import '../../../public/stylesheets/partials/_variables';
+
 div.Room {
+  align-items: initial;
+  background: map-get($backgrounds, "game_room");
   display: flex;
   flex-flow: column nowrap;
   height: 100%;
-  width: 100%;
   justify-content: stretch;
-  align-items: initial;
+  overflow: scroll;
+  width: 100%;
+  height: 100%;
 
   h2 {
     justify-self:stretch;
@@ -15,9 +20,12 @@ div.Room {
   }
 
   div.Room__game-container {
-    height: 100%;
+    min-height: 100%;
+    min-width: 100%;
     justify-self: flex-start;
     align-self: flex-start;
+    display: flex;
+    flex-flow: row wrap;
   }
   
   div.Room__message-container {