beginning to define standards for chip design

src/components/Card/Card.tsx

@@ -13,16 +13,21 @@ export default function Card({ data, state, setState }: CardProps) {
 
     return (
         <div className="card" key={v4()}>
-            <div className="top-row">
             <p>Counts as: {data.gemValue}</p>
             <p>Point value: {data.points || 0}</p>
             <p>Cost:</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()}>{key}: {data.resourceCost[key as keyof ResourceCost]}</p>
+                    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)}
@@ -38,6 +43,5 @@ export default function Card({ data, state, setState }: CardProps) {
                 </button>
             }
         </div>
-        </div>
     )
 }

src/components/Card/CardRow.scss

@@ -1,3 +1,6 @@
+@import "../../sass/helper/mixins";
+@import "../../sass/helper/placeholders";
+
 .card-row {
     display: flex;
     flex-flow: column nowrap;
@@ -10,21 +13,36 @@
         width: 100%;
         justify-content: space-around;
     }
+    
+    .card {
+        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;
+            }
+        }
+    }
 }
   
-.card {
-    width: 25%;
-}
   
 .tier-1 {
-    background-color: green;
+    background-color: rgb(9, 67, 9);
 }
   
 .tier-2 {
-    background-color: yellow;
+    background-color: rgb(174, 174, 32);
     color: black;
 }
   
 .tier-3 {
-    background-color: blue;
+    background-color: rgb(35, 35, 167);
 }

src/components/Player/AllPlayers.scss

@@ -1,4 +1,5 @@
 @import '../../sass/helper/mixins';
+@import '../../sass/helper/placeholders';
 
 .all-players {
     display: flex;
@@ -15,7 +16,11 @@
         .resources {
             .player-chips-enum {
                 display: flex;
+                justify-content: center;
                 @include map-gem-values(".player-chip");
+                p {
+                    @extend %chip-design;
+                }
             }
         }
     }

src/components/Player/Player.tsx

@@ -93,9 +93,7 @@ export default function Player({ player, state, setState }: PlayerProps) {
                     <div className="player-chips-enum">
                         { dynamic && Object.entries(dynamic.inventory).map(([key,value]) => {
                             return value > 0 && (
-                                <p key={v4()} className={`player-chip-${key}`}>
-                                    {key}: {value}
-                                </p>
+                                <p key={v4()} className={`player-chip-${key}`}>{value}</p>
                             )
                         })}
                     </div>

src/sass/helper/_mixins.scss

@@ -2,6 +2,7 @@
     #{$parentClass} {
         &-emerald {
             background-color: green;
+            color: white;
         }
         &-diamond {
             background-color: white;
@@ -17,10 +18,12 @@
         }
         &-ruby {
             background-color: red;
+            color: black;
         }
         &-gold {
             background-color: gold;
             color: black;
         }
+
     }
 }

src/sass/helper/_placeholders.scss

@@ -1,3 +1,15 @@
 %hidden {
     display: none;
 }
+
+// designed to extend a "p" element
+%chip-design {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 5px;
+    padding: 8px;
+    width: 1rem;
+    height: 1rem;
+    border-radius: 50%;
+}