From 48fd51e3777fcbe4e243d7ed613d5fb5e4d28ed1 Mon Sep 17 00:00:00 2001 From: julio Date: Tue, 6 Oct 2026 19:12:38 -0300 Subject: [PATCH] =?UTF-8?q?feat(web):=20guia=20do=20painel=20com=20bot?= =?UTF-8?q?=C3=A3o=20=E2=93=98=20em=20cada=20se=C3=A7=C3=A3o?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Um ⓘ ao lado do título de cada seção (Ao vivo, Vida, Eventos, Ajustes, Reações, Conversa, Movimento) abre a explicação daquela parte: o que faz cada opção, onde fica e uma dica. No cartão Vida também há ⓘ para humores, cuidados e ritmo. O ⓘ do topo explica a tela atual. A página Guia (#/guia) junta todos os 21 tópicos em ordem de tutorial, com índice e busca; cada tópico também aparece no Ctrl+K e há atalho em Ajustes › Sistema. Co-Authored-By: Claude Opus 5.5 --- web/src/App.svelte | 14 +- web/src/lib/ajustes.svelte.ts | 8 +- web/src/lib/componentes/Ajuda.svelte | 62 +++++ web/src/lib/componentes/Card.svelte | 7 +- web/src/lib/componentes/Grupo.svelte | 11 +- web/src/lib/componentes/TopicoGuia.svelte | 75 ++++++ web/src/lib/componentes/VidaCartao.svelte | 29 ++- web/src/lib/guia.ts | 292 ++++++++++++++++++++++ web/src/lib/paleta.svelte.ts | 8 + web/src/lib/rotas.svelte.ts | 3 +- web/src/telas/Ajustes.svelte | 13 +- web/src/telas/AoVivo.svelte | 12 +- web/src/telas/Conversa.svelte | 2 +- web/src/telas/Eventos.svelte | 3 +- web/src/telas/Guia.svelte | 143 +++++++++++ web/src/telas/Reacoes.svelte | 4 +- web/src/telas/movimento/Controle.svelte | 2 +- 17 files changed, 661 insertions(+), 27 deletions(-) create mode 100644 web/src/lib/componentes/Ajuda.svelte create mode 100644 web/src/lib/componentes/TopicoGuia.svelte create mode 100644 web/src/lib/guia.ts create mode 100644 web/src/telas/Guia.svelte diff --git a/web/src/App.svelte b/web/src/App.svelte index a0f3900..75c497a 100644 --- a/web/src/App.svelte +++ b/web/src/App.svelte @@ -18,6 +18,9 @@ import Reacoes from './telas/Reacoes.svelte'; import Rosto from './telas/Rosto.svelte'; import Eventos from './telas/Eventos.svelte'; + import Guia from './telas/Guia.svelte'; + import Ajuda from './lib/componentes/Ajuda.svelte'; + import { TOPICO_DA_TELA } from './lib/guia'; const TELAS: Record = { 'ao-vivo': AoVivo, @@ -27,6 +30,7 @@ movimento: Movimento, ajustes: Ajustes, rosto: Rosto, + guia: Guia, }; const ICONES: Record> = { 'ao-vivo': Video, @@ -141,7 +145,10 @@
-

{tituloDa(nav.atual)}

+

+ {tituloDa(nav.atual)} + {#key nav.atual}{/key} +

{conexaoTexto} @@ -172,7 +179,7 @@ - {#if nav.atual !== 'ao-vivo' && nav.atual !== 'reacoes' && nav.atual !== 'rosto'} + {#if nav.atual !== 'ao-vivo' && nav.atual !== 'reacoes' && nav.atual !== 'rosto' && nav.atual !== 'guia'} {/if}
@@ -241,6 +248,9 @@ border-bottom: 1px solid var(--borda); } .titulo { + display: flex; + align-items: center; + gap: 2px; font-size: var(--t-lg); flex: none; } diff --git a/web/src/lib/ajustes.svelte.ts b/web/src/lib/ajustes.svelte.ts index a1514a7..9b4b8b7 100644 --- a/web/src/lib/ajustes.svelte.ts +++ b/web/src/lib/ajustes.svelte.ts @@ -38,9 +38,11 @@ export interface Campo { opcoes?: Opcoes; } -export const GRUPOS: { titulo: string; descricao: string; campos: Campo[] }[] = [ +/** `ajuda` = tópico do guia (ⓘ ao lado do título). */ +export const GRUPOS: { titulo: string; descricao: string; ajuda: string; campos: Campo[] }[] = [ { titulo: 'Tela e personalidade', + ajuda: 'tela', descricao: 'Como o rosto aparece e se comporta sozinho.', campos: [ { chave: 'auto', rotulo: 'Gestos espontâneos', ajuda: 'Pisca e olha em volta sem comando', tipo: 'toggle' }, @@ -61,6 +63,7 @@ export const GRUPOS: { titulo: string; descricao: string; campos: Campo[] }[] = }, { titulo: 'Sensores e reações', + ajuda: 'sensores', descricao: 'O que o celular percebe e como reage.', campos: [ { chave: 'sensorMic', rotulo: 'Microfone', ajuda: 'Só o nível de som é usado, nunca o áudio', tipo: 'toggle' }, @@ -75,6 +78,7 @@ export const GRUPOS: { titulo: string; descricao: string; campos: Campo[] }[] = }, { titulo: 'Sono e madrugada', + ajuda: 'sono', descricao: 'O que acorda o rosto enquanto ele dorme.', campos: [ { chave: 'somAcordar', rotulo: 'Sons para acordar', ajuda: 'Quantos barulhos em 1 minuto para ele acordar', tipo: 'slider', min: 1, max: 10, passo: 1 }, @@ -90,6 +94,7 @@ export const GRUPOS: { titulo: string; descricao: string; campos: Campo[] }[] = }, { titulo: 'Vídeo e rastreamento', + ajuda: 'camera', descricao: 'Qualidade da transmissão e rastreamento feito neste PC.', campos: [ { chave: 'cameraLado', rotulo: 'Câmera', tipo: 'escolha', opcoes: [['user', 'Frontal'], ['environment', 'Traseira']] }, @@ -113,6 +118,7 @@ export const GRUPOS: { titulo: string; descricao: string; campos: Campo[] }[] = }, { titulo: 'Sensibilidade (avançado)', + ajuda: 'sensibilidade', descricao: 'Limiares dos sustos e intervalos entre reações.', campos: [ { chave: 'somlim', rotulo: 'Nível para perceber som', tipo: 'slider', min: 0, max: 1, passo: 0.01 }, diff --git a/web/src/lib/componentes/Ajuda.svelte b/web/src/lib/componentes/Ajuda.svelte new file mode 100644 index 0000000..2adcf95 --- /dev/null +++ b/web/src/lib/componentes/Ajuda.svelte @@ -0,0 +1,62 @@ + + +{#if t} + + + + (aberto = false)}> + Ver o guia completo + + +{/if} + + diff --git a/web/src/lib/componentes/Card.svelte b/web/src/lib/componentes/Card.svelte index 62f9ce0..230cf4d 100644 --- a/web/src/lib/componentes/Card.svelte +++ b/web/src/lib/componentes/Card.svelte @@ -1,8 +1,11 @@
- {#if titulo}

{titulo}

{/if} + {#if titulo}

{titulo}{#if ajuda}{/if}

{/if}
{@render children()}
{#if rodape}

{rodape}

{/if}
@@ -17,6 +20,10 @@ min-width: 0; } h2 { + display: flex; + align-items: center; + gap: 2px; + min-height: 26px; padding: 0 var(--e-4); font-size: var(--t-xs); font-weight: 600; diff --git a/web/src/lib/componentes/TopicoGuia.svelte b/web/src/lib/componentes/TopicoGuia.svelte new file mode 100644 index 0000000..5786e9a --- /dev/null +++ b/web/src/lib/componentes/TopicoGuia.svelte @@ -0,0 +1,75 @@ + + +
+

{topico.onde}

+

{topico.resumo}

+ {#if topico.itens?.length} +
+ {#each topico.itens as item (item.nome)} +
+
+ {#if item.emoji}{/if} + {item.nome} +
+
{item.texto}
+
+ {/each} +
+ {/if} + {#if topico.dica}

Dica: {topico.dica}

{/if} +
+ + diff --git a/web/src/lib/componentes/VidaCartao.svelte b/web/src/lib/componentes/VidaCartao.svelte index 25036f4..01b2976 100644 --- a/web/src/lib/componentes/VidaCartao.svelte +++ b/web/src/lib/componentes/VidaCartao.svelte @@ -2,6 +2,7 @@ import { Gauge, Moon, Sparkles } from '@lucide/svelte'; import { estado } from '../estado.svelte'; import { configurarVida, cuidar, CUIDADOS, NECESSIDADES } from '../vida.svelte'; + import Ajuda from './Ajuda.svelte'; import Grupo from './Grupo.svelte'; import Interruptor from './Interruptor.svelte'; import Linha from './Linha.svelte'; @@ -10,11 +11,11 @@ const v = $derived(estado.vida); let diarioAberto = $state(false); - // O ritmo também é a sensibilidade dos sensores no celular. + // O ritmo também é a sensibilidade dos sensores no celular (detalhes no ⓘ). const RITMOS = [ - { valor: 'calmo', nome: 'Calmo', descricao: 'Age pouco; só reage e acorda com vários sons ou movimentos seguidos' }, - { valor: 'normal', nome: 'Normal', descricao: 'Reage a barulho alto e movimento forte' }, - { valor: 'agitado', nome: 'Agitado', descricao: 'Age bastante e reage a qualquer som ou movimento' }, + { valor: 'calmo', nome: 'Calmo', descricao: 'Reage pouco' }, + { valor: 'normal', nome: 'Normal', descricao: 'Equilibrado' }, + { valor: 'agitado', nome: 'Agitado', descricao: 'Reage a tudo' }, ] as const; const MOTIVOS: Record = { @@ -44,6 +45,7 @@
- {v.config.ligado ? v.nome_humor : 'Modo autônomo desligado'} + {v.config.ligado ? v.nome_humor : 'Modo autônomo desligado'}{#if v.config.ligado}{/if} {idade(v.idade_dias)}{v.config.ligado && v.diario[0] ? ' · ' + v.diario[0].texto : ''}
configurarVida({ ligado: l })} /> @@ -82,6 +84,7 @@
+ Cuidar {#each CUIDADOS as c (c.acao)} {/each} @@ -99,6 +102,7 @@ r.valor === v.config.ritmo)?.descricao ?? ''}> {#snippet acessorio()} + {#each RITMOS as r (r.valor)}