Under the hood

Picks one of the 22 Major Arcana with Math.random and a reversed coin-flip; the card name rotates 180° when reversed. Meanings are a small inline table.

'use client';

import * as React from 'react';

import { Win98Button } from '@/components/ui/win-98-button';

const ARCANA: [string, string][] = [
  ['The Fool', 'beginnings, innocence, a leap of faith'],
  ['The Magician', 'will, skill, making it happen'],
  ['The High Priestess', 'intuition, the unseen, patience'],
  ['The Empress', 'abundance, nurture, creativity'],
  ['The Emperor', 'structure, authority, control'],
  ['The Hierophant', 'tradition, learning, belonging'],
  ['The Lovers', 'union, choice, alignment'],
  ['The Chariot', 'drive, willpower, momentum'],
  ['Strength', 'courage, gentleness, inner force'],
  ['The Hermit', 'solitude, searching, the inner light'],
  ['Wheel of Fortune', 'cycles, luck, turning points'],
  ['Justice', 'fairness, cause and effect, truth'],
  ['The Hanged Man', 'pause, surrender, a new angle'],
  ['Death', 'endings, transformation, release'],
  ['Temperance', 'balance, blending, moderation'],
  ['The Devil', 'attachment, shadow, what binds you'],
  ['The Tower', 'sudden change, upheaval, revelation'],
  ['The Star', 'hope, renewal, quiet faith'],
  ['The Moon', 'illusion, dreams, the unclear'],
  ['The Sun', 'joy, clarity, vitality'],
  ['Judgement', 'reckoning, awakening, a calling'],
  ['The World', 'completion, wholeness, arrival'],
];

export function TarotGame() {
  const [card, setCard] = React.useState<{ name: string; meaning: string; reversed: boolean } | null>(
    null,
  );
  const [flipping, setFlipping] = React.useState(false);

  const draw = () => {
    if (flipping) return;
    setFlipping(true);
    setCard(null);
    window.setTimeout(() => {
      const [name, meaning] = ARCANA[Math.floor(Math.random() * ARCANA.length)];
      setCard({ name, meaning, reversed: Math.random() < 0.35 });
      setFlipping(false);
    }, 450);
  };

  return (
    <div className="flex flex-col items-center gap-6">
      <div
        className={`flex h-[26rem] w-72 flex-col items-center justify-center gap-3 rounded-2xl border-2 border-foreground bg-[#faf7ef] p-6 text-center transition-transform ${
          flipping ? 'scale-95 opacity-70' : ''
        }`}
      >
        {card ? (
          <>
            <div className="font-mono text-[10px] uppercase tracking-[0.18em] opacity-50">
              {card.reversed ? 'reversed' : 'upright'}
            </div>
            <div
              className="text-3xl font-bold leading-tight tracking-tight"
              style={card.reversed ? { transform: 'rotate(180deg)' } : undefined}
            >
              {card.name}
            </div>
            <div className="text-base leading-snug opacity-75">{card.meaning}</div>
          </>
        ) : (
          <div className="text-5xl opacity-40">✦</div>
        )}
      </div>

      <Win98Button onClick={draw} disabled={flipping} className="h-10 min-w-32 px-7 text-sm">
        Draw a card
      </Win98Button>
    </div>
  );
}