Ficha Viva AAA ⚔️✦
Criador e ficha viva jogável de personagens de D&D 5e, em português, com
estética cinematográfica de jogo AAA. Mobile-first, mas grandioso no desktop:
partículas mágicas/brasas no fundo, brilho arcano nos cards, runas, luz
volumétrica e transições suaves entre telas.
A identidade visual foi construída a partir da referência
Ficha Viva AAA.dc.html (bundle do Claude Design): mesmas cores, tipografia
(Cinzel / Chakra Petch / Inter), os dois climas — Arcano Frio e Brasa
Heróica —, o sistema de partículas, os cards com inclinação 3D, o HUD em abas
e o overlay cinematográfico de rolagem. O protótipo (que era estático e com
dados fixos) foi evoluído para um produto real, interativo e persistente.
✨ O que foi criado
Um SPA completo em React + TypeScript + Vite + TailwindCSS, com Zustand
(persistido em localStorage) e Framer Motion + um canvas de partículas
próprio.
Fluxo completo:
- Tela inicial cinematográfica (
Home) — sigilo rúnico, título e botão com pulso mágico.
- Login / Cadastro / Convidado (
Login) — contas locais ou acesso imediato como convidado.
- Seleção de personagens (
CharacterSelect) — cards com CA/PV/Prof., criar, duplicar, excluir, importar.
- Criação interativa (
CharacterCreator) — 7 capítulos com herói iluminado, cards selecionáveis e resumo lateral:
Identidade → Origem (raça/sublinhagem) → Caminho (classe) → Atributos → Perícias → Equipamento → Despertar.
- Ficha viva (
CharacterSheet) — HUD em 7 abas, jogável de verdade no PC e no celular.
A ficha inclui:
- Cabeçalho com avatar, raça, classe, nível, antecedente, CA, Iniciativa, Deslocamento, Percepção Passiva e Proficiência calculados.
- Atributos com modificadores automáticos e testes/resistências roláveis (1d20 + mod).
- Perícias com proficiência e bônus automáticos.
- Combate: PV com barra colorida (dano/cura/PV temp.), ataques automáticos das armas equipadas (acerto e dano), economia de turno (ação/bônus/reação/movimento), recursos de classe, dados de vida e resgate da morte.
- Inventário estilo BG3: três recipientes holográficos — Equipado, Mochila e Baú — com arrastar e soltar (dnd-kit, MIT; no celular: segurar e arrastar; teclado pela alça ⠿). Ao pegar um item, uma barra de destinos aparece perto do polegar. Cada item equipável mostra o que muda antes de equipar ("CA 18 → 20 ▲", "Dano 1d8+3 → 1d12+3 ▲") calculado pela mesma engine da ficha, com avisos de regra (Força mínima, Furtividade, duas mãos com escudo). Moedas, sintonia (máx. 3), favoritos e Forja continuam.
- App instalável e offline (vite-plugin-pwa, MIT): "Instalar app no aparelho" no menu ⋯ (no iPhone, passo a passo do Compartilhar → Tela de Início). A ficha abre e rola dados sem internet; novas versões pedem confirmação antes de atualizar.
- Pontos de Inspiração (Mesa): selo dourado holográfico com + / − para ganhar/corrigir; tocar no selo prepara a vantagem no próximo teste d20 (ataque, perícia, resistência) e o ponto só é descontado quando o dado rola — cancelar ou trocar de ficha não gasta. A rolagem fica marcada "· Inspiração" no histórico.
- Magias (conjuradores): espaços de magia, CD/ataque de magia e magias preparadas.
- Descanso curto/longo e condições.
- Diário de sessões (título, data, resumo, NPCs, locais, missões, tesouros, anotações livres) com busca + anotações rápidas.
- "O que eu rolo?" (aba Mesa): descreva a ação em português ("escalar o muro", "ele está mentindo?") e a ficha sugere o teste, o bônus e de onde ele vem — com um toque para rolar. Sem IA, 100% offline.
- Rolador de dados (d4–d100, quantidade, modificador, vantagem/desvantagem) com e crítico/falha.
A engine de regras (/src/engine) é simples, tipada e expansível, com suporte a homebrew.
▶️ Como rodar
Requisitos: Node 18+ (testado em Node 22).
npm install # instala dependências
npm run dev # ambiente de desenvolvimento (http://localhost:5173)
npm run build # build de produção em /dist
npm run preview # serve o build localmente
npm run typecheck # checagem de tipos sem emitir
npm test # testes automatizados (engine de regras, sync, "O que eu rolo?")
npm run e2e # ponta a ponta no navegador (Playwright): criação, ficha, PDF, mesa, código, tela cheia, link
Testes de ponta a ponta (e2e/): o app sobe em modo dev apontando para um
Supabase de mentira (e2e/fixtures/supabase.ts, banco em memória + Realtime),
então nada sai da máquina. Qualquer erro de JavaScript na página reprova o teste.
Inclui acessibilidade: axe-core (WCAG 2.1 AA) em todas as telas e abas, e
teclado (pular para o conteúdo, menu com setas, foco preso nos modais).
Na primeira vez: npx playwright install chromium.
CI (.github/workflows/ci.yml): a cada push e PR roda tipos, npm test,
build e os testes de ponta a ponta; quando falha, guarda o relatório com captura
de tela e o rastro de cada passo.
Para entender o código por dentro, comece por docs/COMO-FUNCIONA.md.
🗂️ Estrutura principal
src/
components/
ui/ Button, Panel/SectionLabel
layout/ AppShell, TopBar, Screen
animations/ ParticleField, BackgroundScene, RuneRing
character/ passos da criação (Identity, Race, Class, Abilities, Skills, Gear, Review) + CharacterEditModal
sheet/ SheetHeader, SheetTabs, MobileNav, TabFicha/Combate/Inventario/Magias/Descanso/Diario
dice/ DiceRoller, RollOverlay, useDiceRoller
inventory/ AddItemPicker
spells/ SpellPicker
diary/ JournalCard
pages/ Home, Login, CharacterSelect, CharacterCreator, CharacterSheet, LiveSession
features/
master/ console do mestre: MasterWorkspace, backstage/, inspector/, initiative/, quick/, masterStore
live/ PlayerWorkspace (mesa do jogador) + LiveHeader
data/ races, classes, backgrounds, skills, weapons, armors, items, spells, themes
engine/ dndRules, modifiers, dice, combat, inventory, characterBuilder, loadout,
levelUp, spellcasting, rollAdvisor ("O que eu rolo?") + __tests__
services/ Supabase: auth, sync offline, campanhas
store/ characterStore (IndexedDB), authStore, uiStore (Zustand + persist)
types/ character.ts, dnd.ts
lib/ color, useTheme, useTilt, summary
styles/ globals.css (base, keyframes, utilitários) · themes/ (uma identidade por arquivo + modos claro/escuro)
public/assets/ heroi.png, heroi-fem.png, bg.mp4
⚡ Desempenho (o que manter ao mexer)
- Só a primeira tela vai no pacote inicial. Páginas, mesa ao vivo, tutorial,
tour e a aba Diário são
lazy(). Estilos de mesa/palco/console
(session.css, stage.css, master.css) são importados pelos componentes que os
usam, então viajam junto com o pedaço deles. Não importe esses estilos no main.tsx.
- Animação: use
m (não motion) do framer-motion; o app roda dentro de
<LazyMotion features={domAnimation} strict>. Arrastar/layout (domMax) existe
só nos toasts e é carregado quando o navegador folga.
- Cache: arquivos com hash ficam em
/static (cache imutável de 1 ano no
vercel.json); sw.js/index.html sempre revalidam. O service worker guarda de
antemão só a casca do app; fontes e artes entram no cache na primeira vez que aparecem.
- Ficha: a arte do herói (maior elemento da tela) é pedida junto com o código da
página (
useHeroArtPreload no App.tsx).
- Supabase: o HTML ganha
preconnect para o servidor quando VITE_SUPABASE_URL
existe no build.
♿ Contraste (AA nos 8 temas, claro e escuro)
- As paletas (CSS +
src/data/themes.ts) passam no AA com folga; o teste
themeSync garante que os dois lados batem.
- Cor fixa em texto (atributos, PV, cura, raridade): use
useInk() de
src/lib/contrast.ts — ink(cor) mantém o tom e só ajusta a luz para o painel do
tema. Bordas e fundos continuam com a cor original.
- Cor vinda de variável CSS (
--c): use a classe .fv-tone; o CSS escurece no
claro, clareia no escuro e trata as plaquinhas escuras da Forja.
- Correções pontuais medidas ficam em
src/styles/contrast.css (com o porquê).
🧠 Engine D&D 5e (resumo)
- Modificador de atributo:
floor((valor − 10) / 2)
- Bônus de proficiência por nível:
2 + floor((nível − 1) / 4)
- CA por armadura/escudo + DES (com teto para armaduras médias) + itens
- PV por dado de vida + Constituição; iniciativa por Destreza
- Ataques:
1d20 + proficiência + atributo (acuidade/distância usam DES); dano com modificador
- Perícias e resistências proficientes; descanso curto/longo; recursos por descanso; carga aproximada
Não há conteúdo oficial protegido por direitos autorais — apenas estrutura
genérica e dados básicos, fáceis de expandir.
🔭 Próximos passos
Ideias trazidas do antigo dnd-companion e de projetos open source de RPG:
- Importador do dnd-companion: converter as fichas antigas para o modelo atual.
- Recursos personalizados/homebrew: contadores próprios com recarga por descanso.
- Compartilhar ficha por link/QR (somente leitura, revogável) e impressão.
- Ícones consistentes para itens, magias e condições (ex.: game-icons.net, CC BY 3.0).
- Inventário visual com comparação do item atual × selecionado (efeito na CA/ataque antes de equipar).
- Rastreador de iniciativa do mestre conectado às fichas da mesa.
- Diário conectado: NPCs, locais e relações ligados às sessões.
✅ Referência visual
Confirmado: Ficha Viva AAA.dc.html foi usado como base visual e de UX. A
estética original foi preservada e evoluída para um produto completo, interativo,
cinematográfico e funcional — sem descaracterizar o design.
🎨 Créditos
Dados 3D: @3d-dice/dice-box-threejs
(MIT, Frank Ali; baseado nos 3D Dice de MajorVictory e Teall Dice).
Selo holográfico (src/components/ui/holo-badge.tsx, usado na Inspiração e nos
recipientes do inventário): adaptado do efeito do AwardBadge (21st.dev), sem a
marca original.
Ícones temáticos (abas, dados, forja…) de game-icons.net,
por Lorc, Delapouite e colaboradores, sob licença
CC BY 3.0. Os caminhos usados
ficam em src/components/ui/gameIcons.ts.
