add face-down card sprite

client/public/assets/cards.json

@@ -935,13 +935,31 @@
 				"x": 0,
 				"y": 0
 			}
+		},
+		"unknown": {
+			"frame": {
+				"w": 144,
+				"h": 224,
+				"x": 1872,
+				"y": 0
+			},
+			"sourceSize": {
+				"w": 144,
+				"h": 224
+			},
+			"spriteSourceSize": {
+				"w": 144,
+				"h": 224,
+				"x": 0,
+				"y": 0
+			}
 		}
 	},
 	"meta": {
 		"image": "cards.png",
 		"format": "RGBA8888",
 		"size": {
-			"w": 1872,
+			"w": 2016,
 			"h": 896
 		},
 		"scale": 1

client/src/Card.ts

@@ -50,4 +50,5 @@ export type Card =
 	| "jackOfDiamonds"
 	| "queenOfDiamonds"
 	| "kingOfDiamonds"
-	| "aceOfDiamonds";
+	| "aceOfDiamonds"
+	| "unknown";

client/src/Hand.ts

@@ -1,24 +1,19 @@
-import { Assets, Container, Size, Sprite } from "pixi.js";
+import { Assets, Container, Sprite } from "pixi.js";
 import { Card } from "./Card";
 
 const CARD_WIDTH = 144;
-const CARD_HEIGHT = 224;
 
 const spritesheet = await Assets.load("/public/assets/cards.json");
 
 export class Hand {
 	cards: Container;
-	#containerSize: Size;
 	#offset: number;
-	#roomRemaining: number;
 
 	constructor(maxWidth: number, cards: Card[] = []) {
 		if (maxWidth < CARD_WIDTH) {
 			throw new Error("hand cannot be narrower than a single card");
 		}
 
-		this.#roomRemaining = maxWidth;
-		this.#containerSize = { width: maxWidth, height: CARD_HEIGHT };
 		this.#offset = CARD_WIDTH;
 
 		const sprites: Container = new Container();

client/src/main.ts

@@ -1,4 +1,4 @@
-import { Application, Assets, Sprite } from "pixi.js";
+import { Application } from "pixi.js";
 import { Hand } from "./Hand";
 
 (async () => {
@@ -17,6 +17,7 @@ import { Hand } from "./Hand";
 			"eightOfDiamonds",
 			"threeOfClubs",
 			"kingOfSpades",
+			"unknown",
 		]);
 
 		app.stage.addChild(hand.cards);

client/src/spritesheets/spritesheet.ts

@@ -26,7 +26,7 @@ function getCardSpritesheet() {
 		meta: {
 			image: "/public/assets/cards.png",
 			format: "RGBA8888",
-			size: { w: 1872, h: 896 },
+			size: { w: 2016, h: 896 },
 			scale: 1,
 		},
 	};
@@ -48,10 +48,10 @@ function getCardSpritesheet() {
 		"ace",
 	];
 
+	const size = { w: 144, h: 224 };
 	for (let i = 0; i < 4; i++) {
 		for (let j = 0; j < 13; j++) {
 			const cardName = `${values[j]}Of${suits[i]}`;
-			const size = { w: 144, h: 224 };
 			const position = { x: j * size.w, y: i * size.h };
 
 			spriteSheet.frames[cardName] = {
@@ -62,5 +62,11 @@ function getCardSpritesheet() {
 		}
 	}
 
+	spriteSheet.frames["unknown"] = {
+		frame: { ...size, x: size.w * 13, y: 0 },
+		sourceSize: size,
+		spriteSourceSize: { ...size, x: 0, y: 0 },
+	};
+
 	return spriteSheet;
 }