in progress: turn handling for picking up resources

src/components/Gameboard/Gameboard.tsx

@@ -8,6 +8,8 @@ import NobleStore from '../../data/nobles.json';
 
 export default function Gameboard({ state, setState }: StateProps) {
     const [view, setView] = useState(<p>Loading...</p>)
+    const [selection, setSelection] = useState<Array<String>>([]);
+    const chipSelection = { selection, setSelection };
 
     useEffect(() => {
         initializeBoard();
@@ -29,8 +31,8 @@ export default function Gameboard({ state, setState }: StateProps) {
                     <CardRow tier={3} cards={state.gameboard.cardRows.tierThree} />
                     <CardRow tier={2} cards={state.gameboard.cardRows.tierTwo} />
                     <CardRow tier={1} cards={state.gameboard.cardRows.tierOne} />
-                    <AvailableChips state={state} setState={setState} />
+                    <AvailableChips chipSelection={chipSelection} state={state} setState={setState} />
-                    <AllPlayers state={state} setState={setState} />
+                    <AllPlayers chipSelection={chipSelection} state={state} setState={setState} />
                 </div>
             )
         }

src/components/Player/AllPlayers.tsx

@@ -1,13 +1,23 @@
 import Player from "./Player";
 import { v4 } from "uuid";
-import "./AllPlayers.css"
 import { PlayerData, StateProps } from "../../util/types";
+import { Dispatch, SetStateAction } from "react";
+import "./AllPlayers.css"
+
+interface AllPlayersProps extends StateProps {
+    chipSelection: {
+        selection: String[],
+        setSelection: Dispatch<SetStateAction<Array<String>>>
+    }
+}
+
+export default function AllPlayers({ state, setState, chipSelection }: AllPlayersProps) {
+    const {selection, setSelection} = chipSelection;
 
-export default function AllPlayers({ state, setState }: StateProps) {
     return (
         <div className="all-players">
             {
-                state.players?.map((player: PlayerData) => <Player key={v4()} player={player} state={state} setState={setState} />)
+                state.players?.map((player: PlayerData) => <Player key={v4()} chipSelection={chipSelection} player={player} state={state} setState={setState} />)
             }
         </div>
     )

src/components/Player/Player.tsx

@@ -1,38 +1,73 @@
 import { AppState, PlayerData, ResourceCost, StateProps } from "../../util/types"
 import { v4 } from "uuid";
-import { useEffect, useState } from "react";
+import React, { Dispatch, SetStateAction, useEffect, useState } from "react";
 import { TurnOrderUtil } from "../../util/TurnOrderUtil";
 
 interface PlayerProps extends StateProps {
     player: PlayerData
+    chipSelection: {
+        selection: String[],
+        setSelection: Dispatch<SetStateAction<Array<String>>>
+    }
 }
 
-export default function Player({ player, state, setState }: PlayerProps) {
+enum ActionPrompts {
+    "Choose your action type below:",
+    "Make a selection of three different available resources, or two of the same.",
+    "Choose a card to purchase above.",
+    "Select any card above to reserve. You will also automatically take a gold chip.",
+    "Select any card above to reserve. You have the maximum allowed number of chips, so you cannnot take a gold chip.",
+    "It is not your turn."
+}
+
+export default function Player({ player, state, setState, chipSelection }: PlayerProps) {
+    const [actionPrompt, setActionPrompt] = useState(ActionPrompts[0]);
     const [dynamic, setDynamic] = useState<PlayerData>();
+    const { selection, setSelection } = chipSelection;
 
     useEffect(() => {
         setDynamic(state.players.find((element: PlayerData) => element.id === player.id));
     }, [state]);
 
-    const getChips = (resource: string) => {
+    useEffect(() => {
+        console.log(selection)
+    }, [selection, setSelection])
+
+    const getChips = () => {
         if (!dynamic?.turnActive) return;
+        setActionPrompt(ActionPrompts[1]);
+
+        console.log(selection);
+
+        if (selection.length < 3) return;
+
+        console.log('conditions met!');
         
         setState((prev: AppState) => {
             const { newPlayers, roundIncrement } = TurnOrderUtil(prev, dynamic);
+            let newResources = prev.gameboard.tradingResources;
+
+            for (let item of selection) {
+                for (let [key, value] of Object.entries(newResources)) {
+                    if (key === item) {
+                        newResources[key as keyof ResourceCost] = value - 1;
+                        break;
+                    }
+                }
+            }
             
             return {
                 ...prev,
                 round: (roundIncrement ? prev.round + 1 : prev.round),
+                players: newPlayers,
                 gameboard: {
                     ...prev.gameboard,
-                    tradingResources: {
+                    tradingResources: newResources
-                        ...prev.gameboard.tradingResources,
-                        [resource as keyof ResourceCost]: prev.gameboard.tradingResources[resource as keyof ResourceCost] -= 1
-                    }
                 },
-                players: newPlayers
             }
         })
+
+        setSelection([]);
     }
 
     return (
@@ -43,8 +78,12 @@ export default function Player({ player, state, setState }: PlayerProps) {
             <p>Is {player.starter || "not"} round starter</p>
 
             {/* Dynamic data from state */}
-            <p>{dynamic?.turnActive ? "My turn!" : "..."}</p>
+            <p>{dynamic?.turnActive ? actionPrompt : "..."}</p>
-            <button onClick={() => getChips('ruby')}>Get Chips</button>
+
+            <button onClick={getChips}> {selection.length < 3 ? "Get Chips" : "Confirm"} </button>
+
+            <button onClick={()=>{}}>Buy a Card</button>
+            <button onClick={()=>{}}>Reserve a Card</button>
             <div className="player-cards"></div>
             <div className="player-resources"></div>
         </div>

src/components/Resources/AvailableChips.tsx

@@ -1,20 +1,47 @@
 import { ResourceCost, StateProps } from "../../util/types";
 import { v4 } from "uuid";
 import "./AvailableChips.css"
-import { useEffect } from "react";
+import { Dispatch, SetStateAction, useEffect } from "react";
+
+interface AvailableChipsProps extends StateProps {
+    chipSelection: {
+        selection: String[],
+        setSelection: Dispatch<SetStateAction<Array<String>>>
+    }
+}
+
+export default function AvailableChips({ state, chipSelection }: AvailableChipsProps) {
+    const { selection, setSelection } = chipSelection;
+
+    const handleSelection = (key: string) => {
+        let newValue = selection;
+
+        if (newValue.length > 3) return;
+        newValue.push(key);
+
+        setSelection(newValue);
+        console.log(selection);
+    }
 
-export default function AvailableChips({ state }: StateProps) {
     useEffect(() => {
         return;
     }, [state])
 
+    useEffect(() => {
+        console.log(selection);
+    }, [selection, setSelection])
+
     return (
         <div className="available-chips">
             {
                 Object.keys(state.gameboard.tradingResources).map((key: string) => {
                     return (
                         <div key={v4()} className={`chips-${key}`}>
-                            <p>{key}: {state.gameboard.tradingResources[key as keyof ResourceCost]}</p>
+                            <button
+                                onClick={() => handleSelection(key)}
+                                value={key}>
+                                {key}: {state.gameboard.tradingResources[key as keyof ResourceCost]}
+                            </button>
                         </div>
                     )
                 })