in progress: major changes to gameboard styling

src/components/Card/CardRow.scss

@@ -4,8 +4,8 @@
 .card-row {
     display: flex;
     flex-flow: column nowrap;
-    margin: 1rem;
-    width: 80vw;
+    margin: 1rem 0;
+    width: 55vw;
 
     .card-row-top-bar {
         display: flex;

src/components/Gameboard/Gameboard.scss

@@ -1,11 +1,29 @@
-.gameboard-rows {
+.gameboard {
     display: flex;
-    flex-flow: column nowrap;
+    flex-flow: row nowrap;
     align-items: center;
+    justify-content: center;
 
     background-color: rgb(57, 57, 65);
-    width: 90vw;
-    padding: 1rem 1rem 4rem;
+    width: 100%;
+
+    section {
+        display: flex;
+        flex-flow: column nowrap;
+        align-items: center;
+        justify-content: flex-start;
+        margin: 1rem;
+    }
+
+    .gameboard-left {
+        min-width: 50vw;
+        padding: 1rem;
+    }
+
+    .gameboard-right {
+        min-width: 35vw;
+        padding: 1rem;
+    }
 
     .round-marker {
         font-size: 1.5rem;

src/components/Gameboard/Gameboard.tsx

@@ -86,15 +86,19 @@ export default function Gameboard({ state, setState }: StateProps) {
             );
         } else {
             setView(
-                <div className="gameboard-rows">
-                    <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} />
-                    <CardRow tier={1} state={state} setState={setState} />
-                    <SelectionView state={state} setState={setState} />
-                    <AvailableChips state={state} setState={setState} liftSelection={liftSelection} />
-                    <AllPlayers state={state} setState={setState} />
+                <div className="gameboard">
+                    <section className="gameboard-left">
+                        <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} />
+                        <CardRow tier={1} state={state} setState={setState} />
+                    </section>
+                    <section className="gameboard-right">
+                        <SelectionView state={state} setState={setState} />
+                        <AvailableChips state={state} setState={setState} liftSelection={liftSelection} />
+                        <AllPlayers state={state} setState={setState} />
+                    </section>
                 </div>
             )
         }

src/components/Nobles/Nobles.scss

@@ -5,12 +5,17 @@
     flex-flow: column nowrap;
     background-color: rgb(212, 196, 152);
     color: black;
-    padding: 1.5rem 0;
-    width: 65vw;
+    padding: 1rem 0;
+    min-width: 55vw;
 
-    .noble-header {
-        position: relative;
-        bottom: 1rem;
+    .nobles-topbar {
+        display: flex;
+        flex-flow: row nowrap;
+        justify-content: center;
+        align-items: baseline;
+        > * {
+            margin: 0 1rem;
+        }
     }
     
     .all-nobles {

src/components/Nobles/Nobles.tsx

@@ -2,8 +2,11 @@ import { v4 } from "uuid";
 import { NobleData, ResourceCost } from "../../util/types";
 import { StateProps } from "../../util/propTypes";
 import "../Nobles/Nobles.scss"
+import { useState } from "react";
 
 export default function Nobles({ state }: StateProps) {
+    const [collapsed, setCollapsed] = useState(true);
+
     if (!state.gameboard.nobles.length) {
         return (
             <div className="nobles-panel">
@@ -15,8 +18,11 @@ export default function Nobles({ state }: StateProps) {
 
     return (
         <div className="nobles-panel">
-            <strong className="noble-header">NOBLES: 3 points each</strong>
-            <div className="all-nobles">
+            <div className="nobles-topbar">
+                <strong className="nobles-header">NOBLES</strong>
+                <button onClick={() => setCollapsed(!collapsed)}>{collapsed ? "Show" : "Hide"}</button>
+            </div>
+            <div className={collapsed ? "hidden" : "all-nobles"}>
                 {
                 state && state.gameboard.nobles.map((noble: NobleData) => {
                     return (

src/components/Player/AllPlayers.scss

@@ -5,11 +5,13 @@
 .all-players {
     display: flex;
     justify-content: space-around;
-    min-width: 80vw;
+    max-width: 80vw;
+    padding: 0 2rem;
     background-color: rgb(237, 213, 156);
     color: black;
 
     .player-ui {
+        width: 30vw;
         p {
             margin: 1rem;
         }

src/components/Player/Player.tsx

@@ -52,13 +52,12 @@ export default function Player({ player, state, setState }: PlayerProps) {
     }
 
     return (
-        <div className="player-ui" key={v4()}>
+        <div className={dynamic && dynamic.turnActive ? 'player-ui' : 'hidden'} key={v4()}>
             <p className="subheader">Name: {player.name} {player.starter && "(round starter)"}</p>
 
             {/* Dynamic data from state */}
             <section className="turn-and-action-based">
                 <p>Score: {dynamic && dynamic.points}</p>
-                <p>{dynamic?.turnActive ? "It's your turn!" : "..."}</p>
 
                 {/* Player actions */}
                 <button
@@ -78,12 +77,9 @@ export default function Player({ player, state, setState }: PlayerProps) {
                     onClick={() => handleClick(2)}>
                         Reserve Card
                 </button>
-
             </section>
 
             <section className="resources">
-                <p className="subheader">{dynamic?.name}'s Resources</p>
-
                 <div className="player-chips">
                     <p>Chips:</p>
                     <div className="player-chips-enum">

src/components/Resources/AvailableChips.scss

@@ -2,8 +2,10 @@
 
 .available-chips {
     display: flex;
-    flex-flow: row nowrap;
-    background-color: rgb(236, 238, 186);
+    flex-flow: row wrap;
+    max-width: 50%;
+    align-items: center;
+    justify-content: center;
     color: black;
 
     p {

src/components/Resources/SelectionView.tsx

@@ -15,6 +15,8 @@ export default function SelectionView({ state, setState }: StateProps) {
     const [view, setView] = useState(<></>);
 
     useEffect(() => {
+        setCurrentPlayer(useCurrentPlayer(state));
+
         setView(() => {
             switch (true) {
                 case (actionTypes[0].active):
@@ -36,9 +38,7 @@ export default function SelectionView({ state, setState }: StateProps) {
                     );
             }
         })
-
-        setCurrentPlayer(useCurrentPlayer(state));
-    }, [state, state.actions, setState])
+    }, [state, setState])
 
     return view
 }

src/sass/App.scss

@@ -8,8 +8,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    max-width: 1280px;
-    margin: 0 auto;
-    padding: 2rem;
+    width: 99vw;
+    margin: 0 0.5vw;
     text-align: center;
 }