@jjlmoya/utils-games-development 1.53.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/app-client.ts

@@ -0,0 +1,125 @@
+import type { AutoTranslationResult, MarkupSyntax, TranslationResult } from './types';
+import { clearSourceFromStorage, loadSourceFromStorage, saveSourceToStorage } from './storage';
+import { detectSyntax, getAutoPreviewHtml, translateToAll } from './logic';
+
+interface AppElements {
+  root: HTMLElement;
+  source: HTMLTextAreaElement;
+  detected: HTMLElement;
+  outputGrid: HTMLElement;
+  preview: HTMLElement;
+  characterCount: HTMLElement;
+  blockCount: HTMLElement;
+}
+
+function getElements(root: HTMLElement): AppElements | null {
+  const source = root.querySelector('#bbcode-source') as HTMLTextAreaElement | null;
+  const detected = root.querySelector('#bbcode-detected') as HTMLElement | null;
+  const outputGrid = root.querySelector('#bbcode-output-grid') as HTMLElement | null;
+  const preview = root.querySelector('#bbcode-preview') as HTMLElement | null;
+  const characterCount = root.querySelector('#bbcode-character-count') as HTMLElement | null;
+  const blockCount = root.querySelector('#bbcode-block-count') as HTMLElement | null;
+
+  if (!source || !detected || !outputGrid || !preview || !characterCount || !blockCount) {
+    return null;
+  }
+
+  return { root, source, detected, outputGrid, preview, characterCount, blockCount };
+}
+
+async function copyText(value: string, button: HTMLButtonElement, copiedText: string): Promise<void> {
+  await navigator.clipboard?.writeText(value);
+  const original = button.textContent;
+  button.textContent = copiedText;
+  window.setTimeout(() => {
+    button.textContent = original;
+  }, 1200);
+}
+
+function createCard(target: MarkupSyntax, translation: TranslationResult, names: Record<MarkupSyntax, string>, dataset: DOMStringMap): HTMLElement {
+  const card = document.createElement('article');
+  card.className = 'bbcode-output-card';
+
+  const heading = document.createElement('div');
+  heading.className = 'bbcode-output-card-head';
+
+  const label = document.createElement('h3');
+  label.textContent = names[target];
+
+  const actions = document.createElement('div');
+  actions.className = 'bbcode-output-actions';
+
+  const copyButton = document.createElement('button');
+  copyButton.type = 'button';
+  copyButton.className = 'bbcode-icon-button';
+  copyButton.textContent = dataset.copy ?? 'Copy';
+  copyButton.addEventListener('click', () => copyText(translation.output, copyButton, dataset.copied ?? 'Copied'));
+
+  actions.append(copyButton);
+  heading.append(label, actions);
+
+  const pre = document.createElement('pre');
+  pre.textContent = translation.output;
+  card.append(heading, pre);
+
+  return card;
+}
+
+function updateMeta(elements: AppElements, names: Record<MarkupSyntax, string>, result: AutoTranslationResult): void {
+  const { root, source, detected, characterCount, blockCount } = elements;
+  const syntax = detectSyntax(source.value);
+  detected.textContent = source.value.trim()
+    ? `${root.dataset.detectedLabel ?? 'Detected'}: ${names[syntax]}`
+    : root.dataset.detectedEmpty ?? '';
+
+  characterCount.textContent = String(source.value.length);
+  const firstOutputKey = Object.keys(result.outputs)[0] as MarkupSyntax | undefined;
+  const firstBlockCount = firstOutputKey ? result.outputs[firstOutputKey]?.stats.blocks ?? 0 : 0;
+  blockCount.textContent = String(firstBlockCount);
+}
+
+function renderOutputCards(elements: AppElements, names: Record<MarkupSyntax, string>, result: AutoTranslationResult): void {
+  elements.outputGrid.innerHTML = '';
+  Object.entries(result.outputs).forEach(([target, translation]) => {
+    if (!translation) return;
+    const card = createCard(target as MarkupSyntax, translation, names, elements.root.dataset);
+    elements.outputGrid.append(card);
+  });
+}
+
+function renderApp(elements: AppElements, names: Record<MarkupSyntax, string>): void {
+  const result = translateToAll(elements.source.value);
+  updateMeta(elements, names, result);
+  renderOutputCards(elements, names, result);
+  elements.preview.innerHTML = getAutoPreviewHtml(elements.source.value) || `<p>${elements.root.dataset.previewEmpty ?? ''}</p>`;
+}
+
+export function initSteamBbcodeTranslatorApp(): void {
+  const root = document.getElementById('steam-bbcode-translator');
+  if (!root) return;
+  const elements = getElements(root);
+  if (!elements) return;
+
+  const names: Record<MarkupSyntax, string> = {
+    bbcode: root.dataset.bbcode ?? 'Steam BBCode',
+    markdown: root.dataset.markdown ?? 'Markdown',
+    html: root.dataset.html ?? 'HTML'
+  };
+
+  const stored = loadSourceFromStorage();
+  if (stored) elements.source.value = stored;
+
+  elements.source.addEventListener('input', () => {
+    saveSourceToStorage(elements.source.value);
+    renderApp(elements, names);
+  });
+
+  root.querySelector('#bbcode-clear')?.addEventListener('click', () => {
+    elements.source.value = '';
+    clearSourceFromStorage();
+    renderApp(elements, names);
+    elements.source.focus();
+  });
+
+  renderApp(elements, names);
+}