src/App.tsx

@@ -1,6 +1,6 @@
 import { BrowserRouter, Routes, Route } from 'react-router-dom'
 import { initialState } from './util/stateSetters';
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 
 import Gameboard from './components/Gameboard/Gameboard'
 import GameConstructor from './components/GameConstructor';
@@ -9,6 +9,10 @@ import './App.css'
 function App() {
   const [state, setState] = useState(initialState);
 
+  useEffect(() => {
+    return;
+  }, [state]);
+
   return (
     <div className="App">
       <h1>SPLENDOR</h1>

src/components/Card/Card.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+
 import { v4 } from 'uuid';
 import { CardProps } from '../../util/propTypes';
 import { ResourceCost } from '../../util/types';

src/components/Player/ActionMethods/buyCardActions.ts

@@ -1,4 +1,3 @@
-import { initialActions } from "../../../util/stateSetters";
 import { turnOrderUtil } from "../../../util/turnOrderUtil";
 import { AppState, CardData, ResourceCost, setStateType } from "../../../util/types";
 import { useCurrentPlayer } from "../../../util/useCurrentPlayer";
@@ -23,14 +22,14 @@ export const buyCard = (state: AppState, setState: setStateType, card: CardData)
     const currentPlayer = useCurrentPlayer(state);
     if (!currentPlayer) return;
 
-    setState(() => {
-        const { newPlayers, roundIncrement } = turnOrderUtil(state, currentPlayer);
+    setState((prev) => {
+        const { newPlayers, roundIncrement } = turnOrderUtil(prev, currentPlayer);
         const idx = newPlayers.indexOf(currentPlayer);
         const updatedPlayer = newPlayers[idx];
 
         const cardCost = card.resourceCost;
         const newPlayerInventory = updatedPlayer.inventory;
-        const newResourcePool = state.gameboard.tradingResources;
+        const newResourcePool = prev.gameboard.tradingResources;
 
         for (let key of Object.keys(cardCost)) {
             const typedKey = key as keyof ResourceCost;
@@ -52,61 +51,17 @@ export const buyCard = (state: AppState, setState: setStateType, card: CardData)
         }
 
         updatedPlayer.inventory = newPlayerInventory;
+        updatedPlayer.cards = [...updatedPlayer.cards, card];
         newPlayers[idx] = updatedPlayer;
 
-        state.gameboard.tradingResources = newResourcePool;
-        roundIncrement && (state.round = state.round + 1);
-        state.players = newPlayers;
-
-        return state;
+        return {
+            ...prev,
+            players: newPlayers,
+            round: (roundIncrement ? prev.round + 1 : prev.round),
+            gameboard: {
+                ...prev.gameboard,
+                tradingResources: newResourcePool
+            }
+        }
     })
 }
-
-// export const updateResources = (state: AppState, card: CardData) => {
-//     console.log('updateResources called');
-//     let currentPlayer = useCurrentPlayer(state);
-//     let newTradingResources = state.gameboard.tradingResources;
-//     let updatedPlayer = currentPlayer;
-//     const totalBuyingPower = getTotalBuyingPower(state);
-
-//     let difference = 0;
-//     for (let [key, value] of Object.entries(card.resourceCost)) {
-//         if (value < 1) continue;
-//         if (value !== totalBuyingPower[key as keyof ResourceCost]) {
-//             difference += Math.abs(totalBuyingPower[key as keyof ResourceCost] - value);
-//         }
-//     }
-
-//     return { newTradingResources, updatedPlayer }
-// }
-
-// export const buyCard = (state: AppState, setState: setStateType, card: CardData) => {
-//     let currentPlayer = useCurrentPlayer(state);
-//     if (!currentPlayer) return;
-//     const { newPlayers, roundIncrement } = turnOrderUtil(state, currentPlayer);
-
-//     console.log('cleared to setstate');
-    
-//     setState((prev: AppState) => {
-//         if (!currentPlayer) return prev;
-
-//         const { newTradingResources, updatedPlayer } = updateResources(state, card);
-//         const idx = newPlayers.indexOf(currentPlayer);
-//         updatedPlayer && (newPlayers[idx] = updatedPlayer);
-        
-//         return {
-//             ...prev,
-//             gameboard: {
-//                 ...prev.gameboard,
-//                 cardRows: prev.gameboard.cardRows,
-//                 tradingResources: newTradingResources
-//             },
-//             round: (roundIncrement ? prev.round + 1 : prev.round),
-//             players: newPlayers,
-//             actions: initialActions
-//         }
-//     })
-
-//     // for testing?
-//     return state;
-// }

src/components/Player/Player.tsx

@@ -10,10 +10,47 @@ export default function Player({ player, state, setState }: PlayerProps) {
     const [dynamic, setDynamic] = useState<PlayerData>();
     const [prompt, setPrompt] = useState("Your turn! Select an action type below.");
 
+    const [cardView, setCardView] = useState(<p>Cards:</p>);
+    const [reservedView, setReservedView] = useState(<p>Reserved cards:</p>);
+
     useEffect(() => {
         setDynamic(state.players.find((element: PlayerData) => element.id === player.id))
     }, [state]);
 
+    useEffect(() => {
+        dynamic && setCardView(
+            <>
+            <p>Cards:</p>
+            {
+                dynamic.cards.map((data: CardData) => {
+                    return (
+                        <div key={v4()} className="mini-card" style={{backgroundColor: 'white'}}>
+                            <p>{data.gemValue} card</p>
+                            <p>{data.points + " points" || null}</p>
+                        </div>
+                    )
+                })
+            }
+            </>
+        )
+
+        dynamic && setReservedView(
+            <>
+            <p>Reserved cards:</p>
+            {
+                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>
+                    )
+                })
+            }
+            </>
+        )
+    }, [dynamic, setState])
+
     const handleClick = (actionSelection: number) => {
         switch (actionSelection) {
             case 0:
@@ -63,27 +100,11 @@ export default function Player({ player, state, setState }: PlayerProps) {
                 </div>
 
                 <div className="player-cards">
-                    <p>Cards:</p>
-                    { dynamic && dynamic.cards.length > 0 && dynamic.cards.map((data: CardData) => {
-                        return (
-                            <div key={v4()} className="mini-card" style={{backgroundColor: 'white'}}>
-                                <p>{data.gemValue} card</p>
-                                <p>{data.points + " points" || null}</p>
-                            </div>
-                        )})
-                    }
+                    {dynamic && cardView}
                 </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>
-                        )
-                    })}
+                    {dynamic && reservedView}
                 </div>
             </section>
         </div>