to do: rendering problem in resource component

package-lock.json

@@ -11,6 +11,7 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.3.0",
+        "scss": "^0.2.4",
         "uuid": "^8.3.2"
       },
       "devDependencies": {
@@ -1195,6 +1196,14 @@
       "integrity": "sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==",
       "dev": true
     },
+    "node_modules/ometa": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/ometa/-/ometa-0.2.2.tgz",
+      "integrity": "sha512-LZuoK/yjU3FvrxPjUXUlZ1bavCfBPqauA7fsNdwi+AVhRdyk2IzgP3JRnevvjzQ6fKHdUw8YISshf53FmpHrng==",
+      "engines": {
+        "node": ">= 0.2.0"
+      }
+    },
     "node_modules/path-parse": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
@@ -1338,6 +1347,17 @@
         "loose-envify": "^1.1.0"
       }
     },
+    "node_modules/scss": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/scss/-/scss-0.2.4.tgz",
+      "integrity": "sha512-4u8V87F+Q/upVhUmhPnB4C1R11xojkRkWjExL2v0CX2EXTg18VrKd+9JWoeyCp2VEMdSpJsyAvVU+rVjogh51A==",
+      "dependencies": {
+        "ometa": "0.2.2"
+      },
+      "engines": {
+        "node": ">= 0.2.0"
+      }
+    },
     "node_modules/semver": {
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
@@ -2251,6 +2271,11 @@
       "integrity": "sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==",
       "dev": true
     },
+    "ometa": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/ometa/-/ometa-0.2.2.tgz",
+      "integrity": "sha512-LZuoK/yjU3FvrxPjUXUlZ1bavCfBPqauA7fsNdwi+AVhRdyk2IzgP3JRnevvjzQ6fKHdUw8YISshf53FmpHrng=="
+    },
     "path-parse": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
@@ -2353,6 +2378,14 @@
         "loose-envify": "^1.1.0"
       }
     },
+    "scss": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/scss/-/scss-0.2.4.tgz",
+      "integrity": "sha512-4u8V87F+Q/upVhUmhPnB4C1R11xojkRkWjExL2v0CX2EXTg18VrKd+9JWoeyCp2VEMdSpJsyAvVU+rVjogh51A==",
+      "requires": {
+        "ometa": "0.2.2"
+      }
+    },
     "semver": {
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",

package.json

@@ -12,6 +12,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.3.0",
+    "scss": "^0.2.4",
     "uuid": "^8.3.2"
   },
   "devDependencies": {

src/App.tsx

@@ -13,13 +13,15 @@ function App() {
 
   return (
     <div className="App">
-      <h1>SPLENDOR</h1>
+      <Context.Provider value={appState}>
-      <BrowserRouter>
+        <h1>SPLENDOR</h1>
-        <Routes>
+        <BrowserRouter>
-          <Route path="/" element={<GameConstructor />} />
+          <Routes>
-          <Route path="/game" element={<Gameboard />} />
+            <Route path="/" element={<GameConstructor />} />
-        </Routes>
+            <Route path="/game" element={<Gameboard />} />
-      </BrowserRouter>
+          </Routes>
+        </BrowserRouter>
+      </Context.Provider>
     </div>
   );
 }

src/components/Gameboard/Gameboard.tsx

@@ -1,6 +1,5 @@
 import { useContext, useEffect, useState } from 'react';
-import { Context } from '../../context/Context';
+import { appState, Context } from '../../context/Context';
-import GameConstructor from '../../util/GameConstructor';
 import { NobleData } from '../../util/types';
 import AllPlayers from '../Player/AllPlayers';
 import AvailableChips from '../Resources/AvailableChips';
@@ -28,16 +27,16 @@ export default function Gameboard() {
         } else {
             setView(
                 <div className="gameboard-rows">
-                    <Nobles />
+                    <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 />
+                    <AllPlayers AppContext={AppContext} />
                 </div>
             )
         }
-    }, [players]);
+    }, [AppContext]);
 
     const shuffleDeck = () => {
         if (!gameboard.deck) return;

src/components/Gameboard/Nobles.tsx

@@ -1,17 +1,16 @@
-import { useContext, useEffect } from "react";
 import { v4 } from "uuid";
-import { Context } from "../../context/Context";
+import { NobleData, ResourceCost } from "../../util/types";
 import "./Nobles.css"
 
-export default function Nobles() {
+export default function Nobles({ AppContext }: any) {
-    const { gameboard } = useContext(Context);
+    const { gameboard } = AppContext;
 
     return (
         <div className="nobles-panel">
             <strong>NOBLES</strong>
             <div className="all-nobles">
                 {
-                gameboard.nobles.map((noble) => {
+                gameboard.nobles && gameboard.nobles.map((noble: NobleData) => {
                     return (
                         <div className="noble-card" key={v4()}>
                             <p>Points: {noble.points}</p>
@@ -19,7 +18,7 @@ export default function Nobles() {
                             {
                                 Object.keys(noble.resourceCost).map((each) => {
                                     // @ts-ignore
-                                    return (noble.resourceCost[each] > 0) && <p key={v4()}>{each}: {noble.resourceCost[each]}</p>
+                                    return (noble.resourceCost[each as keyof ResourceCost] > 0) && <p key={v4()}>{each}: {noble.resourceCost[each as keyof ResourceCost]}</p>
                                 })
                             }
                         </div>

src/components/Player/AllPlayers.tsx

@@ -3,14 +3,15 @@ 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() {
+export default function AllPlayers({ AppContext }: any) {
-    const { players } = useContext(Context);
+    const { players } = AppContext;
 
     return (
         <div className="all-players">
             {
-                players.map((player) => <Player key={v4()} data={player} />)
+                players.map((player: PlayerData) => <Player key={v4()} data={player} />)
             }
         </div>
     )

src/components/Player/Player.tsx

@@ -1,39 +1,36 @@
+import { useContext } from "react";
 import { v4 } from "uuid";
-import { useState } from "react";
+import { Context } from "../../context/Context";
-import { CardData, GemValue, PlayerData } from "../../util/types";
+import { GemValue, PlayerData, ResourceCost } from "../../util/types"
 
 interface PlayerProps {
     data: PlayerData
 }
 
 export default function Player({ data }: PlayerProps) {
-    const [state, setState] = useState({
+    const AppContext = useContext(Context);
-        name: data.name,
-        starter: data.starter,
-        points: data.points,
-        nobles: data.nobles,
-        cards: data.cards,
-        inventory: data.inventory
-    })
 
-    const buyCard = (cardData: CardData) => {
+    let state: any;
-        let newCards = state.cards;
+    let setState: any;
-        newCards.push(cardData);
-        setState({ ...state, cards: newCards })
-    }
 
-    const getChips = (payload: (string | GemValue)[]) => {
+    // const [state, setState] = useState({
-        let newInventory = state.inventory;
+    //     name: data.name,
-        for (let value of payload) {
+    //     starter: data.starter,
-            for (let key in newInventory) {
+    //     points: data.points,
-                if (value === key) {
+    //     nobles: data.nobles,
-                    // @ts-ignore
+    //     cards: data.cards,
-                    newInventory[value] += 1;
+    //     inventory: data.inventory
-                }
+    // })
-            }
-        }
 
-        setState({ ...state, inventory: newInventory });
+    // const buyCard = (cardData: CardData) => {
+    //     let newCards = state.cards;
+    //     newCards.push(cardData);
+    //     setState({ ...state, cards: newCards })
+    // }
+
+    const getChips = (resource: string) => {
+        AppContext.gameboard.tradingResources[resource as keyof ResourceCost] -= 1;
+        console.log(AppContext);
     }
 
     return (
@@ -41,6 +38,7 @@ export default function Player({ data }: PlayerProps) {
             <p>Name: {data.name}</p>
             <p>Score: {data.points}</p>
             <p>Is {data.starter || "not"} round starter</p>
+            <button onClick={() => getChips('ruby')}>Get Chips</button>
             <div className="player-cards"></div>
             <div className="player-resources"></div>
         </div>

src/components/Resources/AvailableChips.tsx

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

src/util/types.d.ts

@@ -44,10 +44,10 @@ export interface NobleData {
 }
 
 export enum GemValue {
-    Ruby,
+    ruby,
-    Sapphire,
+    sapphire,
-    Emerald,
+    emerald,
-    Diamond,
+    diamond,
-    Onyx,
+    onyx,
-    Gold,
+    gold,
 }