useOpenedCards
useOpenedCards is the list of opened card ids, kept in local storage under a key you choose. It is the simplest thing to hand useCardOpening when the cards are not worth a database row. Every read and write fails soft: at worst a card can be opened again, it can never change.
Usage
import { useCardOpening, useOpenedCards } from "@react-cards-opening/core";
const { opened, open, reset, ready } = useOpenedCards(`deal:${userId}:${dealtAt}`);
const hunt = useCardOpening({ cards, opened, onOpen: open });Key it by the deal
The key should change when the cards do: who they are for, and when they were dealt. A new deal then starts unopened without anything being cleared. Pass null for a deal that should be forgotten on reload, like a demo.
What it returns
| Field | Type | What it is |
|---|---|---|
opened | readonly string[] | Ids opened so far, in the order they were opened. |
open | (id: string) => void | Marks one opened. Safe to call twice. |
reset | () => void | Forgets all of them, here and in storage. |
ready | boolean | False until storage has been read. |
Wait for ready
Storage is read in a layout effect, before the first paint. A page that shows unopened cards first should still wait for ready, or someone who opened everything last week sees the unopened state on the server's HTML.
if (!ready) return <Skeleton />;
return opened.length === cards.length ? <Collection /> : <Hunt />;When the server should know
Local storage is per device. If opened cards have to follow an account, keep opened in your own state and write to your API from onOpen. Keep opened cards shows both.