@jjlmoya/utils-games-development 1.54.0 → 1.55.0

package/package.json

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

package/src/entries.ts

@@ -12,6 +12,8 @@ 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 { gamesCategory } from './category';
 import { steamCapsuleGenerator } from './tool/steamCapsuleGenerator/entry';
 import { itchioGameTester } from './tool/itchioGameTester/entry';
@@ -19,5 +21,6 @@ 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';
 
-export const ALL_ENTRIES = [steamCapsuleGenerator, itchioGameTester, spriteSheetPacker, audioLoopPointFinder, saveFileEditor, localizationSanitizer];
+export const ALL_ENTRIES = [steamCapsuleGenerator, itchioGameTester, spriteSheetPacker, audioLoopPointFinder, saveFileEditor, localizationSanitizer, retroSfxGenerator];

package/src/index.ts

@@ -18,5 +18,6 @@ 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 type { ToolLocaleContent as GamesToolLocaleContent } from './types';

package/src/tests/contrast_legibility.test.ts

@@ -0,0 +1,245 @@
+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 };
+
+const toolRoot = join(process.cwd(), 'src', 'tool');
+const minimumTextContrast = 4.5;
+const minimumReviewFontSizeRem = 0.75;
+
+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 contrastFinding(path: string, rule: CssRule): string | null {
+  const foreground = lastDeclaration(rule.declarations, ['color']);
+  const background = lastDeclaration(rule.declarations, ['background-color', 'background']);
+  const foregroundColor = foreground ? parseColor(foreground.value) : null;
+  const backgroundColor = background ? simpleBackground(background.value) : null;
+  const ratio = foregroundColor && backgroundColor ? contrastRatio(foregroundColor, backgroundColor) : null;
+  return ratio !== null && ratio < minimumTextContrast
+    ? `[A11Y-06] ${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 inspectRule(path: string, rule: CssRule): { contrastFailures: string[]; fontSizeCandidates: string[] } {
+  const contrast = contrastFinding(path, rule);
+  const fontSize = fontSizeFinding(path, rule);
+  return {
+    contrastFailures: contrast ? [contrast] : [],
+    fontSizeCandidates: fontSize ? [fontSize] : [],
+  };
+}
+
+function inspectStyles(): { contrastFailures: string[]; fontSizeCandidates: string[] } {
+  const findings = findFiles(toolRoot, ['.css', '.astro'])
+    .flatMap((path) => cssSources(path).flatMap((source) => parseRules(source).map((rule) => inspectRule(path, rule))));
+  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('eight tools are registered', () => {
+    expect(ALL_TOOLS.length).toBe(8);
   });
 });

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 8 tools in ALL_TOOLS', () => {
+      expect(ALL_TOOLS.length).toBe(8);
     });
 
     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

@@ -73,7 +73,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 +101,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 +162,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;
@@ -189,7 +189,7 @@
 
 .ls-file-type-note {
   color: var(--ls-cyan);
-  font-size: 0.69rem;
+  font-size: 0.75rem;
   font-weight: 700;
 }
 
@@ -277,7 +277,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 +329,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 +435,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 +491,7 @@
 }
 
 .ls-empty-state span:last-child {
-  font-size: 0.73rem;
+  font-size: 0.75rem;
 }
 
 .ls-empty-grid {
@@ -505,7 +505,7 @@
 
 .ls-table {
   border-collapse: collapse;
-  font-size: 0.72rem;
+  font-size: 0.75rem;
   min-width: 100%;
   table-layout: fixed;
 }
@@ -524,7 +524,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 +544,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 +568,7 @@
 
 .ls-live-status {
   color: var(--ls-cyan);
-  font-size: 0.72rem;
+  font-size: 0.75rem;
   min-height: 1rem;
   padding: 0.35rem 0.2rem;
 }

package/src/tool/retroSfxGenerator/bibliography.astro

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

package/src/tool/retroSfxGenerator/bibliography.ts

@@ -0,0 +1,16 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliographyEntries: BibliographyEntry[] = [
+  {
+    name: 'W3C Web Audio API Recommendation',
+    url: 'https://www.w3.org/TR/webaudio/',
+  },
+  {
+    name: 'MDN OscillatorNode Web API Reference',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/API/OscillatorNode',
+  },
+  {
+    name: 'Microsoft RIFF WAVE Audio File Format',
+    url: 'https://www.mmsp.ece.mcgill.ca/Documents/AudioFormats/WAVE/WAVE.html',
+  },
+];