to do: debugging for handling ui collapse states

src/components/Card/CardRow.tsx

@@ -6,7 +6,7 @@ import { CardData } from "../../util/types"
 import Card from "../Card/Card"
 import "./CardRow.scss";
 
-export default function CardRow({tier, state, setState}: CardRowProps) {
+export default function CardRow({tier, state, setState, liftCollapsed}: CardRowProps) {
     const [collapsed, setCollapsed] = useState(true);
     const typedTier = cardTierToKey(tier);
 
@@ -27,11 +27,7 @@ export default function CardRow({tier, state, setState}: CardRowProps) {
     }
 
     useEffect(() => {
-        /**
-         * run callback function to pass state of collapsed to parent component
-         * repeat this process in Nobles.tsx
-        **/
-       console.log(collapsed);
+        liftCollapsed(collapsed, tier);
     }, [collapsed])
 
     return (

src/components/Gameboard/Gameboard.tsx

@@ -57,17 +57,35 @@ export default function Gameboard({ state, setState }: StateProps) {
          * also incorporate "collapse player ui"?
         **/
         
-        switch (tier) {
-            case 1:
-                setUICollapse((prev) => {
-                    return prev;
-                })
-                break;
-            case 2: break;
-            case 3: break;
-            default: break;
-        }
-    }, [])
+        setUICollapse((prev: UIState) => {
+            switch (tier) {
+                case 1:
+                    return {
+                        ...prev,
+                        tierOneCollapsed: collapsed
+                    }
+                case 2:
+                    return {
+                        ...prev,
+                        tierTwoCollapsed: collapsed
+                    }
+                case 3:
+                    return {
+                        ...prev,
+                        tierThreeCollapsed: collapsed
+                    }
+                default:
+                    return {
+                        ...prev,
+                        noblesCollapsed: collapsed
+                    }
+            }
+        });
+
+        
+    }, [UICollapse])
+
+    useEffect(() => console.log(UICollapse), [UICollapse]);
 
     // util functions, setup on mount
     useEffect(() => initializeBoard(state, setState), [])
@@ -118,7 +136,7 @@ export default function Gameboard({ state, setState }: StateProps) {
                             <CardRow tier={1} state={state} setState={setState} liftCollapsed={liftCollapsed} />
                         </section>
                         <section className="gameboard-right">
-                            <AllPlayers state={state} setState={setState} liftSelection={liftSelection} />
+                            <AllPlayers state={state} setState={setState} liftSelection={liftSelection} UICollapse={UICollapse} />
                         </section>
                     </div>
                 </div>

src/components/Nobles/Nobles.tsx

@@ -2,9 +2,9 @@ import { v4 } from "uuid";
 import { NobleData, ResourceCost } from "../../util/types";
 import { NobleProps } from "../../util/propTypes";
 import "../Nobles/Nobles.scss"
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
-export default function Nobles({ state }: NobleProps) {
+export default function Nobles({ state, liftCollapsed }: NobleProps) {
     const [collapsed, setCollapsed] = useState(true);
 
     if (!state.gameboard.nobles.length) {
@@ -16,6 +16,10 @@ export default function Nobles({ state }: NobleProps) {
         )
     }
 
+    // useEffect(() => {
+    //     liftCollapsed(collapsed, 5);
+    // }, [collapsed]);
+
     return (
         <div className={`nobles-panel ${collapsed && 'collapsed'}`}>
             <div className="nobles-topbar">

src/components/Player/AllPlayers.scss

@@ -10,6 +10,10 @@
     background-color: rgb(188, 176, 146);
     color: black;
 
+    &.collapsed {
+        background-color: red;
+    }
+
     .player-ui {
         .subheader {
             font-weight: bold;

src/components/Player/AllPlayers.tsx

@@ -1,18 +1,15 @@
+import { useEffect, useState } from "react";
 import { v4 } from "uuid";
 import Player from "./Player";
-import { PlayerData } from "../../util/types";
-import { ResourceProps } from "../../util/propTypes";
-import "./AllPlayers.scss"
+import { useCurrentPlayer } from "../../hooks/useCurrentPlayer";
+import { AllPlayersProps } from "../../util/propTypes";
 import AvailableChips from "../Resources/AvailableChips";
 import SelectionView from "../Resources/SelectionView";
-import { useEffect, useState } from "react";
-import { useCurrentPlayer } from "../../hooks/useCurrentPlayer";
+import "./AllPlayers.scss"
 
-export default function AllPlayers({ state, setState, liftSelection }: ResourceProps) {
+export default function AllPlayers({ state, setState, liftSelection, UICollapse }: AllPlayersProps) {
     const [playerView, setPlayerView] = useState<JSX.Element>();
 
-    const playerPool = state.players?.map((player: PlayerData) => <Player key={v4()} player={player} state={state} setState={setState} />);
-
     useEffect(() => {
         const currentPlayer = useCurrentPlayer(state);
         if (!currentPlayer) return;
@@ -20,7 +17,7 @@ export default function AllPlayers({ state, setState, liftSelection }: ResourceP
     }, [state]);
 
     return (
-        <div className="all-players">
+        <div className={UICollapse.playerUICollapsed ? "all-players collapsed" : "all-players"}>
             <SelectionView state={state} setState={setState} />
             <AvailableChips state={state} setState={setState} liftSelection={liftSelection} />
             { playerView }

src/util/propTypes.ts

@@ -1,4 +1,4 @@
-import { AppState, CardData, PlayerData, ResourceCost, SetActionType, setStateType } from "./types";
+import { AppState, CardData, PlayerData, ResourceCost, setStateType, UIState } from "./types";
 
 export interface StateProps {
     state: AppState,
@@ -28,3 +28,6 @@ export interface ResourceProps extends StateProps {
     liftSelection: (value: keyof ResourceCost) => void
 }
 
+export interface AllPlayersProps extends ResourceProps {
+    UICollapse: UIState
+}