jens/sheetmusictrainer
1
0
Fork 0
mirror of https://github.com/9x/sheetmusictrainer.git synced 2026-11-03 13:53:55 +01:00
Code Issues Packages Projects Releases Wiki Activity

Metronome sync toggle in widget, more Giuliani figures, chord pool list

Browse Source 
- MetronomeWidget: the Phrase Mode switch now lives IN the widget as a
  Free/Sync toggle. Free = independent metronome (own clock, starts when
  toggled, with or without clicks). Sync = silent while idle, starts with
  the exercise (count-in included), pendulum mirrors the run's beats.
- Fixed double phraseBeatBus.emit (leftover from an earlier edit) that
  flipped the pendulum twice per beat — animation appeared frozen.
- Click decision unified: one sound checkbox governs both the widget and
  (in sync mode) the run's click scheduler. 'Click 1 after count-in' is
  musically the last count-in click (suppressed duplicate) — now with a
  working pendulum the offset is visible rather than confusing.
- Giuliani figures extended: p-i-m-a-m-i, p-a-p-i-m-a, a-m-i-p-i-m,
  m-i-a-m-i-m (six-note rolling/bass-skip/tremolo-adjacent figures).
- Arpeggio chord pool: togglable degree list (empty = all 7); functional
  and random progressions honor the pool; first bar draws a random chord
  from the pool.
- Tests 174/174.
This commit is contained in:
OpenClaw
2026-09-14 20:13:42 +00:00
parent ffb94cc93f
commit 6253194632
6 changed files with 113 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/Controls.tsx
View File

@@ -181,6 +181,7 @@ export const Controls: React.FC<ControlsProps> = ({ currentPitch }) => {
rhythm={settings.rhythm}
onUpdate={updateRhythm}
showAutoAdvance={!inPhraseMode}
syncMode={inPhraseMode ? 'option' : null}
gate={inPhraseMode ? phraseRunActive : null}
/>
</div>

78
src/components/MetronomeWidget.tsx
View File

@@ -1,15 +1,16 @@
/**
* Metronome widget — always-visible tempo controls + pendulum.
*
* One toggle ("On") arms sound + animation. One `sound` checkbox decides
* whether an armed metronome clicks (the pendulum always swings when armed,
* giving silent visual tempo). There is exactly ONE sound checkbox here.
* Modes:
* - Plain (single-note modes): one on/off toggle arms sound + animation.
* - Sync option (Phrase Mode): the toggle switches between
* * FREE — the metronome runs independently (own clock, starts as soon
* as toggled, with or without clicks per the sound checkbox)
* * SYNC — the metronome starts with the exercise (count-in included),
* is silent while idle, and its pendulum mirrors the run's beats.
*
* Click sources (no doubling possible):
* - Ungated (single-note modes, phrase "at your pace"): this widget's own
* scheduler clicks when armed && sound.
* - Gated (phrase "sync to metronome"): the phrase run's scheduler owns the
* clock; this widget is silent and its pendulum mirrors phrase beats.
* Exactly ONE sound checkbox exists (here). In sync mode it governs the
* run's click scheduler too — clicks can never double.
*/
import { useEffect, useRef, useState, useCallback } from 'react';
import { useMetronome } from '../hooks/useMetronome';
@@ -20,14 +21,15 @@ import type { RhythmSettings } from '../types/SettingsTypes';
interface MetronomeWidgetProps {
rhythm: RhythmSettings;
/** Persist changes (bpm, active, sound). Auto-advance is single-note only. */
/** Persist changes. */
onUpdate: (updates: Partial<RhythmSettings>) => void;
/** Single-note mode extra: auto-advance targets on each tick. */
showAutoAdvance?: boolean;
/** Compact layout (phrase transport row). */
compact?: boolean;
/** External gate (Phrase Mode "sync to metronome"): the widget is muted
* and the pendulum mirrors the run's beats. null = free-running. */
/** 'option': show the sync/free toggle (Phrase Mode). null: plain on/off. */
syncMode?: 'option' | null;
/** External gate (sync mode): true while the exercise runs. */
gate?: boolean | null;
}
@@ -36,6 +38,7 @@ export const MetronomeWidget: React.FC<MetronomeWidgetProps> = ({
onUpdate,
showAutoAdvance = false,
compact = false,
syncMode = null,
gate = null,
}) => {
const [beatParity, setBeatParity] = useState(0);
@@ -47,47 +50,66 @@ export const MetronomeWidget: React.FC<MetronomeWidgetProps> = ({
setBeatParity(beat % 2);
}, []);
const gated = gate !== null;
const running = rhythm.active && (gate === null || gate);
const isSync = syncMode === 'option' && !!rhythm.syncToExercise;
const runActive = gate === true;
// Sync: pendulum/click only while the run is active (the run's scheduler
// is the click source; the widget's own scheduler stays off).
// Free/plain: the widget's own scheduler runs whenever armed.
const running = isSync ? runActive : rhythm.active;
// Own click scheduler — only when NOT gated.
const { restart } = useMetronome({
bpm: rhythm.bpm,
volume: rhythm.sound ? rhythm.volume : 0,
playing: running && !gated,
playing: running && !isSync,
onTick: handleTick,
});
void restart;
// Gated: pendulum mirrors the phrase run's beats (audio-time scheduled).
// Sync: pendulum mirrors the phrase run's beats (audio-time scheduled).
useEffect(() => {
if (!gated || !running) return;
if (!isSync || !runActive) return;
return phraseBeatBus.subscribe((_beat, at) => {
const delay = Math.max(0, (at - audioEngine.now()) * 1000);
window.setTimeout(() => setBeatParity(p => (p + 1) % 2), delay);
});
}, [gated, running]);
}, [isSync, runActive]);
const beatMs = 60000 / Math.max(1, rhythm.bpm);
const armed = rhythm.active;
return (
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
{/* Header: label + single arm toggle */}
{/* Header: label + mode toggle */}
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
<label className="control-label" style={{ marginBottom: 0 }}>
<span>Metronome</span>
</label>
<button
className={`switch-button ${rhythm.active ? 'active' : ''}`}
onClick={() => onUpdate({ active: !rhythm.active })}
title={rhythm.active ? 'Turn Off' : 'Turn On (sound + pendulum)'}
>
<div className="switch-thumb" />
</button>
{syncMode === 'option' ? (
<button
className={`switch-button ${rhythm.syncToExercise ? 'active' : ''}`}
onClick={() => onUpdate({
syncToExercise: !rhythm.syncToExercise,
active: true, // armed in either mode; the mode decides behavior
})}
title={rhythm.syncToExercise
? 'Sync: starts with the exercise (count-in). Click while idle: off.'
: 'Free: runs independently — start/stop it yourself.'}
>
<div className="switch-thumb" />
</button>
) : (
<button
className={`switch-button ${rhythm.active ? 'active' : ''}`}
onClick={() => onUpdate({ active: !rhythm.active })}
title={rhythm.active ? 'Turn Off' : 'Turn On (sound + pendulum)'}
>
<div className="switch-thumb" />
</button>
)}
</div>
{/* Always visible body; dimmed when disarmed */}
<div style={{ display: 'flex', flexDirection: 'column', gap: '6px', paddingTop: '8px', borderTop: '1px solid rgba(255,255,255,0.1)', opacity: rhythm.active ? 1 : 0.5 }}>
<div style={{ display: 'flex', flexDirection: 'column', gap: '6px', paddingTop: '8px', borderTop: '1px solid rgba(255,255,255,0.1)', opacity: armed ? 1 : 0.5 }}>
{/* Pendulum */}
<div
style={{
@@ -110,7 +132,7 @@ export const MetronomeWidget: React.FC<MetronomeWidgetProps> = ({
background: 'var(--color-text-main)',
transform: 'translateY(-50%)',
transition: `left ${beatMs}ms linear`,
display: rhythm.active ? 'block' : 'none',
display: armed && running ? 'block' : 'none',
}}
/>
</div>

53
src/components/PhraseTrainer.tsx
View File

@@ -82,14 +82,16 @@ export const PhraseTrainer = forwardRef<PhraseHandle, PhraseTrainerProps>(
// (single source of truth across modes; the phrase-local BPM control
// was replaced by the common metronome widget in Controls).
phrase.bpm = settings.rhythm.bpm;
// "Sync to metronome" (tempo): the phrase run owns the clock and the
// click decision comes from the METRONOME widget's sound checkbox —
// one place, no separate phrase click option. "At your pace" (step):
// the widget clicks freely when armed (metronomeActive); a legacy
// phrase.clickSound=true also allows clicks without the metronome.
// Click decision — ONE source: the metronome widget's sound checkbox.
// - Tempo + syncToExercise: the run clicks when armed && sound
// (silent while idle; starts with the exercise incl. count-in).
// - Tempo + free metronome: the widget clicks freely; the run stays
// silent (its beats are visual only) to avoid doubling.
// - Step: widget clicks freely; phrase clickSound follows the switch.
const sync = settings.rhythm.syncToExercise;
phrase.clickSound = phrase.pace === 'tempo'
? settings.rhythm.sound
: settings.rhythm.active || phrase.clickSound;
? (sync ? settings.rhythm.active && settings.rhythm.sound : false)
: settings.rhythm.active && settings.rhythm.sound;
const setPhrase = useCallback((updates: Partial<PhraseSettings>) => {
updateSettings(s => {
const next = { ...s, phrase: { ...getPhraseSettings(s), ...updates } };
@@ -197,6 +199,7 @@ export const PhraseTrainer = forwardRef<PhraseHandle, PhraseTrainerProps>(
meter: { numerator: phrase.meterNumerator, denominator: 4 },
bars: phrase.arpeggioBars,
progression: phrase.arpeggioProgression,
chordSelection: phrase.arpeggioChordSelection as ArpeggioDegree[],
rhythm: phrase.arpeggioRhythm,
seed: melodySeed,
}, pool);
@@ -214,7 +217,8 @@ export const PhraseTrainer = forwardRef<PhraseHandle, PhraseTrainerProps>(
}, [phrase.material, phrase.keyTonic, phrase.keyMode, phrase.bars, phrase.meterNumerator,
phrase.rhythmLevel, phrase.scaleDirection, phrase.scaleCoverage, phrase.scaleRhythm, phrase.libraryId,
phrase.arpeggioDegree, phrase.arpeggioPattern, phrase.arpeggioCoverage,
phrase.arpeggioBars, phrase.arpeggioProgression, phrase.arpeggioRhythm, melodySeed,
phrase.arpeggioBars, phrase.arpeggioProgression, phrase.arpeggioRhythm,
phrase.arpeggioChordSelection, melodySeed,
melodySeed, pool, importedScore]);
const fullScore: Result<Score> | null = useMemo(() => {
@@ -631,6 +635,10 @@ export const PhraseTrainer = forwardRef<PhraseHandle, PhraseTrainerProps>(
<option value="giuliani-pami">p-a-m-i</option>
<option value="giuliani-mami">m-a-m-i</option>
<option value="giuliani-ami">a-m-i</option>
<option value="giuliani-pimamim">p-i-m-a-m-i</option>
<option value="giuliani-papima">p-a-p-i-m-a</option>
<option value="giuliani-amipim">a-m-i-p-i-m</option>
<option value="giuliani-miamim">m-i-a-m-i-m</option>
</optgroup>
</select>
</label>
@@ -654,6 +662,35 @@ export const PhraseTrainer = forwardRef<PhraseHandle, PhraseTrainerProps>(
</select>
</label>
)}
{phrase.arpeggioBars > 1 && (
<div style={{ gridColumn: '1 / -1' }}>
<span style={{ fontSize: '11px', opacity: 0.7, display: 'block', marginBottom: '4px' }}>
Chord pool ({phrase.arpeggioChordSelection.length === 0 ? 'all 7' : `${phrase.arpeggioChordSelection.length} selected`}):
</span>
<div style={{ display: 'flex', gap: '6px', flexWrap: 'wrap' }}>
{(Object.keys(ARPEGGIO_DEGREE_LABELS) as ArpeggioDegree[]).map(d => {
const active = phrase.arpeggioChordSelection.length === 0 || phrase.arpeggioChordSelection.includes(d);
return (
<button
key={d}
className={`control-button small ${active ? 'active' : ''}`}
style={{ minWidth: '42px', padding: '5px 8px', fontSize: '12px' }}
onClick={() => {
// Toggle; empty selection = all back on.
const cur = phrase.arpeggioChordSelection.length === 0
? (Object.keys(ARPEGGIO_DEGREE_LABELS) as ArpeggioDegree[])
: [...phrase.arpeggioChordSelection as ArpeggioDegree[]];
const next = cur.includes(d) ? cur.filter(x => x !== d) : [...cur, d];
setPhrase({ arpeggioChordSelection: next });
}}
>
{ARPEGGIO_DEGREE_LABELS[d]}
</button>
);
})}
</div>
</div>
)}
<label>Rhythm
<select value={phrase.arpeggioRhythm} onChange={e => setPhrase({ arpeggioRhythm: e.target.value as PhraseSettings['arpeggioRhythm'] })}>
<option value="quarters">Quarter notes</option>

5
src/hooks/usePhraseTrainer.ts
View File

@@ -215,11 +215,6 @@ export function usePhraseTrainer(
if (e.kind === 'count-in-beat' || e.kind === 'beat') {
phraseBeatBus.emit(e.beat ?? 0, e.at);
}
// Publish every beat to the shared bus so the metronome widget's
// pendulum stays in sync with the run (click or no click).
if (e.kind === 'count-in-beat' || e.kind === 'beat') {
phraseBeatBus.emit(e.kind === 'count-in-beat' ? (e.beat ?? 0) : ((e.beat ?? 0) + countInBeatsRef.current), e.at);
}
clickIdxRef.current++;
}
// Fire state boundaries only when the clock reaches them.

14
src/music/arpeggioGenerator.ts
View File

@@ -22,7 +22,11 @@ export type ArpeggioPattern =
| 'giuliani-pima' // root-third-fifth-octave (p-i-m-a)
| 'giuliani-pami' // root-octave-fifth-third (p-a-m-i)
| 'giuliani-mami' // third-fifth-octave-third (inner-voice feel)
| 'giuliani-ami'; // octave-fifth-third (descending from the top)
| 'giuliani-ami' // octave-fifth-third (descending from the top)
| 'giuliani-pimamim' // p-i-m-a-m-i (six-note rolling figure)
| 'giuliani-papima' // p-a-p-i-m-a (bass-skip pattern)
| 'giuliani-amipim' // a-m-i-p-i-m (tremolo-adjacent)
| 'giuliani-miamim'; // m-i-a-m-i-m (triple-string figure)
export type ArpeggioCoverage = 'one-octave' | 'two-octave';
/** How the chord per bar is chosen in sequence mode. */
export type ArpeggioProgression = 'random' | 'functional' | 'diatonic-cycle';
@@ -63,6 +67,10 @@ export const PATTERN_LABELS: Record<ArpeggioPattern, string> = {
'giuliani-pami': 'Giuliani p-a-m-i',
'giuliani-mami': 'Giuliani m-a-m-i',
'giuliani-ami': 'Giuliani a-m-i',
'giuliani-pimamim': 'Giuliani p-i-m-a-m-i',
'giuliani-papima': 'Giuliani p-a-p-i-m-a',
'giuliani-amipim': 'Giuliani a-m-i-p-i-m',
'giuliani-miamim': 'Giuliani m-i-a-m-i-m',
};
/**
@@ -76,6 +84,10 @@ const GIULIANI_FIGURES: Record<string, number[]> = {
'giuliani-pami': [0, 3, 2, 1],
'giuliani-mami': [1, 2, 3, 1],
'giuliani-ami': [3, 2, 1],
'giuliani-pimamim': [0, 1, 2, 3, 2, 1],
'giuliani-papima': [0, 3, 0, 1, 2, 3],
'giuliani-amipim': [3, 2, 1, 0, 1, 2],
'giuliani-miamim': [2, 1, 3, 2, 1, 2],
};
/** pc of a spelled degree (step letter + alter). */

4
src/types/SettingsTypes.ts
View File

@@ -34,6 +34,9 @@ export interface RhythmSettings {
bpm: number;
seconds: number;
active: boolean;
/** Phrase Mode: sync the metronome to the exercise (starts with it,
* silent while idle) instead of running freely. */
syncToExercise: boolean;
autoAdvance: boolean;
sound: boolean;
volume: number;
@@ -164,6 +167,7 @@ export const DEFAULT_SETTINGS: AppSettings = {
bpm: 60,
seconds: 5,
active: false,
syncToExercise: true,
autoAdvance: false,
sound: true,
volume: 0.5