incorporating callback to lift ui collapse state

src/components/Card/CardRow.scss

@@ -7,10 +7,6 @@
     margin: 1rem 0;
     width: 45vw;
 
-    &.collapsed {
-        width: 15vw;
-    }
-
     .card-row-top-bar {
         display: flex;
         align-items: center;

src/components/Card/CardRow.tsx

@@ -1,6 +1,6 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { v4 } from 'uuid';
-import cardTierToKey from '../../util/cardTierToKey';
+import cardTierToKey from '../../util/mechanics/cardTierToKey';
 import { CardRowProps } from '../../util/propTypes';
 import { CardData } from "../../util/types"
 import Card from "../Card/Card"
@@ -26,6 +26,14 @@ export default function CardRow({tier, state, setState}: CardRowProps) {
             break;
     }
 
+    useEffect(() => {
+        /**
+         * run callback function to pass state of collapsed to parent component
+         * repeat this process in Nobles.tsx
+        **/
+       console.log(collapsed);
+    }, [collapsed])
+
     return (
         <div className={`card-row tier-${tier} ${collapsed && 'collapsed'}`}>
             <div className="card-row-top-bar">

src/components/Gameboard/Gameboard.tsx

@@ -1,18 +1,17 @@
 // types, data, utils
 import { useCallback, useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
-import initializeBoard, { setCardRows } from '../../util/initializeBoard';
+import initializeBoard, { setCardRows } from '../../util/setup/initializeBoard';
-import { AppState, PlayerData, ResourceCost } from '../../util/types';
+import { AppState, PlayerData, ResourceCost, UIState } from '../../util/types';
+import { defaultUIState } from '../../util/setup/defaultUIState';
 import { getChipsActions } from '../Player/ActionMethods';
 import { StateProps } from '../../util/propTypes';
 import './Gameboard.scss';
 
 // components
 import Nobles from '../Nobles/Nobles';
-import AvailableChips from '../Resources/AvailableChips';
 import AllPlayers from '../Player/AllPlayers';
 import CardRow from '../Card/CardRow';
-import SelectionView from '../Resources/SelectionView';
 import { useCurrentPlayer } from '../../hooks/useCurrentPlayer';
 import usePreviousPlayer from '../../hooks/usePreviousPlayer';
 const { validateChips } = getChipsActions;
@@ -20,7 +19,7 @@ const { validateChips } = getChipsActions;
 export default function Gameboard({ state, setState }: StateProps) {
     const [view, setView] = useState(<p>Loading...</p>);
     const [endgame, setEndgame] = useState<PlayerData>();
-    const [winner, setWinner] = useState<PlayerData>();
+    const [UICollapse, setUICollapse] = useState<UIState>(defaultUIState);
 
     // callbacks for lifting state
     const liftSelection = useCallback((value: keyof ResourceCost) => {
@@ -47,6 +46,29 @@ 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"?
+        **/
+
+        switch (tier) {
+            case 1:
+                setUICollapse((prev) => {
+                    return prev;
+                })
+                break;
+            case 2: break;
+            case 3: break;
+            default: break;
+        }
+    }, [])
+
     // util functions, setup on mount
     useEffect(() => initializeBoard(state, setState), [])
 
@@ -90,10 +112,10 @@ export default function Gameboard({ state, setState }: StateProps) {
                     <h2 id="round-marker">Round: {state.round}</h2>
                     <div className="gameboard-columns">
                         <section className="gameboard-left">
-                            <Nobles state={state} setState={setState} />
+                            <Nobles state={state} setState={setState} liftCollapsed={liftCollapsed} />
-                            <CardRow tier={3} state={state} setState={setState} />
+                            <CardRow tier={3} state={state} setState={setState} liftCollapsed={liftCollapsed} />
-                            <CardRow tier={2} state={state} setState={setState} />
+                            <CardRow tier={2} state={state} setState={setState} liftCollapsed={liftCollapsed} />
-                            <CardRow tier={1} state={state} setState={setState} />
+                            <CardRow tier={1} state={state} setState={setState} liftCollapsed={liftCollapsed} />
                         </section>
                         <section className="gameboard-right">
                             <AllPlayers state={state} setState={setState} liftSelection={liftSelection} />

src/components/Gameboard/gameboard.test.ts

@@ -1,5 +1,5 @@
 import { expect, it, describe, vi } from 'vitest';
-import initializeBoard from '../../util/initializeBoard';
+import initializeBoard from '../../util/setup/initializeBoard';
 import { initialState } from '../../hooks/stateSetters';
 import { AppState, setStateType } from '../../util/types';
 

src/components/Nobles/Nobles.scss

@@ -6,11 +6,7 @@
     background-color: rgb(212, 196, 152);
     color: black;
     padding: 1rem 0;
-    width: 55vw;
+    width: 45vw;
-
-    &.collapsed {
-        width: 15vw;
-    }
 
     .nobles-topbar {
         display: flex;

src/components/Nobles/Nobles.tsx

@@ -1,10 +1,10 @@
 import { v4 } from "uuid";
 import { NobleData, ResourceCost } from "../../util/types";
-import { StateProps } from "../../util/propTypes";
+import { NobleProps } from "../../util/propTypes";
 import "../Nobles/Nobles.scss"
 import { useState } from "react";
 
-export default function Nobles({ state }: StateProps) {
+export default function Nobles({ state }: NobleProps) {
     const [collapsed, setCollapsed] = useState(true);
 
     if (!state.gameboard.nobles.length) {
@@ -19,7 +19,7 @@ export default function Nobles({ state }: StateProps) {
     return (
         <div className={`nobles-panel ${collapsed && 'collapsed'}`}>
             <div className="nobles-topbar">
-                <strong className="nobles-header">NOBLES</strong>
+                <strong className="nobles-header">Nobles</strong>
                 <button onClick={() => setCollapsed(!collapsed)}>{collapsed ? "Show" : "Hide"}</button>
             </div>
             <div className={collapsed ? "hidden" : "all-nobles"}>

src/components/Nobles/canPickUpNoble.ts

@@ -1,4 +1,4 @@
-import getTotalBuyingPower from "../../util/getTotalBuyingPower";
+import getTotalBuyingPower from "../../util/mechanics/getTotalBuyingPower";
 import { NobleData, PlayerData, ResourceCost } from "../../util/types";
 
 export const canPickUpNoble = (player: PlayerData, noble: NobleData) => {

src/components/Player/ActionMethods/buyCardActions.ts

@@ -1,7 +1,7 @@
-import { turnOrderUtil } from "../../../util/turnOrderUtil";
+import { turnOrderUtil } from "../../../util/mechanics/TurnOrderUtil";
-import getTotalBuyingPower from "../../../util/getTotalBuyingPower";
+import getTotalBuyingPower from "../../../util/mechanics/getTotalBuyingPower";
 import { AppState, CardData, PlayerCards, ResourceCost, setStateType } from "../../../util/types";
-import cardTierToKey from "../../../util/cardTierToKey";
+import cardTierToKey from "../../../util/mechanics/cardTierToKey";
 import { canPickUpNoble } from "../../Nobles/canPickUpNoble";
 import { initialActions, setStateGetNoble } from "../../../hooks/stateSetters";
 import { useCurrentPlayer } from "../../../hooks/useCurrentPlayer";

src/components/Player/ActionMethods/getChipsActions.ts

@@ -1,7 +1,7 @@
 import { AppState, PlayerData, setStateType } from '../../../util/types';
 import { useCurrentPlayer } from '../../../hooks/useCurrentPlayer';
 // @ts-ignore
-import { turnOrderUtil } from '../../../util/turnOrderUtil';
+import { turnOrderUtil } from '../../../util/mechanics/TurnOrderUtil';
 import { initialActions } from "../../../hooks/stateSetters";
 
 export const hasMaxChips = (player: PlayerData | null): boolean => {

src/components/Player/ActionMethods/reserveCardActions.ts

@@ -1,6 +1,6 @@
-import cardTierToKey from "../../../util/cardTierToKey";
+import cardTierToKey from "../../../util/mechanics/cardTierToKey";
 import { initialActions } from "../../../hooks/stateSetters";
-import { turnOrderUtil } from "../../../util/turnOrderUtil";
+import { turnOrderUtil } from "../../../util/mechanics/TurnOrderUtil";
 import { AppState, CardData, FullDeck, PlayerData, setStateType } from "../../../util/types";
 import { useCurrentPlayer } from "../../../hooks/useCurrentPlayer";
 

src/components/Player/AllPlayers.scss

@@ -7,7 +7,7 @@
     flex-flow: column nowrap;
     justify-content: space-around;
     align-items: center;
-    background-color: rgb(237, 213, 156);
+    background-color: rgb(188, 176, 146);
     color: black;
 
     .player-ui {

src/components/Resources/AvailableChips.scss

@@ -1,16 +1,22 @@
 @import "../../sass/helper/mixins";
+@import "../../sass/helper/variables";
 
 .available-chips {
     display: flex;
     flex-flow: row wrap;
-    max-width: 50%;
     align-items: center;
     justify-content: center;
     color: black;
+    margin: 1rem;
 
     p {
         margin: 1rem;
     }
 
     @include map-gem-values(".chips");
+    @each $gem in $gemlist {
+        .chips-#{$gem} {
+            border-radius: 50%;
+        }
+    }
 }

src/components/Resources/AvailableChips.tsx

@@ -19,7 +19,7 @@ export default function AvailableChips({ state, liftSelection }: ResourceProps)
                             disabled={state.gameboard.tradingResources[typedKey] <= 0}
                             onClick={() => liftSelection(typedKey)}
                             >
-                            {key}: {state.gameboard.tradingResources[typedKey]}
+                            {state.gameboard.tradingResources[typedKey]}
                         </button>
                     )
                 })

src/components/Resources/SelectionView.scss

@@ -9,8 +9,8 @@
         
         p {
             margin: 1rem;
-            padding: 0.5rem;
+            padding: 1rem;
-            border-radius: 25%;
+            border-radius: 50%;
         }
     }
 }

src/components/Resources/ViewHTML.tsx

@@ -28,7 +28,7 @@ export const GetChipsHTML = ({ state, setState }: StateProps) => {
             <div className="current-selections">
                 {
                     state.actions.getChips.active &&
-                    state.actions.getChips.selection?.map((each: keyof ResourceCost) => <p className={`selection-value-${each}`} key={v4()}>{each}</p>)
+                    state.actions.getChips.selection?.map((each: keyof ResourceCost) => <p className={`selection-value-${each}`} key={v4()}>{each[0].toUpperCase()}</p>)
                 }
             </div>
             {

src/sass/App.scss

@@ -5,6 +5,11 @@
         @extend %hidden;
     }
 
+    .collapsed {
+        width: 20vw;
+        align-items: flex-end;
+    }
+
     display: flex;
     align-items: center;
     justify-content: center;

src/util/mechanics/TurnOrderUtil.ts

@@ -1,4 +1,4 @@
-import { AppState, PlayerData } from "./types";
+import { AppState, PlayerData } from "../types";
 
 export const turnOrderUtil = (prev: AppState, dynamic: PlayerData) => {
     let roundIncrement = false;

src/util/mechanics/cardTierToKey.ts

@@ -1,4 +1,4 @@
-import { FullDeck } from "./types"
+import { FullDeck } from "../types"
 
 export default function cardTierToKey(tier: number): keyof FullDeck {
     switch (tier) {

src/util/mechanics/getTotalBuyingPower.ts

@@ -1,4 +1,4 @@
-import { PlayerData, ResourceCost } from "./types";
+import { PlayerData, ResourceCost } from "../types";
 
 export default function getTotalBuyingPower(currentPlayer: PlayerData) {
     let totalBuyingPower = {

src/util/propTypes.ts

@@ -13,6 +13,11 @@ export interface CardProps extends StateProps {
 
 export interface CardRowProps extends StateProps {
     tier: number
+    liftCollapsed: (collapsed: boolean, tier?: number) => void
+}
+
+export interface NobleProps extends StateProps {
+    liftCollapsed: (collapsed: boolean, tier?: number) => void
 }
 
 export interface PlayerProps extends StateProps {

src/util/setup/defaultUIState.ts

@@ -0,0 +1,9 @@
+import { UIState } from "../types";
+
+export const defaultUIState: UIState = {
+    noblesCollapsed: true,
+    tierThreeCollapsed: true,
+    tierTwoCollapsed: true,
+    tierOneCollapsed: true,
+    playerUICollapsed: false
+}

src/util/setup/initializeBoard.ts

@@ -1,5 +1,5 @@
-import { AppState, FullDeck, NobleData, ResourceCost, setStateType } from "./types";
+import { AppState, FullDeck, NobleData, ResourceCost, setStateType } from "../types";
-import NobleStore from '../data/nobles.json';
+import NobleStore from '../../data/nobles.json';
 
 const shuffleDeck = (state: AppState, setState: setStateType) => {
     if (!state.gameboard.deck) return;

src/util/types.ts

@@ -105,3 +105,11 @@ export interface NobleData {
     points: number,
     resourceCost: ResourceCost
 }
+
+export interface UIState {
+    noblesCollapsed: boolean
+    tierThreeCollapsed: boolean
+    tierTwoCollapsed: boolean
+    tierOneCollapsed: boolean
+    playerUICollapsed: boolean
+}

src/util/util.test.ts

@@ -1,9 +1,9 @@
 import { describe, expect, test } from "vitest"
-import cardTierToKey from "./cardTierToKey";
+import cardTierToKey from "./mechanics/cardTierToKey";
 import { mockPlayerOne, mockState } from "./testUtils";
-import { turnOrderUtil } from "./turnOrderUtil";
+import { turnOrderUtil } from "./mechanics/TurnOrderUtil";
 import { useCurrentPlayer } from "../hooks/useCurrentPlayer";
-import getTotalBuyingPower from "./getTotalBuyingPower";
+import getTotalBuyingPower from "./mechanics/getTotalBuyingPower";
 
 describe('app utilities', () => {
     test('useCurrentPlayer', () => {