card is replaced on purchase

src/components/Gameboard/Gameboard.tsx

@@ -8,7 +8,7 @@ const { validateChips } = getChipsActions;
 
 // components
 import Nobles from './Nobles';
-import initializeBoard from '../../util/initializeBoard';
+import initializeBoard, { setCardRows } from '../../util/initializeBoard';
 import AvailableChips from '../Resources/AvailableChips';
 import AllPlayers from '../Player/AllPlayers';
 import CardRow from '../Card/CardRow';
@@ -44,7 +44,7 @@ export default function Gameboard({ state, setState }: StateProps) {
         })
     }, [state]);
 
-    const setActionState = useCallback((value: SetActionType, player: PlayerData) => {
+    const setActionState = useCallback((value: SetActionType, player?: PlayerData) => {
         if (!player?.turnActive) return;
 
         switch (value) {
@@ -67,6 +67,10 @@ export default function Gameboard({ state, setState }: StateProps) {
         initializeBoard(state, setState);
     }, [])
 
+    useEffect(() => {
+        setCardRows(state);
+    }, [state])
+
     // displays state of board if data is populated
     useEffect(() => {
         if (!state.players.length) {
@@ -86,7 +90,6 @@ export default function Gameboard({ state, setState }: StateProps) {
                     <CardRow tier={1} state={state} setState={setState} />
                     <SelectionView state={state} setState={setState} />
                     <AvailableChips state={state} setState={setState} liftSelection={liftSelection} />
-                    {/* @ts-ignore */}
                     <AllPlayers state={state} setState={setState} setActionState={setActionState} />
                 </div>
             )

src/components/Player/ActionMethods/buyCardActions.ts

@@ -1,5 +1,5 @@
 import { turnOrderUtil } from "../../../util/turnOrderUtil";
-import { AppState, CardData, PlayerData, ResourceCost, setStateType } from "../../../util/types";
+import { AppState, CardData, FullDeck, PlayerData, ResourceCost, setStateType } from "../../../util/types";
 import { useCurrentPlayer } from "../../../util/useCurrentPlayer";
 
 export const tooExpensive = (card: CardData, state: AppState): boolean => {
@@ -27,7 +27,7 @@ export const buyCard = (card: CardData, state: AppState, setState: setStateType)
     */
 
     let currentPlayer = useCurrentPlayer(state);
-    console.log(currentPlayer);
+    console.log(card);
     
     setState((prev: AppState) => {
         if (!currentPlayer) return prev;
@@ -75,14 +75,37 @@ export const buyCard = (card: CardData, state: AppState, setState: setStateType)
         const idx = newPlayers.findIndex((one: PlayerData) => one.id === currentPlayer?.id);
         newPlayers[idx] = updatedPlayer;
 
+        let updatedRows = { ...prev.gameboard.cardRows }
+
+        if (card.tier) {
+            let tierKey;
+            switch (card.tier) {
+                case 1:
+                    tierKey = "tierOne"
+                    break;
+                case 2:
+                    tierKey = "tierTwo"
+                    break;
+                case 3:
+                    tierKey = "tierThree"
+                    break;
+                default:
+                    break;
+            }
+
+            updatedRows[tierKey as keyof FullDeck] = 
+            prev.gameboard.cardRows[tierKey as keyof FullDeck].filter((found: CardData) => found.resourceCost !== card.resourceCost);
+        }
+
         return {
             ...prev,
+            round: (roundIncrement ? prev.round + 1 : prev.round),
+            players: newPlayers,
             gameboard: {
                 ...prev.gameboard,
-                tradingResources: prev.gameboard.tradingResources
-            },
-            round: (roundIncrement ? prev.round + 1 : prev.round),
-            players: newPlayers
+                tradingResources: prev.gameboard.tradingResources,
+                cardRows: updatedRows
+            }
         }
     })
 }

src/components/Player/Player.tsx

@@ -58,7 +58,7 @@ export default function Player({ player, state, setState, setActionState }: Play
                     <p>Cards:</p>
                     { dynamic && dynamic.cards.length > 0 && dynamic.cards.map((data: CardData) => {
                         return (
-                            <div className="mini-card" style={{backgroundColor: 'white'}}>
+                            <div key={v4()} className="mini-card" style={{backgroundColor: 'white'}}>
                                 <p>{data.gemValue} card</p>
                                 <p>{data.points || null}</p>
                             </div>

src/util/initializeBoard.ts

@@ -30,18 +30,21 @@ const setNobles = (state: AppState, setState: setStateType) => {
     setState({ ...state, gameboard: { ...state.gameboard, nobles: shuffledNobles }})
 }
 
-export default function initializeBoard(state: AppState, setState: setStateType) {
-    shuffleDeck(state, setState);
-
+export const setCardRows = (state: AppState) => {
+    console.log('set cards');
     let newDeck = state.gameboard.cardRows;
     for (const [key, value] of Object.entries(state.gameboard.deck)) {
         while (newDeck[key as keyof FullDeck].length < 4) {
-            // @ts-ignore
             const nextCard = value.shift();
             newDeck[key as keyof FullDeck].push(nextCard);
         }
     }
+    return newDeck;
+}
 
+export default function initializeBoard(state: AppState, setState: setStateType) {
+    shuffleDeck(state, setState);
+    const newDeck = setCardRows(state);
     setState({ ...state, gameboard: { ...state.gameboard, cardRows: newDeck } })
     setNobles(state, setState);
 }