Repository navigation
Fit the sheet to the screen and light keys while held - #5
Merged
Merged
Conversation
The sheet music is engraved to the view's width (shrinking the zoom when a bar is too wide) and re-fits on any width change, so it never scrolls sideways. Its vertical scrollbar is hidden, which also stops the scrollbar from narrowing the view after engraving. The practice grid is one screen-wide column. Keys now light up for as long as a MIDI, computer or on-screen key is held, also during a take, where the judge recolours the held key green or red. Pressed keys get a clear neutral fill and dip slightly. Raw mic detections no longer flash keys. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01RaxZypfT9qcos5K5Ydg2bc
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Requested by Paul · project thread
Before: the practice sheet could show both a vertical and a horizontal scrollbar. The vertical one appeared after engraving and narrowed the view, so the score ran a few pixels off the side; small window resizes (under 30px) never re-engraved. On phones the whole practice screen was wider than the screen. The keys at the bottom only lit up very faintly (soft cloud) outside a take, and during a take a correct or wrong note flashed for 280 ms regardless of how long the key was held. Raw mic detections also flashed keys.
After: the sheet always fits the screen's width and never scrolls sideways; it still scrolls vertically (cursor follow, wheel, touch) but with no scrollbar. Keys light up for exactly as long as a MIDI, computer or on-screen key is held: a clear neutral fill (stone on white keys, mute on black keys) and a slight dip into the key bed, fading in at 120 ms and back out at 200 ms. During a take the held key turns green or red as the judge decides and stays that colour until released. Mic input no longer lights keys (judged green/red during a mic take is unchanged).
How:
SheetViewengraves through arenderFithelper that shrinks OSMD's zoom when the drawn SVG is wider than the view, and re-fits on any width change..sheet-wrapisoverflow-x: hiddenwith a hidden scrollbar, and.practiceuses a singleminmax(0, 1fr)column. The runtime now always presses non-mic keys inliveKeys(thejudgeHighlightsgate is gone), andliveKeys.presskeeps a verdict the judge already gave and cancels its flash timer so the key holds until note-off. Key colours use design-system neutrals only, so blue/green/red keep their meanings.Checks:
npm run typecheck,npm test(106 passed),npm run e2e(10 passed, including a new test for sheet fit and held key states).🤖 Generated with Claude Code
https://claude.ai/code/session_01RaxZypfT9qcos5K5Ydg2bc
Generated by Claude Code