@aksp/opencrew 1.6.3 → 1.7.1

package/templates/_opencrew/core/escritorio/modelo-textos.js

@@ -0,0 +1,65 @@
+// Textos que a página mostra, em português do Brasil: os da §6 da spec, o status por extenso de
+// cada agente e o título da aba. A página os grava só por `textContent`.
+// Puro: sem DOM, sem relógio, sem rede.
+// Spec: fase-e1-escritorio-ao-vivo.md, §6 e regras 18, 21, 24 e 29 (repositório do OpenCrew).
+
+export const TEXTOS = Object.freeze({
+  nome: 'Escritório',
+  aguardando: 'Aguardando você',
+  abrindo: 'Abrindo o escritório… Se esta mensagem não sumir, abra pelo endereço que o comando /opencrew dashboard mostrou, e não pelo arquivo.',
+  semServidor: 'Sem conexão com o escritório. Tentando de novo… Para reabrir, rode /opencrew dashboard.',
+  demonstracao: 'Demonstração — nenhuma execução ainda. Rode uma crew e ela aparece aqui.',
+  demoForcada: 'Demonstração. Tire ?demo do endereço para ver a sua crew.',
+});
+
+/** Status do agente por extenso, para a lista ao lado do desenho (regra 24). */
+export const STATUS_TEXTO = Object.freeze({
+  idle: 'Em espera',
+  working: 'Trabalhando',
+  checkpoint: TEXTOS.aguardando,
+  done: 'Concluído',
+  skipped: 'Pulado',
+  failed: 'Falhou',
+});
+
+/** "Passo 2 de 5"; sem total, "Passo 2". */
+export function textoPasso(atual, total) {
+  return total ? `Passo ${atual} de ${total}` : `Passo ${atual}`;
+}
+
+/** Faixa do checkpoint: "Aguardando você: <rótulo>"; sem rótulo, "Aguardando você". */
+export function textoFaixa(rotulo) {
+  return rotulo ? `${TEXTOS.aguardando}: ${rotulo}` : TEXTOS.aguardando;
+}
+
+/** "há 19 min" até 59 minutos; depois, em horas inteiras: "há 1 h". */
+function textoIdade(minutos) {
+  return minutos <= 59 ? `há ${minutos} min` : `há ${Math.floor(minutos / 60)} h`;
+}
+
+export const textoParada = (minutos) => `Última atualização ${textoIdade(minutos)}`;
+export const textoSemSinal = (minutos) => `Sem sinal ${textoIdade(minutos)}`;
+
+const TITULO_FIXO = Object.freeze({
+  checkpoint: `(!) ${TEXTOS.aguardando}`,
+  completed: '✓ Concluída',
+  failed: '✗ Falhou',
+});
+
+/** "2/5 Escrever"; sem rótulo, "Passo 2 de 5"; sem total saem o "/5" e o " de 5". */
+function tituloDoPasso({ current, total, label }) {
+  if (!label) return textoPasso(current, total);
+  return `${current}${total ? `/${total}` : ''} ${label}`;
+}
+
+/**
+ * Título da aba (regra 29), para a página gravar quando mudar.
+ * @param {object|null} estado o estado normalizado da crew em exibição; `null`: sem estado
+ * @param {{ demo?: boolean, semConexao?: boolean }} [opcoes]
+ * @returns {string} "Escritório" em demonstração, sem estado ou sem conexão
+ */
+export function titulo(estado, { demo = false, semConexao = false } = {}) {
+  if (!estado || demo || semConexao) return TEXTOS.nome;
+  const inicio = TITULO_FIXO[estado.status] ?? tituloDoPasso(estado.step);
+  return estado.crew ? `${inicio} — ${estado.crew}` : inicio;
+}

package/templates/_opencrew/core/escritorio/modelo-visao.js

@@ -0,0 +1,91 @@
+// O modelo de uma leitura: do estado bruto de uma crew ao que a página desenha e escreve.
+// A hora atual e o "reduzir movimento" entram por parâmetro; nada aqui lê relógio.
+// Puro: sem DOM, sem relógio, sem rede.
+// Spec: fase-e1-escritorio-ao-vivo.md, regras 18, 21, 24 e 29 (repositório do OpenCrew).
+import { normalizar } from './modelo-estado.js';
+import { verAgente } from './modelo-agentes.js';
+import { textoFaixa, textoParada, textoPasso, textoSemSinal, titulo } from './modelo-textos.js';
+
+const MINUTO = 60000;
+/** Execução `running` sem atualização há mais que isto: a página diz há quanto tempo. */
+export const PARADA_MS = 2 * MINUTO;
+/** Há mais que isto: quem trabalhava recebe a ação `sem-sinal`. */
+export const SEM_SINAL_MS = 20 * MINUTO;
+
+/**
+ * Regra 21. Só vale para execução `running`, fora da demonstração e com `updatedAt` válido.
+ * Nada é regravado: são textos e uma ação derivados da idade, refeitos a cada leitura.
+ */
+function sinais(estado, { agoraMs, demo }) {
+  const vale = !demo && estado.status === 'running' && estado.updatedAtMs !== null && Number.isFinite(agoraMs);
+  const idade = vale ? agoraMs - estado.updatedAtMs : 0;
+  const minutos = Math.floor(idade / MINUTO);
+  return {
+    parada: idade > PARADA_MS ? textoParada(minutos) : null,
+    semSinal: idade > SEM_SINAL_MS ? textoSemSinal(minutos) : null,
+  };
+}
+
+/** A última passagem de bastão, com o nome de quem entregou e de quem recebeu. */
+function verPassagem({ handoff, agents }) {
+  if (!handoff) return null;
+  const nome = (id) => agents.find((a) => a.id === id)?.name ?? id;
+  return {
+    de: nome(handoff.from),
+    para: nome(handoff.to),
+    mensagem: handoff.message,
+    deId: handoff.from,
+    paraId: handoff.to,
+    completedAt: handoff.completedAt,
+  };
+}
+
+const SEM_ESTADO = Object.freeze({ semEstado: true, crew: '', execucao: null, passo: null, faixa: null, parada: null, passagem: null, motivo: null });
+
+function verEstado(estado, { parada, semSinal }, reduzirMovimento) {
+  const { current, total, label } = estado.step;
+  const contagem = textoPasso(current, total);
+  const contexto = { execucao: estado.status, semSinal, reduzirMovimento, balaoDoPasso: label || contagem };
+  return {
+    semEstado: false,
+    crew: estado.crew,
+    execucao: estado.status,
+    passo: { atual: current, total, rotulo: label, contagem },
+    faixa: estado.status === 'checkpoint' ? textoFaixa(label) : null,
+    parada,
+    agentes: estado.agents.map((agente, i) => verAgente(agente, i, contexto)),
+    passagem: verPassagem(estado),
+    motivo: estado.status === 'failed' && estado.motivo ? estado.motivo : null,
+  };
+}
+
+/**
+ * O que a página mostra de uma crew. Nunca lança erro e não altera o objeto recebido.
+ * @param {unknown} bruto o estado como veio do servidor (ou da demonstração)
+ * @param {object} [opcoes]
+ * @param {number} [opcoes.agoraMs] a hora atual, em milissegundos; sem ela não há "sem sinal"
+ * @param {boolean} [opcoes.reduzirMovimento] o sistema pede menos movimento
+ * @param {boolean} [opcoes.demo] o estado é o da demonstração
+ * @param {boolean} [opcoes.semConexao] a última consulta ao servidor falhou
+ * @param {string} [opcoes.crew] o nome com que o servidor lista a crew; vale mais que o do estado
+ * @returns {object} `{ semEstado, demo, semConexao, reduzirMovimento, titulo, crew, execucao,
+ *   passo, faixa, parada, agentes, passagem, motivo }` · `semEstado`: a entrada não era um
+ *   estado (aí `agentes` é vazio e o resto, `null`) · `execucao`: `running`, `checkpoint`,
+ *   `completed` ou `failed` · `passo`: `{ atual, total, rotulo, contagem }` · `faixa`: o texto do
+ *   checkpoint ou `null` · `parada`: "Última atualização há …" ou `null` · `agentes`: todos, na
+ *   ordem do elenco (ver `verAgente`); é a lista ao lado do desenho, e quem tem `mesa` é
+ *   desenhado · `passagem`: `{ de, para, mensagem, deId, paraId, completedAt }` ou `null` ·
+ *   `motivo`: só em execução `failed`
+ */
+export function montarModelo(bruto, opcoes = {}) {
+  const { reduzirMovimento = false, demo = false, semConexao = false } = opcoes;
+  const base = { demo, semConexao, reduzirMovimento };
+  const lido = normalizar(bruto);
+  if (!lido) return { ...SEM_ESTADO, ...base, agentes: [], titulo: titulo(null) };
+  const estado = { ...lido, crew: opcoes.crew || lido.crew };
+  return {
+    ...verEstado(estado, sinais(estado, opcoes), reduzirMovimento),
+    ...base,
+    titulo: titulo(estado, { demo, semConexao }),
+  };
+}

package/templates/_opencrew/core/escritorio/modelo.js

@@ -0,0 +1,29 @@
+// Núcleo puro da página do escritório: tudo o que ela desenha e escreve sai daqui, calculado a
+// partir do estado que o servidor devolve. Nenhum módulo deste núcleo toca no DOM, lê relógio ou
+// usa a rede: a hora atual, o "reduzir movimento" e o `?demo` entram por parâmetro, e por isso
+// os mesmos módulos são testados direto no Node.
+// Este arquivo é só a fachada: cada módulo irmão cuida de uma parte.
+// Spec: fase-e1-escritorio-ao-vivo.md, regras 16 a 24, 28 e 29 (repositório do OpenCrew).
+
+// Geometria: a tela de 320×180, o boneco de 16 e as 12 mesas.
+export * from './modelo-mesas.js';
+// Textos da página em PT-BR e o título da aba.
+export * from './modelo-textos.js';
+// Leitura do `state.json`, inclusive o da 1.6.x.
+export * from './modelo-estado.js';
+// Ação, monitor, balão e aparência de cada agente.
+export * from './modelo-agentes.js';
+// O modelo de uma leitura: `montarModelo`.
+export * from './modelo-visao.js';
+// Qual crew está na tela e a página inteira: `consultar`, `escolher`, `montarPagina`.
+export * from './modelo-pagina.js';
+// O roteiro da demonstração.
+export * from './demo.js';
+// A escala inteira do canvas, em pixels do dispositivo: `escala`.
+export * from './escala.js';
+// O caminho de uma entrega, pelos vãos entre as mesas: `rota`.
+export * from './rota.js';
+// O que anima, pela diferença entre duas leituras da mesma crew: `transicao`.
+export * from './animacao.js';
+// Pose, posição e monitor de cada boneco num instante: `quadro`.
+export * from './quadro.js';

package/templates/_opencrew/core/escritorio/painel.js

@@ -0,0 +1,120 @@
+// O painel em volta do desenho: o nome da crew, o passo com a barra de progresso, os avisos, a
+// faixa do checkpoint, a última passagem de bastão, o seletor de crews e a lista dos agentes
+// (regras 22 a 24 e 29). Tudo o que vem do estado — nome, rótulo, mensagem, motivo — entra por
+// `textContent`: é texto, nunca marcação. Cada parte só é reescrita quando muda.
+// Spec: fase-e1-escritorio-ao-vivo.md, regras 18 e 20 a 24 (repositório do OpenCrew).
+import { TEXTOS } from './modelo.js';
+
+/** Os elementos de `index.html` que o painel escreve. */
+const IDS = [
+  'pagina', 'crew', 'situacao', 'passo', 'barra', 'barra-feito', 'barra-atual', 'barra-resto', 'aviso', 'frase',
+  'faixa', 'etiqueta', 'parada', 'motivo', 'passagem', 'lista', 'seletor', 'seletor-caixa',
+];
+/** A situação da execução, por extenso. */
+const SITUACAO = Object.freeze({ running: 'Em andamento', checkpoint: TEXTOS.aguardando, completed: 'Concluída', failed: 'Falhou' });
+/** A marca de cada ação na lista: a forma muda junto com a cor. */
+const MARCAS = Object.freeze({ idle: '○', working: '▶', checkpoint: '▲', done: '✓', skipped: '–', failed: '✕', 'sem-sinal': '?' });
+
+/** Escreve o texto no elemento e o esconde quando não há o que mostrar. */
+function escrever(elemento, texto) {
+  const novo = texto || '';
+  if (elemento.textContent !== novo) elemento.textContent = novo;
+  elemento.hidden = novo === '';
+}
+
+/** Um elemento novo com classe e texto; `enfeite`: fora do alcance do leitor de tela. */
+function criar(documento, marca, { classe, texto = '', enfeite = false }) {
+  const elemento = documento.createElement(marca);
+  elemento.className = classe;
+  elemento.textContent = texto;
+  if (enfeite) elemento.setAttribute('aria-hidden', 'true');
+  return elemento;
+}
+
+/**
+ * A linha de um agente: a cor da camisa (a mesma do boneco), o ícone, o nome, o status e o que fez.
+ * A marca segue o status do agente, não a ação do boneco (regra 18: no checkpoint a lista não
+ * muda); só "sem sinal" a troca.
+ */
+function criarLinha(documento, agente) {
+  const novo = (marca, opcoes) => criar(documento, marca, opcoes);
+  const item = novo('li', { classe: 'agente' });
+  const cor = novo('span', { classe: 'cor', enfeite: true });
+  const quem = novo('div', { classe: 'quem' });
+  const status = novo('span', { classe: 'status' });
+  const marca = agente.acao === 'sem-sinal' ? 'sem-sinal' : agente.status;
+  item.dataset.acao = marca;
+  cor.style.background = agente.aparencia.camisa ?? 'transparent';
+  status.append(novo('span', { classe: 'sinal', texto: MARCAS[marca], enfeite: true }), novo('span', { classe: 'texto', texto: agente.statusTexto }));
+  quem.append(novo('strong', { classe: 'nome', texto: agente.nome }), status);
+  if (agente.label) quem.append(novo('span', { classe: 'fez', texto: agente.label }));
+  item.append(cor, novo('span', { classe: 'icone', texto: agente.icone, enfeite: true }), quem);
+  return item;
+}
+
+function criarOpcao(documento, crew) {
+  return Object.assign(criar(documento, 'option', { classe: '', texto: crew }), { value: crew });
+}
+
+const textoDoPasso = ({ contagem, rotulo }) => (rotulo ? `${contagem} — ${rotulo}` : contagem);
+const textoDaPassagem = ({ de, para, mensagem }) => `Última passagem de bastão: ${de} → ${para}${mensagem ? ` — ${mensagem}` : ''}`;
+
+/**
+ * O painel da página.
+ * @param {object} documento a página (`getElementById`, `createElement`, `title`)
+ * @param {(crew: string) => void} aoEscolher chamada quando o usuário troca de crew no seletor
+ * @returns {{ atualizar: (modelo: object) => void }} `atualizar` recebe o que `montarPagina` devolveu
+ */
+export function criarPainel(documento, aoEscolher) {
+  const el = Object.fromEntries(IDS.map((id) => [id, documento.getElementById(id)]));
+  const escrito = { crews: '', agentes: '' };
+  el.seletor.addEventListener('change', () => aoEscolher(el.seletor.value));
+
+  /** A barra em três partes: passos feitos, o passo atual e o que falta. */
+  function progresso({ passo, execucao }) {
+    const total = passo?.total ?? 0;
+    el.barra.hidden = total === 0;
+    if (!total) return;
+    const feitos = execucao === 'completed' ? total : Math.min(total, Math.max(0, passo.atual - 1));
+    const atual = feitos < total && passo.atual >= 1 ? 1 : 0;
+    el.barra.style.setProperty('--total', String(total));
+    [feitos, atual, total - feitos - atual].forEach((parte, i) => {
+      el[['barra-feito', 'barra-atual', 'barra-resto'][i]].style.flexGrow = String(parte);
+    });
+  }
+
+  /** O seletor só aparece com mais de uma crew (regra 22). */
+  function seletor({ crews, crew }) {
+    const novo = JSON.stringify(crews);
+    el['seletor-caixa'].hidden = crews.length < 2;
+    if (novo !== escrito.crews) el.seletor.replaceChildren(...crews.map((nome) => criarOpcao(documento, nome)));
+    escrito.crews = novo;
+    if (crews.includes(crew) && el.seletor.value !== crew) el.seletor.value = crew;
+  }
+
+  /** A lista traz todo agente, com ou sem mesa: é ela que vale para o leitor de tela (regra 24). */
+  function lista({ agentes }) {
+    const novo = JSON.stringify(agentes.map((a) => [a.id, a.nome, a.icone, a.acao, a.statusTexto, a.label, a.aparencia.camisa]));
+    if (novo !== escrito.agentes) el.lista.replaceChildren(...agentes.map((agente) => criarLinha(documento, agente)));
+    escrito.agentes = novo;
+  }
+
+  function atualizar(modelo) {
+    if (documento.title !== modelo.titulo) documento.title = modelo.titulo;
+    el.pagina.dataset.execucao = modelo.execucao ?? '';
+    el.etiqueta.hidden = modelo.modo !== 'demo';
+    escrever(el.crew, modelo.crew);
+    escrever(el.situacao, SITUACAO[modelo.execucao]);
+    escrever(el.passo, modelo.passo && textoDoPasso(modelo.passo));
+    escrever(el.aviso, modelo.aviso);
+    escrever(el.frase, modelo.frase);
+    escrever(el.faixa, modelo.faixa);
+    escrever(el.parada, modelo.parada);
+    escrever(el.motivo, modelo.motivo && `Motivo da falha: ${modelo.motivo}`);
+    escrever(el.passagem, modelo.passagem && textoDaPassagem(modelo.passagem));
+    progresso(modelo);
+    seletor(modelo);
+    lista(modelo);
+  }
+  return { atualizar };
+}

package/templates/_opencrew/core/escritorio/quadro.js

@@ -0,0 +1,106 @@
+// O quadro de um instante (regra 28): a pose e a posição inteira de cada boneco, e o monitor de
+// cada mesa, calculados pelo tempo decorrido. Nada aqui conta quadros: o mesmo modelo no mesmo
+// instante dá sempre o mesmo quadro, e o percurso cujo tempo já passou aparece terminado.
+// Puro: sem DOM, sem relógio, sem rede. A hora entra por parâmetro.
+// Spec: fase-e1-escritorio-ao-vivo.md, regras 16, 18, 24 e 28 (repositório do OpenCrew).
+import { ANDAR_MS, COMEMORACAO_MS, DIGITAR_MS, IDA_MS, VOLTA_MS } from './animacao.js';
+import { pontoDaRota, rota } from './rota.js';
+
+/**
+ * As poses que `quadro` devolve. Cada uma é o molde do boneco com linhas trocadas (regra 16):
+ * `parado` é o molde; `digitar-a` e `digitar-b`, os braços no teclado; `mao`, o braço
+ * levantado; `andar-a` e `andar-b`, as pernas. O braço com papel vem à parte (`papel`), somado
+ * às pernas de quem anda.
+ */
+export const POSES = Object.freeze(['parado', 'digitar-a', 'digitar-b', 'mao', 'andar-a', 'andar-b']);
+/** O monitor animado avança um passo a cada 250 ms: os 4 passos dão a volta em 1 segundo. */
+export const MONITOR_MS = 250;
+const PASSOS_DO_MONITOR = 4;
+/** Quanto sobe, em pixels lógicos, quem comemora com o braço levantado. */
+export const PULO = 2;
+
+/** Em que passo de um ciclo de `total` cai o instante, quando o passo troca a cada `periodo`. */
+function fase(ms, periodo, total = 2) {
+  return Number.isFinite(ms) && ms > 0 ? Math.floor(ms / periodo) % total : 0;
+}
+
+/** Tempo desde o início de uma animação; `null` se não há, não começou ou já terminou. */
+function decorrido(marca, duracao, agoraMs) {
+  const ms = marca ? agoraMs - marca.inicioMs : Number.NaN;
+  return ms >= 0 && ms < duracao ? ms : null;
+}
+
+/** O âmbar pisca 1 vez por segundo (apaga na segunda metade); o aceso corre as linhas pelo passo. */
+function monitorDe(agente, agoraMs) {
+  const monitorFase = agente.monitorAnimado ? fase(agoraMs, MONITOR_MS, PASSOS_DO_MONITOR) : 0;
+  const apagou = agente.monitor === 'ambar' && monitorFase >= PASSOS_DO_MONITOR / 2;
+  return { monitor: apagou ? 'apagado' : agente.monitor, monitorFase };
+}
+
+function poseNaMesa(acao, agoraMs, semMovimento) {
+  if (acao === 'checkpoint') return 'mao';
+  if (acao !== 'working') return 'parado';
+  return semMovimento || fase(agoraMs, DIGITAR_MS) === 0 ? 'digitar-a' : 'digitar-b';
+}
+
+/** O boneco sentado na própria mesa, como o status manda. */
+function naMesa(agente, agoraMs, semMovimento) {
+  const { id, indice, mesa, aparencia, acao } = agente;
+  return {
+    id, indice, mesa, aparencia, acao,
+    pose: poseNaMesa(acao, agoraMs, semMovimento),
+    papel: false,
+    espelhado: false,
+    sentado: true,
+    x: mesa.boneco.x,
+    y: mesa.boneco.y,
+    destino: null,
+    ...monitorDe(agente, agoraMs),
+  };
+}
+
+/** Quem está no meio de uma entrega e o que muda no boneco dele; `null` se ninguém anda. */
+function caminhada(entrega, agentes, agoraMs) {
+  const ms = decorrido(entrega, IDA_MS + VOLTA_MS, agoraMs);
+  if (ms === null) return null;
+  const [de, para] = [entrega.deId, entrega.paraId].map((id) => agentes.find((a) => a?.id === id));
+  if (!de?.mesa || !para?.mesa) return null;
+  const ida = rota(de.mesa.indice, para.mesa.indice);
+  const onde = ms <= IDA_MS ? pontoDaRota(ida, ms / IDA_MS) : pontoDaRota([...ida].reverse(), (ms - IDA_MS) / VOLTA_MS);
+  const pose = fase(ms, ANDAR_MS) === 0 ? 'andar-a' : 'andar-b';
+  return { indice: de.indice, boneco: { ...onde, acao: 'entregando', pose, papel: ms < IDA_MS, sentado: false, destino: para.mesa.indice } };
+}
+
+/** Comemora na própria mesa: braço levantado e um pulo, depois o molde, a cada 0,3 s. */
+function comemorar(boneco, ms) {
+  const noAlto = fase(ms, DIGITAR_MS) === 0;
+  return { ...boneco, acao: 'comemorando', pose: noAlto ? 'mao' : 'parado', y: boneco.y - (noAlto ? PULO : 0) };
+}
+
+/**
+ * O que a cena pinta num instante: um boneco por agente com mesa, na ordem do elenco.
+ * @param {object} modelo o modelo de uma leitura; para haver entrega e comemoração, o que
+ *   `transicao` devolveu
+ * @param {number} agoraMs a hora, em milissegundos, no mesmo relógio passado a `transicao`
+ * @returns {object[]} cada boneco: `{ id, indice, mesa, aparencia, acao, pose, papel, espelhado,
+ *   sentado, x, y, destino, monitor, monitorFase }` · `acao`: a do modelo, ou `entregando`
+ *   (durante os 4 s da entrega) ou `comemorando` (durante os 4 s da comemoração; quem foi pulado
+ *   não comemora) · `pose`: uma de `POSES` · `papel`: leva o papel (só na ida) · `espelhado`:
+ *   desenhar o molde virado para a esquerda · `sentado`: está na própria mesa · `x`, `y`: canto
+ *   superior esquerdo do boneco, em pixel lógico inteiro · `destino`: índice da mesa de quem
+ *   recebe, ou `null` · `monitor`: a cor a pintar agora (`apagado`, `aceso`, `ambar` ou
+ *   `vermelho`) · `monitorFase`: 0 a 3, o passo das linhas do monitor aceso (0 se ele não anima)
+ *   · com `modelo.reduzirMovimento`: pose fixa e todos sentados, sem entrega nem comemoração
+ */
+export function quadro(modelo, agoraMs) {
+  const todos = Array.isArray(modelo?.agentes) ? modelo.agentes : [];
+  const { entrega = null, comemoracao = null } = modelo?.animacao ?? {};
+  const semMovimento = Boolean(modelo?.reduzirMovimento);
+  const andando = semMovimento ? null : caminhada(entrega, todos, agoraMs);
+  const festa = semMovimento ? null : decorrido(comemoracao, COMEMORACAO_MS, agoraMs);
+  return todos.filter((agente) => agente?.mesa).map((agente) => {
+    const boneco = naMesa(agente, agoraMs, semMovimento);
+    if (andando?.indice === agente.indice) return { ...boneco, ...andando.boneco };
+    return festa !== null && agente.acao !== 'skipped' ? comemorar(boneco, festa) : boneco;
+  });
+}

package/templates/_opencrew/core/escritorio/rota.js

@@ -0,0 +1,62 @@
+// O caminho de uma entrega (regra 28): do assento de quem entrega até a frente da mesa de quem
+// recebe, calculado direto da grade, sem busca de caminho. O boneco sai pelo corredor de trás da
+// própria mesa até o vão ao lado, anda pelo vão até o corredor da frente da mesa de destino e
+// segue por ele. Só trechos horizontais e verticais, em pixel lógico e inteiro; nenhum encosta
+// num tampo nem passa por cima de um colega sentado.
+// Puro: sem DOM, sem relógio, sem rede.
+// Spec: fase-e1-escritorio-ao-vivo.md, regra 28 (repositório do OpenCrew).
+import { VAOS_X, mesaDe } from './modelo-mesas.js';
+
+/**
+ * Índice (em `VAOS_X`) do vão por onde a entrega passa: o vizinho da coluna de origem, do lado
+ * do destino. Na mesma coluna, o da direita; na última coluna, o da esquerda.
+ */
+function vaoDe(origem, destino) {
+  if (destino > origem) return origem;
+  if (destino < origem) return origem - 1;
+  return origem < VAOS_X.length ? origem : origem - 1;
+}
+
+/**
+ * A rota entre duas mesas, pelo canto superior esquerdo do boneco.
+ * @param {number} de índice da mesa de quem entrega (0 a 11)
+ * @param {number} para índice da mesa de quem recebe (0 a 11)
+ * @returns {{ x: number, y: number }[] | null} quatro pontos: o assento de quem entrega, a
+ *   entrada do vão, a saída do vão e a frente da mesa de quem recebe; `null` se uma das mesas
+ *   não existe
+ */
+export function rota(de, para) {
+  const origem = mesaDe(de);
+  const destino = mesaDe(para);
+  if (!origem || !destino) return null;
+  const x = VAOS_X[vaoDe(origem.coluna, destino.coluna)];
+  return [{ ...origem.boneco }, { x, y: origem.boneco.y }, { x, y: destino.frente.y }, { ...destino.frente }];
+}
+
+const trechos = (pontos) => pontos.slice(1).map((fim, i) => [pontos[i], fim]);
+const tamanho = ([a, b]) => Math.abs(b.x - a.x) + Math.abs(b.y - a.y);
+
+/** Comprimento de uma rota, em pixels lógicos. */
+export function comprimentoDaRota(pontos) {
+  return trechos(pontos).reduce((soma, trecho) => soma + tamanho(trecho), 0);
+}
+
+/**
+ * Onde está quem já andou uma fração da rota, em velocidade constante.
+ * @param {{ x: number, y: number }[]} pontos a rota (ou ela invertida, para a volta)
+ * @param {number} fracao de 0 (o primeiro ponto) a 1 (o último); fora disso vale o extremo
+ * @returns {{ x: number, y: number, espelhado: boolean }} posição inteira · `espelhado`: o
+ *   último trecho horizontal andado foi para a esquerda
+ */
+export function pontoDaRota(pontos, fracao) {
+  let resta = Math.round(comprimentoDaRota(pontos) * Math.max(0, fracao));
+  let espelhado = false;
+  for (const [a, b] of trechos(pontos)) {
+    if (a.x !== b.x) espelhado = b.x < a.x;
+    if (resta <= tamanho([a, b])) {
+      return { x: a.x + Math.sign(b.x - a.x) * resta, y: a.y + Math.sign(b.y - a.y) * resta, espelhado };
+    }
+    resta -= tamanho([a, b]);
+  }
+  return { ...pontos.at(-1), espelhado };
+}

package/templates/_opencrew/core/escritorio/rotulos.js

@@ -0,0 +1,78 @@
+// Os rótulos sobre o desenho (regra 19): o nome de cada agente, sob a mesa dele, e o balão, sobre
+// o boneco, são elementos da página numa camada por cima do canvas, escritos só por
+// `textContent`. A posição vem das âncoras do modelo, em pixel lógico, e é aplicada em
+// porcentagem de 320×180; cada rótulo tem a largura de uma coluna, e o CSS corta o texto que não
+// cabe. A camada é `aria-hidden`: o leitor de tela lê a lista ao lado, que tem o texto inteiro.
+// Spec: fase-e1-escritorio-ao-vivo.md, regras 18 e 19 (repositório do OpenCrew).
+import { ALTURA, BONECO, LARGURA, LARGURA_COLUNA } from './modelo.js';
+
+/** Altura, em pixels lógicos, da faixa que o nome ocupa sob a mesa. */
+const ALTURA_DO_NOME = 10;
+/** Quanto sobra do nome enquanto um boneco em pé está por cima dele. */
+const QUASE_APAGADO = '0.15';
+
+const porcento = (valor, total) => `${(valor / total) * 100}%`;
+
+/** Um rótulo com a largura de uma coluna, centrado na âncora; o texto fica num `span`, que o CSS corta. */
+function criarRotulo(documento, { classe, texto, ancora }) {
+  const caixa = documento.createElement('div');
+  const tinta = documento.createElement('span');
+  caixa.className = classe;
+  caixa.style.left = porcento(ancora.x - LARGURA_COLUNA / 2, LARGURA);
+  caixa.style.width = porcento(LARGURA_COLUNA, LARGURA);
+  tinta.textContent = texto;
+  caixa.append(tinta);
+  return caixa;
+}
+
+/** O nome (sempre) e o balão (quando o modelo traz um) de um agente com mesa. */
+function criarItem(documento, { mesa, nome, balao, acao }) {
+  const item = { mesa, nome: criarRotulo(documento, { classe: 'nome', texto: nome, ancora: mesa.nome }), balao: null };
+  item.nome.style.top = porcento(mesa.nome.y, ALTURA);
+  if (balao === null) return item;
+  item.balao = criarRotulo(documento, { classe: acao === 'checkpoint' ? 'balao espera' : 'balao', texto: balao, ancora: mesa.balao });
+  item.balao.style.bottom = porcento(ALTURA - mesa.balao.y, ALTURA);
+  return item;
+}
+
+/** O boneco está sobre a faixa do nome desta mesa? */
+function cobre(boneco, { nome }) {
+  const esquerda = nome.x - LARGURA_COLUNA / 2;
+  const naColuna = boneco.x < esquerda + LARGURA_COLUNA && boneco.x + BONECO > esquerda;
+  return naColuna && boneco.y < nome.y + ALTURA_DO_NOME && boneco.y + BONECO > nome.y;
+}
+
+function opacidade(elemento, valor) {
+  if (elemento.style.opacity !== valor) elemento.style.opacity = valor;
+}
+
+/**
+ * A camada de nomes e balões.
+ * @param {object} camada o elemento que fica sobre o canvas, do mesmo tamanho dele
+ * @param {object} documento de quem vem o `createElement`
+ * @returns {{ atualizar: (agentes: object[]) => void, acompanhar: (bonecos: object[]) => void }}
+ *   `atualizar`: recebe os agentes do modelo a cada leitura e só refaz a camada quando um nome,
+ *   um balão ou uma mesa mudou · `acompanhar`: recebe os bonecos de cada quadro; o nome sob um
+ *   boneco em pé quase some, para não cobrir quem entrega, e o balão de quem saiu da mesa some
+ *   até ele voltar
+ */
+export function criarRotulos(camada, documento) {
+  let itens = [];
+  let escrito = '';
+  function atualizar(agentes) {
+    const comMesa = agentes.filter((agente) => agente.mesa);
+    const novo = JSON.stringify(comMesa.map((a) => [a.mesa.indice, a.nome, a.balao, a.acao]));
+    if (novo === escrito) return;
+    escrito = novo;
+    itens = comMesa.map((agente) => criarItem(documento, agente));
+    camada.replaceChildren(...itens.flatMap((item) => (item.balao ? [item.nome, item.balao] : [item.nome])));
+  }
+  function acompanhar(bonecos) {
+    const emPe = bonecos.filter((boneco) => !boneco.sentado);
+    for (const { mesa, nome, balao } of itens) {
+      opacidade(nome, emPe.some((boneco) => cobre(boneco, mesa)) ? QUASE_APAGADO : '');
+      if (balao) opacidade(balao, emPe.some((boneco) => boneco.indice === mesa.indice) ? '0' : '');
+    }
+  }
+  return { atualizar, acompanhar };
+}