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.
pnpm add @react-cards-opening/coreWhat is in it
- useCardOpeningThe queue and the rules of a press, as a hook.
- useCardPackA pack's rules: sealed, dealt, turned in any order, done.
- useOpenedCardsWhich cards are opened, remembered on the device.
- Rolls and oddsDeal cards by tier weight, from a seed.
- Show planA tier's reveal as plain data.
- Hiding placesWhere each card hides in a grid.
- Reduced motionWhat 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 builds one in sixty lines.
- The server.
rollCardswith 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.
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
});