Files
tts-workshop/apps/web/src/components/viewers/CardViewer.tsx
T

35 lines
1.5 KiB
TypeScript

import type { TTSObject } from '@tts/shared';
import Scene from './Scene';
import { CardObjectMesh } from './CardMesh';
/**
* A playing card: a thin rounded rect with the face texture on the front and
* the back texture on the rear. Covers `Card`/`Deck`/`DeckCustom`/`Custom_Deck`
* (via `CustomDeck` face/back URLs) and `CardCustom` (via `CustomImage`).
*
* A deck image is a sheet divided into a `NumWidth` x `NumHeight` grid of
* sprites. The card footprint is sized to a single sprite's aspect ratio, and
* the face material uses UV offset/scaling to show the sprite selected by
* `CardID`. The corners stay circular because the rounded rect is built from
* the final width/height rather than scaling a square.
*
* `CardID` encodes the deck index in the hundreds place and the 1-based card
* number in the last two digits (e.g. 354 -> deck 3, card 54). The deck config
* (grid, face/back URLs) is resolved from the containing deck object's
* `CustomDeck[deckIndex]`, since a card's own `CustomDeck` may be keyed
* differently or absent.
*
* The back is treated like a tile (a single full image) unless the deck has
* `UniqueBack`, in which case it is a sheet too and gets the same sprite cell.
* It is flipped left/right so it isn't mirrored when viewed from the back of
* the card.
*/
export default function CardViewer({ object }: { object: TTSObject }) {
return (
<Scene>
<CardObjectMesh object={object} />
</Scene>
);
}
export { CardObjectMesh, CardMesh } from './CardMesh';