fixed bug in sass, may backtrack to modify player ui

src/components/Card/Card.tsx

@@ -18,7 +18,9 @@ export default function Card({ data, state, setState, reserved = false, collapse
 
     return (
         <div className='card' key={v4()}>
+            { /*
             { collapsed ? <div className={`img-placeholder-${data.gemValue}`}></div> : <img src={data.image} loading="lazy" /> }
+            */ }
             <div className={reserved ? `foreground-${data.gemValue}` : 'foreground'}>
                 <section className="card-top-section">
                     <p>{data.gemValue.toUpperCase()}</p>

src/components/Card/CardRow.scss

@@ -23,8 +23,7 @@
         width: 100%;
 
         .card {
-            width: 35%;
-            height: 40vh;
+            width: 18%;
             border: 2px solid black;
 
             img {
@@ -35,8 +34,8 @@
             }
 
             .foreground {
-                position: relative;
-                top: -100%;
+                // position: relative;
+                // top: -100%;
                 display: flex;
                 flex-direction: column;
                 align-items: center;

src/components/Gameboard/Gameboard.tsx

@@ -4,7 +4,6 @@ import { Link } from 'react-router-dom';
 import initializeBoard, { setCardRows } from '../../util/setup/initializeBoard';
 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';
 
@@ -15,7 +14,7 @@ import CardRow from '../Card/CardRow';
 import { useCurrentPlayer } from '../../hooks/useCurrentPlayer';
 import usePreviousPlayer from '../../hooks/usePreviousPlayer';
 import { shouldRightSideCollapse } from '../../util/mechanics/shouldRightSideCollapse';
-const { validateChips } = getChipsActions;
+import { setStateUpdateSelection } from '../../hooks/stateSetters';
 
 export default function Gameboard({ state, setState }: StateProps) {
     const [view, setView] = useState(<p>Loading...</p>);
@@ -25,26 +24,7 @@ export default function Gameboard({ state, setState }: StateProps) {
     // callbacks for lifting state
     const liftSelection = useCallback((value: keyof ResourceCost) => {
         if (!state.actions.getChips.active) return;
-        setState((prev: AppState) => {
-            let newSelection = prev.actions.getChips.selection;
-            newSelection?.push(value);
-
-            let newState = {
-                ...prev,
-                actions: {
-                    ...state.actions,
-                    getChips: {
-                        active: true,
-                        selection: newSelection,
-                        valid: false
-                    }
-                }
-            }
-
-            const result = validateChips(newState);
-            newState.actions.getChips.valid = result;
-            return newState;
-        })
+        setState((prev: AppState) => setStateUpdateSelection(prev, value));
     }, [state]);
 
     const liftCollapsed = useCallback((collapsed: boolean, tier = 5) => {
@@ -123,7 +103,9 @@ export default function Gameboard({ state, setState }: StateProps) {
                             <CardRow tier={1} state={state} setState={setState} liftCollapsed={liftCollapsed} />
                         </section>
                         <section className={shouldRightSideCollapse(UICollapse) ? "gameboard-right-compact" : "gameboard-right"}>
-                            <AllPlayers state={state} setState={setState} liftSelection={liftSelection} UICollapse={UICollapse} />
+                            <AllPlayers
+                                state={state} setState={setState} liftSelection={liftSelection}
+                                UICollapse={UICollapse} setUICollapse={setUICollapse} liftCollapsed={liftCollapsed} />
                         </section>
                     </div>
                 </div>

src/components/Player/AllPlayers.scss

@@ -2,6 +2,56 @@
 @import '../../sass/helper/variables';
 @import '../../sass/helper/placeholders';
 
+// local placeholder
+%all-players-base {
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: space-around;
+    align-items: center;
+    background-color: rgb(188, 176, 146);
+    color: black;
+
+    .player-ui {
+        .subheader {
+            font-weight: bold;
+        }
+
+        background-color:rgb(172, 149, 94);
+        margin: 1rem 0;
+        padding: 0 2rem;
+    }
+
+    .card {
+        width: 100%;
+
+        img {
+            display: none;
+        }
+
+        @each $gem in $gemlist {
+            @include map-gem-values('.foreground');
+            .foreground-#{$gem} {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                padding: 8px;
+
+                p {
+                    display: inline;
+                    padding: 8px;
+                }
+                
+                .total-card-cost {
+                    display: flex;
+                    flex-flow: row wrap;
+                    justify-content: center;
+                    @include map-gem-values(".card-cost");
+                }
+            }
+        }
+    }
+}
+
 .all-players {
     @extend %all-players-base;
     .selection-view {

src/components/Player/AllPlayers.tsx

@@ -1,17 +1,60 @@
-import { useEffect, useState } from "react";
+// framework
+import { useEffect, useMemo, useState } from "react";
 import { v4 } from "uuid";
-import Player from "./Player";
-import { useCurrentPlayer } from "../../hooks/useCurrentPlayer";
+
+// util
+import { shouldRightSideCollapse } from "../../util/mechanics/shouldRightSideCollapse";
 import { AllPlayersProps } from "../../util/propTypes";
+import { useCurrentPlayer } from "../../hooks/useCurrentPlayer";
+import { defaultUIState } from "../../util/setup/defaultUIState";
+import { UIState } from "../../util/types";
+
+// components
 import AvailableChips from "../Resources/AvailableChips";
 import SelectionView from "../Resources/SelectionView";
+import Player from "./Player";
 import "./AllPlayers.scss"
-import { shouldRightSideCollapse } from "../../util/mechanics/shouldRightSideCollapse";
 
-export default function AllPlayers({ state, setState, liftSelection, UICollapse }: AllPlayersProps) {
+export default function AllPlayers({ state, setState, liftSelection, UICollapse, setUICollapse, liftCollapsed }: AllPlayersProps) {
     const [playerView, setPlayerView] = useState<JSX.Element>();
     const [collapseClass, setCollapseClass] = useState("all-players");
 
+    const collapseAll = () => {
+        liftCollapsed(true);
+        liftCollapsed(true, 3);
+        liftCollapsed(true, 2);
+        liftCollapsed(true, 1);
+            // let value = UICollapse[each as keyof UIState];
+            // if (each === "playerUICollapsed") {
+            //     continue;
+            // } else if (each === "noblesCollapsed") {
+            //     console.log(each);
+            //     liftCollapsed(value);
+            // } else {
+            //     console.log(each, value);
+            //     switch (each) {
+            //         case "tierThreeCollapsed":
+            //             liftCollapsed(value, 3);
+            //             break;
+            //         case "tierTwoCollapsed":
+            //             liftCollapsed(value, 2);
+            //             break;
+            //         case "tierOneCollapsed":
+            //             liftCollapsed(value, 1);
+            //             break;
+            //         default: break;
+            //     }
+            // }
+    }
+
+    const allowCollapseAll = useMemo(() => {
+        for (let each of Object.keys(UICollapse)) {
+            if (each === "playerUICollapsed") continue;
+            if (!UICollapse[each as keyof UIState]) return true;
+        }
+        return false;
+    }, [UICollapse]);
+
     useEffect(() => {
         const currentPlayer = useCurrentPlayer(state);
         if (!currentPlayer) return;
@@ -24,6 +67,7 @@ export default function AllPlayers({ state, setState, liftSelection, UICollapse
 
     return (
         <div className={collapseClass}>
+            { allowCollapseAll && <button onClick={collapseAll}>Collapse All</button> }
             <SelectionView state={state} setState={setState} UICollapse={UICollapse} />
             <AvailableChips state={state} setState={setState} liftSelection={liftSelection} />
             { playerView }

src/components/Player/Player.tsx

@@ -1,10 +1,10 @@
-import { setStateAwaitAction, setStateBuyCard, setStateGetChips, setStateReserveCard } from "../../hooks/stateSetters";
 import { useEffect, useState } from "react";
-import { PlayerProps } from "../../util/propTypes";
-import { CardData, PlayerData } from "../../util/types"
+import { v4 } from "uuid";
+import { setStateAwaitAction, setStateBuyCard, setStateGetChips, setStateReserveCard } from "../../hooks/stateSetters";
 import { hasMaxReserved } from "./ActionMethods/reserveCardActions";
 import { hasMaxChips } from "./ActionMethods/getChipsActions";
-import { v4 } from "uuid";
+import { CardData, PlayerData } from "../../util/types"
+import { PlayerProps } from "../../util/propTypes";
 import Card from "../Card/Card";
 
 export default function Player({ player, state, setState }: PlayerProps) {

src/hooks/stateSetters.ts

@@ -1,5 +1,6 @@
-import { AppState, CardData, NobleData, PlayerData, ResourceCost } from "../util/types";
+import { AppState, CardData, NobleData, PlayerData, ResourceCost, UIState } from "../util/types";
 import CardDeck from '../data/cards.json';
+import { validateChips } from "../components/Player/ActionMethods/getChipsActions";
 
 export const initialActions = {
     buyCard: { active: false },
@@ -51,6 +52,27 @@ export const setStateGetChips = (prev: AppState) => {
     }
 }
 
+export const setStateUpdateSelection = (prev: AppState, value: keyof ResourceCost) => {
+    let newSelection = prev.actions.getChips.selection;
+            newSelection?.push(value);
+
+            let newState = {
+                ...prev,
+                actions: {
+                    ...prev.actions,
+                    getChips: {
+                        active: true,
+                        selection: newSelection,
+                        valid: false
+                    }
+                }
+            }
+
+            const result = validateChips(newState);
+            newState.actions.getChips.valid = result;
+            return newState;
+}
+
 export const setStateBuyCard = (prev: AppState) => {
     return {
         ...prev,

src/sass/helper/_placeholders.scss

@@ -1,6 +1,3 @@
-@import "./mixins";
-@import "./variables";
-
 // designed to extend a "p" element
 %chip-design {
     display: flex;
@@ -11,53 +8,4 @@
     width: 1rem;
     height: 1rem;
     border-radius: 50%;
-}
-
-%all-players-base {
-    display: flex;
-    flex-flow: column nowrap;
-    justify-content: space-around;
-    align-items: center;
-    background-color: rgb(188, 176, 146);
-    color: black;
-
-    .player-ui {
-        .subheader {
-            font-weight: bold;
-        }
-
-        background-color:rgb(172, 149, 94);
-        margin: 1rem 0;
-        padding: 0 2rem;
-    }
-
-    .card {
-        width: 100%;
-
-        img {
-            display: none;
-        }
-
-        @each $gem in $gemlist {
-            @include map-gem-values('.foreground');
-            .foreground-#{$gem} {
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-                padding: 8px;
-
-                p {
-                    display: inline;
-                    padding: 8px;
-                }
-                
-                .total-card-cost {
-                    display: flex;
-                    flex-flow: row wrap;
-                    justify-content: center;
-                    @include map-gem-values(".card-cost");
-                }
-            }
-        }
-    }
 }

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 {
@@ -29,7 +30,9 @@ export interface ResourceProps extends StateProps {
 }
 
 export interface AllPlayersProps extends ResourceProps {
-    UICollapse: UIState
+    UICollapse: UIState,
+    setUICollapse: Dispatch<SetStateAction<UIState>>
+    liftCollapsed: (collapsed: boolean, tier?: number) => void
 }
 
 export interface SelectionProps extends StateProps {