Render hidden card

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;

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>

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;