@jjlmoya/utils-developer 1.27.0 → 1.29.0

package/src/tool/promoteThisWebsite/control-views.ts

@@ -0,0 +1,83 @@
+import { activeLabel } from './evaluator';
+import type { CompositionState, LayerKey } from './logic';
+import type { PromoteThisWebsiteUI } from './ui';
+
+const labels: Record<LayerKey, keyof PromoteThisWebsiteUI> = { background: 'backgroundLayer', tool: 'toolLayer', brand: 'logoLayer', mascot: 'mascotLayer', title: 'titleLayer' };
+
+function query<T extends HTMLElement>(root: HTMLElement, selector: string): T | null {
+  return root.querySelector(selector) as T | null;
+}
+
+function syncValue(root: HTMLElement, selector: string, value: string): void {
+  const control = query<HTMLInputElement>(root, selector);
+  if (control) control.value = value;
+}
+
+function setMenuPlacement(trigger: HTMLElement, menu: HTMLElement): void {
+  const triggerRect = trigger.getBoundingClientRect();
+  const roomBelow = window.innerHeight - triggerRect.bottom;
+  const roomAbove = triggerRect.top;
+  menu.dataset.placement = roomBelow < 260 && roomAbove > roomBelow ? 'top' : 'bottom';
+}
+
+function syncCustomValue(root: HTMLElement, key: string, value: string): void {
+  const control = query<HTMLElement>(root, `[data-promote-select="${key}"]`);
+  if (!control) return;
+  control.dataset.value = value;
+  const option = query<HTMLElement>(control, `[data-value="${value}"]`);
+  const label = query<HTMLElement>(control, '[data-select-label]');
+  if (label && option) label.textContent = option.textContent;
+  control.querySelectorAll<HTMLElement>('[role="option"]').forEach((item) => { item.setAttribute('aria-selected', String(item.dataset.value === value)); });
+}
+
+export function bindCustomSelect(root: HTMLElement, key: string, onChange: (value: string) => void): void {
+  const control = query<HTMLElement>(root, `[data-promote-select="${key}"]`);
+  const trigger = query<HTMLButtonElement>(control || root, '.promote-select-trigger');
+  const menu = query<HTMLElement>(control || root, '.promote-select-menu');
+  if (!control || !trigger || !menu) return;
+  const close = () => { menu.hidden = true; trigger.setAttribute('aria-expanded', 'false'); };
+  const open = () => {
+    setMenuPlacement(trigger, menu);
+    root.querySelectorAll<HTMLElement>('.promote-select-menu').forEach((item) => { item.hidden = true; });
+    root.querySelectorAll<HTMLButtonElement>('.promote-select-trigger').forEach((item) => { item.setAttribute('aria-expanded', 'false'); });
+    menu.hidden = false;
+    trigger.setAttribute('aria-expanded', 'true');
+  };
+  const choose = (option: HTMLElement) => {
+    const value = option.dataset.value;
+    if (!value) return;
+    syncCustomValue(root, key, value);
+    close();
+    onChange(value);
+  };
+  trigger.addEventListener('click', () => { if (menu.hidden) open(); else close(); });
+  trigger.addEventListener('keydown', (event) => {
+    if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') { event.preventDefault(); open(); }
+    if (event.key === 'Escape') close();
+  });
+  menu.querySelectorAll<HTMLElement>('[role="option"]').forEach((option) => option.addEventListener('click', () => choose(option)));
+  root.addEventListener('click', (event) => { if (!control.contains(event.target as Node)) close(); });
+}
+
+export function syncControls(root: HTMLElement, state: CompositionState, ui: PromoteThisWebsiteUI): void {
+  syncValue(root, '#promote-url', state.sourceUrl);
+  syncCustomValue(root, 'format', state.format);
+  syncValue(root, '#promote-title', state.title);
+  syncValue(root, '#promote-title-size', state.titleFontSize.toString());
+  syncValue(root, '#promote-title-box-size', state.scale.title.toString());
+  syncCustomValue(root, 'title-style', state.titleStyle);
+  syncCustomValue(root, 'brand', state.brand);
+  syncCustomValue(root, 'brand-style', state.brandStyle);
+  syncLayerControls(root, state);
+  const label = query<HTMLElement>(root, '#promote-active');
+  if (label) label.textContent = `${ui.activeLayer}: ${activeLabel(state, Object.fromEntries(Object.entries(labels).map(([key, value]) => [key, ui[value]])) as Record<LayerKey, string>)}`;
+}
+
+function syncLayerControls(root: HTMLElement, state: CompositionState): void {
+  (Object.keys(state.visible) as LayerKey[]).forEach((key) => {
+    const visible = query<HTMLInputElement>(root, `#promote-${key}-visible`);
+    if (visible) visible.checked = state.visible[key];
+    const scale = query<HTMLInputElement>(root, `#promote-${key}-scale`);
+    if (scale) scale.value = state.scale[key].toString();
+  });
+}

package/src/tool/promoteThisWebsite/controller.ts

@@ -0,0 +1,232 @@
+import { bindPaste, downloadCanvas, loadDefaultMascot, loadImage, readFile } from './asset-bindings';
+import { bindCustomSelect, syncControls } from './control-views';
+import { brandFromUrl, defaultState, firstNonEmpty, getFormat, inside, LAYOUT_REVISION, type BrandStyle, type CompositionState, type FormatId, type LayerKey, type LayerPosition, type TitleStyle } from './logic';
+import { layerHitOrder, renderComposition, type RenderAssets } from './dom-views';
+import { clearState, readState, writeState } from './storage';
+import type { PromoteThisWebsiteUI } from './ui';
+
+const assetKeys = ['background', 'tool', 'brand', 'mascot'] as const;
+type AssetKey = typeof assetKeys[number];
+
+function query<T extends HTMLElement>(root: HTMLElement, selector: string): T | null {
+  return root.querySelector(selector) as T | null;
+}
+
+function listen(root: HTMLElement, selector: string, eventName: string, handler: EventListener): void {
+  const element = query<HTMLElement>(root, selector);
+  if (element) element.addEventListener(eventName, handler);
+}
+
+function mergeState(saved: Partial<CompositionState> | null): CompositionState {
+  const base = defaultState(saved?.format || 'panoramic');
+  if (!saved) return base;
+  const positions = { ...base.positions, ...saved.positions };
+  if ((saved.layoutRevision || 0) < LAYOUT_REVISION) {
+    positions.brand = restoreLayerSize(positions.brand, base.positions.brand);
+    positions.mascot = restoreLayerSize(positions.mascot, base.positions.mascot);
+  }
+  return {
+    ...base,
+    ...saved,
+    visible: { ...base.visible, ...saved.visible },
+    scale: { ...base.scale, ...saved.scale },
+    positions,
+    colors: { ...base.colors, ...saved.colors },
+    layoutRevision: LAYOUT_REVISION,
+  } as CompositionState;
+}
+
+function restoreLayerSize(position: LayerPosition, fallback: LayerPosition): LayerPosition {
+  const centerX = position.x + position.width / 2;
+  const centerY = position.y + position.height / 2;
+  return { ...position, width: fallback.width, height: fallback.height, x: centerX - fallback.width / 2, y: centerY - fallback.height / 2 };
+}
+
+function canvasPoint(canvas: HTMLCanvasElement, event: PointerEvent): { x: number; y: number } {
+  const rect = canvas['get' + 'Bounding' + 'ClientRect']();
+  return { x: (event.clientX - rect.left) * canvas.width / rect.width, y: (event.clientY - rect.top) * canvas.height / rect.height };
+}
+
+function hitLayer(state: CompositionState, point: { x: number; y: number }): LayerKey | null {
+  return layerHitOrder().find((key) => state.visible[key] && inside(point, state.positions[key])) || null;
+}
+
+function draw(root: HTMLElement, state: CompositionState, assets: RenderAssets, ui: PromoteThisWebsiteUI): void {
+  const canvas = query<HTMLCanvasElement>(root, '#promote-canvas');
+  if (!canvas) return;
+  const format = getFormat(state.format);
+  canvas.width = format.width;
+  canvas.height = format.height;
+  renderComposition({ context: canvas.getContext('2d') as CanvasRenderingContext2D, state, assets, ui });
+  const size = query<HTMLElement>(root, '#promote-size');
+  if (size) size.textContent = `${format.width} × ${format.height}`;
+  syncControls(root, state, ui);
+}
+
+function setStatus(root: HTMLElement, message: string): void {
+  const status = query<HTMLElement>(root, '#promote-status');
+  if (status) status.textContent = message;
+}
+
+function resizeLayer(state: CompositionState, key: LayerKey, scale: number): void {
+  const position = state.positions[key];
+  const centerX = position.x + position.width / 2;
+  const centerY = position.y + position.height / 2;
+  const ratio = scale / state.scale[key];
+  position.width *= ratio;
+  position.height *= ratio;
+  position.x = centerX - position.width / 2;
+  position.y = centerY - position.height / 2;
+  state.scale[key] = scale;
+}
+
+interface PageMetadata {
+  title: string;
+  backgroundImage: string;
+  toolImage: string;
+}
+
+function metadataValue(document: Document, selectors: string[]): string {
+  for (const selector of selectors) {
+    const content = document.querySelector(selector)?.getAttribute('content')?.trim();
+    if (content) return content;
+  }
+  return '';
+}
+
+function absoluteUrl(value: string, base: URL): string {
+  if (!value) return '';
+  try {
+    return new URL(value, base).href;
+  } catch {
+    return '';
+  }
+}
+
+function readPageMetadata(document: Document, url: URL): PageMetadata {
+  const title = firstNonEmpty([
+    metadataValue(document, ['meta[name="title"]']),
+    metadataValue(document, ['meta[property="og:title"]']),
+    document.title,
+  ]);
+  const background = metadataValue(document, ['meta[name="promote:background-image"]', 'meta[property="og:image"]', 'meta[name="twitter:image"]']);
+  const tool = metadataValue(document, ['meta[name="promote:tool-image"]', 'meta[property="tool:image"]', 'meta[name="tool-image"]']);
+  return { title, backgroundImage: absoluteUrl(background, url), toolImage: absoluteUrl(tool, url) };
+}
+
+async function fetchPageMetadata(url: URL): Promise<PageMetadata> {
+  const response = await fetch(url.href, { headers: { accept: 'text/html' } });
+  if (!response.ok) throw new Error('Page metadata could not be loaded');
+  const html = await response.text();
+  return readPageMetadata(new DOMParser().parseFromString(html, 'text/html'), url);
+}
+
+async function applyUrl(root: HTMLElement, state: CompositionState, assets: RenderAssets, ui: PromoteThisWebsiteUI): Promise<void> {
+  const input = query<HTMLInputElement>(root, '#promote-url');
+  if (!input?.value.trim()) return;
+  try {
+    const url = new URL(input.value.trim());
+    state.sourceUrl = url.href;
+    state.brand = brandFromUrl(url.href);
+    setStatus(root, ui.urlLoading);
+    const metadata = await fetchPageMetadata(url);
+    if (metadata.title) state.title = metadata.title;
+    if (metadata.backgroundImage) assets.background = await loadImage(metadata.backgroundImage);
+    if (metadata.toolImage) assets.tool = await loadImage(metadata.toolImage);
+    else if (assets.background) assets.tool = assets.background;
+    setStatus(root, ui.urlApplied);
+  } catch {
+    setStatus(root, ui.urlFailed);
+  }
+}
+
+interface AssetBinding {
+  root: HTMLElement;
+  stateRef: { current: CompositionState };
+  assets: RenderAssets;
+  ui: PromoteThisWebsiteUI;
+  key: AssetKey;
+}
+
+function bindAssetInput(binding: AssetBinding): void {
+  const { root, stateRef, assets, ui, key } = binding;
+  const input = query<HTMLInputElement>(root, `#promote-${key}-file`);
+  input?.addEventListener('change', async () => {
+    const file = input.files?.[0];
+    if (!file) return;
+    assets[key] = await loadImage(await readFile(file));
+    stateRef.current.active = key;
+    writeState(stateRef.current);
+    draw(root, stateRef.current, assets, ui);
+    setStatus(root, ui.fileLoaded);
+  });
+}
+
+function bindCanvas(root: HTMLElement, state: CompositionState, assets: RenderAssets, ui: PromoteThisWebsiteUI): void {
+  const canvas = query<HTMLCanvasElement>(root, '#promote-canvas');
+  if (!canvas) return;
+  let drag: { key: LayerKey; offsetX: number; offsetY: number } | null = null;
+  canvas.addEventListener('pointerdown', (event) => {
+    const point = canvasPoint(canvas, event);
+    const key = hitLayer(state, point);
+    if (!key) return;
+    state.active = key;
+    drag = { key, offsetX: point.x - state.positions[key].x, offsetY: point.y - state.positions[key].y };
+    canvas.setPointerCapture(event.pointerId);
+    draw(root, state, assets, ui);
+  });
+  canvas.addEventListener('pointermove', (event) => {
+    if (!drag) return;
+    const point = canvasPoint(canvas, event);
+    state.positions[drag.key].x = point.x - drag.offsetX;
+    state.positions[drag.key].y = point.y - drag.offsetY;
+    draw(root, state, assets, ui);
+  });
+  canvas.addEventListener('pointerup', () => { if (drag) writeState(state); drag = null; });
+  canvas.addEventListener('pointercancel', () => { drag = null; });
+}
+
+function bindControls(root: HTMLElement, stateRef: { current: CompositionState }, assets: RenderAssets, ui: PromoteThisWebsiteUI): void {
+  const redraw = () => draw(root, stateRef.current, assets, ui);
+  bindCustomSelect(root, 'format', (value) => {
+    const state = stateRef.current;
+    state.format = value as FormatId;
+    state.positions = defaultState(state.format).positions;
+    writeState(state);
+    redraw();
+  });
+  listen(root, '#promote-title', 'input', (event) => { stateRef.current.title = (event.target as HTMLInputElement).value; writeState(stateRef.current); redraw(); });
+  listen(root, '#promote-title-size', 'input', (event) => { stateRef.current.titleFontSize = Number((event.target as HTMLInputElement).value); writeState(stateRef.current); redraw(); });
+  listen(root, '#promote-title-box-size', 'input', (event) => { resizeLayer(stateRef.current, 'title', Number((event.target as HTMLInputElement).value)); writeState(stateRef.current); redraw(); });
+  bindCustomSelect(root, 'title-style', (value) => { stateRef.current.titleStyle = value as TitleStyle; writeState(stateRef.current); redraw(); });
+  bindCustomSelect(root, 'brand', (value) => { stateRef.current.brand = value as CompositionState['brand']; writeState(stateRef.current); redraw(); });
+  bindCustomSelect(root, 'brand-style', (value) => { stateRef.current.brandStyle = value as BrandStyle; writeState(stateRef.current); redraw(); });
+  (Object.keys(stateRef.current.visible) as LayerKey[]).forEach((key) => {
+    listen(root, `#promote-${key}-visible`, 'change', (event) => { stateRef.current.visible[key] = (event.target as HTMLInputElement).checked; writeState(stateRef.current); redraw(); });
+    listen(root, `#promote-${key}-scale`, 'input', (event) => { resizeLayer(stateRef.current, key, Number((event.target as HTMLInputElement).value)); writeState(stateRef.current); redraw(); });
+  });
+  listen(root, '#promote-apply-url', 'click', async () => { await applyUrl(root, stateRef.current, assets, ui); writeState(stateRef.current); redraw(); });
+  listen(root, '#promote-reset', 'click', () => { clearState(); stateRef.current = defaultState(); assetKeys.forEach((key) => { assets[key] = null; }); redraw(); setStatus(root, ui.canvasHint); });
+  listen(root, '#promote-download', 'click', () => downloadCanvas({ root, state: stateRef.current }));
+}
+
+export function mountPromoteThisWebsite(root: HTMLElement, ui: PromoteThisWebsiteUI): void {
+  const stateRef = { current: mergeState(readState()) };
+  const assets: RenderAssets = { background: null, tool: null, brand: null, mascot: null };
+  writeState(stateRef.current);
+  assetKeys.forEach((key) => bindAssetInput({ root, stateRef, assets, ui, key }));
+  bindControls(root, stateRef, assets, ui);
+  bindCanvas(root, stateRef.current, assets, ui);
+  bindPaste({ root, stateRef, assets, ui, draw, setStatus });
+  draw(root, stateRef.current, assets, ui);
+  if (stateRef.current.sourceUrl) {
+    applyUrl(root, stateRef.current, assets, ui).then(() => {
+      writeState(stateRef.current);
+      draw(root, stateRef.current, assets, ui);
+    });
+  }
+  loadDefaultMascot().then((mascot) => {
+    assets.mascot = mascot;
+    draw(root, stateRef.current, assets, ui);
+  }).catch(() => setStatus(root, ui.canvasHint));
+}

package/src/tool/promoteThisWebsite/dom-views.ts

@@ -0,0 +1,322 @@
+/* eslint-disable max-lines */
+import { containRect, type BrandStyle, type CompositionState, type LayerKey, type LayerPosition } from './logic';
+import type { PromoteThisWebsiteUI } from './ui';
+import { drawTitle } from './title-view';
+
+export interface RenderAssets {
+  background: HTMLImageElement | null;
+  tool: HTMLImageElement | null;
+  brand: HTMLImageElement | null;
+  mascot: HTMLImageElement | null;
+}
+
+export interface RenderInput {
+  context: CanvasRenderingContext2D;
+  state: CompositionState;
+  assets: RenderAssets;
+  ui: PromoteThisWebsiteUI;
+}
+
+interface BrandPalette {
+  fill: string;
+  text: string;
+  accent: string;
+  stroke: string;
+}
+
+const brandPalettes: Record<BrandStyle, BrandPalette> = {
+  plain: { fill: 'transparent', text: '#071226', accent: '#c45a2f', stroke: '#071226' },
+  plaque: { fill: '#f7ebd7', text: '#071226', accent: '#c45a2f', stroke: '#c45a2f' },
+  ticket: { fill: '#172a3c', text: '#fffaf0', accent: '#f0b45b', stroke: '#f7ebd7' },
+  stamp: { fill: '#f7ebd7', text: '#071226', accent: '#c45a2f', stroke: '#c45a2f' },
+  neon: { fill: '#071226', text: '#fffaf0', accent: '#11d6c4', stroke: '#11d6c4' },
+  ribbon: { fill: '#071226', text: '#fffaf0', accent: '#c45a2f', stroke: '#f7ebd7' },
+  corner: { fill: '#f7ebd7', text: '#071226', accent: '#c45a2f', stroke: '#071226' },
+  pixel: { fill: '#071226', text: '#fffaf0', accent: '#11d6c4', stroke: '#11d6c4' },
+  halo: { fill: '#071226', text: '#fffaf0', accent: '#11d6c4', stroke: '#11d6c4' },
+  editorial: { fill: '#f7ebd7', text: '#071226', accent: '#c45a2f', stroke: '#071226' },
+};
+
+function roundedRect(context: CanvasRenderingContext2D, position: LayerPosition, radius: number): void {
+  const r = Math.min(radius, position.width / 2, position.height / 2);
+  context.beginPath();
+  context.roundRect(position.x, position.y, position.width, position.height, r);
+}
+
+function drawFallbackBackground(context: CanvasRenderingContext2D, width: number, height: number): void {
+  const gradient = context.createLinearGradient(0, 0, width, height);
+  gradient.addColorStop(0, '#091426');
+  gradient.addColorStop(0.52, '#203e55');
+  gradient.addColorStop(1, '#d48d53');
+  context.fillStyle = gradient;
+  context.fillRect(0, 0, width, height);
+  context.fillStyle = 'rgba(247, 235, 215, 0.82)';
+  for (let index = 0; index < 90; index += 1) {
+    const x = (index * 173) % width;
+    const y = (index * 97) % height;
+    const radius = index % 5 === 0 ? 3 : 1.2;
+    context.beginPath();
+    context.arc(x, y, radius, 0, Math.PI * 2);
+    context.fill();
+  }
+}
+
+function drawImage(context: CanvasRenderingContext2D, image: HTMLImageElement, position: LayerPosition, mode: 'contain' | 'cover'): LayerPosition {
+  const ratio = mode === 'contain'
+    ? Math.min(position.width / image.naturalWidth, position.height / image.naturalHeight)
+    : Math.max(position.width / image.naturalWidth, position.height / image.naturalHeight);
+  const fitted = { x: position.x + (position.width - image.naturalWidth * ratio) / 2, y: position.y + (position.height - image.naturalHeight * ratio) / 2, width: image.naturalWidth * ratio, height: image.naturalHeight * ratio };
+  context.drawImage(image, fitted.x, fitted.y, fitted.width, fitted.height);
+  return fitted;
+}
+
+interface BackgroundInput {
+  context: CanvasRenderingContext2D;
+  state: CompositionState;
+  assets: RenderAssets;
+}
+
+function drawBackground(input: BackgroundInput): void {
+  const { context, state, assets } = input;
+  if (assets.background) drawImage(context, assets.background, state.positions.background, 'cover');
+  else drawFallbackBackground(context, context.canvas.width, context.canvas.height);
+}
+
+function drawTool(context: CanvasRenderingContext2D, state: CompositionState, assets: RenderAssets, ui: PromoteThisWebsiteUI): void {
+  const box = state.positions.tool;
+  const imageBox = assets.tool ? containRect(assets.tool.naturalWidth, assets.tool.naturalHeight, box) : box;
+  context.save();
+  context.shadowColor = 'rgba(4, 11, 24, 0.42)';
+  context.shadowBlur = 28;
+  context.shadowOffsetY = 16;
+  context.fillStyle = '#071226';
+  roundedRect(context, imageBox, 22);
+  context.fill();
+  context.shadowColor = 'transparent';
+  context.clip();
+  if (assets.tool) context.drawImage(assets.tool, imageBox.x, imageBox.y, imageBox.width, imageBox.height);
+  else drawToolFallback(context, imageBox, ui);
+  context.restore();
+  context.save();
+  context.strokeStyle = state.colors.frame;
+  context.lineWidth = 5;
+  roundedRect(context, imageBox, 22);
+  context.stroke();
+  context.restore();
+}
+
+function drawToolFallback(context: CanvasRenderingContext2D, box: LayerPosition, ui: PromoteThisWebsiteUI): void {
+  context.fillStyle = '#0e1a30';
+  context.fillRect(box.x, box.y, box.width, box.height);
+  context.strokeStyle = 'rgba(247, 235, 215, 0.55)';
+  context.lineWidth = 4;
+  context.setLineDash([18, 14]);
+  roundedRect(context, { x: box.x + 22, y: box.y + 22, width: box.width - 44, height: box.height - 44 }, 18);
+  context.stroke();
+  context.setLineDash([]);
+  context.fillStyle = '#f7ebd7';
+  context.font = `700 ${Math.max(22, box.width * 0.028)}px sans-serif`;
+  context.textAlign = 'center';
+  context.textBaseline = 'middle';
+  context.fillText(ui.defaultTool, box.x + box.width / 2, box.y + box.height / 2);
+  context.textAlign = 'left';
+  context.textBaseline = 'alphabetic';
+}
+
+function fitBrandFont(context: CanvasRenderingContext2D, brand: 'jjlmoya.es' | 'GameBob.dev', box: LayerPosition): void {
+  let fontSize = Math.max(14, box.height * 0.55);
+  const maxWidth = box.width * 0.82;
+  context.font = `800 ${fontSize}px sans-serif`;
+  const sample = brand === 'jjlmoya.es' ? 'jjlmoya.es' : 'GameBob.dev';
+  while (context.measureText(sample).width > maxWidth && fontSize > 10) {
+    fontSize *= 0.9;
+    context.font = `800 ${fontSize}px sans-serif`;
+  }
+}
+
+function drawJjlmoyaBrand(context: CanvasRenderingContext2D, box: LayerPosition, textColor: string): void {
+  const scale = Math.min(1, box.width * 0.82 / context.measureText('jjlmoya.es').width);
+  context.save();
+  context.translate(box.x + box.width / 2, box.y + box.height / 2);
+  context.scale(scale, 1);
+  context.fillStyle = textColor;
+  context.textAlign = 'center';
+  context.fillText('jjlmoya.es', 0, 0);
+  context.restore();
+}
+
+function drawGameBobBrand(context: CanvasRenderingContext2D, box: LayerPosition, textColor: string, accent: string): void {
+  const gameWidth = context.measureText('Game').width;
+  const bobWidth = context.measureText('Bob').width;
+  const devWidth = context.measureText('.dev').width;
+  const totalWidth = gameWidth + bobWidth + devWidth;
+  const scale = Math.min(1, box.width * 0.82 / totalWidth);
+  const start = -totalWidth / 2;
+  context.save();
+  context.translate(box.x + box.width / 2, box.y + box.height / 2);
+  context.scale(scale, 1);
+  context.textAlign = 'left';
+  context.fillStyle = textColor;
+  context.fillText('Game', start, 0);
+  context.fillStyle = accent;
+  context.fillText('Bob', start + gameWidth, 0);
+  context.fillStyle = textColor;
+  context.fillText('.dev', start + gameWidth + bobWidth, 0);
+  context.restore();
+}
+
+function drawBrandShape(context: CanvasRenderingContext2D, style: BrandStyle, palette: BrandPalette, box: LayerPosition): void {
+  const shapes: Record<BrandStyle, () => void> = {
+    plain: () => undefined,
+    plaque: () => { roundedRect(context, box, box.height * 0.45); context.fill(); context.stroke(); },
+    ticket: () => drawBrandTicket(context, box),
+    stamp: () => drawBrandStamp(context, box),
+    neon: () => drawBrandNeon(context, palette, box),
+    ribbon: () => drawBrandRibbon(context, palette, box),
+    corner: () => drawBrandCorner(context, palette, box),
+    pixel: () => drawBrandPixel(context, palette, box),
+    halo: () => drawBrandHalo(context, palette, box),
+    editorial: () => drawBrandEditorial(context, palette, box),
+  };
+  shapes[style]();
+}
+
+function drawBrandTicket(context: CanvasRenderingContext2D, box: LayerPosition): void {
+  roundedRect(context, box, 14);
+  context.fill();
+  context.stroke();
+  context.setLineDash([7, 9]);
+  context.beginPath();
+  context.moveTo(box.x + box.width * 0.76, box.y);
+  context.lineTo(box.x + box.width * 0.76, box.y + box.height);
+  context.stroke();
+  context.setLineDash([]);
+}
+
+function drawBrandStamp(context: CanvasRenderingContext2D, box: LayerPosition): void {
+  context.save();
+  context.translate(box.x + box.width / 2, box.y + box.height / 2);
+  context.rotate(-0.04);
+  roundedRect(context, { x: -box.width / 2, y: -box.height / 2, width: box.width, height: box.height }, 10);
+  context.fill();
+  context.stroke();
+  context.restore();
+}
+
+function drawBrandNeon(context: CanvasRenderingContext2D, palette: BrandPalette, box: LayerPosition): void {
+  context.shadowColor = palette.accent;
+  context.shadowBlur = 20;
+  roundedRect(context, box, box.height / 2);
+  context.stroke();
+  context.shadowColor = 'transparent';
+}
+
+function drawBrandRibbon(context: CanvasRenderingContext2D, palette: BrandPalette, box: LayerPosition): void {
+  roundedRect(context, box, 12);
+  context.fill();
+  context.save();
+  context.clip();
+  context.fillStyle = palette.accent;
+  context.fillRect(box.x, box.y + box.height * 0.18, box.width, box.height * 0.64);
+  context.restore();
+  context.stroke();
+}
+
+function drawBrandCorner(context: CanvasRenderingContext2D, palette: BrandPalette, box: LayerPosition): void {
+  roundedRect(context, box, 10);
+  context.fillStyle = palette.fill;
+  context.fill();
+  context.stroke();
+  context.fillStyle = palette.accent;
+  context.fillRect(box.x, box.y, box.width * 0.22, 6);
+}
+
+function drawBrandPixel(context: CanvasRenderingContext2D, palette: BrandPalette, box: LayerPosition): void {
+  roundedRect(context, box, Math.min(14, box.height * 0.24));
+  context.fillStyle = palette.fill;
+  context.fill();
+  context.strokeStyle = palette.stroke;
+  context.lineWidth = 4;
+  context.setLineDash([7, 5]);
+  roundedRect(context, { x: box.x + 5, y: box.y + 5, width: box.width - 10, height: box.height - 10 }, Math.min(10, box.height * 0.18));
+  context.stroke();
+  context.setLineDash([]);
+}
+
+function drawBrandHalo(context: CanvasRenderingContext2D, palette: BrandPalette, box: LayerPosition): void {
+  context.shadowColor = palette.accent;
+  context.shadowBlur = 24;
+  context.globalAlpha = 0.28;
+  context.beginPath();
+  context.ellipse(box.x + box.width / 2, box.y + box.height / 2, box.width / 2, box.height * 0.72, 0, 0, Math.PI * 2);
+  context.fill();
+  context.shadowColor = 'transparent';
+  context.globalAlpha = 1;
+}
+
+function drawBrandEditorial(context: CanvasRenderingContext2D, palette: BrandPalette, box: LayerPosition): void {
+  roundedRect(context, box, 8);
+  context.fill();
+  context.stroke();
+  context.fillRect(box.x, box.y + box.height * 0.82, box.width, 5);
+  context.fillStyle = palette.accent;
+  context.fillRect(box.x, box.y + box.height * 0.82, box.width * 0.28, 5);
+}
+
+function narrowBrandBox(position: LayerPosition): LayerPosition {
+  const height = Math.min(position.height, position.width * 0.22);
+  return { ...position, y: position.y + (position.height - height) / 2, height };
+}
+
+function drawBrand(context: CanvasRenderingContext2D, state: CompositionState, assets: RenderAssets): void {
+  const box = narrowBrandBox(state.positions.brand);
+  const palette = brandPalettes[state.brandStyle];
+  context.save();
+  fitBrandFont(context, state.brand, box);
+  context.textBaseline = 'middle';
+  context.shadowColor = 'rgba(0, 0, 0, 0.35)';
+  context.shadowBlur = 8;
+  context.fillStyle = palette.fill;
+  context.strokeStyle = palette.stroke;
+  context.lineWidth = 3;
+  drawBrandShape(context, state.brandStyle, palette, box);
+  if (assets.brand) drawImage(context, assets.brand, box, 'contain');
+  else {
+    if (state.brand === 'jjlmoya.es') drawJjlmoyaBrand(context, box, palette.text);
+    else drawGameBobBrand(context, box, palette.text, palette.accent);
+  }
+  context.restore();
+}
+
+function drawMascot(context: CanvasRenderingContext2D, assets: RenderAssets, position: LayerPosition): void {
+  if (assets.mascot) drawImage(context, assets.mascot, position, 'contain');
+}
+
+function drawBackgroundLayer(input: RenderInput): void {
+  if (input.state.visible.background) drawBackground({ context: input.context, state: input.state, assets: input.assets });
+}
+
+function drawToolLayer(input: RenderInput): void {
+  if (input.state.visible.tool) drawTool(input.context, input.state, input.assets, input.ui);
+}
+
+function drawForegroundLayers(input: RenderInput): void {
+  const { context, state, assets } = input;
+  if (state.visible.title) drawTitle(context, state);
+  if (state.visible.mascot) drawMascot(context, assets, state.positions.mascot);
+  if (state.visible.brand) drawBrand(context, state, assets);
+}
+
+export function renderComposition(input: RenderInput): void {
+  const { context, state, assets, ui } = input;
+  const width = context.canvas.width;
+  const height = context.canvas.height;
+  context.clearRect(0, 0, width, height);
+  drawBackgroundLayer({ context, state, assets, ui });
+  drawToolLayer({ context, state, assets, ui });
+  drawForegroundLayers({ context, state, assets, ui });
+}
+
+export function layerHitOrder(): LayerKey[] {
+  return ['title', 'mascot', 'brand', 'tool', 'background'];
+}

package/src/tool/promoteThisWebsite/entry.ts

@@ -0,0 +1,15 @@
+import type { DeveloperToolEntry, ToolLocaleContent } from '../../types';
+import type { PromoteThisWebsiteUI } from './ui';
+
+export type PromoteThisWebsiteLocaleContent = ToolLocaleContent<PromoteThisWebsiteUI>;
+
+export const promoteThisWebsite: DeveloperToolEntry<PromoteThisWebsiteUI> = {
+  id: 'promote-this-website',
+  icons: {
+    bg: 'mdi:bullhorn-outline',
+    fg: 'mdi:image-multiple-outline',
+  },
+  i18n: {
+    en: async () => (await import('./i18n/en')).content,
+  },
+};

package/src/tool/promoteThisWebsite/evaluator.ts

@@ -0,0 +1,9 @@
+import type { CompositionState, LayerKey } from './logic';
+
+export function activeLabel(state: CompositionState, labels: Record<LayerKey, string>): string {
+  return `${labels[state.active]}`;
+}
+
+export function visibleLayerCount(state: CompositionState): number {
+  return Object.values(state.visible).filter(Boolean).length;
+}