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(

Loading...

) + const [selection, setSelection] = useState>([]); + const chipSelection = { selection, setSelection }; useEffect(() => { initializeBoard(); @@ -29,8 +31,8 @@ export default function Gameboard({ state, setState }: StateProps) { - - + + ) } 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>> + } +} + +export default function AllPlayers({ state, setState, chipSelection }: AllPlayersProps) { + const {selection, setSelection} = chipSelection; -export default function AllPlayers({ state, setState }: StateProps) { return (
{ - state.players?.map((player: PlayerData) => ) + state.players?.map((player: PlayerData) => ) }
) 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>> + } } -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(); + 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) {

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

{/* Dynamic data from state */} -

{dynamic?.turnActive ? "My turn!" : "..."}

- +

{dynamic?.turnActive ? actionPrompt : "..."}

+ + + + +
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>> + } +} + +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 (
{ Object.keys(state.gameboard.tradingResources).map((key: string) => { return (
-

{key}: {state.gameboard.tradingResources[key as keyof ResourceCost]}

+
) })