incorporating action types into app state

src/App.tsx

@@ -2,12 +2,12 @@ import { BrowserRouter, Routes, Route } from 'react-router-dom'
 import { useState } from 'react'
 import Gameboard from './components/Gameboard/Gameboard'
 import GameConstructor from './util/GameConstructor';
-import { PlayerData, NobleData, CardData } from './util/types';
+import { PlayerData, NobleData, CardData, AppState } from './util/types';
 import CardDeck from './data/cards.json';
 import './App.css'
 
 function App() {
-  const [state, setState] = useState({
+  const [state, setState] = useState<AppState>({
     gameboard: {
       nobles: new Array<NobleData>,
       cardRows: {
@@ -24,9 +24,20 @@ function App() {
           gold: 5
       },
       deck: CardDeck,
-  },
-  round: 1,
-  players: new Array<PlayerData>,
+    },
+    round: 1,
+    players: new Array<PlayerData>,
+    actions: {
+      getChips: {
+        active: false
+      },
+      buyCard: {
+        active: false
+      },
+      reserveCard: {
+        active: false
+      }
+    }
   })
 
   return (

src/components/Gameboard/Gameboard.tsx

@@ -1,5 +1,5 @@
-import { Dispatch, SetStateAction, useEffect, useState } from 'react';
-import { CardData, FullDeck, NobleData, StateProps } from '../../util/types';
+import { useEffect, useState } from 'react';
+import { FullDeck, NobleData, StateProps } from '../../util/types';
 import AllPlayers from '../Player/AllPlayers';
 import AvailableChips from '../Resources/AvailableChips';
 import CardRow from './CardRow';

src/components/Player/Player.tsx

@@ -1,7 +1,7 @@
-import { AppState, PlayerData, ResourceCost, StateProps } from "../../util/types"
-import { v4 } from "uuid";
-import React, { Dispatch, SetStateAction, useEffect, useState } from "react";
+import { AppState, ActionPrompts, GameActions, PlayerData, ResourceCost, StateProps } from "../../util/types";
+import { Dispatch, SetStateAction, useEffect, useState } from "react";
 import { TurnOrderUtil } from "../../util/TurnOrderUtil";
+import { v4 } from "uuid";
 
 interface PlayerProps extends StateProps {
     player: PlayerData
@@ -11,17 +11,9 @@ interface PlayerProps extends StateProps {
     }
 }
 
-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 [actionType, setActionType] = useState<GameActions>();
     const [dynamic, setDynamic] = useState<PlayerData>();
     const { selection, setSelection } = chipSelection;
 
@@ -30,18 +22,30 @@ export default function Player({ player, state, setState, chipSelection }: Playe
     }, [state]);
 
     useEffect(() => {
-        console.log(selection)
+        return;
     }, [selection, setSelection])
 
+    useEffect(() => {
+        switch (actionType) {
+            case GameActions.GETCHIPS:
+                console.log('get chips');
+                getChips();
+                setSelection([]);
+                setActionType(GameActions.AWAIT);
+                break;
+            case GameActions.AWAIT:
+                console.log('waiting for next action');
+                break;
+            default:
+                break;
+        }
+    }, [actionType]);
+
     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);
@@ -66,8 +70,6 @@ export default function Player({ player, state, setState, chipSelection }: Playe
                 },
             }
         })
-
-        setSelection([]);
     }
 
     return (
@@ -80,7 +82,7 @@ export default function Player({ player, state, setState, chipSelection }: Playe
             {/* Dynamic data from state */}
             <p>{dynamic?.turnActive ? actionPrompt : "..."}</p>
 
-            <button onClick={getChips}> {selection.length < 3 ? "Get Chips" : "Confirm"} </button>
+            <button onClick={() => setActionType(GameActions.GETCHIPS)}>Get Chips</button>
 
             <button onClick={()=>{}}>Buy a Card</button>
             <button onClick={()=>{}}>Reserve a Card</button>

src/components/Resources/AvailableChips.tsx

@@ -1,7 +1,7 @@
-import { ResourceCost, StateProps } from "../../util/types";
+import { GameActions, ResourceCost, StateProps } from "../../util/types";
 import { v4 } from "uuid";
 import "./AvailableChips.css"
-import { Dispatch, SetStateAction, useEffect } from "react";
+import { Dispatch, SetStateAction, useEffect, useState } from "react";
 
 interface AvailableChipsProps extends StateProps {
     chipSelection: {
@@ -20,7 +20,6 @@ export default function AvailableChips({ state, chipSelection }: AvailableChipsP
         newValue.push(key);
 
         setSelection(newValue);
-        console.log(selection);
     }
 
     useEffect(() => {
@@ -28,11 +27,20 @@ export default function AvailableChips({ state, chipSelection }: AvailableChipsP
     }, [state])
 
     useEffect(() => {
-        console.log(selection);
-    }, [selection, setSelection])
+        switch (state.actions) {
+            case (GameActions.GETCHIPS):
+                console.log('get chips');
+        }
+    })
 
     return (
         <div className="available-chips">
+
+            <div className="current-selection">
+                <strong>Selection:</strong>
+                { selection.map((each) => <p key={v4()}>{each}</p>) }
+            </div>
+
             {
                 Object.keys(state.gameboard.tradingResources).map((key: string) => {
                     return (
@@ -46,6 +54,7 @@ export default function AvailableChips({ state, chipSelection }: AvailableChipsP
                     )
                 })
             }
+
         </div>
     )
 }

src/util/types.ts

@@ -1,5 +1,4 @@
 import { Dispatch, SetStateAction } from "react"
-import { AppState } from "../context/types"
 
 export interface AppState {
     gameboard: {
@@ -13,7 +12,23 @@ export interface AppState {
         deck: FullDeck,
     },
     round: number,
-    players: Array<PlayerData>
+    players: Array<PlayerData>,
+    actions?: {
+        getChips?: {
+            active: boolean
+            chips?: Array<keyof ResourceCost>
+            valid?: boolean
+        }
+        buyCard?: {
+            active: boolean
+            card?: CardData | null
+        }
+        reserveCard?: {
+            active: boolean
+            card?: CardData | null
+            includeGold?: boolean
+        }
+    }
 }
 
 export interface StateProps {
@@ -21,6 +36,22 @@ export interface StateProps {
     setState: Dispatch<SetStateAction<AppState>>
 }
 
+export enum GameActions {
+    GETCHIPS,
+    BUYCARD,
+    RESERVECARD,
+    AWAIT
+}
+
+export 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 interface GameInformation {
     players: PlayerData[],
     nobles: NobleData[],