From a9a6b835007d9a9eea2d79ef224f896c8b3e3822 Mon Sep 17 00:00:00 2001
From: Mikayla Dobson <93477693+innocuous-symmetry@users.noreply.github.com>
Date: Fri, 26 Aug 2022 16:58:51 -0500
Subject: [PATCH] streamlined gameboard view, proportion adjustments

---
 src/components/Card/CardRow.scss        | 12 ++++++++++++
 src/components/Card/CardRow.tsx         |  2 +-
 src/components/Gameboard/Gameboard.scss | 13 +++++++++++++
 src/components/Gameboard/Gameboard.tsx  |  2 +-
 src/components/Nobles/Nobles.scss       | 17 +++++++++++++++--
 src/components/Nobles/Nobles.tsx        |  3 +--
 src/components/Player/AllPlayers.scss   |  3 +++
 7 files changed, 46 insertions(+), 6 deletions(-)

diff --git a/src/components/Card/CardRow.scss b/src/components/Card/CardRow.scss
index 3c8d1d6..8a79b83 100644
--- a/src/components/Card/CardRow.scss
+++ b/src/components/Card/CardRow.scss
@@ -64,6 +64,18 @@
             color: white;
             width: 25%;
         }
+
+        .cc-tier {
+            &-1 {
+                background-color: rgb(3, 30, 3);
+            }
+            &-2 {
+                background-color: rgb(80, 80, 7);
+            }
+            &-3 {
+                background-color: rgb(9, 9, 77);
+            }
+        }
     }
 }
   
diff --git a/src/components/Card/CardRow.tsx b/src/components/Card/CardRow.tsx
index 7e6a996..4e899ec 100644
--- a/src/components/Card/CardRow.tsx
+++ b/src/components/Card/CardRow.tsx
@@ -33,7 +33,7 @@ export default function CardRow({tier, state, setState}: CardRowProps) {
                 <button onClick={() => setCollapsed(!collapsed)}>{collapsed ? "Show" : "Hide"}</button>
             </div>
             <div className={`card-row-cards-visible ${collapsed && 'hidden'}`}>
-                <div className="card-count">
+                <div className={`card-count cc-tier-${tier}`}>
                     <p>Remaining: {state.gameboard.deck[typedTier].length}</p>
                 </div>
                 { cards && cards.map((cardData: CardData) => {
diff --git a/src/components/Gameboard/Gameboard.scss b/src/components/Gameboard/Gameboard.scss
index e69de29..fec468d 100644
--- a/src/components/Gameboard/Gameboard.scss
+++ b/src/components/Gameboard/Gameboard.scss
@@ -0,0 +1,13 @@
+.gameboard-rows {
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: center;
+
+    background-color: rgb(57, 57, 65);
+    width: 90vw;
+    padding: 1rem 1rem 4rem;
+
+    .round-marker {
+        font-size: 1.5rem;
+    }
+}
\ No newline at end of file
diff --git a/src/components/Gameboard/Gameboard.tsx b/src/components/Gameboard/Gameboard.tsx
index d6c3e11..297516b 100644
--- a/src/components/Gameboard/Gameboard.tsx
+++ b/src/components/Gameboard/Gameboard.tsx
@@ -87,7 +87,7 @@ export default function Gameboard({ state, setState }: StateProps) {
         } else {
             setView(
                 <div className="gameboard-rows">
-                    <strong>Round: {state.round}</strong>
+                    <h1 className="round-marker">Round: {state.round}</h1>
                     <Nobles state={state} setState={setState} />
                     <CardRow tier={3} state={state} setState={setState} />
                     <CardRow tier={2} state={state} setState={setState} />
diff --git a/src/components/Nobles/Nobles.scss b/src/components/Nobles/Nobles.scss
index 0cebf83..f22dbfd 100644
--- a/src/components/Nobles/Nobles.scss
+++ b/src/components/Nobles/Nobles.scss
@@ -3,10 +3,16 @@
 .nobles-panel {
     display: flex;
     flex-flow: column nowrap;
-    background-color: rgb(240, 236, 225);
+    background-color: rgb(212, 196, 152);
     color: black;
-    padding: 1.5rem;
+    padding: 1.5rem 0;
+    width: 65vw;
 
+    .noble-header {
+        position: relative;
+        bottom: 1rem;
+    }
+    
     .all-nobles {
         display: flex;
         flex-flow: row nowrap;
@@ -15,6 +21,13 @@
         .noble-card {
             display: inline-flex;
             flex-flow: column nowrap;
+            align-items: center;
+            height: 100%;
+            min-width: 25%;
+            border-right: 1px solid black;
+            &:last-child {
+                border-right: none;
+            }
 
             .mapped-noble-costs {
                 display: flex;
diff --git a/src/components/Nobles/Nobles.tsx b/src/components/Nobles/Nobles.tsx
index 537486f..49b0859 100644
--- a/src/components/Nobles/Nobles.tsx
+++ b/src/components/Nobles/Nobles.tsx
@@ -15,13 +15,12 @@ export default function Nobles({ state }: StateProps) {
 
     return (
         <div className="nobles-panel">
-            <strong>NOBLES</strong>
+            <strong className="noble-header">NOBLES: 3 points each</strong>
             <div className="all-nobles">
                 {
                 state && state.gameboard.nobles.map((noble: NobleData) => {
                     return (
                         <div className="noble-card" key={v4()}>
-                            <p>{noble.points} points</p>
                             <p>Cost:</p>
                             <div className="mapped-noble-costs">
                             {
diff --git a/src/components/Player/AllPlayers.scss b/src/components/Player/AllPlayers.scss
index cc8a204..0d9d233 100644
--- a/src/components/Player/AllPlayers.scss
+++ b/src/components/Player/AllPlayers.scss
@@ -3,8 +3,11 @@
 
 .all-players {
     display: flex;
+    justify-content: space-around;
+    min-width: 80vw;
     background-color: rgb(237, 213, 156);
     color: black;
+
     .player-ui {
         p {
             margin: 1rem;