feat: highlight keys when they're played via keyboard #133
Conversation
✅ Deploy Preview for pianoparty ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
There was a problem hiding this comment.
@SURAJ-SHARMA27, I was doing some cleanup this morning and didn't realize you had a PR up. You'll need to update before making the change requests.
| import { BlackPianoKey, WhitePianoKey, type Note } from "./PianoKeys"; | ||
|
|
||
| interface PianoKeyboardProps { | ||
| playNote: (note: Note) => void; | ||
| } | ||
|
|
||
| const keyNoteMap: { [key: string]: Note } = { |
There was a problem hiding this comment.
@SURAJ-SHARMA27, there already is a keynote map. See
collabiano/src/components/Piano.tsx
Lines 258 to 267 in cb9c10c
This is where the change in styling should happen. Also, for the colours, use the tailwind classes, e.g. bg-gray-300 from hover:bg-gray-300.
collabiano/src/components/PianoKeys.tsx
Line 33 in cb9c10c
|
I'm going to go ahead and close this for now. If you'd like to keep working on it @SURAJ-SHARMA27, feel free to reopen the PR. |
Description
This PR adds functionality to highlight piano keys when they are played via the keyboard.
Added highlighting feature: Implemented key highlighting by passing a prop and using useEffect to apply styles directly to the specific key element.
fixes #51
What type of PR is this? (check all applicable)
Related Tickets & Documents
Fixes #51
Mobile & Desktop Screenshots/Recordings
screen-capture.41.webm
Steps to QA
Added to documentation?
[optional] Are there any post-deployment tasks we need to perform?
[optional] What gif best describes this PR or how it makes you feel?