ui update: player card view shows number of each permanent resource upgrade

src/components/GameConstructor.tsx

@@ -65,7 +65,13 @@ export default function GameConstructor({ state, setState }: StateProps) {
                 turnActive: val.starter,
                 points: 0,
                 nobles: new Array<NobleData>,
-                cards: new Array<CardData>,
+                cards: {
+                    ruby: new Array<CardData>,
+                    sapphire: new Array<CardData>,
+                    emerald: new Array<CardData>,
+                    diamond: new Array<CardData>,
+                    onyx: new Array<CardData>,
+                },
                 inventory: {
                     ruby: 0,
                     sapphire: 0,

src/components/Player/ActionMethods/buyCardActions.ts

@@ -1,5 +1,5 @@
 import { turnOrderUtil } from "../../../util/turnOrderUtil";
-import { AppState, CardData, FullDeck, ResourceCost, setStateType } from "../../../util/types";
+import { AppState, CardData, FullDeck, PlayerCards, ResourceCost, setStateType } from "../../../util/types";
 import { useCurrentPlayer } from "../../../hooks/useCurrentPlayer";
 import getTotalBuyingPower from "../../../util/getTotalBuyingPower";
 import { initialActions, setStateGetNoble } from "../../../hooks/stateSetters";
@@ -75,8 +75,9 @@ export const buyCard = (state: AppState, setState: setStateType, card: CardData)
         }
 
         // connect modified player state to updated list of all players
+        const typeofCard = card.gemValue as keyof PlayerCards;
+        updatedPlayer.cards[typeofCard] = [...updatedPlayer.cards[typeofCard], card]
         updatedPlayer.inventory = newPlayerInventory;
-        updatedPlayer.cards = [...updatedPlayer.cards, card];
         updatedPlayer.points = updatedPlayer.points + (card.points || 0);
         newPlayers[idx] = updatedPlayer;
 

src/components/Player/Player.tsx

@@ -1,7 +1,7 @@
 import { setStateAwaitAction, setStateBuyCard, setStateGetChips, setStateReserveCard } from "../../hooks/stateSetters";
 import { useEffect, useState } from "react";
 import { PlayerProps } from "../../util/propTypes";
-import { CardData, PlayerData } from "../../util/types"
+import { CardData, GemValue, PlayerData } from "../../util/types"
 import { hasMaxReserved } from "./ActionMethods/reserveCardActions";
 import { hasMaxChips } from "./ActionMethods/getChipsActions";
 import { v4 } from "uuid";
@@ -17,26 +17,35 @@ export default function Player({ player, state, setState }: PlayerProps) {
 
     useEffect(() => {
         dynamic && setCardView(
-            <>
-            <p>Cards:</p>
-            {
-                dynamic.cards.map((data: CardData) => {
-                    return (
-                        <div key={v4()} className="mini-card" style={{backgroundColor: 'white'}}>
-                            <p>{data.gemValue} card</p>
-                            <p>{data.points + " points" || null}</p>
-                            {
-                                Object.entries(data.resourceCost).map(([key, value]) => {
-                                    return value > 0 && <p key={v4()}>{key}: {value}</p>
-                                })
-                            }
-                        </div>
-                    )
-                })
-            }
-            </>
+            <div className="card-view">
+                <p>Cards:</p>
+                {
+                    Object.entries(dynamic.cards).map(([key, value]) => value.length > 0 && <p key={v4()}>{key}: {value.length}</p>)
+                }
+            </div>
         )
 
+        // dynamic && setCardView(
+        //     <div className="card-view">
+        //     <p>Cards:</p>
+        //     {
+        //         dynamic.cards.map((data: CardData) => {
+        //             return (
+        //                 <div key={v4()} className="mini-card" style={{backgroundColor: 'white'}}>
+        //                     <p>{data.gemValue} card</p>
+        //                     <p>{data.points + " points" || null}</p>
+        //                     {
+        //                         Object.entries(data.resourceCost).map(([key, value]) => {
+        //                             return value > 0 && <p key={v4()}>{key}: {value}</p>
+        //                         })
+        //                     }
+        //                 </div>
+        //             )
+        //         })
+        //     }
+        //     </div>
+        // )
+
         dynamic && setReservedView(
             <>
             <p>Reserved cards:</p>

src/util/getTotalBuyingPower.ts

@@ -16,8 +16,8 @@ export default function getTotalBuyingPower(currentPlayer: PlayerData) {
         totalBuyingPower[key as keyof ResourceCost] += quantity;
     }
 
-    for (let each of currentPlayer.cards) {
-        totalBuyingPower[each.gemValue as keyof ResourceCost] += 1;
+    for (let [gem, arr] of Object.entries(currentPlayer.cards)) {
+        totalBuyingPower[gem as keyof ResourceCost] += arr.length;
     }
 
     return totalBuyingPower;

src/util/types.ts

@@ -62,13 +62,21 @@ export interface PlayerData {
     turnActive?: boolean,
     points: number,
     nobles: NobleData[],
-    cards: CardData[],
+    cards: PlayerCards,
     reservedCards?: CardData[],
     inventory: {
         [Property in keyof ResourceCost]: number
     }
 }
 
+export interface PlayerCards {
+    ruby: CardData[],
+    emerald: CardData[],
+    sapphire: CardData[],
+    onyx: CardData[],
+    diamond: CardData[],
+}
+
 export interface FullDeck {
     tierOne: CardData[],
     tierTwo: CardData[],