various changes to reserved card handling in player ui

src/components/Card/Card.tsx

@@ -1,46 +1,61 @@
 import { v4 } from 'uuid';
 import { CardProps } from '../../util/propTypes';
-import { ResourceCost } from '../../util/types';
+import { CardData, PlayerCards, ResourceCost } from '../../util/types';
 import { useCurrentPlayer } from '../../hooks/useCurrentPlayer';
 import { buyCardActions } from '../Player/ActionMethods';
 import { hasMaxReserved, reserveCard } from '../Player/ActionMethods/reserveCardActions';
 const { buyCard, tooExpensive } = buyCardActions;
 
-export default function Card({ data, state, setState }: CardProps) {
+export default function Card({ data, state, setState, reserved = false }: CardProps) {
     const currentPlayer = useCurrentPlayer(state);
-    if (!data) return <div className="card"></div>;
+    if (!data || !currentPlayer) return <div className="card"></div>;
+
+    const purchaseDisabled = (): boolean => {
+        // TO DO: check whether a card belongs to the current player,
+        // if card is tagged as reserved
+        return tooExpensive(data, state);
+    }
 
     return (
-        <div className="card" key={v4()}>
+        <div className='card' key={v4()}>
             <img src={data.image} loading="lazy" />
-            <div className="foreground">
-                <p>{data.gemValue.toUpperCase()}</p>
-                { (data.points && data.points > 0) ? <p>{data.points} {data.points === 1 ? 'point' : 'points'}</p> : null }
-                <div className="total-card-cost">
+            <div className={reserved ? `foreground-${data.gemValue}` : 'foreground'}>
+                <section className="card-top-section">
+                    <p>{data.gemValue.toUpperCase()}</p>
+                    <div className="total-card-cost">
+                    {
+                        Object.keys(data.resourceCost).map((key: keyof ResourceCost | string) => {
+                            // @ts-ignore
+                            return (data.resourceCost[key as keyof ResourceCost] > 0) && (
+                                <p key={v4()} className={`card-cost-${key}`}>
+                                    {data.resourceCost[key as keyof ResourceCost]}
+                                </p>
+                            )
+                        })
+                    }
+                    </div>
+                    { (data.points && data.points > 0) ? <p>{data.points} {data.points === 1 ? 'point' : 'points'}</p> : null }
+                </section>
+
                 {
-                    Object.keys(data.resourceCost).map((key: keyof ResourceCost | string) => {
-                        // @ts-ignore
-                        return (data.resourceCost[key as keyof ResourceCost] > 0) && (
-                            <p key={v4()} className={`card-cost-${key}`}>
-                                {data.resourceCost[key as keyof ResourceCost]}
-                            </p>
-                        )
-                    })
-                }
-                </div>
-                { state.actions.buyCard.active &&
-                    <button
-                        onClick={() => buyCard(state, setState, data)}
-                        disabled={tooExpensive(data, state)}>
-                        Buy This Card
-                    </button>
-                }
-                { state.actions.reserveCard.active &&
-                    <button
-                        onClick={() => reserveCard(state, setState, data)}
-                        disabled={hasMaxReserved(currentPlayer)}>
-                        Reserve This Card
-                    </button>
+                    (state.actions.buyCard.active || state.actions.reserveCard.active) && (
+                        <section className="card-action-section">
+                            { state.actions.buyCard.active &&
+                                <button
+                                    onClick={() => buyCard(state, setState, data)}
+                                    disabled={purchaseDisabled()}>
+                                    Buy This Card
+                                </button>
+                            }
+                            { !reserved && state.actions.reserveCard.active &&
+                                <button
+                                    onClick={() => reserveCard(state, setState, data)}
+                                    disabled={hasMaxReserved(currentPlayer)}>
+                                    Reserve This Card
+                                </button>
+                            }
+                        </section>
+                    )
                 }
             </div>
         </div>