diff --git a/src/components/DrumPadWidget.jsx b/src/components/DrumPadWidget.jsx
new file mode 100644
index 0000000..5098b67
--- /dev/null
+++ b/src/components/DrumPadWidget.jsx
@@ -0,0 +1,122 @@
+import React, { useCallback, useRef, useState } from 'react';
+import { triggerKeyboard } from '../engine/audioEngine.js';
+import { state } from '../engine/state.js';
+import { useIsMobile } from '../hooks/useIsMobile.js';
+
+// 4x4 pad layout โ each pad maps to a MIDI note
+const PAD_NOTES = [
+ { note: 36, label: 'C2', color: '#ff4466' },
+ { note: 38, label: 'D2', color: '#ff6644' },
+ { note: 40, label: 'E2', color: '#ffcc00' },
+ { note: 42, label: 'F#2', color: '#44ff88' },
+ { note: 43, label: 'G2', color: '#00e5ff' },
+ { note: 45, label: 'A2', color: '#aa55ff' },
+ { note: 47, label: 'B2', color: '#ff4466' },
+ { note: 48, label: 'C3', color: '#ff6644' },
+ { note: 50, label: 'D3', color: '#ffcc00' },
+ { note: 52, label: 'E3', color: '#44ff88' },
+ { note: 53, label: 'F3', color: '#00e5ff' },
+ { note: 55, label: 'G3', color: '#aa55ff' },
+ { note: 57, label: 'A3', color: '#ff4466' },
+ { note: 59, label: 'B3', color: '#ff6644' },
+ { note: 60, label: 'C4', color: '#ffcc00' },
+ { note: 62, label: 'D4', color: '#44ff88' },
+];
+
+function midiToFreq(midi) {
+ return 440 * Math.pow(2, (midi - 69) / 12);
+}
+
+function FullscreenDrumPad({ moduleId, onClose }) {
+ const [activePad, setActivePad] = useState(-1);
+
+ const hitPad = useCallback((pad, idx) => {
+ triggerKeyboard(moduleId, midiToFreq(pad.note), true);
+ setActivePad(idx);
+ setTimeout(() => {
+ triggerKeyboard(moduleId, midiToFreq(pad.note), false);
+ setActivePad(-1);
+ }, 150);
+ }, [moduleId]);
+
+ return (
+
+
+ ๐ฅ Drum Pads
+
+
+
+ {PAD_NOTES.map((pad, i) => (
+
hitPad(pad, i)}
+ >
+ {pad.label}
+ {i + 1}
+
+ ))}
+
+
+ );
+}
+
+export default function DrumPadWidget({ moduleId }) {
+ const isMobile = useIsMobile();
+ const [fullscreen, setFullscreen] = useState(false);
+ const [activePad, setActivePad] = useState(-1);
+ const lastTap = useRef(0);
+
+ const hitPad = useCallback((pad, idx) => {
+ triggerKeyboard(moduleId, midiToFreq(pad.note), true);
+ setActivePad(idx);
+ setTimeout(() => {
+ triggerKeyboard(moduleId, midiToFreq(pad.note), false);
+ setActivePad(-1);
+ }, 150);
+ }, [moduleId]);
+
+ const handleDoubleTap = useCallback((e) => {
+ const now = Date.now();
+ if (now - lastTap.current < 350) {
+ e.preventDefault();
+ e.stopPropagation();
+ setFullscreen(true);
+ }
+ lastTap.current = now;
+ }, []);
+
+ return (
+ <>
+
+
+ {PAD_NOTES.map((pad, i) => (
+
{ e.stopPropagation(); hitPad(pad, i); }}
+ >
+ {pad.label}
+
+ ))}
+
+
+ {isMobile ? 'Doble-tap: pantalla completa' : 'Tap pads to trigger'}
+
+
+
+ {fullscreen && (
+ setFullscreen(false)} />
+ )}
+ >
+ );
+}
diff --git a/src/components/KeyboardWidget.jsx b/src/components/KeyboardWidget.jsx
index 6afc1ba..ac98edd 100644
--- a/src/components/KeyboardWidget.jsx
+++ b/src/components/KeyboardWidget.jsx
@@ -1,10 +1,10 @@
-import React, { useCallback, useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
import { triggerKeyboard } from '../engine/audioEngine.js';
import { state } from '../engine/state.js';
+import { useIsMobile } from '../hooks/useIsMobile.js';
const NOTE_NAMES = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'];
-// Computer keyboard to semitone offset mapping (2 octaves)
const KEY_MAP = {
'z': 0, 's': 1, 'x': 2, 'd': 3, 'c': 4, 'v': 5, 'g': 6,
'b': 7, 'h': 8, 'n': 9, 'j': 10, 'm': 11, ',': 12,
@@ -16,10 +16,97 @@ function midiToFreq(midi) {
return 440 * Math.pow(2, (midi - 69) / 12);
}
+// Fullscreen piano overlay for mobile
+function FullscreenPiano({ moduleId, octave, onClose }) {
+ const activeRef = useRef(new Set());
+
+ const playNote = useCallback((semitone) => {
+ const midi = (octave + 1) * 12 + semitone;
+ triggerKeyboard(moduleId, midiToFreq(midi), true);
+ }, [moduleId, octave]);
+
+ const stopNote = useCallback(() => {
+ triggerKeyboard(moduleId, 440, false);
+ }, [moduleId]);
+
+ const handleTouch = useCallback((semitone, isDown) => {
+ if (isDown) {
+ activeRef.current.add(semitone);
+ playNote(semitone);
+ } else {
+ activeRef.current.delete(semitone);
+ if (activeRef.current.size === 0) stopNote();
+ }
+ }, [playNote, stopNote]);
+
+ // 2 octaves of keys
+ const whites = [];
+ const blacks = [];
+ const whiteNotes = [0, 2, 4, 5, 7, 9, 11];
+ const blackNotes = [1, 3, -1, 6, 8, 10, -1];
+
+ for (let oct = 0; oct < 2; oct++) {
+ const offset = oct * 12;
+ whiteNotes.forEach((note, i) => {
+ whites.push({ note: note + offset, idx: whites.length });
+ });
+ }
+
+ const blackPositions = [
+ { note: 1, whiteIdx: 0 }, { note: 3, whiteIdx: 1 },
+ { note: 6, whiteIdx: 3 }, { note: 8, whiteIdx: 4 }, { note: 10, whiteIdx: 5 },
+ { note: 13, whiteIdx: 7 }, { note: 15, whiteIdx: 8 },
+ { note: 18, whiteIdx: 10 }, { note: 20, whiteIdx: 11 }, { note: 22, whiteIdx: 12 },
+ ];
+
+ const totalWhites = whites.length;
+ const keyW = 100 / totalWhites;
+
+ return (
+
+
+ ๐น Piano โ Oct {octave}
+
+
+
+ {/* White keys */}
+ {whites.map((k, i) => (
+
handleTouch(k.note, true)}
+ onPointerUp={() => handleTouch(k.note, false)}
+ onPointerLeave={() => handleTouch(k.note, false)}
+ >
+
+ {NOTE_NAMES[k.note % 12]}
+
+
+ ))}
+ {/* Black keys */}
+ {blackPositions.map((bp, i) => (
+
handleTouch(bp.note, true)}
+ onPointerUp={() => handleTouch(bp.note, false)}
+ onPointerLeave={() => handleTouch(bp.note, false)}
+ />
+ ))}
+
+
+ );
+}
+
export default function KeyboardWidget({ moduleId }) {
const mod = state.modules.find(m => m.id === moduleId);
const octave = mod?.params?.octave ?? 4;
const activeKeys = useRef(new Set());
+ const isMobile = useIsMobile();
+ const [fullscreen, setFullscreen] = useState(false);
+ const lastTap = useRef(0);
const playNote = useCallback((semitone) => {
const midi = (octave + 1) * 12 + semitone;
@@ -47,7 +134,6 @@ export default function KeyboardWidget({ moduleId }) {
if (activeKeys.current.size === 0) stopNote();
}
};
-
window.addEventListener('keydown', handleDown);
window.addEventListener('keyup', handleUp);
return () => {
@@ -56,36 +142,56 @@ export default function KeyboardWidget({ moduleId }) {
};
}, [playNote, stopNote]);
- // Draw mini keyboard (1 octave)
+ const handleDoubleTap = useCallback((e) => {
+ const now = Date.now();
+ if (now - lastTap.current < 350) {
+ e.preventDefault();
+ e.stopPropagation();
+ setFullscreen(true);
+ }
+ lastTap.current = now;
+ }, []);
+
+ // Mini keyboard (1 octave)
const whites = [0, 2, 4, 5, 7, 9, 11];
const blacks = [1, 3, -1, 6, 8, 10];
return (
-
-