From 094fc38cec5fd2cef1524ccbade7f6b1f403e6ca Mon Sep 17 00:00:00 2001
From: Araozu <fernando@araozu.dev>
Date: Tue, 7 May 2024 18:23:59 -0500
Subject: [PATCH] Add & render all cards

---
 src/components/Card.tsx              | 31 ++++++++++++++++++++++++++--
 src/components/icons/DiamondIcon.tsx |  7 +++++++
 src/components/icons/HeartIcon.tsx   |  7 +++++++
 src/components/icons/SpadeIcon.tsx   |  7 +++++++
 src/index.css                        |  6 +++---
 src/pages/Index.tsx                  |  9 ++++++++
 src/types/cards.ts                   |  6 +++---
 7 files changed, 65 insertions(+), 8 deletions(-)
 create mode 100644 src/components/icons/DiamondIcon.tsx
 create mode 100644 src/components/icons/HeartIcon.tsx
 create mode 100644 src/components/icons/SpadeIcon.tsx

diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index e9668bd..ff37435 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -1,5 +1,10 @@
-import { intToCardType } from "../types/cards";
+import { CardType, intToCardType } from "../types/cards";
 import { ClubIcon } from "./icons/ClubIcon";
+import { DiamondIcon } from "./icons/DiamondIcon";
+import { HeartIcon } from "./icons/HeartIcon";
+import { JokerIcon } from "./icons/JokerIcon";
+import { SpadeIcon } from "./icons/SpadeIcon";
+
 
 export function Card(props: {value: number}) {
     const value = props.value;
@@ -7,6 +12,28 @@ export function Card(props: {value: number}) {
     const [cardType, cardValue, [bgColor, textColor]] = intToCardType(value);
     console.log(cardType, cardValue, bgColor, textColor);
 
+    let icon = null;
+    switch (cardType) {
+        case CardType.Club:
+            icon = <ClubIcon class="absolute bottom-1 right-1" fill={textColor} />;
+            break;
+        case CardType.Diamond:
+            icon = <DiamondIcon class="absolute bottom-1 right-1" fill={textColor} />;
+            break;
+        case CardType.Heart:
+            icon = <HeartIcon class="absolute bottom-1 right-1" fill={textColor} />;
+            break;
+        case CardType.Spade:
+            icon = <SpadeIcon class="absolute bottom-1 right-1" fill={textColor} />;
+            break;
+        case CardType.BlackJoker:
+        case CardType.RedJoker:
+        case CardType.BlueJoker:
+        case CardType.GreenJoker:
+            icon = <JokerIcon class="absolute left-2 top-6" fill={textColor} />;
+            break;
+    }
+
     return (
         <div class={"inline-block w-16 h-24 border-2 border-c-border-1 relative"}
             style={{"color": textColor, "background-color": bgColor}}
@@ -14,7 +41,7 @@ export function Card(props: {value: number}) {
             <span class="absolute top-1 left-1 font-bold text-4xl font-sans-serif">
                 {cardValue}
             </span>
-            <ClubIcon class="absolute bottom-1 right-1" fill={textColor} />
+            {icon}
         </div>
     );
 }
diff --git a/src/components/icons/DiamondIcon.tsx b/src/components/icons/DiamondIcon.tsx
new file mode 100644
index 0000000..6e04ff7
--- /dev/null
+++ b/src/components/icons/DiamondIcon.tsx
@@ -0,0 +1,7 @@
+export function DiamondIcon(props: {class: string, fill: string}) {
+    return (
+        <svg class={props.class} width="32" height="32" fill={props.fill} viewBox="0 0 256 256">
+            <path d="M235.33,116.72,139.28,20.66a16,16,0,0,0-22.56,0l-96,96.06a16,16,0,0,0,0,22.56l96.05,96.06h0a16,16,0,0,0,22.56,0l96.05-96.06a16,16,0,0,0,0-22.56ZM128,224h0L32,128,128,32,224,128Z" />
+        </svg>
+    );
+}
diff --git a/src/components/icons/HeartIcon.tsx b/src/components/icons/HeartIcon.tsx
new file mode 100644
index 0000000..059ba43
--- /dev/null
+++ b/src/components/icons/HeartIcon.tsx
@@ -0,0 +1,7 @@
+export function HeartIcon(props: {class: string, fill: string}) {
+    return (
+        <svg class={props.class} width="32" height="32" fill={props.fill} viewBox="0 0 256 256">
+            <path d="M178,40c-20.65,0-38.73,8.88-50,23.89C116.73,48.88,98.65,40,78,40a62.07,62.07,0,0,0-62,62c0,70,103.79,126.66,108.21,129a8,8,0,0,0,7.58,0C136.21,228.66,240,172,240,102A62.07,62.07,0,0,0,178,40ZM128,214.8C109.74,204.16,32,155.69,32,102A46.06,46.06,0,0,1,78,56c19.45,0,35.78,10.36,42.6,27a8,8,0,0,0,14.8,0c6.82-16.67,23.15-27,42.6-27a46.06,46.06,0,0,1,46,46C224,155.61,146.24,204.15,128,214.8Z" />
+        </svg>
+    );
+}
diff --git a/src/components/icons/SpadeIcon.tsx b/src/components/icons/SpadeIcon.tsx
new file mode 100644
index 0000000..cd1b2a2
--- /dev/null
+++ b/src/components/icons/SpadeIcon.tsx
@@ -0,0 +1,7 @@
+export function SpadeIcon(props: {class: string, fill: string}) {
+    return (
+        <svg class={props.class} width="32" height="32" fill={props.fill} viewBox="0 0 256 256">
+            <path d="M131.58,16.85a8,8,0,0,0-7.16,0C120.32,18.9,24,67.84,24,136a56,56,0,0,0,74.15,53L88.34,221.7A8,8,0,0,0,96,232h64a8,8,0,0,0,7.66-10.3L157.85,189A56,56,0,0,0,232,136C232,67.84,135.68,18.9,131.58,16.85ZM176,176a40,40,0,0,1-26.29-9.85,8,8,0,0,0-12.92,8.33L149.25,216h-42.5l12.46-41.52a8,8,0,0,0-12.92-8.33A40,40,0,0,1,40,136c0-29.88,24.41-56.55,44.89-73.66A279.13,279.13,0,0,1,128,33.06a279.13,279.13,0,0,1,43.11,29.28C208.21,93.34,216,119.51,216,136A40,40,0,0,1,176,176Z" />
+        </svg>
+    );
+}
diff --git a/src/index.css b/src/index.css
index 3b49589..abd17a6 100644
--- a/src/index.css
+++ b/src/index.css
@@ -4,9 +4,9 @@
 
 /* General colors */
 :root {
-    --green-1: #22c55e;
-    --red-1: red;
-    --blue-1: blue;
+    --green-1: #16a34a;
+    --red-1: #dc2626;
+    --blue-1: #0284c7;
     --black-1: black;
 }
 
diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
index 5759273..b288ba0 100644
--- a/src/pages/Index.tsx
+++ b/src/pages/Index.tsx
@@ -104,6 +104,15 @@ export function Index() {
                     <Card value={36} />
                 </div>
             </div>
+            <div class="text-center">
+                <Card value={64} />
+                <Card value={96} />
+                <Card value={128} />
+                <Card value={160} />
+                <Card value={192} />
+                <Card value={224} />
+                <Card value={256} />
+            </div>
         </div>
     );
 }
diff --git a/src/types/cards.ts b/src/types/cards.ts
index f42a573..ede2654 100644
--- a/src/types/cards.ts
+++ b/src/types/cards.ts
@@ -58,11 +58,11 @@ export function intToCardType(value: number): [CardType, string, [string, string
         case 5:
             return [CardType.BlueJoker,"", tailwindCardColors[3]];
         case 6:
-            return [CardType.Jack,"", tailwindCardColors[2]];
+            return [CardType.Jack,"J", tailwindCardColors[2]];
         case 7:
-            return [CardType.Queen,"", tailwindCardColors[2]];
+            return [CardType.Queen,"Q", tailwindCardColors[2]];
         case 8:
-            return [CardType.King,"", tailwindCardColors[2]];
+            return [CardType.King,"K", tailwindCardColors[2]];
         default:
         {
             console.error("Encountered a badly encoded card: ", value);