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">
+            <div className={reserved ? `foreground-${data.gemValue}` : 'foreground'}>
-                <p>{data.gemValue.toUpperCase()}</p>
+                <section className="card-top-section">
-                { (data.points && data.points > 0) ? <p>{data.points} {data.points === 1 ? 'point' : 'points'}</p> : null }
+                    <p>{data.gemValue.toUpperCase()}</p>
-                <div className="total-card-cost">
+                    <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) => {
+                    (state.actions.buyCard.active || state.actions.reserveCard.active) && (
-                        // @ts-ignore
+                        <section className="card-action-section">
-                        return (data.resourceCost[key as keyof ResourceCost] > 0) && (
+                            { state.actions.buyCard.active &&
-                            <p key={v4()} className={`card-cost-${key}`}>
+                                <button
-                                {data.resourceCost[key as keyof ResourceCost]}
+                                    onClick={() => buyCard(state, setState, data)}
-                            </p>
+                                    disabled={purchaseDisabled()}>
-                        )
+                                    Buy This Card
-                    })
+                                </button>
-                }
+                            }
-                </div>
+                            { !reserved && state.actions.reserveCard.active &&
-                { state.actions.buyCard.active &&
+                                <button
-                    <button
+                                    onClick={() => reserveCard(state, setState, data)}
-                        onClick={() => buyCard(state, setState, data)}
+                                    disabled={hasMaxReserved(currentPlayer)}>
-                        disabled={tooExpensive(data, state)}>
+                                    Reserve This Card
-                        Buy This Card
+                                </button>
-                    </button>
+                            }
-                }
+                        </section>
-                { state.actions.reserveCard.active &&
+                    )
-                    <button
-                        onClick={() => reserveCard(state, setState, data)}
-                        disabled={hasMaxReserved(currentPlayer)}>
-                        Reserve This Card
-                    </button>
                 }
             </div>
         </div>

src/components/Card/CardRow.scss

@@ -56,7 +56,6 @@
                     @include map-gem-values(".card-cost");
                 }
             }
-
         }
     
         .card-count {

src/components/Player/AllPlayers.scss

@@ -1,4 +1,5 @@
 @import '../../sass/helper/mixins';
+@import '../../sass/helper/variables';
 @import '../../sass/helper/placeholders';
 
 .all-players {
@@ -33,5 +34,35 @@
                 @include map-gem-values(".reserve-cost");
             }
         }
+
+        .card {
+            width: 100%;
+
+            img {
+                display: none;
+            }
+
+            @each $gem in $gemlist {
+                @include map-gem-values('.foreground');
+                .foreground-#{$gem} {
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    padding: 8px;
+
+                    p {
+                        display: inline;
+                        padding: 8px;
+                    }
+                    
+                    .total-card-cost {
+                        display: flex;
+                        flex-flow: row wrap;
+                        justify-content: center;
+                        @include map-gem-values(".card-cost");
+                    }
+                }
+            }
+        }
     }
 }

src/components/Player/Player.tsx

@@ -29,18 +29,7 @@ export default function Player({ player, state, setState }: PlayerProps) {
         dynamic && setReservedView(
             <div className="reserved-card-view">
             <p>Reserved cards:</p>
-            {
+                { dynamic.reservedCards?.map((data: CardData) => <Card key={v4()} data={data} state={state} setState={setState} reserved={true} />) }
-                dynamic.reservedCards?.map((data: CardData) => (
-                    <div className="reserved-card">
-                        <p className={`mini-card ${data.gemValue}`} key={v4()}>{data.gemValue} card: {data.points || 0} points</p>
-                        <div className="reserved-card-cost">
-                        {
-                            Object.entries(data.resourceCost).map(([key, value]) => value > 0 && <p className={`reserve-cost-${key}`} key={v4()}>{value}</p>)
-                        }
-                        </div>
-                    </div>
-                ))
-            }
             </div>
         )
     }, [dynamic, setState])

src/sass/helper/_variables.scss

@@ -1,8 +1 @@
-$emerald-images: 
+$gemlist: 'ruby', 'sapphire', 'onyx', 'emerald', 'diamond', 'gold';
-    "src/assets/img/SUCCULENT-angele-kamp-unsplash.jpg",
-    "src/assets/img/SUCCULENT-annie-spratt-unsplash.jpg",
-    "src/assets/img/SUCCULENT-calle-macarone-unsplash.jpg",
-    "src/assets/img/SUCCULENT-edgar-castrejon-unsplash.jpg",
-    "src/assets/img/SUCCULENT-jacalyn-beales-unsplash.jpg",
-    "src/assets/img/SUCCULENT-tim-mossholder-unsplash.jpg"
-;

src/util/propTypes.ts

@@ -7,6 +7,7 @@ export interface StateProps {
 
 export interface CardProps extends StateProps {
     data: CardData
+    reserved?: boolean
 }
 
 export interface CardRowProps extends StateProps {