cleanup after refactoring action type functionality

src/components/Card/Card.tsx

@@ -1,11 +1,14 @@
 import { v4 } from 'uuid';
 import { CardProps } from '../../util/propTypes';
 import { ResourceCost } from '../../util/types';
+import { useCurrentPlayer } from '../../util/useCurrentPlayer';
 import { buyCardActions } from '../Player/ActionMethods';
-import { reserveCard } from '../Player/ActionMethods/reserveCardActions';
+import { hasMaxReserved, reserveCard } from '../Player/ActionMethods/reserveCardActions';
 const { buyCard, tooExpensive } = buyCardActions;
 
 export default function Card({ data, state, setState }: CardProps) {
+    const currentPlayer = useCurrentPlayer(state);
+
     return (
         <div className={`card`}>
             <div className="top-row">
@@ -21,14 +24,14 @@ export default function Card({ data, state, setState }: CardProps) {
                 { state.actions.buyCard.active &&
                     <button
                         onClick={() => buyCard(data, state, setState)}
-                        disabled={tooExpensive(data, state)}
+                        disabled={tooExpensive(data, state)}>
-                        >
                         Buy This Card
                     </button>
                 }
                 { state.actions.reserveCard.active &&
                     <button
-                        onClick={() => reserveCard(state, setState, data)}>
+                        onClick={() => reserveCard(state, setState, data)}
+                        disabled={hasMaxReserved(currentPlayer)}>
                         Reserve This Card
                     </button>
                 }

src/components/Gameboard/Gameboard.tsx

@@ -1,6 +1,5 @@
 // types, data, utils
-import { AppState, PlayerData, ResourceCost, SetActionType } from '../../util/types';
+import { AppState, ResourceCost } from '../../util/types';
-import { setStateBuyCard, setStateGetChips, setStateReserveCard } from '../../util/stateSetters';
 import { useCallback, useEffect, useState } from 'react';
 import { getChipsActions } from '../Player/ActionMethods';
 import { StateProps } from '../../util/propTypes';
@@ -44,24 +43,6 @@ export default function Gameboard({ state, setState }: StateProps) {
         })
     }, [state]);
 
-    const setActionState = useCallback((value: SetActionType, player?: PlayerData) => {
-        if (!player?.turnActive) return;
-
-        switch (value) {
-            case 0:
-                if (!state.actions.getChips.active) setState((prev) => setStateGetChips(prev));
-                break;
-            case 1:
-                if (!state.actions.buyCard.active) setState((prev) => setStateBuyCard(prev));
-                break;
-            case 2:
-                if (!state.actions.reserveCard.active) setState((prev) => setStateReserveCard(prev));
-                break;
-            default:
-                break;
-        }
-    }, []);
-
     // util functions, setup on mount
     useEffect(() => {
         initializeBoard(state, setState);
@@ -90,7 +71,7 @@ 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} />
-                    <AllPlayers state={state} setState={setState} setActionState={setActionState} />
+                    <AllPlayers state={state} setState={setState} />
                 </div>
             )
         }

src/components/Player/ActionMethods/buyCardActions.ts

@@ -1,6 +1,7 @@
 import cardTierToKey from "../../../util/cardTierToKey";
+import { initialActions } from "../../../util/stateSetters";
 import { turnOrderUtil } from "../../../util/turnOrderUtil";
-import { AppState, CardData, FullDeck, PlayerData, ResourceCost, setStateType } from "../../../util/types";
+import { AppState, CardData, PlayerData, ResourceCost, setStateType } from "../../../util/types";
 import { useCurrentPlayer } from "../../../util/useCurrentPlayer";
 
 export const tooExpensive = (card: CardData, state: AppState): boolean => {
@@ -99,7 +100,8 @@ export const buyCard = (card: CardData, state: AppState, setState: setStateType)
                 ...prev.gameboard,
                 tradingResources: prev.gameboard.tradingResources,
                 cardRows: updatedRows
-            }
+            },
+            actions: initialActions
         }
     })
 }

src/components/Player/ActionMethods/reserveCardActions.ts

@@ -1,4 +1,5 @@
 import cardTierToKey from "../../../util/cardTierToKey";
+import { initialActions } from "../../../util/stateSetters";
 import { turnOrderUtil } from "../../../util/turnOrderUtil";
 import { AppState, CardData, FullDeck, PlayerData, setStateType } from "../../../util/types";
 import { useCurrentPlayer } from "../../../util/useCurrentPlayer";
@@ -53,6 +54,7 @@ export const reserveCard = (state: AppState, setState: setStateType, card: CardD
             ...prev,
             round: (roundIncrement ? prev.round + 1 : prev.round),
             players: newPlayers,
+            actions: initialActions,
             gameboard: {
                 ...prev.gameboard,
                 cardRows: newCardRows

src/components/Player/AllPlayers.tsx

@@ -1,19 +1,15 @@
-import Player from "./Player";
 import { v4 } from "uuid";
-import "./AllPlayers.css"
+import Player from "./Player";
 import { PlayerData } from "../../util/types";
-import { useState } from "react";
+import { StateProps } from "../../util/propTypes";
-import { AllPlayersProps } from "../../util/propTypes";
+import "./AllPlayers.css"
 
-export default function AllPlayers({ state, setState, setActionState }: AllPlayersProps) {
+export default function AllPlayers({ state, setState }: StateProps) {
-    const [activePlayer, setActivePlayer] = useState();
+    const playerPool = state.players?.map((player: PlayerData) => <Player key={v4()} player={player} state={state} setState={setState} />);
-    const playerPool = state.players?.map((player: PlayerData) => <Player key={v4()} player={player} state={state} setState={setState} setActionState={setActionState} />);
 
     return (
         <div className="all-players">
-            {
+            { playerPool }
-                playerPool
-            }
         </div>
     )
 }

src/components/Player/Player.tsx

@@ -4,34 +4,36 @@ import { useEffect, useState } from "react";
 import { v4 } from "uuid";
 import { hasMaxReserved } from "./ActionMethods/reserveCardActions";
 import { hasMaxChips } from "./ActionMethods/getChipsActions";
+import { setStateAwaitAction, setStateBuyCard, setStateGetChips, setStateReserveCard } from "../../util/stateSetters";
 
-export default function Player({ player, state, setState, setActionState }: PlayerProps) {
+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 [actionSelection, setActionSelection] = useState(-1);
 
     useEffect(() => {
         setDynamic(state.players.find((element: PlayerData) => element.id === player.id))
     }, [state]);
 
-    // sets action label back to default on setstate (round change)
+    const handleClick = (actionSelection: number) => {
-    useEffect(() => {
+        switch (actionSelection) {
-        setActionState(-1, dynamic);
+            case 0:
-    }, [setState])
+                setState((prev) => setStateGetChips(prev));
-
+                setPrompt('Make your selection of up to three chips.');
-    useEffect(() => {
+                break;
-        setActionState(actionSelection, dynamic);
+            case 1:
-
+                setState((prev) => setStateBuyCard(prev));
-        if (state.actions.getChips.active) {
+                setPrompt('Choose a card above to purchase.');
-            setPrompt('Make your selection of up to three chips.');
+                break;
-        } else if (state.actions.buyCard.active) {
+            case 2:
-            setPrompt('Choose a card above to purchase.');
+                setState((prev) => setStateReserveCard(prev));
-        } else if (state.actions.reserveCard.active) {
+                setPrompt('Choose a card above to reserve.');
-            setPrompt('Choose a card above to reserve.');
+                break;
-        } else {
+            default:
-            setPrompt("Your turn! Select an action type below.");
+                setState((prev) => setStateAwaitAction(prev));
+                setPrompt("Your turn! Select an action type below.");
+                break;
         }
-    }, [actionSelection])
+    }
 
     return (
         <div className="player-ui" key={v4()}>
@@ -45,9 +47,9 @@ export default function Player({ player, state, setState, setActionState }: Play
             <section className="turn-and-action-based">
                 <p>Score: {dynamic?.points}</p>
                 <p>{dynamic?.turnActive ? prompt : '...'}</p>
-                <button disabled={dynamic && hasMaxChips(dynamic)} onClick={() => setActionSelection(0)}>Get Chips</button>
+                <button disabled={dynamic && hasMaxChips(dynamic)} onClick={() => handleClick(0)}>Get Chips</button>
-                <button onClick={() => setActionSelection(1)}>Buy Card</button>
+                <button onClick={() => handleClick(1)}>Buy Card</button>
-                <button disabled={dynamic && hasMaxReserved(dynamic)} onClick={() => setActionSelection(2)}>Reserve Card</button>
+                <button disabled={dynamic && hasMaxReserved(dynamic)} onClick={() => handleClick(2)}>Reserve Card</button>
             </section>
 
             <section className="resources">

src/util/propTypes.ts

@@ -17,7 +17,7 @@ export interface AllPlayersProps extends StateProps {
     setActionState: (value: SetActionType, player?: PlayerData) => void
 }
 
-export interface PlayerProps extends AllPlayersProps {
+export interface PlayerProps extends StateProps {
     player: PlayerData
 }