From 6ac83ef00875e34c1c7050811711a0e248675687 Mon Sep 17 00:00:00 2001
From: Mikayla Dobson <mikaylaherself@gmail.com>
Date: Sat, 10 Sep 2022 19:55:35 -0500
Subject: [PATCH] to do: debugging for handling ui collapse states

---
 src/components/Card/CardRow.tsx        |  8 ++---
 src/components/Gameboard/Gameboard.tsx | 42 ++++++++++++++++++--------
 src/components/Nobles/Nobles.tsx       |  8 +++--
 src/components/Player/AllPlayers.scss  |  4 +++
 src/components/Player/AllPlayers.tsx   | 15 ++++-----
 src/util/propTypes.ts                  |  5 ++-
 6 files changed, 52 insertions(+), 30 deletions(-)

diff --git a/src/components/Card/CardRow.tsx b/src/components/Card/CardRow.tsx
index 7296a11..113d517 100644
--- a/src/components/Card/CardRow.tsx
+++ b/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 (
diff --git a/src/components/Gameboard/Gameboard.tsx b/src/components/Gameboard/Gameboard.tsx
index 7f3435b..acf1817 100644
--- a/src/components/Gameboard/Gameboard.tsx
+++ b/src/components/Gameboard/Gameboard.tsx
@@ -56,18 +56,36 @@ export default function Gameboard({ state, setState }: StateProps) {
          * todo: incorporate "collapse all rows" to player ui
          * also incorporate "collapse player ui"?
         **/
+        
+        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
+                    }
+            }
+        });
 
-        switch (tier) {
-            case 1:
-                setUICollapse((prev) => {
-                    return prev;
-                })
-                break;
-            case 2: break;
-            case 3: break;
-            default: break;
-        }
-    }, [])
+        
+    }, [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>
diff --git a/src/components/Nobles/Nobles.tsx b/src/components/Nobles/Nobles.tsx
index 7f9b8aa..5e84011 100644
--- a/src/components/Nobles/Nobles.tsx
+++ b/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">
diff --git a/src/components/Player/AllPlayers.scss b/src/components/Player/AllPlayers.scss
index 133c373..2699e7d 100644
--- a/src/components/Player/AllPlayers.scss
+++ b/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;
diff --git a/src/components/Player/AllPlayers.tsx b/src/components/Player/AllPlayers.tsx
index 3568887..dcb2714 100644
--- a/src/components/Player/AllPlayers.tsx
+++ b/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 }
diff --git a/src/util/propTypes.ts b/src/util/propTypes.ts
index 7fcf4bd..3dd67ea 100644
--- a/src/util/propTypes.ts
+++ b/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
+}