incorporating actions and chip selection into state

src/App.tsx

@@ -27,6 +27,11 @@ function App() {
   },
   round: 1,
   players: new Array<PlayerData>,
+  actions: {
+    buyCard: { active: false },
+    getChips: { active: false },
+    reserveCard: { active: false }
+  }
   })
 
   return (

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(<p>Loading...</p>)
+    const [view, setView] = useState(<p>Loading...</p>);
+    const [selection, setSelection] = useState<string>();
 
+    // 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<NobleData>;
-
-        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
 }

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 (
                         <div key={v4()} className={`chips-${key}`}>
-                            <p>{key}: {state.gameboard.tradingResources[key as keyof ResourceCost]}</p>
+                            <button key={v4()} value={key} onClick={() => console.log(key)}>
+                                {key}: {state.gameboard.tradingResources[key as keyof ResourceCost]}
+                            </button>
                         </div>
                     )
                 })

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 {

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<SetStateAction<AppState>>) => {
+    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<SetStateAction<AppState>>) => {
+    let newNobles = NobleStore.nobles;
+    let shuffledNobles = new Array<NobleData>;
+
+    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<SetStateAction<AppState>>) {
+    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);
+}

src/util/types.d.ts

@@ -13,7 +13,29 @@ export interface AppState {
         deck: FullDeck,
     },
     round: number,
-    players: Array<PlayerData>
+    players: Array<PlayerData>,
+    actions: StateActions
+}
+
+interface StateActions {
+    getChips: {
+        active: boolean
+        selection?: Array<keyof ResourceCost>
+        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 {