@jjlmoya/utils-games-development 1.55.0 → 1.56.0

package/src/tool/pixelArtPaletteSwapper/ui.ts

@@ -0,0 +1,35 @@
+export interface PixelArtPaletteSwapperUI extends Record<string, string> {
+  uploadTitle: string;
+  uploadHint: string;
+  chooseImage: string;
+  replaceImage: string;
+  paletteTitle: string;
+  gameBoyPalette: string;
+  nesPalette: string;
+  pico8Palette: string;
+  commodore64Palette: string;
+  dawnBringerPalette: string;
+  customPalette: string;
+  customPaletteHint: string;
+  applyCustomPalette: string;
+  resetCustomPalette: string;
+  sourcePreview: string;
+  resultPreview: string;
+  waitingForImage: string;
+  uploadToPreview: string;
+  resultEmpty: string;
+  downloadPng: string;
+  downloadDisabled: string;
+  colorCount: string;
+  mappedCount: string;
+  imageSize: string;
+  paletteCount: string;
+  preserveAlpha: string;
+  zoomLabel: string;
+  processing: string;
+  invalidPalette: string;
+  invalidImage: string;
+  readyStatus: string;
+  dropActive: string;
+  mappedSummary: string;
+}

package/src/tool/retroSfxGenerator/client.ts

@@ -37,6 +37,8 @@ if (root) {
   const frequencyLabel = root.dataset.frequencyLabel ?? 'Frequency';
   const frequencyEndLabel = root.dataset.frequencyEndLabel ?? 'End frequency';
   const durationLabel = root.dataset.durationLabel ?? 'Duration';
+  const activePresetButton = presetButtons.find((button) => button.classList.contains('is-active'));
+  let currentPreset = (activePresetButton?.dataset.preset as SfxPreset | undefined) ?? 'explosion';
   let params = createDefaultParams();
   let generated = generateSfx(params);
   let audioContext: AudioContext | undefined;
@@ -234,6 +236,7 @@ if (root) {
     presetButtons.forEach((button) => {
       button.addEventListener('click', () => {
         const preset = button.dataset.preset as SfxPreset;
+        currentPreset = preset;
         presetButtons.forEach((item) => item.classList.toggle('is-active', item === button));
         regenerate(getPresetParams(preset));
       });
@@ -241,9 +244,13 @@ if (root) {
     playButton?.addEventListener('click', () => void playAudio());
     stopButton?.addEventListener('click', stopAudio);
     downloadButton?.addEventListener('click', downloadWav);
-    randomizeButton?.addEventListener('click', () => regenerate(getPresetParams('laser')));
+    randomizeButton?.addEventListener('click', () => {
+      regenerate(getPresetParams(currentPreset));
+      void playAudio();
+    });
     resetButton?.addEventListener('click', () => {
-      presetButtons.forEach((item) => item.classList.toggle('is-active', item.dataset.preset === 'laser'));
+      currentPreset = 'explosion';
+      presetButtons.forEach((item) => item.classList.toggle('is-active', item.dataset.preset === 'explosion'));
       regenerate(createDefaultParams());
     });
     window.addEventListener('resize', drawWaveform);

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

@@ -1,10 +1,13 @@
 import { describe, expect, it } from 'vitest';
 import {
   calculateEndFrequency,
+  createDefaultParams,
   encodeWav,
   generateSfx,
   getPresetParams,
   updateSweep,
+  type SfxPreset,
+  type SfxWaveform,
 } from './logic';
 
 describe('retroSfxGenerator logic', () => {
@@ -15,6 +18,24 @@ describe('retroSfxGenerator logic', () => {
     expect(first.frequencyEnd).toBe(calculateEndFrequency(first.frequency, first.sweep));
   });
 
+  it('keeps random variations inside the selected preset family', () => {
+    const families: Array<[SfxPreset, SfxWaveform]> = [
+      ['explosion', 'noise'],
+      ['laser', 'sawtooth'],
+      ['jump', 'square'],
+      ['coin', 'square'],
+      ['powerUp', 'triangle'],
+    ];
+
+    families.forEach(([preset, waveform]) => {
+      expect(getPresetParams(preset, () => 0.25).waveform).toBe(waveform);
+    });
+  });
+
+  it('uses the visible explosion preset as the default family', () => {
+    expect(createDefaultParams().waveform).toBe('noise');
+  });
+
   it('maps sweep to a bounded end frequency', () => {
     expect(calculateEndFrequency(440, -1)).toBeGreaterThanOrEqual(40);
     expect(calculateEndFrequency(440, 1)).toBeLessThanOrEqual(12000);

package/src/tool/retroSfxGenerator/logic.ts

@@ -87,7 +87,7 @@ export function clamp(value: number, min: number, max: number): number {
 }
 
 export function createDefaultParams(): SfxParams {
-  return getPresetParams('laser', () => 0.5);
+  return getPresetParams('explosion', () => 0.5);
 }
 
 export function getPresetParams(preset: SfxPreset, random: () => number = Math.random): SfxParams {

package/src/tool/retroSfxGenerator/retro-sfx-generator.css

@@ -12,6 +12,9 @@
   --rsfx-yellow: #f2c14e;
   --rsfx-pink: #b0306a;
   --rsfx-cream: #fff8df;
+  --rsfx-on-accent: #fff8df;
+  --rsfx-play-bg: #bc4d30;
+  --rsfx-download-ink: #211d3d;
   --rsfx-shadow: #33294d;
   --rsfx-scope-panel: #f2c14e;
   --rsfx-scope-screen: #fff3c4;
@@ -50,6 +53,9 @@
   --rsfx-yellow: #f2c14e;
   --rsfx-pink: #f477a8;
   --rsfx-cream: #fff8df;
+  --rsfx-on-accent: #101b32;
+  --rsfx-play-bg: #ff805c;
+  --rsfx-download-ink: #101b32;
   --rsfx-shadow: #080714;
   --rsfx-scope-panel: #302555;
   --rsfx-scope-screen: #101b32;
@@ -206,7 +212,7 @@
   background: var(--rsfx-cyan);
   border-color: var(--rsfx-ink-strong);
   box-shadow: 3px 3px 0 var(--rsfx-shadow);
-  color: var(--rsfx-cream);
+  color: var(--rsfx-on-accent);
 }
 
 .rsfx-preset-glyph {
@@ -356,10 +362,10 @@
 }
 
 .rsfx-action-play {
-  background: var(--rsfx-orange);
+  background: var(--rsfx-play-bg);
   border: 2px solid var(--rsfx-ink-strong);
   box-shadow: 3px 3px 0 var(--rsfx-shadow);
-  color: var(--rsfx-cream);
+  color: var(--rsfx-on-accent);
 }
 
 .rsfx-action-stop {
@@ -373,7 +379,7 @@
   background: var(--rsfx-yellow);
   border: 2px solid var(--rsfx-ink-strong);
   box-shadow: 3px 3px 0 var(--rsfx-shadow);
-  color: var(--rsfx-ink-strong);
+  color: var(--rsfx-download-ink);
 }
 
 .rsfx-text-action {

package/src/tools.ts

@@ -8,6 +8,7 @@ import { SAVE_FILE_EDITOR_TOOL } from './tool/saveFileEditor';
 import { LOCALIZATION_SANITIZER_TOOL } from './tool/localizationSanitizer';
 import { STEAM_BBCODE_TRANSLATOR_TOOL } from './tool/steamBbcodeTranslator';
 import { RETRO_SFX_GENERATOR_TOOL } from './tool/retroSfxGenerator';
+import { PIXEL_ART_PALETTE_SWAPPER_TOOL } from './tool/pixelArtPaletteSwapper';
 
 export const ALL_TOOLS: ToolDefinition[] = [
   STEAM_CAPSULE_GENERATOR_TOOL,
@@ -18,4 +19,5 @@ export const ALL_TOOLS: ToolDefinition[] = [
   LOCALIZATION_SANITIZER_TOOL,
   STEAM_BBCODE_TRANSLATOR_TOOL,
   RETRO_SFX_GENERATOR_TOOL,
+  PIXEL_ART_PALETTE_SWAPPER_TOOL,
 ];