From 63f3b9fa702acd92009ee1e230bd82912cdcd74d Mon Sep 17 00:00:00 2001
From: Araozu <fernando@araozu.dev>
Date: Tue, 7 May 2024 18:47:52 -0500
Subject: [PATCH] Render hidden card

---
 src/components/Card.tsx | 3 +++
 src/pages/Index.tsx     | 2 +-
 src/types/cards.ts      | 6 ++++++
 3 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index 5e9de2c..95d5af7 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -14,6 +14,9 @@ export function Card(props: {value: number}) {
 
     let icon = null;
     switch (cardType) {
+        case CardType.Hidden:
+            icon = <span class="inline-block absolute left-2 top-2 w-[2.75rem] h-[4.75rem] border-2 border-c-border-1" />;
+            break;
         case CardType.Club:
             icon = <ClubIcon class="absolute bottom-1 right-1" fill={textColor} />;
             break;
diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
index 231fdd5..27a00cd 100644
--- a/src/pages/Index.tsx
+++ b/src/pages/Index.tsx
@@ -100,7 +100,7 @@ export function Index() {
                     <Card value={4} />
                 </div>
                 <div class="inline-block rotate-6 -translate-x-2 translate-y-1 hover:-translate-y-2 transition-transform">
-                    <Card value={36} />
+                    <Card value={37} />
                 </div>
             </div>
         </div>
diff --git a/src/types/cards.ts b/src/types/cards.ts
index ede2654..7d09d7d 100644
--- a/src/types/cards.ts
+++ b/src/types/cards.ts
@@ -1,5 +1,6 @@
 
 export enum CardType {
+    Hidden,
     Club,
     Diamond,
     Heart,
@@ -20,6 +21,8 @@ const tailwindCardColors: Array<[string, string]> = [
     ["var(--card-green-bg)", "var(--card-on-green-bg)"],
     // blue
     ["var(--card-blue-bg)", "var(--card-on-blue-bg)"],
+    // gray
+    ["", ""],
 ];
 
 
@@ -30,6 +33,9 @@ const tailwindCardColors: Array<[string, string]> = [
  * @returns The type of card and its value (A, 1, 2, etc), if any
  */
 export function intToCardType(value: number): [CardType, string, [string, string]] {
+    if (value === -1) {
+        return [CardType.Hidden, "", tailwindCardColors[4]];
+    }
     switch ((value << 23) >>> 28) {
         case 0: {
             const type = ((value & 1) === 1) ? CardType.Club : CardType.Spade;