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 = ;
+ break;
+ case CardType.Diamond:
+ icon = ;
+ break;
+ case CardType.Heart:
+ icon = ;
+ break;
+ case CardType.Spade:
+ icon = ;
+ break;
+ case CardType.BlackJoker:
+ case CardType.RedJoker:
+ case CardType.BlueJoker:
+ case CardType.GreenJoker:
+ icon = ;
+ break;
+ }
+
return (
{cardValue}
-
+ {icon}
);
}
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 (
+
+ );
+}
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 (
+
+ );
+}
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 (
+
+ );
+}
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() {
+
+
+
+
+
+
+
+
+
);
}
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);