@jjlmoya/utils-games-development 1.54.0 → 1.56.0

package/package.json

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

package/src/entries.ts

@@ -12,6 +12,10 @@ export { localizationSanitizer } from './tool/localizationSanitizer/entry';
 export type { LocalizationSanitizerUI, LocalizationSanitizerLocaleContent } from './tool/localizationSanitizer/entry';
 export { steamBbcodeTranslator } from './tool/steamBbcodeTranslator/entry';
 export type { SteamBbcodeTranslatorUI, SteamBbcodeTranslatorLocaleContent } from './tool/steamBbcodeTranslator/entry';
+export { retroSfxGenerator } from './tool/retroSfxGenerator/entry';
+export type { RetroSfxGeneratorUI, RetroSfxGeneratorLocaleContent } from './tool/retroSfxGenerator/entry';
+export { pixelArtPaletteSwapper } from './tool/pixelArtPaletteSwapper/entry';
+export type { PixelArtPaletteSwapperUI, PixelArtPaletteSwapperLocaleContent } from './tool/pixelArtPaletteSwapper/entry';
 export { gamesCategory } from './category';
 import { steamCapsuleGenerator } from './tool/steamCapsuleGenerator/entry';
 import { itchioGameTester } from './tool/itchioGameTester/entry';
@@ -19,5 +23,7 @@ import { spriteSheetPacker } from './tool/spriteSheetPacker/entry';
 import { audioLoopPointFinder } from './tool/audioLoopPointFinder/entry';
 import { saveFileEditor } from './tool/saveFileEditor/entry';
 import { localizationSanitizer } from './tool/localizationSanitizer/entry';
+import { retroSfxGenerator } from './tool/retroSfxGenerator/entry';
+import { pixelArtPaletteSwapper } from './tool/pixelArtPaletteSwapper/entry';
 
-export const ALL_ENTRIES = [steamCapsuleGenerator, itchioGameTester, spriteSheetPacker, audioLoopPointFinder, saveFileEditor, localizationSanitizer];
+export const ALL_ENTRIES = [steamCapsuleGenerator, itchioGameTester, spriteSheetPacker, audioLoopPointFinder, saveFileEditor, localizationSanitizer, retroSfxGenerator, pixelArtPaletteSwapper];

package/src/index.ts

@@ -18,5 +18,7 @@ export type {
 export { ALL_ENTRIES, ALL_TOOLS } from './tools';
 export { STEAM_CAPSULE_GENERATOR_TOOL, steamCapsuleGenerator } from './tool/steamCapsuleGenerator';
 export { STEAM_BBCODE_TRANSLATOR_TOOL, steamBbcodeTranslator } from './tool/steamBbcodeTranslator';
+export { RETRO_SFX_GENERATOR_TOOL, retroSfxGenerator } from './tool/retroSfxGenerator';
+export { PIXEL_ART_PALETTE_SWAPPER_TOOL, pixelArtPaletteSwapper } from './tool/pixelArtPaletteSwapper';
 
 export type { ToolLocaleContent as GamesToolLocaleContent } from './types';

package/src/tests/contrast_legibility.test.ts

@@ -0,0 +1,291 @@
+import { describe, expect, it } from 'vitest';
+import { readdirSync, readFileSync } from 'node:fs';
+import { join, relative } from 'node:path';
+
+type Color = { r: number; g: number; b: number; a: number };
+type Declaration = { name: string; value: string };
+type CssRule = { selector: string; declarations: Declaration[]; line: number };
+type Theme = 'light' | 'dark';
+type Variables = Record<string, string>;
+
+const toolRoot = join(process.cwd(), 'src', 'tool');
+const minimumTextContrast = 4.5;
+const minimumReviewFontSizeRem = 0.75;
+const themes: Theme[] = ['light', 'dark'];
+
+function findFiles(directory: string, extensions: string[]): string[] {
+  const files: string[] = [];
+
+  for (const entry of readdirSync(directory, { withFileTypes: true })) {
+    const path = join(directory, entry.name);
+    if (entry.isDirectory()) files.push(...findFiles(path, extensions));
+    else if (extensions.some((extension) => entry.name.endsWith(extension))) files.push(path);
+  }
+
+  return files;
+}
+
+function relativePath(path: string): string {
+  return relative(process.cwd(), path).replace(/\\/g, '/');
+}
+
+function lineAt(source: string, index: number): number {
+  return source.slice(0, index).split('\n').length;
+}
+
+function removeComments(source: string): string {
+  return source.replace(/\/\*[\s\S]*?\*\//g, (comment) => comment.replace(/[^\n]/g, ' '));
+}
+
+function cssSources(path: string): string[] {
+  const source = readFileSync(path, 'utf8');
+  if (path.endsWith('.css')) return [source];
+
+  return Array.from(source.matchAll(/<style\b[^>]*>([\s\S]*?)<\/style>/gi), (match) => match[1])
+    .filter((style): style is string => style !== undefined);
+}
+
+function parseDeclarations(body: string): Declaration[] {
+  return body
+    .split(';')
+    .map((declaration) => {
+      const separator = declaration.indexOf(':');
+      if (separator === -1) return null;
+      return {
+        name: declaration.slice(0, separator).trim().toLowerCase(),
+        value: declaration.slice(separator + 1).trim(),
+      };
+    })
+    .filter((declaration): declaration is Declaration => declaration !== null && declaration.name.length > 0);
+}
+
+function parseRules(source: string): CssRule[] {
+  const css = removeComments(source);
+  const rules: CssRule[] = [];
+  const rulePattern = /([^{}]+)\{([^{}]*)\}/g;
+
+  for (const match of css.matchAll(rulePattern)) {
+    const selector = match[1]?.trim();
+    const body = match[2];
+    if (selector && body !== undefined) {
+      const declarations = parseDeclarations(body);
+      if (declarations.length > 0) {
+      rules.push({ selector, declarations, line: lineAt(css, match.index ?? 0) });
+      }
+    }
+  }
+
+  return rules;
+}
+
+function channel(value: string): number | null {
+  const trimmed = value.trim();
+  if (trimmed.endsWith('%')) {
+    const percentage = Number.parseFloat(trimmed);
+    return Number.isFinite(percentage) ? (percentage / 100) * 255 : null;
+  }
+
+  const number = Number.parseFloat(trimmed);
+  return Number.isFinite(number) ? number : null;
+}
+
+function expandHex(hex: string): string {
+  return hex.length <= 4 ? hex.split('').map((part) => part + part).join('') : hex;
+}
+
+function hexValues(expanded: string): number[] | null {
+  const values = expanded.match(/[\da-f]{2}/gi)?.map((part) => Number.parseInt(part, 16));
+  if (!values || values.length < 3) return null;
+  return values;
+}
+
+function parseHexColor(value: string): Color | null {
+  const hex = value.match(/^#([\da-f]{3,8})$/i)?.[1];
+  if (!hex) return null;
+  const expanded = expandHex(hex);
+  if (![6, 8].includes(expanded.length)) return null;
+  const values = hexValues(expanded);
+  if (!values) return null;
+  const [r, g, b, alpha] = values;
+  return { r: r!, g: g!, b: b!, a: alpha === undefined ? 1 : alpha / 255 };
+}
+
+function rgbChannels(parts: string[]): [number, number, number] | null {
+  const [r, g, b] = parts.slice(0, 3).map(channel);
+  if ([r, g, b].some((value) => value === null || value === undefined)) return null;
+  return [r!, g!, b!];
+}
+
+function alphaValue(value: string | undefined): number | null {
+  if (value === undefined) return 1;
+  const alpha = Number.parseFloat(value);
+  return Number.isFinite(alpha) ? alpha : null;
+}
+
+function parseRgbParts(rgb: string): Color | null {
+  const parts = rgb.replace('/', ',').split(',').map((part) => part.trim());
+  if (parts.length < 3) return null;
+  const channels = rgbChannels(parts);
+  const alpha = alphaValue(parts[3]);
+  if (!channels || alpha === null) return null;
+  const [r, g, b] = channels;
+  return { r, g, b, a: alpha };
+}
+
+function parseRgbColor(value: string): Color | null {
+  const rgb = value.match(/^rgba?\(([^)]+)\)$/)?.[1];
+  return rgb ? parseRgbParts(rgb) : null;
+}
+
+function parseColor(value: string): Color | null {
+  const trimmed = value.trim().toLowerCase();
+  const fallback = trimmed.match(/^var\([^,]+,\s*(.+)\)$/)?.[1];
+  if (fallback) return parseColor(fallback);
+  if (trimmed === 'white') return { r: 255, g: 255, b: 255, a: 1 };
+  if (trimmed === 'black') return { r: 0, g: 0, b: 0, a: 1 };
+  if (trimmed === 'transparent') return { r: 0, g: 0, b: 0, a: 0 };
+  return parseHexColor(trimmed) ?? parseRgbColor(trimmed);
+}
+
+function composite(foreground: Color, background: Color): Color | null {
+  if (background.a < 1) return null;
+  if (foreground.a >= 1) return foreground;
+  const alpha = foreground.a;
+  return {
+    r: foreground.r * alpha + background.r * (1 - alpha),
+    g: foreground.g * alpha + background.g * (1 - alpha),
+    b: foreground.b * alpha + background.b * (1 - alpha),
+    a: 1,
+  };
+}
+
+function relativeLuminance(color: Color): number {
+  const linear = [color.r, color.g, color.b].map((value) => {
+    const channelValue = value / 255;
+    return channelValue <= 0.03928
+      ? channelValue / 12.92
+      : ((channelValue + 0.055) / 1.055) ** 2.4;
+  });
+  return 0.2126 * linear[0]! + 0.7152 * linear[1]! + 0.0722 * linear[2]!;
+}
+
+function contrastRatio(foreground: Color, background: Color): number | null {
+  const compositedForeground = composite(foreground, background);
+  if (!compositedForeground) return null;
+  const foregroundLuminance = relativeLuminance(compositedForeground);
+  const backgroundLuminance = relativeLuminance(background);
+  return (Math.max(foregroundLuminance, backgroundLuminance) + 0.05)
+    / (Math.min(foregroundLuminance, backgroundLuminance) + 0.05);
+}
+
+function lastDeclaration(declarations: Declaration[], names: string[]): Declaration | undefined {
+  return [...declarations].reverse().find((declaration) => names.includes(declaration.name));
+}
+
+function simpleBackground(value: string): Color | null {
+  if (value.includes('gradient') || value.includes('url(') || value.includes('color-mix(')) return null;
+  return parseColor(value);
+}
+
+function isThemeSelector(selector: string, theme: Theme): boolean {
+  return selector.includes(`.theme-${theme}`);
+}
+
+function isActiveRule(selector: string, theme: Theme): boolean {
+  const otherTheme: Theme = theme === 'dark' ? 'light' : 'dark';
+  return !isThemeSelector(selector, otherTheme);
+}
+
+function addVariables(target: Variables, rule: CssRule): void {
+  rule.declarations
+    .filter((declaration) => declaration.name.startsWith('--'))
+    .forEach((declaration) => { target[declaration.name] = declaration.value; });
+}
+
+function collectVariables(rules: CssRule[], theme: Theme): Variables {
+  const variables: Variables = {};
+  rules.filter((rule) => !isThemeSelector(rule.selector, 'dark') && !isThemeSelector(rule.selector, 'light'))
+    .forEach((rule) => addVariables(variables, rule));
+  rules.filter((rule) => isThemeSelector(rule.selector, theme))
+    .forEach((rule) => addVariables(variables, rule));
+  return variables;
+}
+
+function resolveCssValue(value: string, variables: Variables): string {
+  let resolved = value;
+  for (let attempt = 0; attempt < 10; attempt += 1) {
+    const next = resolved.replace(/var\(\s*(--[\w-]+)(?:\s*,\s*([^()]+))?\s*\)/g, (_, name, fallback) => variables[name] ?? fallback ?? '');
+    if (next === resolved) return resolved;
+    resolved = next;
+  }
+  return resolved;
+}
+
+function contrastFinding(path: string, rule: CssRule, theme: Theme, variables: Variables): string | null {
+  const foreground = lastDeclaration(rule.declarations, ['color']);
+  const background = lastDeclaration(rule.declarations, ['background-color', 'background']);
+  const foregroundColor = foreground ? parseColor(resolveCssValue(foreground.value, variables)) : null;
+  const backgroundColor = background ? simpleBackground(resolveCssValue(background.value, variables)) : null;
+  const ratio = foregroundColor && backgroundColor ? contrastRatio(foregroundColor, backgroundColor) : null;
+  return ratio !== null && ratio < minimumTextContrast
+    ? `[A11Y-06][${theme}] ${relativePath(path)}:${rule.line} ${rule.selector} — ${ratio.toFixed(2)}:1 `
+      + `(mínimo ${minimumTextContrast}:1)`
+    : null;
+}
+
+function fontSizeFinding(path: string, rule: CssRule): string | null {
+  const rem = lastDeclaration(rule.declarations, ['font-size'])?.value.match(/^(-?(?:\d+\.?\d*|\.\d+))rem$/i)?.[1];
+  if (!rem || Number.parseFloat(rem) >= minimumReviewFontSizeRem || /(svg|icon|logo|decorative|sr-only)/i.test(rule.selector)) {
+    return null;
+  }
+  return `[A11Y-06] ${relativePath(path)}:${rule.line} ${rule.selector} — font-size ${rem}rem `
+    + `(revisar por debajo de ${minimumReviewFontSizeRem}rem)`;
+}
+
+function inspectSource(path: string, source: string): { contrastFailures: string[]; fontSizeCandidates: string[] } {
+  const rules = parseRules(source);
+  const contrastFailures = themes.flatMap((theme) => {
+    const variables = collectVariables(rules, theme);
+    return rules
+      .filter((rule) => isActiveRule(rule.selector, theme))
+      .map((rule) => contrastFinding(path, rule, theme, variables))
+      .filter((finding): finding is string => finding !== null);
+  });
+  const fontSizeCandidates = rules
+    .map((rule) => fontSizeFinding(path, rule))
+    .filter((finding): finding is string => finding !== null);
+  return {
+    contrastFailures,
+    fontSizeCandidates,
+  };
+}
+
+function inspectStyles(): { contrastFailures: string[]; fontSizeCandidates: string[] } {
+  const findings = findFiles(toolRoot, ['.css', '.astro'])
+    .flatMap((path) => cssSources(path).map((source) => inspectSource(path, source)));
+  return {
+    contrastFailures: findings.flatMap((finding) => finding.contrastFailures),
+    fontSizeCandidates: findings.flatMap((finding) => finding.fontSizeCandidates),
+  };
+}
+
+describe('QA: contraste y legibilidad de las tools', () => {
+  it('calcula ratios WCAG conocidos correctamente', () => {
+    expect(contrastRatio(parseColor('#000')!, parseColor('#fff')!)).toBeCloseTo(21, 5);
+    expect(contrastRatio(parseColor('#777')!, parseColor('#fff')!)).toBeCloseTo(4.478, 2);
+    expect(contrastRatio(parseColor('rgba(0, 0, 0, 0.5)')!, parseColor('#fff')!)).toBeCloseTo(3.98, 2);
+  });
+
+  it('no contiene pares de texto y fondo explícitos por debajo de 4.5:1', () => {
+    const { contrastFailures } = inspectStyles();
+    expect(contrastFailures, `Contrastes insuficientes:\n${contrastFailures.join('\n')}`).toEqual([]);
+  });
+
+  it('no usa texto por debajo de 0.75rem fuera de elementos decorativos', () => {
+    const { fontSizeCandidates } = inspectStyles();
+    expect(
+      fontSizeCandidates,
+      'Candidatos de legibilidad. El umbral es una política de revisión del repositorio, no una validación completa de WCAG.',
+    ).toEqual([]);
+  });
+});

package/src/tests/locale_completeness.test.ts

@@ -2,7 +2,7 @@ import { describe, it, expect } from 'vitest';
 import { ALL_TOOLS } from '../tools';
 
 describe('Locale Completeness Validation', () => {
-  it('seven tools are registered', () => {
-    expect(ALL_TOOLS.length).toBe(7);
+  it('nine tools are registered', () => {
+    expect(ALL_TOOLS.length).toBe(9);
   });
 });

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 7 tools in ALL_TOOLS', () => {
-      expect(ALL_TOOLS.length).toBe(7);
+    it('should have 9 tools in ALL_TOOLS', () => {
+      expect(ALL_TOOLS.length).toBe(9);
     });
 
     it('gamesCategory should be defined', () => {

package/src/tool/itchioGameTester/itchio-game-tester.css

@@ -113,9 +113,9 @@
 }
 
 .igt-chip:hover {
-  background: var(--color-primary, #6366f1);
+  background: var(--color-primary, #4f46e5);
   color: var(--text-inverse, #fff);
-  border-color: var(--color-primary, #6366f1);
+  border-color: var(--color-primary, #4f46e5);
 }
 
 .igt-chip.active {
@@ -195,7 +195,7 @@
   padding: 0.75rem 1.25rem;
   border-radius: 8px;
   border: none;
-  background: var(--color-primary, #6366f1);
+  background: var(--color-primary, #4f46e5);
   color: var(--text-inverse, #fff);
   font-weight: 600;
   cursor: pointer;

package/src/tool/localizationSanitizer/localization-sanitizer.css

@@ -6,6 +6,7 @@
   --ls-panel-soft: #f4f7fa;
   --ls-accent: #e56a47;
   --ls-accent-dark: #bc4d30;
+  --ls-on-accent: #17202f;
   --ls-cyan: #19a6a0;
   --ls-yellow: #e7a633;
   --ls-red: #ce4f61;
@@ -24,6 +25,7 @@
   --ls-panel-soft: #172232;
   --ls-accent: #f1845d;
   --ls-accent-dark: #da6744;
+  --ls-on-accent: #111926;
   --ls-cyan: #42c3b8;
   --ls-yellow: #efbd57;
   --ls-red: #f07889;
@@ -73,7 +75,7 @@
 .ls-kicker,
 .ls-section-eyebrow {
   color: var(--ls-accent);
-  font-size: 0.68rem;
+  font-size: 0.75rem;
   font-weight: 800;
   letter-spacing: 0.14em;
 }
@@ -101,7 +103,7 @@
 
 .ls-format-label {
   color: var(--ls-muted);
-  font-size: 0.72rem;
+  font-size: 0.75rem;
   font-weight: 700;
   margin-right: auto;
   text-transform: uppercase;
@@ -162,7 +164,7 @@
 .ls-drop-mark span {
   border: 1px solid var(--ls-accent);
   color: var(--ls-accent-dark);
-  font-size: 0.58rem;
+  font-size: 0.75rem;
   font-weight: 900;
   letter-spacing: 0.08em;
   padding: 0.22rem 0.36rem;
@@ -170,7 +172,7 @@
 
 .ls-drop-mark span:last-child {
   background: var(--ls-accent);
-  color: var(--ls-panel);
+  color: var(--ls-on-accent);
   transform: translateX(0.4rem);
 }
 
@@ -189,7 +191,7 @@
 
 .ls-file-type-note {
   color: var(--ls-cyan);
-  font-size: 0.69rem;
+  font-size: 0.75rem;
   font-weight: 700;
 }
 
@@ -219,7 +221,7 @@
 
 .ls-button-primary {
   background: var(--ls-accent);
-  color: var(--ls-panel);
+  color: var(--ls-on-accent);
 }
 
 .ls-button-primary:hover:not(:disabled) {
@@ -277,7 +279,7 @@
 
 .ls-section-index {
   color: var(--ls-accent);
-  font-size: 0.72rem;
+  font-size: 0.75rem;
   font-weight: 900;
   padding-top: 0.16rem;
 }
@@ -329,7 +331,7 @@
 
 .ls-health-card span:last-child {
   color: var(--ls-muted);
-  font-size: 0.7rem;
+  font-size: 0.75rem;
   margin-top: 0.22rem;
 }
 
@@ -435,14 +437,14 @@
 }
 
 .ls-issue-copy strong {
-  font-size: 0.7rem;
+  font-size: 0.75rem;
 }
 
 .ls-issue-copy span,
 .ls-issue-more,
 .ls-no-issues {
   color: var(--ls-muted);
-  font-size: 0.66rem;
+  font-size: 0.75rem;
 }
 
 .ls-issue-more {
@@ -491,7 +493,7 @@
 }
 
 .ls-empty-state span:last-child {
-  font-size: 0.73rem;
+  font-size: 0.75rem;
 }
 
 .ls-empty-grid {
@@ -505,7 +507,7 @@
 
 .ls-table {
   border-collapse: collapse;
-  font-size: 0.72rem;
+  font-size: 0.75rem;
   min-width: 100%;
   table-layout: fixed;
 }
@@ -524,7 +526,7 @@
 .ls-table th {
   background: color-mix(in srgb, var(--ls-accent) 8%, var(--ls-panel));
   color: var(--ls-accent-dark);
-  font-size: 0.65rem;
+  font-size: 0.75rem;
   letter-spacing: 0.05em;
   position: sticky;
   text-transform: uppercase;
@@ -544,7 +546,7 @@
 .ls-preview-note {
   color: var(--ls-muted);
   display: block;
-  font-size: 0.68rem;
+  font-size: 0.75rem;
   padding: 0.6rem;
   text-align: center;
 }
@@ -568,7 +570,7 @@
 
 .ls-live-status {
   color: var(--ls-cyan);
-  font-size: 0.72rem;
+  font-size: 0.75rem;
   min-height: 1rem;
   padding: 0.35rem 0.2rem;
 }