# useCardPack

`useCardPack` is a pack of cards without a look. Where [useCardOpening](https://bettertyped.github.io/react-cards-opening/docs/core/use-card-opening/) shows one card at a time, a pack puts every card on the table at once and lets the viewer turn them over in any order. The hook keeps the stage and which cards are up. [CardPack](https://bettertyped.github.io/react-cards-opening/docs/components/card-pack/) is this hook with a table drawn around it.

## Usage

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

function Pack({ cards }) {
  const { opened, open } = useOpenedCards("pack:42");
  const pack = useCardPack({ cards, opened, onOpen: open });

  if (pack.stage === "sealed") return <button onClick={pack.tear}>Open the pack</button>;

  return (
    <>
      {cards.map((card) => (
        <button key={card.id} onClick={() => pack.flip(card.id)}>
          {pack.isUp(card.id) ? card.name : "?"}
        </button>
      ))}
      {pack.allUp && pack.stage === "dealt" ? <button onClick={pack.finish}>Done</button> : null}
    </>
  );
}
```

## The three stages

| Stage | What is on the table | How it moves on |
| --- | --- | --- |
| `sealed` | The pack, unopened. | `tear()` deals the cards face down. |
| `dealt` | Every card, face down until turned. | `flip(id)` turns one. `finish()` works once all are up. |
| `done` | Every card, face up and gathered. | `reset()` seals the pack to deal the same cards again. |

The stage a pack starts in follows from `opened`. None of its cards opened is a sealed pack. Some of them is a pack somebody walked away from: it comes back dealt, with those cards up. All of them is done.

## What it answers

| Field | Type | What it is |
| --- | --- | --- |
| `stage` | `"sealed" \| "dealt" \| "done"` | Where the pack is. |
| `isUp` | `(id: string) => boolean` | Whether a card is face up. |
| `left` | `readonly C[]` | Cards still face down. |
| `allUp` | `boolean` | Every card is turned: the pack can be finished. |
| `replay` | `boolean` | This deal is a replay: turning cards opens nothing. |
| `tear` | `() => void` | Opens the sealed pack. |
| `flip` | `(id: string) => void` | Turns one card over. Ignored unless the pack is dealt and the card is down. |
| `finish` | `() => void` | Gathers the cards up. Ignored until every card is turned. |
| `reset` | `() => void` | Seals the pack again. |

## Replays

`onOpen` is called once a card, the first time it is turned. After `reset`, the same cards are dealt face down again and `replay` is true: they can be turned over to watch, and nothing is opened twice.

## Related

- [CardPack](https://bettertyped.github.io/react-cards-opening/docs/components/card-pack/)
- [useCardOpening](https://bettertyped.github.io/react-cards-opening/docs/core/use-card-opening/)
- [useOpenedCards](https://bettertyped.github.io/react-cards-opening/docs/core/use-opened-cards/)
- [Rolls and odds](https://bettertyped.github.io/react-cards-opening/docs/core/rolls/)

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