@jjlmoya/utils-games-development 1.54.0 → 1.56.0

package/src/tool/pixelArtPaletteSwapper/app-client.ts

@@ -0,0 +1,229 @@
+import {
+  PRESET_PALETTES,
+  parsePaletteInput,
+  quantizeImageData,
+  type PaletteColor,
+} from './logic';
+
+interface SourceImageState {
+  name: string;
+  width: number;
+  height: number;
+  data: Uint8ClampedArray;
+}
+
+interface AppEls {
+  root: HTMLElement;
+  fileInput: HTMLInputElement;
+  chooseButton: HTMLButtonElement;
+  dropZone: HTMLElement;
+  sourceCanvas: HTMLCanvasElement;
+  resultCanvas: HTMLCanvasElement;
+  emptyState: HTMLElement;
+  canvasPair: HTMLElement;
+  customPaletteInput: HTMLTextAreaElement;
+  downloadButton: HTMLButtonElement;
+  zoomInput: HTMLInputElement;
+  zoomValue: HTMLOutputElement;
+}
+
+let initialized = false;
+
+function getEl<T extends HTMLElement>(root: HTMLElement, sel: string): T | null {
+  return root.querySelector<T>(sel);
+}
+
+function queryAppElements(root: HTMLElement): AppEls | null {
+  const req = [
+    '#pas-file-input', '#pas-choose-image', '#pas-drop-zone',
+    '#pas-source-canvas', '#pas-result-canvas', '#pas-empty-state',
+    '#pas-canvas-pair', '#pas-custom-palette', '#pas-download',
+    '#pas-zoom', '#pas-zoom-value',
+  ];
+  const found = req.map((s) => root.querySelector(s));
+  if (found.some((el) => !el)) return null;
+
+  return {
+    root,
+    fileInput: found[0] as HTMLInputElement,
+    chooseButton: found[1] as HTMLButtonElement,
+    dropZone: found[2] as HTMLElement,
+    sourceCanvas: found[3] as HTMLCanvasElement,
+    resultCanvas: found[4] as HTMLCanvasElement,
+    emptyState: found[5] as HTMLElement,
+    canvasPair: found[6] as HTMLElement,
+    customPaletteInput: found[7] as HTMLTextAreaElement,
+    downloadButton: found[8] as HTMLButtonElement,
+    zoomInput: found[9] as HTMLInputElement,
+    zoomValue: found[10] as HTMLOutputElement,
+  };
+}
+
+function renderSwatches(root: HTMLElement): void {
+  root.querySelectorAll<HTMLElement>('[data-swatch-palette]').forEach((strip) => {
+    const palette = PRESET_PALETTES[strip.dataset.swatchPalette ?? ''] ?? [];
+    strip.replaceChildren(...palette.map((c) => {
+      const s = document.createElement('span');
+      s.style.backgroundColor = c.hex;
+      return s;
+    }));
+  });
+}
+
+function fitCanvas(canvas: HTMLCanvasElement, width: number, height: number, zoom: number): void {
+  const displayWidth = Math.min(620, Math.max(32, width * zoom));
+  const displayHeight = Math.max(32, Math.round(displayWidth * height / width));
+  canvas.style.width = `${displayWidth}px`;
+  canvas.style.height = `${displayHeight}px`;
+}
+
+interface CanvasDrawOptions {
+  canvas: HTMLCanvasElement;
+  width: number;
+  height: number;
+  data: Uint8ClampedArray;
+  zoom: number;
+}
+
+function drawCanvas(opts: CanvasDrawOptions): void {
+  opts.canvas.width = opts.width;
+  opts.canvas.height = opts.height;
+  const context = opts.canvas.getContext('2d');
+  if (!context) return;
+  context.imageSmoothingEnabled = false;
+  context.putImageData(new ImageData(new Uint8ClampedArray(opts.data), opts.width, opts.height), 0, 0);
+  fitCanvas(opts.canvas, opts.width, opts.height, opts.zoom);
+}
+
+function setStatus(root: HTMLElement, message: string, tone = 'idle'): void {
+  const statusEl = getEl<HTMLElement>(root, '#pas-status');
+  if (!statusEl) return;
+  statusEl.textContent = message;
+  statusEl.dataset.tone = tone;
+}
+
+function updateSummaryTexts(root: HTMLElement, q: { sourceColors: number; mappedColors: number }, width: number, height: number): void {
+  const scc = getEl<HTMLElement>(root, '#pas-source-colors');
+  const mcc = getEl<HTMLElement>(root, '#pas-mapped-colors');
+  const isz = getEl<HTMLElement>(root, '#pas-image-size');
+  const rn = getEl<HTMLElement>(root, '#pas-render-note');
+  if (scc) scc.textContent = String(q.sourceColors);
+  if (mcc) mcc.textContent = String(q.mappedColors);
+  if (isz) isz.textContent = `${width} × ${height}`;
+  if (rn) rn.textContent = (root.dataset.mappedSummary ?? '').replace('{source}', String(q.sourceColors)).replace('{mapped}', String(q.mappedColors));
+}
+
+function processImageLoad(els: AppEls, file: File, img: HTMLImageElement): SourceImageState | null {
+  const canvas = document.createElement('canvas');
+  canvas.width = img.naturalWidth;
+  canvas.height = img.naturalHeight;
+  const ctx = canvas.getContext('2d', { willReadFrequently: true });
+  if (!ctx) return null;
+  ctx.imageSmoothingEnabled = false;
+  ctx.drawImage(img, 0, 0);
+  const data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
+  const fn = getEl<HTMLElement>(els.root, '#pas-file-name');
+  if (fn) fn.textContent = file.name;
+  getEl<HTMLElement>(els.root, '.pas-command-bar')?.classList.add('has-image');
+  els.chooseButton.textContent = els.root.dataset.replaceImage ?? 'Replace image';
+  els.emptyState.hidden = true;
+  els.canvasPair.hidden = false;
+  return { name: file.name, width: canvas.width, height: canvas.height, data };
+}
+
+function setupFileHandler(els: AppEls, onLoaded: (src: SourceImageState) => void): void {
+  els.chooseButton.addEventListener('click', () => els.fileInput.click());
+  els.dropZone.addEventListener('click', () => els.fileInput.click());
+  els.fileInput.addEventListener('change', () => {
+    const file = els.fileInput.files?.[0];
+    if (!file || !file.type.startsWith('image/')) return;
+    const url = URL.createObjectURL(file);
+    const img = new Image();
+    img.onload = () => {
+      const src = processImageLoad(els, file, img);
+      if (src) onLoaded(src);
+      URL.revokeObjectURL(url);
+    };
+    img.src = url;
+  });
+}
+
+function setupPresetButtons(els: AppEls, onApply: (p: PaletteColor[], id: string) => void): void {
+  els.root.querySelectorAll<HTMLButtonElement>('[data-palette-id]').forEach((b) => b.addEventListener('click', () => {
+    const id = b.dataset.paletteId ?? 'gameBoy';
+    els.customPaletteInput.value = PRESET_PALETTES[id].map((c) => c.hex).join(', ');
+    onApply(PRESET_PALETTES[id], id);
+  }));
+}
+
+function setupCustomAndDownload(els: AppEls, onCustomApply: (hexList: string) => void, onCustomReset: () => void, onDownload: () => void): void {
+  getEl<HTMLButtonElement>(els.root, '#pas-apply-custom')?.addEventListener('click', () => onCustomApply(els.customPaletteInput.value));
+  getEl<HTMLButtonElement>(els.root, '#pas-reset-custom')?.addEventListener('click', () => onCustomReset());
+  els.downloadButton.addEventListener('click', onDownload);
+}
+
+function triggerDownload(canvas: HTMLCanvasElement, name: string, id: string): void {
+  canvas.toBlob((blob) => {
+    if (!blob) return;
+    const a = document.createElement('a');
+    a.download = `${name.replace(/\.[^.]+$/, '') || 'pixel-art'}-${id}.png`;
+    a.href = URL.createObjectURL(blob);
+    a.click();
+  }, 'image/png');
+}
+
+function runQuantizeRender(els: AppEls, src: SourceImageState, pal: PaletteColor[]): Uint8ClampedArray {
+  setStatus(els.root, els.root.dataset.processing ?? 'Mapping pixels', 'working');
+  const alpha = getEl<HTMLInputElement>(els.root, '#pas-preserve-alpha')?.checked ?? true;
+  const q = quantizeImageData(src.data, pal, alpha);
+  drawCanvas({ canvas: els.resultCanvas, width: src.width, height: src.height, data: q.data, zoom: Number(els.zoomInput.value) });
+  const ip = getEl<HTMLElement>(els.root, '#pas-inspector-preview');
+  if (ip) ip.style.backgroundImage = `url(${els.resultCanvas.toDataURL('image/png')})`;
+  updateSummaryTexts(els.root, q, src.width, src.height);
+  setStatus(els.root, els.root.dataset.ready ?? 'Ready', 'ready');
+  els.downloadButton.disabled = false;
+  return q.data;
+}
+
+function setupCoreAppLogic(els: AppEls): void {
+  let activePalette = PRESET_PALETTES.gameBoy;
+  let sourceImage: SourceImageState | null = null;
+  let resultData: Uint8ClampedArray | null = null;
+  let activePaletteId = 'gameBoy';
+
+  const renderResult = (): void => {
+    if (sourceImage) resultData = runQuantizeRender(els, sourceImage, activePalette);
+  };
+
+  const applyPalette = (palette: PaletteColor[], paletteId: string): void => {
+    if (palette.length === 0) return;
+    activePalette = palette;
+    activePaletteId = paletteId;
+    els.root.querySelectorAll<HTMLButtonElement>('[data-palette-id]').forEach((b) => b.classList.toggle('is-selected', b.dataset.paletteId === paletteId));
+    renderResult();
+  };
+
+  setupFileHandler(els, (src) => {
+    sourceImage = src;
+    drawCanvas({ canvas: els.sourceCanvas, width: src.width, height: src.height, data: src.data, zoom: Number(els.zoomInput.value) });
+    renderResult();
+  });
+  setupPresetButtons(els, applyPalette);
+  setupCustomAndDownload(els,
+    (val) => applyPalette(parsePaletteInput(val), 'custom'),
+    () => { els.customPaletteInput.value = PRESET_PALETTES.gameBoy.map((c) => c.hex).join(', '); applyPalette(PRESET_PALETTES.gameBoy, 'gameBoy'); },
+    () => { if (sourceImage && resultData) triggerDownload(els.resultCanvas, sourceImage.name, activePaletteId); }
+  );
+}
+
+export function initPixelArtPaletteSwapper(): void {
+  if (initialized) return;
+  initialized = true;
+  const root = getEl<HTMLElement>(document.body, '[data-tool="pixel-art-palette-swapper"]');
+  if (!root) return;
+  const els = queryAppElements(root);
+  if (!els) return;
+
+  setupCoreAppLogic(els);
+  renderSwatches(els.root);
+}

package/src/tool/pixelArtPaletteSwapper/bibliography.astro

@@ -0,0 +1,6 @@
+---
+import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared';
+import { bibliographyEntries } from './bibliography';
+---
+
+<SharedBibliography links={bibliographyEntries} />

package/src/tool/pixelArtPaletteSwapper/bibliography.ts

@@ -0,0 +1,16 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliographyEntries: BibliographyEntry[] = [
+  {
+    name: 'MDN Canvas API',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API',
+  },
+  {
+    name: 'Lospec Palette List',
+    url: 'https://lospec.com/palette-list',
+  },
+  {
+    name: 'W3C Portable Network Graphics Specification',
+    url: 'https://www.w3.org/TR/png-3/',
+  },
+];

package/src/tool/pixelArtPaletteSwapper/component.astro

@@ -0,0 +1,153 @@
+---
+import type { PixelArtPaletteSwapperUI } from './ui';
+import './pixel-art-palette-swapper.css';
+
+interface Props {
+  ui: PixelArtPaletteSwapperUI;
+}
+
+const { ui } = Astro.props;
+---
+
+<div
+  class="pas-shell"
+  data-tool="pixel-art-palette-swapper"
+  data-processing={ui.processing}
+  data-ready={ui.readyStatus}
+  data-invalid-palette={ui.invalidPalette}
+  data-invalid-image={ui.invalidImage}
+  data-mapped-summary={ui.mappedSummary}
+  data-replace-image={ui.replaceImage}
+  data-drop-active={ui.dropActive}
+  data-upload-title={ui.uploadTitle}
+>
+  <div class="pas-command-bar">
+    <div class="pas-drop-zone" id="pas-drop-zone" tabindex="0" role="button" aria-label={ui.uploadTitle}>
+      <span class="pas-drop-mark" aria-hidden="true">+</span>
+      <span class="pas-drop-copy">
+        <strong id="pas-drop-title">{ui.uploadTitle}</strong>
+        <small id="pas-drop-hint">{ui.uploadHint}</small>
+      </span>
+      <input id="pas-file-input" class="pas-visually-hidden" type="file" accept="image/png,image/jpeg,image/webp" aria-label={ui.chooseImage} />
+    </div>
+    <button id="pas-choose-image" class="pas-button pas-button-primary" type="button">{ui.chooseImage}</button>
+    <span id="pas-file-name" class="pas-file-name">{ui.waitingForImage}</span>
+    <span id="pas-status" class="pas-status" role="status" aria-live="polite">{ui.waitingForImage}</span>
+  </div>
+
+  <div class="pas-workbench">
+    <aside class="pas-panel pas-palette-panel">
+      <div class="pas-panel-heading">
+        <span class="pas-kicker">01</span>
+        <h2>{ui.paletteTitle}</h2>
+      </div>
+
+      <div class="pas-preset-grid" role="list" aria-label={ui.paletteTitle}>
+        <button class="pas-preset is-selected" type="button" data-palette-id="gameBoy" role="listitem">
+          <span class="pas-preset-name">{ui.gameBoyPalette}</span>
+          <span class="pas-swatch-strip" data-swatch-palette="gameBoy" aria-hidden="true"></span>
+        </button>
+        <button class="pas-preset" type="button" data-palette-id="nes" role="listitem">
+          <span class="pas-preset-name">{ui.nesPalette}</span>
+          <span class="pas-swatch-strip" data-swatch-palette="nes" aria-hidden="true"></span>
+        </button>
+        <button class="pas-preset" type="button" data-palette-id="pico8" role="listitem">
+          <span class="pas-preset-name">{ui.pico8Palette}</span>
+          <span class="pas-swatch-strip" data-swatch-palette="pico8" aria-hidden="true"></span>
+        </button>
+        <button class="pas-preset" type="button" data-palette-id="commodore64" role="listitem">
+          <span class="pas-preset-name">{ui.commodore64Palette}</span>
+          <span class="pas-swatch-strip" data-swatch-palette="commodore64" aria-hidden="true"></span>
+        </button>
+        <button class="pas-preset" type="button" data-palette-id="dawnBringer16" role="listitem">
+          <span class="pas-preset-name">{ui.dawnBringerPalette}</span>
+          <span class="pas-swatch-strip" data-swatch-palette="dawnBringer16" aria-hidden="true"></span>
+        </button>
+      </div>
+
+      <div class="pas-custom-block">
+        <div class="pas-field-heading">
+          <label for="pas-custom-palette">{ui.customPalette}</label>
+          <span id="pas-palette-count">4 {ui.paletteCount}</span>
+        </div>
+        <textarea id="pas-custom-palette" rows="3" spellcheck="false" aria-describedby="pas-custom-hint">#0f380f, #306230, #8bac0f, #9bbc0f</textarea>
+        <small id="pas-custom-hint">{ui.customPaletteHint}</small>
+        <div class="pas-inline-actions">
+          <button id="pas-apply-custom" class="pas-button pas-button-dark" type="button">{ui.applyCustomPalette}</button>
+          <button id="pas-reset-custom" class="pas-text-button" type="button">{ui.resetCustomPalette}</button>
+        </div>
+      </div>
+
+      <label class="pas-toggle-row" for="pas-preserve-alpha">
+        <span>{ui.preserveAlpha}</span>
+        <input id="pas-preserve-alpha" type="checkbox" checked />
+        <span class="pas-toggle" aria-hidden="true"></span>
+      </label>
+    </aside>
+
+    <main class="pas-preview-panel">
+      <div class="pas-panel-heading pas-preview-heading">
+        <div>
+          <span class="pas-kicker">02</span>
+          <h2>{ui.sourcePreview} <span aria-hidden="true">→</span> {ui.resultPreview}</h2>
+        </div>
+        <label class="pas-zoom-control" for="pas-zoom">
+          <span>{ui.zoomLabel}</span>
+          <input id="pas-zoom" type="range" min="1" max="8" value="3" />
+          <output id="pas-zoom-value" for="pas-zoom">3x</output>
+        </label>
+      </div>
+
+      <div class="pas-canvas-stage" id="pas-canvas-stage">
+        <div class="pas-empty-state" id="pas-empty-state">
+          <div class="pas-empty-pixel" aria-hidden="true"></div>
+          <strong>{ui.uploadToPreview}</strong>
+          <span>{ui.resultEmpty}</span>
+        </div>
+        <div class="pas-canvas-pair" id="pas-canvas-pair" hidden>
+          <figure class="pas-canvas-card">
+            <figcaption><span class="pas-dot pas-dot-source"></span>{ui.sourcePreview}</figcaption>
+            <canvas id="pas-source-canvas" width="1" height="1" aria-label={ui.sourcePreview}></canvas>
+          </figure>
+          <figure class="pas-canvas-card pas-result-card">
+            <figcaption><span class="pas-dot pas-dot-result"></span>{ui.resultPreview}</figcaption>
+            <canvas id="pas-result-canvas" width="1" height="1" aria-label={ui.resultPreview}></canvas>
+          </figure>
+        </div>
+      </div>
+
+      <div class="pas-preview-footer">
+        <span class="pas-shortcut">PNG <span aria-hidden="true">·</span> RGB nearest-color mapping</span>
+        <span id="pas-render-note">{ui.waitingForImage}</span>
+      </div>
+    </main>
+
+    <aside class="pas-panel pas-inspector-panel">
+      <div class="pas-panel-heading">
+        <span class="pas-kicker">03</span>
+        <h2>{ui.resultPreview}</h2>
+      </div>
+      <div class="pas-inspector-preview" id="pas-inspector-preview" aria-hidden="true">
+        <div class="pas-inspector-pixel-grid"></div>
+      </div>
+      <div class="pas-stats-list">
+        <div><span>{ui.imageSize}</span><strong id="pas-image-size">—</strong></div>
+        <div><span>{ui.colorCount}</span><strong id="pas-source-colors">—</strong></div>
+        <div><span>{ui.mappedCount}</span><strong id="pas-mapped-colors">—</strong></div>
+        <div><span>{ui.paletteCount}</span><strong id="pas-inspector-palette-count">4</strong></div>
+      </div>
+      <button id="pas-download" class="pas-button pas-download-button" type="button" disabled>{ui.downloadPng}</button>
+      <span id="pas-download-hint" class="pas-download-hint">{ui.downloadDisabled}</span>
+    </aside>
+  </div>
+</div>
+
+<script>
+  import { initPixelArtPaletteSwapper } from './app-client';
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initPixelArtPaletteSwapper, { once: true });
+  } else {
+    initPixelArtPaletteSwapper();
+  }
+</script>

package/src/tool/pixelArtPaletteSwapper/entry.ts

@@ -0,0 +1,28 @@
+import type { GamesToolEntry, ToolLocaleContent } from '../../types';
+import type { PixelArtPaletteSwapperUI } from './ui';
+
+export type { PixelArtPaletteSwapperUI };
+
+export type PixelArtPaletteSwapperLocaleContent = ToolLocaleContent<PixelArtPaletteSwapperUI>;
+
+export const pixelArtPaletteSwapper: GamesToolEntry<PixelArtPaletteSwapperUI> = {
+  id: 'pixel-art-palette-swapper',
+  icons: { bg: 'mdi:palette', fg: 'mdi:format-color-fill' },
+  i18n: {
+    de: () => import('./i18n/de').then((module) => module.content),
+    en: () => import('./i18n/en').then((module) => module.content),
+    es: () => import('./i18n/es').then((module) => module.content),
+    fr: () => import('./i18n/fr').then((module) => module.content),
+    id: () => import('./i18n/id').then((module) => module.content),
+    it: () => import('./i18n/it').then((module) => module.content),
+    ja: () => import('./i18n/ja').then((module) => module.content),
+    ko: () => import('./i18n/ko').then((module) => module.content),
+    nl: () => import('./i18n/nl').then((module) => module.content),
+    pl: () => import('./i18n/pl').then((module) => module.content),
+    pt: () => import('./i18n/pt').then((module) => module.content),
+    ru: () => import('./i18n/ru').then((module) => module.content),
+    sv: () => import('./i18n/sv').then((module) => module.content),
+    tr: () => import('./i18n/tr').then((module) => module.content),
+    zh: () => import('./i18n/zh').then((module) => module.content),
+  },
+};

package/src/tool/pixelArtPaletteSwapper/i18n/de.ts

@@ -0,0 +1,233 @@
+import type { ToolLocaleContent } from '../../../types';
+import type { PixelArtPaletteSwapperUI } from '../ui';
+
+export const content: ToolLocaleContent<PixelArtPaletteSwapperUI> = {
+  slug: 'pixel-art-palette-tauscher',
+  title: 'Pixel Art Palette Tauscher',
+  description: 'Reduzieren Sie Sprites und Spritesheets auf klassische Konsolenpaletten oder eigene Hex-Farben direkt in Ihrem Browser.',
+  ui: {
+    uploadTitle: 'Sprite oder Spritesheet ablegen',
+    uploadHint: 'PNG, JPEG oder WebP bleiben auf Ihrem Gerät',
+    chooseImage: 'Bild auswählen',
+    replaceImage: 'Bild ersetzen',
+    paletteTitle: 'Palette wählen',
+    gameBoyPalette: 'Game Boy',
+    nesPalette: 'NES inspiriert',
+    pico8Palette: 'PICO-8',
+    commodore64Palette: 'Commodore 64',
+    dawnBringerPalette: 'DawnBringer 16',
+    customPalette: 'Benutzerdefinierte Farben',
+    customPaletteHint: 'Trennen Sie Hex-Werte durch Kommas, Leerzeichen oder Zeilenumbrüche.',
+    applyCustomPalette: 'Palette anwenden',
+    resetCustomPalette: 'Zurücksetzen',
+    sourcePreview: 'Original',
+    resultPreview: 'Reduziertes Ergebnis',
+    waitingForImage: 'Warten auf ein Bild',
+    uploadToPreview: 'Laden Sie ein Bild hoch, um es vorzuschauen',
+    resultEmpty: 'Original und reduzierte Version erscheinen nebeneinander.',
+    downloadPng: 'PNG herunterladen',
+    downloadDisabled: 'Bild hochladen zum Exportieren.',
+    colorCount: 'Quellfarben',
+    mappedCount: 'Verwendete Farben',
+    imageSize: 'Bildgröße',
+    paletteCount: 'Palettenfarben',
+    preserveAlpha: 'Transparenz erhalten',
+    zoomLabel: 'Zoom',
+    processing: 'Pixel werden zugeordnet',
+    invalidPalette: 'Mindestens eine gültige Hex-Farbe eingeben',
+    invalidImage: 'Wählen Sie ein PNG-, JPEG- oder WebP-Bild',
+    readyStatus: 'Bereit',
+    dropActive: 'Zum Laden loslassen',
+    mappedSummary: '{source} Quellfarben auf {mapped} Palettenfarben abgebildet',
+  },
+  seo: [
+    {
+      type: 'title',
+      level: 2,
+      text: 'Verwandeln Sie Vollfarb-Sprites in Gezielte Retro-Paletten',
+    },
+    {
+      type: 'paragraph',
+      html: 'Eine begrenzte Palette ist mehr als eine technische Einschränkung. Sie verleiht einem Sprite eine wiedererkennbare Farbsprache, lässt Szenen wie aus einem Guss wirken und erinnert an den visuellen Charakter einer bestimmten Konsole oder Fantasie-Hardware. Dieser browserbasierte Palette-Swapper ermöglicht es Ihnen, das Quellbild mit einer reduzierten Version zu vergleichen, während Sie mit Game Boy, NES-inspirierten, PICO-8, Commodore 64, DawnBringer 16 und eigenen Paletten experimentieren.',
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Funktionsweise der Nächstgelegenen Farbreduktion',
+    },
+    {
+      type: 'paragraph',
+      html: 'Das Werkzeug liest die Rot-, Grün- und Blaukanäle für jeden sichtbaren Pixel und vergleicht diese Farbe mit jeder Farbe der ausgewählten Palette. Es wählt den Paletteneintrag mit dem geringsten quadratischen RGB-Abstand aus und schreibt die Ersatzfarbe in einen neuen Canvas-Puffer. Der Alphakanal bleibt getrennt, sodass transparente Pixel transparent bleiben und halbtransparente Kanten ihre ursprüngliche Deckkraft behalten, wenn Transparenz erhalten aktiviert ist.',
+    },
+    {
+      type: 'comparative',
+      columns: 2,
+      items: [
+        {
+          title: 'Palettenbegrenzung',
+          description: 'Jede Quellfarbe wird durch den nächstgelegenen verfügbaren Farbton ersetzt.',
+          points: [
+            'Schnell und vorhersehbar für Sprites, Icons, Tilesets und UI-Grafiken',
+            'Behält ursprüngliche Maße und Pixelpositionen exakt bei',
+            'Ermöglicht eine übersichtliche Kontrolle des festgelegten Farbbudgets',
+          ],
+        },
+        {
+          title: 'Palette Swapping',
+          description: 'Das gleiche Artwork kann auf ein anderes sorgfältig gewähltes Farbset neu abgebildet werden.',
+          points: [
+            'Nützlich für alternative Kostüme, Biome und Schadenszustände',
+            'Benutzerdefinierte Hex-Listen passen sich Ihrer eigenen Art-Direction an',
+            'Das heruntergeladene PNG kann direkt in Ihren Editor importiert werden',
+          ],
+        },
+      ],
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Wahl Einer Palette für Pixel Art',
+    },
+    {
+      type: 'table',
+      headers: ['Palette', 'Farben', 'Eignung', 'Beachten'],
+      rows: [
+        ['Game Boy', '4', 'Monochromer Handheld-Stil und starke Tonwertstudien', 'Geringer Kontrast kann nahe beieinander liegende Materialien verschmelzen'],
+        ['NES inspiriert', '16', 'Markante Arcade-Sprites, Charaktere und Tilesets', 'Sehr helle Töne können kleine Details überdecken'],
+        ['PICO-8', '16', 'Modernes Pixel Art mit kräftigen Farb-Akzenten', 'Hohe Sättigung erfordert gezielt eingesetzten Kontrast'],
+        ['Commodore 64', '16', 'Dezente Retro-Szenen und Computergame-Ästhetik', 'Niedriger Kontrast profitiert von klaren Silhouetten'],
+        ['DawnBringer 16', '16', 'Vielseitige handverlesene Palette für allgemeine Pixel-Grafik', 'Farbrampen benötigen weiterhin eine bewusste Lichtrichtung'],
+      ],
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Praktischer Workflow für Spritesheets',
+    },
+    {
+      type: 'paragraph',
+      html: 'Beginnen Sie mit der größten Quellgrafik, die Sie komfortabel bearbeiten können, und laden Sie das exportierte Sprite oder Spritesheet hier hoch. Wählen Sie eine Voreinstellung, um eine Stilrichtung festzulegen, oder fügen Sie eine eigene Hex-Liste ein. Prüfen Sie beide Bildflächen bei höherem Zoom auf verlorene Gesichtszüge, verschmolzene Konturen oder Highlights. Wenn das Ergebnis matschig wirkt, versuchen Sie eine Palette mit stärkeren Tonwertstufen oder fügen Sie eine gezielte Akzentfarbe hinzu.',
+    },
+    {
+      type: 'tip',
+      title: 'Palette Bewusst Wählen',
+      html: 'Eine größere Farbliste ist nicht automatisch besser. Beginnen Sie mit vier bis sechzehn Farben, weisen Sie jeder Farbe eine klare Aufgabe zu und reservieren Sie die hellsten Werte für Fokusspunkte oder gut lesbare Highlights. Der Algorithmus behält die Pixelpositionen bei, kann aber nicht entscheiden, welche Farben die visuelle Hierarchie Ihres Sprites tragen sollen.',
+    },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Export-Checkliste für Pixel Art',
+    },
+    {
+      type: 'diagnostic',
+      variant: 'info',
+      title: 'Vor dem Import der reduzierten PNG Datei',
+      html: 'Überprüfen Sie das Ergebnis bei 100 Prozent sowie im finalen Spielmaßstab, stellen Sie sicher, dass transparente Ränder sauber bleiben, prüfen Sie die Lesbarkeit wichtiger Silhouetten und bewahren Sie die ursprüngliche Quelldatei neben dem Export auf, um die Palette anzupassen ohne von vorn beginnen zu müssen.',
+    },
+    {
+      type: 'glossary',
+      items: [
+        {
+          term: 'Farbquantisierung',
+          definition: 'Der Prozess der Reduzierung einer großen Menge an Quellfarben auf ein kleineres, fest definiertes Farbset.',
+        },
+        {
+          term: 'Farbrampe',
+          definition: 'Eine zusammenhängende Folge von dunklen, mittleren und hellen Farben zur Schattierung einer Oberfläche.',
+        },
+        {
+          term: 'Indizierte Palette',
+          definition: 'Eine kompakte Farbtabelle, bei der Bildpixel auf Einträge in einer gemeinsamen Liste verweisen, anstatt vollständige Farbwerte zu speichern.',
+        },
+      ],
+    },
+  ],
+  faq: [
+    {
+      question: 'Werden meine Bilder auf einen Server hochgeladen?',
+      answer: 'Nein. Das Bild wird in Ihrem Browser auf einem Canvas decodiert, lokal mit JavaScript verarbeitet und direkt als PNG exportiert. Das Werkzeug enthält keinen Hochladevorgang.',
+    },
+    {
+      question: 'Kann ich meine eigene Palette verwenden?',
+      answer: 'Ja. Füge 6-stellige oder 3-stellige Hex-Farbcodes durch Kommas, Leerzeichen oder Zeilenumbrüche getrennt in das Feld für benutzerdefinierte Farben ein und wähle Palette anwenden.',
+    },
+    {
+      question: 'Wird die Größe meines Sprites oder Spritesheets verändert?',
+      answer: 'Nein. Die Ausgabedatei behält die ursprüngliche Breite, Höhe, Pixelpositionen und Alpha-Werte bei, wenn Transparenz erhalten aktiviert ist.',
+    },
+    {
+      question: 'Welcher Algorithmus wird verwendet?',
+      answer: 'Jeder sichtbare Pixel wird der nächstgelegenen Farbe der ausgewählten Palette mithilfe des quadratischen euklidischen Abstands im RGB-Raum zugewiesen. Es ist schnell, deterministisch und einfach vorzuschauen, wendet jedoch kein Dithering oder eine perzeptive Lab-Farbkorrektur an.',
+    },
+  ],
+  howTo: [
+    {
+      name: 'Sprite laden',
+      text: 'Ziehen Sie ein PNG-, JPEG- oder WebP-Sprite oder Spritesheet in den Arbeitsbereich oder nutzen Sie Bild auswählen.',
+    },
+    {
+      name: 'Palette wählen',
+      text: 'Wählen Sie eine klassische Voreinstellung oder geben Sie eigene Hex-Farben ein. Das Ergebnis aktualisiert sich sofort nach dem Anwenden.',
+    },
+    {
+      name: 'Vergleichen und exportieren',
+      text: 'Inspeizieren Sie das Original und das reduzierte Bild, passen Sie den Vorschau-Zoom an und laden Sie das Ergebnis als PNG herunter.',
+    },
+  ],
+  schemas: [
+    {
+      '@context': 'https://schema.org',
+      '@type': 'SoftwareApplication',
+      name: 'Pixel Art Palette Tauscher',
+      applicationCategory: 'DesignApplication',
+      operatingSystem: 'Any',
+      offers: { '@type': 'Offer', price: '0', priceCurrency: 'USD' },
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'FAQPage',
+      mainEntity: [
+        {
+          '@type': 'Question',
+          name: 'Werden meine Bilder auf einen Server hochgeladen?',
+          acceptedAnswer: {
+            '@type': 'Answer',
+            text: 'Nein. Das Bild wird lokal im Browser verarbeitet und direkt als PNG exportiert.',
+          },
+        },
+        {
+          '@type': 'Question',
+          name: 'Kann ich meine eigene Palette verwenden?',
+          acceptedAnswer: {
+            '@type': 'Answer',
+            text: 'Ja. Füge Hex-Farbcodes in das entsprechende Feld ein und wähle Palette anwenden.',
+          },
+        },
+      ],
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'HowTo',
+      name: 'Wie man ein Sprite auf eine Retro-Palette reduziert',
+      step: [
+        { '@type': 'HowToStep', name: 'Sprite laden', text: 'Ziehen Sie ein Bild in den Arbeitsbereich.' },
+        { '@type': 'HowToStep', name: 'Palette wählen', text: 'Wählen Sie ein Preset oder geben Sie Hex-Farben ein.' },
+        { '@type': 'HowToStep', name: 'Vergleichen und exportieren', text: 'Prüfen Sie das Ergebnis und laden Sie das PNG herunter.' },
+      ],
+    },
+  ],
+  bibliography: [
+    {
+      name: 'MDN Canvas API',
+      url: 'https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API',
+    },
+    {
+      name: 'Lospec Palette List',
+      url: 'https://lospec.com/palette-list',
+    },
+    {
+      name: 'W3C Portable Network Graphics Specification',
+      url: 'https://www.w3.org/TR/png-3/',
+    },
+  ],
+};