From dc603c891a53851205bdc2a609bac499d28d8129 Mon Sep 17 00:00:00 2001 From: Mikayla Dobson <93477693+innocuous-symmetry@users.noreply.github.com> Date: Sun, 24 Jul 2022 10:10:40 -0500 Subject: [PATCH] incorporating actions and chip selection into state --- src/App.tsx | 5 ++ .../{Gameboard => Card}/CardRow.css | 0 .../{Gameboard => Card}/CardRow.tsx | 0 src/components/Gameboard/Gameboard.tsx | 86 ++++++++----------- src/components/Resources/AvailableChips.tsx | 10 ++- src/util/GameConstructor.tsx | 1 - src/util/initializeBoard.ts | 48 +++++++++++ src/util/types.d.ts | 24 +++++- 8 files changed, 117 insertions(+), 57 deletions(-) rename src/components/{Gameboard => Card}/CardRow.css (100%) rename src/components/{Gameboard => Card}/CardRow.tsx (100%) create mode 100644 src/util/initializeBoard.ts diff --git a/src/App.tsx b/src/App.tsx index f586ed3..f5af205 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -27,6 +27,11 @@ function App() { }, round: 1, players: new Array, + actions: { + buyCard: { active: false }, + getChips: { active: false }, + reserveCard: { active: false } + } }) return ( diff --git a/src/components/Gameboard/CardRow.css b/src/components/Card/CardRow.css similarity index 100% rename from src/components/Gameboard/CardRow.css rename to src/components/Card/CardRow.css diff --git a/src/components/Gameboard/CardRow.tsx b/src/components/Card/CardRow.tsx similarity index 100% rename from src/components/Gameboard/CardRow.tsx rename to src/components/Card/CardRow.tsx diff --git a/src/components/Gameboard/Gameboard.tsx b/src/components/Gameboard/Gameboard.tsx index 88078f2..e755057 100644 --- a/src/components/Gameboard/Gameboard.tsx +++ b/src/components/Gameboard/Gameboard.tsx @@ -1,18 +1,44 @@ -import { Dispatch, SetStateAction, useEffect, useState } from 'react'; -import { CardData, FullDeck, NobleData, StateProps } from '../../util/types'; -import AllPlayers from '../Player/AllPlayers'; +import { useCallback, useEffect, useState } from 'react'; +import { AppState, ResourceCost, StateProps } from '../../util/types'; +import initializeBoard from '../../util/initializeBoard'; import AvailableChips from '../Resources/AvailableChips'; -import CardRow from './CardRow'; +import AllPlayers from '../Player/AllPlayers'; +import CardRow from '../Card/CardRow'; import Nobles from './Nobles'; -import NobleStore from '../../data/nobles.json'; export default function Gameboard({ state, setState }: StateProps) { - const [view, setView] = useState(

Loading...

) + const [view, setView] = useState(

Loading...

); + const [selection, setSelection] = useState(); + // callback for lifting state + const liftSelection = useCallback((value: keyof ResourceCost) => { + if (!state.actions.getChips.active) return; + + setState((prev: AppState) => { + let newSelection = prev.actions.getChips.selection; + newSelection?.push(value); + + return { + ...prev, + actions: { + ...state.actions, + getChips: { + active: true, + selection: newSelection + } + } + } + }) + + console.log(state); + }, []); + + // util functions to set up initial board useEffect(() => { - initializeBoard(); + initializeBoard(state, setState); }, []) + // displays state of board if data is populated useEffect(() => { if (!state.players.length) { setView( @@ -36,50 +62,6 @@ export default function Gameboard({ state, setState }: StateProps) { } }, [state]); - const shuffleDeck = () => { - if (!state.gameboard.deck) return; - let newDeck: FullDeck = state.gameboard.deck; - - for (const [key, value] of Object.entries(newDeck)) { - for (let i = value.length - 1; i > 0; i--) { - const j = Math.floor(Math.random() * (i + 1)) - const temp = value[i]; - value[i] = value[j]; - value[j] = temp; - } - } - - setState({ ...state, gameboard: { ...state.gameboard, deck: newDeck }}) - } - - const setNobles = () => { - let newNobles = NobleStore.nobles; - let shuffledNobles = new Array; - - while (shuffledNobles.length < 4) { - const rand = Math.floor(Math.random() * newNobles.length); - const randNoble = newNobles.splice(rand,1)[0]; - shuffledNobles.push(randNoble); - } - - setState({ ...state, gameboard: { ...state.gameboard, nobles: shuffledNobles }}) - } - - const initializeBoard = () => { - shuffleDeck(); - - let newDeck = state.gameboard.cardRows; - for (const [key, value] of Object.entries(state.gameboard.deck)) { - while (newDeck[key as keyof FullDeck].length < 4) { - // @ts-ignore - const nextCard = value.shift(); - newDeck[key as keyof FullDeck].push(nextCard); - } - } - - setState({ ...state, gameboard: { ...state.gameboard, cardRows: newDeck } }) - setNobles(); - } - + // render return view } \ No newline at end of file diff --git a/src/components/Resources/AvailableChips.tsx b/src/components/Resources/AvailableChips.tsx index baaad0a..2bb97de 100644 --- a/src/components/Resources/AvailableChips.tsx +++ b/src/components/Resources/AvailableChips.tsx @@ -1,9 +1,11 @@ import { ResourceCost, StateProps } from "../../util/types"; import { v4 } from "uuid"; import "./AvailableChips.css" -import { useEffect } from "react"; +import { useEffect, useState } from "react"; + +export default function AvailableChips({ state, setState }: StateProps) { + const [selection, setSelection] = useState([]); -export default function AvailableChips({ state }: StateProps) { useEffect(() => { return; }, [state]) @@ -14,7 +16,9 @@ export default function AvailableChips({ state }: StateProps) { Object.keys(state.gameboard.tradingResources).map((key: string) => { return (
-

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

+
) }) diff --git a/src/util/GameConstructor.tsx b/src/util/GameConstructor.tsx index 2946eb3..d110c7b 100644 --- a/src/util/GameConstructor.tsx +++ b/src/util/GameConstructor.tsx @@ -1,6 +1,5 @@ import { useEffect, useState } from "react" import { useNavigate } from "react-router-dom" -import { v4 } from "uuid"; import { CardData, NobleData, PlayerData, StateProps } from "./types"; interface InputState { diff --git a/src/util/initializeBoard.ts b/src/util/initializeBoard.ts new file mode 100644 index 0000000..718e8f4 --- /dev/null +++ b/src/util/initializeBoard.ts @@ -0,0 +1,48 @@ +import { Dispatch, SetStateAction } from "react"; +import { AppState, FullDeck, NobleData } from "./types"; +import NobleStore from '../data/nobles.json'; + +const shuffleDeck = (state: AppState, setState: Dispatch>) => { + if (!state.gameboard.deck) return; + let newDeck: FullDeck = state.gameboard.deck; + + for (const [key, value] of Object.entries(newDeck)) { + for (let i = value.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)) + const temp = value[i]; + value[i] = value[j]; + value[j] = temp; + } + } + + setState({ ...state, gameboard: { ...state.gameboard, deck: newDeck }}) +} + +const setNobles = (state: AppState, setState: Dispatch>) => { + let newNobles = NobleStore.nobles; + let shuffledNobles = new Array; + + while (shuffledNobles.length < 4) { + const rand = Math.floor(Math.random() * newNobles.length); + const randNoble = newNobles.splice(rand,1)[0]; + shuffledNobles.push(randNoble); + } + + setState({ ...state, gameboard: { ...state.gameboard, nobles: shuffledNobles }}) +} + +export default function initializeBoard(state: AppState, setState: Dispatch>) { + shuffleDeck(state, setState); + + let newDeck = state.gameboard.cardRows; + for (const [key, value] of Object.entries(state.gameboard.deck)) { + while (newDeck[key as keyof FullDeck].length < 4) { + // @ts-ignore + const nextCard = value.shift(); + newDeck[key as keyof FullDeck].push(nextCard); + } + } + + setState({ ...state, gameboard: { ...state.gameboard, cardRows: newDeck } }) + setNobles(state, setState); +} \ No newline at end of file diff --git a/src/util/types.d.ts b/src/util/types.d.ts index bd11f8e..1df47f8 100644 --- a/src/util/types.d.ts +++ b/src/util/types.d.ts @@ -13,7 +13,29 @@ export interface AppState { deck: FullDeck, }, round: number, - players: Array + players: Array, + actions: StateActions +} + +interface StateActions { + getChips: { + active: boolean + selection?: Array + valid?: boolean + confirm: () => void + } + buyCard: { + active: boolean + selection?: CardData + valid?: boolean + confirm: () => void + } + reserveCard: { + active: boolean + selection?: CardData + includeGold?: boolean + confirm: () => void + } } export interface StateProps {