cortico-world-canvas 0.1.0

package/src/paint.ts

@@ -0,0 +1,132 @@
+import { color, label, number, object, type DrawAction, type Point } from './drawing.ts';
+import { PAINT_BRUSHES } from './brushes.ts';
+export type Matrix = [number, number, number, number, number, number];
+interface PaintStroke { brush: typeof PAINT_BRUSHES[number]; color: string; width: number; pressure: [number, number, number] }
+export interface PaintSpec {
+  path: string;
+  fill?: { mode: 'solid' | 'watercolor'; color: string; opacity: number; bleed: number; texture: number };
+  stroke?: PaintStroke;
+  hatch?: Omit<PaintStroke, 'pressure'> & { spacing: number; angle: number };
+  clip_to?: string;
+  matrix: Matrix;
+  instances?: Matrix[];
+}
+export interface Contour { points: Point[]; closed: boolean }
+export const IDENTITY: Matrix = [1, 0, 0, 1, 0, 0];
+
+/** Absolute SVG path commands retain corners and disconnected strokes without adding join lines. */
+export function contours(path: string): Contour[] {
+  if (typeof path !== 'string' || !path.trim() || path.length > 16000) throw new Error('path 须为 1–16000 字符的 M/L/Q/C/Z 绝对坐标路径');
+  const tokens = path.match(/[MLQCZ]|[-+]?(?:\d*\.\d+|\d+\.?\d*)(?:e[-+]?\d+)?/gi) ?? [];
+  if (path.replace(/[MLQCZ]|[-+]?(?:\d*\.\d+|\d+\.?\d*)(?:e[-+]?\d+)?|[\s,]/g, '')) throw new Error('path 只支持大写 M、L、Q、C、Z 与数值');
+  let i = 0, current: Point = { x: 0, y: 0 }, contour: Contour | undefined;
+  const result: Contour[] = [];
+  const point = (): Point => ({ x: number(Number(tokens[i++]), 'path.x', -8192, 8192), y: number(Number(tokens[i++]), 'path.y', -8192, 8192) });
+  while (i < tokens.length) {
+    const command = tokens[i++];
+    if (command === 'M') { current = point(); contour = { points: [current], closed: false }; result.push(contour); continue; }
+    if (!contour || contour.closed) throw new Error('每个子路径必须以 M 开始');
+    if (command === 'Z') {
+      contour.closed = true; current = contour.points[0];
+      if (contour.points.length > 1 && contour.points.at(-1)!.x === current.x && contour.points.at(-1)!.y === current.y) contour.points.pop();
+      continue;
+    }
+    if (command === 'L') { current = point(); contour.points.push(current); continue; }
+    if (command !== 'C' && command !== 'Q') throw new Error('每段坐标前须写 M、L、Q 或 C');
+    const start = current, control = point(), control2 = command === 'C' ? point() : control, end = point();
+    const length = Math.hypot(control.x - start.x, control.y - start.y) + Math.hypot(control2.x - control.x, control2.y - control.y) + Math.hypot(end.x - control2.x, end.y - control2.y);
+    const count = Math.max(2, Math.min(256, Math.ceil(length / 2)));
+    for (let n = 1; n <= count; n++) {
+      const t = n / count, u = 1 - t;
+      contour.points.push(command === 'C'
+        ? { x: u ** 3 * start.x + 3 * u * u * t * control.x + 3 * u * t * t * control2.x + t ** 3 * end.x,
+          y: u ** 3 * start.y + 3 * u * u * t * control.y + 3 * u * t * t * control2.y + t ** 3 * end.y }
+        : { x: u * u * start.x + 2 * u * t * control.x + t * t * end.x, y: u * u * start.y + 2 * u * t * control.y + t * t * end.y });
+    }
+    current = end;
+  }
+  for (const part of result) part.points = part.points.filter((p, i, points) => !i || p.x !== points[i - 1].x || p.y !== points[i - 1].y);
+  if (!result.length || result.some((part) => part.points.length < (part.closed ? 3 : 2))) throw new Error('开放路径至少两个不同的点，闭合路径至少三个点');
+  if (result.reduce((sum, part) => sum + part.points.length, 0) > 8192) throw new Error('path 展开后最多 8192 个点，请拆分部件');
+  return result;
+}
+
+function stroke(raw: unknown): PaintStroke {
+  const value = object(raw), brush = value.brush ?? 'liner';
+  if (!PAINT_BRUSHES.includes(brush as PaintStroke['brush'])) throw new Error(`未知笔刷，可用：${PAINT_BRUSHES.join(', ')}`);
+  const pressure = value.pressure ?? [0.7, 1, 0.7];
+  if (!Array.isArray(pressure) || pressure.length !== 3) throw new Error('pressure 须为起笔、中段、收笔三个压力值');
+  return { brush: brush as PaintStroke['brush'], color: color(value.color), width: number(value.width ?? 3, 'stroke.width', 0.2, 128),
+    pressure: pressure.map((p) => number(p, 'pressure', 0.05, 3)) as PaintStroke['pressure'] };
+}
+
+export function parsePaint(a: Record<string, unknown>): DrawAction {
+  const parts = contours(a.path as string);
+  const paint: PaintSpec = { path: a.path as string, matrix: [...IDENTITY] };
+  if (a.fill !== undefined) {
+    const fill = object(a.fill), mode = fill.mode ?? 'solid';
+    if (mode !== 'solid' && mode !== 'watercolor') throw new Error('fill.mode 须为 solid 或 watercolor');
+    if (parts.some((part) => !part.closed)) throw new Error('填色路径必须以 Z 闭合');
+    paint.fill = { mode, color: color(fill.color), opacity: number(fill.opacity ?? 1, 'fill.opacity', 0.01, 1),
+      bleed: number(fill.bleed ?? 0.025, 'fill.bleed', 0, 0.2), texture: number(fill.texture ?? 0.25, 'fill.texture', 0, 1) };
+  }
+  if (a.stroke !== undefined) paint.stroke = stroke(a.stroke);
+  if (a.hatch !== undefined) {
+    if (parts.some((part) => !part.closed)) throw new Error('排线路径必须以 Z 闭合');
+    const hatch = object(a.hatch);
+    const { pressure: _pressure, ...ink } = stroke(hatch);
+    paint.hatch = { ...ink, spacing: number(hatch.spacing ?? 6, 'hatch.spacing', 2, 128), angle: number(hatch.angle ?? 45, 'hatch.angle', -360, 360) };
+  }
+  if (!paint.stroke && !paint.fill && !paint.hatch) throw new Error('至少指定 stroke、fill 或 hatch 中的一项');
+  if (a.clip_to !== undefined) paint.clip_to = label(a.clip_to, 'clip_to');
+  if (a.matrix !== undefined) {
+    paint.matrix = parseMatrix(a.matrix);
+  }
+  if (a.instances !== undefined) {
+    if (!Array.isArray(a.instances) || a.instances.length < 1 || a.instances.length > 64) throw new Error('instances 须包含 1–64 个仿射矩阵');
+    paint.instances = a.instances.map(parseMatrix);
+  }
+  validateTransform(parts, paint.matrix, paint.instances);
+  return { kind: 'paint', paint, label: label(a.label, '部件名称'), points: [],
+    color: paint.stroke?.color ?? paint.fill?.color ?? paint.hatch!.color, size: paint.stroke?.width ?? 3,
+    opacity: 1, brush: 'pen', filled: !!paint.fill, tolerance: 16, density: 32 };
+}
+
+function parseMatrix(value: unknown): Matrix {
+  if (!Array.isArray(value) || value.length !== 6) throw new Error('matrix 必须包含六个仿射变换参数');
+  return value.map((v) => number(v, 'matrix', -8192, 8192)) as Matrix;
+}
+
+export function validateTransform(parts: Contour[], matrix: Matrix, instances: Matrix[] = [IDENTITY]): void {
+  if (parts.reduce((sum, part) => sum + part.points.length, 0) * instances.length > 8192) throw new Error('部件展开实例后最多 8192 个点，请拆分部件');
+  for (const instance of instances) {
+    const combined = multiply(matrix, instance);
+    for (const part of parts) for (const point of part.points) {
+      const p = transformed(point, combined);
+      number(p.x, '变换后的 x', -8192, 8192); number(p.y, '变换后的 y', -8192, 8192);
+    }
+  }
+}
+
+/** Instances use local coordinates; the component transform moves their entire arrangement. */
+export function paintContours(paint: PaintSpec): Contour[] {
+  const parts = contours(paint.path);
+  return (paint.instances ?? [IDENTITY]).flatMap((instance) => {
+    const matrix = multiply(paint.matrix, instance);
+    return parts.map((part) => ({ ...part, points: part.points.map((p) => transformed(p, matrix)) }));
+  });
+}
+
+export function transformed(point: Point, matrix: Matrix): Point {
+  const [a, b, c, d, e, f] = matrix;
+  return { x: a * point.x + c * point.y + e, y: b * point.x + d * point.y + f };
+}
+
+export function multiply(a: Matrix, b: Matrix): Matrix {
+  return [a[0] * b[0] + a[2] * b[1], a[1] * b[0] + a[3] * b[1], a[0] * b[2] + a[2] * b[3],
+    a[1] * b[2] + a[3] * b[3], a[0] * b[4] + a[2] * b[5] + a[4], a[1] * b[4] + a[3] * b[5] + a[5]];
+}
+
+export function toolAction(action: DrawAction): unknown {
+  return action.kind === 'paint' ? { ...action.paint, label: action.label } : action;
+}

package/src/public/app.js

@@ -0,0 +1,304 @@
+const $ = (id) => document.getElementById(id);
+const overlay = location.pathname === '/overlay';
+document.body.classList.toggle('overlay', overlay);
+const canvas = $('canvas'), ctx = canvas.getContext('2d');
+const toolNames = { paint: '路径绘画', brush: '笔刷', line: '直线', rect: '矩形', ellipse: '椭圆', polygon: '多边形', bezier: '贝塞尔曲线', curve: '平滑曲线', fill: '填充', spray: '喷漆' };
+let state = { board: null, references: [], queued: 0, cursor: { x: 0, y: 0, mode: 'idle' } };
+let boardKey = '', referenceKey = '', stepKey = '', drawing = null, paintVersion = 0;
+let pendingFiles = [];
+let uploading = false;
+
+function message(text, error = false) { $('message').textContent = text; $('message').classList.toggle('error', error); }
+async function api(path, body, method = 'POST') {
+  const response = await fetch(path, { method, headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
+  const result = await response.json();
+  if (!response.ok) throw new Error(result.error || '操作失败');
+  return result;
+}
+async function command(name, args = {}) {
+  try {
+    const result = await api('/api/command', { name, args });
+    render(result.state);
+    return result.result;
+  } catch (error) { message(error.message, true); throw error; }
+}
+function paint(url) {
+  const version = ++paintVersion;
+  const image = new Image();
+  image.onload = () => { if (version === paintVersion) { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(image, 0, 0); } };
+  image.src = url;
+}
+function resize() {
+  if (!state.board) return;
+  const stage = document.querySelector('.stage');
+  const scale = Math.min((stage.clientWidth - 52) / state.board.width, (stage.clientHeight - 52) / state.board.height, 1);
+  $('board-wrap').style.width = `${Math.max(1, state.board.width * scale)}px`;
+  $('board-wrap').style.height = `${Math.max(1, state.board.height * scale)}px`;
+  cursor(state.cursor);
+}
+function cursor(value) {
+  state.cursor = value;
+  const node = $('corti-cursor');
+  node.hidden = !state.board;
+  if (!state.board) return;
+  node.dataset.mode = value.mode;
+  node.classList.toggle('edge-right', value.x / state.board.width * $('board-wrap').clientWidth > $('board-wrap').clientWidth - 70);
+  node.classList.toggle('edge-bottom', value.y / state.board.height * $('board-wrap').clientHeight > $('board-wrap').clientHeight - 80);
+  node.style.transform = `translate(${value.x / state.board.width * $('board-wrap').clientWidth}px, ${value.y / state.board.height * $('board-wrap').clientHeight}px)`;
+}
+function render(next) {
+  const hadPreview = !!state.preview;
+  state = next;
+  const board = state.board;
+  $('board-title').textContent = board?.title || '画布';
+  $('board-meta').textContent = board ? `${board.width} × ${board.height} px · 已自动存档` : '尚未新建画布';
+  $('save').disabled = !board || state.queued > 0;
+  $('empty-board').hidden = !!board;
+  $('board-wrap').hidden = !board;
+  if (board) {
+    const key = `${board.id}:${board.revision}`;
+    if (key !== boardKey || (hadPreview && !state.preview)) {
+      boardKey = key; canvas.width = board.width; canvas.height = board.height;
+      paint(`/api/canvas.png?v=${encodeURIComponent(key)}`);
+    }
+    resize();
+  }
+  if (state.preview) paint(`data:image/png;base64,${state.preview}`);
+  cursor(state.cursor);
+  progress(state.painting, state.queued);
+  renderReferences(); renderSteps(); renderGame(state.game);
+}
+function progress(painting, queued) {
+  $('progress').classList.toggle('active', !!painting || queued > 0);
+  $('progress').textContent = painting ? `可缇正在绘制 ${painting.step} / ${painting.total} · ${painting.label}` : queued > 0 ? `队列处理中 · ${queued} 项` : state.board ? '已完成' : '就绪';
+}
+function renderReferences() {
+  const refs = state.references;
+  $('reference-count').textContent = `${refs.length} / 64`;
+  const key = JSON.stringify(refs);
+  if (key === referenceKey) return;
+  referenceKey = key;
+  $('references').replaceChildren(...refs.map((ref, index) => {
+    const card = document.createElement('article'); card.className = 'reference-card';
+    const img = document.createElement('img'); img.src = ref.url; img.alt = ref.name; img.className = 'thumb'; img.tabIndex = 0;
+    const open = () => { $('reference-title').textContent = ref.name; $('reference-image').src = ref.url; $('reference-dialog').showModal(); };
+    img.onclick = open; img.onkeydown = (event) => { if (event.key === 'Enter') open(); };
+    const info = document.createElement('div'); info.className = 'reference-info';
+    const name = document.createElement('div'); name.className = 'ref-name'; name.textContent = `${String(index + 1).padStart(2, '0')} · ${ref.name}`;
+    const meta = document.createElement('small'); meta.textContent = `${ref.width} × ${ref.height} px`;
+    const input = document.createElement('input'); input.value = ref.name; input.maxLength = 120; input.setAttribute('aria-label', '参考图名称'); input.className = 'operator';
+    const actions = document.createElement('div'); actions.className = 'ref-actions operator';
+    const rename = document.createElement('button'); rename.textContent = '重命名'; rename.className = 'secondary';
+    rename.onclick = () => api(`/api/references/${ref.id}`, { name: input.value }, 'PATCH').catch((error) => message(error.message, true));
+    const remove = document.createElement('button'); remove.textContent = '移出队列'; remove.className = 'secondary';
+    remove.onclick = () => api(`/api/references/${ref.id}`, {}, 'DELETE').catch((error) => message(error.message, true));
+    actions.append(rename, remove); info.append(name, meta, input, actions); card.append(img, info); return card;
+  }));
+}
+function renderSteps() {
+  const steps = state.board?.steps || [];
+  $('step-count').textContent = `${steps.length} 步`; $('step-empty').hidden = steps.length > 0;
+  const key = `${state.board?.id}:${state.board?.revision}`;
+  if (key === stepKey) return;
+  stepKey = key;
+  $('steps').replaceChildren(...steps.map((step, index) => {
+    const li = document.createElement('li'); li.className = 'step';
+    const top = document.createElement('div'); top.className = 'step-top';
+    const title = document.createElement('strong'); title.textContent = `${String(index + 1).padStart(2, '0')}  ${step.action.label}`;
+    const undo = document.createElement('button'); undo.className = 'secondary operator'; undo.textContent = '撤销'; undo.title = `仅撤销 ${step.id}`;
+    undo.onclick = () => command('canvas_undo', { step_id: step.id }).catch(() => {});
+    top.append(title, undo);
+    const meta = document.createElement('small'); meta.textContent = `${toolNames[step.action.kind]} · ${step.action.color}`;
+    const id = document.createElement('code'); id.textContent = step.id;
+    li.append(top, meta, id); return li;
+  }));
+  $('steps').lastElementChild?.scrollIntoView({ block: 'nearest' });
+}
+function addFiles(files) {
+  for (const file of files) {
+    if (!['image/png', 'image/jpeg'].includes(file.type) || file.size > 10 * 1024 * 1024) { message(`${file.name}：请选择 10 MiB 以内的 PNG/JPG`, true); continue; }
+    if (state.references.length + pendingFiles.length >= 64) { message('参考图队列最多 64 张', true); break; }
+    pendingFiles.push({ file, name: file.name.replace(/\.[^.]+$/, '').slice(0, 120), preview: URL.createObjectURL(file) });
+  }
+  renderPending();
+}
+function renderPending() {
+  $('pending').replaceChildren();
+  pendingFiles.forEach((item) => {
+    const row = document.createElement('div'); row.className = 'pending-row';
+    const img = document.createElement('img'); img.src = item.preview; img.alt = '待上传参考图';
+    const input = document.createElement('input'); input.value = item.name; input.maxLength = 120; input.setAttribute('aria-label', '上传前命名'); input.oninput = () => { item.name = input.value; };
+    input.disabled = uploading;
+    row.append(img, input); $('pending').append(row);
+  });
+  if (!pendingFiles.length) return;
+  const upload = document.createElement('button'); upload.textContent = `上传 ${pendingFiles.length} 张参考图`;
+  upload.disabled = uploading;
+  upload.onclick = async () => {
+    const batch = [...pendingFiles];
+    uploading = true; renderPending();
+    try {
+      for (const item of batch) {
+        const base64 = await new Promise((resolve, reject) => { const reader = new FileReader(); reader.onload = () => resolve(String(reader.result).split(',')[1]); reader.onerror = () => reject(new Error('读取图片失败')); reader.readAsDataURL(item.file); });
+        await api('/api/references', { name: item.name, base64 });
+        URL.revokeObjectURL(item.preview); pendingFiles.shift();
+      }
+      message('参考图已上传');
+    } catch (error) { message(error.message, true); }
+    uploading = false; renderPending();
+  };
+  const clear = document.createElement('button'); clear.textContent = '取消待上传'; clear.className = 'secondary'; clear.onclick = () => { for (const item of pendingFiles) URL.revokeObjectURL(item.preview); pendingFiles = []; renderPending(); };
+  clear.disabled = uploading;
+  $('pending').append(upload, clear);
+}
+$('files').onchange = (event) => { addFiles(event.target.files); event.target.value = ''; };
+$('dropzone').ondragover = (event) => { event.preventDefault(); $('dropzone').classList.add('drag'); };
+$('dropzone').ondragleave = () => $('dropzone').classList.remove('drag');
+$('dropzone').ondrop = (event) => { event.preventDefault(); $('dropzone').classList.remove('drag'); addFiles(event.dataTransfer.files); };
+document.addEventListener('paste', (event) => {
+  if (overlay) return;
+  const images = Array.from(event.clipboardData?.files ?? []).filter((file) => file.type.startsWith('image/'));
+  if (!images.length) return;
+  event.preventDefault();
+  addFiles(images);
+});
+$('new').onclick = () => $('new-dialog').showModal();
+$('cancel-new').onclick = () => $('new-dialog').close();
+$('new-form').onsubmit = async (event) => {
+  event.preventDefault();
+  const submit = event.submitter; submit.disabled = true;
+  try { await command('canvas_new', { title: $('title').value, width: +$('width').value, height: +$('height').value, background: $('background').value }); $('new-dialog').close(); }
+  catch {} finally { submit.disabled = false; }
+};
+$('save').onclick = async () => {
+  try { const saved = await command('canvas_save'); const a = document.createElement('a'); a.href = saved.url; a.download = saved.filename; a.click(); message(`已保存：${saved.path}`); } catch {}
+};
+$('close-reference').onclick = () => $('reference-dialog').close();
+$('size').oninput = () => { $('size-value').value = $('size').value; };
+function point(event) { const rect = canvas.getBoundingClientRect(); return { x: Math.max(0, Math.min(canvas.width - 1, (event.clientX - rect.left) / rect.width * canvas.width)), y: Math.max(0, Math.min(canvas.height - 1, (event.clientY - rect.top) / rect.height * canvas.height)) }; }
+canvas.onpointerdown = (event) => {
+  if (overlay || !state.board || state.queued || event.button !== 0) return;
+  canvas.setPointerCapture(event.pointerId); drawing = [point(event)];
+};
+canvas.onpointermove = (event) => {
+  const p = point(event); $('coordinates').textContent = `(${Math.round(p.x)}, ${Math.round(p.y)})`;
+  if (drawing && drawing.length < 1024 && Math.hypot(p.x - drawing.at(-1).x, p.y - drawing.at(-1).y) > 2) drawing.push(p);
+};
+canvas.onpointerup = (event) => {
+  if (!drawing) return;
+  const points = drawing; drawing = null;
+  const tool = $('brush').value, isBrush = ['pen', 'marker', 'soft', 'eraser'].includes(tool);
+  const selected = tool === 'fill' ? [points[0]] : ['rect', 'ellipse', 'line'].includes(tool) ? [points[0], point(event)] : [...points.slice(0, 1023), point(event)];
+  void command('canvas_draw', { actions: [{ kind: isBrush ? 'brush' : tool, brush: isBrush ? tool : 'pen', points: selected, color: $('color').value, size: +$('size').value, opacity: +$('opacity').value / 100, filled: $('filled').checked, label: `手绘 · ${$('brush').selectedOptions[0].text}` }] }).catch(() => {});
+};
+canvas.onpointercancel = () => { drawing = null; };
+new ResizeObserver(resize).observe(document.querySelector('.stage'));
+const events = new EventSource('/events');
+events.onopen = () => { $('connection').textContent = '画室在线'; $('connection').classList.add('online'); };
+events.onerror = () => { $('connection').textContent = '连接中断 · 正在重连'; $('connection').classList.remove('online'); };
+events.onmessage = (event) => {
+  const packet = JSON.parse(event.data);
+  if (packet.type === 'state') render(packet.data);
+  if (packet.type === 'frame') { state.preview = packet.data.png; state.painting = packet.data; cursor(packet.data.cursor); progress(packet.data, state.queued); paint(`data:image/png;base64,${packet.data.png}`); }
+};
+
+// ---- 你画我猜:计分板、倒计时与揭示都是服务端状态的投影,页面只负责动画 ----
+const ARC = 2 * Math.PI * 52;
+let clockOffset = 0, rankKey = '', timerKey = '', revealKey = '', revealHide = null, timerVisible = false, timerRound = null;
+const formatClock = (ms) => { const s = Math.max(0, Math.ceil(ms / 1000)); return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, '0')}`; };
+function renderGame(game) {
+  if (!game) return;
+  clockOffset = game.now - Date.now();
+  const playing = game.mode === 'guess';
+  document.body.classList.toggle('game', playing);
+  $('brand-title').textContent = playing ? '可缇的你画我猜' : 'Corti 的头像画室';
+  $('game-badge').hidden = !playing;
+  $('game-round').textContent = game.round ? game.round.id : game.rounds;
+  renderRanks(playing ? game.scoreboard : []);
+  renderTimer(playing ? game.round : null);
+  renderReveal(playing ? game.reveal : null);
+}
+function renderRanks(list) {
+  const top = list.slice(0, 10);
+  const key = JSON.stringify(top);
+  if (key === rankKey) return;
+  rankKey = key;
+  const ol = $('ranks');
+  const before = new Map(Array.from(ol.children, (li) => [li.dataset.name, { top: li.getBoundingClientRect().top, score: +li.dataset.score }]));
+  $('score-count').textContent = list.length ? `${list.length} 人参与` : '';
+  $('rank-empty').hidden = top.length > 0;
+  ol.replaceChildren(...top.map((entry) => {
+    const li = document.createElement('li'); li.className = `rank-row rank-${Math.min(entry.rank, 4)}`; li.dataset.name = entry.name; li.dataset.score = entry.score;
+    const badge = document.createElement('span'); badge.className = 'rank-badge'; badge.textContent = entry.rank;
+    const name = document.createElement('span'); name.className = 'rank-name'; name.textContent = entry.name; name.title = entry.name;
+    const score = document.createElement('span'); score.className = 'rank-score'; score.textContent = entry.score;
+    li.append(badge, name, score); return li;
+  }));
+  for (const li of ol.children) {
+    const prev = before.get(li.dataset.name);
+    if (!prev) { li.classList.add('enter'); continue; }
+    const dy = prev.top - li.getBoundingClientRect().top;
+    if (dy) li.animate([{ transform: `translateY(${dy}px)` }, { transform: 'translateY(0)' }], { duration: 550, easing: 'cubic-bezier(.2,.9,.25,1.15)' });
+    const delta = +li.dataset.score - prev.score;
+    if (!delta) continue;
+    li.querySelector('.rank-score').animate([{ transform: 'scale(1)' }, { transform: 'scale(1.5)' }, { transform: 'scale(1)' }], { duration: 600, easing: 'ease-out' });
+    const chip = document.createElement('i'); chip.className = 'delta'; chip.textContent = `${delta > 0 ? '+' : ''}${delta}`;
+    li.append(chip); setTimeout(() => chip.remove(), 1200);
+  }
+}
+function renderTimer(round) {
+  const node = $('timer');
+  timerRound = round;
+  if (!round) {
+    if (!timerVisible) return;
+    timerVisible = false;
+    node.animate([{ transform: 'scale(1)', opacity: 1 }, { transform: 'scale(.6)', opacity: 0 }], { duration: 250, easing: 'ease-in' }).onfinish = () => { if (!timerVisible) node.hidden = true; };
+    return;
+  }
+  if (!timerVisible) { timerVisible = true; node.hidden = false; node.classList.remove('pop'); void node.offsetWidth; node.classList.add('pop'); }
+  const key = `${round.id}:${round.length}:${round.hint}`;
+  if (key !== timerKey) {
+    timerKey = key;
+    $('timer-blanks').replaceChildren(...Array.from({ length: Math.min(round.length, 20) }, () => { const blank = document.createElement('span'); blank.className = 'blank'; blank.textContent = '？'; return blank; }));
+    $('timer-hint').hidden = !round.hint; $('timer-hint').textContent = round.hint ? `提示 · ${round.hint}` : '';
+  }
+  tickTimer();
+}
+function tickTimer() {
+  const round = timerRound;
+  if (!round || !timerVisible) return;
+  const remaining = round.endsAt - (Date.now() + clockOffset);
+  const over = round.expired || remaining <= 0;
+  const fraction = over ? 0 : Math.min(1, remaining / (round.endsAt - round.startedAt));
+  $('timer-arc').style.strokeDashoffset = ARC * (1 - fraction);
+  $('timer-clock').textContent = over ? '0:00' : formatClock(remaining);
+  $('timer').classList.toggle('urgent', !over && remaining <= 10000);
+  $('timer').classList.toggle('over', over);
+  $('timer-label').textContent = over ? '时间到！等可缇揭晓答案～' : '猜猜我在画什么？';
+}
+setInterval(tickTimer, 200);
+function renderReveal(reveal) {
+  const node = $('reveal');
+  const key = reveal ? `${reveal.roundId}:${reveal.at}` : '';
+  if (key === revealKey) return;
+  revealKey = key;
+  clearTimeout(revealHide);
+  const age = reveal ? Date.now() + clockOffset - reveal.at : 0;
+  if (!reveal || age > 25000) { node.hidden = true; return; }
+  const letters = Array.from(reveal.answer);
+  const columns = (limit) => Math.ceil(letters.length / Math.ceil(letters.length / limit));
+  $('reveal-answer').style.setProperty('--wide-columns', columns(10));
+  $('reveal-answer').style.setProperty('--narrow-columns', columns(5));
+  $('reveal-answer').replaceChildren(...letters.map((char, index) => { const span = document.createElement('span'); span.textContent = char; span.style.setProperty('--i', index); return span; }));
+  $('reveal-winners').replaceChildren(...reveal.winners.map((name, index) => { const li = document.createElement('li'); li.textContent = `${index + 1}. ${name}`; li.style.setProperty('--i', index); return li; }));
+  const colors = ['#dfa0b6', '#e7c478', '#91b6d1', '#a4bea5', '#b7a4cf'];
+  $('confetti').replaceChildren(...Array.from({ length: 48 }, () => {
+    const piece = document.createElement('i');
+    piece.style.setProperty('--x', Math.random() * 100); piece.style.setProperty('--d', `${2.5 + Math.random() * 2.5}s`); piece.style.setProperty('--w', `${Math.random() * 1.2}s`);
+    piece.style.setProperty('--r', `${Math.random() * 360}deg`); piece.style.setProperty('--c', colors[Math.floor(Math.random() * colors.length)]);
+    return piece;
+  }));
+  node.hidden = false;
+  node.classList.remove('pop'); void node.offsetWidth; node.classList.add('pop');
+  revealHide = setTimeout(() => { node.hidden = true; }, 25000 - age);
+}

package/src/public/brush-alpha.js

@@ -0,0 +1,39 @@
+// p5.brush 2.2.2 composites pigments against opaque white paper. Canvas layers need premultiplied alpha.
+(() => {
+  const pigmentShaders = new WeakSet(), compositorPrograms = new WeakSet();
+  const background = /vec3 bgColor\s*=[^;]+;/;
+  const output = /outColor\s*=\s*vec4\(spectral_mix\(bgColor,\s*pigment.rgb,\s*mixIntensity\),\s*1\.\);/;
+  globalThis.canvasPigmentAlphaReady = false;
+  const gl = WebGL2RenderingContext.prototype;
+  const shaderSource = gl.shaderSource;
+  gl.shaderSource = function(shader, source) {
+    if (source.includes('vec3 bgColor')) {
+      if (!background.test(source) || !output.test(source)) throw new Error('Unsupported p5.brush pigment shader');
+      source = source.replace(background, `
+        float coverage = clamp(mixIntensity, 0.0, 1.0);
+        float alpha = coverage + source.a * (1.0 - coverage);
+        vec3 bgColor = source.a > 0.0001 ? source.rgb / source.a : pigment.rgb;
+      `).replace(output, `
+        vec3 mixed = spectral_mix(bgColor, pigment.rgb, coverage);
+        vec3 rgb = mix(pigment.rgb, mixed, source.a);
+        outColor = vec4(rgb * alpha, alpha);
+      `);
+      pigmentShaders.add(shader);
+      globalThis.canvasPigmentAlphaReady = true;
+    }
+    return shaderSource.call(this, shader, source);
+  };
+  const attachShader = gl.attachShader;
+  gl.attachShader = function(program, shader) {
+    if (pigmentShaders.has(shader)) compositorPrograms.add(program);
+    return attachShader.call(this, program, shader);
+  };
+  const drawArrays = gl.drawArrays;
+  gl.drawArrays = function(...args) {
+    // The shader already includes the destination; blending it again would apply its alpha twice.
+    const blending = compositorPrograms.has(this.getParameter(this.CURRENT_PROGRAM)) && this.isEnabled(this.BLEND);
+    if (blending) this.disable(this.BLEND);
+    drawArrays.apply(this, args);
+    if (blending) this.enable(this.BLEND);
+  };
+})();

package/src/public/brush-engine.js

@@ -0,0 +1,40 @@
+const inkWidths = { liner: 1, pen: 0.3, rotring: 0.15, '2B': 0.3, HB: 0.3, '2H': 0.2, cpencil: 0.35, charcoal: 0.35, marker: 2, spray: 0.2 };
+let target;
+globalThis.renderBrushLayer = ({ width, height, parts, paint, seed }) => {
+  if (!target) {
+    target = brush.createCanvas(width, height, { pixelDensity: 1 });
+    brush.scaleBrushes(1);
+    brush.add('liner', { type: 'marker', weight: 1, scatter: 0, opacity: 255, spacing: 0.15, pressure: [1, 1], noise: 0, markerTip: false, rotate: 'natural' });
+  }
+  brush.clear(); brush.seed(seed); brush.noiseSeed(seed); brush.noField(); brush.noClip();
+  brush.noFill(); brush.noWash(); brush.noStroke(); brush.noHatch(); brush.noMass();
+  brush.push(); brush.translate(-width / 2, -height / 2);
+  if (paint.fill) {
+    const fill = paint.fill;
+    if (fill.mode === 'solid') brush.wash(fill.color, fill.opacity * 255);
+    else { brush.fill(fill.color, fill.opacity * 255); brush.fillBleed(fill.bleed); brush.fillTexture(fill.texture, 0.12, false); }
+  }
+  if (paint.stroke) brush.set(paint.stroke.brush, paint.stroke.color, paint.stroke.width / inkWidths[paint.stroke.brush]);
+  if (paint.hatch) {
+    const hatch = paint.hatch;
+    brush.hatchStyle(hatch.brush, hatch.color, hatch.width / inkWidths[hatch.brush]);
+    brush.hatch(hatch.spacing, hatch.angle * Math.PI / 180, { rand: 0.05 });
+  }
+  for (const part of parts) {
+    const pressure = paint.stroke?.pressure ?? [1, 1, 1];
+    let distance = 0;
+    const lengths = part.points.map((p, i) => i ? Math.hypot(p.x - part.points[i - 1].x, p.y - part.points[i - 1].y) : 0);
+    const length = lengths.reduce((sum, value) => sum + value, 0);
+    brush.beginShape(0);
+    part.points.forEach((p, i) => {
+      distance += lengths[i];
+      const t = length ? distance / length : 0;
+      const value = t < 0.5 ? pressure[0] + (pressure[1] - pressure[0]) * t * 2 : pressure[1] + (pressure[2] - pressure[1]) * (t - 0.5) * 2;
+      brush.vertex(p.x, p.y, value);
+    });
+    brush.endShape(part.closed);
+  }
+  brush.pop(); brush.render();
+  if (!globalThis.canvasPigmentAlphaReady) throw new Error('p5.brush alpha adapter was not applied');
+  return target.toDataURL('image/png').split(',')[1];
+};