From a5c5b83b27e03c5fea741b6c62f7905790728c97 Mon Sep 17 00:00:00 2001
From: Mikayla Dobson <93477693+innocuous-symmetry@users.noreply.github.com>
Date: Sat, 23 Jul 2022 11:59:55 -0500
Subject: [PATCH 1/4] in progress: turn handling for picking up resources

---
 src/components/Gameboard/Gameboard.tsx      |  6 +-
 src/components/Player/AllPlayers.tsx        | 16 +++++-
 src/components/Player/Player.tsx            | 61 +++++++++++++++++----
 src/components/Resources/AvailableChips.tsx | 33 ++++++++++-
 4 files changed, 97 insertions(+), 19 deletions(-)

diff --git a/src/components/Gameboard/Gameboard.tsx b/src/components/Gameboard/Gameboard.tsx
index 88078f2..a61e40d 100644
--- a/src/components/Gameboard/Gameboard.tsx
+++ b/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} />
-                    <AllPlayers state={state} setState={setState} />
+                    <AvailableChips chipSelection={chipSelection} state={state} setState={setState} />
+                    <AllPlayers chipSelection={chipSelection} state={state} setState={setState} />
                 </div>
             )
         }
diff --git a/src/components/Player/AllPlayers.tsx b/src/components/Player/AllPlayers.tsx
index 1378695..cbbd7f4 100644
--- a/src/components/Player/AllPlayers.tsx
+++ b/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>
     )
diff --git a/src/components/Player/Player.tsx b/src/components/Player/Player.tsx
index 26e168e..63a1c07 100644
--- a/src/components/Player/Player.tsx
+++ b/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) => {
-        if (!dynamic?.turnActive) return;
+    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: {
-                        ...prev.gameboard.tradingResources,
-                        [resource as keyof ResourceCost]: prev.gameboard.tradingResources[resource as keyof ResourceCost] -= 1
-                    }
+                    tradingResources: newResources
                 },
-                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>
-            <button onClick={() => getChips('ruby')}>Get Chips</button>
+            <p>{dynamic?.turnActive ? actionPrompt : "..."}</p>
+
+            <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>
diff --git a/src/components/Resources/AvailableChips.tsx b/src/components/Resources/AvailableChips.tsx
index baaad0a..40b38d0 100644
--- a/src/components/Resources/AvailableChips.tsx
+++ b/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>
                     )
                 })

From 3cfad260bf3ee934e31d62314780b2354c203147 Mon Sep 17 00:00:00 2001
From: Mikayla Dobson <93477693+innocuous-symmetry@users.noreply.github.com>
Date: Sat, 23 Jul 2022 12:41:18 -0500
Subject: [PATCH 2/4] incorporating action types into app state

---
 src/App.tsx                                 | 21 ++++++++---
 src/components/Gameboard/Gameboard.tsx      |  4 +-
 src/components/Player/Player.tsx            | 42 +++++++++++----------
 src/components/Resources/AvailableChips.tsx | 19 +++++++---
 src/util/{types.d.ts => types.ts}           | 35 ++++++++++++++++-
 5 files changed, 87 insertions(+), 34 deletions(-)
 rename src/util/{types.d.ts => types.ts} (61%)

diff --git a/src/App.tsx b/src/App.tsx
index f586ed3..9cac747 100644
--- a/src/App.tsx
+++ b/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 (
diff --git a/src/components/Gameboard/Gameboard.tsx b/src/components/Gameboard/Gameboard.tsx
index a61e40d..d687614 100644
--- a/src/components/Gameboard/Gameboard.tsx
+++ b/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';
diff --git a/src/components/Player/Player.tsx b/src/components/Player/Player.tsx
index 63a1c07..a79b6cc 100644
--- a/src/components/Player/Player.tsx
+++ b/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>
diff --git a/src/components/Resources/AvailableChips.tsx b/src/components/Resources/AvailableChips.tsx
index 40b38d0..ba5d4fb 100644
--- a/src/components/Resources/AvailableChips.tsx
+++ b/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>
     )
 }
\ No newline at end of file
diff --git a/src/util/types.d.ts b/src/util/types.ts
similarity index 61%
rename from src/util/types.d.ts
rename to src/util/types.ts
index bd11f8e..f374aae 100644
--- a/src/util/types.d.ts
+++ b/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[],

From a76823f2b56f97ce0f2fca7b91b03a963c64a36b Mon Sep 17 00:00:00 2001
From: Mikayla Dobson <93477693+innocuous-symmetry@users.noreply.github.com>
Date: Sat, 23 Jul 2022 14:05:36 -0500
Subject: [PATCH 3/4] to do: pass props back to parent from children

---
 src/components/Gameboard/Gameboard.tsx      | 13 ++++--
 src/components/Player/AllPlayers.tsx        | 11 +++--
 src/components/Player/Player.tsx            | 34 +++++++-------
 src/components/Resources/AvailableChips.tsx | 25 +++++------
 src/util/types.ts                           | 34 +++++++-------
 src/util/useActionStatus.tsx                | 17 +++++++
 src/util/useActionType.tsx                  | 50 +++++++++++++++++++++
 7 files changed, 132 insertions(+), 52 deletions(-)
 create mode 100644 src/util/useActionStatus.tsx
 create mode 100644 src/util/useActionType.tsx

diff --git a/src/components/Gameboard/Gameboard.tsx b/src/components/Gameboard/Gameboard.tsx
index d687614..50afc36 100644
--- a/src/components/Gameboard/Gameboard.tsx
+++ b/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
 }
\ No newline at end of file
diff --git a/src/components/Player/AllPlayers.tsx b/src/components/Player/AllPlayers.tsx
index cbbd7f4..a123b3e 100644
--- a/src/components/Player/AllPlayers.tsx
+++ b/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>
     )
diff --git a/src/components/Player/Player.tsx b/src/components/Player/Player.tsx
index a79b6cc..0946cb3 100644
--- a/src/components/Player/Player.tsx
+++ b/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>
diff --git a/src/components/Resources/AvailableChips.tsx b/src/components/Resources/AvailableChips.tsx
index ba5d4fb..5f4bc11 100644
--- a/src/components/Resources/AvailableChips.tsx
+++ b/src/components/Resources/AvailableChips.tsx
@@ -2,37 +2,36 @@ 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;
-        newValue.push(key);
+        if (selection.length > 3) return;
 
-        setSelection(newValue);
+        setSelection((prev) => {
+            let newValue = prev;
+            newValue.push(key);
+            return newValue;
+        })
     }
 
     useEffect(() => {
-        return;
+        useActionStatus(state);
     }, [state])
 
-    useEffect(() => {
-        switch (state.actions) {
-            case (GameActions.GETCHIPS):
-                console.log('get chips');
-        }
-    })
-
     return (
         <div className="available-chips">
 
diff --git a/src/util/types.ts b/src/util/types.ts
index f374aae..52af9ad 100644
--- a/src/util/types.ts
+++ b/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.",
diff --git a/src/util/useActionStatus.tsx b/src/util/useActionStatus.tsx
new file mode 100644
index 0000000..f632a2d
--- /dev/null
+++ b/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;
+    }
+}
\ No newline at end of file
diff --git a/src/util/useActionType.tsx b/src/util/useActionType.tsx
new file mode 100644
index 0000000..3b1d623
--- /dev/null
+++ b/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
+    }
+}
\ No newline at end of file

From 120d6773a682875b454791ab88ca488fbe0a6b3b Mon Sep 17 00:00:00 2001
From: Mikayla Dobson <93477693+innocuous-symmetry@users.noreply.github.com>
Date: Sun, 24 Jul 2022 09:45:01 -0500
Subject: [PATCH 4/4] backtracking

---
 src/components/Player/AllPlayers.tsx |  2 +-
 src/components/Player/Player.tsx     | 24 ++++++++++++++----------
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/components/Player/AllPlayers.tsx b/src/components/Player/AllPlayers.tsx
index a123b3e..becd964 100644
--- a/src/components/Player/AllPlayers.tsx
+++ b/src/components/Player/AllPlayers.tsx
@@ -14,7 +14,7 @@ interface AllPlayersProps extends StateProps {
 
 export default function AllPlayers({ state, setState, chipSelection, liftFromChildren }: AllPlayersProps) {
     useEffect(() => {
-        console.log(state);
+        return;
     }, [state])
 
     return (
diff --git a/src/components/Player/Player.tsx b/src/components/Player/Player.tsx
index 0946cb3..3575728 100644
--- a/src/components/Player/Player.tsx
+++ b/src/components/Player/Player.tsx
@@ -16,21 +16,24 @@ interface PlayerProps extends StateProps {
 export default function Player({ player, state, setState, chipSelection, liftFromChildren }: PlayerProps) {
     const [actionPrompt, setActionPrompt] = useState(ActionPrompts[0]);
     const [actionType, setActionType] = useState<GameActions>(GameActions.AWAIT);
-    const [dynamic, setDynamic] = useState<PlayerData | undefined>(state.players.find((element: PlayerData) => element.id === player.id));
+    const [dynamic, setDynamic] = useState<PlayerData | undefined>();
     const { selection, setSelection } = chipSelection;
 
     useEffect(() => {
         return;
     }, [selection, setSelection])
 
+    useEffect(() => {
+        setDynamic(state.players.find((element: PlayerData) => element.id === player.id));
+    }, [state, setState]);
+
     useEffect(() => {
         const newState = useActionType(state, actionType);
-        console.log(newState);
 
         switch (actionType) {
             case GameActions.GETCHIPS:
                 setActionPrompt(ActionPrompts[1]);
-                getChips();
+                getChips(newState);
                 setSelection([]);
                 break;
             case GameActions.BUYCARD:
@@ -44,15 +47,16 @@ export default function Player({ player, state, setState, chipSelection, liftFro
         }
     }, [actionType]);
 
-    const getChips = () => {
+    const getChips = (newState: AppState) => {
         if (!dynamic?.turnActive) return;
         setActionPrompt(ActionPrompts[1]);
 
         if (selection.length < 3) return;
         
-        setState((prev: AppState) => {
-            const { newPlayers, roundIncrement } = TurnOrderUtil(prev, dynamic);
-            let newResources = prev.gameboard.tradingResources;
+        setState(() => {
+            const { newPlayers, roundIncrement } = TurnOrderUtil(newState, dynamic);
+            console.log(newPlayers)
+            let newResources = newState.gameboard.tradingResources;
 
             for (let item of selection) {
                 for (let [key, value] of Object.entries(newResources)) {
@@ -64,11 +68,11 @@ export default function Player({ player, state, setState, chipSelection, liftFro
             }
             
             return {
-                ...prev,
-                round: (roundIncrement ? prev.round + 1 : prev.round),
+                ...newState,
+                round: (roundIncrement ? newState.round + 1 : newState.round),
                 players: newPlayers,
                 gameboard: {
-                    ...prev.gameboard,
+                    ...newState.gameboard,
                     tradingResources: newResources
                 },
             }