diff --git a/src/App.tsx b/src/App.tsx index b8a5d75..6534161 100644 --- a/src/App.tsx +++ b/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' diff --git a/src/util/GameConstructor.tsx b/src/components/GameConstructor.tsx similarity index 98% rename from src/util/GameConstructor.tsx rename to src/components/GameConstructor.tsx index d110c7b..1b4a3eb 100644 --- a/src/util/GameConstructor.tsx +++ b/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 diff --git a/src/components/Gameboard/Gameboard.tsx b/src/components/Gameboard/Gameboard.tsx index 16a338a..3cefb8e 100644 --- a/src/components/Gameboard/Gameboard.tsx +++ b/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(

Loading...

); @@ -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 } \ No newline at end of file diff --git a/src/components/Player/ActionMethods.ts b/src/components/Player/ActionMethods.ts index 31c03df..ebe1b8d 100644 --- a/src/components/Player/ActionMethods.ts +++ b/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, dynamic: PlayerData | undefined, setState: setStateType) => { +export const _getChips = (resource: string | Array, 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, 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; } diff --git a/src/components/Player/Player.tsx b/src/components/Player/Player.tsx index 34af27d..56f2aad 100644 --- a/src/components/Player/Player.tsx +++ b/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(); - 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 (
@@ -41,7 +36,7 @@ export default function Player({ player, state, setState, setActionState }: Play

Is {player.starter || "not"} round starter

{/* Dynamic data from state */} - {dynamic?.turnActive ?

{prompt}

:

...

} +

{dynamic?.turnActive ? prompt : '...'}

diff --git a/src/components/Resources/AvailableChips.tsx b/src/components/Resources/AvailableChips.tsx index 32c0a79..fd8c441 100644 --- a/src/components/Resources/AvailableChips.tsx +++ b/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 (
+ {state.actions.getChips.active &&

Your selection is {state.actions.getChips.valid || "not"} valid

} + { + state.actions.getChips.active && + state.actions.getChips.selection?.map((each) =>

{each}

) + } { Object.keys(state.gameboard.tradingResources).map((key: string | keyof ResourceCost) => { return ( @@ -25,6 +31,7 @@ export default function AvailableChips({ state, setState, liftSelection }: Resou ) }) } +
) } \ No newline at end of file diff --git a/src/util/TurnOrderUtil.ts b/src/util/TurnOrderUtil.ts index d28439f..f895ec8 100644 --- a/src/util/TurnOrderUtil.ts +++ b/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;