defined helper for evaluating ui collapse state, working to implement alternate styles

src/components/Gameboard/Gameboard.tsx

@@ -46,17 +46,7 @@ export default function Gameboard({ state, setState }: StateProps) {
         })
     }, [state]);
 
-    const liftCollapsed = useCallback((collapsed: boolean, tier?: number) => {
+    const liftCollapsed = useCallback((collapsed: boolean, tier = 5) => {
-        /**
-         * if tier is not provided, default should refer to the nobles row
-         * update ui collapse state within gameboard
-         * pass this section of state as a dependency to new useEffect
-         * if any of the four rows are open, collapse player ui
-         * 
-         * todo: incorporate "collapse all rows" to player ui
-         * also incorporate "collapse player ui"?
-        **/
-        
         setUICollapse((prev: UIState) => {
             switch (tier) {
                 case 1:
@@ -81,11 +71,7 @@ export default function Gameboard({ state, setState }: StateProps) {
                     }
             }
         });
-
+    }, [UICollapse, setUICollapse])
-        
-    }, [UICollapse])
-
-    useEffect(() => console.log(UICollapse), [UICollapse]);
 
     // util functions, setup on mount
     useEffect(() => initializeBoard(state, setState), [])
@@ -142,7 +128,7 @@ export default function Gameboard({ state, setState }: StateProps) {
                 </div>
             )
         }
-    }, [state]);
+    }, [state, UICollapse]);
 
     return view
 }

src/components/Nobles/Nobles.tsx

@@ -7,6 +7,10 @@ import { useEffect, useState } from "react";
 export default function Nobles({ state, liftCollapsed }: NobleProps) {
     const [collapsed, setCollapsed] = useState(true);
 
+    useEffect(() => {
+        liftCollapsed(collapsed);
+    }, [collapsed]);
+
     if (!state.gameboard.nobles.length) {
         return (
             <div className="nobles-panel">
@@ -15,11 +19,7 @@ export default function Nobles({ state, liftCollapsed }: NobleProps) {
             </div>
         )
     }
-
+    
-    // useEffect(() => {
-    //     liftCollapsed(collapsed, 5);
-    // }, [collapsed]);
-
     return (
         <div className={`nobles-panel ${collapsed && 'collapsed'}`}>
             <div className="nobles-topbar">

src/components/Player/AllPlayers.scss

@@ -10,10 +10,6 @@
     background-color: rgb(188, 176, 146);
     color: black;
 
-    &.collapsed {
-        background-color: red;
-    }
-
     .player-ui {
         .subheader {
             font-weight: bold;
@@ -76,4 +72,10 @@
             }
         }
     }
+}
+
+.mini-player-ui {
+    background-color: red;
+    width: 10vw;
+    align-items: flex-end;
 }

src/components/Player/AllPlayers.tsx

@@ -6,9 +6,11 @@ import { AllPlayersProps } from "../../util/propTypes";
 import AvailableChips from "../Resources/AvailableChips";
 import SelectionView from "../Resources/SelectionView";
 import "./AllPlayers.scss"
+import { shouldRightSideCollapse } from "../../util/mechanics/shouldRightSideCollapse";
 
 export default function AllPlayers({ state, setState, liftSelection, UICollapse }: AllPlayersProps) {
     const [playerView, setPlayerView] = useState<JSX.Element>();
+    const [collapseClass, setCollapseClass] = useState("all-players");
 
     useEffect(() => {
         const currentPlayer = useCurrentPlayer(state);
@@ -16,8 +18,12 @@ export default function AllPlayers({ state, setState, liftSelection, UICollapse
         setPlayerView(<Player key={v4()} player={currentPlayer} state={state} setState={setState} />);
     }, [state]);
 
+    useEffect(() => {
+        setCollapseClass( shouldRightSideCollapse(UICollapse) ? "mini-player-ui" : "all-players" );
+    }, [UICollapse]);
+
     return (
-        <div className={UICollapse.playerUICollapsed ? "all-players collapsed" : "all-players"}>
+        <div className={collapseClass}>
             <SelectionView state={state} setState={setState} />
             <AvailableChips state={state} setState={setState} liftSelection={liftSelection} />
             { playerView }

src/util/mechanics/shouldRightSideCollapse.ts

@@ -0,0 +1,12 @@
+import { UIState } from "../types";
+
+export const shouldRightSideCollapse = (UICollapse: UIState) => {
+    for (let slice of Object.keys(UICollapse)) {
+        if (slice === "playerUICollapsed") continue;
+        if (!UICollapse[slice as keyof UIState]) {
+            return true;
+        }
+    }
+
+    return false;
+}

src/util/propTypes.ts

@@ -1,3 +1,4 @@
+import { Dispatch, SetStateAction } from "react";
 import { AppState, CardData, PlayerData, ResourceCost, setStateType, UIState } from "./types";
 
 export interface StateProps {
@@ -13,11 +14,11 @@ export interface CardProps extends StateProps {
 
 export interface CardRowProps extends StateProps {
     tier: number
-    liftCollapsed: (collapsed: boolean, tier?: number) => void
+    liftCollapsed: (collapsed: boolean, tier: number) => void
 }
 
 export interface NobleProps extends StateProps {
-    liftCollapsed: (collapsed: boolean, tier?: number) => void
+    liftCollapsed: (collapsed: boolean) => void
 }
 
 export interface PlayerProps extends StateProps {