added counter for cards remaining

src/components/Card/Card.tsx

@@ -11,7 +11,7 @@ export default function Card({ data, state, setState }: CardProps) {
     const currentPlayer = useCurrentPlayer(state);
 
     return (
-        <div className={`card`}>
+        <div className="card">
             <div className="top-row">
                 <p>Counts as: {data.gemValue}</p>
                 <p>Point value: {data.points || 0}</p>

src/components/Card/CardRow.tsx

@@ -2,8 +2,11 @@ import { CardRowProps } from '../../util/propTypes';
 import { CardData } from "../../util/types"
 import Card from "../Card/Card"
 import { v4 } from 'uuid';
+import cardTierToKey from '../../util/cardTierToKey';
 
 export default function CardRow({tier, state, setState}: CardRowProps) {
+    const typedTier = cardTierToKey(tier);
+
     let cards: Array<CardData>
     switch (tier) {
         case 1:
@@ -24,6 +27,9 @@ export default function CardRow({tier, state, setState}: CardRowProps) {
         <div className={`card-row tier-${tier}`}>
             <p>Tier: {tier}</p>
             <div className="card-row-cards-visible">
+                <div className="card card-count">
+                    <p>Remaining: {state.gameboard.deck[typedTier].length}</p>
+                </div>
                 { cards && cards.map((cardData: CardData) => {
                     return <Card key={v4()} data={cardData} state={state} setState={setState} />
                 })}

src/components/Card/MiniCard.tsx

@@ -1,10 +0,0 @@
-import { CardData } from "../../util/types"
-
-export const MiniCard = ({ data }: {data: CardData}) => {
-    return (
-        <div className="mini-card" style={{backgroundColor: 'white'}}>
-            <p>{data.gemValue} card</p>
-            <p>{data.points || null}</p>
-        </div>
-    )
-}

src/components/Gameboard/Gameboard.tsx

@@ -50,6 +50,10 @@ export default function Gameboard({ state, setState }: StateProps) {
         setCardRows(state);
     }, [state])
 
+    useEffect(() => {
+        console.log(state)
+    }, [state])
+
     // displays state of board if data is populated
     useEffect(() => {
         if (!state.players.length) {

src/components/Player/Player.tsx

@@ -46,6 +46,11 @@ export default function Player({ player, state, setState }: PlayerProps) {
                         <div key={v4()} className="mini-card" style={{backgroundColor: 'white'}}>
                             <p>{data.gemValue} cards</p>
                             <p>{data.points + " points" || null}</p>
+                            {
+                                Object.entries(data.resourceCost).map(([key, value]) => {
+                                    return value > 0 && <p key={v4()}>{key}: {value}</p>
+                                })
+                            }
                         </div>
                     )
                 })