zoriya/Chromacase
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

removed accidental as it's own type and integrated it with note type

Browse Source
This commit is contained in:
Clément Le Bihan
2023-03-20 00:40:01 +01:00
parent c3d2e0a4e5
commit 885c819ab5
4 changed files with 190 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front/components/VirtualPiano/Octave.tsx
+8 -11
View File
@@ -3,7 +3,7 @@ import {
PianoKey,
NoteNameBehavior,
octaveKeys,
Accidental,
isAccidental,
HighlightedKey,
} from "../../models/Piano";
import { Box, Row, Pressable, Text } from "native-base";
@@ -74,15 +74,15 @@ const Octave = (props: OctaveProps) => {
onNoteUp,
} = props;
const oK: PianoKey[] = octaveKeys.map((k) => {
return new PianoKey(k.note, k.accidental, number);
return new PianoKey(k.note, number);
});
const startNoteIndex = getKeyIndex(startNote, oK);
const endNoteIndex = getKeyIndex(endNote, oK);
const keys = oK.slice(startNoteIndex, endNoteIndex + 1);
const whiteKeys = keys.filter((k) => k?.accidental === undefined);
const blackKeys = keys.filter((k) => k?.accidental !== undefined);
const whiteKeys = keys.filter((k) => !isAccidental(k));
const blackKeys = keys.filter(isAccidental);
const whiteKeyWidthExpr = "calc(100% / 7)";
const whiteKeyHeightExpr = "100%";
@@ -94,18 +94,17 @@ const Octave = (props: OctaveProps) => {
<Row height={"100%"} width={"100%"}>
{whiteKeys.map((key, i) => {
const highlightedKey = highlightedNotes.find(
(h) =>
h.key.note === key.note && h.key.accidental === key.accidental
(h) => h.key.note === key.note
);
const isHighlighted = highlightedKey !== undefined;
const highlightColor =
highlightedKey?.bgColor ?? defaultHighlightColor;
return (
<PianoKeyComp
key={i}
key={i}
pianoKey={key}
showNoteName={showNoteNames}
bg={isHighlighted ? highlightColor :whiteKeyBg}
bg={isHighlighted ? highlightColor : whiteKeyBg}
bgPressed={isHighlighted ? highlightColor : whiteKeyBgPressed}
bgHovered={isHighlighted ? highlightColor : whiteKeyBgHovered}
onKeyDown={() => onNoteDown(key)}
@@ -114,14 +113,12 @@ const Octave = (props: OctaveProps) => {
width: whiteKeyWidthExpr,
height: whiteKeyHeightExpr,
}}
/>
);
})}
{blackKeys.map((key, i) => {
const highlightedKey = highlightedNotes.find(
(h) =>
h.key.note === key.note && h.key.accidental === key.accidental
(h) => h.key.note === key.note
);
const isHighlighted = highlightedKey !== undefined;
const highlightColor =
front/components/VirtualPiano/PianoKeyComp.tsx
-2
View File
@@ -6,8 +6,6 @@ import {
PianoKey,
NoteNameBehavior,
octaveKeys,
Accidental,
HighlightedKey,
keyToStr,
} from "../../models/Piano";
front/components/VirtualPiano/VirtualPiano.tsx
+61 -52
View File
@@ -1,7 +1,13 @@
import { Row, Box } from "native-base";
import React, { useState, useEffect } from "react";
import Octave from "./Octave";
import { Note, PianoKey, NoteNameBehavior, KeyPressStyle, keyToStr } from "../../models/Piano";
import {
Note,
PianoKey,
NoteNameBehavior,
KeyPressStyle,
keyToStr,
} from "../../models/Piano";
type VirtualPianoProps = Parameters<typeof Row>[0] & {
onNoteDown: (note: PianoKey) => void;
@@ -21,71 +27,74 @@ type VirtualPianoProps = Parameters<typeof Row>[0] & {
};
const VirtualPiano = ({
onNoteDown,
onNoteUp,
startOctave,
startNote,
endOctave,
endNote,
showNoteNames,
highlightedNotes,
highlightColor,
specialHighlightedNotes,
specialHighlightColor,
showOctaveNumbers,
keyPressStyle,
vividKeyPressColor,
onNoteDown,
onNoteUp,
startOctave,
startNote,
endOctave,
endNote,
showNoteNames,
highlightedNotes,
highlightColor,
specialHighlightedNotes,
specialHighlightColor,
showOctaveNumbers,
keyPressStyle,
vividKeyPressColor,
}: VirtualPianoProps) => {
const notesList: Array<Note> = [
Note.C,
Note.D,
Note.E,
Note.F,
Note.G,
Note.A,
Note.B,
];
const octaveList = [];
const notesList: Array<Note> = [
Note.C,
Note.D,
Note.E,
Note.F,
Note.G,
Note.A,
Note.B,
];
const octaveList = [];
for (let octaveNum = startOctave; octaveNum <= endOctave; octaveNum++) {
octaveList.push(octaveNum);
};
for (let octaveNum = startOctave; octaveNum <= endOctave; octaveNum++) {
octaveList.push(octaveNum);
}
return (
<Row>
{octaveList.map((octaveNum) => {
return (
<Octave
width={"350px"}
height={"200px"}
key={octaveNum}
number={octaveNum}
showNoteNames={showNoteNames}
showOctaveNumber={showOctaveNumbers}
startNote={octaveNum == startOctave ? startNote : notesList[0]}
endNote={octaveNum == endOctave ? endNote : notesList[notesList.length - 1]}
onNoteDown={onNoteDown}
onNoteUp={onNoteUp}
/>
);
})}
</Row>
{octaveList.map((octaveNum) => {
return (
<Octave
width={"350px"}
height={"200px"}
key={octaveNum}
number={octaveNum}
showNoteNames={showNoteNames}
showOctaveNumber={showOctaveNumbers}
highlightedNotes={highlightedNotes}
startNote={octaveNum == startOctave ? startNote : notesList[0]}
endNote={
octaveNum == endOctave ? endNote : notesList[notesList.length - 1]
}
onNoteDown={onNoteDown}
onNoteUp={onNoteUp}
/>
);
})}
</Row>
);
};
VirtualPiano.defaultProps = {
onNoteDown: (n) => {
console.log("Note down: " + keyToStr(n));
},
onNoteUp: (n) => {
console.log("Note up: " + keyToStr(n));
},
onNoteDown: (n) => {
console.log("Note down: " + keyToStr(n));
},
onNoteUp: (n) => {
console.log("Note up: " + keyToStr(n));
},
startOctave: 2,
startNote: Note.C,
endOctave: 2,
endNote: Note.B,
showNoteNames: NoteNameBehavior.onpress,
highlightedNotes: [],
highlightedNotes: [{ key: Note.D }, { key: Note.G, bgColor: "blue" }],
highlightColor: "red",
specialHighlightedNotes: [Note.D, Note.G],
specialHighlightColor: "blue",