@jjlmoya/utils-games-development 1.54.0 → 1.55.0

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

@@ -0,0 +1,429 @@
+.rsfx-app {
+  --rsfx-ink: #282747;
+  --rsfx-ink-strong: #211d3d;
+  --rsfx-muted: #625d78;
+  --rsfx-line: #756983;
+  --rsfx-panel: #fff7de;
+  --rsfx-panel-alt: #f2e4bd;
+  --rsfx-page: #fffaf0;
+  --rsfx-cyan: #315ccf;
+  --rsfx-teal: #087f72;
+  --rsfx-orange: #d35332;
+  --rsfx-yellow: #f2c14e;
+  --rsfx-pink: #b0306a;
+  --rsfx-cream: #fff8df;
+  --rsfx-shadow: #33294d;
+  --rsfx-scope-panel: #f2c14e;
+  --rsfx-scope-screen: #fff3c4;
+  --rsfx-scope-ink: #282747;
+  --rsfx-scope-muted: #514971;
+  --rsfx-scope-accent: #b0306a;
+  --rsfx-scope-grid: rgba(49, 92, 207, 0.2);
+  --rsfx-waveform: #b0306a;
+  --rsfx-waveform-glow: rgba(176, 48, 106, 0.42);
+
+  background:
+    linear-gradient(rgba(49, 92, 207, 0.035) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(49, 92, 207, 0.035) 1px, transparent 1px),
+    var(--rsfx-page);
+  background-size: 1rem 1rem;
+  border: 3px solid var(--rsfx-ink-strong);
+  box-shadow: 6px 6px 0 var(--rsfx-shadow);
+  color: var(--rsfx-ink);
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  padding: clamp(1rem, 3vw, 2rem);
+}
+
+.theme-dark .rsfx-app {
+  --rsfx-ink: #f7edcf;
+  --rsfx-ink-strong: #fff5d8;
+  --rsfx-muted: #c8b8c4;
+  --rsfx-line: #75627b;
+  --rsfx-panel: #292443;
+  --rsfx-panel-alt: #352d53;
+  --rsfx-page: #19162d;
+  --rsfx-cyan: #6bd5e4;
+  --rsfx-teal: #72f2c8;
+  --rsfx-orange: #ff805c;
+  --rsfx-yellow: #f2c14e;
+  --rsfx-pink: #f477a8;
+  --rsfx-cream: #fff8df;
+  --rsfx-shadow: #080714;
+  --rsfx-scope-panel: #302555;
+  --rsfx-scope-screen: #101b32;
+  --rsfx-scope-ink: #f7edcf;
+  --rsfx-scope-muted: #b6a8bd;
+  --rsfx-scope-accent: #72f2c8;
+  --rsfx-scope-grid: rgba(114, 242, 200, 0.16);
+  --rsfx-waveform: #72f2c8;
+  --rsfx-waveform-glow: rgba(114, 242, 200, 0.75);
+
+  background:
+    linear-gradient(rgba(107, 213, 228, 0.035) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(107, 213, 228, 0.035) 1px, transparent 1px),
+    var(--rsfx-page);
+}
+
+.rsfx-scope-panel {
+  background: var(--rsfx-scope-panel);
+  border: 3px solid var(--rsfx-ink-strong);
+  box-shadow: 4px 4px 0 var(--rsfx-shadow);
+  color: var(--rsfx-scope-ink);
+  padding: 1rem;
+}
+
+.rsfx-scope-topline,
+.rsfx-scope-footer {
+  align-items: center;
+  display: flex;
+  gap: 1rem;
+  justify-content: space-between;
+}
+
+.rsfx-scope-topline {
+  min-height: 2rem;
+}
+
+.rsfx-kicker,
+.rsfx-section-label {
+  display: block;
+  font-size: 0.75rem;
+  font-weight: 900;
+  letter-spacing: 0.13em;
+  text-transform: uppercase;
+}
+
+.rsfx-kicker {
+  color: var(--rsfx-scope-accent);
+}
+
+.rsfx-section-label::before {
+  color: var(--rsfx-orange);
+  content: '> ';
+}
+
+.rsfx-scope-readout {
+  color: var(--rsfx-scope-muted);
+  font: 0.76rem ui-monospace, monospace;
+  margin-left: 0.75rem;
+}
+
+.rsfx-scope-led {
+  background: var(--rsfx-scope-muted);
+  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.22);
+  height: 0.65rem;
+  transition: background 0.2s ease, box-shadow 0.2s ease;
+  width: 0.65rem;
+}
+
+.rsfx-scope-led.is-on {
+  background: var(--rsfx-scope-accent);
+  box-shadow: 0 0 0.8rem 0.2rem var(--rsfx-waveform-glow);
+}
+
+.rsfx-scope-screen {
+  background: var(--rsfx-scope-screen);
+  border: 2px solid var(--rsfx-scope-accent);
+  margin: 0.6rem 0;
+  min-height: 13rem;
+  overflow: hidden;
+  position: relative;
+}
+
+.rsfx-waveform,
+.rsfx-scope-grid {
+  display: block;
+  height: 13rem;
+  width: 100%;
+}
+
+.rsfx-scope-grid {
+  background-image: linear-gradient(var(--rsfx-scope-grid) 1px, transparent 1px), linear-gradient(90deg, var(--rsfx-scope-grid) 1px, transparent 1px);
+  background-size: 12.5% 25%;
+  pointer-events: none;
+  position: absolute;
+  inset: 0;
+}
+
+.rsfx-scope-footer {
+  color: var(--rsfx-scope-muted);
+  flex-wrap: wrap;
+  font: 0.75rem ui-monospace, monospace;
+}
+
+.rsfx-preset-strip,
+.rsfx-control-section {
+  background: var(--rsfx-panel);
+  border: 2px solid var(--rsfx-ink-strong);
+  box-shadow: 3px 3px 0 var(--rsfx-shadow);
+  padding: 1rem;
+}
+
+.rsfx-preset-strip {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.rsfx-preset-grid {
+  display: grid;
+  gap: 0.6rem;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+}
+
+.rsfx-preset,
+.rsfx-text-action,
+.rsfx-action,
+.rsfx-select {
+  font: inherit;
+}
+
+.rsfx-preset {
+  align-items: center;
+  background: var(--rsfx-panel-alt);
+  border: 2px solid var(--rsfx-line);
+  color: var(--rsfx-ink);
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  justify-content: center;
+  min-height: 4.4rem;
+  padding: 0.5rem;
+  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
+}
+
+.rsfx-preset:hover,
+.rsfx-preset:focus-visible {
+  border-color: var(--rsfx-cyan);
+  box-shadow: 3px 3px 0 var(--rsfx-cyan);
+  transform: translate(-1px, -1px);
+}
+
+.rsfx-preset.is-active {
+  background: var(--rsfx-cyan);
+  border-color: var(--rsfx-ink-strong);
+  box-shadow: 3px 3px 0 var(--rsfx-shadow);
+  color: var(--rsfx-cream);
+}
+
+.rsfx-preset-glyph {
+  color: var(--rsfx-orange);
+  font-size: 1.35rem;
+  font-weight: 900;
+  line-height: 1;
+}
+
+.rsfx-preset.is-active .rsfx-preset-glyph {
+  color: var(--rsfx-yellow);
+}
+
+.rsfx-preset span:last-child {
+  font-size: 0.78rem;
+  font-weight: 800;
+}
+
+.rsfx-hint {
+  color: var(--rsfx-muted);
+  font-size: 0.8rem;
+  margin: 0;
+}
+
+.rsfx-control-board {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.rsfx-control-section {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.rsfx-waveform-picker {
+  display: grid;
+  gap: 0.65rem;
+  grid-template-columns: 1fr;
+}
+
+.rsfx-control-label,
+.rsfx-slider-control > span {
+  font-size: 0.8rem;
+  font-weight: 800;
+}
+
+.rsfx-select {
+  appearance: none;
+  background: var(--rsfx-panel-alt);
+  border: 2px solid var(--rsfx-line);
+  color: var(--rsfx-ink);
+  cursor: pointer;
+  min-height: 2.35rem;
+  padding: 0.45rem 0.7rem;
+  width: 100%;
+}
+
+.rsfx-slider-grid {
+  display: grid;
+  gap: 1rem;
+}
+
+.rsfx-slider-control {
+  display: flex;
+  flex-direction: column;
+  gap: 0.55rem;
+}
+
+.rsfx-slider-control > span {
+  align-items: center;
+  display: flex;
+  gap: 0.75rem;
+  justify-content: space-between;
+}
+
+.rsfx-slider-control output {
+  color: var(--rsfx-cyan);
+  font: 900 0.75rem ui-monospace, monospace;
+}
+
+.rsfx-slider-control input {
+  accent-color: var(--rsfx-orange);
+  cursor: pointer;
+  width: 100%;
+}
+
+.rsfx-slider-control input::-webkit-slider-runnable-track {
+  background: var(--rsfx-line);
+  border: 1px solid var(--rsfx-ink);
+  height: 0.55rem;
+}
+
+.rsfx-slider-control input::-webkit-slider-thumb {
+  appearance: none;
+  background: var(--rsfx-orange);
+  border: 2px solid var(--rsfx-ink-strong);
+  height: 1.15rem;
+  margin-top: -0.35rem;
+  width: 0.8rem;
+}
+
+.rsfx-slider-control input::-moz-range-track {
+  background: var(--rsfx-line);
+  border: 1px solid var(--rsfx-ink);
+  height: 0.55rem;
+}
+
+.rsfx-slider-control input::-moz-range-thumb {
+  background: var(--rsfx-orange);
+  border: 2px solid var(--rsfx-ink-strong);
+  border-radius: 0;
+  height: 1.15rem;
+  width: 0.8rem;
+}
+
+.rsfx-action-bar {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  justify-content: space-between;
+}
+
+.rsfx-primary-actions,
+.rsfx-secondary-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.6rem;
+}
+
+.rsfx-action,
+.rsfx-text-action {
+  cursor: pointer;
+  font-size: 0.82rem;
+  font-weight: 900;
+  min-height: 2.55rem;
+  padding: 0.65rem 1rem;
+  transition: transform 0.18s ease, filter 0.18s ease, background 0.18s ease;
+}
+
+.rsfx-action:hover,
+.rsfx-text-action:hover {
+  filter: brightness(1.08);
+  transform: translate(-1px, -1px);
+}
+
+.rsfx-action-play {
+  background: var(--rsfx-orange);
+  border: 2px solid var(--rsfx-ink-strong);
+  box-shadow: 3px 3px 0 var(--rsfx-shadow);
+  color: var(--rsfx-cream);
+}
+
+.rsfx-action-stop {
+  background: var(--rsfx-panel);
+  border: 2px solid var(--rsfx-ink-strong);
+  box-shadow: 3px 3px 0 var(--rsfx-shadow);
+  color: var(--rsfx-ink);
+}
+
+.rsfx-action-download {
+  background: var(--rsfx-yellow);
+  border: 2px solid var(--rsfx-ink-strong);
+  box-shadow: 3px 3px 0 var(--rsfx-shadow);
+  color: var(--rsfx-ink-strong);
+}
+
+.rsfx-text-action {
+  background: transparent;
+  border: 2px solid transparent;
+  color: var(--rsfx-cyan);
+}
+
+.rsfx-status {
+  border-top: 2px solid var(--rsfx-line);
+  color: var(--rsfx-muted);
+  font: 0.75rem ui-monospace, monospace;
+  margin: 0;
+  padding-top: 0.85rem;
+}
+
+.rsfx-app button:focus-visible,
+.rsfx-app select:focus-visible,
+.rsfx-app input:focus-visible {
+  outline: 3px solid var(--rsfx-yellow);
+  outline-offset: 2px;
+}
+
+@media (max-width: 820px) {
+  .rsfx-control-board {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 560px) {
+  .rsfx-preset-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .rsfx-preset:last-child {
+    grid-column: span 2;
+  }
+
+  .rsfx-scope-footer span:last-child {
+    width: 100%;
+  }
+
+  .rsfx-action-bar,
+  .rsfx-primary-actions,
+  .rsfx-secondary-actions {
+    width: 100%;
+  }
+
+  .rsfx-action,
+  .rsfx-text-action {
+    flex: 1;
+  }
+}

package/src/tool/retroSfxGenerator/seo.astro

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

package/src/tool/retroSfxGenerator/ui.ts

@@ -0,0 +1,41 @@
+export interface RetroSfxGeneratorUI extends Record<string, string> {
+  waveformLabel: string;
+  waveformSquare: string;
+  waveformSawtooth: string;
+  waveformSine: string;
+  waveformTriangle: string;
+  waveformNoise: string;
+  presetLabel: string;
+  presetExplosion: string;
+  presetLaser: string;
+  presetJump: string;
+  presetCoin: string;
+  presetPowerUp: string;
+  frequencyLabel: string;
+  frequencyEndLabel: string;
+  durationLabel: string;
+  decayLabel: string;
+  sweepLabel: string;
+  vibratoLabel: string;
+  lowpassLabel: string;
+  highpassLabel: string;
+  noiseMixLabel: string;
+  toneSection: string;
+  dynamicsSection: string;
+  filterSection: string;
+  playButton: string;
+  stopButton: string;
+  downloadButton: string;
+  randomizeButton: string;
+  resetButton: string;
+  waveformPreviewLabel: string;
+  generatedLabel: string;
+  statusReady: string;
+  statusPlaying: string;
+  statusStopped: string;
+  statusDownloaded: string;
+  statusAudioBlocked: string;
+  statusGenerating: string;
+  presetHint: string;
+  monoWavHint: string;
+}

package/src/tool/saveFileEditor/game-save-file-editor.css

@@ -138,14 +138,14 @@
 }
 
 .chip-btn.active {
-  background: var(--accent-base, #3b82f6);
+  background: var(--accent-base, #2563eb);
   color: var(--text-inverse, #fff);
-  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3);
+  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
 }
 
 .chip-btn:hover:not(.active) {
-  background: rgba(59, 130, 246, 0.08);
-  color: var(--accent-base, #3b82f6);
+  background: rgba(37, 99, 235, 0.08);
+  color: var(--accent-base, #2563eb);
 }
 
 .textarea-code {
@@ -157,7 +157,7 @@
   padding: 0.75rem 1.25rem;
   border-radius: 0.5rem;
   border: none;
-  background: var(--accent-base, #3b82f6);
+  background: var(--accent-base, #2563eb);
   color: var(--text-inverse, #fff);
   font-weight: 700;
   cursor: pointer;

package/src/tool/spriteSheetPacker/sprite-sheet-packer.css

@@ -56,7 +56,7 @@
 
 .ssp-tab-btn.active {
   background: var(--bg-surface, #fff);
-  color: var(--color-primary, #6366f1);
+  color: var(--color-primary, #4f46e5);
   opacity: 1;
   border: 1px solid var(--border-base, #cbd5e1);
   border-bottom: 1px solid var(--bg-surface, #fff);
@@ -309,14 +309,14 @@
 }
 
 .ssp-btn-danger {
-  background: #ef4444;
+  background: #dc2626;
   color: var(--text-on-primary, #fff);
 }
 
 .ssp-btn-success {
-  background: #10b981;
+  background: #047857;
   color: var(--text-on-primary, #fff);
-  border-color: #10b981;
+  border-color: #047857;
 }
 
 .ssp-stats-grid {
@@ -512,7 +512,7 @@
   position: fixed;
   bottom: 2rem;
   right: 2rem;
-  background: #10b981;
+  background: #047857;
   color: var(--text-on-primary, #fff);
   padding: 0.75rem 1.25rem;
   border-radius: 8px;

package/src/tool/steamBbcodeTranslator/steam-bbcode-translator.css

@@ -77,7 +77,7 @@
 .bbcode-kicker {
   color: var(--bb-accent);
   display: block;
-  font-size: 0.62rem;
+  font-size: 0.75rem;
   font-weight: 900;
   letter-spacing: 0.14em;
 }
@@ -86,7 +86,7 @@
 .bbcode-draft-note {
   color: var(--bb-muted);
   display: block;
-  font-size: 0.72rem;
+  font-size: 0.75rem;
   font-weight: 600;
 }
 
@@ -122,7 +122,7 @@
 
 .bbcode-step {
   color: var(--bb-warm);
-  font-size: 0.68rem;
+  font-size: 0.75rem;
   font-weight: 900;
   margin-right: 0.45rem;
 }
@@ -131,7 +131,7 @@
   background: var(--bb-soft);
   border-radius: 999px;
   color: var(--bb-accent-deep);
-  font-size: 0.66rem;
+  font-size: 0.75rem;
   padding: 0.3rem 0.55rem;
 }
 
@@ -162,7 +162,7 @@
 
 .bbcode-input-footer p {
   color: var(--bb-muted);
-  font-size: 0.7rem;
+  font-size: 0.75rem;
   line-height: 1.4;
   margin: 0;
 }
@@ -172,7 +172,7 @@
   color: var(--bb-muted);
   display: flex;
   flex-wrap: wrap;
-  font-size: 0.68rem;
+  font-size: 0.75rem;
   gap: 0.8rem;
 }
 
@@ -187,7 +187,7 @@
   border-radius: 6px;
   color: var(--bb-ink);
   cursor: pointer;
-  font-size: 0.68rem;
+  font-size: 0.75rem;
   font-weight: 800;
   padding: 0.38rem 0.6rem;
 }
@@ -237,7 +237,7 @@
   border: 1px solid var(--bb-line);
   border-radius: 7px;
   color: var(--bb-ink);
-  font-size: 0.72rem;
+  font-size: 0.75rem;
   line-height: 1.6;
   margin: 0;
   min-height: 180px;

package/src/tool/steamCapsuleGenerator/steam-capsule-generator.css

@@ -62,7 +62,7 @@
 }
 
 .steam-tab-btn.active {
-  color: var(--text-light, #fff);
+  color: var(--text-dark, #0f172a);
   background: var(--accent-steam, #66c0f4);
   box-shadow: 0 2px 8px var(--accent-shadow, rgba(102, 192, 244, 0.3));
 }
@@ -298,7 +298,7 @@
   border: 2px dashed var(--accent-safe, #ff4757);
   background: var(--bg-safe, rgba(255, 71, 87, 0.15));
   color: var(--text-light, #fff);
-  font-size: 0.7rem;
+  font-size: 0.75rem;
   font-weight: 700;
   padding: 0.25rem 0.5rem;
   pointer-events: none;
@@ -322,7 +322,7 @@
 
 .discount-tag {
   background: var(--bg-discount, #4c6b22);
-  color: var(--accent-discount, #beee11);
+  color: var(--accent-discount, #fff);
   font-size: 1.1rem;
   font-weight: 800;
   padding: 0.35rem 0.6rem;
@@ -336,7 +336,7 @@
 }
 
 .original-price {
-  font-size: 0.7rem;
+  font-size: 0.75rem;
   text-decoration: line-through;
   color: var(--text-muted-alt, #556772);
 }
@@ -546,7 +546,7 @@
 }
 
 .stat-label {
-  font-size: 0.65rem;
+  font-size: 0.75rem;
   color: var(--text-muted, #8b99a8);
   text-transform: uppercase;
 }
@@ -672,7 +672,7 @@
 .steam-asset-badge {
   background: var(--bg-topbar, #0d121a);
   color: var(--accent-active, #67c1f5);
-  font-size: 0.7rem;
+  font-size: 0.75rem;
   font-weight: 700;
   padding: 0.15rem 0.4rem;
   border-radius: 3px;

package/src/tools.ts

@@ -7,6 +7,7 @@ import { AUDIO_LOOP_POINT_FINDER_TOOL } from './tool/audioLoopPointFinder';
 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';
 
 export const ALL_TOOLS: ToolDefinition[] = [
   STEAM_CAPSULE_GENERATOR_TOOL,
@@ -16,4 +17,5 @@ export const ALL_TOOLS: ToolDefinition[] = [
   SAVE_FILE_EDITOR_TOOL,
   LOCALIZATION_SANITIZER_TOOL,
   STEAM_BBCODE_TRANSLATOR_TOOL,
+  RETRO_SFX_GENERATOR_TOOL,
 ];