diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index e7392c7..ca1c637 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -7,7 +7,7 @@ on: branches: [main] jobs: - lint-and-build: + ci: runs-on: ubuntu-latest steps: diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 0000000..9101675 --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,27 @@ +# Contributing + +Thanks for your interest in contributing to Loop Machine! + +## How to Contribute + +- **Bug reports**: [Open an issue](https://github.com/brsbl/loop-machine/issues/new) with steps to reproduce +- **Feature requests**: [Open an issue](https://github.com/brsbl/loop-machine/issues/new) describing the feature and use case + +## Development Setup + +```bash +git clone https://github.com/brsbl/loop-machine.git +cd loop-machine +npm install +npm run dev +``` + +## Before Submitting a PR + +```bash +npm run lint +npm test +npm run build +``` + +All checks must pass before merging. diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..5ca4825 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2025 brsbl + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md index 21aa0e4..be25d18 100644 --- a/README.md +++ b/README.md @@ -69,6 +69,10 @@ loop-machine/ - CSS Grid for layout - No external dependencies +## Contributing + +See [CONTRIBUTING.md](CONTRIBUTING.md) for guidelines. For bugs or feature requests, please [open an issue](https://github.com/brsbl/loop-machine/issues/new). + ## License MIT diff --git a/package-lock.json b/package-lock.json index dcd241b..5511ab9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27,6 +27,7 @@ "@types/react": "^18.2.0", "@types/react-dom": "^18.2.0", "@vitejs/plugin-react": "^4.2.0", + "agentation": "^1.3.2", "eslint": "^9.39.1", "eslint-plugin-react": "^7.37.5", "eslint-plugin-react-hooks": "^7.0.1", @@ -3594,6 +3595,17 @@ "node": ">= 14" } }, + "node_modules/agentation": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/agentation/-/agentation-1.3.2.tgz", + "integrity": "sha512-9yZ/3hTcNePr1asnMyipxAZU8nFdBibNfw7wTdLUd3ULTTQCp9QZX7Y5PTMzkYWX4fhqEI2LOjMCb3vkmZga9w==", + "dev": true, + "license": "PolyForm-Shield-1.0.0", + "peerDependencies": { + "react": ">=18.0.0", + "react-dom": ">=18.0.0" + } + }, "node_modules/ajv": { "version": "6.12.6", "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", diff --git a/package.json b/package.json index 2b217f7..6debd44 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,5 @@ { "name": "drum-machine", - "private": true, "version": "1.0.0", "type": "module", "scripts": { @@ -31,6 +30,7 @@ "@types/react": "^18.2.0", "@types/react-dom": "^18.2.0", "@vitejs/plugin-react": "^4.2.0", + "agentation": "^1.3.2", "eslint": "^9.39.1", "eslint-plugin-react": "^7.37.5", "eslint-plugin-react-hooks": "^7.0.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 74547be..81aedde 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -60,6 +60,9 @@ importers: '@vitejs/plugin-react': specifier: ^4.2.0 version: 4.7.0(vite@5.4.21(@types/node@24.10.2)(lightningcss@1.30.2)) + agentation: + specifier: ^1.3.2 + version: 1.3.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) eslint: specifier: ^9.39.1 version: 9.39.1(jiti@2.6.1) @@ -1406,6 +1409,12 @@ packages: resolution: {integrity: sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==} engines: {node: '>= 14'} + agentation@1.3.2: + resolution: {integrity: sha512-9yZ/3hTcNePr1asnMyipxAZU8nFdBibNfw7wTdLUd3ULTTQCp9QZX7Y5PTMzkYWX4fhqEI2LOjMCb3vkmZga9w==} + peerDependencies: + react: '>=18.0.0' + react-dom: '>=18.0.0' + ajv@6.12.6: resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==} @@ -4068,6 +4077,11 @@ snapshots: agent-base@7.1.4: {} + agentation@1.3.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + dependencies: + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + ajv@6.12.6: dependencies: fast-deep-equal: 3.1.3 diff --git a/public/README.md b/public/README.md new file mode 100644 index 0000000..5368fa9 --- /dev/null +++ b/public/README.md @@ -0,0 +1,6 @@ +# public/ + +Static assets served directly. + +- `808 Samples/` - Drum machine audio samples +- `fonts/` - Custom fonts diff --git a/src/App.jsx b/src/App.jsx index 4071656..14d0cdb 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,8 +1,14 @@ +import { Agentation } from 'agentation' import DrumMachine from './components/DrumMachine' import { DEFAULT_INSTRUMENTS } from './config/instruments' function App() { - return + return ( + <> + + + + ) } export default App diff --git a/src/README.md b/src/README.md new file mode 100644 index 0000000..78da0f4 --- /dev/null +++ b/src/README.md @@ -0,0 +1,10 @@ +# src/ + +Application source code. + +- `components/` - React components +- `hooks/` - Custom React hooks for audio and sequencer logic +- `config/` - Instrument and keyboard configuration +- `utils/` - URL state persistence utilities +- `lib/` - Shared utilities (cn helper) +- `__tests__/` - Test files diff --git a/src/components/Key.jsx b/src/components/Key.jsx index c139705..376ff49 100644 --- a/src/components/Key.jsx +++ b/src/components/Key.jsx @@ -17,13 +17,21 @@ function Key({ note, type, isHeld, isPlaying, keyHint, onToggle }) { isPlaying ? 'playing' : '', ].filter(Boolean).join(' ') + // Format note name (e.g., "C#3" -> "C#") + const noteName = note.replace(/\d+$/, '') + return (
- {keyHint && {keyHint}} + {noteName} + {keyHint && ( + + {keyHint} + + )}
) } diff --git a/src/components/README.md b/src/components/README.md new file mode 100644 index 0000000..a5c46de --- /dev/null +++ b/src/components/README.md @@ -0,0 +1,12 @@ +# components/ + +React components for the loop machine UI. + +- `Sequencer.jsx` - Main sequencer grid with tracks and transport +- `DrumMachine.jsx` - Drum machine container +- `Track.jsx` / `TrackControls.jsx` - Individual track row and controls +- `TransportControls.jsx` - Play/stop, BPM, volume controls +- `Keyboard.jsx` / `Key.jsx` - Synth keyboard +- `KeyboardControls.jsx` - Synth parameters (filter, envelope, effects) +- `AudioVisualizer.jsx` - Waveform/frequency display +- `ui/` - Reusable UI primitives (Button, Knob, Fader) diff --git a/src/components/Sequencer.jsx b/src/components/Sequencer.jsx index 2ff9b85..99c059d 100644 --- a/src/components/Sequencer.jsx +++ b/src/components/Sequencer.jsx @@ -2,7 +2,6 @@ import Track from './Track' import ArpTrack from './ArpTrack' import TrackControls from './TrackControls' import TransportControls from './TransportControls' -import AudioVisualizer from './AudioVisualizer' function Sequencer({ instruments, @@ -48,8 +47,19 @@ function Sequencer({ return (
- {/* Drums section - step numbers + 3 drum rows + knobs */} + {/* Drums section - labels + step numbers + 3 drum rows + knobs */}
+ {/* Instrument labels column */} +
+
{/* Spacer for step numbers row */} + {instruments.map(instrument => ( +
+ {instrument.name} +
+ ))} +
+ + {/* Drums grid - step numbers + pads */}
{/* Step numbers row */}
@@ -65,7 +75,7 @@ function Sequencer({ ))}
- {/* Instrument steps */} + {/* Instrument pads only */} {instruments.map(instrument => (
- {/* Synth controls row - same 3-column layout as synth row */} + {/* Synth controls row */}
- {/* Left visualizer */} -
- -
- - {/* Center - controls aligned with synth-grid-container */} -
-
+
{/* Direction control */}
DIRECTION @@ -233,12 +236,6 @@ function Sequencer({
-
- - {/* Right visualizer */} -
- -
)} diff --git a/src/components/Track.jsx b/src/components/Track.jsx index 41985c2..046adc0 100644 --- a/src/components/Track.jsx +++ b/src/components/Track.jsx @@ -19,7 +19,7 @@ const Track = memo(function Track({ return (
- {instrument.name} + {showLabel && {instrument.name}}
{padGroups.map((group, groupIndex) => (
) diff --git a/src/components/TransportControls.jsx b/src/components/TransportControls.jsx index a55612b..a832b7a 100644 --- a/src/components/TransportControls.jsx +++ b/src/components/TransportControls.jsx @@ -29,22 +29,38 @@ function TransportControls({ bpm, isPlaying, isLoading, onPlayStop, onReset, onB } } + const increment = () => { + const newValue = Math.min(200, bpm + 1) + onBpmChange(newValue) + } + + const decrement = () => { + const newValue = Math.max(60, bpm - 1) + onBpmChange(newValue) + } + return (
TEMPO -
- +
+
+ +
+
+ + +
diff --git a/src/components/ui/Knob.jsx b/src/components/ui/Knob.jsx index 57551b0..12dbb76 100644 --- a/src/components/ui/Knob.jsx +++ b/src/components/ui/Knob.jsx @@ -17,10 +17,17 @@ const Knob = memo(function Knob({ const range = max - min const normalized = (value - min) / range + // Render at 2x for crisp display on retina screens + const scale = 2 + const viewSize = size * scale + const strokeWidth = 18 + // Arc path calculation for the value indicator - const radius = (size - 8) / 2 - const centerX = size / 2 - const centerY = size / 2 + // Outer stroke: radius is inner edge, so add half stroke width + const innerRadius = (viewSize - 32) / 2 + const radius = innerRadius + strokeWidth / 2 + const centerX = viewSize / 2 + const centerY = viewSize / 2 // Calculate arc angles to match background track rotation (135 degrees) // Background track starts at 135° (bottom-left) and spans 270° to 45° (bottom-right) @@ -101,7 +108,19 @@ const Knob = memo(function Knob({ aria-label={label} tabIndex={0} > - + + {/* Clip path for outer stroke effect */} + + + + + + {/* Background track */} {/* Value arc */} @@ -121,8 +141,9 @@ const Knob = memo(function Knob({ d={`M ${startX} ${startY} A ${radius} ${radius} 0 ${largeArc} 1 ${endX} ${endY}`} fill="none" stroke="#f5a623" - strokeWidth="4" + strokeWidth={strokeWidth} strokeLinecap="round" + clipPath={`url(#knob-clip-${size})`} /> )} @@ -130,7 +151,7 @@ const Knob = memo(function Knob({ @@ -138,10 +159,10 @@ const Knob = memo(function Knob({ diff --git a/src/components/ui/README.md b/src/components/ui/README.md new file mode 100644 index 0000000..834a17a --- /dev/null +++ b/src/components/ui/README.md @@ -0,0 +1,8 @@ +# ui/ + +Reusable UI components. + +- `Button.jsx` - Button with variants +- `Knob.jsx` - Rotary knob control +- `Fader.jsx` - Vertical/horizontal slider +- `card.jsx` - Card container diff --git a/src/config/README.md b/src/config/README.md new file mode 100644 index 0000000..614f21d --- /dev/null +++ b/src/config/README.md @@ -0,0 +1,6 @@ +# config/ + +Configuration files. + +- `instruments.js` - Drum kit definitions and sample paths +- `keyboard.js` - Keyboard layout and note mappings diff --git a/src/hooks/README.md b/src/hooks/README.md new file mode 100644 index 0000000..9eb67c6 --- /dev/null +++ b/src/hooks/README.md @@ -0,0 +1,8 @@ +# hooks/ + +Custom React hooks for audio functionality. + +- `useAudioEngine.js` - Web Audio API setup, sample loading, playback +- `useSequencer.js` - Step sequencer state and scheduling +- `useSynthEngine.js` - Synthesizer with oscillators, filter, effects +- `useArpeggiator.js` - Arpeggiator patterns and timing diff --git a/src/hooks/useSynthEngine.js b/src/hooks/useSynthEngine.js index 5470b38..68c3360 100644 --- a/src/hooks/useSynthEngine.js +++ b/src/hooks/useSynthEngine.js @@ -85,6 +85,19 @@ export function useSynthEngine(sharedContext = null, sharedMasterGain = null) { release: 0.2, // 200ms } + // Get filter cutoff based on waveform type + const getFilterCutoff = (waveformType) => { + switch (waveformType) { + case 'sawtooth': + case 'square': + return 2500 + case 'triangle': + case 'sine': + default: + return 8000 + } + } + // Play a note by frequency const playNote = useCallback( (noteId, frequency, time) => { @@ -103,6 +116,12 @@ export function useSynthEngine(sharedContext = null, sharedMasterGain = null) { oscillator.type = waveformRef.current oscillator.frequency.setValueAtTime(frequency, now) + // Create low-pass filter to tame harsh high frequencies + const filter = ctx.createBiquadFilter() + filter.type = 'lowpass' + filter.frequency.setValueAtTime(getFilterCutoff(waveformRef.current), now) + filter.Q.setValueAtTime(0.7, now) + // Create gain for envelope const gainNode = ctx.createGain() gainNode.gain.setValueAtTime(0, now) @@ -115,15 +134,16 @@ export function useSynthEngine(sharedContext = null, sharedMasterGain = null) { now + envelope.attack + envelope.decay ) - // Connect: oscillator -> gainNode -> masterGain - oscillator.connect(gainNode) + // Connect: oscillator -> filter -> gainNode -> masterGain + oscillator.connect(filter) + filter.connect(gainNode) gainNode.connect(masterGainRef.current) // Start oscillator oscillator.start(now) // Store reference for stopping later - activeNotesRef.current.set(noteId, { oscillator, gainNode }) + activeNotesRef.current.set(noteId, { oscillator, gainNode, filter }) }, [ensureContext] ) @@ -161,9 +181,13 @@ export function useSynthEngine(sharedContext = null, sharedMasterGain = null) { // Set waveform type const setWaveform = useCallback((type) => { setWaveformState(type) - // Update any currently playing oscillators - for (const { oscillator } of activeNotesRef.current.values()) { + // Update any currently playing oscillators and their filters + const ctx = audioContextRef.current + for (const { oscillator, filter } of activeNotesRef.current.values()) { oscillator.type = type + if (filter && ctx) { + filter.frequency.setValueAtTime(getFilterCutoff(type), ctx.currentTime) + } } }, []) diff --git a/src/index.css b/src/index.css index 3729cf8..97d55a9 100644 --- a/src/index.css +++ b/src/index.css @@ -1,6 +1,14 @@ @import "tailwindcss"; @import "tw-animate-css"; +/* 7-segment LED display font */ +@font-face { + font-family: 'DSEG7'; + src: url('/fonts/DSEG7Classic-Regular.woff2') format('woff2'); + font-weight: normal; + font-style: normal; +} + @custom-variant dark (&:is(.dark *)); /* Reset default styles for consistency */ @@ -12,7 +20,7 @@ body { font-family: "Helvetica Neue", Arial, sans-serif; - background-color: #8a9a9c; + background-color: #d4d0c8; display: flex; justify-content: center; align-items: flex-start; @@ -93,22 +101,77 @@ body { letter-spacing: 1.5px; } +.tempo-input-group { + display: flex; + align-items: stretch; + gap: 4px; +} + +.tempo-btn-stack { + display: flex; + flex-direction: column; + background: linear-gradient(180deg, #4a4a4a 0%, #2a2a2a 100%); + border-radius: 4px; + border: 1px solid #1a1a1a; + overflow: hidden; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.1), + 0 2px 4px rgba(0, 0, 0, 0.3); +} + +.tempo-btn { + flex: 1; + width: 28px; + font-size: 12px; + font-weight: 700; + border: none; + border-radius: 0; + cursor: pointer; + background: transparent; + color: #999; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.1s ease; + padding: 0; + line-height: 1; +} + +.tempo-btn:first-child { + border-bottom: 1px solid rgba(0, 0, 0, 0.3); +} + +.tempo-btn:hover { + background: rgba(255, 255, 255, 0.1); + color: #fff; +} + +.tempo-btn:active { + background: rgba(0, 0, 0, 0.2); + color: #f5a623; +} + .tempo-display { - background: #c5c8b8; - padding: 8px 14px; + background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%); + padding: 12px 16px; border-radius: 4px; - border: 3px solid #1a1a1a; + border: 2px solid #0a0a0a; box-shadow: - inset 0 2px 4px rgba(0, 0, 0, 0.2), - 0 1px 0 rgba(255, 255, 255, 0.1); + inset 0 2px 8px rgba(0, 0, 0, 0.8), + inset 0 0 20px rgba(0, 0, 0, 0.5), + 0 1px 0 rgba(255, 255, 255, 0.05); + display: flex; + align-items: center; + justify-content: center; } #tempo-value { - font-family: "LCD", "Digital-7", "Courier New", monospace; + font-family: 'DSEG7', "Courier New", monospace; font-size: 2em; - color: #1a1a1a; + color: #e63939; + text-shadow: 0 0 4px rgba(230, 57, 57, 0.5); letter-spacing: 2px; - font-weight: bold; + font-weight: normal; background: transparent; border: none; width: 3.5ch; @@ -124,8 +187,8 @@ body { } #tempo-value:focus { - background: rgba(0, 0, 0, 0.05); - border-radius: 2px; + color: #ff4d4d; + text-shadow: 0 0 6px rgba(255, 77, 77, 0.6); } /* --- SEQUENCER SECTION --- */ @@ -138,7 +201,8 @@ body { /* --- DRUMS SECTION --- */ .drums-row { display: flex; - align-items: flex-start; + align-items: stretch; + justify-content: center; gap: 12px; } @@ -157,28 +221,48 @@ body { display: flex; flex-direction: column; gap: 10px; - padding: 12px 16px; - /* top padding: match drums container border (1px) + padding (12px) + step numbers height (20px) + gap (10px) */ - padding-top: 43px; + padding: 14px 16px; + /* top padding: match drums container border (1px) + padding (12px) */ + padding-top: 13px; background: linear-gradient(180deg, #d8d4cc 0%, #c8c4bc 100%); border-radius: 8px; border: 1px solid rgba(0, 0, 0, 0.15); flex-shrink: 0; - align-self: flex-start; - width: 156px; /* align right edge with transport and visualizer */ + align-self: stretch; + width: 203px; /* match transport controls width */ box-sizing: border-box; } +/* Knob labels row - single row above all track knobs */ +.knob-labels-row { + display: flex; + justify-content: space-around; + align-items: center; + height: 20px; /* match step numbers row height */ + font-size: 10px; + font-weight: 600; + color: #666; + text-transform: uppercase; + letter-spacing: 0.5px; + width: 100%; +} + /* Step numbers row */ .step-numbers-row { display: flex; align-items: center; } +/* Instrument labels column - separate from pads */ +.instrument-labels-column { + display: flex; + flex-direction: column; + gap: 10px; +} + .instrument-label-spacer, .label-spacer { - width: 90px; - height: 20px; /* match step number height */ + height: 20px; /* match step number row height */ flex-shrink: 0; } @@ -191,7 +275,6 @@ body { .step-numbers { display: flex; gap: 6px; - padding-left: 68px; /* align with pads: track-label width (60px) + gap (8px) */ } /* Step number groups to match pad groups */ @@ -212,11 +295,12 @@ body { font-size: 1.05em; font-weight: 600; color: #444; + margin: 2px; /* match note-button margin for alignment */ } /* --- ARPEGGIATOR TRACK --- */ .arp-notes { - padding-left: 6px; /* align with drum pads */ + /* Left aligned */ } /* Arp pads - different color scheme */ @@ -236,9 +320,10 @@ body { /* Instrument labels */ .instrument-label { width: 90px; - height: 42px; /* match pad height */ + height: 52px; /* match track controls height */ display: flex; align-items: center; + justify-content: flex-end; /* right-align to sit next to pads */ font-size: 1.125em; font-weight: 700; color: #222; @@ -287,9 +372,9 @@ body { .track-controls { display: flex; align-items: center; - justify-content: center; + justify-content: space-around; gap: 8px; - height: 42px; /* match instrument row height */ + height: 52px; /* match larger knob size */ } /* --- KNOB CONTROLS --- */ @@ -306,6 +391,11 @@ body { touch-action: none; } +.knob svg { + display: block; + overflow: visible; +} + .knob:active { cursor: grabbing; } @@ -455,7 +545,8 @@ body { /* --- NOTE BUTTONS (PADS) --- */ .note-button { width: 36px; - height: 42px; + height: 52px; + margin: 2px; border: none; border-radius: 4px; cursor: pointer; @@ -524,6 +615,7 @@ body { .synth-row { display: flex; align-items: stretch; + justify-content: center; gap: 12px; } @@ -531,11 +623,14 @@ body { display: flex; align-items: stretch; flex-shrink: 0; + width: 90px; /* match instrument-labels-column width to align synth grid with drums grid */ + justify-content: flex-end; } .synth-grid-container { display: flex; flex-direction: column; + align-items: flex-start; gap: 12px; background: linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 100%); border-radius: 8px; @@ -548,14 +643,18 @@ body { display: flex; align-items: stretch; flex-shrink: 0; - width: 156px; /* align right edge with knobs and visualizer */ + width: 203px; /* match track controls width */ } /* Synth controls row (direction, speed, wave) */ .synth-controls-row { display: flex; align-items: center; + justify-content: center; gap: 12px; + /* Offset to align with synth-grid: 90px (vol container) + 12px (gap) on left, 203px (transport) + 12px (gap) on right */ + padding-left: 102px; + padding-right: 215px; } .synth-controls-center { @@ -579,7 +678,7 @@ body { /* Right visualizer - match transport/knobs width */ .visualizer-container:last-child { flex: none; - width: 156px; + width: 203px; } /* Audio visualizer canvas wrapper */ @@ -607,6 +706,8 @@ body { box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.1); + width: 100%; + box-sizing: border-box; } .transport-buttons { @@ -675,7 +776,7 @@ body { background: linear-gradient(180deg, #e74c3c 0%, #c0392b 100%); border: 1px solid #a93226; color: #fff; - min-width: 52px; + width: 62px; /* fixed width so START/STOP don't change button size */ } .btn-play:hover { @@ -839,8 +940,8 @@ body { /* --- KEYBOARD SECTION --- */ .keyboard-section { display: flex; - justify-content: flex-start; - padding-left: 6px; /* align with drum pads */ + justify-content: center; + align-self: stretch; } .keyboard { @@ -937,29 +1038,77 @@ body { 0 0 16px rgba(245, 166, 35, 0.7); } -/* Key hints (QWERTY letters) */ -.key-hint { +/* Note name on piano keys */ +.note-name { position: absolute; - bottom: 8px; + top: 8px; left: 50%; transform: translateX(-50%); + font-size: 12px; + font-weight: 700; + pointer-events: none; + user-select: none; +} + +.key.white .note-name { + color: #444; +} + +.key.black .note-name { + color: #aaa; +} + +.key.white.held .note-name, +.key.white.playing .note-name { + color: #fff; +} + +/* Key hints container (QWERTY letters) */ +.key-hint-container { + position: absolute; + bottom: 6px; + left: 50%; + transform: translateX(-50%); + background: rgba(0, 0, 0, 0.15); + border-radius: 3px; + padding: 2px 5px; + pointer-events: none; + user-select: none; +} + +.key-hint { font-size: 10px; font-weight: 600; text-transform: uppercase; - opacity: 0.5; - pointer-events: none; - user-select: none; +} + +.key.white .key-hint-container { + background: rgba(0, 0, 0, 0.1); } .key.white .key-hint { - color: #666; + color: #555; } -.key.black .key-hint { - color: #888; +.key.black .key-hint-container { + background: rgba(255, 255, 255, 0.15); bottom: 4px; } +.key.black .key-hint { + color: #999; +} + +.key.white.held .key-hint-container, +.key.white.playing .key-hint-container { + background: rgba(0, 0, 0, 0.2); +} + +.key.white.held .key-hint, +.key.white.playing .key-hint { + color: #fff; +} + /* Position keys relatively for hint positioning */ .key { position: relative; diff --git a/src/utils/README.md b/src/utils/README.md new file mode 100644 index 0000000..1a06ac2 --- /dev/null +++ b/src/utils/README.md @@ -0,0 +1,5 @@ +# utils/ + +Utility functions. + +- `urlState.js` - Encode/decode sequencer state to URL for sharing patterns