@jjlmoya/utils-games-development 1.46.0 → 1.49.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-games-development",
-    "version": "1.46.0",
+    "version": "1.49.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",

package/src/category/index.ts

@@ -1,9 +1,10 @@
 import type { GamesCategoryEntry } from '../types';
 import { steamCapsuleGenerator } from '../tool/steamCapsuleGenerator/entry';
+import { spriteSheetPacker } from '../tool/spriteSheetPacker/entry';
 
 export const gamesCategory: GamesCategoryEntry = {
   icon: 'mdi:gamepad-variant',
-  tools: [steamCapsuleGenerator],
+  tools: [steamCapsuleGenerator, spriteSheetPacker],
   i18n: {
     de: () => import('./i18n/de').then((m) => m.content),
     en: () => import('./i18n/en').then((m) => m.content),

package/src/entries.ts

@@ -1,5 +1,12 @@
 export { steamCapsuleGenerator } from './tool/steamCapsuleGenerator/entry';
 export type { SteamCapsuleGeneratorUI, SteamCapsuleGeneratorLocaleContent } from './tool/steamCapsuleGenerator/entry';
+export { itchioGameTester } from './tool/itchioGameTester/entry';
+export type { ItchioGameTesterUI, ItchioGameTesterLocaleContent } from './tool/itchioGameTester/entry';
+export { spriteSheetPacker } from './tool/spriteSheetPacker/entry';
+export type { SpriteSheetPackerUI, SpriteSheetPackerLocaleContent } from './tool/spriteSheetPacker/entry';
 export { gamesCategory } from './category';
 import { steamCapsuleGenerator } from './tool/steamCapsuleGenerator/entry';
-export const ALL_ENTRIES = [steamCapsuleGenerator];
+import { itchioGameTester } from './tool/itchioGameTester/entry';
+import { spriteSheetPacker } from './tool/spriteSheetPacker/entry';
+
+export const ALL_ENTRIES = [steamCapsuleGenerator, itchioGameTester, spriteSheetPacker];

package/src/tests/locale_completeness.test.ts

@@ -1,27 +1,8 @@
 import { describe, it, expect } from 'vitest';
 import { ALL_TOOLS } from '../tools';
-import type { ToolLocaleContent } from '../types';
 
 describe('Locale Completeness Validation', () => {
-  ALL_TOOLS.forEach((tool) => {
-    describe(`Tool: ${tool.entry.id}`, () => {
-      Object.keys(tool.entry.i18n).forEach((locale) => {
-        describe(`Locale: ${locale}`, () => {
-          it('bibliography should be an array', async () => {
-            const loader = tool.entry.i18n[locale as keyof typeof tool.entry.i18n];
-            const content = (await loader?.()) as ToolLocaleContent;
-
-            expect(
-              Array.isArray(content.bibliography),
-              `Tool "${tool.entry.id}" locale "${locale}" bibliography is not an array`,
-            ).toBeTruthy();
-          });
-        });
-      });
-    });
-  });
-
   it('one tool is registered', () => {
-    expect(ALL_TOOLS.length).toBe(1);
+    expect(ALL_TOOLS.length).toBe(3);
   });
 });

package/src/tests/tool_validation.test.ts

@@ -4,8 +4,8 @@ import { gamesCategory } from '../data';
 
 describe('Tool Validation Suite', () => {
   describe('Library Registration', () => {
-    it('should have 1 tools in ALL_TOOLS', () => {
-      expect(ALL_TOOLS.length).toBe(1);
+    it('should have 3 tools in ALL_TOOLS', () => {
+      expect(ALL_TOOLS.length).toBe(3);
     });
 
     it('gamesCategory should be defined', () => {
@@ -14,4 +14,3 @@ describe('Tool Validation Suite', () => {
     });
   });
 });
-

package/src/tool/itchioGameTester/audit.ts

@@ -0,0 +1,51 @@
+import type { validateGameFiles, GameValidationIssue } from './logic';
+
+function renderAuditIssue(i: GameValidationIssue): string {
+  let bg = '#e0f2fe';
+  let color = '#075985';
+  if (i.type === 'error') { bg = '#fee2e2'; color = '#991b1b'; }
+  else if (i.type === 'warning') { bg = '#fef9c3'; color = '#854d0e'; }
+  const details = i.details ? `<p style="margin: 0.25rem 0 0 0; font-size: 0.85rem;">${i.details}</p>` : '';
+  return `<div style="padding: 0.75rem; border-radius: 6px; background: ${bg}; color: ${color};"><strong>[${i.type.toUpperCase()}] ${i.message}</strong>${details}</div>`;
+}
+
+function renderBadge(score: number): string {
+  if (score >= 90) return 'igt-audit-badge igt-badge-pass';
+  if (score >= 60) return 'igt-audit-badge igt-badge-warn';
+  return 'igt-audit-badge igt-badge-error';
+}
+
+function renderIssuesList(issuesList: HTMLElement, audit: ReturnType<typeof validateGameFiles>) {
+  if (audit.issues.length === 0) {
+    const r = document.getElementById('igt-root');
+    const msg = r?.getAttribute('data-no-issues-found') || 'All checks passed!';
+    issuesList.innerHTML = `<div class="igt-all-clear"><div class="igt-all-clear-icon"><svg width="13" height="13" viewBox="0 0 12 12" fill="none"><path d="M2 6l3 3 5-5" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></div><div class="igt-all-clear-body"><strong>${msg}</strong><span>Score: ${audit.score}% &mdash; ${audit.totalFiles} files inspected</span></div></div>`;
+  } else {
+    issuesList.innerHTML = audit.issues.map(renderAuditIssue).join('');
+  }
+}
+
+function getAuditI18n() {
+  const r = document.getElementById('igt-root');
+  return {
+    engineLabel: r?.getAttribute('data-engine-detected') || 'Engine',
+    scoreLabel: r?.getAttribute('data-compatibility-score') || 'Score',
+    filesLabel: r?.getAttribute('data-files-inspected') || 'Files',
+  };
+}
+
+export function displayAudit(audit: ReturnType<typeof validateGameFiles>) {
+  const panel = document.getElementById('igt-results-panel');
+  const engineTag = document.getElementById('igt-engine-tag');
+  const scoreBadge = document.getElementById('igt-score-badge');
+  const filesCount = document.getElementById('igt-files-count');
+  const issuesList = document.getElementById('igt-issues-list');
+  if (!panel || !engineTag || !scoreBadge || !filesCount || !issuesList) return;
+  const i18n = getAuditI18n();
+  panel.style.display = 'block';
+  engineTag.textContent = `${i18n.engineLabel}: ${audit.engine}`;
+  scoreBadge.textContent = `${i18n.scoreLabel}: ${audit.score}%`;
+  scoreBadge.className = renderBadge(audit.score);
+  filesCount.textContent = `${i18n.filesLabel}: ${audit.totalFiles}`;
+  renderIssuesList(issuesList, audit);
+}

package/src/tool/itchioGameTester/bibliography.astro

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

package/src/tool/itchioGameTester/bibliography.ts

@@ -0,0 +1,14 @@
+export const bibliographyEntries = [
+  {
+    name: 'Itch.io Official HTML5 Game Upload & Embed Specifications Guide',
+    url: 'https://itch.io/docs/creators/html5'
+  },
+  {
+    name: 'Godot Engine Official Web Export & SharedArrayBuffer Requirements',
+    url: 'https://docs.godotengine.org/en/stable/tutorials/export/exporting_for_web.html'
+  },
+  {
+    name: 'Unity WebGL Official Player Resolution and Aspect Ratio Settings',
+    url: 'https://docs.unity3d.com/Manual/webgl-building.html'
+  }
+];

package/src/tool/itchioGameTester/client.ts

@@ -0,0 +1,238 @@
+import JSZip from 'jszip';
+import { validateGameFiles, generateItchioEmbedConfig, type WebGameFileInfo } from './logic';
+import { displayAudit } from './audit';
+
+const STATE_KEY = 'jjl_itchio_game_tester_state';
+const currentViewport = { w: 960, h: 540 };
+
+
+interface ScaleArgs {
+  frame: HTMLElement;
+  container: HTMLElement;
+  cW: number;
+  w: number;
+  h: number;
+}
+
+function applyScaleActive(args: ScaleArgs, sc: number) {
+  args.frame.style.transform = `scale(${sc})`;
+  args.container.style.width = `${Math.round(args.w * sc)}px`;
+  args.container.style.height = `${Math.round(args.h * sc)}px`;
+  args.container.style.overflow = 'hidden';
+  const notice = document.getElementById('igt-scale-notice');
+  if (notice) notice.style.display = 'block';
+}
+
+function applyScaleNone(args: ScaleArgs) {
+  args.frame.style.transform = 'none';
+  args.container.style.width = '';
+  args.container.style.height = '';
+  args.container.style.overflow = 'auto';
+  const notice = document.getElementById('igt-scale-notice');
+  if (notice) notice.style.display = 'none';
+}
+
+function applyTransformScale(args: ScaleArgs) {
+  const autoScale = document.getElementById('igt-auto-scale') as HTMLInputElement;
+  const sc = autoScale?.checked && args.w > args.cW ? args.cW / args.w : 1;
+  if (sc < 1) { applyScaleActive(args, sc); } else { applyScaleNone(args); }
+}
+
+function applyViewportStyle(w: number, h: number) {
+  currentViewport.w = w;
+  currentViewport.h = h;
+  const frame = document.getElementById('igt-emulator-frame');
+  const container = document.getElementById('igt-emulator-container');
+  if (frame && container) {
+    frame.style.width = `${w}px`;
+    frame.style.height = `${h}px`;
+    applyTransformScale({ frame, container, cW: window.innerWidth || 1000, w, h });
+  }
+  const wInput = document.getElementById('igt-width-input') as HTMLInputElement;
+  const hInput = document.getElementById('igt-height-input') as HTMLInputElement;
+  if (wInput) wInput.value = w.toString();
+  if (hInput) hInput.value = h.toString();
+  localStorage.setItem(STATE_KEY, JSON.stringify({ w, h }));
+}
+
+function bindInputEvents() {
+  const widthInput = document.getElementById('igt-width-input') as HTMLInputElement;
+  const heightInput = document.getElementById('igt-height-input') as HTMLInputElement;
+  const autoScale = document.getElementById('igt-auto-scale') as HTMLInputElement;
+  widthInput?.addEventListener('input', () => {
+    const w = parseInt(widthInput.value, 10) || 960;
+    const h = parseInt(heightInput.value, 10) || 540;
+    applyViewportStyle(w, h);
+  });
+  heightInput?.addEventListener('input', () => {
+    const h = parseInt(heightInput.value, 10) || 540;
+    const w = parseInt(widthInput.value, 10) || 960;
+    applyViewportStyle(w, h);
+  });
+  autoScale?.addEventListener('change', () => {
+    applyViewportStyle(parseInt(widthInput.value, 10) || 960, parseInt(heightInput.value, 10) || 540);
+  });
+}
+
+function bindPresetEvents() {
+  const resetBtn = document.getElementById('igt-reset-btn');
+  const presetsContainer = document.getElementById('igt-presets-container');
+  presetsContainer?.addEventListener('click', (e) => {
+    const target = e.target as HTMLElement;
+    if (target.classList.contains('igt-chip')) {
+      const w = parseInt(target.getAttribute('data-w') || '960', 10);
+      const h = parseInt(target.getAttribute('data-h') || '540', 10);
+      applyViewportStyle(w, h);
+      presetsContainer.querySelectorAll('.igt-chip').forEach((c) => c.classList.remove('active'));
+      target.classList.add('active');
+    }
+  });
+  resetBtn?.addEventListener('click', () => { applyViewportStyle(960, 540); });
+}
+
+interface DragState {
+  iframe: HTMLElement | null;
+  start: { x: number; y: number; w: number; h: number };
+}
+
+function attachDragListeners(st: DragState) {
+  let isResizing = true;
+  if (st.iframe) st.iframe.classList.add('igt-iframe-resizing');
+  const onMouseMove = (e: MouseEvent) => {
+    if (!isResizing) return;
+    const constW = Math.max(320, Math.min(1920, st.start.w + (e.clientX - st.start.x)));
+    const constH = Math.max(240, Math.min(1080, st.start.h + (e.clientY - st.start.y)));
+    applyViewportStyle(constW, constH);
+  };
+  const onMouseUp = () => {
+    isResizing = false;
+    if (st.iframe) st.iframe.classList.remove('igt-iframe-resizing');
+    window.removeEventListener('mousemove', onMouseMove);
+    window.removeEventListener('mouseup', onMouseUp);
+  };
+  window.addEventListener('mousemove', onMouseMove);
+  window.addEventListener('mouseup', onMouseUp);
+}
+
+function bindLiveDragResizer() {
+  const handle = document.getElementById('igt-resize-handle');
+  const frame = document.getElementById('igt-emulator-frame');
+  const iframe = document.getElementById('igt-iframe');
+  if (!handle || !frame) return;
+  handle.addEventListener('mousedown', (e) => {
+    e.preventDefault();
+    attachDragListeners({ iframe, start: { x: e.clientX, y: e.clientY, w: currentViewport.w, h: currentViewport.h } });
+  });
+}
+
+function setupViewportController() {
+  const widthInput = document.getElementById('igt-width-input') as HTMLInputElement;
+  const heightInput = document.getElementById('igt-height-input') as HTMLInputElement;
+  const savedState = localStorage.getItem(STATE_KEY);
+  if (savedState) {
+    try {
+      const parsed = JSON.parse(savedState);
+      if (parsed.w) widthInput.value = parsed.w;
+      if (parsed.h) heightInput.value = parsed.h;
+      applyViewportStyle(parsed.w, parsed.h);
+    } catch {}
+  }
+  bindInputEvents();
+  bindPresetEvents();
+  bindLiveDragResizer();
+}
+
+function getMimeType(filename: string): string {
+  const ext = filename.split('.').pop()?.toLowerCase() || '';
+  const map: Record<string, string> = { js: 'text/javascript', mjs: 'text/javascript', wasm: 'application/wasm', html: 'text/html', css: 'text/css', png: 'image/png', jpg: 'image/jpeg', svg: 'image/svg+xml' };
+  return map[ext] || 'application/octet-stream';
+}
+
+async function buildZipBlobUrls(zip: JSZip) {
+  const blobUrls: Record<string, string> = {};
+  let indexPath = '';
+  const entries: Array<{ path: string; entry: JSZip.JSZipObject }> = [];
+  zip.forEach((path, entry) => entries.push({ path, entry }));
+  for (const { path, entry } of entries) {
+    if (!entry.dir) {
+      const blob = new Blob([await entry.async('arraybuffer')], { type: getMimeType(path) });
+      blobUrls[path] = URL.createObjectURL(blob);
+      if (path.toLowerCase().replace(/\\/g, '/').endsWith('index.html')) indexPath = path;
+    }
+  }
+  return { blobUrls, indexPath };
+}
+
+async function loadZipIntoIframe(zip: JSZip, iframe: HTMLIFrameElement) {
+  const { blobUrls, indexPath } = await buildZipBlobUrls(zip);
+  if (!indexPath || !blobUrls[indexPath]) return;
+  const indexFileObj = zip.file(indexPath);
+  if (!indexFileObj) return;
+  const text = await indexFileObj.async('string');
+  const doc = new DOMParser().parseFromString(text, 'text/html');
+  doc.querySelectorAll('script[src], link[rel="stylesheet"][href], img[src], audio[src], source[src]').forEach((el) => {
+    const attrName = el.hasAttribute('src') ? 'src' : 'href';
+    const val = el.getAttribute(attrName);
+    if (val) {
+      const cleanPath = val.replace(/^\.\//, '').replace(/^\//, '');
+      for (const [relPath, bUrl] of Object.entries(blobUrls)) {
+        if (relPath.endsWith(cleanPath) || relPath.endsWith(val)) { el.setAttribute(attrName, bUrl); break; }
+      }
+    }
+  });
+  iframe.src = URL.createObjectURL(new Blob([doc.documentElement.outerHTML], { type: 'text/html' }));
+}
+
+
+
+function processZipFile(zipFile: File, iframe: HTMLIFrameElement) {
+  JSZip.loadAsync(zipFile).then(async (zip) => {
+    const webFiles: WebGameFileInfo[] = [];
+    zip.forEach((path, entry) => webFiles.push({ name: path, size: 1024, isDirectory: entry.dir }));
+    displayAudit(validateGameFiles(webFiles));
+    await loadZipIntoIframe(zip, iframe);
+  }).catch(() => {});
+}
+
+function processFileList(files: FileList | File[], iframe: HTMLIFrameElement) {
+  const filesArr = Array.from(files);
+  if (filesArr.length === 0) return;
+  const zipFile = filesArr.find((f) => f.name.toLowerCase().endsWith('.zip'));
+  if (zipFile) { processZipFile(zipFile, iframe); return; }
+  const webFiles: WebGameFileInfo[] = filesArr.map((f) => ({ name: f.webkitRelativePath || f.name, size: f.size, isDirectory: false }));
+  displayAudit(validateGameFiles(webFiles));
+  const indexFile = filesArr.find((f) => f.name === 'index.html' || (f.webkitRelativePath && f.webkitRelativePath.endsWith('/index.html')));
+  if (indexFile && iframe) iframe.src = URL.createObjectURL(indexFile);
+}
+
+function setupCopyButton() {
+  const copyBtn = document.getElementById('igt-copy-btn');
+  if (!copyBtn) return;
+  copyBtn.addEventListener('click', () => {
+    const widthInput = document.getElementById('igt-width-input') as HTMLInputElement;
+    const heightInput = document.getElementById('igt-height-input') as HTMLInputElement;
+    const config = generateItchioEmbedConfig(parseInt(widthInput?.value || '960', 10), parseInt(heightInput?.value || '540', 10));
+    navigator.clipboard.writeText(config.codeSnippet);
+    const r = document.getElementById('igt-root');
+    copyBtn.textContent = r?.getAttribute('data-copied') || 'Copied!';
+    setTimeout(() => { copyBtn.textContent = r?.getAttribute('data-copy-settings') || 'Copy Settings'; }, 2000);
+  });
+}
+
+function setupFileHandling() {
+  const fileInput = document.getElementById('igt-file-input') as HTMLInputElement;
+  const dropzone = document.getElementById('igt-dropzone');
+  const iframe = document.getElementById('igt-iframe') as HTMLIFrameElement;
+  setupCopyButton();
+  if (dropzone) {
+    ['dragenter', 'dragover'].forEach((ev) => dropzone.addEventListener(ev, (e) => { e.preventDefault(); dropzone.classList.add('igt-dragover'); }));
+    ['dragleave', 'drop'].forEach((ev) => dropzone.addEventListener(ev, (e) => { e.preventDefault(); dropzone.classList.remove('igt-dragover'); }));
+    dropzone.addEventListener('drop', (e: DragEvent) => { if (e.dataTransfer?.files) processFileList(e.dataTransfer.files, iframe); });
+  }
+  fileInput?.addEventListener('change', () => { if (fileInput.files) processFileList(fileInput.files, iframe); });
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  setupViewportController();
+  setupFileHandling();
+});

package/src/tool/itchioGameTester/component.astro

@@ -0,0 +1,97 @@
+---
+import type { ItchioGameTesterUI } from './ui';
+import './itchio-game-tester.css';
+
+export interface Props {
+  ui: ItchioGameTesterUI;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="igt-container" id="igt-root"
+  data-engine-detected={ui.engineDetected}
+  data-compatibility-score={ui.compatibilityScore}
+  data-files-inspected={ui.filesInspected}
+  data-no-issues-found={ui.noIssuesFound}
+  data-copied={ui.copied}
+  data-copy-settings={ui.copySettings}
+>
+  <div class="igt-card">
+    <div id="igt-dropzone" class="igt-dropzone" role="region" aria-label={ui.dropzoneTitle}>
+      <p class="igt-label" style="font-size: 1.1rem; margin-bottom: 0.5rem;">{ui.dropzoneTitle}</p>
+      <p style="font-size: 0.875rem; opacity: 0.8; margin-bottom: 1.25rem;">{ui.dropzoneHint}</p>
+      <div style="display: flex; justify-content: center;">
+        <label for="igt-file-input" class="igt-btn-primary" style="display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer;">
+          <svg style="width:18px;height:18px;fill:var(--text-base,#fff);" viewBox="0 0 24 24"><path d="M9 16h6v-6h4l-7-7-7 7h4v6zm-4 2h14v2H5v-2z"/></svg>
+          {ui.chooseFiles}
+          <input type="file" id="igt-file-input" multiple style="display: none;" aria-label={ui.chooseFiles} />
+        </label>
+      </div>
+    </div>
+
+    <div id="igt-results-panel" style="display: none; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border-base, #334155);">
+      <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
+        <div>
+          <span id="igt-engine-tag" class="igt-chip active" style="font-size: 0.9rem;">{ui.engineDetected}: Custom HTML5</span>
+          <span id="igt-score-badge" class="igt-audit-badge igt-badge-pass" style="margin-left: 0.5rem;">Score: 100%</span>
+        </div>
+        <div>
+          <span id="igt-files-count" style="font-size: 0.875rem; opacity: 0.8;">{ui.filesInspected}: 0</span>
+        </div>
+      </div>
+      <div id="igt-issues-list" style="margin-top: 1rem; display: flex; flex-direction: column; gap: 0.5rem;"></div>
+    </div>
+
+    <div id="igt-preview-panel" style="margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border-base, #334155);">
+      <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem;">
+        <h3 class="igt-label" style="font-size: 1.1rem; margin: 0;">{ui.fitTest}</h3>
+        <div style="display: flex; gap: 0.5rem;">
+          <button type="button" id="igt-reset-btn" class="igt-chip" aria-label={ui.resetViewport}>{ui.resetViewport}</button>
+          <button type="button" id="igt-copy-btn" class="igt-btn-primary" style="padding: 0.4rem 0.875rem; font-size: 0.85rem;" aria-label={ui.copySettings}>{ui.copySettings}</button>
+        </div>
+      </div>
+
+      <div class="igt-controls-grid">
+        <div class="igt-input-group">
+          <label for="igt-width-input" class="igt-label">{ui.viewportWidth}</label>
+          <input type="number" id="igt-width-input" class="igt-input" min="320" max="1920" value="960" aria-label={ui.viewportWidth} />
+        </div>
+        <div class="igt-input-group">
+          <label for="igt-height-input" class="igt-label">{ui.viewportHeight}</label>
+          <input type="number" id="igt-height-input" class="igt-input" min="240" max="1080" value="540" aria-label={ui.viewportHeight} />
+        </div>
+        <div class="igt-input-group" style="grid-column: 1 / -1;">
+          <div style="display: flex; align-items: center; gap: 0.5rem;">
+            <input type="checkbox" id="igt-auto-scale" checked aria-label={ui.autoScaleToggle} />
+            <label for="igt-auto-scale" class="igt-label" style="cursor: pointer; font-weight: 500;">{ui.autoScaleToggle}</label>
+          </div>
+        </div>
+      </div>
+
+      <div class="igt-preset-chips" id="igt-presets-container">
+        <button type="button" class="igt-chip active" data-w="960" data-h="540" aria-label="Preset 960x540">960 x 540 (16:9)</button>
+        <button type="button" class="igt-chip" data-w="1280" data-h="720" aria-label="Preset 1280x720">1280 x 720 (16:9 HD)</button>
+        <button type="button" class="igt-chip" data-w="800" data-h="600" aria-label="Preset 800x600">800 x 600 (4:3)</button>
+        <button type="button" class="igt-chip" data-w="1024" data-h="768" aria-label="Preset 1024x768">1024 x 768 (4:3)</button>
+        <button type="button" class="igt-chip" data-w="960" data-h="600" aria-label="Preset 960x600">960 x 600 (Itch Desktop)</button>
+        <button type="button" class="igt-chip" data-w="800" data-h="800" aria-label="Preset 800x800">800 x 800 (1:1 Square)</button>
+      </div>
+
+      <div id="igt-scale-notice" class="igt-scale-notice">
+        <strong>[Artificial Zoom-Out Active]</strong> {ui.scaledNotice}
+      </div>
+
+      <div id="igt-emulator-container" style="overflow: hidden; max-width: 100%; margin-top: 1.25rem;">
+        <div id="igt-emulator-frame" class="igt-emulator-frame" style="width: 960px; height: 540px; transform-origin: top left;">
+          <iframe id="igt-iframe" class="igt-iframe" title="Web Game Preview Frame"></iframe>
+          <div id="igt-resize-handle" class="igt-resize-handle" role="button" aria-label="Resize Viewport Handle"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  import './client';
+</script>

package/src/tool/itchioGameTester/entry.ts

@@ -0,0 +1,28 @@
+import type { GamesToolEntry, ToolLocaleContent } from '../../types';
+import type { ItchioGameTesterUI } from './ui';
+
+export type { ItchioGameTesterUI };
+
+export type ItchioGameTesterLocaleContent = ToolLocaleContent<ItchioGameTesterUI>;
+
+export const itchioGameTester: GamesToolEntry<ItchioGameTesterUI> = {
+  id: 'itchio-game-tester',
+  icons: { bg: 'mdi:gamepad-variant', fg: 'mdi:aspect-ratio' },
+  i18n: {
+    de: () => import('./i18n/de').then((m) => m.content),
+    en: () => import('./i18n/en').then((m) => m.content),
+    es: () => import('./i18n/es').then((m) => m.content),
+    fr: () => import('./i18n/fr').then((m) => m.content),
+    id: () => import('./i18n/id').then((m) => m.content),
+    it: () => import('./i18n/it').then((m) => m.content),
+    ja: () => import('./i18n/ja').then((m) => m.content),
+    ko: () => import('./i18n/ko').then((m) => m.content),
+    nl: () => import('./i18n/nl').then((m) => m.content),
+    pl: () => import('./i18n/pl').then((m) => m.content),
+    pt: () => import('./i18n/pt').then((m) => m.content),
+    ru: () => import('./i18n/ru').then((m) => m.content),
+    sv: () => import('./i18n/sv').then((m) => m.content),
+    tr: () => import('./i18n/tr').then((m) => m.content),
+    zh: () => import('./i18n/zh').then((m) => m.content),
+  },
+};

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

@@ -0,0 +1,107 @@
+import type { ToolLocaleContent } from '../../../types';
+import type { ItchioGameTesterUI } from '../ui';
+import { bibliographyEntries } from '../bibliography';
+
+export const content: ToolLocaleContent<ItchioGameTesterUI> = {
+  slug: 'itch-io-spiel-tester',
+  title: 'Itch.io Webspiel Inspektor und Echtzeit Auflösungs Optimierer',
+  description: 'HTML5-Exportdateien oder ZIP-Archive hochladen, Viewports live testen, Scrollbars beheben, Godot- und Unity-WebGL-Builds prüfen und Itch.io-Embed-Einstellungen generieren.',
+  ui: {
+    dropzoneTitle: 'Spiel-Build oder ZIP-Archiv hier ablegen',
+    dropzoneHint: 'Eine .ZIP-Datei, exportierten Ordner oder HTML5-Build-Dateien in diesen Bereich ziehen.',
+    chooseFiles: 'Spieldatei oder Ordner auswählen',
+    engineDetected: 'Erkannte Engine',
+    compatibilityScore: 'Itch.io-Kompatibilitätsbewertung',
+    viewportWidth: 'Viewport-Breite (px)',
+    viewportHeight: 'Viewport-Höhe (px)',
+    presets: 'Schnelle Auflösungs-Presets',
+    fitTest: 'Live-Layout- und Scrollbar-Test',
+    copySettings: 'Itch.io Embed-Einstellungen kopieren',
+    copied: 'In Zwischenablage kopiert',
+    embedMode: 'Embed-Modus',
+    scrollbars: 'Scrollbars aktivieren',
+    noIssuesFound: 'Alle Prüfungen erfolgreich bestanden. Das Paket ist zu 100% mit den Itch.io-Standards konform.',
+    filesInspected: 'Inspizierte Dateien',
+    resetViewport: 'Viewport zurücksetzen',
+    autoScaleToggle: 'Viewport automatisch auf Bildschirmbreite skalieren',
+    scaledNotice: 'Der Viewport überschreitet die Bildschirmbreite. Künstlicher Zoom-Out angewendet, damit der Canvas vollständig sichtbar ist. Deaktiviere die automatische Skalierung, um das echte Layout zu sehen.',
+  },
+  seo: [
+    {
+      type: 'title',
+      level: 2,
+      text: 'Formatierungsrichtlinien für Itch.io HTML5-Spielexporte'
+    },
+    {
+      type: 'paragraph',
+      html: 'Das Veröffentlichen von HTML5- und WebGL-Spielen auf Itch.io erfordert eine präzise Konfiguration von Viewport-Dimensionen, Archivdateistrukturen und Cross-Origin-Sicherheitsheadern.'
+    },
+    {
+      type: 'stats',
+      columns: 4,
+      items: [
+        { label: 'Standard-Web-Seitenverhältnis', value: '16:9 Querformat' },
+        { label: 'Klassische Itch-Auflösung', value: '960 x 540 px' },
+        { label: 'Einstiegspunkt-Datei', value: 'index.html im Root' },
+        { label: 'Godot 4 Anforderung', value: 'COOP / COEP Header' }
+      ]
+    },
+    {
+      type: 'tip',
+      html: 'Beim Einbetten eines 1280x720 WebGL-Spiels auf Itch.io die Embed-Viewport-Dimensionen genau auf 1280x720 setzen.'
+    }
+  ],
+  faq: [
+    {
+      question: 'Warum zeigt mein Godot 4-Spiel auf Itch.io einen schwarzen Bildschirm?',
+      answer: 'Godot 4 Web-Exporte verwenden WebAssembly-Multithreading, das SharedArrayBuffer-Unterstützung erfordert. Aktiviere dies in den Frame-Optionen deines Itch.io-Spiels.'
+    }
+  ],
+  howTo: [
+    { name: 'Spieldateien oder ZIP hochladen', text: 'ZIP-Archiv oder Build-Verzeichnis mit index.html per Drag & Drop hinzufügen.' },
+    { name: 'Kompatibilitätsbericht prüfen', text: 'Automatischen Auditbericht auf root-index.html, Groß-/Kleinschreibung und Engine-Erkennung prüfen.' },
+    { name: 'Viewport live anpassen', text: 'Auflösungsregler und Seitenverhältnis-Chips nutzen, um das Iframe-Embedding live zu testen.' },
+    { name: 'Itch.io-Einstellungen kopieren', text: 'Auf Einstellungen kopieren klicken, um Breite und Höhe für die Itch.io-Einreichungsseite zu übernehmen.' }
+  ],
+  schemas: [
+    {
+      '@context': 'https://schema.org',
+      '@type': 'SoftwareApplication',
+      name: 'Itch.io Webspiel Inspektor',
+      applicationCategory: 'DeveloperApplication',
+      operatingSystem: 'Any'
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'FAQPage',
+      mainEntity: [
+        {
+          '@type': 'Question',
+          name: 'Warum zeigt mein Godot 4-Spiel auf Itch.io einen schwarzen Bildschirm?',
+          acceptedAnswer: {
+            '@type': 'Answer',
+            text: 'Godot 4 Web-Exporte verwenden WebAssembly-Multithreading, das SharedArrayBuffer-Unterstützung erfordert. Aktiviere dies in den Frame-Optionen deines Itch.io-Spiels.'
+          }
+        }
+      ]
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'HowTo',
+      name: 'So prüfst und testest du deinen Itch.io Game Viewport',
+      step: [
+        {
+          '@type': 'HowToStep',
+          name: 'Spieldateien oder ZIP hochladen',
+          text: 'ZIP-Archiv oder Build-Verzeichnis mit index.html per Drag & Drop hinzufügen.'
+        },
+        {
+          '@type': 'HowToStep',
+          name: 'Viewport live anpassen',
+          text: 'Auflösungsregler und Seitenverhältnis-Chips nutzen, um das Iframe-Embedding live zu testen.'
+        }
+      ]
+    }
+  ],
+  bibliography: bibliographyEntries
+};