fixed bug in sass, may backtrack to modify player ui

src/components/Card/Card.tsx

@@ -1,47 +1,65 @@
 import { v4 } from 'uuid';
 import { CardProps } from '../../util/propTypes';
-import { ResourceCost } from '../../util/types';
+import { CardData, PlayerCards, ResourceCost } from '../../util/types';
 import { useCurrentPlayer } from '../../hooks/useCurrentPlayer';
 import { buyCardActions } from '../Player/ActionMethods';
 import { hasMaxReserved, reserveCard } from '../Player/ActionMethods/reserveCardActions';
 const { buyCard, tooExpensive } = buyCardActions;
 
-export default function Card({ data, state, setState }: CardProps) {
+export default function Card({ data, state, setState, reserved = false, collapsed = false }: CardProps) {
     const currentPlayer = useCurrentPlayer(state);
+    if (!data || !currentPlayer) return <div className="card"></div>;
 
-    if (!data) return <div className="card"></div>;
+    const purchaseDisabled = (): boolean => {
+        // TO DO: check whether a card belongs to the current player,
+        // if card is tagged as reserved
+        return tooExpensive(data, state);
+    }
 
     return (
-        <div className="card" key={v4()}>
-            <p>Counts as: {data.gemValue}</p>
-            <p>Point value: {data.points || 0}</p>
-            <p>Cost:</p>
-            <div className="total-card-cost">
-            {
-                Object.keys(data.resourceCost).map((key: keyof ResourceCost | string) => {
-                    // @ts-ignore
-                    return (data.resourceCost[key as keyof ResourceCost] > 0) && (
-                        <p key={v4()} className={`card-cost-${key}`}>
-                            {data.resourceCost[key as keyof ResourceCost]}
-                        </p>
+        <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>
+                    <div className="total-card-cost">
+                    {
+                        Object.keys(data.resourceCost).map((key: keyof ResourceCost | string) => {
+                            // @ts-ignore
+                            return (data.resourceCost[key as keyof ResourceCost] > 0) && (
+                                <p key={v4()} className={`card-cost-${key}`}>
+                                    {data.resourceCost[key as keyof ResourceCost]}
+                                </p>
+                            )
+                        })
+                    }
+                    </div>
+                    { (data.points && data.points > 0) ? <p>{data.points} {data.points === 1 ? 'point' : 'points'}</p> : null }
+                </section>
+
+                {
+                    (state.actions.buyCard.active || state.actions.reserveCard.active) && (
+                        <section className="card-action-section">
+                            { state.actions.buyCard.active &&
+                                <button
+                                    onClick={() => buyCard(state, setState, data)}
+                                    disabled={purchaseDisabled()}>
+                                    Buy This Card
+                                </button>
+                            }
+                            { !reserved && state.actions.reserveCard.active &&
+                                <button
+                                    onClick={() => reserveCard(state, setState, data)}
+                                    disabled={hasMaxReserved(currentPlayer)}>
+                                    Reserve This Card
+                                </button>
+                            }
+                        </section>
                     )
-                })
-            }
+                }
             </div>
-            { state.actions.buyCard.active &&
-                <button
-                    onClick={() => buyCard(state, setState, data)}
-                    disabled={tooExpensive(data, state)}>
-                    Buy This Card
-                </button>
-            }
-            { state.actions.reserveCard.active &&
-                <button
-                    onClick={() => reserveCard(state, setState, data)}
-                    disabled={hasMaxReserved(currentPlayer)}>
-                    Reserve This Card
-                </button>
-            }
         </div>
     )
 }

src/components/Card/CardRow.scss

@@ -1,33 +1,77 @@
 @import "../../sass/helper/mixins";
-@import "../../sass/helper/placeholders";
+@import "../../sass/helper/variables";
 
 .card-row {
     display: flex;
     flex-flow: column nowrap;
-    margin: 2rem;
-    width: 80vw;
+    margin: 1rem 0;
+    width: 75vw;
+
+    .card-row-top-bar {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        > * {
+            margin: 8px 16px;
+        }
+    }
 
     .card-row-cards-visible {
         display: flex;
-        flex-flow: row nowrap;
+        flex-flow: row wrap;
+        justify-content: right;
         width: 100%;
-        justify-content: space-around;
-    }
 
-    .card {
-        width: 25%;
-        border: 2px solid black;
-        > * {
-            margin: 1rem;
+        .card {
+            width: 18%;
+            border: 2px solid black;
+
+            img {
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+                z-index: 1;
+            }
+
+            .foreground {
+                // position: relative;
+                // top: -100%;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                z-index: 6;
+
+                > * {
+                    margin: 1rem;
+                    padding: 6px;
+                    border-radius: 12px;
+                    background-color: rgb(39, 36, 36);
+                }
+                
+                .total-card-cost {
+                    display: flex;
+                    flex-flow: row wrap;
+                    justify-content: center;
+                    @include map-gem-values(".card-cost");
+                }
+            }
         }
     
-        .total-card-cost {
-            display: flex;
-            justify-content: center;
+        .card-count {
+            background-color: black;
+            color: white;
+            width: 25%;
+        }
 
-            @include map-gem-values(".card-cost");
-            p {
-                @extend %chip-design;
+        .cc-tier {
+            &-1 {
+                background-color: rgb(3, 30, 3);
+            }
+            &-2 {
+                background-color: rgb(80, 80, 7);
+            }
+            &-3 {
+                background-color: rgb(9, 9, 77);
             }
         }
     }
@@ -35,12 +79,11 @@
   
   
 .tier-1 {
-    background-color: rgb(9, 67, 9);
+    background-color: rgb(23, 73, 23);
 }
   
 .tier-2 {
     background-color: rgb(174, 174, 32);
-    color: black;
 }
   
 .tier-3 {

src/components/Card/CardRow.tsx

@@ -1,11 +1,13 @@
+import { useEffect, useState } from 'react';
+import { v4 } from 'uuid';
+import cardTierToKey from '../../util/mechanics/cardTierToKey';
 import { CardRowProps } from '../../util/propTypes';
 import { CardData } from "../../util/types"
 import Card from "../Card/Card"
-import { v4 } from 'uuid';
-import cardTierToKey from '../../util/cardTierToKey';
 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);
 
     let cards: Array<CardData>
@@ -24,15 +26,22 @@ export default function CardRow({tier, state, setState}: CardRowProps) {
             break;
     }
 
+    useEffect(() => {
+        liftCollapsed(collapsed, tier);
+    }, [collapsed])
+
     return (
-        <div className={`card-row tier-${tier}`}>
-            <p>Tier: {tier}</p>
-            <div className="card-row-cards-visible">
-                <div className="card card-count">
+        <div className={`card-row tier-${tier} ${collapsed && 'collapsed'}`}>
+            <div className="card-row-top-bar">
+                <p>Tier: {tier}</p>
+                <button onClick={() => setCollapsed(!collapsed)}>{collapsed ? "Show" : "Hide"}</button>
+            </div>
+            <div className={`card-row-cards-visible ${collapsed && 'hidden'}`}>
+                <div className={`card-count cc-tier-${tier}`}>
                     <p>Remaining: {state.gameboard.deck[typedTier].length}</p>
                 </div>
                 { cards && cards.map((cardData: CardData) => {
-                    return <Card key={v4()} data={cardData} state={state} setState={setState} />
+                    return <Card key={v4()} data={cardData} state={state} setState={setState} collapsed={collapsed} />
                 })}
             </div>
         </div>

src/components/Gameboard/Gameboard.scss

@@ -0,0 +1,47 @@
+.gameboard {
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: flex-start;
+    justify-content: center;
+
+    background-color: rgb(57, 57, 65);
+    width: 90vw;
+    padding: 0 18px 12px;
+
+    #round-marker {
+        padding-left: 8px;
+    }
+
+    .gameboard-columns {
+        display: flex;
+        flex-flow: row nowrap;
+        justify-content: center;
+        align-items: flex-start;
+        width: 100%;
+        
+        section {
+            display: flex;
+            flex-flow: column nowrap;
+        }
+
+        .gameboard-left {
+            align-items: flex-start;
+            width: 50%;
+        }
+
+        .gameboard-right {
+            justify-content: flex-end;
+            width: 50%;
+        }
+
+        .gameboard-left-expanded {
+            align-items: flex-start;
+            width: 90%;
+        }
+
+        .gameboard-right-compact {
+            justify-content: flex-end;
+            width: 10%;
+        }
+    }
+}

src/components/Gameboard/Gameboard.tsx

@@ -1,51 +1,59 @@
 // types, data, utils
 import { useCallback, useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
-import initializeBoard, { setCardRows } from '../../util/initializeBoard';
-import { AppState, PlayerData, ResourceCost } from '../../util/types';
-import { getChipsActions } from '../Player/ActionMethods';
+import initializeBoard, { setCardRows } from '../../util/setup/initializeBoard';
+import { AppState, PlayerData, ResourceCost, UIState } from '../../util/types';
+import { defaultUIState } from '../../util/setup/defaultUIState';
 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;
+import { shouldRightSideCollapse } from '../../util/mechanics/shouldRightSideCollapse';
+import { setStateUpdateSelection } from '../../hooks/stateSetters';
 
 export default function Gameboard({ state, setState }: StateProps) {
     const [view, setView] = useState(<p>Loading...</p>);
     const [endgame, setEndgame] = useState<PlayerData>();
+    const [UICollapse, setUICollapse] = useState<UIState>(defaultUIState);
 
     // 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) => {
+        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
+                    }
+            }
+        });
+    }, [UICollapse, setUICollapse])
+
     // util functions, setup on mount
     useEffect(() => initializeBoard(state, setState), [])
 
@@ -63,12 +71,12 @@ export default function Gameboard({ state, setState }: StateProps) {
     useEffect(() => {
         if (endgame) {
             let winner: PlayerData;
+            const winnerData = state.players;
             const currentPlayer = useCurrentPlayer(state);
             if (!currentPlayer) return;
 
             if (currentPlayer.id <= endgame.id) {
-                const winnerData = state.players;
-                winner = winnerData.sort((x,y) => x.points - y.points)[0];
+                winner = winnerData.sort((x,y) => x.points + y.points)[0];
                 console.log(winner.name + ' wins!');
             }
         }
@@ -85,19 +93,25 @@ export default function Gameboard({ state, setState }: StateProps) {
             );
         } else {
             setView(
-                <div className="gameboard-rows">
-                    <strong>Round: {state.round}</strong>
-                    <Nobles state={state} setState={setState} />
-                    <CardRow tier={3} state={state} setState={setState} />
-                    <CardRow tier={2} state={state} setState={setState} />
-                    <CardRow tier={1} state={state} setState={setState} />
-                    <SelectionView state={state} setState={setState} />
-                    <AvailableChips state={state} setState={setState} liftSelection={liftSelection} />
-                    <AllPlayers state={state} setState={setState} />
+                <div className="gameboard">
+                    <h2 id="round-marker">Round: {state.round}</h2>
+                    <div className="gameboard-columns">
+                        <section className={shouldRightSideCollapse(UICollapse) ? "gameboard-left-expanded" : "gameboard-left"}>
+                            <Nobles state={state} setState={setState} liftCollapsed={liftCollapsed} />
+                            <CardRow tier={3} state={state} setState={setState} liftCollapsed={liftCollapsed} />
+                            <CardRow tier={2} state={state} setState={setState} liftCollapsed={liftCollapsed} />
+                            <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} setUICollapse={setUICollapse} liftCollapsed={liftCollapsed} />
+                        </section>
+                    </div>
                 </div>
             )
         }
-    }, [state]);
+    }, [state, UICollapse]);
 
     return view
 }

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

@@ -1,18 +1,44 @@
+@import "../../sass/helper/mixins";
+
 .nobles-panel {
     display: flex;
     flex-flow: column nowrap;
-    background-color: rgb(240, 236, 225);
-    padding: 1.5rem;
+    background-color: rgb(212, 196, 152);
     color: black;
+    padding: 1rem 0;
+    width: 45vw;
+
+    .nobles-topbar {
+        display: flex;
+        flex-flow: row nowrap;
+        justify-content: center;
+        align-items: baseline;
+        > * {
+            margin: 0 1rem;
+        }
+    }
+    
+    .all-nobles {
+        display: flex;
+        flex-flow: row nowrap;
+        justify-content: space-around;
+
+        .noble-card {
+            display: inline-flex;
+            flex-flow: column nowrap;
+            align-items: center;
+            height: 100%;
+            min-width: 25%;
+            border-right: 1px solid black;
+            &:last-child {
+                border-right: none;
+            }
+
+            .mapped-noble-costs {
+                display: flex;
+                @include map-gem-values(".noble-cost");
+            }
+        }
+    }
 }
 
-.all-nobles {
-    display: flex;
-    flex-flow: row nowrap;
-    justify-content: space-around;
-}
-
-.noble-card {
-    display: inline-flex;
-    flex-flow: column nowrap;
-}

src/components/Nobles/Nobles.tsx

@@ -1,9 +1,16 @@
 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 { useEffect, useState } from "react";
+
+export default function Nobles({ state, liftCollapsed }: NobleProps) {
+    const [collapsed, setCollapsed] = useState(true);
+
+    useEffect(() => {
+        liftCollapsed(collapsed);
+    }, [collapsed]);
 
-export default function Nobles({ state }: StateProps) {
     if (!state.gameboard.nobles.length) {
         return (
             <div className="nobles-panel">
@@ -14,21 +21,29 @@ export default function Nobles({ state }: StateProps) {
     }
     
     return (
-        <div className="nobles-panel">
-            <strong>NOBLES</strong>
-            <div className="all-nobles">
+        <div className={`nobles-panel ${collapsed && 'collapsed'}`}>
+            <div className="nobles-topbar">
+                <strong className="nobles-header">Nobles</strong>
+                <button onClick={() => setCollapsed(!collapsed)}>{collapsed ? "Show" : "Hide"}</button>
+            </div>
+            <div className={collapsed ? "hidden" : "all-nobles"}>
                 {
                 state && state.gameboard.nobles.map((noble: NobleData) => {
                     return (
                         <div className="noble-card" key={v4()}>
-                            <p>Points: {noble.points}</p>
                             <p>Cost:</p>
+                            <div className="mapped-noble-costs">
                             {
                                 Object.keys(noble.resourceCost).map((each) => {
                                     // @ts-ignore
-                                    return (noble.resourceCost[each as keyof ResourceCost] > 0) && <p key={v4()}>{each}: {noble.resourceCost[each as keyof ResourceCost]}</p>
+                                    return (noble.resourceCost[each as keyof ResourceCost] > 0) && (
+                                        <p key={v4()} className={`noble-cost-${each}`}>
+                                            {noble.resourceCost[each as keyof ResourceCost]}
+                                        </p>
+                                    )
                                 })
                             }
+                            </div>
                         </div>
                     )
                 })

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 getTotalBuyingPower from "../../../util/getTotalBuyingPower";
+import { turnOrderUtil } from "../../../util/mechanics/TurnOrderUtil";
+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

@@ -1,27 +1,108 @@
 @import '../../sass/helper/mixins';
+@import '../../sass/helper/variables';
 @import '../../sass/helper/placeholders';
 
-.all-players {
+// local placeholder
+%all-players-base {
     display: flex;
-    background-color: rgb(237, 213, 156);
+    flex-flow: column nowrap;
+    justify-content: space-around;
+    align-items: center;
+    background-color: rgb(188, 176, 146);
     color: black;
+
     .player-ui {
-        p {
-            margin: 1rem;
-        }
         .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 {
+        .current-selections {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            @include map-gem-values(".selection-value");
+            
+            p {
+                margin: 1rem;
+                padding: 1rem;
+                border-radius: 50%;
+            }
+        }
+    }
+
+    .player-ui {
+        .subheader {
+            font-weight: bold;
+        }
+
+        background-color:rgb(172, 149, 94);
+        margin: 1rem 0;
+        padding: 0 2rem;
+
+        .turn-and-action-based {
+            display: flex;
+            flex-flow: row nowrap;
+        }
+
         .resources {
             .player-chips-enum {
                 display: flex;
                 justify-content: center;
                 @include map-gem-values(".player-chip");
-                p {
-                    @extend %chip-design;
-                }
+            }
+        }
+
+        .reserved-card-view {
+            background-color: rgb(232, 224, 200);
+            .reserved-card-cost {
+                display: flex;
+                flex-flow: row wrap;
+                justify-content: center;
+                @include map-gem-values(".reserve-cost");
             }
         }
     }
 }
+
+.all-players-mini {
+    @extend %all-players-base;
+}

src/components/Player/AllPlayers.tsx

@@ -1,15 +1,76 @@
+// framework
+import { useEffect, useMemo, useState } from "react";
 import { v4 } from "uuid";
+
+// 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 { PlayerData } from "../../util/types";
-import { StateProps } from "../../util/propTypes";
 import "./AllPlayers.scss"
 
-export default function AllPlayers({ state, setState }: StateProps) {
-    const playerPool = state.players?.map((player: PlayerData) => <Player key={v4()} player={player} state={state} setState={setState} />);
+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;
+        setPlayerView(<Player key={v4()} player={currentPlayer} state={state} setState={setState} />);
+    }, [state]);
+
+    useEffect(() => {
+        setCollapseClass( shouldRightSideCollapse(UICollapse) ? "all-players-mini" : "all-players" );
+    }, [UICollapse]);
 
     return (
-        <div className="all-players">
-            { playerPool }
+        <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 }
         </div>
     )
 }

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) {
@@ -27,14 +27,10 @@ export default function Player({ player, state, setState }: PlayerProps) {
         )
 
         dynamic && setReservedView(
-            <>
+            <div className="reserved-card-view">
             <p>Reserved cards:</p>
-            {
-                dynamic.reservedCards?.map((data: CardData) => {
-                    return <Card key={v4()} data={data} state={state} setState={setState} />
-                })
-            }
-            </>
+                { dynamic.reservedCards?.map((data: CardData) => <Card key={v4()} data={data} state={state} setState={setState} reserved={true} />) }
+            </div>
         )
     }, [dynamic, setState])
 
@@ -58,13 +54,9 @@ export default function Player({ player, state, setState }: PlayerProps) {
     return (
         <div className="player-ui" key={v4()}>
             <p className="subheader">Name: {player.name} {player.starter && "(round starter)"}</p>
+            <p>Score: {dynamic && dynamic.points}</p>
 
-            {/* Dynamic data from state */}
             <section className="turn-and-action-based">
-                <p>Score: {dynamic && dynamic.points}</p>
-                <p>{dynamic?.turnActive ? "It's your turn!" : "..."}</p>
-
-                {/* Player actions */}
                 <button
                     disabled={(dynamic && hasMaxChips(dynamic)) || (!dynamic?.turnActive)}
                     onClick={() => handleClick(0)}>
@@ -82,12 +74,9 @@ export default function Player({ player, state, setState }: PlayerProps) {
                     onClick={() => handleClick(2)}>
                         Reserve Card
                 </button>
-
             </section>
 
             <section className="resources">
-                <p className="subheader">{dynamic?.name}'s Resources</p>
-
                 <div className="player-chips">
                     <p>Chips:</p>
                     <div className="player-chips-enum">

src/components/Resources/AvailableChips.scss

@@ -1,14 +1,22 @@
 @import "../../sass/helper/mixins";
+@import "../../sass/helper/variables";
 
 .available-chips {
     display: flex;
-    flex-flow: row nowrap;
-    background-color: rgb(236, 238, 186);
+    flex-flow: row wrap;
+    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

@@ -1,16 +0,0 @@
-@import "../../sass/helper/mixins";
-
-.selection-view {
-    .current-selections {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        @include map-gem-values(".selection-value");
-        
-        p {
-            margin: 1rem;
-            padding: 0.5rem;
-            border-radius: 25%;
-        }
-    }
-}

src/components/Resources/SelectionView.tsx

@@ -1,10 +1,10 @@
 import { useEffect, useState } from "react";
-import { StateProps } from "../../util/propTypes";
+import { SelectionProps } from "../../util/propTypes";
 import { useCurrentPlayer } from "../../hooks/useCurrentPlayer";
 import { GetChipsHTML, ReserveCardHTML } from "./ViewHTML";
-import './SelectionView.scss';
+import { shouldRightSideCollapse } from "../../util/mechanics/shouldRightSideCollapse";
 
-export default function SelectionView({ state, setState }: StateProps) {
+export default function SelectionView({ state, setState, UICollapse }: SelectionProps) {
     const [currentPlayer, setCurrentPlayer] = useState(useCurrentPlayer(state));
     const actionTypes = [
         state.actions.getChips,
@@ -15,19 +15,20 @@ export default function SelectionView({ state, setState }: StateProps) {
     const [view, setView] = useState(<></>);
 
     useEffect(() => {
+        setCurrentPlayer(useCurrentPlayer(state));
         setView(() => {
             switch (true) {
                 case (actionTypes[0].active):
-                    return <GetChipsHTML state={state} setState={setState} />
+                    return <GetChipsHTML state={state} setState={setState} UICollapse={UICollapse} />
                 case (actionTypes[1].active):
                     return (
-                        <div className="selection-view">
+                        <div className={shouldRightSideCollapse(UICollapse) ? "selection-view-mini" : "selection-view"}>
                             <h2>{currentPlayer?.name} has elected to purchase a card!</h2>
                             <strong>Choose a card above to purchase.</strong>
                         </div>
                     )
                 case (actionTypes[2].active):
-                    return <ReserveCardHTML state={state} setState={setState} />;
+                    return <ReserveCardHTML state={state} setState={setState} UICollapse={UICollapse} />;
                 default:
                     return (
                         <div className="selection-view">
@@ -36,9 +37,7 @@ export default function SelectionView({ state, setState }: StateProps) {
                     );
             }
         })
-
-        setCurrentPlayer(useCurrentPlayer(state));
-    }, [state, state.actions, setState])
+    }, [state, setState])
 
     return view
 }

src/components/Resources/ViewHTML.tsx

@@ -2,16 +2,22 @@ import { useEffect, useState } from "react";
 import { v4 } from "uuid";
 import { setStateGetChips, setStateReserveCard, setStateReservePlusGold } from "../../hooks/stateSetters";
 import { useCurrentPlayer } from "../../hooks/useCurrentPlayer";
-import { StateProps } from "../../util/propTypes";
+import { shouldRightSideCollapse } from "../../util/mechanics/shouldRightSideCollapse";
+import { SelectionProps } from "../../util/propTypes";
 import { ResourceCost } from "../../util/types";
 import { getChipsActions } from "../Player/ActionMethods";
 import { hasMaxChips } from "../Player/ActionMethods/getChipsActions";
 const { getChips } = getChipsActions;
 
-export const GetChipsHTML = ({ state, setState }: StateProps) => {
+export const GetChipsHTML = ({ state, setState, UICollapse }: SelectionProps) => {
     const [prompt, setPrompt] = useState("");
+    const [style, setStyle] = useState("");
     const currentPlayer = useCurrentPlayer(state);
 
+    useEffect(() => {
+        setStyle(shouldRightSideCollapse(UICollapse) ? "selection-view-mini" : "selection-view");
+    }, [UICollapse]);
+
     useEffect(() => {
         if (!state.actions.getChips.active) setPrompt("");
         if (state.actions.getChips.selection?.length === 0) {
@@ -22,13 +28,13 @@ export const GetChipsHTML = ({ state, setState }: StateProps) => {
     }, [state])
 
     return (
-        <div className="selection-view">
+        <div className={style}>
             <h2>{currentPlayer?.name} has elected to collect resources!</h2> 
             <strong>{prompt}</strong>
             <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>
             {
@@ -41,10 +47,15 @@ export const GetChipsHTML = ({ state, setState }: StateProps) => {
     )
 }
 
-export const ReserveCardHTML = ({ state, setState }: StateProps) => {
+export const ReserveCardHTML = ({ state, setState, UICollapse }: SelectionProps) => {
     const [takeGold, setTakeGold] = useState(false);
+    const [style, setStyle] = useState("");
     const currentPlayer = useCurrentPlayer(state);
 
+    useEffect(() => {
+        setStyle(shouldRightSideCollapse(UICollapse) ? "selection-view-mini" : "selection-view");
+    }, [UICollapse]);
+
     useEffect(() => {
         switch (takeGold) {
             case true:
@@ -59,7 +70,7 @@ export const ReserveCardHTML = ({ state, setState }: StateProps) => {
     }, [takeGold]);
 
     return (
-        <div className="selection-view">
+        <div className={style}>
             <h2>{currentPlayer?.name} has elected to reserve a card!</h2>
             <strong>Please make your selection above.</strong>
             { !hasMaxChips(currentPlayer) && (

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/App.scss

@@ -1,15 +1,17 @@
-@import './helper/placeholders';
-
 #root {
     .hidden {
-        display: none
+        display: none;
+    }
+
+    .collapsed {
+        width: 20vw;
+        align-items: flex-end;
     }
 
     display: flex;
     align-items: center;
     justify-content: center;
-    max-width: 1280px;
-    margin: 0 auto;
-    padding: 2rem;
+    width: 99vw;
+    margin: 0 0.5vw;
     text-align: center;
 }

src/sass/helper/_mixins.scss

@@ -1,3 +1,5 @@
+@import "./placeholders";
+
 @mixin map-gem-values($parentClass) {
     #{$parentClass} {
         &-emerald {
@@ -24,6 +26,16 @@
             background-color: gold;
             color: black;
         }
+    }
     
+    p {
+        @extend %chip-design;
     }
 }
+
+@mixin get-random-image($targetList) {
+    $idx: random(6);
+    $nth: nth($targetList, $idx);
+
+    background-image: url($nth);
+}

src/sass/helper/_variables.scss

@@ -0,0 +1 @@
+$gemlist: 'ruby', 'sapphire', 'onyx', 'emerald', 'diamond', 'gold';

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/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;
+}

src/util/propTypes.ts

@@ -1,4 +1,5 @@
-import { AppState, CardData, PlayerData, ResourceCost, SetActionType, setStateType } from "./types";
+import { Dispatch, SetStateAction } from "react";
+import { AppState, CardData, PlayerData, ResourceCost, setStateType, UIState } from "./types";
 
 export interface StateProps {
     state: AppState,
@@ -7,14 +8,17 @@ export interface StateProps {
 
 export interface CardProps extends StateProps {
     data: CardData
+    reserved?: boolean
+    collapsed?: boolean
 }
 
 export interface CardRowProps extends StateProps {
     tier: number
+    liftCollapsed: (collapsed: boolean, tier: number) => void
 }
 
-export interface AllPlayersProps extends StateProps {
-    setActionState: (value: SetActionType, player?: PlayerData) => void
+export interface NobleProps extends StateProps {
+    liftCollapsed: (collapsed: boolean) => void
 }
 
 export interface PlayerProps extends StateProps {
@@ -25,3 +29,12 @@ export interface ResourceProps extends StateProps {
     liftSelection: (value: keyof ResourceCost) => void
 }
 
+export interface AllPlayersProps extends ResourceProps {
+    UICollapse: UIState,
+    setUICollapse: Dispatch<SetStateAction<UIState>>
+    liftCollapsed: (collapsed: boolean, tier?: number) => void
+}
+
+export interface SelectionProps extends StateProps {
+    UICollapse: UIState
+}

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

src/util/types.ts

@@ -88,6 +88,7 @@ export interface CardData {
     tier: number
     points?: number
     resourceCost: ResourceCost
+    image: string
 }
 
 export interface ResourceCost {
@@ -104,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', () => {