props passed through components successfully

src/App.tsx

@@ -1,27 +1,45 @@
 import { BrowserRouter, Routes, Route } from 'react-router-dom'
+import { useState } from 'react'
 import Gameboard from './components/Gameboard/Gameboard'
-import './App.css'
-import { useCallback, useContext, useEffect, useState } from 'react'
-import { appState, Context } from './context/Context'
-import AvailableChips from './components/Resources/AvailableChips';
 import GameConstructor from './util/GameConstructor';
-import { PlayerData } from './util/types';
+import { PlayerData, NobleData, CardData } from './util/types';
+import CardDeck from './data/cards.json';
+import './App.css'
 
 function App() {
-  let AppContext = useContext(Context);
-  let { players } = AppContext;
+  const [state, setState] = useState({
+    gameboard: {
+      nobles: new Array<NobleData>,
+      cardRows: {
+          tierOne: new Array<CardData>,
+          tierTwo: new Array<CardData>,
+          tierThree: new Array<CardData>,
+      },
+      tradingResources: {
+          ruby: 7,
+          sapphire: 7,
+          emerald: 7,
+          diamond: 7,
+          onyx: 7,
+          gold: 5
+      },
+      deck: CardDeck,
+  },
+  round: 0,
+  players: new Array<PlayerData>,
+  })
 
   return (
     <div className="App">
-      <Context.Provider value={appState}>
-        <h1>SPLENDOR</h1>
-        <BrowserRouter>
-          <Routes>
-            <Route path="/" element={<GameConstructor />} />
-            <Route path="/game" element={<Gameboard />} />
-          </Routes>
-        </BrowserRouter>
-      </Context.Provider>
+      <h1>SPLENDOR</h1>
+      <BrowserRouter>
+        <Routes>
+          {/* @ts-ignore */}
+          <Route path="/" element={<GameConstructor state={state} setState={setState} />} />
+          {/* @ts-ignore */}
+          <Route path="/game" element={<Gameboard state={state} setState={setState} />} />
+        </Routes>
+      </BrowserRouter>
     </div>
   );
 }

src/components/Gameboard/Gameboard.tsx

@@ -1,15 +1,12 @@
-import { useContext, useEffect, useState } from 'react';
-import { appState, Context } from '../../context/Context';
-import { NobleData } from '../../util/types';
+import { Dispatch, SetStateAction, useEffect, useState } from 'react';
+import { CardData, FullDeck, NobleData, StateProps } from '../../util/types';
 import AllPlayers from '../Player/AllPlayers';
 import AvailableChips from '../Resources/AvailableChips';
 import CardRow from './CardRow';
 import Nobles from './Nobles';
 import NobleStore from '../../data/nobles.json';
 
-export default function Gameboard() {
-    let AppContext = useContext(Context);
-    let { gameboard, players } = AppContext;
+export default function Gameboard({ state, setState }: StateProps) {
     const [view, setView] = useState(<p>Loading...</p>)
 
     useEffect(() => {
@@ -17,7 +14,7 @@ export default function Gameboard() {
     }, [])
 
     useEffect(() => {
-        if (!players.length) {
+        if (!state.players.length) {
             setView(
                 <div className="error-page">
                     <strong>Sorry! It appears we've lost track of your game data.</strong>
@@ -27,20 +24,20 @@ export default function Gameboard() {
         } else {
             setView(
                 <div className="gameboard-rows">
-                    <Nobles AppContext={AppContext} />
-                    <CardRow tier={3} cards={gameboard.cardRows.tierThree} />
-                    <CardRow tier={2} cards={gameboard.cardRows.tierTwo} />
-                    <CardRow tier={1} cards={gameboard.cardRows.tierOne} />
-                    <AvailableChips />
-                    <AllPlayers AppContext={AppContext} />
+                    <Nobles state={state} setState={setState} />
+                    <CardRow tier={3} cards={state.gameboard.cardRows.tierThree} />
+                    <CardRow tier={2} cards={state.gameboard.cardRows.tierTwo} />
+                    <CardRow tier={1} cards={state.gameboard.cardRows.tierOne} />
+                    <AvailableChips state={state} setState={setState} />
+                    <AllPlayers state={state} setState={setState} />
                 </div>
             )
         }
-    }, [AppContext]);
+    }, [state]);
 
     const shuffleDeck = () => {
-        if (!gameboard.deck) return;
-        let newDeck = gameboard.deck;
+        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--) {
@@ -51,7 +48,7 @@ export default function Gameboard() {
             }
         }
 
-        gameboard.deck = newDeck;
+        setState({ ...state, gameboard: { ...state.gameboard, deck: newDeck }})
     }
 
     const setNobles = () => {
@@ -64,26 +61,24 @@ export default function Gameboard() {
             shuffledNobles.push(randNoble);
         }
         
-        gameboard.nobles = shuffledNobles;
+        setState({ ...state, gameboard: { ...state.gameboard, nobles: shuffledNobles }})
     }
 
     const initializeBoard = () => {
         shuffleDeck();
-        setNobles();
 
-        let newState = gameboard;
-
-        for (const [key, value] of Object.entries(gameboard.deck)) {
-            // @ts-ignore
-            while (newState.cardRows[key].length < 4) {
-                const nextCard = value.shift();
+        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
-                newState.cardRows[key].push(nextCard);
+                const nextCard = value.shift();
+                newDeck[key as keyof FullDeck].push(nextCard);
             }
         }
 
-        gameboard = newState;
+        setState({ ...state, gameboard: { ...state.gameboard, cardRows: newDeck } })
+        setNobles();
     }
 
-    return view;
+    return view
 }

src/components/Gameboard/Nobles.tsx

@@ -1,16 +1,28 @@
+import { useEffect } from "react";
 import { v4 } from "uuid";
-import { NobleData, ResourceCost } from "../../util/types";
+import { NobleData, ResourceCost, StateProps } from "../../util/types";
 import "./Nobles.css"
 
-export default function Nobles({ AppContext }: any) {
-    const { gameboard } = AppContext;
+export default function Nobles({ state, setState }: StateProps) {
+    const removeNoble = (noble: NobleData) => {
+        console.log(noble);
+        setState((prev) => {
+            return {
+                ...prev,
+                gameboard: {
+                    ...prev.gameboard,
+                    nobles: prev.gameboard.nobles.filter((each) => each.nobleid !== noble.nobleid)
+                }
+            }
+        })
+    }
 
     return (
         <div className="nobles-panel">
             <strong>NOBLES</strong>
             <div className="all-nobles">
                 {
-                gameboard.nobles && gameboard.nobles.map((noble: NobleData) => {
+                state && state.gameboard.nobles.map((noble: NobleData) => {
                     return (
                         <div className="noble-card" key={v4()}>
                             <p>Points: {noble.points}</p>
@@ -23,7 +35,7 @@ export default function Nobles({ AppContext }: any) {
                             }
                         </div>
                     )
-                }) || <p>Nobles not found. Please wait...</p>
+                })
                 }
             </div>
         </div>

src/components/Player/AllPlayers.tsx

@@ -1,17 +1,13 @@
-import { useContext } from "react"
-import { Context } from "../../context/Context"
 import Player from "./Player";
 import { v4 } from "uuid";
 import "./AllPlayers.css"
-import { PlayerData } from "../../util/types";
-
-export default function AllPlayers({ AppContext }: any) {
-    const { players } = AppContext;
+import { PlayerData, StateProps } from "../../util/types";
 
+export default function AllPlayers({ state, setState }: StateProps) {
     return (
         <div className="all-players">
             {
-                players.map((player: PlayerData) => <Player key={v4()} data={player} />)
+                state.players?.map((player: PlayerData) => <Player key={v4()} player={player} state={state} setState={setState} />)
             }
         </div>
     )

src/components/Player/Player.tsx

@@ -1,43 +1,36 @@
-import { useContext } from "react";
+import { AppState, PlayerData, ResourceCost, StateProps } from "../../util/types"
 import { v4 } from "uuid";
-import { Context } from "../../context/Context";
-import { GemValue, PlayerData, ResourceCost } from "../../util/types"
 
-interface PlayerProps {
-    data: PlayerData
+interface PlayerProps extends StateProps {
+    player: PlayerData
 }
 
-export default function Player({ data }: PlayerProps) {
-    const AppContext = useContext(Context);
-
-    let state: any;
-    let setState: any;
-
-    // const [state, setState] = useState({
-    //     name: data.name,
-    //     starter: data.starter,
-    //     points: data.points,
-    //     nobles: data.nobles,
-    //     cards: data.cards,
-    //     inventory: data.inventory
-    // })
-
-    // const buyCard = (cardData: CardData) => {
-    //     let newCards = state.cards;
-    //     newCards.push(cardData);
-    //     setState({ ...state, cards: newCards })
-    // }
-
+export default function Player({ player, state, setState }: PlayerProps) {
     const getChips = (resource: string) => {
-        AppContext.gameboard.tradingResources[resource as keyof ResourceCost] -= 1;
-        console.log(AppContext);
+        setState((prev: AppState) => {
+            return {
+                ...prev,
+                gameboard: {
+                    ...prev.gameboard,
+                    tradingResources: {
+                        ...prev.gameboard.tradingResources,
+                        [resource as keyof ResourceCost]: prev.gameboard.tradingResources[resource as keyof ResourceCost] -= 1
+                    }
+                }
+            }
+        })
+        
+        console.log(state);
     }
 
     return (
         <div className="player-ui" key={v4()}>
-            <p>Name: {data.name}</p>
-            <p>Score: {data.points}</p>
-            <p>Is {data.starter || "not"} round starter</p>
+            {/* Static Data */}
+            <p>Name: {player.name}</p>
+            <p>Score: {player.points}</p>
+            <p>Is {player.starter || "not"} round starter</p>
+
+            {/* Dynamic data from state */}
             <button onClick={() => getChips('ruby')}>Get Chips</button>
             <div className="player-cards"></div>
             <div className="player-resources"></div>

src/components/Resources/AvailableChips.tsx

@@ -1,19 +1,20 @@
-import { useContext, useEffect, useState } from "react"
+import { ResourceCost, StateProps } from "../../util/types";
 import { v4 } from "uuid";
-import { appState, Context } from "../../context/Context";
-import { ResourceCost } from "../../util/types";
 import "./AvailableChips.css"
+import { useEffect } from "react";
 
-export default function AvailableChips() {
-    const AppContext = useContext(Context);
+export default function AvailableChips({ state }: StateProps) {
+    useEffect(() => {
+        return;
+    }, [state])
 
     return (
         <div className="available-chips">
             {
-                Object.keys(AppContext.gameboard.tradingResources).map((key: string) => {
+                Object.keys(state.gameboard.tradingResources).map((key: string) => {
                     return (
                         <div key={v4()} className={`chips-${key}`}>
-                            <p>{key}: {AppContext.gameboard.tradingResources[key as keyof ResourceCost]}</p>
+                            <p>{key}: {state.gameboard.tradingResources[key as keyof ResourceCost]}</p>
                         </div>
                     )
                 })

src/context/Context.ts

@@ -1,28 +0,0 @@
-import { CardData, NobleData, PlayerData } from '../util/types';
-import CardDeck from '../data/cards.json';
-import { createContext } from 'react';
-import { AppState } from './types';
-
-export const appState: AppState = {
-    gameboard: {
-        nobles: new Array<NobleData>,
-        cardRows: {
-            tierOne: new Array<CardData>,
-            tierTwo: new Array<CardData>,
-            tierThree: new Array<CardData>,
-        },
-        tradingResources: {
-            ruby: 7,
-            sapphire: 7,
-            emerald: 7,
-            diamond: 7,
-            onyx: 7,
-            gold: 5
-        },
-        deck: CardDeck,
-    },
-    round: 0,
-    players: new Array<PlayerData>,
-}
-
-export const Context = createContext(appState);

src/context/types.d.ts

@@ -1,16 +0,0 @@
-import { CardData, FullDeck, NobleData, PlayerData, ResourceCost } from "../util/types"
-
-export interface AppState {
-    gameboard: {
-        nobles: Array<NobleData>,
-        cardRows: {
-            tierOne: Array<CardData>
-            tierTwo: Array<CardData>
-            tierThree: Array<CardData>
-        },
-        tradingResources: ResourceCost
-        deck: FullDeck,
-    },
-    round: number,
-    players: Array<PlayerData>
-}

src/data/nobles.json

@@ -1,6 +1,7 @@
 {
     "nobles": [
         {
+            "nobleid": 1,
             "points": 3,
             "resourceCost": {
                 "ruby": 0,
@@ -11,6 +12,7 @@
             }
         },
         {
+            "nobleid": 2,
             "points": 3,
             "resourceCost": {
                 "ruby": 0,
@@ -21,6 +23,7 @@
             }
         },
         {
+            "nobleid": 3,
             "points": 3,
             "resourceCost": {
                 "ruby": 3,
@@ -31,6 +34,7 @@
             }
         },
         {
+            "nobleid": 4,
             "points": 3,
             "resourceCost": {
                 "ruby": 4,
@@ -41,6 +45,7 @@
             }
         },
         {
+            "nobleid": 5,
             "points": 3,
             "resourceCost": {
                 "ruby": 0,
@@ -51,6 +56,7 @@
             }
         },
         {
+            "nobleid": 6,
             "points": 3,
             "resourceCost": {
                 "ruby": 3,
@@ -61,6 +67,7 @@
             }
         },
         {
+            "nobleid": 7,
             "points": 3,
             "resourceCost": {
                 "ruby": 0,
@@ -71,6 +78,7 @@
             }
         },
         {
+            "nobleid": 8,
             "points": 3,
             "resourceCost": {
                 "ruby": 3,
@@ -81,6 +89,7 @@
             }
         },
         {
+            "nobleid": 9,
             "points": 3,
             "resourceCost": {
                 "ruby": 4,
@@ -91,6 +100,7 @@
             }
         },
         {
+            "nobleid": 10,
             "points": 3,
             "resourceCost": {
                 "ruby": 0,

src/util/GameConstructor.tsx

@@ -1,7 +1,7 @@
 import { useContext, useEffect, useState } from "react"
 import { useNavigate } from "react-router-dom"
 import { Context } from "../context/Context";
-import { CardData, NobleData, PlayerData } from "./types";
+import { CardData, NobleData, PlayerData, StateProps } from "./types";
 
 interface InputState {
     playerOne: PlayerInput
@@ -15,12 +15,10 @@ interface PlayerInput {
     starter: boolean
 }
 
-export default function GameConstructor() {
-    const AppContext = useContext(Context);
+export default function GameConstructor({ state, setState }: StateProps) {
     const navigate = useNavigate();
 
     const [starter, setStarter] = useState(-1);
-
     const [input, setInput] = useState<InputState>({
         playerOne: {
             name: '',
@@ -66,7 +64,7 @@ export default function GameConstructor() {
             if (!player.name) newPlayers.splice(newPlayers.indexOf(player));
         }
 
-        AppContext.players = newPlayers;
+        setState({ ...state, players: newPlayers });
         navigate('/game');
     }
 

src/util/types.d.ts

@@ -1,3 +1,26 @@
+import { Dispatch, SetStateAction } from "react"
+import { AppState } from "../context/types"
+
+export interface AppState {
+    gameboard: {
+        nobles: Array<NobleData>,
+        cardRows: {
+            tierOne: Array<CardData>
+            tierTwo: Array<CardData>
+            tierThree: Array<CardData>
+        },
+        tradingResources: ResourceCost
+        deck: FullDeck,
+    },
+    round: number,
+    players: Array<PlayerData>
+}
+
+export interface StateProps {
+    state: AppState,
+    setState: Dispatch<SetStateAction<AppState>>
+}
+
 export interface GameInformation {
     players: PlayerData[],
     nobles: NobleData[],
@@ -8,6 +31,7 @@ export interface GameInformation {
 export interface PlayerData {
     name: string,
     starter: boolean,
+    turnActive?: boolean,
     points: number,
     nobles: NobleData[],
     cards: CardData[],
@@ -39,6 +63,7 @@ export interface ResourceCost {
 }
 
 export interface NobleData {
+    nobleid?: number,
     points: number,
     resourceCost: ResourceCost
 }