implemented purchase of a reserved card

src/components/Card/Card.tsx

@@ -12,7 +12,7 @@ export default function Card({ data, state, setState }: CardProps) {
     if (!data) return <div className="card"></div>;
 
     return (
-        <div className="card">
+        <div className="card" key={v4()}>
             <div className="top-row">
                 <p>Counts as: {data.gemValue}</p>
                 <p>Point value: {data.points || 0}</p>

src/components/Player/ActionMethods/buyCardActions.ts

@@ -89,12 +89,24 @@ export const buyCard = (state: AppState, setState: setStateType, card: CardData)
 
         updatedPlayer.cards = { ...updatedPlayer.cards, [card.gemValue]: [...updatedPlayer.cards[card.gemValue as keyof PlayerCards], card] }
 
+        let reservedCardCheck = false;
+        // checks if current card was bought from reserved cards, removing it if so
+        if (updatedPlayer.reservedCards) {
+            let beforeLength = updatedPlayer.reservedCards.length;
+            updatedPlayer.reservedCards = updatedPlayer.reservedCards.filter((each: CardData) => each.resourceCost !== card.resourceCost);
+            let afterLength = updatedPlayer.reservedCards.length;
+            if (beforeLength !== afterLength) reservedCardCheck = true;
+        }
+
         const typedCardTier = cardTierToKey(card.tier);
         let newFullDeckTargetTier = prev.gameboard.deck[typedCardTier];
-        const replacementCard = newFullDeckTargetTier.shift();
         let newTargetCardRow = prev.gameboard.cardRows[typedCardTier];
+
+        if (!reservedCardCheck) {
+            const replacementCard = newFullDeckTargetTier.shift();
             newTargetCardRow = newTargetCardRow.filter((data: CardData) => data.resourceCost !== card.resourceCost);
             if (replacementCard) newTargetCardRow.push(replacementCard);
+        }
 
         return {
             ...prev,

src/components/Player/Player.tsx

@@ -5,6 +5,7 @@ import { CardData, PlayerData } from "../../util/types"
 import { hasMaxReserved } from "./ActionMethods/reserveCardActions";
 import { hasMaxChips } from "./ActionMethods/getChipsActions";
 import { v4 } from "uuid";
+import Card from "../Card/Card";
 
 export default function Player({ player, state, setState }: PlayerProps) {
     const [dynamic, setDynamic] = useState<PlayerData>();
@@ -30,17 +31,7 @@ export default function Player({ player, state, setState }: PlayerProps) {
             <p>Reserved cards:</p>
             {
                 dynamic.reservedCards?.map((data: CardData) => {
-                    return (
-                        <div key={v4()} className="mini-card" id={`${dynamic.name}-player-ui`} style={{backgroundColor: 'white'}}>
-                            <p>{data.gemValue} cards</p>
-                            <p>{data.points + " points" || null}</p>
-                            {
-                                Object.entries(data.resourceCost).map(([key, value]) => {
-                                    return value > 0 && <p key={v4()}>{key}: {value}</p>
-                                })
-                            }
-                        </div>
-                    )
+                    return <Card key={v4()} data={data} state={state} setState={setState} />
                 })
             }
             </>

src/util/util.test.ts

@@ -3,6 +3,7 @@ import cardTierToKey from "./cardTierToKey";
 import { mockPlayerOne, mockState } from "./testUtils";
 import { turnOrderUtil } from "./turnOrderUtil";
 import { useCurrentPlayer } from "../hooks/useCurrentPlayer";
+import getTotalBuyingPower from "./getTotalBuyingPower";
 
 describe('app utilities', () => {
     test('useCurrentPlayer', () => {
@@ -39,6 +40,14 @@ describe('app utilities', () => {
     test('initializeBoard', () => {
         expect(1).toBe(1);
     })
+
+    test('get total buying power', () => {
+        const currentPlayer = useCurrentPlayer(mockState);
+        if (!currentPlayer) return;
+
+        const bp = getTotalBuyingPower(currentPlayer);
+        expect(bp).toBeDefined();
+    })
 })
 
 export {}