Chord display components

.gitignore

@@ -8,3 +8,4 @@ node_modules
 .vscode
 .parcel-cache
 build
+.eslintcache

shared/midi.ts

@@ -1,4 +1,5 @@
 import {MidiInstrumentName} from 'constants/midi_instrument_constants';
+
 import type easymidi from 'easymidi';
 import type {Note} from 'easymidi';
 
@@ -74,52 +75,6 @@ const isSpammyMidiEvent = (type: string, msg: MidiMessage): boolean => {
     return false;
 };
 
-export const equalControlButton = (button: ControlButtonMapping | undefined, msg: MidiSubjectMessage) => {
-    if (!button) {
-        return false;
-    }
-
-    const noteMsg = msg.msg as easymidi.Note;
-    return button.channel === noteMsg.channel && button.note === noteMsg.note;
-};
-
-export const equalKeyboard = (keyboard: KeyboardMapping | undefined, msg: MidiSubjectMessage) => {
-    if (!keyboard) {
-        return false;
-    }
-
-    const noteMsg = msg.msg as easymidi.Note;
-    return keyboard.channel === noteMsg.channel;
-};
-
-export const isNoteOnEvent = (msg: MidiSubjectMessage): msg is MidiSubjectMessage<NoteOnEvent> => {
-    return msg.type === 'noteon';
-};
-
-export const isNoteOffEvent = (msg: MidiSubjectMessage): msg is MidiSubjectMessage<NoteOffEvent> => {
-    return msg.type === 'noteoff';
-};
-
-export const isControlChangeEvent = (msg: MidiSubjectMessage): msg is MidiSubjectMessage<ControlChangeEvent> => {
-    return msg.type === 'cc';
-};
-
-export const equalChords = (chord1: Note[], chord2: Note[]) => {
-    const set1 = new Set(chord1);
-    const set2 = new Set(chord2);
-
-    if (set1.size !== set2.size) {
-        return false;
-    }
-
-    for (const c of set1.values()) {
-        if (!set2.has(c)) {
-            return false;
-        }
-    }
-
-    return true;
-};
 
 export type MidiSubjectMessage<T extends MidiMessage = MidiMessage> = {
     name: MidiInstrumentName;
@@ -147,15 +102,15 @@ export const equalKeyboard = (keyboard: KeyboardMapping | undefined, msg: MidiSu
 
 export const isNoteOnEvent = (msg: MidiSubjectMessage): msg is MidiSubjectMessage<NoteOnEvent> => {
     return msg.type === 'noteon';
-}
+};
 
 export const isNoteOffEvent = (msg: MidiSubjectMessage): msg is MidiSubjectMessage<NoteOffEvent> => {
     return msg.type === 'noteoff';
-}
+};
 
 export const isControlChangeEvent = (msg: MidiSubjectMessage): msg is MidiSubjectMessage<ControlChangeEvent> => {
     return msg.type === 'cc';
-}
+};
 
 export const equalChords = (chord1: Note[], chord2: Note[]) => {
     const set1 = new Set(chord1);
@@ -172,10 +127,4 @@ export const equalChords = (chord1: Note[], chord2: Note[]) => {
     }
 
     return true;
-}
-
-export type MidiSubjectMessage<T extends MidiMessage = MidiMessage> = {
-    name: MidiInstrumentName;
-    type: MidiMessageType
-    msg: T;
-}
+};

shared/types/model-interfaces.ts

@@ -0,0 +1,28 @@
+export interface Note {
+    number: number; // i.e. 84
+    name: string; // i.e. "C"
+    octave: number; // i.e. 5
+}
+
+export interface Chord {
+    notes: Note[];
+}
+
+export interface Scale {
+    root: Note;
+    quality: string;
+}
+
+export interface Progression {
+    chords: Chord[];
+}
+
+export interface NoteCollection {
+    notes: Note[];
+}
+
+export type MidiNumber = number
+
+export const noteToMidiNumber = (note: Note) => {
+    return note.number;
+};

webapp/package.json

@@ -8,6 +8,9 @@
     "dev": "snowpack dev --port 2000",
     "local": "LOCAL_MODE=true snowpack dev --port 2000",
     "build": "snowpack build",
+    "check": "eslint --ext .js,.jsx,.tsx,.ts ./src --quiet --cache && eslint --ext .js,.jsx,.tsx,.ts ./webapp/src --quiet --cache",
+    "fix": "eslint --ext .js,.jsx,.tsx,.ts ./src --quiet --fix --cache && eslint --ext .js,.jsx,.tsx,.ts ./webapp/src --quiet --fix --cache",
+    "check-types": "tsc -b",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
@@ -29,6 +32,7 @@
     "typescript": "^4.9.5"
   },
   "dependencies": {
+    "classnames": "^2.3.2",
     "easymidi": "^3.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

webapp/src/components/main.tsx

@@ -6,6 +6,8 @@ import {useGlobalState} from '../hooks/use_global_state';
 
 import ControlPanel from './control_panel/control_panel';
 
+import ProgressionView from './progression_view/progression_view';
+
 type Props = {
     actionHandler: ActionHandler;
     // localMode: boolean;
@@ -35,8 +37,13 @@ export default function Main(props: Props) {
     //     />
     // );
 
+    const progressionView = (
+        <ProgressionView/>
+    );
+
     return (
         <div>
+            {progressionView}
             <div>
                 <pre>
                     {messages.length}

webapp/src/components/progression_view/chord-name.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import {Note, Chord} from './model-interfaces';
+
+// import {cycle} from '../../midi_processing/chord-processor';
+
+// import styles from './progression_view.scss';
+
+const cycle = (n: number) => n % 12;
+
+const correctNoteName = (note: Note) => {
+    return note.name;
+};
+
+type Props = {
+    chord: Chord;
+}
+
+export default function ChordName(props: Props) {
+    const {chord} = props;
+
+    let label;
+    const name = correctNoteName(chord.notes[0]);
+    if (chord.notes.length === 1) {
+        label = name;
+    } else {
+        const isMinor = cycle(chord.notes[0].number + 3) === cycle(chord.notes[1].number);
+        label = isMinor ? name + 'm' : name;
+    }
+
+    return (
+        <div className={'noteNameContainer'}>
+            <span className={'chordName'}>
+                {label}
+            </span>
+        </div>
+    );
+}

webapp/src/components/progression_view/chord.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import classnames from 'classnames';
+
+import {Chord} from './model-interfaces';
+
+// import DumbPiano from '../piano/dumb-piano';
+
+import ChordName from './chord-name';
+
+type Props = {
+    chord: Chord;
+}
+
+export default function ChordComponent(props: Props) {
+    const {chord} = props;
+
+    // const selected = Math.random() > 0.5
+    // const selectedClass = selected ? styles.selectedChord : ''
+
+    const selectedClass = '';
+
+    return (
+        <div className={classnames('entireChordContainer', selectedClass)}>
+            {/* <DumbPiano
+        height='100px'
+        playNote={() => console.log('special')}
+        // noteRange={{ first: firstNote, last: lastNote }}
+        width={200}
+        // keyboardShortcuts={keyboardShortcuts}
+        heldDownNotes={chord.notes}
+      /> */}
+            <ChordName chord={chord}/>
+        </div>
+    );
+}

webapp/src/components/progression_view/model-interfaces.ts

@@ -0,0 +1,28 @@
+export interface Note {
+    number: number; // i.e. 84
+    name: string; // i.e. "C"
+    octave: number; // i.e. 5
+}
+
+export interface Chord {
+    notes: Note[];
+}
+
+export interface Scale {
+    root: Note;
+    quality: string;
+}
+
+export interface Progression {
+    chords: Chord[];
+}
+
+export interface NoteCollection {
+    notes: Note[];
+}
+
+export type MidiNumber = number
+
+export const noteToMidiNumber = (note: Note) => {
+    return note.number;
+};

webapp/src/components/progression_view/progression_view.scss

@@ -0,0 +1,33 @@
+.heading {
+  font-size: 40px;
+}
+
+.progressionContainer {
+  border: 5px solid;
+  width: 1050px;
+}
+
+.chordName {
+  font-size: 80px;
+  font-family:Georgia, 'Times New Roman', Times, serif
+  // margin-right: 30px;
+}
+
+.entireChordContainer {
+  margin: 10px;
+  display: inline-block;
+  padding: 20px;
+}
+
+.selectedChord {
+  background-color: #FDEFCC;
+}
+
+.noteNameContainer {
+  background-color: #7EAA54;
+  text-align: center;
+  border: 20px solid;
+  border-color: #4D73BE;
+  border-radius: 30px;
+  padding: 10px;
+}