julioandClaude Opus 5.5
ccd89d125e
Ajustes vira uma tela com submenu (#/ajustes/<seção>): cada grupo do celular é uma seção (Tela, Sensores, Sono, Vídeo, Sensibilidade), mais Robô (Inteligência artificial, Ligações da placa) e Painel (Segurança, Sistema). No PC o menu fica numa coluna fixa com descrição; no celular, numa fileira rolável que traz a seção aberta para a vista. A busca procura em todos os grupos do celular. Ligações da placa passa a ser uma seção dos Ajustes (#/ligacoes antigo redireciona) e segue o esquema que já tinha sido desenhado para o PIR: - HC-SR505 mini, marcação + · out · −; no cabo, + no fio preto → pino 4, out no verde → pino 11, − no branco → pino 14; - etiquetas do conector e tabela mostram a cor real do fio; - tela TFT reserva também o pino 7; pinos livres listados; - avisos do HC-SR505 (sinal de ~8 s, 30–60 s para estabilizar, teste com gpiomon). Rotas ganham nav.sub (seção da tela); atalhos vão direto à seção (câmera, IA, ligações). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
51 lines
2.0 KiB
TypeScript
51 lines
2.0 KiB
TypeScript
/** Rotas por hash (#/conversa): o servidor só precisa entregar index.html em "/". */
|
|
|
|
export type Rota = 'ao-vivo' | 'eventos' | 'conversa' | 'reacoes' | 'movimento' | 'ajustes' | 'rosto' | 'guia' | 'criar' | 'dia-a-dia';
|
|
|
|
export const ROTAS: { id: Rota; titulo: string; atalho: string }[] = [
|
|
{ id: 'ao-vivo', titulo: 'Ao vivo', atalho: 'g v' },
|
|
{ id: 'eventos', titulo: 'Eventos', atalho: 'g e' },
|
|
{ id: 'conversa', titulo: 'Conversa', atalho: 'g c' },
|
|
{ id: 'reacoes', titulo: 'Reações', atalho: 'g r' },
|
|
{ id: 'movimento', titulo: 'Movimento', atalho: 'g m' },
|
|
{ id: 'ajustes', titulo: 'Ajustes', atalho: 'g a' },
|
|
];
|
|
|
|
/** Páginas abertas a partir de outra tela (não aparecem na navegação). */
|
|
export const SECUNDARIAS: { id: Rota; titulo: string; volta: Rota }[] = [
|
|
{ id: 'rosto', titulo: 'Rosto', volta: 'ao-vivo' },
|
|
{ id: 'guia', titulo: 'Guia', volta: 'ajustes' },
|
|
{ id: 'criar', titulo: 'Criar com IA', volta: 'reacoes' },
|
|
{ id: 'dia-a-dia', titulo: 'Dia a dia', volta: 'ao-vivo' },
|
|
];
|
|
|
|
export const tituloDa = (id: Rota) => [...ROTAS, ...SECUNDARIAS].find((r) => r.id === id)?.titulo ?? '';
|
|
|
|
/** #/ajustes/ia -> ['ajustes', 'ia']: a segunda parte é a seção (submenu) da tela. */
|
|
function partes(): [string, string] {
|
|
const [id, sub = ''] = location.hash.replace(/^#\/?/, '').split('?')[0].split('/');
|
|
if (id === 'historico') return ['eventos', sub]; // endereço antigo
|
|
if (id === 'ligacoes') return ['ajustes', 'ligacoes']; // virou seção dos Ajustes
|
|
return [id, sub];
|
|
}
|
|
|
|
function lerHash(): Rota {
|
|
const id = partes()[0] as Rota;
|
|
return ROTAS.some((r) => r.id === id) || SECUNDARIAS.some((r) => r.id === id) ? id : 'ao-vivo';
|
|
}
|
|
|
|
class Navegacao {
|
|
atual = $state<Rota>(lerHash());
|
|
/** Seção dentro da tela (ex.: a parte dos Ajustes aberta). */
|
|
sub = $state(partes()[1]);
|
|
ir(rota: Rota, sub = '') {
|
|
location.hash = '/' + rota + (sub ? '/' + sub : '');
|
|
}
|
|
}
|
|
|
|
export const nav = new Navegacao();
|
|
addEventListener('hashchange', () => {
|
|
nav.atual = lerHash();
|
|
nav.sub = partes()[1];
|
|
});
|