cards render well

Makefile

@@ -5,6 +5,7 @@ build:
 		--cache-from=type=local,src=/var/cache/docker-build \
   		--cache-to=type=local,dest=/var/cache/docker-build \
 		--platform linux/arm64 \
+		--progress=plain \
   		--tag games .
 
 

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "games",
 	"type": "module",
-	"version": "0.0.1",
+	"version": "0.0.2",
 	"scripts": {
 		"dev": "vinxi dev",
 		"build": "vinxi build",

src/app.css

@@ -50,3 +50,7 @@ body::before {
 	bottom: 0;
 	right: 0;
 }
+
+.clear {
+	pointer-events: none;
+}

src/app.tsx

@@ -5,8 +5,16 @@ import { Suspense } from "solid-js";
 import pkg from "~/../package.json";
 
 const Version = () => (
-	<div class="full free">
-		<span style={{ margin: "5px", "font-size": "0.8rem" }} class="fixed-br">
+	<div class="full free clear">
+		<span
+			style={{
+				margin: "5px",
+				"font-size": "0.8rem",
+				"font-family": "monospace",
+				"pointer-events": "all",
+			}}
+			class="fixed-br"
+		>
 			v{pkg.version}
 		</span>
 	</div>

src/components/Card.tsx

@@ -1,8 +1,25 @@
 import { Component, createResource, Suspense } from "solid-js";
+import { Card } from "../types/cards";
 
-export default (() => {
+const cardToSvgFilename = (card: Card) => {
+	if (card.kind == "joker") {
+		return `JOKER-${card.color == "black" ? "2" : "3"}`;
+	}
+
+	const value =
+		{ ace: 1, jack: 11, queen: 12, king: 13 }[card.rank] ??
+		(card.rank as number);
+	return `${card.suit.toUpperCase()}-${value}${
+		value >= 11 ? "-" + (card.rank as string).toUpperCase() : ""
+	}`;
+};
+
+export default ((props) => {
 	const [svgPath] = createResource(
-		() => import(`~/../assets/views/cards/CLUB-1.svg`)
+		() =>
+			import(
+				`~/../assets/views/cards/${cardToSvgFilename(props.card)}.svg`
+			)
 	);
 
 	return (
@@ -10,4 +27,4 @@ export default (() => {
 			<img src={svgPath()?.default} />
 		</Suspense>
 	);
-}) satisfies Component;
+}) satisfies Component<{ card: Card }>;

src/components/Game.tsx

@@ -8,7 +8,7 @@ export default () => {
 			style={{ "row-gap": "20px", "font-size": "32px" }}
 		>
 			games
-			<Card />
+			<Card card={{ kind: "joker", color: "red" }} />
 			coming soon
 		</div>
 	);

src/types/cards.ts

@@ -1,9 +1,13 @@
-export type Suit = "hearts" | "diamonds" | "spades" | "clubs";
+export type Suit = "heart" | "diamond" | "spade" | "club";
 
-export type Card = {
-	suit: Suit;
-	value: number;
-};
+type Rank = number | "jack" | "queen" | "king" | "ace";
+export type Card =
+	| {
+			kind: "normal";
+			suit: Suit;
+			rank: Rank;
+	  }
+	| { kind: "joker"; color: "red" | "black" };
 
 export type Pile = Card[];
 export type Stack = Card[];