diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index 188757c..e9668bd 100644
--- a/src/components/Card.tsx
+++ b/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 (
-
+
- 1
+ {cardValue}
-
+
);
}
+
+
diff --git a/src/index.css b/src/index.css
index 2834f56..3b49589 100644
--- a/src/index.css
+++ b/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;
-}
+}
\ No newline at end of file
diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
index 2a6e3ec..46b9662 100644
--- a/src/pages/Index.tsx
+++ b/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
(null);
+ const [userInfo] = createSignal(null);
const [error, setError] = createSignal("");
const [username, setUsername] = createSignal("");
@@ -94,9 +94,9 @@ export function Index() {