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

Compare commits

base: fernando:0e3926c7408288fb4182f339f34707578609ff6b
Branches Tags
fernando:master
..
compare: fernando:c2837eeb8eb278bd52f804f9c5ccb73b471eeeee
Branches Tags
fernando:master

No commits in common. "0e3926c7408288fb4182f339f34707578609ff6b" and "c2837eeb8eb278bd52f804f9c5ccb73b471eeeee" have entirely different histories.
0e3926c740 ... c2837eeb8e

7 changed files with 15 additions and 68 deletions
Show Stats Expand all files Collapse all files

35
src/components/Card.tsx
View File

@ -1,10 +1,5 @@
import { CardType, intToCardType } from "../types/cards";
import { 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;
@ -12,37 +7,15 @@ 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 = <ClubIcon class="absolute bottom-1 right-1" fill={textColor} />;
break;
case CardType.Diamond:
icon = <DiamondIcon class="absolute bottom-1 right-1" fill={textColor} />;
break;
case CardType.Heart:
icon = <HeartIcon class="absolute bottom-1 right-1" fill={textColor} />;
break;
case CardType.Spade:
icon = <SpadeIcon class="absolute bottom-1 right-1" fill={textColor} />;
break;
case CardType.BlackJoker:
case CardType.RedJoker:
case CardType.BlueJoker:
case CardType.GreenJoker:
icon = <JokerIcon class="absolute left-2 top-6" fill={textColor} />;
break;
}
return (
<button class={"inline-block w-16 h-24 border-2 border-c-border-1 relative select-none"}
<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>
{icon}
</button>
<ClubIcon class="absolute bottom-1 right-1" fill={textColor} />
</div>
);
}

7
src/components/icons/DiamondIcon.tsx
View File

@ -1,7 +0,0 @@
export function DiamondIcon(props: {class: string, fill: string}) {
return (
<svg class={props.class} width="32" height="32" fill={props.fill} viewBox="0 0 256 256">
<path d="M235.33,116.72,139.28,20.66a16,16,0,0,0-22.56,0l-96,96.06a16,16,0,0,0,0,22.56l96.05,96.06h0a16,16,0,0,0,22.56,0l96.05-96.06a16,16,0,0,0,0-22.56ZM128,224h0L32,128,128,32,224,128Z" />
</svg>
);
}

7
src/components/icons/HeartIcon.tsx
View File

@ -1,7 +0,0 @@
export function HeartIcon(props: {class: string, fill: string}) {
return (
<svg class={props.class} width="32" height="32" fill={props.fill} viewBox="0 0 256 256">
<path d="M178,40c-20.65,0-38.73,8.88-50,23.89C116.73,48.88,98.65,40,78,40a62.07,62.07,0,0,0-62,62c0,70,103.79,126.66,108.21,129a8,8,0,0,0,7.58,0C136.21,228.66,240,172,240,102A62.07,62.07,0,0,0,178,40ZM128,214.8C109.74,204.16,32,155.69,32,102A46.06,46.06,0,0,1,78,56c19.45,0,35.78,10.36,42.6,27a8,8,0,0,0,14.8,0c6.82-16.67,23.15-27,42.6-27a46.06,46.06,0,0,1,46,46C224,155.61,146.24,204.15,128,214.8Z" />
</svg>
);
}

7
src/components/icons/SpadeIcon.tsx
View File

@ -1,7 +0,0 @@
export function SpadeIcon(props: {class: string, fill: string}) {
return (
<svg class={props.class} width="32" height="32" fill={props.fill} viewBox="0 0 256 256">
<path d="M131.58,16.85a8,8,0,0,0-7.16,0C120.32,18.9,24,67.84,24,136a56,56,0,0,0,74.15,53L88.34,221.7A8,8,0,0,0,96,232h64a8,8,0,0,0,7.66-10.3L157.85,189A56,56,0,0,0,232,136C232,67.84,135.68,18.9,131.58,16.85ZM176,176a40,40,0,0,1-26.29-9.85,8,8,0,0,0-12.92,8.33L149.25,216h-42.5l12.46-41.52a8,8,0,0,0-12.92-8.33A40,40,0,0,1,40,136c0-29.88,24.41-56.55,44.89-73.66A279.13,279.13,0,0,1,128,33.06a279.13,279.13,0,0,1,43.11,29.28C208.21,93.34,216,119.51,216,136A40,40,0,0,1,176,176Z" />
</svg>
);
}

6
src/index.css
View File

@ -4,9 +4,9 @@
/* General colors */
:root {
--green-1: #16a34a;
--red-1: #dc2626;
--blue-1: #0284c7;
--green-1: #22c55e;
--red-1: red;
--blue-1: blue;
--black-1: black;
}

15
src/pages/Index.tsx
View File

@ -92,16 +92,11 @@ export function Index() {
Go to game rules
</A>
</div>
<div class="text-center py-8">
<div class="inline-block -rotate-6 translate-x-2 translate-y-1 hover:-translate-y-2 transition-transform">
<Card value={38} />
</div>
<div class="inline-block hover:-translate-y-2 transition-transform">
<Card value={4} />
</div>
<div class="inline-block rotate-6 -translate-x-2 translate-y-1 hover:-translate-y-2 transition-transform">
<Card value={36} />
</div>
<div class="h-16" />
<div class="text-center">
<Card value={38} />
<Card value={4} />
<Card value={36} />
</div>
</div>
);

6
src/types/cards.ts
View File

@ -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,"J", tailwindCardColors[2]];
return [CardType.Jack,"", tailwindCardColors[2]];
case 7:
return [CardType.Queen,"Q", tailwindCardColors[2]];
return [CardType.Queen,"", tailwindCardColors[2]];
case 8:
return [CardType.King,"K", tailwindCardColors[2]];
return [CardType.King,"", tailwindCardColors[2]];
default:
{
console.error("Encountered a badly encoded card: ", value);