Add TrainerDisplay component and improve code quality

ZaneH · Jul 4, 2022 · 50883c8 · 50883c8
1 parent 287af31
commit 50883c8
Show file tree

Hide file tree

Showing 8 changed files with 136 additions and 44 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,12 +1,13 @@
 import Keyboard from './components/Keyboard'
-import { TrainerPiano } from './components/Trainer'
+import { TrainerDisplay, TrainerPiano } from './components/Trainer'
 import TrainerProvider from './components/TrainerProvider'
 
 function App() {
   return (
     <div className='App'>
       <TrainerProvider>
         <TrainerPiano />
+        <TrainerDisplay />
         <Keyboard />
       </TrainerProvider>
     </div>

diff --git a/src/components/Keyboard/Keyboard.tsx b/src/components/Keyboard/Keyboard.tsx
@@ -3,9 +3,14 @@ import { listen } from '@tauri-apps/api/event'
 import { useCallback, useContext, useEffect, useState } from 'react'
 import { KeyboardShortcuts, MidiNumbers, Piano } from 'react-piano'
 import 'react-piano/dist/styles.css'
+import styled from 'styled-components'
 import SoundfontProvider from '../SoundfontProvider'
 import { TrainerContext } from '../TrainerProvider'
 
+const KeyboardContainer = styled.div`
+  height: 25vh;
+`
+
 const Keyboard = () => {
   const { nextTargetNote, setNoteCounter } = useContext(TrainerContext)
   const [activeNotes, setActiveNotes] = useState<{ [note: string]: boolean }>(
@@ -61,31 +66,33 @@ const Keyboard = () => {
       onLoad={() => {}}
       render={({ playNote, stopNote }) => {
         return (
-          <Piano
-            noteRange={{ first: firstNote, last: lastNote }}
-            playNote={(midiNumber: number) => {
-              if (midiNumber === nextTargetNote) {
-                setNoteCounter?.((nc) => nc + 1)
-              }
+          <KeyboardContainer>
+            <Piano
+              noteRange={{ first: firstNote, last: lastNote }}
+              playNote={(midiNumber: number) => {
+                if (midiNumber === nextTargetNote) {
+                  setNoteCounter?.((nc) => nc + 1)
+                }
 
-              playNote(midiNumber)
-            }}
-            stopNote={(midiNumber: number) => {
-              stopNote(midiNumber)
-            }}
-            keyboardShortcuts={keyboardShortcuts}
-            renderNoteLabel={({ midiNumber }: { midiNumber: number }) => (
-              <p className='ReactPiano__NoteLabel'>
-                {MidiNumbers.getAttributes(midiNumber).note.replace(
-                  /[0-9]/,
-                  ''
-                )}
-              </p>
-            )}
-            activeNotes={Object.keys(activeNotes)
-              .filter((v: string) => activeNotes[v])
-              .map((s: string) => Number(s))}
-          />
+                playNote(midiNumber)
+              }}
+              stopNote={(midiNumber: number) => {
+                stopNote(midiNumber)
+              }}
+              keyboardShortcuts={keyboardShortcuts}
+              renderNoteLabel={({ midiNumber }: { midiNumber: number }) => (
+                <p className='ReactPiano__NoteLabel'>
+                  {MidiNumbers.getAttributes(midiNumber).note.replace(
+                    /[0-9]/,
+                    ''
+                  )}
+                </p>
+              )}
+              activeNotes={Object.keys(activeNotes)
+                .filter((v: string) => activeNotes[v])
+                .map((s: string) => Number(s))}
+            />
+          </KeyboardContainer>
         )
       }}
     />

diff --git a/src/components/Trainer/TrainerDisplay.tsx b/src/components/Trainer/TrainerDisplay.tsx
@@ -0,0 +1,9 @@
+import { useContext } from 'react'
+import { TrainerContext } from '../TrainerProvider'
+
+const TrainerDisplay = () => {
+  const { scale } = useContext(TrainerContext)
+  return <h1>{scale?.name}</h1>
+}
+
+export default TrainerDisplay
diff --git a/src/components/Trainer/TrainerPiano.tsx b/src/components/Trainer/TrainerPiano.tsx
@@ -5,8 +5,7 @@ import { ignoreOctave } from '../../utils'
 import { TrainerContext } from '../TrainerProvider'
 
 const PianoContainer = styled.div`
-  height: 50vh;
-  width: 60%;
+  height: 35vh;
 `
 
 const InKeyMarker = styled.div`
@@ -31,19 +30,24 @@ const TrainerPiano = () => {
       <Keyboard
         noteRange={{
           first: MidiNumbers.fromNote('c3'),
-          last: MidiNumbers.fromNote('g4'),
+          last: MidiNumbers.fromNote('c5'),
         }}
         activeNotes={[nextTargetNote]}
         onPlayNoteInput={() => {}}
         onStopNoteInput={() => {}}
         keyWidthToHeight={0.33}
         renderNoteLabel={({ midiNumber }: { midiNumber: number }) => {
-          const modScale = ignoreOctave(scale || [])
-          return (
-            modScale[midiNumber % 12] && (
-              <InKeyMarker>{modScale[midiNumber % 12]}</InKeyMarker>
+          const isMidiNumbers = false
+          const modScale = ignoreOctave(scale || {})
+          if (isMidiNumbers) {
+            return <InKeyMarker>{midiNumber}</InKeyMarker>
+          } else {
+            return (
+              modScale[midiNumber % 12] && (
+                <InKeyMarker>{modScale[midiNumber % 12]}</InKeyMarker>
+              )
             )
-          )
+          }
         }}
       />
     </PianoContainer>

diff --git a/src/components/Trainer/index.ts b/src/components/Trainer/index.ts
@@ -1 +1,2 @@
 export { default as TrainerPiano } from './TrainerPiano'
+export { default as TrainerDisplay } from './TrainerDisplay'
diff --git a/src/index.css b/src/index.css
@@ -1,13 +1,9 @@
 html {
-    height: 100vh;
-    min-height: 100vh;
-    margin: 0 auto;
-}
-
-.ReactPiano__Keyboard {
-    height: 48vh !important;
+  height: 100vh;
+  min-height: 100vh;
+  margin: 0 auto;
 }
 
 .ReactPiano__NoteLabel {
-    font-family: Arial, Helvetica, sans-serif;
-}
+  font-family: Arial, Helvetica, sans-serif;
+}
diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -1,4 +1,5 @@
 export type ScaleType = {
+  name?: string
   [midi: number]: string
 }
 

diff --git a/src/utils/scales/Majors.ts b/src/utils/scales/Majors.ts
@@ -1,6 +1,7 @@
 import { ScaleType } from '..'
 
 const CMajor: ScaleType = {
+  name: 'C Major',
   48: 'I',
   50: 'ii',
   52: 'iii',
@@ -9,7 +10,79 @@ const CMajor: ScaleType = {
   57: 'vi',
   59: 'viiº',
   60: 'I',
-}
+} as const
+
+const DMajor: ScaleType = {
+  name: 'D Major',
+  50: 'I',
+  52: 'ii',
+  54: 'iii',
+  55: 'IV',
+  57: 'V',
+  59: 'vi',
+  61: 'viiº',
+  62: 'I',
+} as const
+
+const EMajor: ScaleType = {
+  name: 'E Major',
+  52: 'I',
+  54: 'ii',
+  56: 'iii',
+  57: 'IV',
+  59: 'V',
+  61: 'vi',
+  63: 'viiº',
+  64: 'I',
+} as const
+
+const FMajor: ScaleType = {
+  name: 'F Major',
+  53: 'I',
+  55: 'ii',
+  57: 'iii',
+  58: 'IV',
+  60: 'V',
+  62: 'vi',
+  64: 'viiº',
+  65: 'I',
+} as const
+
+const GMajor: ScaleType = {
+  name: 'G Major',
+  55: 'I',
+  57: 'ii',
+  59: 'iii',
+  60: 'IV',
+  62: 'V',
+  64: 'vi',
+  66: 'viiº',
+  67: 'I',
+} as const
+
+const AMajor: ScaleType = {
+  name: 'A Major',
+  57: 'I',
+  59: 'ii',
+  61: 'iii',
+  62: 'IV',
+  64: 'V',
+  66: 'vi',
+  68: 'viiº',
+  69: 'I',
+} as const
+
+const BMajor: ScaleType = {
+  name: 'B Major',
+  59: 'I',
+  61: 'ii',
+  63: 'iii',
+  64: 'IV',
+  66: 'V',
+  68: 'vi',
+  70: 'viiº',
+  71: 'I',
+} as const
 
 const ignoreOctave = (scale: ScaleType): ScaleType => {
   const scaleKeys: string[] = Object.keys(scale)
@@ -22,4 +95,4 @@ const ignoreOctave = (scale: ScaleType): ScaleType => {
   return modKeys
 }
 
-export { CMajor, ignoreOctave }
+export { CMajor, DMajor, EMajor, FMajor, GMajor, AMajor, BMajor, ignoreOctave }
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export { default as TrainerPiano } from './TrainerPiano'
		export { default as TrainerDisplay } from './TrainerDisplay'