diff --git a/client/public/assets/cards.json b/client/public/assets/cards.json index e7fbd9c..c8af4f5 100644 --- a/client/public/assets/cards.json +++ b/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 diff --git a/client/public/assets/cards.png b/client/public/assets/cards.png index 57a30d9..3871703 100644 Binary files a/client/public/assets/cards.png and b/client/public/assets/cards.png differ diff --git a/client/src/Card.ts b/client/src/Card.ts index 8538036..de6f616 100644 --- a/client/src/Card.ts +++ b/client/src/Card.ts @@ -50,4 +50,5 @@ export type Card = | "jackOfDiamonds" | "queenOfDiamonds" | "kingOfDiamonds" - | "aceOfDiamonds"; + | "aceOfDiamonds" + | "unknown"; diff --git a/client/src/Hand.ts b/client/src/Hand.ts index 9e8e5ad..20dcd2f 100644 --- a/client/src/Hand.ts +++ b/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(); diff --git a/client/src/main.ts b/client/src/main.ts index 236e8a8..d906148 100644 --- a/client/src/main.ts +++ b/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); diff --git a/client/src/spritesheets/spritesheet.ts b/client/src/spritesheets/spritesheet.ts index 4ad2faa..7d3baa7 100644 --- a/client/src/spritesheets/spritesheet.ts +++ b/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; }