@jjlmoya/utils-games-development 1.50.0 → 1.51.0

package/package.json

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

package/src/category/index.ts

@@ -1,10 +1,11 @@
 import type { GamesCategoryEntry } from '../types';
 import { steamCapsuleGenerator } from '../tool/steamCapsuleGenerator/entry';
 import { spriteSheetPacker } from '../tool/spriteSheetPacker/entry';
+import { audioLoopPointFinder } from '../tool/audioLoopPointFinder/entry';
 
 export const gamesCategory: GamesCategoryEntry = {
   icon: 'mdi:gamepad-variant',
-  tools: [steamCapsuleGenerator, spriteSheetPacker],
+  tools: [steamCapsuleGenerator, spriteSheetPacker, audioLoopPointFinder],
   i18n: {
     de: () => import('./i18n/de').then((m) => m.content),
     en: () => import('./i18n/en').then((m) => m.content),

package/src/entries.ts

@@ -4,9 +4,13 @@ export { itchioGameTester } from './tool/itchioGameTester/entry';
 export type { ItchioGameTesterUI, ItchioGameTesterLocaleContent } from './tool/itchioGameTester/entry';
 export { spriteSheetPacker } from './tool/spriteSheetPacker/entry';
 export type { SpriteSheetPackerUI, SpriteSheetPackerLocaleContent } from './tool/spriteSheetPacker/entry';
+export { audioLoopPointFinder } from './tool/audioLoopPointFinder/entry';
+export type { AudioLoopPointFinderUI, AudioLoopPointFinderLocaleContent } from './tool/audioLoopPointFinder/entry';
 export { gamesCategory } from './category';
 import { steamCapsuleGenerator } from './tool/steamCapsuleGenerator/entry';
 import { itchioGameTester } from './tool/itchioGameTester/entry';
 import { spriteSheetPacker } from './tool/spriteSheetPacker/entry';
+import { audioLoopPointFinder } from './tool/audioLoopPointFinder/entry';
+
+export const ALL_ENTRIES = [steamCapsuleGenerator, itchioGameTester, spriteSheetPacker, audioLoopPointFinder];
 
-export const ALL_ENTRIES = [steamCapsuleGenerator, itchioGameTester, spriteSheetPacker];

package/src/tests/locale_completeness.test.ts

@@ -3,6 +3,6 @@ import { ALL_TOOLS } from '../tools';
 
 describe('Locale Completeness Validation', () => {
   it('one tool is registered', () => {
-    expect(ALL_TOOLS.length).toBe(3);
+    expect(ALL_TOOLS.length).toBe(4);
   });
 });

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

package/src/tool/audioLoopPointFinder/audio-loop-point-finder.css

@@ -0,0 +1,322 @@
+.alpf-main-card {
+  background: var(--bg-surface, #fff);
+  color: var(--text-base, #0f172a);
+  border: 1px solid var(--border-base, #e2e8f0);
+  border-radius: 1.25rem;
+  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01);
+  padding: 1.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  position: relative;
+  overflow: hidden;
+  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.theme-dark .alpf-main-card {
+  background: var(--bg-surface, #0f172a);
+  color: var(--text-base, #f8fafc);
+  border-color: var(--border-base, #1e293b);
+  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.4);
+}
+
+.alpf-dropzone {
+  border: 2px dashed var(--border-base, #cbd5e1);
+  border-radius: 1rem;
+  padding: 2.5rem 1.5rem;
+  text-align: center;
+  background: rgba(241, 245, 249, 0.4);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.theme-dark .alpf-dropzone {
+  border-color: var(--border-base, #334155);
+  background: rgba(30, 41, 59, 0.3);
+}
+
+.alpf-dropzone:hover,
+.alpf-dropzone.drag-over {
+  border-color: var(--accent-base, #6366f1);
+  background: rgba(99, 102, 241, 0.06);
+  transform: translateY(-2px);
+}
+
+.alpf-dropzone-icon {
+  width: 3rem;
+  height: 3rem;
+  color: var(--accent-base, #6366f1);
+}
+
+.alpf-dropzone-title {
+  font-size: 1.125rem;
+  font-weight: 600;
+}
+
+.alpf-dropzone-subtitle {
+  font-size: 0.875rem;
+  opacity: 0.7;
+}
+
+.alpf-file-input {
+  display: none;
+}
+
+.alpf-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.625rem 1.25rem;
+  font-weight: 600;
+  font-size: 0.9375rem;
+  border-radius: 0.625rem;
+  border: none;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  user-select: none;
+}
+
+.alpf-btn-primary {
+  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
+  color: var(--text-inverse, #fff);
+  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
+}
+
+.alpf-btn-primary:hover {
+  background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
+  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);
+  transform: translateY(-1px);
+}
+
+.alpf-btn-primary:active {
+  transform: translateY(0);
+}
+
+.alpf-btn-secondary {
+  background: var(--bg-muted, #f1f5f9);
+  color: var(--text-base, #334155);
+  border: 1px solid var(--border-base, #cbd5e1);
+}
+
+.theme-dark .alpf-btn-secondary {
+  background: var(--bg-muted, #1e293b);
+  color: var(--text-base, #e2e8f0);
+  border-color: var(--border-base, #334155);
+}
+
+.alpf-btn-secondary:hover {
+  border-color: var(--accent-base, #6366f1);
+  color: var(--accent-base, #6366f1);
+}
+
+.alpf-btn-success {
+  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+  color: var(--text-inverse, #fff);
+  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
+}
+
+.alpf-btn-success:hover {
+  background: linear-gradient(135deg, #059669 0%, #047857 100%);
+  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
+  transform: translateY(-1px);
+}
+
+.alpf-workspace {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.alpf-stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
+  gap: 1rem;
+}
+
+.alpf-stat-card {
+  background: var(--bg-muted, #f8fafc);
+  border: 1px solid var(--border-base, #e2e8f0);
+  border-radius: 0.75rem;
+  padding: 0.875rem 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.theme-dark .alpf-stat-card {
+  background: var(--bg-muted, #1e293b);
+  border-color: var(--border-base, #334155);
+}
+
+.alpf-stat-label {
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  opacity: 0.7;
+}
+
+.alpf-stat-value {
+  font-size: 1.125rem;
+  font-weight: 700;
+  color: var(--accent-base, #6366f1);
+}
+
+.theme-dark .alpf-stat-value {
+  color: var(--accent-light, #818cf8);
+}
+
+.alpf-waveform-container {
+  position: relative;
+  background: #020617;
+  border-radius: 0.875rem;
+  border: 1px solid var(--border-base, #334155);
+  padding: 0.5rem;
+  overflow: hidden;
+  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5);
+}
+
+.alpf-waveform-canvas {
+  width: 100%;
+  height: 180px;
+  display: block;
+  cursor: crosshair;
+}
+
+.alpf-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.75rem;
+  background: var(--bg-muted, #f8fafc);
+  border: 1px solid var(--border-base, #e2e8f0);
+  border-radius: 0.75rem;
+}
+
+.theme-dark .alpf-toolbar {
+  background: var(--bg-muted, #1e293b);
+  border-color: var(--border-base, #334155);
+}
+
+.alpf-controls-group {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+
+.alpf-marker-inputs {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 1.25rem;
+}
+
+.alpf-input-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.alpf-label {
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+.alpf-input-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.alpf-input {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.5rem;
+  border: 1px solid var(--border-base, #cbd5e1);
+  background: var(--bg-surface, #fff);
+  color: var(--text-base, #0f172a);
+  font-size: 0.9375rem;
+}
+
+.theme-dark .alpf-input {
+  border-color: var(--border-base, #334155);
+  background: var(--bg-surface, #0f172a);
+  color: var(--text-base, #f8fafc);
+}
+
+.alpf-input:focus {
+  outline: none;
+  border-color: var(--accent-base, #6366f1);
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
+}
+
+.alpf-preset-chips {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.alpf-chip {
+  padding: 0.375rem 0.75rem;
+  border-radius: 9999px;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  border: 1px solid var(--border-base, #cbd5e1);
+  background: var(--bg-surface, #fff);
+  color: var(--text-base, #475569);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.theme-dark .alpf-chip {
+  border-color: var(--border-base, #334155);
+  background: var(--bg-surface, #1e293b);
+  color: var(--text-base, #94a3b8);
+}
+
+.alpf-chip:hover {
+  border-color: var(--accent-base, #6366f1);
+  color: var(--accent-base, #6366f1);
+  transform: translateY(-1px);
+}
+
+.alpf-status-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 0.875rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.5rem;
+  background: var(--bg-muted, #f1f5f9);
+}
+
+.theme-dark .alpf-status-bar {
+  background: var(--bg-muted, #1e293b);
+}
+
+.alpf-particle {
+  position: absolute;
+  pointer-events: none;
+  font-weight: bold;
+  font-size: 0.875rem;
+  color: var(--accent-base, #6366f1);
+  animation: alpf-particle-float 0.8s ease-out forwards;
+}
+
+@keyframes alpf-particle-float {
+  0% {
+    opacity: 1;
+    transform: translate(0, 0) scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: translate(0, -30px) scale(1.3);
+  }
+}

package/src/tool/audioLoopPointFinder/audio-player.ts

@@ -0,0 +1,84 @@
+import {
+  samplesToSeconds,
+  validateLoopPoints,
+  createWavWithLoopMetadata,
+} from './logic';
+import {
+  playBtn,
+  stopBtn,
+  statusText,
+  setElementText,
+  getI18nText,
+} from './dom-utils';
+
+let audioContext: AudioContext | null = null;
+let sourceNode: AudioBufferSourceNode | null = null;
+
+export function initAudioContext() {
+  if (!audioContext) {
+    audioContext = new (window.AudioContext || (window as unknown as { webkitAudioContext: typeof AudioContext }).webkitAudioContext)();
+  }
+  return audioContext;
+}
+
+export function stopLoop() {
+  if (sourceNode) {
+    try {
+      sourceNode.stop();
+      sourceNode.disconnect();
+    } catch {
+      sourceNode = null;
+    }
+    sourceNode = null;
+  }
+  if (playBtn) playBtn.style.display = 'inline-flex';
+  if (stopBtn) stopBtn.style.display = 'none';
+  setElementText(statusText, getI18nText('stopped'));
+}
+
+export function playLoop(
+  audioBuffer: AudioBuffer | null,
+  loopStartSample: number,
+  loopEndSample: number,
+  totalSamples: number
+) {
+  if (!audioBuffer) return;
+  const ctx = initAudioContext();
+  if (!ctx) return;
+
+  const validation = validateLoopPoints(loopStartSample, loopEndSample, totalSamples);
+  if (!validation.isValid) {
+    if (statusText && validation.error) setElementText(statusText, validation.error);
+    return;
+  }
+
+  stopLoop();
+  sourceNode = ctx.createBufferSource();
+  sourceNode.buffer = audioBuffer;
+  sourceNode.loop = true;
+  sourceNode.loopStart = samplesToSeconds(loopStartSample, audioBuffer.sampleRate);
+  sourceNode.loopEnd = samplesToSeconds(loopEndSample, audioBuffer.sampleRate);
+  sourceNode.connect(ctx.destination);
+  sourceNode.start(0, sourceNode.loopStart);
+
+  if (playBtn) playBtn.style.display = 'none';
+  if (stopBtn) stopBtn.style.display = 'inline-flex';
+  setElementText(statusText, getI18nText('looping'));
+}
+
+export function exportWav(
+  audioBuffer: AudioBuffer | null,
+  loopStartSample: number,
+  loopEndSample: number
+) {
+  if (!audioBuffer) return;
+  const wavBytes = createWavWithLoopMetadata(audioBuffer, loopStartSample, loopEndSample);
+  const blob = new Blob([wavBytes.buffer as ArrayBuffer], { type: 'audio/wav' });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = 'looped_track_with_metadata.wav';
+  a.click();
+  URL.revokeObjectURL(url);
+  setElementText(statusText, getI18nText('exported'));
+}

package/src/tool/audioLoopPointFinder/bibliography.astro

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

package/src/tool/audioLoopPointFinder/bibliography.ts

@@ -0,0 +1,16 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliographyEntries: BibliographyEntry[] = [
+  {
+    name: 'W3C Web Audio API Recommendation Specification',
+    url: 'https://www.w3.org/TR/webaudio/',
+  },
+  {
+    name: 'Microsoft Multimedia Programming Interface: RIFF WAVE Format',
+    url: 'https://www.mmsp.ece.mcgill.ca/Documents/AudioFormats/WAVE/WAVE.html',
+  },
+  {
+    name: 'Godot Engine Audio Loop Points Documentation',
+    url: 'https://docs.godotengine.org/en/stable/tutorials/audio/audio_streams.html',
+  },
+];