# CardPack

`CardPack` is the pack opening card games are known for. A sealed pack floats until it is pressed, bursts, and deals its cards face down on a table. A card glows in its tier's colour under the pointer, which is the tease, and turns over when it is pressed, in any order. Done gathers them into a row.

> Live preview: see it play at https://bettertyped.github.io/react-cards-opening/docs/components/card-pack/
>
> Press the pack. Hover a card before you turn it.

## Usage

```tsx
import { useOpenedCards } from "@react-cards-opening/core";
import { CardPack } from "@react-cards-opening/ui";
import "@react-cards-opening/ui/styles.css";

function Pack({ cards }) {
  const { opened, open } = useOpenedCards("pack:42");
  return <CardPack cards={cards} opened={opened} onOpen={open} />;
}
```

`cards` is the pack, in the order it is dealt, and each card names its tier in `rarity`. What is in the pack is decided before it is opened: deal it with [rollCards](https://bettertyped.github.io/react-cards-opening/docs/core/rolls/) on your server and the tearing is only the show.

## How it lays the table

- **Five cards sit in a ring**, one at the top, the layout a pack of five is known by. Any other count sits in rows. Up to ten sit well.
- **The table is measured against the pack's own width**, with a container query, so a pack in a sidebar lays itself out like one on a phone: two or three to a row.
- **A card moves by changing two numbers.** Gathering them on Done is the same cards with new seats, and the stylesheet glides them there.

## What each tier does

Every card throws sparks as it turns. A loud tier opens rays behind itself and jolts the table. A legendary lights the whole table. On top of that each tier plays its [signature show](https://bettertyped.github.io/react-cards-opening/docs/effects/plans/), and `effects` swaps it for a set or a plan of your own.

```tsx
import { CardPack, EFFECT_SETS } from "@react-cards-opening/ui";

<CardPack cards={cards} opened={opened} onOpen={open} effects={EFFECT_SETS.radiant} />;
```

## Props

| Prop | Type | What it does |
| --- | --- | --- |
| `cards` | `readonly C[]` | The cards in the pack, in the order they are dealt. |
| `opened` | `readonly string[]` | Ids already turned over. A pack that comes back with some of them is dealt, not sealed. |
| `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 sealed pack. A question mark when left out. |
| `onDone?` | `() => void` | Every card is turned and Done was pressed. |
| `labels?` | `Partial<CardPackLabels>` | Every word the pack says, and what a screen reader hears. |
| `actions?` | `ReactNode` | Extra buttons under the table once the pack is done. |
| `renderFace?` | `(card, info) => ReactNode` | The front of a card, instead of the ready-made face. |
| `renderBack?` | `(card) => ReactNode` | The back of a card, instead of the question glyph. |
| `readingOf?` | `(card, info) => readonly string[]` | The text on a face of your own, so a card brought up close stays 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 pack's root. |
| `classNames?` | `CardPackClassNames` | A class of your own for each part. |
| `style?` | `CSSProperties` | Inline styles for the root: the place for `--rco-pack-width`. |

## Parts and variables

| Key | The library's class | The part |
| --- | --- | --- |
| `root` | `.rco-pack` | The pack's panel. The same as `className`. It carries `data-stage`. |
| `table` | `.rco-pack-table` | The table the cards are dealt on. |
| `sealed` | `.rco-pack-sealed` | The sealed pack: a button. |
| `packFlash` | `.rco-pack-flash` | The flash over the table as the pack bursts, and as a legendary turns. |
| `seat` | `.rco-pack-seat` | A card's place on the table. It carries `data-up` and `data-effect`. |
| `seatPress` | `.rco-pack-press` | The button around each card. |
| `seatRays` | `.rco-pack-rays` | The rays a loud card opens behind itself. |
| `seatBit` | `.rco-pack-bit` | Each spark a turning card throws. |
| `foot` | `.rco-pack-foot` | The row under the table: the hint and the buttons. |
| `hint` | `.rco-pack-hint` | The line that says what to do next. |
| `mainButton` | `.rco-button-main` | Done. |
| `sideButton` | `.rco-button-again` | Deal them again. |

| Variable | What it sets | When left out |
| --- | --- | --- |
| `--rco-pack-width` | The widest the table is laid out for. Past it the cards stop growing. | `880px` |
| `--rco-pack-size` | The sealed pack's width. | `min(40cqw, 180px)` |
| `--rco-panel-radius` | The corners of the pack's panel. | `28px` |

## Without the component

The rules are [useCardPack](https://bettertyped.github.io/react-cards-opening/docs/core/use-card-pack/) in the core package: sealed, dealt, done, and which cards are up. Draw the table yourself and keep the rules.

## Related

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

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