diff --git a/src/components/Gameboard/Gameboard.tsx b/src/components/Gameboard/Gameboard.tsx index 3cefb8e..c942fe8 100644 --- a/src/components/Gameboard/Gameboard.tsx +++ b/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(

Loading...

); // 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) { + {/* @ts-ignore */} diff --git a/src/components/Player/ActionMethods.ts b/src/components/Player/ActionMethods.ts index ebe1b8d..65d6477 100644 --- a/src/components/Player/ActionMethods.ts +++ b/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, 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; diff --git a/src/components/Resources/AvailableChips.tsx b/src/components/Resources/AvailableChips.tsx index fd8c441..98639c9 100644 --- a/src/components/Resources/AvailableChips.tsx +++ b/src/components/Resources/AvailableChips.tsx @@ -15,11 +15,6 @@ 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 ( @@ -31,7 +26,6 @@ export default function AvailableChips({ state, setState, liftSelection }: Resou ) }) } -
) } \ No newline at end of file diff --git a/src/components/Resources/SelectionView.tsx b/src/components/Resources/SelectionView.tsx new file mode 100644 index 0000000..c359a35 --- /dev/null +++ b/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 + case (actionTypes[1].active): + return ( + <> + {actionTypes[1].active && Your selection is {actionTypes[1].valid || "not"} valid} +

Card will display here

+ + ) + default: + return <>; + } + }) + }, [state]) + + return ( +
+ { view } +
+ ) +} \ No newline at end of file diff --git a/src/components/Resources/ViewHTML.tsx b/src/components/Resources/ViewHTML.tsx new file mode 100644 index 0000000..d42a3f4 --- /dev/null +++ b/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 ( +
+ {prompt} +
+ { + state.actions.getChips.active && + state.actions.getChips.selection?.map((each: keyof ResourceCost) =>

{each}

) + } +
+ { + state.actions.getChips.valid ? + + : + + } +
+ ) +} \ No newline at end of file diff --git a/src/util/TurnOrderUtil.ts b/src/util/TurnOrderUtil.ts index f895ec8..64af43f 100644 --- a/src/util/TurnOrderUtil.ts +++ b/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) { diff --git a/src/util/stateSetters.ts b/src/util/stateSetters.ts index 6fe152f..c3f8852 100644 --- a/src/util/stateSetters.ts +++ b/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, @@ -21,10 +27,13 @@ export const initialState = { }, round: 1, players: new Array, - actions: { - buyCard: { active: false }, - getChips: { active: false }, - reserveCard: { active: false } + actions: initialActions +} + +export const setStateAwaitAction = (prev: AppState) => { + return { + ...prev, + actions: initialActions } }