updates to card json. cards render photos

src/components/Card/Card.tsx

@@ -8,14 +8,12 @@ const { buyCard, tooExpensive } = buyCardActions;
 
 export default function Card({ data, state, setState }: CardProps) {
     const currentPlayer = useCurrentPlayer(state);
-
     if (!data) return <div className="card"></div>;
 
     return (
-        <div className="card" key={v4()}>
+        <div className="card" key={v4()} style={{backgroundImage: `url(${data.image})`}}>
             <p>Counts as: {data.gemValue}</p>
-            <p>Point value: {data.points || 0}</p>
+            { (data.points && data.points > 0) ? <p>{data.points} points</p> : null }
-            <p>Cost:</p>
             <div className="total-card-cost">
             {
                 Object.keys(data.resourceCost).map((key: keyof ResourceCost | string) => {

src/components/Card/CardRow.scss

@@ -1,5 +1,5 @@
 @import "../../sass/helper/mixins";
-@import "../../sass/helper/placeholders";
+@import "../../sass/helper/variables";
 
 .card-row {
     display: flex;
@@ -12,35 +12,45 @@
         flex-flow: row nowrap;
         width: 100%;
         justify-content: space-around;
-    }
+
+        .card {
+            width: 25%;
+            min-height: 24vh;
+            border: 2px solid black;
+
+            .total-card-cost {
+                display: flex;
+                justify-content: center;
     
-    .card {
+                @include map-gem-values(".card-cost");
-        width: 25%;
-        border: 2px solid black;
-        > * {
-            margin: 1rem;
-        }
-
-        .total-card-cost {
-            display: flex;
-            justify-content: center;
-
-            @include map-gem-values(".card-cost");
-            p {
-                @extend %chip-design;
             }
+
+            > * {
+                margin: 1rem;
+            }
+
+            p {
+                background-color: black;
+            }
+
+            background-size: cover;
+        }
+    
+        .card-count {
+            background-color: black;
+            color: white;
+            width: 25%;
         }
     }
 }
   
   
 .tier-1 {
-    background-color: rgb(9, 67, 9);
+    background-color: rgb(23, 73, 23);
 }
   
 .tier-2 {
     background-color: rgb(174, 174, 32);
-    color: black;
 }
   
 .tier-3 {

src/components/Card/CardRow.tsx

@@ -28,7 +28,7 @@ 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">
+                <div className="card-count">
                     <p>Remaining: {state.gameboard.deck[typedTier].length}</p>
                 </div>
                 { cards && cards.map((cardData: CardData) => {

src/components/Nobles/Nobles.scss

@@ -1,18 +1,26 @@
+@import "../../sass/helper/mixins";
+
 .nobles-panel {
     display: flex;
     flex-flow: column nowrap;
     background-color: rgb(240, 236, 225);
-    padding: 1.5rem;
     color: black;
+    padding: 1.5rem;
+
+    .all-nobles {
+        display: flex;
+        flex-flow: row nowrap;
+        justify-content: space-around;
+
+        .noble-card {
+            display: inline-flex;
+            flex-flow: column nowrap;
+
+            .mapped-noble-costs {
+                display: flex;
+                @include map-gem-values(".noble-cost");
+            }
+        }
+    }
 }
 
-.all-nobles {
-    display: flex;
-    flex-flow: row nowrap;
-    justify-content: space-around;
-}
-
-.noble-card {
-    display: inline-flex;
-    flex-flow: column nowrap;
-}

src/components/Nobles/Nobles.tsx

@@ -21,14 +21,20 @@ export default function Nobles({ state }: StateProps) {
                 state && state.gameboard.nobles.map((noble: NobleData) => {
                     return (
                         <div className="noble-card" key={v4()}>
-                            <p>Points: {noble.points}</p>
+                            <p>{noble.points} points</p>
                             <p>Cost:</p>
+                            <div className="mapped-noble-costs">
                             {
                                 Object.keys(noble.resourceCost).map((each) => {
                                     // @ts-ignore
-                                    return (noble.resourceCost[each as keyof ResourceCost] > 0) && <p key={v4()}>{each}: {noble.resourceCost[each as keyof ResourceCost]}</p>
+                                    return (noble.resourceCost[each as keyof ResourceCost] > 0) && (
+                                        <p key={v4()} className={`noble-cost-${each}`}>
+                                            {noble.resourceCost[each as keyof ResourceCost]}
+                                        </p>
+                                    )
                                 })
                             }
+                            </div>
                         </div>
                     )
                 })

src/components/Player/AllPlayers.scss

@@ -18,9 +18,6 @@
                 display: flex;
                 justify-content: center;
                 @include map-gem-values(".player-chip");
-                p {
-                    @extend %chip-design;
-                }
             }
         }
     }

src/sass/helper/_mixins.scss

@@ -1,3 +1,5 @@
+@import "./placeholders";
+
 @mixin map-gem-values($parentClass) {
     #{$parentClass} {
         &-emerald {
@@ -24,6 +26,16 @@
             background-color: gold;
             color: black;
         }
-
     }
+    
+    p {
+        @extend %chip-design;
+    }
+}
+
+@mixin get-random-image($targetList) {
+    $idx: random(6);
+    $nth: nth($targetList, $idx);
+
+    background-image: url($nth);
 }

src/sass/helper/_variables.scss

@@ -0,0 +1,8 @@
+$emerald-images: 
+    "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/types.ts

@@ -88,6 +88,7 @@ export interface CardData {
     tier: number
     points?: number
     resourceCost: ResourceCost
+    image: string
 }
 
 export interface ResourceCost {