Add animation to cards in homepage

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,15 +12,37 @@ 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"}
+        <button class={"inline-block w-16 h-24 border-2 border-c-border-1 relative select-none"}
             style={{"color": textColor, "background-color": bgColor}}
         >
             <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} />
-        </div>
+            {icon}
+        </button>
     );
 }
 

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>
+    );
+}

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>
+    );
+}

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>
+    );
+}

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;
 }
 

src/pages/Index.tsx

@@ -92,11 +92,16 @@ export function Index() {
                     Go to game rules
                 </A>
             </div>
-            <div class="h-16" />
-            <div class="text-center">
-                <Card value={38} />
-                <Card value={4} />
-                <Card value={36} />
+            <div class="text-center py-8">
+                <div class="inline-block -rotate-6 translate-x-2 translate-y-1 hover:-translate-y-2 transition-transform">
+                    <Card value={38} />
+                </div>
+                <div class="inline-block hover:-translate-y-2 transition-transform">
+                    <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} />
+                </div>
             </div>
         </div>
     );

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);