Logic for rendering cards

src/components/Card.tsx

@@ -1,13 +1,22 @@
+import { intToCardType } from "../types/cards";
 import { ClubIcon } from "./icons/ClubIcon";
-import { JokerIcon } from "./icons/JokerIcon";
 
-export function Card() {
+export function Card(props: {value: number}) {
+    const value = props.value;
+
+    const [cardType, cardValue, [bgColor, textColor]] = intToCardType(value);
+    console.log(cardType, cardValue, bgColor, textColor);
+
     return (
-        <div class="inline-block w-16 h-24 border-2 border-c-border-1 bg-black text-white relative">
+        <div class={"inline-block w-16 h-24 border-2 border-c-border-1 relative"}
+            style={{"color": textColor, "background-color": bgColor}}
+        >
             <span class="absolute top-1 left-1 font-bold text-4xl font-sans-serif">
-                1
+                {cardValue}
             </span>
-            <ClubIcon class="absolute bottom-1 right-1" fill="white" />
+            <ClubIcon class="absolute bottom-1 right-1" fill={textColor} />
         </div>
     );
 }
+
+

src/index.css

@@ -2,13 +2,32 @@
 @tailwind components;
 @tailwind utilities;
 
+/* General colors */
+:root {
+    --green-1: #22c55e;
+    --red-1: red;
+    --blue-1: blue;
+    --black-1: black;
+}
+
+/* Dark theme colors */
 :root {
     --c-bg: #151515;
     --c-on-bg: white;
 
     --c-bg-2: #202020;
 
-    --c-border-1: #a0a0a0
+    --c-border-1: #a0a0a0;
+
+    /* Card colors */
+    --card-green-bg: var(--green-1);
+    --card-on-green-bg: white;
+    --card-red-bg: var(--red-1);
+    --card-on-red-bg: white;
+    --card-blue-bg: var(--blue-1);
+    --card-on-blue-bg: white;
+    --card-black-bg: black;
+    --card-on-black-bg: white;
 }
 
 @media (prefers-color-scheme: light) {
@@ -16,6 +35,15 @@
         --c-bg: #f0f0f0;
         --c-on-bg: black;
         --c-bg-2: white;
+        /* Card colors */
+        --card-on-green-bg: var(--green-1);
+        --card-green-bg: white;
+        --card-on-red-bg: var(--red-1);
+        --card-red-bg: white;
+        --card-on-blue-bg: var(--blue-1);
+        --card-blue-bg: white;
+        --card-on-black-bg: black;
+        --card-black-bg: white;
     }
 }
 
@@ -23,4 +51,4 @@ body {
     background-color: var(--c-bg);
     color: var(--c-on-bg);
     font-family: "Marcellus", serif;
-}
+}

src/pages/Index.tsx

@@ -6,7 +6,7 @@ import { Card } from "../components/Card";
 
 export function Index() {
     const [loading, setLoading] = createSignal(false);
-    const [userInfo, setUserInfo] = createSignal<UserInfo | null>(null);
+    const [userInfo] = createSignal<UserInfo | null>(null);
     const [error, setError] = createSignal("");
     const [username, setUsername] = createSignal("");
 
@@ -94,9 +94,9 @@ export function Index() {
             </div>
             <div class="h-16" />
             <div class="text-center">
-                <Card />
-                <Card />
-                <Card />
+                <Card value={38} />
+                <Card value={4} />
+                <Card value={36} />
             </div>
         </div>
     );

src/types/cards.ts

@@ -0,0 +1,73 @@
+
+export enum CardType {
+    Club,
+    Diamond,
+    Heart,
+    Spade,
+    King, Queen, Jack,
+    RedJoker,
+    GreenJoker,
+    BlackJoker,
+    BlueJoker,
+}
+
+const tailwindCardColors: Array<[string, string]> = [
+    // black
+    ["var(--card-black-bg)", "var(--card-on-black-bg)"],
+    // red
+    ["var(--card-red-bg)", "var(--card-on-red-bg)"],
+    // green
+    ["var(--card-green-bg)", "var(--card-on-green-bg)"],
+    // blue
+    ["var(--card-blue-bg)", "var(--card-on-blue-bg)"],
+];
+
+
+/**
+ * Cards are encoded as integers, and their types and values depend of their bits:
+ *
+ * @param value number that encodes the card value
+ * @returns The type of card and its value (A, 1, 2, etc), if any
+ */
+export function intToCardType(value: number): [CardType, string, [string, string]] {
+    switch ((value << 23) >>> 28) {
+        case 0: {
+            const type = ((value & 1) === 1) ? CardType.Club : CardType.Spade;
+            let number = ((value << 27) >>> 28).toString();
+            if (number === "1") {
+                number = "A";
+            }
+
+            return [type, number, tailwindCardColors[0]];
+        }
+        case 1: {
+            const type = ((value & 1) === 1) ? CardType.Heart : CardType.Diamond;
+            let number = ((value << 27) >>> 28).toString();
+            if (number === "1") {
+                number = "A";
+            }
+
+            return [type, number, tailwindCardColors[1]];
+        }
+        case 2:
+            return [CardType.BlackJoker,"", tailwindCardColors[0]];
+        case 3:
+            return [CardType.RedJoker, "", tailwindCardColors[1]];
+        case 4:
+            return [CardType.GreenJoker,"", tailwindCardColors[2]];
+        case 5:
+            return [CardType.BlueJoker,"", tailwindCardColors[3]];
+        case 6:
+            return [CardType.Jack,"", tailwindCardColors[2]];
+        case 7:
+            return [CardType.Queen,"", tailwindCardColors[2]];
+        case 8:
+            return [CardType.King,"", tailwindCardColors[2]];
+        default:
+        {
+            console.error("Encountered a badly encoded card: ", value);
+            throw new Error(`Badly encoded card value: ${value}`);
+        }
+    }
+}
+

tailwind.config.mjs

@@ -1,5 +1,5 @@
 /** @type {import('tailwindcss').Config} */
-module.exports = {
+export default {
     content: [
         "./src/**/*.{js,jsx,ts,tsx}",
     ],
@@ -10,6 +10,14 @@ module.exports = {
                 "c-on-bg": "var(--c-on-bg)",
                 "c-bg-2": "var(--c-bg-2)",
                 "c-border-1": "var(--c-border-1)",
+                "card-black-bg": "var(--card-black-bg)",
+                "card-on-black-bg": "var(--card-on-black-bg)",
+                "card-blue-bg": "var(--card-blue-bg)",
+                "card-on-blue-bg": "var(--card-on-blue-bg)",
+                "card-red-bg": "var(--card-red-bg)",
+                "card-on-red-bg": "var(--card-on-red-bg)",
+                "card-green-bg": "var(--card-green-bg)",
+                "card-on-green-bg": "var(--card-on-green-bg)",
             },
             fontFamily: {
                 "sans-serif": ["'Secular One'", "'sans-serif'"],