to do: rendering problem in resource component

src/components/Player/Player.tsx

@@ -1,39 +1,36 @@
+import { useContext } from "react";
 import { v4 } from "uuid";
-import { useState } from "react";
-import { CardData, GemValue, PlayerData } from "../../util/types";
+import { Context } from "../../context/Context";
+import { GemValue, PlayerData, ResourceCost } from "../../util/types"
 
 interface PlayerProps {
     data: PlayerData
 }
 
 export default function Player({ data }: PlayerProps) {
-    const [state, setState] = useState({
-        name: data.name,
-        starter: data.starter,
-        points: data.points,
-        nobles: data.nobles,
-        cards: data.cards,
-        inventory: data.inventory
-    })
+    const AppContext = useContext(Context);
 
-    const buyCard = (cardData: CardData) => {
-        let newCards = state.cards;
-        newCards.push(cardData);
-        setState({ ...state, cards: newCards })
-    }
+    let state: any;
+    let setState: any;
 
-    const getChips = (payload: (string | GemValue)[]) => {
-        let newInventory = state.inventory;
-        for (let value of payload) {
-            for (let key in newInventory) {
-                if (value === key) {
-                    // @ts-ignore
-                    newInventory[value] += 1;
-                }
-            }
-        }
+    // const [state, setState] = useState({
+    //     name: data.name,
+    //     starter: data.starter,
+    //     points: data.points,
+    //     nobles: data.nobles,
+    //     cards: data.cards,
+    //     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>