Custom tiers
Common, rare, epic and legendary are a default, not a rule. A tier list is an array you pass in. Each tier says how often it comes up and how loud its reveal is, and the theme says what colour it wears.
Bronze is quiet, silver is loud, gold gets everything.
Write the list
import type { RarityTier } from "@react-cards-opening/core";
export const tiers: RarityTier[] = [
{ id: "bronze", label: "Bronze", weight: 70, effect: "quiet" },
{ id: "silver", label: "Silver", weight: 25, effect: "loud" },
{ id: "gold", label: "Gold", weight: 5, effect: "legendary" },
];Colour them
import { themeOf } from "@react-cards-opening/ui";
const base = themeOf("mono", "dark");
export const theme = { ...base, rarity: { bronze: "#d08a5a", silver: "#c3ccd6", gold: "#f2cc60" } };The keys of rarity are tier ids. A tier with no entry wears the theme's muted colour, which is a reasonable look for a lowest tier and a visible reminder for a forgotten one.
Pass both
<CardHunt cards={cards} rarities={tiers} theme={theme} {...rest} />
// The same list deals the cards.
const hand = rollCards({ pool, count: 3, rarities: tiers, seed });Choosing an effect
| Effect | Use it for | Keep in mind |
|---|---|---|
quiet | Most of your cards. | Several tiers can be quiet. They differ by colour and label. |
loud | The tier people hope for. | Rays and a shake. One or two tiers at most. |
legendary | The tier people screenshot. | The full show. If two tiers have it, neither is special. |
More than three shows
Seven tiers on three effect levels works well: colour does the rest. If you need a show that does not exist, launch on CardOpening takes a timeline of your own to play before the card leaves, and it is told the card, so it can do something only for your top tier.