src/components/Gameboard/Gameboard.tsx

@@ -10,14 +10,13 @@ import AvailableChips from '../Resources/AvailableChips';
 import AllPlayers from '../Player/AllPlayers';
 import CardRow from '../Card/CardRow';
 import { validateChips } from '../Player/ActionMethods';
+import SelectionView from '../Resources/SelectionView';
 
 export default function Gameboard({ state, setState }: StateProps) {
     const [view, setView] = useState(<p>Loading...</p>);
 
     // callbacks for lifting state
     const liftSelection = useCallback((value: keyof ResourceCost) => {
-        console.log(value)
-
         if (!state.actions.getChips.active) return;
 
         setState((prev: AppState) => {
@@ -83,6 +82,7 @@ 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} />
+                    <SelectionView state={state} setState={setState} />
                     <AvailableChips state={state} setState={setState} liftSelection={liftSelection} />
                     {/* @ts-ignore */}
                     <AllPlayers state={state} setState={setState} setActionState={setActionState} />

src/components/Player/ActionMethods.ts

@@ -1,5 +1,6 @@
 import { AppState, PlayerData, ResourceCost, setStateType } from "../../util/types";
 import { turnOrderUtil } from "../../util/TurnOrderUtil";
+import { initialActions } from "../../util/stateSetters";
 
 export const _getChips = (resource: string | Array<keyof ResourceCost>, dynamic: PlayerData | undefined, setState: setStateType) => {
     if (!dynamic || !dynamic?.turnActive) return;
@@ -27,7 +28,7 @@ export const validateChips = (state: AppState): boolean => {
 
     const selection = state.actions.getChips.selection;
     
-    if (selection.length < 2 || selection.length > 3) return false;
+    if (selection.length === 0 || selection.length > 3) return false;
     const unique = new Set(selection);
 
     if (selection.length === 3 && selection.length > unique.size) return false;
@@ -43,8 +44,28 @@ export const getChips = (state: AppState, setState: setStateType): boolean => {
      * change turn order
     */
 
-    setState((prev: AppState) => {
-        return prev;
+    let targetPlayer: PlayerData;
+
+    for (let each in state.players) {
+        if (state.players[each].turnActive) {
+            targetPlayer = state.players[each];
+        }
+    }
+
+    setState((prev) => {
+        const { newPlayers, roundIncrement } = turnOrderUtil(state, targetPlayer);
+
+        console.log(newPlayers[newPlayers.indexOf(targetPlayer)]);
+
+        return {
+            ...prev,
+            round: (roundIncrement ? prev.round + 1 : prev.round),
+            gameboard: {
+                ...prev.gameboard
+            },
+            players: newPlayers,
+            actions: initialActions
+        }
     })
 
     return true;

src/components/Resources/AvailableChips.tsx

@@ -15,11 +15,6 @@ export default function AvailableChips({ state, setState, liftSelection }: Resou
 
     return (
         <div className="available-chips">
-            {state.actions.getChips.active && <p>Your selection is {state.actions.getChips.valid || "not"} valid</p>}
-            {
-                state.actions.getChips.active &&
-                state.actions.getChips.selection?.map((each) => <p key={v4()}>{each}</p>)
-            }
             {
                 Object.keys(state.gameboard.tradingResources).map((key: string | keyof ResourceCost) => {
                     return (
@@ -31,7 +26,6 @@ export default function AvailableChips({ state, setState, liftSelection }: Resou
                     )
                 })
             }
-            <button key={v4()} onClick={() => setState((prev) => setStateGetChips(prev))}>Reset Selection</button>
         </div>
     )
 }

src/components/Resources/SelectionView.tsx

@@ -0,0 +1,38 @@
+import { v4 } from "uuid";
+import { useEffect, useState } from "react";
+import { ResourceCost, StateProps } from "../../util/types";
+import { setStateGetChips } from "../../util/stateSetters";
+import { GetChipsHTML } from "./ViewHTML";
+
+export default function SelectionView({ state, setState }: StateProps) {
+    const actionTypes = [
+        state.actions.getChips,
+        state.actions.buyCard,
+        state.actions.reserveCard
+    ]
+    const [view, setView] = useState(<></>);
+
+    useEffect(() => {
+        setView(() => {
+            switch (true) {
+                case (actionTypes[0].active):
+                    return <GetChipsHTML state={state} setState={setState} />
+                case (actionTypes[1].active):
+                    return (
+                        <>
+                        {actionTypes[1].active && <strong>Your selection is {actionTypes[1].valid || "not"} valid</strong>}
+                        <p>Card will display here</p>
+                        </>
+                    )
+                default:
+                    return <></>;
+            }
+        })
+    }, [state])
+
+    return (
+        <div className="selection-view">
+            { view }
+        </div>
+    )
+}

src/components/Resources/ViewHTML.tsx

@@ -0,0 +1,36 @@
+import { v4 } from "uuid";
+import { useEffect, useState } from "react";
+import { setStateGetChips } from "../../util/stateSetters";
+import { ResourceCost, StateProps } from "../../util/types";
+import { getChips } from "../Player/ActionMethods";
+
+export const GetChipsHTML = ({ state, setState }: StateProps) => {
+    const [prompt, setPrompt] = useState("");
+
+    useEffect(() => {
+        if (!state.actions.getChips.active) setPrompt("");
+        if (state.actions.getChips.selection?.length === 0) {
+            setPrompt("Please make a selection.");
+        } else {
+            setPrompt(`Your selection is ${state.actions.getChips.valid ? '' : "not"} valid`);
+        }
+    }, [state])
+
+    return (
+        <div className="selection-view">
+            <strong>{prompt}</strong>
+            <div className="current-selections">
+                {
+                    state.actions.getChips.active &&
+                    state.actions.getChips.selection?.map((each: keyof ResourceCost) => <p key={v4()}>{each}</p>)
+                }
+            </div>
+            {
+                state.actions.getChips.valid ?
+                <button onClick={() => getChips(state, setState)}>Confirm Selection</button>
+                    :
+                <button key={v4()} onClick={() => setState((prev) => setStateGetChips(prev))}>Reset Selection</button>
+            }
+        </div>
+    )
+}

src/util/TurnOrderUtil.ts

@@ -5,6 +5,7 @@ export const turnOrderUtil = (prev: AppState, dynamic: PlayerData) => {
     const newPlayers = prev.players;
 
     for (let each of newPlayers) {
+        console.log(each);
         if (each.id === dynamic.id) {
             each.turnActive = false;
         } else if (each.id === dynamic.id + 1) {

src/util/stateSetters.ts

@@ -1,6 +1,12 @@
 import { AppState, CardData, NobleData, PlayerData, ResourceCost } from "./types";
 import CardDeck from '../data/cards.json';
 
+export const initialActions = {
+    buyCard: { active: false },
+    getChips: { active: false },
+    reserveCard: { active: false }
+}
+
 export const initialState = {
     gameboard: {
         nobles: new Array<NobleData>,
@@ -21,10 +27,13 @@ export const initialState = {
     },
     round: 1,
     players: new Array<PlayerData>,
-    actions: {
-        buyCard: { active: false },
-        getChips: { active: false },
-        reserveCard: { active: false }
+    actions: initialActions
+}
+
+export const setStateAwaitAction = (prev: AppState) => {
+    return {
+        ...prev,
+        actions: initialActions
     }
 }