diff --git a/src/components/Gameboard/Gameboard.tsx b/src/components/Gameboard/Gameboard.tsx
index acf1817..8f30159 100644
--- a/src/components/Gameboard/Gameboard.tsx
+++ b/src/components/Gameboard/Gameboard.tsx
@@ -46,17 +46,7 @@ export default function Gameboard({ state, setState }: StateProps) {
})
}, [state]);
- const liftCollapsed = useCallback((collapsed: boolean, tier?: number) => {
- /**
- * 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"?
- **/
-
+ const liftCollapsed = useCallback((collapsed: boolean, tier = 5) => {
setUICollapse((prev: UIState) => {
switch (tier) {
case 1:
@@ -81,11 +71,7 @@ export default function Gameboard({ state, setState }: StateProps) {
}
}
});
-
-
- }, [UICollapse])
-
- useEffect(() => console.log(UICollapse), [UICollapse]);
+ }, [UICollapse, setUICollapse])
// util functions, setup on mount
useEffect(() => initializeBoard(state, setState), [])
@@ -142,7 +128,7 @@ export default function Gameboard({ state, setState }: StateProps) {
)
}
- }, [state]);
+ }, [state, UICollapse]);
return view
}
\ No newline at end of file
diff --git a/src/components/Nobles/Nobles.tsx b/src/components/Nobles/Nobles.tsx
index 5e84011..c2c2d14 100644
--- a/src/components/Nobles/Nobles.tsx
+++ b/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 (
@@ -15,11 +19,7 @@ export default function Nobles({ state, liftCollapsed }: NobleProps) {
)
}
-
- // useEffect(() => {
- // liftCollapsed(collapsed, 5);
- // }, [collapsed]);
-
+
return (
diff --git a/src/components/Player/AllPlayers.scss b/src/components/Player/AllPlayers.scss
index 2699e7d..8d7979f 100644
--- a/src/components/Player/AllPlayers.scss
+++ b/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;
}
\ No newline at end of file
diff --git a/src/components/Player/AllPlayers.tsx b/src/components/Player/AllPlayers.tsx
index dcb2714..24ace09 100644
--- a/src/components/Player/AllPlayers.tsx
+++ b/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
();
+ const [collapseClass, setCollapseClass] = useState("all-players");
useEffect(() => {
const currentPlayer = useCurrentPlayer(state);
@@ -16,8 +18,12 @@ export default function AllPlayers({ state, setState, liftSelection, UICollapse
setPlayerView();
}, [state]);
+ useEffect(() => {
+ setCollapseClass( shouldRightSideCollapse(UICollapse) ? "mini-player-ui" : "all-players" );
+ }, [UICollapse]);
+
return (
-
+
{ playerView }
diff --git a/src/util/mechanics/shouldRightSideCollapse.ts b/src/util/mechanics/shouldRightSideCollapse.ts
new file mode 100644
index 0000000..11f081b
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/util/propTypes.ts b/src/util/propTypes.ts
index 3dd67ea..7e290f4 100644
--- a/src/util/propTypes.ts
+++ b/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 {