From 8fba7605b4f8c31f2a5043de847ccba325e600d0 Mon Sep 17 00:00:00 2001
From: Mikayla Dobson <mikaylaherself@gmail.com>
Date: Sat, 6 Aug 2022 12:13:12 -0500
Subject: [PATCH] added counter for cards remaining

---
 src/components/Card/Card.tsx           |  2 +-
 src/components/Card/CardRow.tsx        |  6 ++++++
 src/components/Card/MiniCard.tsx       | 10 ----------
 src/components/Gameboard/Gameboard.tsx |  4 ++++
 src/components/Player/Player.tsx       |  5 +++++
 5 files changed, 16 insertions(+), 11 deletions(-)
 delete mode 100644 src/components/Card/MiniCard.tsx

diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
index a5f38d7..a689856 100644
--- a/src/components/Card/Card.tsx
+++ b/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>
diff --git a/src/components/Card/CardRow.tsx b/src/components/Card/CardRow.tsx
index 2b89a07..f998d0e 100644
--- a/src/components/Card/CardRow.tsx
+++ b/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} />
                 })}
diff --git a/src/components/Card/MiniCard.tsx b/src/components/Card/MiniCard.tsx
deleted file mode 100644
index 4c272aa..0000000
--- a/src/components/Card/MiniCard.tsx
+++ /dev/null
@@ -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>
-    )
-}
\ No newline at end of file
diff --git a/src/components/Gameboard/Gameboard.tsx b/src/components/Gameboard/Gameboard.tsx
index 5834987..d30334a 100644
--- a/src/components/Gameboard/Gameboard.tsx
+++ b/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) {
diff --git a/src/components/Player/Player.tsx b/src/components/Player/Player.tsx
index 346f053..fbd40ed 100644
--- a/src/components/Player/Player.tsx
+++ b/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>
                     )
                 })