in progress: ui prompt on player component

src/App.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react'
 import { BrowserRouter, Routes, Route } from 'react-router-dom'
 import Gameboard from './components/Gameboard/Gameboard'
 import GameConstructor from './util/GameConstructor';
-import { initialState } from './util/initialState';
+import { initialState } from './util/stateSetters';
 import './App.css'
 
 function App() {

src/components/Gameboard/Gameboard.tsx

@@ -1,10 +1,14 @@
-import { useCallback, useEffect, useState } from 'react';
+// types, data, utils
 import { AppState, PlayerData, ResourceCost, SetActionType, StateProps } from '../../util/types';
+import { setStateBuyCard, setStateGetChips, setStateReserveCard } from '../../util/stateSetters';
+import { useCallback, useEffect, useState } from 'react';
+import Nobles from './Nobles';
+
+// components
 import initializeBoard from '../../util/initializeBoard';
 import AvailableChips from '../Resources/AvailableChips';
 import AllPlayers from '../Player/AllPlayers';
 import CardRow from '../Card/CardRow';
-import Nobles from './Nobles';
 
 export default function Gameboard({ state, setState }: StateProps) {
     const [view, setView] = useState(<p>Loading...</p>);
@@ -30,16 +34,27 @@ export default function Gameboard({ state, setState }: StateProps) {
                 }
             }
         })
-
-        console.log(state);
     }, []);
 
     const setActionState = useCallback((value: SetActionType, player: PlayerData) => {
         if (!player?.turnActive) return;
-        console.log(player.name + SetActionType[value]);
+
+        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 to set up initial board
+    // util functions, setup on mount
     useEffect(() => {
         initializeBoard(state, setState);
     }, [])
@@ -69,6 +84,11 @@ export default function Gameboard({ state, setState }: StateProps) {
         }
     }, [state]);
 
+    // DEBUG
+    useEffect(() => {
+        console.log(state);
+    }, [state])
+
     // render
     return view
 }

src/components/Player/ActionMethods.ts

@@ -1,7 +1,7 @@
 import { AppState, PlayerData, ResourceCost, setStateType } from "../../util/types";
 import { TurnOrderUtil } from "../../util/TurnOrderUtil";
 
-export const getChips = (resource: string, dynamic: PlayerData | undefined, setState: setStateType) => {
+export const getChips = (resource: string | Array<keyof ResourceCost>, dynamic: PlayerData | undefined, setState: setStateType) => {
     if (!dynamic || !dynamic?.turnActive) return;
 
     setState((prev: AppState) => {

src/components/Player/Player.tsx

@@ -1,6 +1,5 @@
 import { PlayerData, SetActionType, StateProps } from "../../util/types"
 import { useEffect, useState } from "react";
-import { getChips } from "./ActionMethods";
 import { v4 } from "uuid";
 
 interface PlayerProps extends StateProps {
@@ -10,23 +9,29 @@ interface PlayerProps extends StateProps {
 
 export default function Player({ player, state, setState, setActionState }: PlayerProps) {
     const [dynamic, setDynamic] = useState<PlayerData>();
+    const [prompt, setPrompt] = useState("My turn!");
+    const [actionSelection, setActionSelection] = useState(-1);
 
     useEffect(() => setDynamic(state.players.find((element: PlayerData) => element.id === player.id)), [state]);
 
-    const handleSelection = (input: number) => {
-        switch (input) {
-            case 0:
-                setActionState(SetActionType.GETCHIPS, player);
-                getChips('ruby', dynamic, setState);
-                break;
-            case 1:
-                setActionState(SetActionType.BUYCARD, player);
-                break;
-            default:
-                setActionState(SetActionType.AWAIT, player);
-                break;
-        }
-    }
+    useEffect(() => {
+        setActionState(actionSelection, dynamic);
+        setPrompt(() => {
+            switch (actionSelection) {
+                case -1:
+                    return "My turn!"
+                case 0:
+                    return "Select up to three different chips, or two of the same color."
+                case 1:
+                    return "Buy a card from the ones above using your available resources."
+                case 2:
+                    return "Choose a card from the ones above to reserve for later purchase. \
+                    If you have less than ten chips, you may also pick up a gold chip."
+                default:
+                    return ""
+            }
+        })
+    }, [actionSelection, prompt])
 
     return (
         <div className="player-ui" key={v4()}>
@@ -36,10 +41,10 @@ export default function Player({ player, state, setState, setActionState }: Play
             <p>Is {player.starter || "not"} round starter</p>
 
             {/* Dynamic data from state */}
-            <p>{dynamic?.turnActive ? "My turn!" : "..."}</p>
-            <button onClick={() => handleSelection(0)}>Get Chips</button>
-            <button onClick={() => handleSelection(1)}>Buy Card</button>
-            <button onClick={() => handleSelection(2)}>Reserve Card</button>
+            {dynamic?.turnActive ? <p>{prompt}</p> : <p>...</p>}
+            <button onClick={() => setActionSelection(0)}>Get Chips</button>
+            <button onClick={() => setActionSelection(1)}>Buy Card</button>
+            <button onClick={() => setActionSelection(2)}>Reserve Card</button>
             <div className="player-cards"></div>
             <div className="player-resources"></div>
         </div>

src/util/initialState.ts

@@ -1,29 +0,0 @@
-import { CardData, NobleData, PlayerData } from "./types";
-import CardDeck from '../data/cards.json';
-
-export const initialState = {
-    gameboard: {
-        nobles: new Array<NobleData>,
-        cardRows: {
-            tierOne: new Array<CardData>,
-            tierTwo: new Array<CardData>,
-            tierThree: new Array<CardData>,
-        },
-        tradingResources: {
-            ruby: 7,
-            sapphire: 7,
-            emerald: 7,
-            diamond: 7,
-            onyx: 7,
-            gold: 5
-        },
-        deck: CardDeck,
-    },
-    round: 1,
-    players: new Array<PlayerData>,
-    actions: {
-        buyCard: { active: false },
-        getChips: { active: false },
-        reserveCard: { active: false }
-    }
-}

src/util/stateSetters.ts

@@ -0,0 +1,70 @@
+import { AppState, CardData, NobleData, PlayerData, ResourceCost } from "./types";
+import CardDeck from '../data/cards.json';
+
+export const initialState = {
+    gameboard: {
+        nobles: new Array<NobleData>,
+        cardRows: {
+            tierOne: new Array<CardData>,
+            tierTwo: new Array<CardData>,
+            tierThree: new Array<CardData>,
+        },
+        tradingResources: {
+            ruby: 7,
+            sapphire: 7,
+            emerald: 7,
+            diamond: 7,
+            onyx: 7,
+            gold: 5
+        },
+        deck: CardDeck,
+    },
+    round: 1,
+    players: new Array<PlayerData>,
+    actions: {
+        buyCard: { active: false },
+        getChips: { active: false },
+        reserveCard: { active: false }
+    }
+}
+
+export const setStateGetChips = (prev: AppState) => {
+    return {
+        ...prev,
+        actions: {
+            ...initialState.actions,
+            getChips: {
+                active: true,
+                selection: new Array<keyof ResourceCost>,
+                valid: false
+            }
+        }
+    }
+}
+
+export const setStateBuyCard = (prev: AppState) => {
+    return {
+        ...prev,
+        actions: {
+            ...initialState.actions,
+            buyCard: {
+                active: true,
+                valid: false
+            }
+        }
+    }
+}
+
+export const setStateReserveCard = (prev: AppState) => {
+    return {
+        ...prev,
+        actions: {
+            ...initialState.actions,
+            reserveCard: {
+                active: true,
+                includeGold: false,
+                valid: false
+            }
+        }
+    }
+}

src/util/types.ts

@@ -34,6 +34,7 @@ interface StateActions {
         active: boolean
         selection?: CardData
         includeGold?: boolean
+        valid?: boolean
         confirm?: () => void
     }
 }