@jjlmoya/utils-games-development 1.64.0 → 1.66.0

package/src/tool/gameDeltaTimeFixedTimestepLab/logic.test.ts

@@ -0,0 +1,35 @@
+import { describe, expect, it } from 'vitest';
+import { normalizeLoopConfig, simulateLoop } from './logic';
+
+describe('game delta time fixed timestep lab', () => {
+  it('keeps both models aligned without frame spikes', () => {
+    const result = simulateLoop({ fps: 60, spikeMs: 0, durationSeconds: 1, velocity: 10 });
+
+    expect(result.variablePosition).toBeCloseTo(10, 4);
+    expect(result.fixedPosition).toBeCloseTo(10, 3);
+    expect(result.divergence).toBeCloseTo(0, 3);
+  });
+
+  it('makes an unclamped variable model run ahead after spikes', () => {
+    const result = simulateLoop({ fps: 60, spikeMs: 80, spikeEveryFrames: 30, durationSeconds: 1, velocity: 10 });
+
+    expect(result.variablePosition).toBeGreaterThan(result.fixedPosition);
+    expect(result.maxCatchUp).toBeGreaterThan(1);
+  });
+
+  it('shows the time discarded by a delta clamp', () => {
+    const result = simulateLoop({ fps: 60, spikeMs: 80, spikeEveryFrames: 30, durationSeconds: 1, velocity: 10, clampEnabled: true, clampMs: 20 });
+
+    expect(result.variableTime).toBeLessThan(result.totalWallTime);
+    expect(result.variablePosition).toBeLessThan(result.fixedPosition);
+  });
+
+  it('normalizes invalid values to safe experiment bounds', () => {
+    const config = normalizeLoopConfig({ fps: 0, fixedDtMs: -1, durationSeconds: Number.NaN, spikeMs: 900 });
+
+    expect(config.fps).toBe(60);
+    expect(config.fixedDtMs).toBeCloseTo(16.666, 3);
+    expect(config.durationSeconds).toBe(6);
+    expect(config.spikeMs).toBe(500);
+  });
+});

package/src/tool/gameDeltaTimeFixedTimestepLab/logic.ts

@@ -0,0 +1,140 @@
+export interface LoopConfig {
+  fps: number;
+  spikeMs: number;
+  spikeEveryFrames: number;
+  fixedDtMs: number;
+  velocity: number;
+  durationSeconds: number;
+  clampEnabled: boolean;
+  clampMs: number;
+}
+
+export interface LoopSample {
+  frame: number;
+  wallTime: number;
+  variableTime: number;
+  fixedTime: number;
+  variablePosition: number;
+  fixedPosition: number;
+  fixedSteps: number;
+  frameMs: number;
+}
+
+export interface LoopResult {
+  config: LoopConfig;
+  samples: LoopSample[];
+  frameCount: number;
+  totalWallTime: number;
+  variableTime: number;
+  fixedTime: number;
+  variablePosition: number;
+  fixedPosition: number;
+  divergence: number;
+  fixedSteps: number;
+  maxCatchUp: number;
+}
+
+export const DEFAULT_LOOP_CONFIG: LoopConfig = {
+  fps: 60,
+  spikeMs: 80,
+  spikeEveryFrames: 30,
+  fixedDtMs: 16.666,
+  velocity: 20,
+  durationSeconds: 6,
+  clampEnabled: false,
+  clampMs: 100,
+};
+
+function clampNumber(value: number, minimum: number, maximum: number): number {
+  return Math.min(maximum, Math.max(minimum, value));
+}
+
+function finiteOr(value: number | undefined, fallback: number): number {
+  return Number.isFinite(value) ? value as number : fallback;
+}
+
+function positiveOr(value: number | undefined, fallback: number): number {
+  const candidate = finiteOr(value, fallback);
+  return candidate > 0 ? candidate : fallback;
+}
+
+export function normalizeLoopConfig(input: Partial<LoopConfig> = {}): LoopConfig {
+  return {
+    fps: clampNumber(positiveOr(input.fps, DEFAULT_LOOP_CONFIG.fps), 1, 240),
+    spikeMs: clampNumber(finiteOr(input.spikeMs, DEFAULT_LOOP_CONFIG.spikeMs), 0, 500),
+    spikeEveryFrames: clampNumber(Math.round(positiveOr(input.spikeEveryFrames, DEFAULT_LOOP_CONFIG.spikeEveryFrames)), 1, 600),
+    fixedDtMs: clampNumber(positiveOr(input.fixedDtMs, DEFAULT_LOOP_CONFIG.fixedDtMs), 1, 100),
+    velocity: clampNumber(finiteOr(input.velocity, DEFAULT_LOOP_CONFIG.velocity), 0, 100),
+    durationSeconds: clampNumber(positiveOr(input.durationSeconds, DEFAULT_LOOP_CONFIG.durationSeconds), 1, 30),
+    clampEnabled: input.clampEnabled === true,
+    clampMs: clampNumber(positiveOr(input.clampMs, DEFAULT_LOOP_CONFIG.clampMs), 1, 250),
+  };
+}
+
+function frameDeltaMs(config: LoopConfig, frame: number): number {
+  const isSpike = config.spikeMs > 0 && frame % config.spikeEveryFrames === 0;
+  return 1000 / config.fps + (isSpike ? config.spikeMs : 0);
+}
+
+function fixedStepCount(accumulator: number, fixedDt: number): number {
+  return Math.floor((accumulator + Number.EPSILON) / fixedDt);
+}
+
+interface SimulationState {
+  wallTime: number;
+  variableTime: number;
+  fixedTime: number;
+  variablePosition: number;
+  fixedPosition: number;
+  accumulator: number;
+  fixedSteps: number;
+  maxCatchUp: number;
+}
+
+function sampleFrame(config: LoopConfig, frame: number, state: SimulationState): LoopSample {
+  const actualMs = frameDeltaMs(config, frame);
+  const variableMs = config.clampEnabled ? Math.min(actualMs, config.clampMs) : actualMs;
+  const actualSeconds = actualMs / 1000;
+  const variableSeconds = variableMs / 1000;
+  const fixedDt = config.fixedDtMs / 1000;
+  state.wallTime += actualSeconds;
+  state.variableTime += variableSeconds;
+  state.variablePosition += config.velocity * variableSeconds;
+  state.accumulator += actualSeconds;
+  const steps = fixedStepCount(state.accumulator, fixedDt);
+  state.accumulator -= steps * fixedDt;
+  state.fixedTime += steps * fixedDt;
+  state.fixedPosition += steps * config.velocity * fixedDt;
+  state.fixedSteps += steps;
+  state.maxCatchUp = Math.max(state.maxCatchUp, steps);
+  return {
+    frame,
+    wallTime: state.wallTime,
+    variableTime: state.variableTime,
+    fixedTime: state.fixedTime,
+    variablePosition: state.variablePosition,
+    fixedPosition: state.fixedPosition,
+    fixedSteps: state.fixedSteps,
+    frameMs: actualMs,
+  };
+}
+
+export function simulateLoop(input: Partial<LoopConfig> = {}): LoopResult {
+  const config = normalizeLoopConfig(input);
+  const frameCount = Math.ceil(config.durationSeconds * config.fps);
+  const state: SimulationState = { wallTime: 0, variableTime: 0, fixedTime: 0, variablePosition: 0, fixedPosition: 0, accumulator: 0, fixedSteps: 0, maxCatchUp: 0 };
+  const samples = Array.from({ length: frameCount }, (_, index) => sampleFrame(config, index + 1, state));
+  return {
+    config,
+    samples,
+    frameCount,
+    totalWallTime: state.wallTime,
+    variableTime: state.variableTime,
+    fixedTime: state.fixedTime,
+    variablePosition: state.variablePosition,
+    fixedPosition: state.fixedPosition,
+    divergence: state.variablePosition - state.fixedPosition,
+    fixedSteps: state.fixedSteps,
+    maxCatchUp: state.maxCatchUp,
+  };
+}

package/src/tool/gameDeltaTimeFixedTimestepLab/seo.astro

@@ -0,0 +1,15 @@
+---
+import { SEORenderer } from '@jjlmoya/utils-shared';
+import { gameDeltaTimeFixedTimestepLab } from './entry';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'en' } = Astro.props;
+const loader = gameDeltaTimeFixedTimestepLab.i18n[locale] ?? gameDeltaTimeFixedTimestepLab.i18n.en;
+const content = loader ? await loader() : null;
+---
+
+{content && content.seo.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}

package/src/tool/gameDeltaTimeFixedTimestepLab/seo_contract.test.ts

@@ -0,0 +1,25 @@
+import { readFileSync } from 'node:fs';
+import { describe, expect, it } from 'vitest';
+import { gameDeltaTimeFixedTimestepLab } from './entry';
+
+describe('Game delta time SEO loader contract', () => {
+  it('provides translated SEO sections for every registered locale', async () => {
+    const locales = Object.keys(gameDeltaTimeFixedTimestepLab.i18n);
+    const contents = await Promise.all(locales.map(async (locale) => gameDeltaTimeFixedTimestepLab.i18n[locale as keyof typeof gameDeltaTimeFixedTimestepLab.i18n]!()));
+
+    expect(locales).toHaveLength(15);
+    contents.forEach((content) => {
+      expect(content.seo.length).toBeGreaterThan(0);
+      expect(content.faq.length).toBe(5);
+      expect(content.howTo.length).toBe(5);
+      expect(content.schemas).toHaveLength(3);
+    });
+  });
+
+  it('loads the requested locale before passing its SEO sections to the renderer', () => {
+    const source = readFileSync(new URL('./seo.astro', import.meta.url), 'utf8');
+
+    expect(source).toContain('gameDeltaTimeFixedTimestepLab.i18n[locale]');
+    expect(source).toContain('sections: content.seo');
+  });
+});

package/src/tool/gameDeltaTimeFixedTimestepLab/storage.ts

@@ -0,0 +1,23 @@
+import type { LoopConfig } from './logic';
+
+const STORAGE_KEY = 'jjlmoya-game-delta-time-lab';
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null;
+}
+
+export function loadLoopConfig(): Partial<LoopConfig> {
+  try {
+    const raw = window.localStorage.getItem(STORAGE_KEY);
+    const parsed: unknown = raw ? JSON.parse(raw) : {};
+    return isRecord(parsed) ? parsed as Partial<LoopConfig> : {};
+  } catch {
+    return {};
+  }
+}
+
+export function saveLoopConfig(config: LoopConfig): void {
+  try {
+    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(config));
+  } catch {}
+}

package/src/tool/gameDeltaTimeFixedTimestepLab/ui.ts

@@ -0,0 +1,54 @@
+export interface GameDeltaTimeFixedTimestepLabUI extends Record<string, string> {
+  controlsTitle: string;
+  fpsLabel: string;
+  fpsHint: string;
+  spikeLabel: string;
+  spikeHint: string;
+  spikeEveryLabel: string;
+  fixedDtLabel: string;
+  fixedDtHint: string;
+  velocityLabel: string;
+  durationLabel: string;
+  clampLabel: string;
+  clampToggle: string;
+  runLabel: string;
+  resetLabel: string;
+  stageKicker: string;
+  stageTitle: string;
+  stageCaption: string;
+  frameTraceLabel: string;
+  positionPlotLabel: string;
+  differencePlotLabel: string;
+  variableLane: string;
+  fixedLane: string;
+  frameCountLabel: string;
+  wallTimeLabel: string;
+  variableTimeLabel: string;
+  fixedTimeLabel: string;
+  divergenceLabel: string;
+  stepsLabel: string;
+  diagnosticsTitle: string;
+  stableStatus: string;
+  variableStatus: string;
+  fixedStatus: string;
+  clampStatus: string;
+  timelineTitle: string;
+  timelineCaption: string;
+  frameAxis: string;
+  positionAxis: string;
+  legendVariable: string;
+  legendFixed: string;
+  legendSpike: string;
+  tableTitle: string;
+  tableFrame: string;
+  tableWall: string;
+  tableVariable: string;
+  tableFixed: string;
+  tableDelta: string;
+  modelNote: string;
+  privacyDisclosure: string;
+  unitMs: string;
+  unitSeconds: string;
+  unitPixels: string;
+  statusReady: string;
+}

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

@@ -195,6 +195,19 @@ export const content: ToolLocaleContent<GameUiAccessibilityTesterUI> = {
       type: 'paragraph',
       html: 'Der herunterladbare JSON-Bericht sowie das Vergleichsbild lassen sich direkt in Issue-Tracker einbinden, um konkrete Verbesserungen an der Benutzeroberfläche zu dokumentieren.',
     },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Befunde reproduzierbar dokumentieren',
+    },
+    {
+      type: 'paragraph',
+      html: 'Halten Sie fest, welche Szene, Auflösung und Farbpaarung geprüft wurde. Ein klarer Befund beschreibt das sichtbare Signal, den betroffenen Zustand und eine mögliche Ergänzung durch Form, Symbol, Muster oder Ton.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Die Simulation unterstützt eine frühe Designprüfung, misst aber nicht die gesamte Barrierefreiheit eines Spiels. Wiederholen Sie die Prüfung mit echten Spielszenen, verschiedenen Displays und Menschen mit unterschiedlichen Sehbedingungen.',
+    },
   ],
   faq,
   howTo,

package/src/tool/gameUIAccessibilityTester/i18n/fr.ts

@@ -195,6 +195,19 @@ export const content: ToolLocaleContent<GameUiAccessibilityTesterUI> = {
       type: 'paragraph',
       html: 'Le rapport JSON et le visuel comparatif PNG peuvent être directement joints à vos tickets de développement pour faciliter les corrections de design UI.',
     },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Documenter les constats de façon reproductible',
+    },
+    {
+      type: 'paragraph',
+      html: 'Notez la scène, la résolution et la paire de couleurs examinée. Un constat utile décrit le signal visible, l état concerné et une amélioration possible avec une forme, une icône, un motif ou un son.',
+    },
+    {
+      type: 'paragraph',
+      html: 'La simulation aide à repérer tôt les problèmes de conception, mais elle ne mesure pas toute l accessibilité d un jeu. Répétez l essai avec de vraies scènes, plusieurs écrans et des personnes aux conditions visuelles différentes.',
+    },
   ],
   faq,
   howTo,

package/src/tool/gameUIAccessibilityTester/i18n/id.ts

@@ -195,6 +195,19 @@ export const content: ToolLocaleContent<GameUiAccessibilityTesterUI> = {
       type: 'paragraph',
       html: 'Ekspor laporan JSON dan gambar perbandingan PNG dapat dilampirkan langsung pada tiket pengembangan untuk mempermudah perbaikan antarmuka.',
     },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Mendokumentasikan temuan secara konsisten',
+    },
+    {
+      type: 'paragraph',
+      html: 'Catat adegan, resolusi, dan pasangan warna yang diperiksa. Temuan yang berguna menjelaskan sinyal yang terlihat, kondisi yang terdampak, serta perbaikan dengan bentuk, ikon, pola, atau suara.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Simulasi membantu menemukan masalah desain lebih awal, tetapi tidak mengukur seluruh aksesibilitas game. Ulangi pemeriksaan dengan adegan nyata, beberapa layar, dan pemain dengan kondisi penglihatan yang beragam.',
+    },
   ],
   faq,
   howTo,

package/src/tool/gameUIAccessibilityTester/i18n/it.ts

@@ -195,6 +195,7 @@ export const content: ToolLocaleContent<GameUiAccessibilityTesterUI> = {
       type: 'paragraph',
       html: 'Il report JSON e la scheda PNG scaricabili possono essere allegati ai task di sviluppo per facilitare la correzione dei problemi di interfaccia visiva.',
     },
+    { type: 'paragraph', html: 'Annota scena, risoluzione e coppia di colori esaminata. La simulazione aiuta a individuare problemi di design, ma non sostituisce prove con scene reali, display diversi e persone con condizioni visive differenti.' },
   ],
   faq,
   howTo,

package/src/tool/gameUIAccessibilityTester/i18n/nl.ts

@@ -177,6 +177,10 @@ export const content: ToolLocaleContent<GameUiAccessibilityTesterUI> = {
       level: 2,
       text: 'Meet kleuren die beslissingen van spelers beïnvloeden',
     },
+    {
+      type: 'paragraph',
+      html: 'Bekijk daarna dezelfde interface op ware spelgrootte en in beweging. Noteer welke signalen verdwijnen wanneer de achtergrond verandert en combineer kleur met vorm, patroon, tekst of geluid. Zo wordt het rapport een concreet ontwerpplan in plaats van alleen een contrastcijfer.',
+    },
     {
       type: 'paragraph',
       html: 'Richt uw metingen op kleurparen die belangrijk zijn voor de speler, zoals vijand en bondgenoot. Voeg vormen of pictogrammen toe als het contrast afneemt onder simulatie.',
@@ -195,6 +199,7 @@ export const content: ToolLocaleContent<GameUiAccessibilityTesterUI> = {
       type: 'paragraph',
       html: 'Het JSON-rapport en de PNG-afbeelding kunnen direct aan uw taken worden toegevoegd om designverbeteringen te bespreken.',
     },
+    { type: 'paragraph', html: 'Noteer scène, resolutie en het onderzochte kleurpaar. De simulatie helpt ontwerpproblemen vroeg te vinden, maar vervangt geen tests met echte scènes, verschillende schermen en mensen met uiteenlopende visuele omstandigheden.' },
   ],
   faq,
   howTo,

package/src/tool/gameUIAccessibilityTester/i18n/pl.ts

@@ -181,6 +181,10 @@ export const content: ToolLocaleContent<GameUiAccessibilityTesterUI> = {
       type: 'paragraph',
       html: 'Skup się na parach kolorów kluczowych dla rozgrywki, takich jak wrok i sojusznik. Jeśli kontrast spada, rozważ dodanie ikony lub kształtu.',
     },
+    {
+      type: 'paragraph',
+      html: 'Następnie obejrzyj ten sam interfejs w docelowej skali i podczas ruchu. Zapisz, które sygnały znikają po zmianie tła, a potem połącz kolor z kształtem, wzorem, tekstem lub dźwiękiem. Dzięki temu raport prowadzi do konkretnych poprawek projektu, a nie kończy się na pojedynczej wartości kontrastu.',
+    },
     {
       type: 'tip',
       title: 'Testuj dynamiczne kadry z gry',
@@ -195,6 +199,7 @@ export const content: ToolLocaleContent<GameUiAccessibilityTesterUI> = {
       type: 'paragraph',
       html: 'Raport JSON oraz obraz PNG można dołączyć do zadań w systemie zarządzania projektem, aby ułatwić komunikację z zespołem.',
     },
+    { type: 'paragraph', html: 'Zapisz scenę, rozdzielczość i badaną parę kolorów. Symulacja pomaga wcześnie znaleźć problemy projektu, ale nie zastępuje testów z prawdziwymi scenami, różnymi ekranami i osobami o różnych warunkach widzenia.' },
   ],
   faq,
   howTo,

package/src/tool/gameUIAccessibilityTester/i18n/pt.ts

@@ -195,6 +195,8 @@ export const content: ToolLocaleContent<GameUiAccessibilityTesterUI> = {
       type: 'paragraph',
       html: 'O relatório JSON e a folha comparativa PNG podem ser anexados às tarefas de desenvolvimento para facilitar a correção de problemas de UI.',
     },
+    { type: 'paragraph', html: 'Registre a cena, a resolução e o par de cores analisado. A simulação ajuda a encontrar problemas de design cedo, mas não substitui testes com cenas reais, telas diferentes e pessoas com condições visuais variadas.' },
+    { type: 'paragraph', html: 'Veja a mesma interface na escala final e durante o movimento. Anote quais sinais desaparecem quando o fundo muda e combine cor com forma, padrão, texto ou som. Assim, o relatório gera ações concretas de design em vez de ficar limitado a um único número de contraste.' },
   ],
   faq,
   howTo,

package/src/tool/gameUIAccessibilityTester/i18n/ru.ts

@@ -195,6 +195,7 @@ export const content: ToolLocaleContent<GameUiAccessibilityTesterUI> = {
       type: 'paragraph',
       html: 'Файл отчета JSON и сравнительное изображение PNG можно прикреплять к задачам разработки для обсуждения исправлений UI.',
     },
+    { type: 'paragraph', html: 'Запишите сцену, разрешение и проверенную пару цветов. Симуляция помогает рано находить проблемы дизайна, но не заменяет тесты с реальными сценами, разными экранами и людьми с различными особенностями зрения.' },
   ],
   faq,
   howTo,

package/src/tool/gameUIAccessibilityTester/i18n/sv.ts

@@ -195,6 +195,7 @@ export const content: ToolLocaleContent<GameUiAccessibilityTesterUI> = {
       type: 'paragraph',
       html: 'JSON-rapporten och PNG-jämförelsebilden kan bifogas i ert projekthanteringsverktyg för att underlätta kommunikationen kring gränssnittsändringar.',
     },
+    { type: 'paragraph', html: 'Anteckna scen, upplösning och färgparet som granskades. Simuleringen hjälper till att hitta designproblem tidigt, men ersätter inte tester med riktiga scener, olika skärmar och personer med varierande synförhållanden.' },
   ],
   faq,
   howTo,

package/src/tool/gameUIAccessibilityTester/i18n/tr.ts

@@ -195,6 +195,8 @@ export const content: ToolLocaleContent<GameUiAccessibilityTesterUI> = {
       type: 'paragraph',
       html: 'İndirilebilir JSON raporu ve PNG görseli, arayüz düzeltmelerini kolaylaştırmak için görev yönetimi sisteminize eklenebilir.',
     },
+    { type: 'paragraph', html: 'İncelenen sahneyi, çözünürlüğü ve renk çiftini kaydedin. Simülasyon tasarım sorunlarını erken bulmaya yardımcı olur, ancak gerçek sahneler, farklı ekranlar ve çeşitli görme koşullarına sahip kişilerle yapılan testlerin yerini tutmaz.' },
+    { type: 'paragraph', html: 'Aynı arayüzü son oyun ölçeğinde ve hareket hâlindeyken inceleyin. Arka plan değiştiğinde hangi sinyallerin kaybolduğunu not edin ve rengi şekil, desen, metin veya sesle destekleyin. Böylece rapor tek bir kontrast sayısında kalmaz, doğrudan uygulanabilir tasarım görevleri üretir.' },
   ],
   faq,
   howTo,

package/src/tool/gameUIAccessibilityTester/i18n/zh.ts

@@ -195,6 +195,7 @@ export const content: ToolLocaleContent<GameUiAccessibilityTesterUI> = {
       type: 'paragraph',
       html: '导出的 JSON 报告与 PNG 对比图可直接附在 Jira 或 GitHub Issue 等任务单中，帮助设计师与工程师针对具体场景展开讨论与修改。',
     },
+    { type: 'paragraph', html: '记录检查过的场景、分辨率和颜色组合。模拟可以帮助及早发现设计问题，但不能代替真实场景、不同屏幕以及不同视觉条件用户参与的测试。' },
   ],
   faq,
   howTo,

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

@@ -121,6 +121,7 @@ export const content: ToolLocaleContent<HitboxHurtboxAnimatorUI> = {
     importJson: 'JSON importieren',
     exportContactSheet: 'Übersichtsbild herunterladen',
     resetTool: 'Ebenen zurücksetzen',
+    resetProject: 'Kollisionsebenen löschen',
     undo: 'Rückgängig',
     redo: 'Wiederholen',
     statusReady: 'Arbeitsfläche bereit.',
@@ -186,6 +187,19 @@ export const content: ToolLocaleContent<HitboxHurtboxAnimatorUI> = {
       type: 'paragraph',
       html: 'Das Übersichts-PNG zeigt alle Frames mit ihren eingezeichneten Ebenen auf einer Fläche. Nutzen Sie es zusammen mit dem JSON-Export für die Abstimmung zwischen Grafik, Design und Programmierung.',
     },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Aktive Frames und Koordinaten gemeinsam testen',
+    },
+    {
+      type: 'paragraph',
+      html: 'Eine gute Kollisionsform folgt nicht nur der Silhouette, sondern auch dem Zeitpunkt der Aktion. Prüfen Sie Start, aktive Phase und Erholung getrennt und vergleichen Sie die Boxen mit dem Export, damit ein Treffer nicht vor der sichtbaren Bewegung oder nach ihrem Ende auslöst.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Die Vorschau dokumentiert Geometrie und Layer, nicht die vollständige Kollisionslogik Ihrer Engine. Testen Sie Reichweite, Priorität, Pushback und Netzwerkverhalten anschließend mit dem tatsächlich eingebundenen Projekt.',
+    },
   ],
   faq,
   bibliographyTitle: 'Referenzen zur Kollisionsentwicklung',

package/src/tool/hitboxHurtboxAnimator/i18n/fr.ts

@@ -186,6 +186,19 @@ export const content: ToolLocaleContent<HitboxHurtboxAnimatorUI> = {
       type: 'paragraph',
       html: 'La planche de contact PNG affiche toutes les images et leurs calques sur un seul visuel, idéal pour échanger entre graphistes et développeurs.',
     },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Tester les frames actives et les coordonnées ensemble',
+    },
+    {
+      type: 'paragraph',
+      html: 'Une bonne forme de collision suit la silhouette mais aussi le moment de l action. Vérifiez séparément le début, la phase active et la récupération, puis comparez les boîtes exportées afin qu un coup ne se déclenche pas avant le mouvement visible ni après sa fin.',
+    },
+    {
+      type: 'paragraph',
+      html: 'La prévisualisation documente la géométrie et les calques, pas toute la logique de collision du moteur. Testez ensuite la portée, la priorité, le recul et le comportement réseau dans le projet réellement intégré.',
+    },
   ],
   faq,
   bibliographyTitle: 'Références sur la gestion des collisions',

package/src/tool/hitboxHurtboxAnimator/i18n/id.ts

@@ -186,6 +186,19 @@ export const content: ToolLocaleContent<HitboxHurtboxAnimatorUI> = {
       type: 'paragraph',
       html: 'Lembaran kontak PNG menampilkan semua bingkai dan lapisan tabrakan dalam satu gambar untuk mempermudah komunikasi tim.',
     },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Menguji frame aktif dan koordinat secara bersamaan',
+    },
+    {
+      type: 'paragraph',
+      html: 'Bentuk collision yang baik mengikuti siluet sekaligus waktu aksi. Periksa fase awal, aktif, dan pemulihan secara terpisah, lalu bandingkan box hasil ekspor agar hit tidak aktif sebelum gerakan terlihat atau setelah gerakan berakhir.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Pratinjau mendokumentasikan geometri dan layer, bukan seluruh logika collision pada engine. Uji jangkauan, prioritas, pushback, dan perilaku jaringan di proyek yang benar-benar terintegrasi.',
+    },
   ],
   faq,
   bibliographyTitle: 'Referensi desain area tabrakan',

package/src/tool/hitboxHurtboxAnimator/i18n/it.ts

@@ -186,6 +186,7 @@ export const content: ToolLocaleContent<HitboxHurtboxAnimatorUI> = {
       type: 'paragraph',
       html: 'La scheda di contatto PNG mostra tutti i fotogrammi e i loro livelli di colore su un unica immagine, ideale per la collaborazione tra artisti e programmatori.',
     },
+    { type: 'paragraph', html: 'Una forma di collisione deve seguire sia il profilo sia il momento dell azione. Controlla le fasi iniziale, attiva e di recupero e prova portata, priorità, rinculo e rete nel progetto realmente integrato.' },
   ],
   faq,
   bibliographyTitle: 'Riferimenti per lo sviluppo delle collisioni',

package/src/tool/hitboxHurtboxAnimator/i18n/nl.ts

@@ -186,6 +186,7 @@ export const content: ToolLocaleContent<HitboxHurtboxAnimatorUI> = {
       type: 'paragraph',
       html: 'Het PNG-contactblad toont alle frames en hun kleurlagen op één afbeelding, ideaal voor overleg tussen ontwikkelaars en vormgevers.',
     },
+    { type: 'paragraph', html: 'Een collisionvorm moet zowel de omtrek als het actiemoment volgen. Controleer start, actieve fase en herstel afzonderlijk en test bereik, prioriteit, terugslag en netwerkgedrag in het werkelijk geïntegreerde project.' },
   ],
   faq,
   bibliographyTitle: 'Referenties voor botsingsontwerp',

package/src/tool/hitboxHurtboxAnimator/i18n/pl.ts

@@ -186,6 +186,8 @@ export const content: ToolLocaleContent<HitboxHurtboxAnimatorUI> = {
       type: 'paragraph',
       html: 'Arkusz styków PNG pokazuje wszystkie klatki i ich warstwy na jednym obrazie, co ułatwia komunikację z zespołem.',
     },
+    { type: 'paragraph', html: 'Kształt kolizji powinien podążać za sylwetką i chwilą akcji. Sprawdź początek, fazę aktywną i powrót osobno, a następnie przetestuj zasięg, priorytet, odrzut i sieć w rzeczywiście zintegrowanym projekcie.' },
+    { type: 'paragraph', html: 'Po eksporcie przejrzyj klatki graniczne, w których animacja zmienia kierunek albo kończy atak. Zbyt duży hurtbox powoduje niesprawiedliwe trafienia, a zbyt mały hitbox odbiera atakowi czytelność. Porównanie warstw z ruchem postaci ułatwia znalezienie takich rozbieżności przed testami z graczami.' },
   ],
   faq,
   bibliographyTitle: 'Referencje dotyczące projektowania kolizji',

package/src/tool/hitboxHurtboxAnimator/i18n/pt.ts

@@ -186,6 +186,8 @@ export const content: ToolLocaleContent<HitboxHurtboxAnimatorUI> = {
       type: 'paragraph',
       html: 'A folha de contatos PNG exibe todos os quadros e suas camadas de cor em uma só imagem, facilitando a comunicação no time.',
     },
+    { type: 'paragraph', html: 'Uma forma de colisão deve acompanhar tanto a silhueta quanto o momento da ação. Verifique início, fase ativa e recuperação separadamente e teste alcance, prioridade, recuo e rede no projeto realmente integrado.' },
+    { type: 'paragraph', html: 'Depois de exportar, revise os frames em que a animação muda de direção ou termina o ataque. Um hurtbox grande demais causa acertos injustos, enquanto um hitbox pequeno demais reduz a clareza do golpe. Compare as camadas com o movimento do sprite antes de validar o comportamento em testes com jogadores.' },
   ],
   faq,
   bibliographyTitle: 'Referências para desenvolvimento de colisões',

package/src/tool/hitboxHurtboxAnimator/i18n/ru.ts

@@ -186,6 +186,8 @@ export const content: ToolLocaleContent<HitboxHurtboxAnimatorUI> = {
       type: 'paragraph',
       html: 'Сравнительный PNG-лист отображает все кадры и слои на одном изображении, что упрощает обсуждение разработчиками и художниками.',
     },
+    { type: 'paragraph', html: 'Форма столкновения должна следовать силуэту и моменту действия. Проверьте начало, активную фазу и восстановление отдельно, а затем протестируйте дальность, приоритет, отбрасывание и сеть в реально интегрированном проекте.' },
+    { type: 'paragraph', html: 'После экспорта отдельно проверьте кадры, где персонаж меняет направление или завершает атаку. Слишком большой hurtbox создает несправедливые попадания, а слишком маленький hitbox делает удар нечитабельным. Сопоставьте слои с движением спрайта до проверки поведения на реальных игровых сценариях.' },
   ],
   faq,
   bibliographyTitle: 'Ссылки по проектированию коллизий в играх',

package/src/tool/hitboxHurtboxAnimator/i18n/sv.ts

@@ -186,6 +186,7 @@ export const content: ToolLocaleContent<HitboxHurtboxAnimatorUI> = {
       type: 'paragraph',
       html: 'PNG-kontaktkartan visar alla bildrutor och deras färglager på en och samma bild, vilket underlättar kommunikationen mellan grafiker och programmerare.',
     },
+    { type: 'paragraph', html: 'En kollisionsform måste följa både silhuetten och handlingens tidpunkt. Kontrollera start, aktiv fas och återhämtning separat och testa räckvidd, prioritet, knuff och nätverk i det verkligt integrerade projektet.' },
   ],
   faq,
   bibliographyTitle: 'Referenser för kollisionsdesign',

package/src/tool/hitboxHurtboxAnimator/i18n/tr.ts

@@ -186,6 +186,8 @@ export const content: ToolLocaleContent<HitboxHurtboxAnimatorUI> = {
       type: 'paragraph',
       html: 'PNG temas levhası tüm kareleri ve katmanlarını tek bir görselde göstererek yazılımcılar ve çizerler arasındaki iletişimi kolaylaştırır.',
     },
+    { type: 'paragraph', html: 'Bir çarpışma şekli hem silüeti hem de eylemin zamanını izlemelidir. Başlangıç, etkin aşama ve toparlanmayı ayrı kontrol edin; menzil, öncelik, geri itme ve ağ davranışını gerçek projede test edin.' },
+    { type: 'paragraph', html: 'Dışa aktardıktan sonra karakterin yön değiştirdiği veya saldırıyı bitirdiği kareleri ayrı inceleyin. Fazla büyük bir hurtbox haksız isabetlere, fazla küçük bir hitbox ise okunaksız saldırılara yol açar. Gerçek oyun senaryolarında doğrulamadan önce katmanları sprite hareketiyle karşılaştırın.' },
   ],
   faq,
   bibliographyTitle: 'Çarpışma tasarımı referansları',

package/src/tool/hitboxHurtboxAnimator/seo.astro

@@ -1,13 +1,15 @@
 ---
 import { SEORenderer } from '@jjlmoya/utils-shared';
-import type { SEOSection } from '../../types';
+import { hitboxHurtboxAnimator } from './entry';
+import type { KnownLocale } from '../../types';
 
 interface Props {
-  locale?: string;
-  sections?: SEOSection[];
+  locale?: KnownLocale;
 }
 
-const { locale = 'en', sections = [] } = Astro.props;
+const { locale = 'es' } = Astro.props;
+const loader = hitboxHurtboxAnimator.i18n[locale as KnownLocale] ?? hitboxHurtboxAnimator.i18n.es ?? hitboxHurtboxAnimator.i18n.en;
+const content = loader ? await loader() : null;
 ---
 
-<SEORenderer content={{ locale, sections }} />
+{content?.seo && content.seo.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}

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

@@ -76,6 +76,19 @@ export const content: ToolLocaleContent<ItchioGameTesterUI> = {
       type: 'paragraph',
       html: 'Bei Godot Webexporten müssen die benötigten Sicherheitsheader und Browserfunktionen verfügbar sein. Testen Sie das Spiel zusätzlich in einem privaten Browserfenster.'
     },
+    {
+      type: 'title',
+      level: 2,
+      text: 'Viewport, Canvas und Einbettung gemeinsam prüfen',
+    },
+    {
+      type: 'paragraph',
+      html: 'Vergleichen Sie die tatsächliche Canvasgröße mit dem geplanten Itch.io-Viewport. Ein Seitenverhältnis von 16:9 verhindert allein noch keine Scrollbars: CSS-Ränder, feste Mindestbreiten und ein nicht skaliertes Canvas können weiterhin Überlauf erzeugen.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Lesen Sie den Bericht nach jedem Build erneut, weil sich Dateinamen, Einstiegspunkt und Engine-Ausgabe ändern können. Der Tester zeigt strukturelle und geometrische Hinweise; er ersetzt keinen Test auf verschiedenen Browsern und Geräten.',
+    },
   ],
   faq: [
     {