From 3cfad260bf3ee934e31d62314780b2354c203147 Mon Sep 17 00:00:00 2001 From: Mikayla Dobson <93477693+innocuous-symmetry@users.noreply.github.com> Date: Sat, 23 Jul 2022 12:41:18 -0500 Subject: [PATCH] incorporating action types into app state --- src/App.tsx | 21 ++++++++--- src/components/Gameboard/Gameboard.tsx | 4 +- src/components/Player/Player.tsx | 42 +++++++++++---------- src/components/Resources/AvailableChips.tsx | 19 +++++++--- src/util/{types.d.ts => types.ts} | 35 ++++++++++++++++- 5 files changed, 87 insertions(+), 34 deletions(-) rename src/util/{types.d.ts => types.ts} (61%) diff --git a/src/App.tsx b/src/App.tsx index f586ed3..9cac747 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,12 +2,12 @@ import { BrowserRouter, Routes, Route } from 'react-router-dom' import { useState } from 'react' import Gameboard from './components/Gameboard/Gameboard' import GameConstructor from './util/GameConstructor'; -import { PlayerData, NobleData, CardData } from './util/types'; +import { PlayerData, NobleData, CardData, AppState } from './util/types'; import CardDeck from './data/cards.json'; import './App.css' function App() { - const [state, setState] = useState({ + const [state, setState] = useState({ gameboard: { nobles: new Array, cardRows: { @@ -24,9 +24,20 @@ function App() { gold: 5 }, deck: CardDeck, - }, - round: 1, - players: new Array, + }, + round: 1, + players: new Array, + actions: { + getChips: { + active: false + }, + buyCard: { + active: false + }, + reserveCard: { + active: false + } + } }) return ( diff --git a/src/components/Gameboard/Gameboard.tsx b/src/components/Gameboard/Gameboard.tsx index a61e40d..d687614 100644 --- a/src/components/Gameboard/Gameboard.tsx +++ b/src/components/Gameboard/Gameboard.tsx @@ -1,5 +1,5 @@ -import { Dispatch, SetStateAction, useEffect, useState } from 'react'; -import { CardData, FullDeck, NobleData, StateProps } from '../../util/types'; +import { useEffect, useState } from 'react'; +import { FullDeck, NobleData, StateProps } from '../../util/types'; import AllPlayers from '../Player/AllPlayers'; import AvailableChips from '../Resources/AvailableChips'; import CardRow from './CardRow'; diff --git a/src/components/Player/Player.tsx b/src/components/Player/Player.tsx index 63a1c07..a79b6cc 100644 --- a/src/components/Player/Player.tsx +++ b/src/components/Player/Player.tsx @@ -1,7 +1,7 @@ -import { AppState, PlayerData, ResourceCost, StateProps } from "../../util/types" -import { v4 } from "uuid"; -import React, { Dispatch, SetStateAction, useEffect, useState } from "react"; +import { AppState, ActionPrompts, GameActions, PlayerData, ResourceCost, StateProps } from "../../util/types"; +import { Dispatch, SetStateAction, useEffect, useState } from "react"; import { TurnOrderUtil } from "../../util/TurnOrderUtil"; +import { v4 } from "uuid"; interface PlayerProps extends StateProps { player: PlayerData @@ -11,17 +11,9 @@ interface PlayerProps extends StateProps { } } -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 [actionType, setActionType] = useState(); const [dynamic, setDynamic] = useState(); const { selection, setSelection } = chipSelection; @@ -30,18 +22,30 @@ export default function Player({ player, state, setState, chipSelection }: Playe }, [state]); useEffect(() => { - console.log(selection) + return; }, [selection, setSelection]) + useEffect(() => { + switch (actionType) { + case GameActions.GETCHIPS: + console.log('get chips'); + getChips(); + setSelection([]); + setActionType(GameActions.AWAIT); + break; + case GameActions.AWAIT: + console.log('waiting for next action'); + break; + default: + break; + } + }, [actionType]); + 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); @@ -66,8 +70,6 @@ export default function Player({ player, state, setState, chipSelection }: Playe }, } }) - - setSelection([]); } return ( @@ -80,7 +82,7 @@ export default function Player({ player, state, setState, chipSelection }: Playe {/* Dynamic data from state */}

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

- + diff --git a/src/components/Resources/AvailableChips.tsx b/src/components/Resources/AvailableChips.tsx index 40b38d0..ba5d4fb 100644 --- a/src/components/Resources/AvailableChips.tsx +++ b/src/components/Resources/AvailableChips.tsx @@ -1,7 +1,7 @@ -import { ResourceCost, StateProps } from "../../util/types"; +import { GameActions, ResourceCost, StateProps } from "../../util/types"; import { v4 } from "uuid"; import "./AvailableChips.css" -import { Dispatch, SetStateAction, useEffect } from "react"; +import { Dispatch, SetStateAction, useEffect, useState } from "react"; interface AvailableChipsProps extends StateProps { chipSelection: { @@ -20,7 +20,6 @@ export default function AvailableChips({ state, chipSelection }: AvailableChipsP newValue.push(key); setSelection(newValue); - console.log(selection); } useEffect(() => { @@ -28,11 +27,20 @@ export default function AvailableChips({ state, chipSelection }: AvailableChipsP }, [state]) useEffect(() => { - console.log(selection); - }, [selection, setSelection]) + switch (state.actions) { + case (GameActions.GETCHIPS): + console.log('get chips'); + } + }) return (
+ +
+ Selection: + { selection.map((each) =>

{each}

) } +
+ { Object.keys(state.gameboard.tradingResources).map((key: string) => { return ( @@ -46,6 +54,7 @@ export default function AvailableChips({ state, chipSelection }: AvailableChipsP ) }) } +
) } \ No newline at end of file diff --git a/src/util/types.d.ts b/src/util/types.ts similarity index 61% rename from src/util/types.d.ts rename to src/util/types.ts index bd11f8e..f374aae 100644 --- a/src/util/types.d.ts +++ b/src/util/types.ts @@ -1,5 +1,4 @@ import { Dispatch, SetStateAction } from "react" -import { AppState } from "../context/types" export interface AppState { gameboard: { @@ -13,7 +12,23 @@ export interface AppState { deck: FullDeck, }, round: number, - players: Array + players: Array, + actions?: { + getChips?: { + active: boolean + chips?: Array + valid?: boolean + } + buyCard?: { + active: boolean + card?: CardData | null + } + reserveCard?: { + active: boolean + card?: CardData | null + includeGold?: boolean + } + } } export interface StateProps { @@ -21,6 +36,22 @@ export interface StateProps { setState: Dispatch> } +export enum GameActions { + GETCHIPS, + BUYCARD, + RESERVECARD, + AWAIT +} + +export 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 interface GameInformation { players: PlayerData[], nobles: NobleData[],