src/App.tsx

@@ -1,7 +1,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 GameConstructor from './components/GameConstructor';
 import { initialState } from './util/stateSetters';
 import './App.css'
 

src/components/GameConstructor.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react"
 import { useNavigate } from "react-router-dom"
-import { CardData, NobleData, PlayerData, StateProps } from "./types";
+import { CardData, NobleData, PlayerData, StateProps } from "../util/types";
 
 interface InputState {
     playerOne: PlayerInput

src/components/Gameboard/Gameboard.tsx

@@ -9,6 +9,7 @@ import initializeBoard from '../../util/initializeBoard';
 import AvailableChips from '../Resources/AvailableChips';
 import AllPlayers from '../Player/AllPlayers';
 import CardRow from '../Card/CardRow';
+import { validateChips } from '../Player/ActionMethods';
 
 export default function Gameboard({ state, setState }: StateProps) {
     const [view, setView] = useState(<p>Loading...</p>);
@@ -23,18 +24,24 @@ export default function Gameboard({ state, setState }: StateProps) {
             let newSelection = prev.actions.getChips.selection;
             newSelection?.push(value);
 
-            return {
+            let newState = {
                 ...prev,
                 actions: {
                     ...state.actions,
                     getChips: {
                         active: true,
-                        selection: newSelection
+                        selection: newSelection,
+                        valid: false
                     }
                 }
             }
+
+            const result = validateChips(newState);
+            newState.actions.getChips.valid = result;
+
+            return newState;
         })
-    }, []);
+    }, [state]);
 
     const setActionState = useCallback((value: SetActionType, player: PlayerData) => {
         if (!player?.turnActive) return;
@@ -84,11 +91,6 @@ export default function Gameboard({ state, setState }: StateProps) {
         }
     }, [state]);
 
-    // DEBUG
-    useEffect(() => {
-        console.log(state);
-    }, [state])
-
     // render
     return view
 }

src/components/Player/ActionMethods.ts

@@ -1,11 +1,11 @@
 import { AppState, PlayerData, ResourceCost, setStateType } from "../../util/types";
-import { TurnOrderUtil } from "../../util/TurnOrderUtil";
+import { turnOrderUtil } from "../../util/TurnOrderUtil";
 
-export const getChips = (resource: string | Array<keyof ResourceCost>, 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) => {
-        const { newPlayers, roundIncrement } = TurnOrderUtil(prev, dynamic);
+        const { newPlayers, roundIncrement } = turnOrderUtil(prev, dynamic);
 
         return {
             ...prev,
@@ -22,6 +22,34 @@ export const getChips = (resource: string | Array<keyof ResourceCost>, dynamic:
     })
 }
 
+export const validateChips = (state: AppState): boolean => {
+    if (!state.actions.getChips.active || !state.actions.getChips.selection) return false;
+
+    const selection = state.actions.getChips.selection;
+    
+    if (selection.length < 2 || selection.length > 3) return false;
+    const unique = new Set(selection);
+
+    if (selection.length === 3 && selection.length > unique.size) return false;
+    return true;
+}
+
+export const getChips = (state: AppState, setState: setStateType): boolean => {
+    /**
+     * features:
+     * identify player to receive currently selected chips
+     * update their inventory state
+     * update the total available resources
+     * change turn order
+    */
+
+    setState((prev: AppState) => {
+        return prev;
+    })
+
+    return true;
+}
+
 export const buyCard = () => {
     return;
 }

src/components/Player/Player.tsx

@@ -9,29 +9,24 @@ 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 [prompt, setPrompt] = useState("Your turn! Select an action type below.");
     const [actionSelection, setActionSelection] = useState(-1);
 
     useEffect(() => setDynamic(state.players.find((element: PlayerData) => element.id === player.id)), [state]);
 
     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])
+
+        if (state.actions.getChips.active) {
+            setPrompt('Make your selection of up to three chips.');
+        } else if (state.actions.buyCard.active) {
+            setPrompt('Choose a card above to purchase.');
+        } else if (state.actions.reserveCard.active) {
+            setPrompt('Choose a card above to reserve.');
+        } else {
+            setPrompt("Your turn! Select an action type below.");
+        }
+    }, [actionSelection])
 
     return (
         <div className="player-ui" key={v4()}>
@@ -41,7 +36,7 @@ export default function Player({ player, state, setState, setActionState }: Play
             <p>Is {player.starter || "not"} round starter</p>
 
             {/* Dynamic data from state */}
-            {dynamic?.turnActive ? <p>{prompt}</p> : <p>...</p>}
+            <p>{dynamic?.turnActive ? prompt : '...'}</p>
             <button onClick={() => setActionSelection(0)}>Get Chips</button>
             <button onClick={() => setActionSelection(1)}>Buy Card</button>
             <button onClick={() => setActionSelection(2)}>Reserve Card</button>

src/components/Resources/AvailableChips.tsx

@@ -2,6 +2,7 @@ import { ResourceCost, StateProps } from "../../util/types";
 import { useEffect } from "react";
 import { v4 } from "uuid";
 import "./AvailableChips.css"
+import { setStateGetChips } from "../../util/stateSetters";
 
 interface ResourceProps extends StateProps {
     liftSelection: (value: keyof ResourceCost) => void
@@ -14,6 +15,11 @@ 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 (
@@ -25,6 +31,7 @@ export default function AvailableChips({ state, setState, liftSelection }: Resou
                     )
                 })
             }
+            <button key={v4()} onClick={() => setState((prev) => setStateGetChips(prev))}>Reset Selection</button>
         </div>
     )
 }

src/util/TurnOrderUtil.ts

@@ -1,6 +1,6 @@
 import { AppState, PlayerData } from "./types";
 
-export const TurnOrderUtil = (prev: AppState, dynamic: PlayerData) => {
+export const turnOrderUtil = (prev: AppState, dynamic: PlayerData) => {
     let roundIncrement = false;
     const newPlayers = prev.players;