Compare commits
2 Commits
08ab1cfe49
...
c2837eeb8e
| Author | SHA1 | Date | |
|---|---|---|---|
| c2837eeb8e | |||
| 385340ad52 |
@ -9,7 +9,7 @@
|
|||||||
<title>Card-jong</title>
|
<title>Card-jong</title>
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<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>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
22
src/components/Card.tsx
Normal file
22
src/components/Card.tsx
Normal 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
7
src/components/icons/ClubIcon.tsx
Normal 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
25
src/components/icons/JokerIcon.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -2,13 +2,32 @@
|
|||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
|
/* General colors */
|
||||||
|
:root {
|
||||||
|
--green-1: #22c55e;
|
||||||
|
--red-1: red;
|
||||||
|
--blue-1: blue;
|
||||||
|
--black-1: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dark theme colors */
|
||||||
:root {
|
:root {
|
||||||
--c-bg: #151515;
|
--c-bg: #151515;
|
||||||
--c-on-bg: white;
|
--c-on-bg: white;
|
||||||
|
|
||||||
--c-bg-2: #202020;
|
--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) {
|
@media (prefers-color-scheme: light) {
|
||||||
@ -16,6 +35,15 @@
|
|||||||
--c-bg: #f0f0f0;
|
--c-bg: #f0f0f0;
|
||||||
--c-on-bg: black;
|
--c-on-bg: black;
|
||||||
--c-bg-2: white;
|
--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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,11 +1,12 @@
|
|||||||
import { A } from "@solidjs/router";
|
import { A } from "@solidjs/router";
|
||||||
import { createSignal, onMount, Show } from "solid-js";
|
import { createSignal, onMount, Show } from "solid-js";
|
||||||
import { backend, UserInfo } from "../utils";
|
import { backend, UserInfo } from "../utils";
|
||||||
|
import { Card } from "../components/Card";
|
||||||
|
|
||||||
|
|
||||||
export function Index() {
|
export function Index() {
|
||||||
const [loading, setLoading] = createSignal(false);
|
const [loading, setLoading] = createSignal(false);
|
||||||
const [userInfo, setUserInfo] = createSignal<UserInfo | null>(null);
|
const [userInfo] = createSignal<UserInfo | null>(null);
|
||||||
const [error, setError] = createSignal("");
|
const [error, setError] = createSignal("");
|
||||||
const [username, setUsername] = createSignal("");
|
const [username, setUsername] = createSignal("");
|
||||||
|
|
||||||
@ -91,15 +92,12 @@ export function Index() {
|
|||||||
Go to game rules
|
Go to game rules
|
||||||
</A>
|
</A>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="h-16" />
|
||||||
);
|
<div class="text-center">
|
||||||
}
|
<Card value={38} />
|
||||||
|
<Card value={4} />
|
||||||
|
<Card value={36} />
|
||||||
function Registration() {
|
</div>
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
:D
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
73
src/types/cards.ts
Normal file
73
src/types/cards.ts
Normal 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}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@ -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
29
tailwind.config.mjs
Normal 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: [],
|
||||||
|
};
|
||||||
|
|
||||||
Loading…
Reference in New Issue
Block a user