Tarot Study Flashcards – Front-End Plan

Objetivos

  • Criar uma área de estudos focada inicialmente em um único modo de flashcards (Quiz lembrança) e manter espaço para reativar Aprender/Quiz Invertido depois.
  • Utilizar apenas dados já presentes no front-end, sem dependências de backend.
  • Manter o módulo isolado para não quebrar a experiência atual de leitura.

Fonte de Dados

  • Reaproveitar TarotApp.Cards.getAll() para obter todas as cartas.
  • Opcionalmente estender objetos com campos locais (keywords, tips) antes de renderizar, sem modificar o módulo existente.

Estado e Persistência

  • Criar TarotApp.FlashcardsState via hook utilitário em js/modules/flashcards-app.js.
  • Guardar em memória:
    • mode: 'quiz' (outros modos ficam no backlog e podem ser reativados depois).
    • filter: 'all' | 'major' | 'minor' | 'paus' | 'copas' | 'espadas' | 'ouros'.
    • deck: array de IDs das cartas (embaralhado).
    • index: posição atual.
    • isRevealed: controla se o painel de resposta está visível.
  • Persistir tudo em localStorage (tarot-flashcards-v1) para manter progresso.

Estrutura de Páginas / Componentes

study.html                      # Nova página
css/study.css                   # Estilos do módulo
js/modules/flashcards-app.js    # Lógica e UI
  • study.html usa layout: default, adiciona breve introdução e container #flashcard-app.
  • Script carrega cards.js e flashcards-app.js somente nesta página.

Comportamento do Modo Atual

  • Quiz: mostra carta na frente; botão “Revelar” exibe palavras‑chave, significados e dica prática. Usuário navega com Anterior/Próxima sem precisar de autoavaliação.

(Modos Aprender e Quiz Invertido permanecem no backlog e podem ser reintroduzidos reaproveitando o mesmo hook/state quando necessário.)

Guarda-corpos de Integração

  • Apenas um novo link “Estudo” no menu principal.
  • Nenhum ajuste nos módulos de leitura (tarot-app.js etc.).
  • Se #flashcard-app não existir, script aborta sem efeitos colaterais.

Próximos Passos

  1. Implementar o HTML/CSS base e adicionar o link de navegação.
  2. Criar o módulo JS com estados e persistência.
  3. Finalizar interações e revisar acessibilidade/responsividade.