Skip to content

feat: add TarotCard component with 78-card deck support#8

Merged
gfargo merged 1 commit into
mainfrom
feat/tarot-card-component
Mar 25, 2026
Merged

feat: add TarotCard component with 78-card deck support#8
gfargo merged 1 commit into
mainfrom
feat/tarot-card-component

Conversation

@gfargo

@gfargo gfargo commented Mar 25, 2026

Copy link
Copy Markdown
Owner

Summary

Adds a new TarotCard component built on top of the existing CustomCard API, along with a createTarotDeck() utility for generating a standard 78-card tarot deck.

What's included

TarotCard component (src/components/TarotCard/)

  • Wraps CustomCard with tarot-specific semantics via a discriminated union on arcana
  • Major Arcana (arcana="major" + majorIndex 0–21): ASCII art for all 22 cards, roman numeral corner symbols, yellow/magenta theming
  • Minor Arcana (arcana="minor" + suit + value): Auto-generated pip art for numbered cards, court card rendering, cyan theming
  • Tarot suits: wands (🜂), cups (☽), swords (⚔), pentacles (⛤)
  • reversed prop for upside-down card readings
  • Custom tarot-themed card back with celestial pattern
  • All BaseCardProps pass through (faceUp, selected, rounded, effects)

createTarotDeck utility (src/components/TarotCard/utils.ts)

  • Produces a standard 78-card tarot deck:
    • 22 Major Arcana (The Fool through The World)
    • 56 Minor Arcana (Ace–10 + Page/Knight/Queen/King × 4 suits)
  • Unique IDs for every card

Tests (TarotCard.test.tsx)

  • 22 tests total: 16 snapshot render tests + 6 createTarotDeck validation tests
  • Covers Major/Minor Arcana, reversed, face-down, selected, custom colors/art
  • Deck tests verify: 78 total cards, 22 Major, 56 Minor, 14 per suit, unique IDs, correct indices

Storybook (TarotCardView.tsx)

  • Added to storybook menu with ☾ indicator
  • Demos: Major Arcana (paginated), Minor pips, court cards, reversed cards, all four suits
  • Face up/down toggle

Usage

// Major Arcana
<TarotCard id="fool" arcana="major" majorIndex={0} />

// Minor Arcana (reversed)
<TarotCard id="qc" arcana="minor" suit="cups" value="Queen" reversed />

// Full 78-card deck
const deck = createTarotDeck()

Checklist

  • Builds cleanly (yarn build)
  • All 217 tests pass (yarn test:fix)
  • Exported from public API (src/index.tsx)
  • Storybook integration
  • Standard 78-card deck (22 Major + 56 Minor)

- TarotCard component wrapping CustomCard for Major/Minor Arcana
- createTarotDeck() utility producing standard 78-card deck
  - 22 Major Arcana (The Fool through The World) with ASCII art
  - 56 Minor Arcana (Ace-10 + Page/Knight/Queen/King × 4 suits)
  - Tarot suits: wands, cups, swords, pentacles
- Reversed card orientation support
- Custom tarot-themed card back design
- 22 tests (snapshot renders + deck creation validation)
- Storybook view with Major Arcana, pips, court, reversed, and suits demos
- Exported from public API (TarotCard, createTarotDeck, all types)
@gfargo gfargo merged commit 6ea4afe into main Mar 25, 2026
2 checks passed
@gfargo gfargo deleted the feat/tarot-card-component branch March 25, 2026 15:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant