# Core

`@react-cards-opening/core` is everything about opening cards that is not a picture. It decides which card is up, what a press means at each moment, when a card counts as opened and how often a tier comes up. It depends on React and nothing else, so it runs anywhere React does.

```bash
pnpm add @react-cards-opening/core
```

## What is in it

- [useCardOpening](https://bettertyped.github.io/react-cards-opening/docs/core/use-card-opening/): The queue and the rules of a press, as a hook.
- [useCardPack](https://bettertyped.github.io/react-cards-opening/docs/core/use-card-pack/): A pack's rules: sealed, dealt, turned in any order, done.
- [useOpenedCards](https://bettertyped.github.io/react-cards-opening/docs/core/use-opened-cards/): Which cards are opened, remembered on the device.
- [Rolls and odds](https://bettertyped.github.io/react-cards-opening/docs/core/rolls/): Deal cards by tier weight, from a seed.
- [Show plan](https://bettertyped.github.io/react-cards-opening/docs/core/show-plan/): A tier's reveal as plain data.
- [Hiding places](https://bettertyped.github.io/react-cards-opening/docs/core/spots/): Where each card hides in a grid.
- [Reduced motion](https://bettertyped.github.io/react-cards-opening/docs/core/reduced-motion/): What changes for someone who asked for less.

## Why it is separate

- **Your own look.** A game with its own art direction keeps the rules and draws the reveal with Motion, CSS or a canvas. [Your own UI on core](https://bettertyped.github.io/react-cards-opening/docs/guides/own-ui-on-core/) builds one in sixty lines.
- **The server.** `rollCards` with a seed deals the same cards in Node as in the browser, so the server decides and the client only shows.
- **Tests.** The rules are a plain class with no clock. A press in a test is a method call, and nothing has to be animated to assert on it.

## How the two halves talk

The opening keeps no clock. A renderer plays the reveal and tells the opening which phase it reached (`flight`, `hum`, `turn`, `hold`, `land`). When a press means "turn now" or "send it home", the opening asks the renderer to jump through a small driver. `CardOpening` is one such renderer; yours can be another.

```ts
const detach = opening.attach({
  turn: () => timeline.play("turn"), // turn the face-down card now
  finish: () => timeline.progress(1), // send the card home now
  cancel: () => timeline.kill(), // take the reveal down
  close: () => closePeek(), // put a peeked card back
});
```

## Related

- [useCardOpening](https://bettertyped.github.io/react-cards-opening/docs/core/use-card-opening/)
- [Your own UI on core](https://bettertyped.github.io/react-cards-opening/docs/guides/own-ui-on-core/)
- [Components](https://bettertyped.github.io/react-cards-opening/docs/components/)
- [Rolls and odds](https://bettertyped.github.io/react-cards-opening/docs/core/rolls/)

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