michal/harmonizer_plugin
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

closes #8

Browse Source 
some ui work
This commit is contained in:
michalcourson
2025-11-11 17:28:45 -05:00
parent 3c6616d1ec
commit b3429f03cb
19 changed files with 1945 additions and 450 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
Assets/web/src/Components/PianoKeyboard.js
View File

@ -18,8 +18,8 @@ const NOTE_NAMES = [
const WHITE_KEYS = [0, 2, 4, 5, 7, 9, 11];
// C2 = 36, C5 = 72
const LOWEST_MIDI = 36;
const HIGHEST_MIDI = 72;
const LOWEST_MIDI = 24;
const HIGHEST_MIDI = 84;
function getNoteName(midi) {
const octave = Math.floor(midi / 12) - 1;
@ -72,7 +72,7 @@ export default function PianoKeyboard({ heldNotes }) {
const idx = midiToWhiteIndex[prevWhite];
if (idx === undefined) return 0;
// Offset: (idx + 0.65) / numWhite * 100%
return ((idx + 0.65) / numWhite) * 100;
return ((idx + 1) / numWhite) * 100;
}
return (
@ -102,8 +102,8 @@ export default function PianoKeyboard({ heldNotes }) {
style={{
flex: "1 1 0",
height: "100%",
border: "1px solid #888",
background: k.held ? "#2a82caff" : "#fff",
border: "1px solid #2a2a2a",
background: k.held ? "#7fff7f" : "#222",
position: "relative",
boxSizing: "border-box",
marginRight: -1,
@ -123,11 +123,11 @@ export default function PianoKeyboard({ heldNotes }) {
alignItems: "center",
}}
>
<span style={{ opacity: 0.5 }}>{k.noteName}</span>
<span style={{ color: "#555" }}>{k.noteName}</span>
{k.held && (
<span
style={{
color: "#fff",
color: "#666666",
fontWeight: "bold",
fontSize: 14,
lineHeight: "14px",
@ -161,8 +161,8 @@ export default function PianoKeyboard({ heldNotes }) {
left: `${getBlackKeyPercent(k.midi)}%`,
width: `${(100 / numWhite) * 0.65}%`,
height: "100%",
background: k.held ? "#2a82caff" : "#222",
border: "1px solid #444",
background: k.held ? "#7fff7f" : "#111",
border: "1px solid #333",
borderRadius: 3,
display: "flex",
flexDirection: "column-reverse",
@ -184,7 +184,7 @@ export default function PianoKeyboard({ heldNotes }) {
{k.held && (
<span
style={{
color: "#fff",
color: "#666666",
fontWeight: "bold",
fontSize: 14,
lineHeight: "14px",