# CardCase

`CardCase` is a chest of cards. It stirs while it waits. Opened, it shakes, the lid lifts, light and sparks pour out, and the cards come out of it one after another, each through the [reveal](https://bettertyped.github.io/react-cards-opening/docs/components/card-opening/), each landing on its place on the shelf below. The plate on the front and the light inside take the colour of whatever is coming out next.

> Live preview: see it play at https://bettertyped.github.io/react-cards-opening/docs/components/card-case/
>
> Press the case, or the button. Take all skips the show.

## Usage

```tsx
import { useOpenedCards } from "@react-cards-opening/core";
import { CardCase, GLYPHS } from "@react-cards-opening/ui";

function Chest({ cards }) {
  const { opened, open } = useOpenedCards("chest:42");
  return <CardCase cards={cards} opened={opened} onOpen={open} emblem={GLYPHS.crown} />;
}
```

## Props

| Prop | Type | What it does |
| --- | --- | --- |
| `cards` | `readonly C[]` | What is in the case, in the order it comes out. |
| `opened` | `readonly string[]` | Ids already out of the case. |
| `onOpen` | `(id: string) => void` | A card was turned face up for the first time. |
| `theme?` | `CardTheme` | The colours. `moss` in the dark when left out. |
| `rarities?` | `readonly RarityTier[]` | Your tiers. The six defaults when left out. |
| `emblem?` | `PixelArt` | The glyph on the front of the case. |
| `actions?` | `ReactNode` | Extra buttons in the header, next to the open button. |
| `onRunChange?` | `(running: boolean) => void` | The case started giving up its cards, or came to rest. |
| `labels?` | `Partial<CardCaseLabels>` | Every word in the panel. |
| `landing?` | `(card) => HTMLElement \| null` | Where a card lands, instead of its place on the shelf here. |
| `renderFace?` | `(card, info) => ReactNode` | The front of the card, instead of the ready-made face. |
| `renderBack?` | `(card) => ReactNode` | The back of the card. |
| `readingOf?` | `(card, info) => readonly string[]` | The text on a face of your own, so the card stays up long enough to read. |
| `effects?` | `EffectPlan \| false` | What each tier plays on top of the card's own reveal. The [signature shows](https://bettertyped.github.io/react-cards-opening/docs/effects/plans/) when left out, `false` for none. |
| `className?` | `string` | A class for the panel. |
| `classNames?` | `CardCaseClassNames` | A class of your own for each part: the panel's, the case's, the shelf's and the reveal's. |
| `style?` | `CSSProperties` | Inline styles for the panel. |

## LootCase on its own

The box is its own component. `LootCase` draws the case and, through its handle, opens it: `open` plays the lid and the light and hands back what `launch` on `CardOpening` takes, so a card comes out of the gap under the lid. `close` puts the lid back.

```tsx
import { CardOpening, LootCase, type LootCaseHandle } from "@react-cards-opening/ui";

const chest = useRef<LootCaseHandle>(null);

<LootCase handle={chest} tone={toneOfNextCard} onPress={() => hunt.start()} />
<CardOpening opening={hunt.opening} launch={(card, show) => chest.current?.open(show) ?? null} />
```

| Prop | Type | What it does |
| --- | --- | --- |
| `theme?` | `CardTheme` | The colours. |
| `tone?` | `string` | The colour of the plate and of the light inside: the tier of what comes out next. |
| `emblem?` | `PixelArt` | The glyph on the front. |
| `idle?` | `boolean` | Stirs now and then while shut. On when left out. |
| `onPress?` | `() => void` | Makes the whole case a button. |
| `disabled?` | `boolean` | The case cannot be pressed. |
| `label?` | `string` | What a screen reader calls the press. |
| `shortcut?` | `boolean` | The press repeats a button next to the case: keep it for the pointer and out of the tab order. |
| `handle?` | `Ref<LootCaseHandle>` | `open(show, { flash })` and `close()`. |
| `className?` | `string` | A class for the case's root. |
| `classNames?` | `LootCaseClassNames` | A class of your own for each part of the case. |
| `style?` | `CSSProperties` | Inline styles for the root: the place for `--rco-case-size`. |

## Parts and variables

| Key | The library's class | The part |
| --- | --- | --- |
| `case` | `.rco-case` | The case's root. `className` on a `LootCase` used alone. |
| `box` | `.rco-case-box` | The lid and the body together: what shakes. |
| `lid` | `.rco-case-lid` | The lid. |
| `body` | `.rco-case-body` | The body, with the emblem on it. |
| `latch` | `.rco-case-latch` | The plate on the front. It wears the colour of what comes out next. |
| `glow` | `.rco-case-glow` | The light that pours out of the open case. |
| `caseRays` | `.rco-case-rays` | The wheel of rays behind an open case. |
| `caseBit` | `.rco-case-bit` | Each spark thrown as the lid lifts. |

| Key | The library's class | The part |
| --- | --- | --- |
| `shelf` | `.rco-shelf` | The row of places under the case. |
| `slot` | `.rco-shelf-slot` | Each place: a button holding the card that lands there. |

| Key | The library's class | The part |
| --- | --- | --- |
| `root` | `.rco-panel` | The panel. The same as `className`. |
| `flash` | `.rco-panel-flash` | The flash over the whole panel on a loud card. |
| `head` | `.rco-panel-head` | The row that holds the words and the buttons. |
| `headline` | `.rco-panel-headline` | The headline. |
| `subline` | `.rco-panel-subline` | The line under it. |
| `actions` | `.rco-panel-actions` | The buttons' row. |
| `mainButton` | `.rco-button-main` | The main button: Spin, or Open the case. |
| `sideButton` | `.rco-button-skip` | Take all during a run, and the replay button after it. |
| `finds` | `.rco-finds` | The list of badges. |
| `badge` | `.rco-badge` | Each badge, won or not. A won one is a `button`. |
| `badgeArt` | `.rco-badge-art` | The little glyph's box in a badge. |
| `badgeName` | `.rco-badge-name` | The card's name in a badge. |
| `badgeWhere` | `.rco-badge-where` | The second line of a badge. |

| Variable | What it sets | When left out |
| --- | --- | --- |
| `--rco-case-size` | The case's width. Everything on it scales with this. | `220px` |

## Related

- [CardOpening](https://bettertyped.github.io/react-cards-opening/docs/components/card-opening/)
- [CardPack](https://bettertyped.github.io/react-cards-opening/docs/components/card-pack/)
- [CardSpin](https://bettertyped.github.io/react-cards-opening/docs/components/card-spin/)
- [Effect plans](https://bettertyped.github.io/react-cards-opening/docs/effects/plans/)
- [Styling by hand](https://bettertyped.github.io/react-cards-opening/docs/guides/styling/)

Source: https://bettertyped.github.io/react-cards-opening/docs/components/card-case/