fernando/card-jong-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: fernando:08ab1cfe49ff8bf4a054b43b32da746bfd11d28a
Branches Tags
fernando:master
..
compare: fernando:c2837eeb8eb278bd52f804f9c5ccb73b471eeeee
Branches Tags
fernando:master

2 Commits
08ab1cfe49 ... c2837eeb8e

Author SHA1 Message Date
Araozu
c2837eeb8e Logic for rendering cards 2024-05-06 19:45:19 -05:00
Araozu
385340ad52 Component for a card 2024-05-06 18:32:31 -05:00
9 changed files with 195 additions and 31 deletions
Show Stats Expand all files Collapse all files

2
index.html
View File

@ -9,7 +9,7 @@
<title>Card-jong</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Marcellus&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Marcellus&family=Secular+One&display=swap" rel="stylesheet">
</head>
<body>

22
src/components/Card.tsx Normal file
View File

@ -0,0 +1,22 @@
import { intToCardType } from "../types/cards";
import { ClubIcon } from "./icons/ClubIcon";
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 relative"}
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>
);
}

7
src/components/icons/ClubIcon.tsx Normal file
View File

@ -0,0 +1,7 @@
export function ClubIcon(props: {class: string, fill: string}) {
return (
<svg class={props.class} width="32" height="32" fill={props.fill} viewBox="0 0 256 256">
<path d="M184,88c-.78,0-1.56,0-2.33,0a56,56,0,1,0-107.34,0c-.78,0-1.55,0-2.33,0A56,56,0,1,0,96.54,194.35l-8.2,27.35A8,8,0,0,0,96,232h64a8,8,0,0,0,7.66-10.3l-8.2-27.35A56,56,0,1,0,184,88Zm0,96a40,40,0,0,1-33.4-18,8,8,0,0,0-14.33,6.71l13,43.26h-42.5l13-43.26A8,8,0,0,0,105.4,166a40,40,0,1,1-19.93-59.71,8,8,0,0,0,9.33-12,40,40,0,1,1,66.4,0,8,8,0,0,0,9.33,12A40,40,0,1,1,184,184Z" />
</svg>
);
}

25
src/components/icons/JokerIcon.tsx Normal file
View File

@ -0,0 +1,25 @@
export function JokerIcon(props: {class: string, fill: string}) {
return (
/*
<svg class={props.class} x="0" y="0" width="50" height="50" viewBox="0 0 172 172" fill={props.fill}>
<g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none" /><g fill="#1fb141"><path d="M21.5,21.5v129h64.5v-32.25v-64.5v-32.25zM86,53.75c0,17.7805 14.4695,32.25 32.25,32.25c17.7805,0 32.25,-14.4695 32.25,-32.25c0,-17.7805 -14.4695,-32.25 -32.25,-32.25c-17.7805,0 -32.25,14.4695 -32.25,32.25zM118.25,86c-17.7805,0 -32.25,14.4695 -32.25,32.25c0,17.7805 14.4695,32.25 32.25,32.25c17.7805,0 32.25,-14.4695 32.25,-32.25c0,-17.7805 -14.4695,-32.25 -32.25,-32.25z" /></g></g>
</svg>*/
<svg fill={props.fill}
width="40" height="40"
class={props.class}
viewBox="0 0 29.904 29.904"
>
<path d="M28.405,14.7c-0.479,0-0.897,0.228-1.172,0.576c-1.56-1.127-4.992-2.994-7.975-0.271c0,0-3.021-4.168-0.982-7.569
c0.246,0.178,0.547,0.286,0.875,0.286c0.827,0,1.5-0.671,1.5-1.5s-0.673-1.5-1.5-1.5c-0.828,0-1.502,0.671-1.502,1.5
c0,0.168,0.032,0.327,0.084,0.478c-2.141,0.819-5.836,2.858-6.39,7.307c0,0-3.429-4.541-8.573-1.594
c-0.265-0.425-0.732-0.711-1.27-0.711c-0.829,0-1.501,0.672-1.501,1.5s0.672,1.5,1.501,1.5c0.828,0,1.499-0.672,1.499-1.5
c0-0.047-0.01-0.091-0.014-0.137c1.794,0.14,4.67,1.726,5.461,10.151l0.09,0.688c0,0.707,2.858,1.279,6.382,1.279
c3.526,0,6.383-0.574,6.383-1.279c0,0,0.229-5.78,5.611-7.623c0.041,0.791,0.688,1.423,1.491,1.423c0.83,0,1.5-0.673,1.5-1.5
C29.907,15.371,29.235,14.7,28.405,14.7z"
/>
</svg>
);
}

30
src/index.css
View File

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

18
src/pages/Index.tsx
View File

@ -1,11 +1,12 @@
import { A } from "@solidjs/router";
import { createSignal, onMount, Show } from "solid-js";
import { backend, UserInfo } from "../utils";
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("");
@ -91,15 +92,12 @@ export function Index() {
Go to game rules
</A>
</div>
</div>
);
}
function Registration() {
return (
<div>
:D
<div class="h-16" />
<div class="text-center">
<Card value={38} />
<Card value={4} />
<Card value={36} />
</div>
</div>
);
}

73
src/types/cards.ts Normal file
View File

@ -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}`);
}
}
}

18
tailwind.config.js
View File

@ -1,18 +0,0 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {
colors: {
"c-bg": "var(--c-bg)",
"c-on-bg": "var(--c-on-bg)",
"c-bg-2": "var(--c-bg-2)",
"c-border-1": "var(--c-border-1)",
},
},
},
plugins: [],
};

29
tailwind.config.mjs Normal file
View File

@ -0,0 +1,29 @@
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {
colors: {
"c-bg": "var(--c-bg)",
"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'"],
},
},
},
plugins: [],
};