From 00b2442598baa8d1722daf0384b5de90df674d83 Mon Sep 17 00:00:00 2001 From: Mikayla Dobson <93477693+innocuous-symmetry@users.noreply.github.com> Date: Sun, 24 Jul 2022 11:09:31 -0500 Subject: [PATCH] action types being passed between components --- src/App.tsx | 34 ++------------ src/components/Gameboard/Gameboard.tsx | 13 ++++-- src/components/Player/ActionMethods.ts | 31 +++++++++++++ src/components/Player/AllPlayers.tsx | 10 ++-- src/components/Player/Player.tsx | 51 ++++++++++----------- src/components/Resources/AvailableChips.tsx | 4 +- src/util/initialState.ts | 29 ++++++++++++ src/util/initializeBoard.ts | 9 ++-- src/util/{types.d.ts => types.ts} | 21 ++++++--- 9 files changed, 125 insertions(+), 77 deletions(-) create mode 100644 src/components/Player/ActionMethods.ts create mode 100644 src/util/initialState.ts rename src/util/{types.d.ts => types.ts} (85%) diff --git a/src/App.tsx b/src/App.tsx index f5af205..9784a1e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,45 +1,21 @@ -import { BrowserRouter, Routes, Route } from 'react-router-dom' import { useState } from 'react' +import { BrowserRouter, Routes, Route } from 'react-router-dom' import Gameboard from './components/Gameboard/Gameboard' import GameConstructor from './util/GameConstructor'; -import { PlayerData, NobleData, CardData } from './util/types'; -import CardDeck from './data/cards.json'; +import { initialState } from './util/initialState'; import './App.css' function App() { - const [state, setState] = useState({ - gameboard: { - nobles: new Array, - cardRows: { - tierOne: new Array, - tierTwo: new Array, - tierThree: new Array, - }, - tradingResources: { - ruby: 7, - sapphire: 7, - emerald: 7, - diamond: 7, - onyx: 7, - gold: 5 - }, - deck: CardDeck, - }, - round: 1, - players: new Array, - actions: { - buyCard: { active: false }, - getChips: { active: false }, - reserveCard: { active: false } - } - }) + const [state, setState] = useState(initialState); return (

SPLENDOR

+ {/* @ts-ignore */} } /> + {/* @ts-ignore */} } /> diff --git a/src/components/Gameboard/Gameboard.tsx b/src/components/Gameboard/Gameboard.tsx index 44eca43..0450325 100644 --- a/src/components/Gameboard/Gameboard.tsx +++ b/src/components/Gameboard/Gameboard.tsx @@ -1,5 +1,5 @@ import { useCallback, useEffect, useState } from 'react'; -import { AppState, ResourceCost, StateProps } from '../../util/types'; +import { AppState, PlayerData, ResourceCost, SetActionType, StateProps } from '../../util/types'; import initializeBoard from '../../util/initializeBoard'; import AvailableChips from '../Resources/AvailableChips'; import AllPlayers from '../Player/AllPlayers'; @@ -8,9 +8,8 @@ import Nobles from './Nobles'; export default function Gameboard({ state, setState }: StateProps) { const [view, setView] = useState(

Loading...

); - const [selection, setSelection] = useState(); - // callback for lifting state + // callbacks for lifting state const liftSelection = useCallback((value: keyof ResourceCost) => { console.log(value) @@ -35,6 +34,11 @@ export default function Gameboard({ state, setState }: StateProps) { console.log(state); }, []); + const setActionState = useCallback((value: SetActionType, player: PlayerData) => { + if (!player?.turnActive) return; + console.log(player.name + SetActionType[value]); + }, []); + // util functions to set up initial board useEffect(() => { initializeBoard(state, setState); @@ -58,7 +62,8 @@ export default function Gameboard({ state, setState }: StateProps) { - + {/* @ts-ignore */} +
) } diff --git a/src/components/Player/ActionMethods.ts b/src/components/Player/ActionMethods.ts new file mode 100644 index 0000000..97268a0 --- /dev/null +++ b/src/components/Player/ActionMethods.ts @@ -0,0 +1,31 @@ +import { AppState, PlayerData, ResourceCost, setStateType } from "../../util/types"; +import { TurnOrderUtil } from "../../util/TurnOrderUtil"; + +export const getChips = (resource: string, dynamic: PlayerData | undefined, setState: setStateType) => { + if (!dynamic || !dynamic?.turnActive) return; + + setState((prev: AppState) => { + const { newPlayers, roundIncrement } = TurnOrderUtil(prev, dynamic); + + return { + ...prev, + round: (roundIncrement ? prev.round + 1 : prev.round), + gameboard: { + ...prev.gameboard, + tradingResources: { + ...prev.gameboard.tradingResources, + [resource as keyof ResourceCost]: prev.gameboard.tradingResources[resource as keyof ResourceCost] -= 1 + } + }, + players: newPlayers + } + }) +} + +export const buyCard = () => { + return; +} + +export const reserveCard = () => { + return; +} \ No newline at end of file diff --git a/src/components/Player/AllPlayers.tsx b/src/components/Player/AllPlayers.tsx index 1378695..4e90b62 100644 --- a/src/components/Player/AllPlayers.tsx +++ b/src/components/Player/AllPlayers.tsx @@ -1,13 +1,17 @@ import Player from "./Player"; import { v4 } from "uuid"; import "./AllPlayers.css" -import { PlayerData, StateProps } from "../../util/types"; +import { PlayerData, SetActionType, StateProps } from "../../util/types"; -export default function AllPlayers({ state, setState }: StateProps) { +interface AllPlayersProps extends StateProps { + setActionState: (value: SetActionType, player?: PlayerData) => void +} + +export default function AllPlayers({ state, setState, setActionState }: AllPlayersProps) { 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..6dab0c0 100644 --- a/src/components/Player/Player.tsx +++ b/src/components/Player/Player.tsx @@ -1,38 +1,31 @@ -import { AppState, PlayerData, ResourceCost, StateProps } from "../../util/types" -import { v4 } from "uuid"; +import { PlayerData, SetActionType, StateProps } from "../../util/types" import { useEffect, useState } from "react"; -import { TurnOrderUtil } from "../../util/TurnOrderUtil"; +import { getChips } from "./ActionMethods"; +import { v4 } from "uuid"; interface PlayerProps extends StateProps { - player: PlayerData + player: PlayerData, + setActionState: (value: SetActionType, player?: PlayerData) => void } -export default function Player({ player, state, setState }: PlayerProps) { +export default function Player({ player, state, setState, setActionState }: PlayerProps) { const [dynamic, setDynamic] = useState(); - useEffect(() => { - setDynamic(state.players.find((element: PlayerData) => element.id === player.id)); - }, [state]); + useEffect(() => setDynamic(state.players.find((element: PlayerData) => element.id === player.id)), [state]); - const getChips = (resource: string) => { - if (!dynamic?.turnActive) return; - - setState((prev: AppState) => { - const { newPlayers, roundIncrement } = TurnOrderUtil(prev, dynamic); - - return { - ...prev, - round: (roundIncrement ? prev.round + 1 : prev.round), - gameboard: { - ...prev.gameboard, - tradingResources: { - ...prev.gameboard.tradingResources, - [resource as keyof ResourceCost]: prev.gameboard.tradingResources[resource as keyof ResourceCost] -= 1 - } - }, - players: newPlayers - } - }) + const handleSelection = (input: number) => { + switch (input) { + case 0: + setActionState(SetActionType.GETCHIPS, player); + getChips('ruby', dynamic, setState); + break; + case 1: + setActionState(SetActionType.BUYCARD, player); + break; + default: + setActionState(SetActionType.AWAIT, player); + break; + } } return ( @@ -44,7 +37,9 @@ export default function Player({ player, state, setState }: PlayerProps) { {/* Dynamic data from state */}

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

- + + +
diff --git a/src/components/Resources/AvailableChips.tsx b/src/components/Resources/AvailableChips.tsx index 394c915..32c0a79 100644 --- a/src/components/Resources/AvailableChips.tsx +++ b/src/components/Resources/AvailableChips.tsx @@ -1,7 +1,7 @@ import { ResourceCost, StateProps } from "../../util/types"; +import { useEffect } from "react"; import { v4 } from "uuid"; import "./AvailableChips.css" -import { useEffect } from "react"; interface ResourceProps extends StateProps { liftSelection: (value: keyof ResourceCost) => void @@ -19,7 +19,7 @@ export default function AvailableChips({ state, setState, liftSelection }: Resou return (
) diff --git a/src/util/initialState.ts b/src/util/initialState.ts new file mode 100644 index 0000000..d718873 --- /dev/null +++ b/src/util/initialState.ts @@ -0,0 +1,29 @@ +import { CardData, NobleData, PlayerData } from "./types"; +import CardDeck from '../data/cards.json'; + +export const initialState = { + gameboard: { + nobles: new Array, + cardRows: { + tierOne: new Array, + tierTwo: new Array, + tierThree: new Array, + }, + tradingResources: { + ruby: 7, + sapphire: 7, + emerald: 7, + diamond: 7, + onyx: 7, + gold: 5 + }, + deck: CardDeck, + }, + round: 1, + players: new Array, + actions: { + buyCard: { active: false }, + getChips: { active: false }, + reserveCard: { active: false } + } +} \ No newline at end of file diff --git a/src/util/initializeBoard.ts b/src/util/initializeBoard.ts index 718e8f4..21699c9 100644 --- a/src/util/initializeBoard.ts +++ b/src/util/initializeBoard.ts @@ -1,8 +1,7 @@ -import { Dispatch, SetStateAction } from "react"; -import { AppState, FullDeck, NobleData } from "./types"; +import { AppState, FullDeck, NobleData, setStateType } from "./types"; import NobleStore from '../data/nobles.json'; -const shuffleDeck = (state: AppState, setState: Dispatch>) => { +const shuffleDeck = (state: AppState, setState: setStateType) => { if (!state.gameboard.deck) return; let newDeck: FullDeck = state.gameboard.deck; @@ -18,7 +17,7 @@ const shuffleDeck = (state: AppState, setState: Dispatch>) => { +const setNobles = (state: AppState, setState: setStateType) => { let newNobles = NobleStore.nobles; let shuffledNobles = new Array; @@ -31,7 +30,7 @@ const setNobles = (state: AppState, setState: Dispatch> setState({ ...state, gameboard: { ...state.gameboard, nobles: shuffledNobles }}) } -export default function initializeBoard(state: AppState, setState: Dispatch>) { +export default function initializeBoard(state: AppState, setState: setStateType) { shuffleDeck(state, setState); let newDeck = state.gameboard.cardRows; diff --git a/src/util/types.d.ts b/src/util/types.ts similarity index 85% rename from src/util/types.d.ts rename to src/util/types.ts index 1df47f8..d2dbd71 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: { @@ -18,29 +17,39 @@ export interface AppState { } interface StateActions { + setAction?: (arg: SetActionType) => void getChips: { active: boolean selection?: Array valid?: boolean - confirm: () => void + confirm?: () => void } buyCard: { active: boolean selection?: CardData valid?: boolean - confirm: () => void + confirm?: () => void } reserveCard: { active: boolean selection?: CardData includeGold?: boolean - confirm: () => void + confirm?: () => void } } +export enum SetActionType { + GETCHIPS, + BUYCARD, + RESERVECARD, + AWAIT +} + +export type setStateType = Dispatch> + export interface StateProps { state: AppState, - setState: Dispatch> + setState: setStateType } export interface GameInformation { @@ -98,4 +107,4 @@ export enum GemValue { diamond, onyx, gold, -} +} \ No newline at end of file