to do: reserve card action, include gold chip or not

src/components/Card/Card.tsx

@@ -2,6 +2,7 @@ import { v4 } from 'uuid';
 import { CardProps } from '../../util/propTypes';
 import { ResourceCost } from '../../util/types';
 import { buyCardActions } from '../Player/ActionMethods';
+import { reserveCard } from '../Player/ActionMethods/reserveCardActions';
 const { buyCard, tooExpensive } = buyCardActions;
 
 export default function Card({ data, state, setState }: CardProps) {
@@ -25,6 +26,12 @@ export default function Card({ data, state, setState }: CardProps) {
                         Buy This Card
                     </button>
                 }
+                { state.actions.reserveCard.active &&
+                    <button
+                        onClick={() => reserveCard(state)}>
+                        Reserve This Card
+                    </button>
+                }
             </div>
         </div>
     )

src/components/Player/ActionMethods/buyCardActions.ts

@@ -5,7 +5,6 @@ import { useCurrentPlayer } from "../../../util/useCurrentPlayer";
 export const tooExpensive = (card: CardData, state: AppState): boolean => {
     const currentPlayer = useCurrentPlayer(state);
     if (!currentPlayer) return true;
-
     for (let [gemType, cost] of Object.entries(card.resourceCost)) {
         let totalBuyingPower = {
             ruby: 0,
@@ -44,13 +43,11 @@ export const buyCard = (card: CardData, state: AppState, setState: setStateType)
     */
 
     let currentPlayer = useCurrentPlayer(state);
-    console.log(card);
     
     setState((prev: AppState) => {
         if (!currentPlayer) return prev;
 
         const { newPlayers, roundIncrement } = turnOrderUtil(prev, currentPlayer);
-
         let newPlayerInventory = currentPlayer.inventory;
         let newResourcePool = prev.gameboard.tradingResources;
 
@@ -68,7 +65,6 @@ export const buyCard = (card: CardData, state: AppState, setState: setStateType)
             }
 
             resourceToReplenish += cost;
-
             newPlayerInventory[gem as keyof ResourceCost] = newInventoryValue;
             newResourcePool[gem as keyof ResourceCost] = resourceToReplenish;
         }
@@ -88,10 +84,8 @@ export const buyCard = (card: CardData, state: AppState, setState: setStateType)
         }
 
         updatedPlayer.points = newScore;
-
         const idx = newPlayers.findIndex((one: PlayerData) => one.id === currentPlayer?.id);
         newPlayers[idx] = updatedPlayer;
-
         let updatedRows = { ...prev.gameboard.cardRows }
 
         if (card.tier) {

src/components/Player/ActionMethods/getChipsActions.ts

@@ -1,6 +1,5 @@
 import { AppState, setStateType } from '../../../util/types';
 import { useCurrentPlayer } from '../../../util/useCurrentPlayer';
-// @ts-ignore
 import { turnOrderUtil } from '../../../util/turnOrderUtil';
 import { initialActions } from "../../../util/stateSetters";
 

src/components/Player/ActionMethods/reserveCardActions.ts

@@ -1,3 +1,7 @@
-export const reserveCard = () => {
-    return;
+import { AppState } from "../../../util/types";
+import { useCurrentPlayer } from "../../../util/useCurrentPlayer";
+
+export const reserveCard = (state: AppState) => {
+    const currentPlayer = useCurrentPlayer(state);
+    console.log(currentPlayer);
 }

src/components/Player/Player.tsx

@@ -2,7 +2,6 @@ import { PlayerProps } from "../../util/propTypes";
 import { CardData, PlayerData } from "../../util/types"
 import { useEffect, useState } from "react";
 import { v4 } from "uuid";
-import { MiniCard } from "../Card/MiniCard";
 
 export default function Player({ player, state, setState, setActionState }: PlayerProps) {
     const [dynamic, setDynamic] = useState<PlayerData>();
@@ -65,6 +64,18 @@ export default function Player({ player, state, setState, setActionState }: Play
                         )})
                     }
                 </div>
+
+                <div className="reserved-cards">
+                    <p>Reserved cards:</p>
+                    { dynamic?.reservedCards && dynamic.reservedCards?.map((data: CardData) => {
+                        return (
+                            <div key={v4()} className="mini-card" style={{backgroundColor: 'white'}}>
+                                <p>{data.gemValue} cards</p>
+                                <p>{data.points + " points" || null}</p>
+                            </div>
+                        )
+                    })}
+                </div>
             </section>
         </div>
     )

src/util/types.ts

@@ -63,6 +63,7 @@ export interface PlayerData {
     points: number,
     nobles: NobleData[],
     cards: CardData[],
+    reservedCards?: CardData[],
     inventory: {
         [Property in keyof ResourceCost]: number
     }