52 lines
13 KiB
Markdown
52 lines
13 KiB
Markdown
# Changelog — Temas Sazonais
|
||
|
||
> Histórico específico desta aplicação, extraído de `plano.md`. Rodadas que mudaram mais de uma aplicação ao mesmo tempo continuam em `plano.md`.
|
||
>
|
||
> **Formato**: uma entrada por rodada, `### Rodada N — Título`; quando a rodada não tem número registrado, `### Título` só. **A numeração de rodada não é global** — cada aplicação conta as próprias, e o mesmo número designa trabalhos diferentes em arquivos diferentes. Ao citar uma rodada, sempre nomear o arquivo. Ver o topo de `plano.md`.
|
||
|
||
### Rodada 94 — Tema sazonal Halloween: logo/mascote vampiro, intro de abertura e "susto" ao clicar
|
||
|
||
Pedido (2026-09-15): deixar uma logo e uma introdução de abertura com tema de Halloween, aplicadas só durante outubro, revertendo pro P.I.D. normal depois — sem descartar nada do que já existe. Mascote (a marca P.I.D. fantasiada de vampiro) e a composição da intro foram desenhados fora do repositório, em `C:\Users\Depaula\Documents\Logos\P.I.D. Logo Design Halloween\` (`pid-marca-halloween/` + `Logo intro animation Halloween/export-halloween/pid-intro-halloween.html`, mesmo formato de bundle "Design Canvas" da intro original) e portados fielmente pra vanilla JS/CSS, mesma técnica já usada na intro normal (ver `CLAUDE.md` raiz → "Animação de intro do login" → "Origem do arquivo"). Implementado como mecanismo **100% runtime**, sem editar nenhum arquivo original: `static/js/seasonal-theme.js` (novo, incluído em toda página) decide se o tema está ativo (`pidIsHalloweenActive()`, janela de outubro) e, se sim, troca em memória o favicon, o ícone/assinatura da sidebar e o ícone do login pelo vampiro, e troca a piscada de olhos ao clicar por uma animação de "susto" (capa se abre, rosto fica raivoso, tremida + brilho vermelho — `.is-scaring` em `base.css`); `static/css/login-intro-halloween.css` + `static/js/login-intro-halloween.js` são uma intro de abertura completa alternativa (cenas Rise/Scare/Settle/Wordmark + uma cena "Fly" acrescentada pra aterrissar na sidebar, mesmo espírito da intro normal), escolhida por `auth.js` no lugar da intro normal quando o tema está ativo. Detalhe técnico completo em `temas-sazonais.md`.
|
||
|
||
**Ainda em preview, não confirmado**: `PID_HALLOWEEN_PREVIEW_FORCE = true` (em `seasonal-theme.js`) força o tema ligado agora só pra essa revisão visual — o usuário ainda precisa (a) rodar o `runserver` e conferir a logo/intro/susto nos dois temas, (b) confirmar se a janela é outubro inteiro (já implementado) ou um recorte diferente, e (c) desligar essa constante depois de validado (daí em diante só a data decide, sem mais nenhuma mudança de código). Depois de outubro, tudo volta ao P.I.D. normal sozinho, sem nenhuma ação manual — nenhum arquivo original (`login-intro.js`/`.css`, ícones `pid-icone*`/`pid-logo-horizontal*`, `pid-icon-eye`/`is-blinking`) foi alterado ou removido.
|
||
|
||
**Ajuste na mesma rodada**: o usuário reportou o favicon aparecendo na cor errada (branco, destoando do resto da marca) — `pidApplySeasonalFavicon()` trocava pra `pid-halloween-favicon.svg` (variante simplificada, sem capa/gola/cores completas); corrigido pra usar `pid-halloween-icone-escuro.svg` (o mesmo ícone/cores do resto da UI), mesmo padrão que o P.I.D. normal já seguia.
|
||
|
||
### Rodada 95 — Teias de aranha nos cantos do login e da tela Principal
|
||
|
||
Pedido (2026-09-15, mesma rodada do tema Halloween acima): teias de aranha com aranha animada nos cantos do login e da tela Principal, marcados pelo usuário em prints da tela real. Antes de aplicar, foi publicado um protótipo isolado (Artifact "Cantos Assombrados") com 4 vs 2 cantos e aranha andando vs parada, pra decidir o desenho sem mexer no Portal de verdade — o usuário confirmou **2 cantos** (superior-esquerdo/inferior-direito, os mesmos dos prints) e pediu a teia da tela Principal **menor** que a do login, "evitando cobrir muito as informações que constam na página" (a Principal tem cards/widgets perto das bordas; o login só tem o card centralizado).
|
||
|
||
Aplicado só em `index.html` e `portal.html` (nenhum outro shell), mesmo mecanismo 100% runtime do resto do tema: `static/css/halloween-cobweb.css` (novo) define a teia (6 fios + 3 anéis, coordenadas por trigonometria) e a aranha (corpo+8 pernas, anda e volta ao longo de um fio via `@keyframes` puro CSS, pernas mexendo continuamente); o markup (`PID_COBWEB_SVG` em `seasonal-theme.js`) só é injetado num container já presente e `hidden` no template (`#pw-cobwebs-login`/`#pw-cobwebs-portal`) quando `pidIsHalloweenActive()`, chamado por `login-logo-blink.js`/`sidebar-brand.js`. Na Principal, a teia é ancorada em `.main-content`, não no viewport — a sidebar já é sólida e cobriria o canto esquerdo de qualquer jeito. Detalhe técnico completo em `temas-sazonais.md` → "Teias de aranha de canto".
|
||
|
||
**Ajuste na mesma rodada**: a teia do login não aparecia de jeito nenhum, e a da Principal ficou "muito pequena". Causa raiz do primeiro: `z-index:-1` só funciona dentro de um contexto de empilhamento isolado — sem isso, o próprio fundo em tela cheia de `.login-page` (conteúdo estático normal) pintava por cima da teia, escondendo-a por completo; corrigido com `isolation:isolate` em `.login-page` (`login.css`) e em `.main-content` (`layout.css`), que tinha o mesmo problema de raiz (só não percebido porque a Principal não tem um fundo cobrindo tudo). Tamanho aumentado nas duas telas (`clamp(120px,14vw,190px)` → `clamp(160px,17vw,240px)` no login; `clamp(80px,8vw,120px)` → `clamp(110px,11vw,170px)` na Principal), mantendo a Principal um pouco menor que o login.
|
||
|
||
**Mais um ajuste, ainda na mesma rodada**: (a) a topbar da Principal (`position:sticky`, fundo opaco) cobria a metade de cima da teia do canto superior-esquerdo — `.pw-corner--tl` na Principal ganhou `top:var(--topbar-height)` pra começar logo abaixo dela; (b) tamanho aumentado de novo nas duas telas (login → `clamp(220px,22vw,320px)`, Principal → `clamp(160px,15vw,230px)`); (c) contraste por tema: no escuro, a aranha (quase a mesma cor do fundo) ganhou um `drop-shadow` branco pra não sumir, sobrando só o olho vermelho visível como antes; no claro, a teia (creme, pensada pro fundo escuro) viraria invisível no fundo branco — agora fica cinza-chumbo escuro nesse tema, e o brilho branco da aranha é desligado (já contrasta sozinha, escura sobre claro).
|
||
|
||
### Rodada 96 — Opt-out de temas sazonais (menu da conta)
|
||
|
||
Pedido (2026-09-15, mesma rodada do tema Halloween): um jeito do próprio usuário desligar temas sazonais (hoje só o Halloween), "caso o usuário tenha alguma preferência com relação aos temas, ou no caso do halloween, se tiver aracnofobia". Botão-toggle "Temas sazonais" (`.seasonal-theme-toggle`, `components.css`) no dropdown da conta, logo abaixo de "Tema de cores", com dois estados "Ativo"/"Inativo" — duplicado nos 13 shells, mesmo padrão dos demais elementos replicados por template. Preferência salva em `localStorage` (`pid_seasonal_theme_opt_out`), mesmo padrão do tema claro/escuro (nunca migrada pro banco — é preferência de navegador). `pidIsHalloweenActive()` (`seasonal-theme.js`) checa essa preferência **antes** de qualquer outra coisa, inclusive antes do `PID_HALLOWEEN_PREVIEW_FORCE` (prioridade máxima: se o usuário desligou, fica desligado). Alternar o toggle recarrega a página (`account.js`) — o tema sazonal já foi aplicado via substituição de markup no carregamento atual, não dá pra desfazer in-place, e pra quem desligou por aracnofobia a aranha precisa sumir na hora. Detalhe técnico completo em `temas-sazonais.md` → "Opt-out do usuário".
|
||
|
||
### Rodada 97 — Clicar na aranha da teia mata ela
|
||
|
||
Pedido (2026-09-15, mesma rodada): "ao clicar nas aranhas, deve sair uma pequena caveirinha dela (como se tivesse morrido) e ela cair, deixando a teia vazia. Ao atualizar a página, deve voltar como estava." A aranha (única parte da teia com `pointer-events:auto`) ganhou um listener de clique `{once:true}` que dispara duas animações CSS em paralelo: a própria aranha cai girando e some (`pwSpiderDie`, pernas encolhendo numa animação própria, `pwLegsDie`) enquanto uma caveirinha (`<g class="pw-skull">`, novo, sempre presente mas invisível) sobe e desaparece (`pwSkullRise`), como se a alma saísse do corpo. Sem nenhum estado salvo nesta rodada — a teia ficava vazia só até a página ser recarregada, já que `pidApplyHalloweenCobwebs()` reconstruía tudo do zero a cada carregamento (persistência veio na rodada 99). Detalhe técnico completo em `temas-sazonais.md` → "Teias de aranha de canto" → "Clicar mata a aranha".
|
||
|
||
### Rodada 98 — Teia mais profissional + correção da aranha/caveira invertidas no canto inferior-direito
|
||
|
||
Pedido (2026-09-15, mesma rodada): (a) o desenho da teia (6 fios retos + 3 anéis poligonais) estava "muito bruto", o usuário anexou uma referência visual e pediu algo "nesse sentido", mais profissional, "para que não fique parecendo que só foi colado um PNG bruto"; (b) no canto inferior-direito, a aranha caía **pra cima** ao morrer e a caveira aparecia **de cabeça pra baixo**.
|
||
|
||
**Teia redesenhada**: agora 8 fios (ângulos irregulares, não uniformes — mais parecido com uma teia real) + 5 anéis em espiral **levemente arqueados** (`<path class="pw-ring">` com curvas `Q`, controle empurrado ~8% mais longe do centro que o ponto médio da corda — simula a curva natural de uma espiral de captura, em vez de segmentos retos ligando os pontos) + 1 fio "perdido" bem mais comprido que os demais, se estendendo pra fora do canto (detalhe da referência do usuário) e cortado naturalmente pela borda da página (`.pw-corners{overflow:hidden}`).
|
||
|
||
**Causa raiz do bug do canto inferior-direito**: esse canto reaproveitava o mesmo desenho do superior-esquerdo com `transform:scale(-1,-1)` no `<div>` inteiro — um jeito simples de não duplicar o markup, mas que vira **tudo** de cabeça pra baixo, inclusive a orientação da aranha/caveira e a direção "pra baixo"/"pra cima" das animações de queda/subida. Corrigido separando as duas coisas: só a teia (`.pw-strands`, que não tem um "lado certo pra cima") continua espelhada, com `transform-box:view-box;transform-origin:100px 100px` (o centro do viewBox autorado — não a caixa delimitadora dos fios, que o fio "perdido" deslocaria); a aranha e a caveira passaram a usar variáveis CSS (`--rx`/`--ry`/`--rr`/`--ox`/`--oy`/`--sx`/`--sy`) redefinidas com os valores espelhados só para `.pw-corner--br`, sem nenhum `scale`/`rotate` extra nelas — ficam sempre em pé e caem/sobem na direção real da tela nos dois cantos. Detalhe técnico completo em `temas-sazonais.md` → "Teias de aranha de canto".
|
||
|
||
### Rodada 99 — Aranha morta persiste entre carregamentos + atalho Tab+B pra resetar
|
||
|
||
Pedido (2026-09-15, mesma rodada): "guardar que a aranha foi morta na memória... até executar o comando tab+b que reseta a aranha". Cada aranha ganhou um id próprio (`${containerId}__tl`/`__br`, 4 possíveis — 2 cantos × 2 páginas) guardado num array em `localStorage` (`pid_seasonal_dead_spiders`, `pidMarkSpiderDead()`/`pidGetDeadSpiders()`/`pidResetDeadSpiders()` em `seasonal-theme.js`) — mesmo padrão de armazenamento das outras preferências sazonais, nunca no banco. `pidApplyHalloweenCobwebs()` agora checa essa lista a cada carregamento: aranha já morta nasce direto com `.is-dead` (invisível, sem tocar a animação de queda nem a caveira de novo), em vez de ligar o clique. Segurar Tab e apertar B (sem interceptar o Tab em si — a navegação por foco continua normal) limpa a lista e recarrega a página, trazendo todas de volta. Detalhe técnico completo em `temas-sazonais.md` → "Teias de aranha de canto".
|
||
|
||
### Rodada 100 — Documentação separada em `docs/temas-sazonais/`
|
||
|
||
Pedido (2026-09-15): "gerar um changelog específico para esta questão dos temas sazonais... estruturar suas informações como se fossem aplicação específica". Seguindo o mesmo padrão das demais aplicações sem pacote Python dedicado (`docs/<app>/<app>.md`+`README.md`+`CHANGELOG.md`), o conteúdo técnico detalhado que vivia na seção "Tema sazonal (Halloween)" do `CLAUDE.md` raiz foi movido pra este arquivo/`temas-sazonais.md`/`README.md`; o histórico rodada a rodada (94-99) foi extraído de `plano.md` pra este `CHANGELOG.md` (mesma numeração). `CLAUDE.md` e `plano.md` ficaram só com a parte estrutural (a existência do mecanismo + onde encontrar o resto), sem duplicar o detalhe aqui.
|
||
|
||
### Rodada 101 — Preview confirmado, tema programado pra outubro de verdade
|
||
|
||
Pedido (2026-09-15): "pode parar de forçar o tema e deixar somente programado para aplicar a partir de outubro". `PID_HALLOWEEN_PREVIEW_FORCE` (`seasonal-theme.js`) virou `false` — mantida na constante (não removida), documentando a decisão em vez de apagar o rastro. A partir daqui, `pidIsHalloweenActive()` decide só pela data (`PID_HALLOWEEN_MES = 9`, outubro inteiro, todo ano), sem nenhuma ação manual pra ligar/desligar. Encerra o período de preview aberto na rodada 94.
|