From 71fec57a9441a5577cd7665338ec4a42cdbc910d Mon Sep 17 00:00:00 2001 From: Mikayla Dobson Date: Sun, 11 Sep 2022 13:21:09 -0500 Subject: [PATCH] defined helper for evaluating ui collapse state, working to implement alternate styles --- src/components/Gameboard/Gameboard.tsx | 20 +++---------------- src/components/Nobles/Nobles.tsx | 10 +++++----- src/components/Player/AllPlayers.scss | 10 ++++++---- src/components/Player/AllPlayers.tsx | 8 +++++++- src/util/mechanics/shouldRightSideCollapse.ts | 12 +++++++++++ src/util/propTypes.ts | 5 +++-- 6 files changed, 36 insertions(+), 29 deletions(-) create mode 100644 src/util/mechanics/shouldRightSideCollapse.ts 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 {