feat: fullscreen keyboard + new Drum Pad module

Keyboard fullscreen: - Double-tap keyboard widget to enter fullscreen piano mode - 2-octave touch-friendly piano with labeled keys - Active key highlights cyan, close button to exit Drum Pad module (🥁): - New module type with 4x4 colored pad grid - Each pad triggers a unique frequency (C2-D4 range) - Outputs freq + gate signals (same as keyboard) - Double-tap for fullscreen pad mode with large touch targets - Color-coded pads with hit animation Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-21 16:02:22 +01:00
parent 323f30cfb9
commit 816e7270ed
6 changed files with 368 additions and 27 deletions
--- a/src/components/DrumPadWidget.jsx
+++ 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 (
+    <div className="drumpad-fullscreen">
+      <div className="drumpad-fs-header">
+        <span className="drumpad-fs-title">🥁 Drum Pads</span>
+        <button className="drumpad-fs-close" onClick={onClose}>✕</button>
+      </div>
+      <div className="drumpad-fs-grid">
+        {PAD_NOTES.map((pad, i) => (
+          <div
+            key={i}
+            className="drumpad-fs-pad"
+            style={{
+              background: activePad === i ? pad.color : `${pad.color}15`,
+              borderColor: activePad === i ? pad.color : `${pad.color}40`,
+              color: activePad === i ? '#000' : pad.color,
+            }}
+            onPointerDown={() => hitPad(pad, i)}
+          >
+            {pad.label}
+            <span className="pad-label">{i + 1}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+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 (
+    <>
+      <div onPointerDown={handleDoubleTap}>
+        <div className="drumpad-grid">
+          {PAD_NOTES.map((pad, i) => (
+            <div
+              key={i}
+              className={`drumpad-pad ${activePad === i ? 'active' : ''}`}
+              style={{
+                background: activePad === i ? pad.color : `${pad.color}15`,
+                borderColor: `${pad.color}60`,
+              }}
+              onPointerDown={(e) => { e.stopPropagation(); hitPad(pad, i); }}
+            >
+              {pad.label}
+            </div>
+          ))}
+        </div>
+        <div style={{ fontSize: 9, color: 'var(--text2)', textAlign: 'center', marginTop: 2 }}>
+          {isMobile ? 'Doble-tap: pantalla completa' : 'Tap pads to trigger'}
+        </div>
+      </div>
+
+      {fullscreen && (
+        <FullscreenDrumPad moduleId={moduleId} onClose={() => setFullscreen(false)} />
+      )}
+    </>
+  );
+}
--- 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 (
+    <div className="keyboard-fullscreen">
+      <div className="keyboard-fs-header">
+        <span className="keyboard-fs-title">🎹 Piano — Oct {octave}</span>
+        <button className="keyboard-fs-close" onClick={onClose}>✕</button>
+      </div>
+      <div className="keyboard-fs-keys">
+        {/* White keys */}
+        {whites.map((k, i) => (
+          <div
+            key={`w${i}`}
+            className="keyboard-fs-white"
+            style={{ width: `${keyW}%` }}
+            onPointerDown={() => handleTouch(k.note, true)}
+            onPointerUp={() => handleTouch(k.note, false)}
+            onPointerLeave={() => handleTouch(k.note, false)}
+          >
+            <span className="keyboard-fs-note-label">
+              {NOTE_NAMES[k.note % 12]}
+            </span>
+          </div>
+        ))}
+        {/* Black keys */}
+        {blackPositions.map((bp, i) => (
+          <div
+            key={`b${i}`}
+            className="keyboard-fs-black"
+            style={{ left: `${(bp.whiteIdx + 0.65) * keyW}%`, width: `${keyW * 0.7}%` }}
+            onPointerDown={() => handleTouch(bp.note, true)}
+            onPointerUp={() => handleTouch(bp.note, false)}
+            onPointerLeave={() => handleTouch(bp.note, false)}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
 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 (
-    <div style={{ padding: '2px 0' }}>
-      <svg viewBox="0 0 140 30" style={{ width: '100%', height: 30 }}>
-        {whites.map((note, i) => (
-          <rect key={`w${i}`} x={i * 20} y={0} width={19} height={28}
-            rx={1} fill="#222" stroke="#444" strokeWidth={0.5}
-            style={{ cursor: 'pointer' }}
-            onPointerDown={() => playNote(note)}
-            onPointerUp={stopNote}
-          />
-        ))}
-        {blacks.filter(n => n >= 0).map((note, i) => {
-          const pos = [1, 2, 4, 5, 6][i];
-          return (
-            <rect key={`b${i}`} x={pos * 20 - 6} y={0} width={12} height={18}
-              rx={1} fill="#111" stroke="#333" strokeWidth={0.5}
+    <>
+      <div style={{ padding: '2px 0' }} onPointerDown={handleDoubleTap}>
+        <svg viewBox="0 0 140 30" style={{ width: '100%', height: 30 }}>
+          {whites.map((note, i) => (
+            <rect key={`w${i}`} x={i * 20} y={0} width={19} height={28}
+              rx={1} fill="#222" stroke="#444" strokeWidth={0.5}
              style={{ cursor: 'pointer' }}
              onPointerDown={() => playNote(note)}
              onPointerUp={stopNote}
            />
-          );
-        })}
-      </svg>
-      <div style={{ fontSize: 9, color: 'var(--text2)', textAlign: 'center', marginTop: 2 }}>
-        Z-M / Q-I keys · Oct {octave}
+          ))}
+          {blacks.filter(n => n >= 0).map((note, i) => {
+            const pos = [1, 2, 4, 5, 6][i];
+            return (
+              <rect key={`b${i}`} x={pos * 20 - 6} y={0} width={12} height={18}
+                rx={1} fill="#111" stroke="#333" strokeWidth={0.5}
+                style={{ cursor: 'pointer' }}
+                onPointerDown={() => playNote(note)}
+                onPointerUp={stopNote}
+              />
+            );
+          })}
+        </svg>
+        <div style={{ fontSize: 9, color: 'var(--text2)', textAlign: 'center', marginTop: 2 }}>
+          {isMobile ? 'Doble-tap: pantalla completa' : 'Z-M / Q-I keys'} · Oct {octave}
+        </div>
      </div>
-    </div>
+
+      {fullscreen && (
+        <FullscreenPiano
+          moduleId={moduleId}
+          octave={octave}
+          onClose={() => setFullscreen(false)}
+        />
+      )}
+    </>
  );
 }
--- a/src/components/ModuleNode.jsx
+++ b/src/components/ModuleNode.jsx
@@ -5,6 +5,7 @@ import { updateParam } from '../engine/audioEngine.js';
 import Knob from './Knob.jsx';
 import ScopeDisplay from './ScopeDisplay.jsx';
 import KeyboardWidget from './KeyboardWidget.jsx';
+import DrumPadWidget from './DrumPadWidget.jsx';
 import SequencerWidget from './SequencerWidget.jsx';
 import PianoRollWidget from './PianoRollWidget.jsx';

@@ -248,6 +249,9 @@ export default function ModuleNode({ mod, zoom, onStartConnect, onPortPosition }
        {/* Keyboard widget */}
        {mod.type === 'keyboard' && <KeyboardWidget moduleId={mod.id} />}

+        {/* Drum Pad widget */}
+        {mod.type === 'drumpad' && <DrumPadWidget moduleId={mod.id} />}
+
        {/* Sequencer widget */}
        {mod.type === 'sequencer' && <SequencerWidget moduleId={mod.id} />}

--- a/src/engine/audioEngine.js
+++ b/src/engine/audioEngine.js
@@ -170,7 +170,8 @@ function createNode(mod) {
        },
      };
    }
-    case 'keyboard': {
+    case 'keyboard':
+    case 'drumpad': {
      const freqSig = new Tone.Signal(440);
      const gateSig = new Tone.Signal(0);
      return {
@@ -251,7 +252,7 @@ export function connectWire(conn) {
  // set the oscillator frequency directly when notes are played.
  const fromMod = state.modules.find(m => m.id === conn.from.moduleId);
  const toMod = state.modules.find(m => m.id === conn.to.moduleId);
-  if (fromMod && ['keyboard', 'sequencer', 'pianoroll'].includes(fromMod.type) &&
+  if (fromMod && ['keyboard', 'drumpad', 'sequencer', 'pianoroll'].includes(fromMod.type) &&
      conn.from.port === 'freq' && toMod?.type === 'oscillator' && conn.to.port === 'freq') {
    return; // handled imperatively in triggerKeyboard / setSequencerSignals
  }
@@ -354,6 +355,7 @@ export function updateParam(moduleId, paramName, value) {
      if (paramName === 'volume') entry.node.gain.value = Tone.dbToGain(value);
      break;
    case 'keyboard':
+    case 'drumpad':
    case 'sequencer':
    case 'pianoroll':
      // All params stored in state, managed by widgets
--- a/src/engine/moduleRegistry.js
+++ b/src/engine/moduleRegistry.js
@@ -258,6 +258,20 @@ defineModule('keyboard', {
  },
 });

+// ==================== DRUM PAD ====================
+
+defineModule('drumpad', {
+  name: 'Drum Pad',
+  icon: '🥁',
+  category: 'Source',
+  inputs: [],
+  outputs: [
+    { name: 'freq', type: PORT_TYPE.AUDIO, label: 'Freq' },
+    { name: 'gate', type: PORT_TYPE.TRIGGER, label: 'Gate' },
+  ],
+  params: {},
+});
+
 // ==================== SEQUENCER ====================

 defineModule('sequencer', {
--- a/src/index.css
+++ b/src/index.css
@@ -786,6 +786,99 @@ html, body, #root {
 .admin-star-btn.zero { color: var(--red); }
 .admin-star-btn.zero:hover { border-color: var(--red); color: var(--red); }

+/* ===== Fullscreen Keyboard ===== */
+.keyboard-fullscreen {
+  position: fixed; inset: 0; z-index: 500;
+  background: #050510; display: flex; flex-direction: column;
+  animation: fadeIn 0.2s ease-out;
+}
+@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
+
+.keyboard-fs-header {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 12px 16px; background: var(--panel); border-bottom: 1px solid var(--border);
+}
+.keyboard-fs-title { font-size: 14px; font-weight: 600; color: var(--text); }
+.keyboard-fs-close {
+  width: 36px; height: 36px; border-radius: 8px;
+  background: var(--surface); border: 1px solid var(--border);
+  color: var(--text); font-size: 16px; cursor: pointer;
+  display: flex; align-items: center; justify-content: center;
+}
+
+.keyboard-fs-keys {
+  flex: 1; position: relative; display: flex;
+  padding: 0; touch-action: none; user-select: none;
+}
+.keyboard-fs-white {
+  flex-shrink: 0; height: 100%; background: #1a1a2e;
+  border-right: 1px solid #252545; position: relative;
+  display: flex; align-items: flex-end; justify-content: center;
+  padding-bottom: 16px; cursor: pointer; transition: background 0.05s;
+}
+.keyboard-fs-white:active { background: var(--accent); }
+.keyboard-fs-note-label {
+  font-size: 10px; color: var(--text2); font-family: 'JetBrains Mono', monospace;
+  pointer-events: none;
+}
+.keyboard-fs-white:active .keyboard-fs-note-label { color: #000; }
+
+.keyboard-fs-black {
+  position: absolute; top: 0; height: 55%;
+  background: #0a0a18; border: 1px solid #333;
+  border-top: none; border-radius: 0 0 4px 4px;
+  z-index: 2; cursor: pointer; transition: background 0.05s;
+}
+.keyboard-fs-black:active { background: var(--accent); }
+
+/* ===== Drum Pad ===== */
+.drumpad-grid {
+  display: grid; grid-template-columns: repeat(4, 1fr);
+  gap: 3px; padding: 2px 0;
+}
+.drumpad-pad {
+  aspect-ratio: 1; border-radius: 4px;
+  display: flex; align-items: center; justify-content: center;
+  cursor: pointer; transition: all 0.05s; border: 1px solid var(--border);
+  font-size: 8px; font-weight: 600; color: var(--text2);
+  font-family: 'JetBrains Mono', monospace; user-select: none;
+  touch-action: none;
+}
+.drumpad-pad:active { transform: scale(0.92); }
+.drumpad-pad.active { border-color: var(--accent); box-shadow: 0 0 8px rgba(0,229,255,0.3); }
+
+.drumpad-fullscreen {
+  position: fixed; inset: 0; z-index: 500;
+  background: #050510; display: flex; flex-direction: column;
+  animation: fadeIn 0.2s ease-out;
+}
+.drumpad-fs-header {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 12px 16px; background: var(--panel); border-bottom: 1px solid var(--border);
+}
+.drumpad-fs-title { font-size: 14px; font-weight: 600; color: var(--text); }
+.drumpad-fs-close {
+  width: 36px; height: 36px; border-radius: 8px;
+  background: var(--surface); border: 1px solid var(--border);
+  color: var(--text); font-size: 16px; cursor: pointer;
+  display: flex; align-items: center; justify-content: center;
+}
+.drumpad-fs-grid {
+  flex: 1; display: grid; grid-template-columns: repeat(4, 1fr);
+  gap: 8px; padding: 16px; touch-action: none;
+}
+.drumpad-fs-pad {
+  border-radius: 8px; display: flex; flex-direction: column;
+  align-items: center; justify-content: center; gap: 4px;
+  cursor: pointer; transition: all 0.05s;
+  border: 2px solid var(--border); font-size: 12px;
+  font-weight: 600; color: var(--text2);
+  font-family: 'JetBrains Mono', monospace;
+  user-select: none; touch-action: none;
+}
+.drumpad-fs-pad:active { transform: scale(0.95); border-color: var(--accent); }
+.drumpad-fs-pad .pad-label { font-size: 10px; color: var(--text2); }
+
 /* ============================================
   MOBILE RESPONSIVE — max-width: 768px
   ============================================ */