Extract ui logic from components

app/projects/mtts/components/keys/PianoKey.tsx

@@ -0,0 +1,42 @@
+import classNames from "classnames"
+import { Note, Scale } from "mtts"
+import { COLOR, getNoteColor } from "../../scale-builder/helpers/getNoteColor"
+
+export interface PianoBlackKeyComponentProps {
+  note: Note,
+  scale: Scale,
+}
+
+export interface PianoKeyComponentProps {
+  note: Note,
+  scale: Scale
+}
+
+interface PianoKeyProps {
+  note: Note,
+  scale: Scale,
+  blackNote?: Note | undefined,
+  PianoBlackKeyComponent?: React.FunctionComponent<PianoBlackKeyComponentProps>,
+  PianoKeyComponent?: React.FunctionComponent<PianoKeyComponentProps>
+}
+
+export default function PianoKey({ note, scale, blackNote, PianoBlackKeyComponent, PianoKeyComponent }: PianoKeyProps) {
+  return (
+    <div className={classNames({
+      'text-center flex align-items border rounded-bl rounded-br grow relative border-mtts-dark-violet-200': true,
+    })}>
+      {
+        PianoKeyComponent !== undefined && <PianoKeyComponent scale={scale} note={note} />
+      }
+      {
+        blackNote && (
+          <div className={classNames({
+            'absolute w-1/2 h-1/2 translate-x-3/2 z-10 rounded-bl rounded-br border border-mtts-dark-violet-200 bg-mtts-dark-violet': true,
+          })}>
+            { PianoBlackKeyComponent !== undefined && <PianoBlackKeyComponent scale={scale} note={blackNote} /> }
+          </div>
+        )
+      }
+    </div>
+  )
+}

app/projects/mtts/components/keys/PianoRoll.tsx

@@ -0,0 +1,40 @@
+import { Note, Scale } from "mtts"
+import PianoKey, { PianoBlackKeyComponentProps, PianoKeyComponentProps } from "./PianoKey"
+
+interface PianoRollProps {
+  domain?: [Note, Note],
+  scale?: Scale,
+  PianoBlackKeyComponent?: React.FunctionComponent<PianoBlackKeyComponentProps>,
+  PianoKeyComponent?: React.FunctionComponent<PianoKeyComponentProps>
+}
+
+export default function PianoRoll({
+  domain = [Note.fromSPN('A0'), Note.fromSPN('C5')],
+  scale,
+  PianoBlackKeyComponent,
+  PianoKeyComponent
+}: PianoRollProps) {
+  const notesWithinDomainRange = Array.from(Array(Note.getSemitonesBetween(domain[0], domain[1])).keys()).map((i) => {
+    return Note.fromSPN(domain[0].SPN).sharpenChromatically(i)
+  })
+
+  const whiteNotes = notesWithinDomainRange.filter(note => !note.hasAccidental())
+  const blackNotes = notesWithinDomainRange.filter(note => note.hasAccidental())
+
+  return (
+    <div className="w-full h-full">
+      <div className="h-full w-full flex flex-row">
+        {whiteNotes.map(note => (
+          <PianoKey
+            key={`keys-key-${note.SPN}`}
+            scale={scale}
+            note={note}
+            blackNote={blackNotes.find(blackNote => Note.getSemitonesBetween(note, blackNote) === 1)}
+            PianoBlackKeyComponent={PianoBlackKeyComponent}
+            PianoKeyComponent={PianoKeyComponent}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}

app/projects/mtts/scale-builder/components/PianoBlackKey.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import { Note, Scale } from "mtts"
+import { PianoBlackKeyComponentProps } from "../../components/keys/PianoKey"
+import classNames from 'classnames'
+import { COLOR, getNoteColor } from '../helpers/getNoteColor'
+
+export default function PianoBlackKey({ scale, note }: PianoBlackKeyComponentProps) {
+  return <div className={classNames({
+    'h-full w-full': true,
+    'bg-mtts-cta-0': getNoteColor(scale, note) === COLOR.DEFAULT,
+    'bg-mtts-yellow': getNoteColor(scale, note) === COLOR.YELLOW,
+    'bg-mtts-khaki': getNoteColor(scale, note) === COLOR.KHAKI,
+    'bg-mtts-green': getNoteColor(scale, note) === COLOR.GREEN,
+    'bg-mtts-blue': getNoteColor(scale, note) === COLOR.BLUE,
+    'bg-mtts-violet': getNoteColor(scale, note) === COLOR.VIOLET,
+    'bg-mtts-red': getNoteColor(scale, note) === COLOR.RED,
+  })}></div>
+}

app/projects/mtts/scale-builder/components/PianoKey.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import { PianoKeyComponentProps } from "../../components/keys/PianoKey"
+import classNames from 'classnames'
+import { COLOR, getNoteColor } from '../helpers/getNoteColor'
+
+export default function PianoKey({ scale, note }: PianoKeyComponentProps) {
+  console.log(scale, note)
+  return <div className={classNames({
+    'h-full w-full': true,
+    'bg-mtts-cta-0': getNoteColor(scale, note) === COLOR.DEFAULT,
+    'bg-mtts-yellow': getNoteColor(scale, note) === COLOR.YELLOW,
+    'bg-mtts-khaki': getNoteColor(scale, note) === COLOR.KHAKI,
+    'bg-mtts-green': getNoteColor(scale, note) === COLOR.GREEN,
+    'bg-mtts-blue': getNoteColor(scale, note) === COLOR.BLUE,
+    'bg-mtts-violet': getNoteColor(scale, note) === COLOR.VIOLET,
+    'bg-mtts-red': getNoteColor(scale, note) === COLOR.RED,
+  })}></div>
+}

app/projects/mtts/scale-builder/components/index.tsx

@@ -10,6 +10,9 @@ import { noteExistsInScale } from '../helpers/noteExistsInScale'
 import Chord from './Chord'
 import { useNoteTranslation } from '../hooks/useNoteTranslation'
 import { usePathname, useRouter, useSearchParams } from 'next/navigation'
+import PianoRoll from '../../components/keys/PianoRoll'
+import PianoBlackKey from './PianoBlackKey'
+import PianoKey from './PianoKey'
 
 const availableAccidentals: Accidental[] =
   ACCIDENTALS
@@ -174,8 +177,7 @@ function BuildScale() {
                       </li>))}
                   </ul>
                 </li>
-              )
-              }
+              )}
             </ul>
           </div>
         </div>
@@ -216,6 +218,12 @@ function BuildScale() {
             />
           </div>
         </div>
+        <div className='col-span-2 flex flex-col'>
+          <p>Here is the scale on a piano :</p>
+          <div className='py-4 h-48'>
+            <PianoRoll scale={scale} PianoBlackKeyComponent={PianoBlackKey} PianoKeyComponent={PianoKey} />
+          </div>
+        </div>
       </div>
     </div>
   )

tailwind.config.js

@@ -62,13 +62,15 @@ module.exports = {
         '9xl': '7rem',
         '10xl': '8rem'
       },
+      margin: {
+        '1/2': '50%',
+      },
       flexGrow: {
         0: 0,
         1: 1,
         2: 2
       },
       height: {
-        '1/2': '50%',
         'icon-s': '2rem',
         'icon-m': '4rem',
         'icon-l': '8rem',
@@ -78,8 +80,10 @@ module.exports = {
         80: '20rem',
         96: '24rem'
       },
+      translate: {
+        '3/2': '150%'
+      },
       width: {
-        '1/2': '50%',
         'icon-s': '2rem',
         'icon-m': '4rem',
         'icon-l': '8rem',
@@ -131,7 +135,7 @@ module.exports = {
         '28': 'repeat(28, minmax(0, 1fr))',
         '29': 'repeat(29, minmax(0, 1fr))',
         '30': 'repeat(30, minmax(0, 1fr))'
-      }
+      },
     }
   }
 }