to do: pass props back to parent from children

src/components/Gameboard/Gameboard.tsx

@@ -1,10 +1,11 @@
-import { useEffect, useState } from 'react';
-import { FullDeck, NobleData, StateProps } from '../../util/types';
+import { useCallback, useEffect, useState } from 'react';
+import { AppState, FullDeck, NobleData, StateProps } from '../../util/types';
 import AllPlayers from '../Player/AllPlayers';
 import AvailableChips from '../Resources/AvailableChips';
 import CardRow from './CardRow';
 import Nobles from './Nobles';
 import NobleStore from '../../data/nobles.json';
+import useActionStatus from '../../util/useActionStatus';
 
 export default function Gameboard({ state, setState }: StateProps) {
     const [view, setView] = useState(<p>Loading...</p>)
@@ -31,8 +32,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 chipSelection={chipSelection} state={state} setState={setState} />
-                    <AllPlayers chipSelection={chipSelection} state={state} setState={setState} />
+                    <AvailableChips liftFromChildren={liftFromChildren} chipSelection={chipSelection} state={state} setState={setState} />
+                    <AllPlayers liftFromChildren={liftFromChildren} chipSelection={chipSelection} state={state} setState={setState} />
                 </div>
             )
         }
@@ -83,5 +84,9 @@ export default function Gameboard({ state, setState }: StateProps) {
         setNobles();
     }
 
+    const liftFromChildren = useCallback((childState: AppState) => {
+        setState(childState);
+    }, [state]);
+
     return view
 }

src/components/Player/AllPlayers.tsx

@@ -1,23 +1,26 @@
 import Player from "./Player";
 import { v4 } from "uuid";
 import { PlayerData, StateProps } from "../../util/types";
-import { Dispatch, SetStateAction } from "react";
+import { Dispatch, SetStateAction, useEffect } from "react";
 import "./AllPlayers.css"
 
 interface AllPlayersProps extends StateProps {
+    liftFromChildren?: any,
     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, chipSelection, liftFromChildren }: AllPlayersProps) {
+    useEffect(() => {
+        console.log(state);
+    }, [state])
 
     return (
         <div className="all-players">
             {
-                state.players?.map((player: PlayerData) => <Player key={v4()} chipSelection={chipSelection} player={player} state={state} setState={setState} />)
+                state.players?.map((player: PlayerData) => <Player key={v4()} liftFromChildren={liftFromChildren} chipSelection={chipSelection} player={player} state={state} setState={setState} />)
             }
         </div>
     )

src/components/Player/Player.tsx

@@ -1,6 +1,7 @@
 import { AppState, ActionPrompts, GameActions, PlayerData, ResourceCost, StateProps } from "../../util/types";
 import { Dispatch, SetStateAction, useEffect, useState } from "react";
 import { TurnOrderUtil } from "../../util/TurnOrderUtil";
+import useActionType from "../../util/useActionType";
 import { v4 } from "uuid";
 
 interface PlayerProps extends StateProps {
@@ -8,33 +9,35 @@ interface PlayerProps extends StateProps {
     chipSelection: {
         selection: String[],
         setSelection: Dispatch<SetStateAction<Array<String>>>
-    }
+    },
+    liftFromChildren: any
 }
 
-export default function Player({ player, state, setState, chipSelection }: PlayerProps) {
+export default function Player({ player, state, setState, chipSelection, liftFromChildren }: PlayerProps) {
     const [actionPrompt, setActionPrompt] = useState(ActionPrompts[0]);
-    const [actionType, setActionType] = useState<GameActions>();
-    const [dynamic, setDynamic] = useState<PlayerData>();
+    const [actionType, setActionType] = useState<GameActions>(GameActions.AWAIT);
+    const [dynamic, setDynamic] = useState<PlayerData | undefined>(state.players.find((element: PlayerData) => element.id === player.id));
     const { selection, setSelection } = chipSelection;
 
-    useEffect(() => {
-        setDynamic(state.players.find((element: PlayerData) => element.id === player.id));
-    }, [state]);
-
     useEffect(() => {
         return;
     }, [selection, setSelection])
 
     useEffect(() => {
+        const newState = useActionType(state, actionType);
+        console.log(newState);
+
         switch (actionType) {
             case GameActions.GETCHIPS:
-                console.log('get chips');
+                setActionPrompt(ActionPrompts[1]);
                 getChips();
                 setSelection([]);
-                setActionType(GameActions.AWAIT);
                 break;
-            case GameActions.AWAIT:
-                console.log('waiting for next action');
+            case GameActions.BUYCARD:
+                setActionPrompt(ActionPrompts[2]);
+                break;
+            case GameActions.RESERVECARD:
+                setActionPrompt(ActionPrompts[3]);
                 break;
             default:
                 break;
@@ -70,6 +73,8 @@ export default function Player({ player, state, setState, chipSelection }: Playe
                 },
             }
         })
+
+        liftFromChildren(state);
     }
 
     return (
@@ -83,9 +88,8 @@ export default function Player({ player, state, setState, chipSelection }: Playe
             <p>{dynamic?.turnActive ? actionPrompt : "..."}</p>
 
             <button onClick={() => setActionType(GameActions.GETCHIPS)}>Get Chips</button>
-
-            <button onClick={()=>{}}>Buy a Card</button>
-            <button onClick={()=>{}}>Reserve a Card</button>
+            <button onClick={()=> setActionType(GameActions.BUYCARD)}>Buy a Card</button>
+            <button onClick={()=> setActionType(GameActions.RESERVECARD)}>Reserve a Card</button>
             <div className="player-cards"></div>
             <div className="player-resources"></div>
         </div>

src/components/Resources/AvailableChips.tsx

@@ -2,36 +2,35 @@ import { GameActions, ResourceCost, StateProps } from "../../util/types";
 import { v4 } from "uuid";
 import "./AvailableChips.css"
 import { Dispatch, SetStateAction, useEffect, useState } from "react";
+import useActionStatus from "../../util/useActionStatus";
 
 interface AvailableChipsProps extends StateProps {
+    liftFromChildren: any,
     chipSelection: {
         selection: String[],
         setSelection: Dispatch<SetStateAction<Array<String>>>
     }
 }
 
-export default function AvailableChips({ state, chipSelection }: AvailableChipsProps) {
+export default function AvailableChips({ state, chipSelection, liftFromChildren }: AvailableChipsProps) {
     const { selection, setSelection } = chipSelection;
 
     const handleSelection = (key: string) => {
-        let newValue = selection;
+        console.log(key)
+        console.log(state);
 
-        if (newValue.length > 3) return;
+        if (selection.length > 3) return;
+
+        setSelection((prev) => {
+            let newValue = prev;
             newValue.push(key);
-
-        setSelection(newValue);
-    }
-
-    useEffect(() => {
-        return;
-    }, [state])
-
-    useEffect(() => {
-        switch (state.actions) {
-            case (GameActions.GETCHIPS):
-                console.log('get chips');
-        }
+            return newValue;
         })
+    }
+
+    useEffect(() => {
+        useActionStatus(state);
+    }, [state])
 
     return (
         <div className="available-chips">

src/util/types.ts

@@ -13,22 +13,7 @@ export interface AppState {
     },
     round: number,
     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
-        }
-    }
+    actions: ActionTypes
 }
 
 export interface StateProps {
@@ -43,6 +28,23 @@ export enum GameActions {
     AWAIT
 }
 
+export interface ActionTypes {
+    getChips: {
+        active: boolean
+        chips?: Array<keyof ResourceCost>
+        valid?: boolean
+    }
+    buyCard: {
+        active: boolean
+        card?: CardData | null
+    }
+    reserveCard: {
+        active: boolean
+        card?: CardData | null
+        includeGold?: boolean
+    }
+}
+
 export enum ActionPrompts {
     "Choose your action type below:",
     "Make a selection of three different available resources, or two of the same.",

src/util/useActionStatus.tsx

@@ -0,0 +1,17 @@
+import { AppState } from "./types";
+
+export default function useActionStatus(state: AppState) {
+    switch (true) {
+        case (state.actions.getChips.active):
+            console.log('get chips active');
+            break;
+        case (state.actions.buyCard.active):
+            console.log('buy card active');
+            break;
+        case (state.actions.reserveCard.active):
+            console.log("reserve card active")
+            break;
+        default:
+            break;
+    }
+}

src/util/useActionType.tsx

@@ -0,0 +1,50 @@
+import { ActionTypes, AppState, GameActions } from "./types";
+
+export default function useActionType(state: AppState, action: GameActions) {
+    let newActions: ActionTypes = {
+        getChips: { active: false },
+        buyCard: { active: false },
+        reserveCard: { active: false }
+    }
+
+    switch (action) {
+        case (GameActions.GETCHIPS):
+            newActions = {
+                ...newActions,
+                getChips: {
+                    active: true,
+                    chips: [],
+                    valid: false
+                }
+            }
+            break;
+        case (GameActions.BUYCARD):
+            newActions = {
+                ...newActions,
+                buyCard: {
+                    active: true,
+                    card: null
+                }
+            }
+            break;
+        case (GameActions.RESERVECARD):
+            newActions = {
+                ...newActions,
+                reserveCard: {
+                    active: true,
+                    card: null,
+                    includeGold: false
+                }
+            }
+            break;
+        case (GameActions.AWAIT):
+            break;
+        default:
+            break;
+    }
+
+    return {
+        ...state,
+        actions: newActions
+    }
+}