create hand with variable cards.

client/src/Hand.ts

@@ -1,21 +1,36 @@
-import { Assets, Container, Sprite } from "pixi.js";
+import { Assets, Container, Size, 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;
 
-	constructor(cards: Card[] = []) {
 		const sprites: Container = new Container();
 		sprites.position.set(0, 0);
-		sprites.height = 300;
-		sprites.width = 300;
 
+		let x = 0;
 		for (const card of cards) {
 			const sprite = new Sprite(spritesheet.textures[card]);
-			sprite.height /= 1.5;
-			sprite.width /= 1.5;
+
+			sprite.x = x;
+			x += this.#offset;
+
 			sprites.addChild(sprite);
 		}
 

client/src/main.ts

@@ -1,5 +1,5 @@
 import { Application, Assets, Sprite } from "pixi.js";
-import { Hand } from "./hand";
+import { Hand } from "./Hand";
 
 (async () => {
 	// Create a new application
@@ -12,31 +12,18 @@ import { Hand } from "./hand";
 	document.getElementById("pixi-container")!.appendChild(app.canvas);
 
 	try {
-		// Create the SpriteSheet from data and image
-		const cards = await Assets.load("/public/assets/cards.json");
+		const hand = new Hand(1000, [
+			"fourOfDiamonds",
+			"eightOfDiamonds",
+			"threeOfClubs",
+			"kingOfSpades",
+		]);
 
-		console.log(cards);
-
-		// Create a bunny Sprite
-		const bunny = new Sprite(cards.textures["fourOfHearts"]);
-
-		console.log(bunny);
-
-		// Center the sprite's anchor point
-		bunny.anchor.set(0.5);
-
-		// Move the sprite to the center of the screen
-		bunny.position.set(app.screen.width / 2, app.screen.height / 2);
-
-		bunny.height /= 1.5;
-		bunny.width /= 1.5;
-
-		// Add the bunny to the stage
-		// app.stage.addChild(bunny);
-
-		const hand = new Hand(["fourOfDiamonds"]);
 		app.stage.addChild(hand.cards);
 
+		hand.cards.position.set(app.screen.width / 2, 0);
+		hand.cards.pivot.set(hand.cards.width / 2, 0);
+
 		// Listen for animate update
 		// app.ticker.add((time) => {
 		// 	// Just for fun, let's rotate mr rabbit a little.