@aksp/opencrew 1.6.3 → 1.7.0

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 };
+}

package/templates/_opencrew/core/escritorio/sprites-mesa.js

@@ -0,0 +1,122 @@
+// A mesa de cada agente e o que muda nela, em matrizes de pixels: o tampo com os pés, o monitor
+// com as telas de cada status e os sinais que aparecem sobre a cabeça do boneco (✓, "!" e "?"
+// são desenhos, não texto). Quem diz onde cada desenho vai é `cena.js`.
+// Spec: fase-e1-escritorio-ao-vivo.md, regras 16, 18 e 19 (repositório do OpenCrew).
+import { CORES, matriz } from './sprites.js';
+
+/**
+ * A mesa vista de cima e de frente: o tampo (com teclado, papel e caneca), a borda, a saia com a
+ * gaveta e os pés. Tem a largura do retângulo da mesa no modelo e `MESA_ACIMA` linhas a mais.
+ */
+export const MESA = matriz({
+  o: CORES.tinta, t: CORES.madeiraLuz, T: CORES.madeira, F: CORES.madeiraMedia, D: CORES.madeiraEscura, x: CORES.junta,
+  k: CORES.cinzaEscuro, K: CORES.cinzaClaro, w: CORES.branco, g: CORES.cinzaClaro, c: CORES.ceu, f: CORES.madeiraEscura,
+}, [
+  '.oooooooooooooooooooooooooooooooooooooooooo.',
+  'otttttttttttttttkkkkkkkkkkkkttttttttttttttto',
+  'oTTTTTTTTTTTTTTTkKKKKKKKKKKkTTTTwwwwwwTcccTo',
+  'oTTTTTTTTTTTTTTTkkkkkkkkkkkkTTTTwggggwTcfcTo',
+  'oTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTwwwwwwTcccTo',
+  'oTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTwgggwwTTTTTo',
+  'oTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTwwwwwwTTTTTo',
+  'oFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFo',
+  'oooooooooooooooooooooooooooooooooooooooooooo',
+  '.oDDDDDDDDDDDDDDDDDDFFFFDDDDDDDDDDDDDDDDDDo.',
+  '.oDDooooooooooooooooooooooooooooooooooooDDo.',
+  '.oDDoxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxoDDo.',
+  '.oDDoxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxoDDo.',
+  '.oDDo..................................oDDo.',
+  '.oooo..................................oooo.',
+]);
+
+/**
+ * Quantas linhas do desenho da mesa ficam acima do retângulo do tampo: é o fundo do tampo, que
+ * cobre as pernas de quem está sentado atrás dele.
+ */
+export const MESA_ACIMA = 4;
+
+/** O monitor, de frente para quem olha, com a tela apagada; a base pousa no fundo do tampo. */
+export const MONITOR = matriz({ o: CORES.tinta, g: CORES.cinzaEscuro, k: CORES.telaApagada, G: CORES.cinzaClaro }, [
+  'oooooooooooo',
+  'oggggggggggo',
+  'ogkkkkkkkkgo',
+  'ogkkkkkkkkgo',
+  'ogkkkkkkkkgo',
+  'ogkkkkkkkkgo',
+  'ogkkkkkkkkgo',
+  'oggggggggggo',
+  'oooooooooooo',
+  '....oGGo....',
+  '..oGGGGGGo..',
+  '..oooooooo..',
+]);
+
+/** Onde o monitor fica, a partir do canto do retângulo da mesa; e a tela, a partir do canto do monitor. */
+export const MONITOR_EM = Object.freeze({ x: 1, y: -13 });
+export const TELA_EM = Object.freeze({ x: 2, y: 2 });
+
+const CODIGO = ['vlllllvv', 'vvvvvvvv', 'vlllvllv', 'vvvvvvvv'];
+const LINHAS_DA_TELA = [0, 1, 2, 3, 4];
+
+/** O monitor aceso, uma tela por fase (0 a 3): as linhas de código sobem um pixel a cada fase. */
+export const TELAS_ACESAS = Object.freeze([0, 1, 2, 3].map((fase) => matriz(
+  { v: CORES.telaAcesa, l: CORES.verde },
+  LINHAS_DA_TELA.map((linha) => CODIGO[(linha + fase) % CODIGO.length]),
+)));
+
+/** Âmbar, com o sinal de pausa: está esperando o usuário. */
+export const TELA_AMBAR = matriz({ y: CORES.ambar, o: CORES.tinta }, [
+  'yyyyyyyy',
+  'yyoyyoyy',
+  'yyoyyoyy',
+  'yyoyyoyy',
+  'yyyyyyyy',
+]);
+
+/** Vermelha, com um xis: falhou. */
+export const TELA_VERMELHA = matriz({ r: CORES.vermelho, o: CORES.tinta }, [
+  'rrrrrrrr',
+  'rrorrorr',
+  'rrroorrr',
+  'rrorrorr',
+  'rrrrrrrr',
+]);
+
+/** Sobre a cabeça de quem concluiu. */
+export const SINAL_FEITO = matriz({ o: CORES.tinta, g: CORES.verde }, [
+  '......ooo',
+  '.....oogo',
+  'ooo.ooggo',
+  'ogoooggoo',
+  'oggoggoo.',
+  'oogggoo..',
+  '.oogoo...',
+  '..ooo....',
+]);
+
+/** Sobre a cabeça de quem falhou. */
+export const SINAL_FALHA = matriz({ o: CORES.tinta, r: CORES.vermelho }, [
+  'oooo',
+  'orro',
+  'orro',
+  'orro',
+  'orro',
+  'oooo',
+  'orro',
+  'oooo',
+]);
+
+/** Sobre a cabeça de quem trabalhava e está sem sinal. */
+export const SINAL_DUVIDA = matriz({ o: CORES.tinta, w: CORES.branco }, [
+  '.oooo.',
+  'oowwoo',
+  'owoowo',
+  'ooowoo',
+  '.owoo.',
+  '.ooo..',
+  '.owo..',
+  '.ooo..',
+]);
+
+/** A sombra no chão de quem está em pé, fora da mesa. */
+export const SOMBRA = matriz({ x: CORES.junta }, ['.xxxxxxxx.']);

package/templates/_opencrew/core/escritorio/sprites-sala.js

@@ -0,0 +1,92 @@
+// A sala do escritório, em matrizes de pixels: a parede do fundo, o piso em ladrilho de dois tons
+// e o que enfeita a parede (janela, relógio, planta). Quem diz onde cada desenho vai é `cena.js`.
+// Spec: fase-e1-escritorio-ao-vivo.md, regra 16 (repositório do OpenCrew).
+import { CORES, matriz } from './sprites.js';
+
+/**
+ * A parede, numa faixa de 8 px que se repete de lado a lado: sanca de madeira, papel de parede
+ * listrado e lambri. A altura é a da parede no modelo (`TOPO`).
+ */
+export const PAREDE = matriz({ m: CORES.madeiraMedia, d: CORES.madeiraEscura, p: CORES.parede, P: CORES.paredeSombra, h: CORES.madeiraLuz }, [
+  'mmmmmmmm',
+  'dddddddd',
+  'PPPPPPPP',
+  'pppppppP',
+  'pppppppP',
+  'pppppppP',
+  'pppppppP',
+  'pppppppP',
+  'pppppppP',
+  'pppppppP',
+  'pppppppP',
+  'pppppppP',
+  'pppppppP',
+  'pppppppP',
+  'hhhhhhhh',
+  'mmmmmmmm',
+  'mmmmmmmm',
+  'dddddddd',
+]);
+
+const LADRILHO_LINHAS = Object.freeze([
+  'jjjjjjjjjjjjjjjj',
+  'jaaaaaaaaaaaaaaa',
+  'jaaaaaaaaaaaaaaa',
+  'jaaaaaaaaaaaaaaa',
+  'jaaaaaaaaaaaaaaa',
+  'jaaaaaaaaaaaaaaa',
+  'jaaaaaaaaaaaaaaa',
+  'jaaaaaaaaaaaaaaa',
+  'jaaaaaaaaaaaaaaa',
+]);
+
+/** O ladrilho do piso, com a junta em cima e à esquerda; o claro e o escuro se alternam em xadrez. */
+export const LADRILHO = matriz({ j: CORES.junta, a: CORES.pisoClaro }, LADRILHO_LINHAS);
+export const LADRILHO_ESCURO = matriz({ j: CORES.junta, a: CORES.pisoEscuro }, LADRILHO_LINHAS);
+
+/** Janela de duas folhas: um reflexo no vidro da esquerda, uma nuvem no da direita. */
+export const JANELA = matriz({ o: CORES.tinta, w: CORES.branco, b: CORES.ceu, B: CORES.ceuClaro }, [
+  'oooooooooooooooooooooooo',
+  'owwwwwwwwwwwwwwwwwwwwwwo',
+  'owbbbbbBBbbwwbbbbbbbbbwo',
+  'owbbbbBBbbbwwbbbbwwbbbwo',
+  'owbbbBBbbbbwwbbwwwwwbbwo',
+  'owbbBBbbbbbwwbbbbbbbbbwo',
+  'owbBBbbbbbbwwbbbbbbbbbwo',
+  'owbbbbbbbbbwwbbbbbbbbbwo',
+  'owwwwwwwwwwwwwwwwwwwwwwo',
+  'oooooooooooooooooooooooo',
+]);
+
+/** Relógio de parede, parado nas três horas: nada na sala se mexe sem um agente trabalhando. */
+export const RELOGIO = matriz({ o: CORES.tinta, w: CORES.branco }, [
+  '..ooooo..',
+  '.owwwwwo.',
+  'owwwowwwo',
+  'owwwowwwo',
+  'owwwooowo',
+  'owwwwwwwo',
+  'owwwwwwwo',
+  '.owwwwwo.',
+  '..ooooo..',
+]);
+
+/** Planta em vaso de barro, para o chão junto à parede. */
+export const PLANTA = matriz({ o: CORES.tinta, g: CORES.folha, G: CORES.folhaEscura, t: CORES.madeiraEscura, v: CORES.madeiraMedia, V: CORES.madeiraEscura }, [
+  '...ooooo...',
+  '..oggggGo..',
+  '.oggGggggo.',
+  'oggggggGggo',
+  'ogGggggggGo',
+  'oggggGggggo',
+  '.ogGgggGgo.',
+  '..oggggGo..',
+  '...oGGGo...',
+  '....oto....',
+  '..ooooooo..',
+  '..ovvvvvo..',
+  '..ovvvvVo..',
+  '...ovvVo...',
+  '...ovvVo...',
+  '...ooooo...',
+]);