@the-inclusionist/engine 6.36.1

package/dist-pkg/render/city-tex.js

@@ -0,0 +1,228 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// render/city-tex — a ARTE PROCEDURAL DA RUA: os bichos, os pedestres e os carros do cenário Cidade.
+//
+// Três blocos que viviam soltos no main.js (`LIFE_TEX`, `ADULT_TEX`, `CAR_TEX`) e que são a MESMA coisa vista
+// de três ângulos: retângulos coloridos carimbados num canvas offscreen que vira PIXI.Texture. Por isso caem
+// juntos aqui, e não em três módulos: o que os une não é o assunto (bicho ≠ carro), é a TÉCNICA e o CONSUMIDOR
+// — quem os pede é a Cidade, e só ela. `render/props` (moeda, árvore) e `render/world-tex` (o nível inteiro)
+// ficam onde estão: props é decoração de QUALQUER cenário, world-tex é o mapa, não a rua.
+//
+// A DUPLICAÇÃO QUE ESTA EXTRAÇÃO CUROU: cada um dos três blocos declarava o SEU `mk` e o SEU `px`, com
+// assinaturas que não conversavam — `mk(w,h,paint)` com `px(x,y,w,h,cor)`; `mk(paint)` de 16×32 fixo com
+// `px(x,y,w,h)` e a cor presa numa `const` de fora; `mk(body,dark,top)` de 78×36 fixo com `px(x,y,w,h,cl)`.
+// Três grafias para "pinte um retângulo". Agora existe uma só, `pixelCanvas`/`pixelTexture` em render/canvas.
+// EFEITO COLATERAL ACEITO: as silhuetas de adulto passaram a receber a cor em CADA chamada (`ADULT_COL`) em vez
+// de um `fillStyle` único antes do laço. O bitmap resultante é idêntico ao byte — só o número de atribuições de
+// `fillStyle` muda —, e em troca some a última assinatura divergente.
+//
+// SEM I/O NO IMPORT — este é o ponto mais importante do arquivo. As texturas de origem nasciam em IIFE no corpo
+// do main.js, o que funciona lá porque o main.js só roda no navegador; um módulo em `render/` é importado pelo
+// project `node` do Vitest, onde `makeCanvas` toca `document` e explode. Por isso NÃO há constante pronta aqui:
+// há `createCityTextures()`, chamada uma vez pelo main.js no boot. Mesmo precedente de `render/textures`
+// (caches preenchidos por `initTextures`) e `render/viewports` (`initViewports`).
+//
+// A FRONTEIRA COM O JOGO NÃO SE MEXE: `game/life` e `game/traffic` continuam recebendo as texturas por INJEÇÃO
+// (`initLife({ lifeTex, adultTex, … })`, `initTraffic({ CAR_TEX, … })`) — eles nunca importaram este módulo e
+// continuam sem importar, para seguirem testáveis em `node` com texturas de mentira. O main.js é que passou a
+// buscar aqui o que antes fabricava em casa. Quem cria as CAMADAS (`lifeLayer`, `carLayer`) e solda o z-order
+// segue sendo o main.js: z-order é composição de cena, não arte.
+//
+// ARMADILHAS AO MEXER NA ARTE:
+//  · Os comentários de arte (`// cabeça alta / bicando`, `// M2: magro, de boné`, `// coluna B + retrovisor`)
+//    são a ÚNICA documentação de qual retângulo é qual parte da figura. Não os apague ao editar coordenadas.
+//  · A silhueta F2 NÃO chama `arms` — é verbatim do original, não esquecimento: os dois retângulos altos do
+//    cabelo longo (`2,4,3,13` e `11,4,3,13`) ocupam exatamente onde os braços iriam. Se um dia isso for
+//    "consertado", a F2 muda de forma no jogo.
+//  · Os carros são 3× NATIVOS (78×36 desenhados, sem upscale) porque a rua fica na camada da frente, perto da
+//    câmera; os bichos são 1× (7×6 … 13×9). Não normalize as escalas: `game/traffic` conta com os 78px.
+//  · Dois quadros por figura, sempre na ordem `[f0, f1]`: `game/life` alterna por índice (`f = f ? 0 : 1`).
+//    Inverter o par não quebra nenhum tipo — quebra a animação, em silêncio.
+import { pixelTexture } from './canvas.js';
+/* ===================== bichos: pombo, pombo voando, gato, cão ===================== */
+/** Pombo no chão 7×6 — corpo cinza, bico laranja, pés. f alterna cabeça alta ↔ bicando. */
+export const paintPombo = (f) => (px) => {
+    px(1, 2, 4, 2, '#9aa3b2');
+    px(0, 3, 2, 1, '#7d8695');
+    if (f === 0) {
+        px(4, 1, 2, 2, '#b9c2d0');
+        px(6, 2, 1, 1, '#e0a23c');
+    }
+    else {
+        px(4, 3, 2, 2, '#b9c2d0');
+        px(6, 4, 1, 1, '#e0a23c');
+    } // cabeça alta / bicando
+    px(2, 5, 1, 1, '#c96a2e');
+    px(4, 5, 1, 1, '#c96a2e');
+};
+/** Pombo em revoada 8×7 — mesmo corpo, asa batendo. */
+export const paintPomboFly = (f) => (px) => {
+    px(2, 3, 4, 2, '#9aa3b2');
+    px(6, 2, 2, 2, '#b9c2d0');
+    px(7, 3, 1, 1, '#e0a23c');
+    if (f === 0)
+        px(1, 0, 4, 2, '#c8d0dc');
+    else
+        px(1, 5, 4, 2, '#c8d0dc'); // asa cima/baixo
+};
+/** Gato 12×8 — corpo/cabeça/orelhas/rabo escuros, olho verde; f alterna as patas. */
+export const paintGato = (f) => (px) => {
+    px(1, 3, 8, 3, '#454b58');
+    px(8, 1, 3, 3, '#454b58');
+    px(8, 0, 1, 1, '#454b58');
+    px(10, 0, 1, 1, '#454b58');
+    px(0, 2, 1, 3, '#454b58');
+    px(9, 2, 1, 1, '#9fe07a');
+    if (f === 0) {
+        px(2, 6, 1, 2, '#454b58');
+        px(7, 6, 1, 2, '#454b58');
+    }
+    else {
+        px(3, 6, 1, 2, '#454b58');
+        px(6, 6, 1, 2, '#454b58');
+    }
+};
+/** Cão 13×9 — corpo marrom, focinho escuro, orelha; f alterna as patas. */
+export const paintCao = (f) => (px) => {
+    px(1, 3, 9, 4, '#8a6a44');
+    px(9, 1, 4, 4, '#8a6a44');
+    px(12, 2, 1, 2, '#3a2d1c');
+    px(9, 0, 2, 2, '#6d5334');
+    px(0, 2, 1, 3, '#8a6a44');
+    if (f === 0) {
+        px(2, 7, 1, 2, '#6d5334');
+        px(8, 7, 1, 2, '#6d5334');
+    }
+    else {
+        px(3, 7, 1, 2, '#6d5334');
+        px(7, 7, 1, 2, '#6d5334');
+    }
+};
+/** Catálogo dos bichos: tamanho do canvas + painter por quadro. Fonte única que `createCityTextures` percorre
+ *  e que o teste de regressão de arte itera — as chaves são as MESMAS que `game/life` lê em `LifeTexAtlas`. */
+export const CREATURE_ART = {
+    pombo: { w: 7, h: 6, paint: paintPombo },
+    pomboFly: { w: 8, h: 7, paint: paintPomboFly },
+    gato: { w: 12, h: 8, paint: paintGato },
+    cao: { w: 13, h: 9, paint: paintCao },
+};
+/* ===================== adultos: 6 silhuetas 16×32 ===================== */
+// Adultos = SILHUETAS 16×32 (mesma proporção/tamanho do personagem), formatos distintos M/F (pedido do José)
+/** Tamanho da silhueta — casado com o do personagem jogável (render/sprites). */
+export const ADULT_W = 16, ADULT_H = 32;
+/** Cor única de toda silhueta (era o `const col` fora do `mk` no main.js). */
+export const ADULT_COL = '#262b38';
+/** Pernas: calça (duas colunas alternando o passo) ou saia + pernas curtas. */
+const legs = (px, f, skirt) => {
+    if (skirt) {
+        px(4, 20, 8, 6, ADULT_COL);
+        if (f === 0) {
+            px(5, 26, 2, 6, ADULT_COL);
+            px(9, 26, 2, 6, ADULT_COL);
+        }
+        else {
+            px(4, 26, 2, 6, ADULT_COL);
+            px(10, 26, 2, 6, ADULT_COL);
+        }
+    }
+    else {
+        if (f === 0) {
+            px(5, 20, 3, 12, ADULT_COL);
+            px(9, 20, 3, 11, ADULT_COL);
+        }
+        else {
+            px(4, 20, 3, 11, ADULT_COL);
+            px(10, 20, 3, 12, ADULT_COL);
+        }
+    }
+};
+/** Braços pendentes, defasados entre os quadros (dá o balanço da caminhada). */
+const arms = (px, f) => {
+    if (f === 0) {
+        px(2, 10, 2, 8, ADULT_COL);
+        px(12, 10, 2, 8, ADULT_COL);
+    }
+    else {
+        px(2, 11, 2, 7, ADULT_COL);
+        px(12, 9, 2, 8, ADULT_COL);
+    }
+};
+/** As 6 silhuetas — 3 masculinas + 3 femininas, todas 16×32. A ordem é a do original (M1, M2, M3, F1, F2, F3);
+ *  `game/life` sorteia por índice, então reordenar troca qual silhueta cada sorteio produz. */
+export const ADULT_SHAPES = [
+    (f) => (px) => { px(4, 0, 8, 6, ADULT_COL); px(3, 6, 10, 14, ADULT_COL); arms(px, f); legs(px, f, false); }, // M1: ombros largos
+    (f) => (px) => { px(5, 0, 6, 5, ADULT_COL); px(3, 1, 10, 2, ADULT_COL); px(5, 5, 6, 15, ADULT_COL); arms(px, f); legs(px, f, false); }, // M2: magro, de boné
+    (f) => (px) => { px(4, 1, 8, 5, ADULT_COL); px(2, 6, 12, 14, ADULT_COL); arms(px, f); legs(px, f, false); }, // M3: troncudo
+    (f) => (px) => { px(4, 0, 8, 6, ADULT_COL); px(11, 3, 3, 10, ADULT_COL); px(4, 6, 8, 10, ADULT_COL); px(3, 16, 10, 5, ADULT_COL); arms(px, f); legs(px, f, true); }, // F1: rabo de cavalo + saia
+    (f) => (px) => { px(3, 0, 10, 6, ADULT_COL); px(2, 4, 3, 13, ADULT_COL); px(11, 4, 3, 13, ADULT_COL); px(5, 6, 6, 10, ADULT_COL); px(4, 16, 8, 5, ADULT_COL); legs(px, f, true); }, // F2: cabelo longo + vestido (sem `arms` — ver o cabeçalho)
+    (f) => (px) => { px(3, 0, 10, 7, ADULT_COL); px(4, 7, 8, 9, ADULT_COL); px(3, 16, 10, 5, ADULT_COL); arms(px, f); legs(px, f, true); }, // F3: chanel + saia
+];
+/* ===================== carros: 4 cores, 78×36 (3× nativo) ===================== */
+/** Tamanho do carro — 3× NATIVO (detalhado, sem upscale); `game/traffic` conta com os 78px de largura. */
+export const CAR_W = 78, CAR_H = 36;
+/** As 4 pinturas de fábrica: `[lataria, sombra, teto]`. */
+export const CAR_PALETTES = [
+    ['#c8452e', '#7d2717', '#a03a24'], // vermelho
+    ['#2e6fc8', '#193f7d', '#2757a0'], // azul
+    ['#3aa15b', '#1f6336', '#2f8a4c'], // verde
+    ['#c8a12e', '#7d641a', '#a8862a'], // amarelo
+];
+/* ===================== A RODA É REDONDA, E ISSO PRECISOU SER DITO =====================
+ * A primeira versão do carro (portada verbatim do monólito) fazia o pneu com UM retângulo de 14×11. Numa
+ * arte de retângulos carimbados, a roda é o único elemento que o olho sabe de cor que é redondo — e é o
+ * primeiro que denuncia o desenho inteiro. O Dev, olhando a rua: "melhore os carros, estão muito feios com
+ * as rodas quadradas."
+ *
+ * O jeito de ter círculo aqui é o de sempre em pixel art: uma TABELA de linhas, cada uma com o recuo e a
+ * largura daquela altura. Não é aproximação de matemática em tempo de execução — é o desenho, escrito. */
+/** Pneu Ø14: `[recuo, largura]` por linha, de cima para baixo. */
+const PNEU = [
+    [5, 4], [3, 8], [2, 10], [1, 12], [1, 12], [0, 14], [0, 14],
+    [0, 14], [0, 14], [1, 12], [1, 12], [2, 10], [3, 8], [5, 4],
+];
+/** Aro Ø8, no mesmo formato — desenhado dentro do pneu. */
+const ARO = [
+    [2, 4], [1, 6], [0, 8], [0, 8], [0, 8], [0, 8], [1, 6], [2, 4],
+];
+/** Um carro 78×36 na paleta dada. Vidros, brilhos, farol e lanterna são fixos (não seguem a lataria). */
+export const paintCar = (body, dark, top) => (px) => {
+    px(3, 14, 72, 13, body);
+    px(3, 25, 72, 2, dark); // corpo + saia escura
+    px(1, 16, 2, 8, dark);
+    px(75, 16, 2, 8, dark); // para-choques
+    // Cabine com o teto AFUNILADO: eram 40px de bloco reto, e teto reto num carro de perfil lê como caixa.
+    px(17, 4, 36, 2, top);
+    px(15, 6, 40, 9, top);
+    px(17, 6, 36, 9, body);
+    px(19, 7, 14, 7, '#bcd6ee');
+    px(37, 7, 14, 7, '#bcd6ee'); // vidros
+    px(20, 8, 4, 2, '#eef6ff');
+    px(38, 8, 4, 2, '#eef6ff'); // brilho dos vidros
+    px(34, 7, 3, 7, top);
+    px(53, 10, 4, 4, dark); // coluna B + retrovisor
+    px(3, 14, 72, 1, 'rgba(255,255,255,.28)'); // realce superior da lataria
+    px(35, 15, 1, 10, dark); // frisa entre as duas portas
+    px(0, 17, 3, 5, '#ffd9a0');
+    px(75, 17, 3, 5, '#ff6a5a'); // farol / lanterna
+    const wheel = (wx) => {
+        px(wx + 1, 20, 12, 2, dark);
+        px(wx - 1, 21, 16, 1, dark); // caixa de roda, em arco
+        PNEU.forEach(([dx, w], i) => px(wx + dx, 22 + i, w, 1, '#10131a')); // pneu
+        ARO.forEach(([dx, w], i) => px(wx + 3 + dx, 25 + i, w, 1, '#2b3140')); // aro
+        px(wx + 6, 28, 2, 2, '#8a93a8'); // cubo
+    };
+    wheel(11);
+    wheel(53);
+};
+/** Assa TODA a arte da rua de uma vez. TOCA `document` — chame só no boot do navegador, nunca no import.
+ *  Não memoiza de propósito: é chamada uma vez pelo main.js; um cache aqui só esconderia uma segunda chamada. */
+export function createCityTextures() {
+    const pair = (w, h, paint) => [pixelTexture(w, h, paint(0)), pixelTexture(w, h, paint(1))]; // ordem [f0, f1] — game/life alterna por índice
+    const lifeTex = {};
+    for (const k of Object.keys(CREATURE_ART)) {
+        const a = CREATURE_ART[k];
+        lifeTex[k] = pair(a.w, a.h, a.paint);
+    }
+    const adultTex = ADULT_SHAPES.map((v) => pair(ADULT_W, ADULT_H, v));
+    const carTex = CAR_PALETTES.map(([body, dark, top]) => pixelTexture(CAR_W, CAR_H, paintCar(body, dark, top)));
+    return { lifeTex, adultTex, carTex };
+}

package/dist-pkg/render/city-tiles.d.ts

@@ -0,0 +1,11 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+import { type PixelPainter } from './canvas.js';
+/** O TILE do miolo da parede: alvenaria em fiada alternada. 51 retângulos, 9 cores, fiel ao pixel. */
+export declare const paintTileFill: PixelPainter;
+/** O TILE do TOPO da plataforma: mesma alvenaria com a borda superior iluminada. 62 retângulos, 23 cores. */
+export declare const paintTileSurface: PixelPainter;
+/** Os dois tiles como canvas 16×16 — a forma que `worldCanvas` consumia das imagens carregadas. */
+export declare function cityTiles(): {
+    fill: HTMLCanvasElement;
+    surface: HTMLCanvasElement;
+};

package/dist-pkg/render/city-tiles.js

@@ -0,0 +1,140 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// render/city-tiles.ts — OS DOIS TILES DA CIDADE, como DADOS e não como PNG (pilar "arte = dados", ADR-0010).
+//
+// `tile_fill` e `tile_surface` eram dois PNG de 16×16 baixados por `carregarTilesDoTema`. Aqui eles voltam como
+// `PixelPainter` — a mesma forma que `render/city-tex` já usa para os pombos, os gatos e as silhuetas: uma
+// lista de retângulos `px(x, y, w, h, cor)`.
+//
+// POR QUE RETÂNGULOS E NÃO UMA REGRA DE ALVENARIA. A primeira tentativa foi inferir a regra (tijolo 7×6, junta
+// de 1 px, fiada alternada, bisel) e gerá-la. Deu 66% de acerto exato: a arte tem variação FEITA À MÃO — o
+// bisel muda de tijolo para tijolo, e nenhuma regra curta a alcança. A decomposição em retângulos custa 51 e
+// 62 chamadas e acerta 100%. Entre uma regra elegante que erra um quinto dos pixels e uma lista que acerta
+// todos, num tile de 16×16 desenhado à mão, a lista é a resposta honesta.
+//
+// O QUE ISSO COMPRA, além de tirar dois PNG do pacote: o desenho passa a ser recolorível (o alto contraste e
+// as paletas seguras para daltonismo mexem em cores, não em bitmaps), some o carregamento assíncrono — e com
+// ele a guarda de corrida de `set-cenario` e os 404 de boot dos temas que não têm arte própria.
+import { pixelCanvas } from './canvas.js';
+/** O TILE do miolo da parede: alvenaria em fiada alternada. 51 retângulos, 9 cores, fiel ao pixel. */
+export const paintTileFill = (px) => {
+    px(0, 0, 1, 1, '#403b48');
+    px(1, 0, 3, 1, '#b8b6c1');
+    px(4, 0, 2, 1, '#bcbdc9');
+    px(6, 0, 2, 1, '#828291');
+    px(8, 0, 1, 1, '#403b48');
+    px(9, 0, 1, 1, '#b1b0bc');
+    px(10, 0, 4, 1, '#b8b6c1');
+    px(14, 0, 2, 1, '#403b48');
+    px(0, 1, 1, 1, '#b1b0bc');
+    px(1, 1, 6, 5, '#828291');
+    px(7, 1, 1, 4, '#403b48');
+    px(8, 1, 1, 5, '#b8b6c1');
+    px(9, 1, 6, 5, '#828291');
+    px(15, 1, 1, 5, '#393543');
+    px(0, 2, 1, 3, '#b8b6c1');
+    px(0, 5, 1, 1, '#b1b0bc');
+    px(7, 5, 1, 1, '#3e2e3f');
+    px(0, 6, 1, 3, '#403b48');
+    px(1, 6, 1, 1, '#777485');
+    px(2, 6, 4, 1, '#828291');
+    px(6, 6, 3, 3, '#403b48');
+    px(9, 6, 5, 1, '#828291');
+    px(14, 6, 2, 2, '#403b48');
+    px(1, 7, 5, 1, '#403b48');
+    px(9, 7, 5, 1, '#403b48');
+    px(1, 8, 1, 1, '#b1b0bc');
+    px(2, 8, 2, 1, '#b8b6c1');
+    px(4, 8, 1, 1, '#bcbdc9');
+    px(5, 8, 1, 1, '#b1b0bc');
+    px(9, 8, 1, 1, '#b1b0bc');
+    px(10, 8, 2, 1, '#b8b6c1');
+    px(12, 8, 1, 1, '#bcbdc9');
+    px(13, 8, 1, 1, '#b1b0bc');
+    px(14, 8, 1, 1, '#403b48');
+    px(15, 8, 1, 1, '#393543');
+    px(0, 9, 1, 5, '#b1b0bc');
+    px(1, 9, 6, 5, '#828291');
+    px(7, 9, 1, 3, '#403b48');
+    px(8, 9, 1, 5, '#b8b6c1');
+    px(9, 9, 6, 5, '#828291');
+    px(15, 9, 1, 2, '#403b48');
+    px(15, 11, 1, 3, '#393543');
+    px(7, 12, 1, 2, '#393543');
+    px(0, 14, 1, 2, '#403b48');
+    px(1, 14, 5, 1, '#828291');
+    px(6, 14, 3, 2, '#403b48');
+    px(9, 14, 5, 1, '#828291');
+    px(14, 14, 2, 2, '#403b48');
+    px(1, 15, 1, 1, '#444653');
+    px(2, 15, 4, 1, '#403b48');
+    px(9, 15, 5, 1, '#403b48');
+};
+/** O TILE do TOPO da plataforma: mesma alvenaria com a borda superior iluminada. 62 retângulos, 23 cores. */
+export const paintTileSurface = (px) => {
+    px(0, 0, 1, 1, '#8b8994');
+    px(1, 0, 3, 1, '#bbbac5');
+    px(4, 0, 2, 1, '#bdbdc8');
+    px(6, 0, 2, 1, '#a6a5b2');
+    px(8, 0, 1, 1, '#8b8994');
+    px(9, 0, 1, 1, '#b8b7c3');
+    px(10, 0, 4, 1, '#bbbac5');
+    px(14, 0, 2, 1, '#8b8994');
+    px(0, 1, 1, 1, '#b6b5c1');
+    px(1, 1, 6, 1, '#9b9aa8');
+    px(7, 1, 1, 1, '#74717d');
+    px(8, 1, 1, 1, '#bab8c3');
+    px(9, 1, 6, 1, '#9b9aa8');
+    px(15, 1, 1, 1, '#706e7a');
+    px(0, 2, 1, 1, '#b9b7c2');
+    px(1, 2, 6, 1, '#90909e');
+    px(7, 2, 1, 1, '#5e5a66');
+    px(8, 2, 1, 1, '#b9b7c2');
+    px(9, 2, 6, 1, '#90909e');
+    px(15, 2, 1, 1, '#585562');
+    px(0, 3, 1, 2, '#b8b6c1');
+    px(1, 3, 6, 3, '#828291');
+    px(7, 3, 1, 2, '#403b48');
+    px(8, 3, 1, 3, '#b8b6c1');
+    px(9, 3, 6, 3, '#828291');
+    px(15, 3, 1, 3, '#393543');
+    px(0, 5, 1, 1, '#b1b0bc');
+    px(7, 5, 1, 1, '#3e2e3f');
+    px(0, 6, 1, 3, '#403b48');
+    px(1, 6, 1, 1, '#777485');
+    px(2, 6, 4, 1, '#828291');
+    px(6, 6, 3, 3, '#403b48');
+    px(9, 6, 5, 1, '#828291');
+    px(14, 6, 2, 2, '#403b48');
+    px(1, 7, 5, 1, '#403b48');
+    px(9, 7, 5, 1, '#403b48');
+    px(1, 8, 1, 1, '#b1b0bc');
+    px(2, 8, 2, 1, '#b8b6c1');
+    px(4, 8, 1, 1, '#bcbdc9');
+    px(5, 8, 1, 1, '#b1b0bc');
+    px(9, 8, 1, 1, '#b1b0bc');
+    px(10, 8, 2, 1, '#b8b6c1');
+    px(12, 8, 1, 1, '#bcbdc9');
+    px(13, 8, 1, 1, '#b1b0bc');
+    px(14, 8, 1, 1, '#403b48');
+    px(15, 8, 1, 1, '#393543');
+    px(0, 9, 1, 5, '#b1b0bc');
+    px(1, 9, 6, 5, '#828291');
+    px(7, 9, 1, 3, '#403b48');
+    px(8, 9, 1, 5, '#b8b6c1');
+    px(9, 9, 6, 5, '#828291');
+    px(15, 9, 1, 2, '#403b48');
+    px(15, 11, 1, 3, '#393543');
+    px(7, 12, 1, 2, '#393543');
+    px(0, 14, 1, 2, '#403b48');
+    px(1, 14, 5, 1, '#828291');
+    px(6, 14, 3, 2, '#403b48');
+    px(9, 14, 5, 1, '#828291');
+    px(14, 14, 2, 2, '#403b48');
+    px(1, 15, 1, 1, '#444653');
+    px(2, 15, 4, 1, '#403b48');
+    px(9, 15, 5, 1, '#403b48');
+};
+/** Os dois tiles como canvas 16×16 — a forma que `worldCanvas` consumia das imagens carregadas. */
+export function cityTiles() {
+    return { fill: pixelCanvas(16, 16, paintTileFill), surface: pixelCanvas(16, 16, paintTileSurface) };
+}

package/dist-pkg/render/crt.d.ts

@@ -0,0 +1,19 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+type CrtCfg = {
+    scan: number;
+    vig: number;
+    round: number;
+};
+/** O CRT de fábrica. Ganhou nome porque o "restaurar padrões" do menu (ADR-0028) precisa do MESMO valor que
+ *  a carga do boot usa quando nada foi salvo — duas cópias seriam duas chances de o reset devolver um CRT que
+ *  o jogo nunca mostrou. Congelado: um padrão que alguém consiga escrever em tempo de execução não é padrão. */
+export declare const CRT_DEFAULT: Readonly<CrtCfg>;
+/** Liga a contagem de jogadores e a pergunta de a11y. Chamado uma vez pela raiz, antes do 1º `applyCrt()`. */
+export declare function initCrt(deps: {
+    numJogadores: () => number;
+    a11yVisualAtiva: () => boolean;
+}): void;
+export declare const CRT: CrtCfg;
+export declare function crtScanVars(): void;
+export declare function applyCrt(): void;
+export {};

package/dist-pkg/render/crt.js

@@ -0,0 +1,92 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// render/crt.ts — estética CRT (menu Sensibilidade visual): scanlines/vinheta/cantos, só CSS (classes em
+// #game-region). Extraído do game.js (Estágio 4, Tier 1). CRT = config {scan,vig,round} (0=off,1,2; scan/vig são
+// on/off) carregada do localStorage com migração do formato antigo booleano. crtScanVars ancora a scanline em
+// PIXELS REAIS (recomputa da altura real do #game-region + dpr → 1 linha por pixel de arte, espaçamento regular).
+// Auto-contido: depende de ui/dom ($). A contagem de jogadores entra por `initCrt` (ver abaixo).
+import { $ } from '../ui/dom.js';
+import { screenGrid } from '../core/screens.js';
+import * as store from '../platform/storage.js';
+// scanline LIGADA por padrão (decisão do José 2026-07-03). Migra incl_crt (booleano) → incl_crt2 (níveis 0..2).
+/** O CRT de fábrica. Ganhou nome porque o "restaurar padrões" do menu (ADR-0028) precisa do MESMO valor que
+ *  a carga do boot usa quando nada foi salvo — duas cópias seriam duas chances de o reset devolver um CRT que
+ *  o jogo nunca mostrou. Congelado: um padrão que alguém consiga escrever em tempo de execução não é padrão. */
+export const CRT_DEFAULT = Object.freeze({ scan: 1, vig: 0, round: 1 });
+// A CONTAGEM DE JOGADORES entra por injeção desde 2026-08-26. Era `numPlayers`, um `let` de `core/state`
+// importado como binding vivo — e um `let` de módulo é compartilhado por qualquer segundo jogo que a
+// mesma página carregue (D13 do `demos`, ADR-0038). O que entra aqui é o GETTER da rodada que a raiz
+// possui; o `let` que sobra guarda a função, não o número.
+let _numJogadores = () => 1;
+/**
+ * ALGUM jogador está num modo de acessibilidade visual? (qualquer coisa que não seja `normal`.)
+ *
+ * O ADR-0020 decide: "modos de a11y SUPRIMEM o CRT/efeitos decorativos — precedência a11y > estética". Isso
+ * nunca tinha sido implementado, e a emenda de 2026-08-26 mediu: com a vinheta ligada, `crt-vig-1` sobrevivia
+ * em `hc-direto`, `fix-deuter`, `lv-blur` e `blind`. Uma vinheta escurecendo as bordas trabalha contra o modo
+ * que existe para AUMENTAR contraste.
+ *
+ * `ALGUM` e não "o jogador 1": o CRT é decoração GLOBAL, uma só para a tela inteira. Não há como escurecer as
+ * bordas de meia tela. Se a decoração e a acessibilidade de qualquer criança se contradizem, quem cede é a
+ * decoração — que é literalmente o que "precedência a11y > estética" quer dizer.
+ */
+let _a11yVisualAtiva = () => false;
+/** Liga a contagem de jogadores e a pergunta de a11y. Chamado uma vez pela raiz, antes do 1º `applyCrt()`. */
+export function initCrt(deps) {
+    _numJogadores = deps.numJogadores;
+    _a11yVisualAtiva = deps.a11yVisualAtiva;
+}
+export const CRT = (() => {
+    const d = { ...CRT_DEFAULT };
+    try {
+        const s = JSON.parse(store.get(store.KEYS.crt, null) || store.get(store.KEYS.crtLegacy, null) || 'null');
+        const fresh = !store.get(store.KEYS.crt, null); // migração p/ crt2: herda vig/round; scan volta ao padrão ON uma vez
+        if (s && typeof s === 'object')
+            for (const k in d)
+                if (k in s) {
+                    const v = s[k];
+                    if (fresh && k === 'scan')
+                        continue;
+                    d[k] = v === true ? (k === 'round' ? 2 : 1) : v === false ? (k === 'round' ? 1 : 0) : Math.max(0, Math.min(2, v | 0));
+                }
+    }
+    catch (e) { /* noop: file:// / modo privado */ }
+    d.scan = d.scan ? 1 : 0;
+    d.vig = d.vig ? 1 : 0; // scanlines/vinheta são ON/OFF (só cantos têm 3 níveis)
+    return d;
+})();
+// Ancora a scanline em px REAIS: 1 linha por pixel de ARTE (kDev inteiro) → espaçamento SEMPRE regular em qualquer dpr.
+export function crtScanVars() {
+    const g = $('#game-region');
+    if (!g || !CRT.scan)
+        return;
+    const { rows } = screenGrid(_numJogadores()), dpr = window.devicePixelRatio || 1;
+    const perDev = Math.max(2, Math.round((g.clientHeight || 360) * dpr / (180 * rows))); // kDev = px REAIS por linha de arte (INTEIRO)
+    g.style.setProperty('--scan-per', (perDev / dpr) + 'px'); // período = kDev px reais (1 linha de arte)
+    g.style.setProperty('--scan-line', (Math.max(1, Math.round(dpr)) / dpr) + 'px'); // linha = 1 px REAL
+}
+// Aplica as classes CSS de CRT ao #game-region e persiste. Chamado no boot e ao mexer no menu.
+export function applyCrt() {
+    const g = $('#game-region');
+    if (!g)
+        return;
+    ['crt-scan-1', 'crt-vig-1', 'crt-round-0', 'crt-round-2'].forEach((c) => g.classList.remove(c));
+    // OS DOIS EFEITOS CEDEM À ACESSIBILIDADE, SEM EXCEÇÃO (ADR-0020 + ADR-0047).
+    //
+    // Houve uma versão com uma chave de escape por efeito, a pedido do Dev. Ele a removeu depois de VER o
+    // resultado na tela: "Ceder fez muito bem ao jogo nos modos de acessibilidade". Fica anotado porque a
+    // ausência da chave é decisão, não esquecimento — e porque o pilar 2 volta a não ter exceção nenhuma.
+    //
+    // O valor gravado NÃO é alterado: a preferência continua lá e volta a valer sozinha ao sair do modo de
+    // acessibilidade. Suprimir não é desligar — é a distinção que impede a criança de perder o que escolheu
+    // toda vez que liga o alto contraste.
+    const a11y = _a11yVisualAtiva();
+    if (CRT.scan && !a11y) {
+        g.classList.add('crt-scan-' + CRT.scan);
+        crtScanVars();
+    }
+    if (CRT.vig && !a11y)
+        g.classList.add('crt-vig-' + CRT.vig);
+    if (CRT.round !== 1)
+        g.classList.add('crt-round-' + CRT.round); // 1 = visual padrão (8px), sem classe
+    store.setJSON(store.KEYS.crt, CRT);
+}

package/dist-pkg/render/cvd-matrices.d.ts

@@ -0,0 +1,35 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+/** As seis chaves de modo de daltonismo — as MESMAS chaves de `VIZ_MODES` em render/viz-modes. */
+export type CvdKey = 'sim-protan' | 'sim-deuter' | 'sim-tritan' | 'fix-protan' | 'fix-deuter' | 'fix-tritan';
+/** Ordem canônica: as três simulações (o que a pessoa vê) antes das três correções (o que a ajuda a ver). */
+export declare const CVD_KEYS: readonly CvdKey[];
+/**
+ * As matrizes, 4×5 em ordem de linha. Linha A = `0 0 0 1 0` em todas: nenhum dos seis modos mexe em alfa.
+ *
+ * SIMULAÇÃO (Machado, Oliveira & Fernandes 2009, severidade 1.0 — valores conferidos na página dos autores,
+ * UFRGS). CORREÇÃO (daltonização canônica): a linha R é identidade — não adianta modular o canal que a pessoa
+ * não distingue — e o erro é reinjetado em G e B, onde há discriminação; a soma de cada linha é 1, então
+ * branco e cinzas ficam preservados.
+ */
+export declare const CVD_MATRIX: Record<CvdKey, readonly number[]>;
+/**
+ * Modo → id do `<filter>` SVG. Os ids são API PÚBLICA deste módulo: `VIZ_FILTER` (render/viz-modes) pede o
+ * filtro pelo `url(#…)`, e é este mapa que promete que o filtro com aquele id vai existir no documento.
+ * Renomear um id aqui sem renomear lá apaga a canvas (referência de filtro inexistente não renderiza).
+ */
+export declare const CVD_SVG_ID: Record<CvdKey, string>;
+/** Atributo `values` de um `<feColorMatrix>`: as 4 linhas separadas por espaço duplo (legibilidade). PURA. */
+export declare function cvdMatrixValues(k: CvdKey): string;
+/**
+ * Gera os seis `<filter>` DENTRO do `<defs id="cvd-defs">` do index.html, a partir de `CVD_MATRIX`.
+ *
+ * Por que no boot e não escrito à mão no HTML: era exatamente a segunda cópia dos números. Construído com
+ * `createElementNS` (e não `innerHTML`) porque `<filter>`/`<feColorMatrix>` só funcionam no namespace SVG —
+ * com innerHTML o resultado depende do algoritmo de fragmento do navegador.
+ *
+ * Idempotente: esvazia o host antes de preencher, então chamar duas vezes não duplica ids (id duplicado faria
+ * o navegador escolher o primeiro — falha silenciosa outra vez).
+ *
+ * @returns quantos filtros foram instalados (0 = host ausente; o chamador decide se isso é fatal).
+ */
+export declare function installCvdFilters(host: Element | null | undefined): number;

package/dist-pkg/render/cvd-matrices.js

@@ -0,0 +1,91 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// render/cvd-matrices — as SEIS matrizes de daltonismo (3 SIMULAÇÕES Machado 2009 sev. 1.0 + 3 CORREÇÕES
+// C = I + M_err·(I − Sim), M_err de Fidaner et al.), num só lugar. Módulo-folha: ZERO dependências.
+//
+// A DUPLICAÇÃO QUE ESTE MÓDULO CURA (a sétima do refactor). Os mesmos 120 números existiam escritos DUAS
+// vezes, em linguagens diferentes:
+//   · `<feColorMatrix values="…">` em app/index.html — caminho de TELA ÚNICA (`filter: url(#cvd-…)` na
+//     <canvas>); render/viz-modes só guarda o `url(#cvd-deuter)`, nunca os números.
+//   · `PIXI.ColorMatrixFilter` dentro de `pixiFilterFor` no game.js — caminho MULTI-TELA (filtro GPU por
+//     viewport, um modo por jogador).
+// Batiam por sorte: nada ligava as duas cópias. Se divergissem, o sintoma seria SILENCIOSO e de
+// ACESSIBILIDADE — a MESMA pessoa daltônica veria cores diferentes em tela única e em multi-tela, sem erro,
+// sem log, sem teste vermelho. Agora os dois caminhos leem daqui: `render/viewports` monta o
+// ColorMatrixFilter com estes arrays, e `installCvdFilters()` GERA os seis `<filter>` do index.html no boot
+// a partir dos mesmos arrays (o HTML só guarda o `<defs id="cvd-defs">` vazio que os recebe).
+//
+// Este é um módulo-folha de propósito (mesmo formato de render/hc-role-data): um arquivo de dados sem
+// dependência nenhuma pode ser lido tanto pelo pipeline de render quanto pelo boot do documento sem arrastar
+// PixiJS para dentro do HTML nem o DOM para dentro do render.
+//
+// LAYOUT: 20 números = 4 linhas de 5 (R, G, B, A), em ordem de linha. É EXATAMENTE o mesmo layout nos dois
+// destinos — `feColorMatrix type="matrix"` e `PIXI.ColorMatrixFilter#matrix` — por isso o array serve aos
+// dois sem conversão. Aplicados em sRGB nos dois caminhos (aproximação padrão da web; ver a decisão 2 da
+// pesquisa). Fonte primária e a conferência valor a valor: docs/research/PESQUISA-DALTONIZACAO.md.
+/** Ordem canônica: as três simulações (o que a pessoa vê) antes das três correções (o que a ajuda a ver). */
+export const CVD_KEYS = ['sim-protan', 'sim-deuter', 'sim-tritan', 'fix-protan', 'fix-deuter', 'fix-tritan'];
+/**
+ * As matrizes, 4×5 em ordem de linha. Linha A = `0 0 0 1 0` em todas: nenhum dos seis modos mexe em alfa.
+ *
+ * SIMULAÇÃO (Machado, Oliveira & Fernandes 2009, severidade 1.0 — valores conferidos na página dos autores,
+ * UFRGS). CORREÇÃO (daltonização canônica): a linha R é identidade — não adianta modular o canal que a pessoa
+ * não distingue — e o erro é reinjetado em G e B, onde há discriminação; a soma de cada linha é 1, então
+ * branco e cinzas ficam preservados.
+ */
+export const CVD_MATRIX = {
+    'sim-protan': [0.152286, 1.052583, -0.204868, 0, 0, 0.114503, 0.786281, 0.099216, 0, 0, -0.003882, -0.048116, 1.051998, 0, 0, 0, 0, 0, 1, 0],
+    'sim-deuter': [0.367322, 0.860646, -0.227968, 0, 0, 0.280085, 0.672501, 0.047413, 0, 0, -0.011820, 0.042940, 0.968881, 0, 0, 0, 0, 0, 1, 0],
+    'sim-tritan': [1.255528, -0.076749, -0.178779, 0, 0, -0.078411, 0.930809, 0.147602, 0, 0, 0.004733, 0.691367, 0.303900, 0, 0, 0, 0, 0, 1, 0],
+    'fix-protan': [1, 0, 0, 0, 0, 0.478897, 0.476911, 0.044192, 0, 0, 0.597282, -0.688692, 1.091410, 0, 0, 0, 0, 0, 1, 0],
+    'fix-deuter': [1, 0, 0, 0, 0, 0.162790, 0.725047, 0.112165, 0, 0, 0.454695, -0.645392, 1.190697, 0, 0, 0, 0, 0, 1, 0],
+    'fix-tritan': [1, 0, 0, 0, 0, -0.100459, 1.122915, -0.022457, 0, 0, -0.183603, -0.637643, 1.821245, 0, 0, 0, 0, 0, 1, 0],
+};
+/**
+ * Modo → id do `<filter>` SVG. Os ids são API PÚBLICA deste módulo: `VIZ_FILTER` (render/viz-modes) pede o
+ * filtro pelo `url(#…)`, e é este mapa que promete que o filtro com aquele id vai existir no documento.
+ * Renomear um id aqui sem renomear lá apaga a canvas (referência de filtro inexistente não renderiza).
+ */
+export const CVD_SVG_ID = {
+    'sim-protan': 'cvd-protan', 'sim-deuter': 'cvd-deuter', 'sim-tritan': 'cvd-tritan',
+    'fix-protan': 'cvd-fix-protan', 'fix-deuter': 'cvd-fix-deuter', 'fix-tritan': 'cvd-fix-tritan',
+};
+/** Atributo `values` de um `<feColorMatrix>`: as 4 linhas separadas por espaço duplo (legibilidade). PURA. */
+export function cvdMatrixValues(k) {
+    const m = CVD_MATRIX[k];
+    return [0, 5, 10, 15].map((i) => m.slice(i, i + 5).join(' ')).join('  ');
+}
+const SVG_NS = 'http://www.w3.org/2000/svg';
+/**
+ * Gera os seis `<filter>` DENTRO do `<defs id="cvd-defs">` do index.html, a partir de `CVD_MATRIX`.
+ *
+ * Por que no boot e não escrito à mão no HTML: era exatamente a segunda cópia dos números. Construído com
+ * `createElementNS` (e não `innerHTML`) porque `<filter>`/`<feColorMatrix>` só funcionam no namespace SVG —
+ * com innerHTML o resultado depende do algoritmo de fragmento do navegador.
+ *
+ * Idempotente: esvazia o host antes de preencher, então chamar duas vezes não duplica ids (id duplicado faria
+ * o navegador escolher o primeiro — falha silenciosa outra vez).
+ *
+ * @returns quantos filtros foram instalados (0 = host ausente; o chamador decide se isso é fatal).
+ */
+export function installCvdFilters(host) {
+    if (!host)
+        return 0;
+    const doc = host.ownerDocument;
+    if (!doc)
+        return 0;
+    while (host.firstChild)
+        host.removeChild(host.firstChild);
+    let n = 0;
+    for (const k of CVD_KEYS) {
+        const f = doc.createElementNS(SVG_NS, 'filter');
+        f.setAttribute('id', CVD_SVG_ID[k]);
+        f.setAttribute('color-interpolation-filters', 'sRGB'); // idem PIXI: os dois caminhos operam em sRGB
+        const fe = doc.createElementNS(SVG_NS, 'feColorMatrix');
+        fe.setAttribute('type', 'matrix');
+        fe.setAttribute('values', cvdMatrixValues(k));
+        f.appendChild(fe);
+        host.appendChild(f);
+        n++;
+    }
+    return n;
+}