Add chords to scales, scale root highlight & bump mtts

components/blog/BlogPostLayout.tsx

@@ -43,7 +43,7 @@ const BlogPostLayout = ({ children, meta }: BlogPostLayoutProps) => {
       <div className="article container md:max-w-1/2">
         <header>
           <div className="flex items-center">
-            <a className="pr-4 font-bold" href="/blog" aria-label="Go back to blog home">←</a>
+            <a className="font-bold" href="/blog" aria-label="Go back to blog home">←</a>
             <h1>{meta.title}</h1>
           </div>
           <div className="article-info text-sm text-opacity-25">

components/mtts/build-scale/Fret.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import classNames from 'classnames'
+import { Note } from 'mtts'
+
+interface IFretProps {
+  note: Note,
+  stringNumber: number,
+  fretNumber: number,
+  highlighted: boolean,
+  getNoteInScale: (note: Note) => Note,
+  noteExistsInScale: (note: Note) => boolean
+  isNoteScaleRoot: (note: Note) => boolean
+}
+
+function getNoteNameWithoutPitch(note: Note): string {
+  return note.SPN.replace(/[0-9]/g, '')
+}
+
+function Fret({ note, highlighted, noteExistsInScale, getNoteInScale, isNoteScaleRoot }: IFretProps) {
+  return (
+    <div
+      className={classNames({
+        'bg-mtts-cta-0 text-white': isNoteScaleRoot(note),
+        'bg-mtts-cta-2': highlighted && !isNoteScaleRoot(note),
+        'color-white rounded': highlighted,
+        'p-1 m-1 w-10 flex align-items border-left-1': true
+      })}
+    >
+      <div className="m-auto">
+        {noteExistsInScale(note) ? <p>{getNoteNameWithoutPitch(getNoteInScale(note))}</p> : <p></p>}
+      </div>
+    </div>
+  )
+}
+
+export default Fret

components/mtts/build-scale/index.tsx

@@ -3,6 +3,7 @@ import { Note, NOTES, ACCIDENTALS, Accidental, INTERVALS, Interval, ACCIDENTAL,
 import SquareButton from '../../square-button'
 import { useTranslation } from 'react-i18next'
 import GuitarNeck from '../instruments/guitar/guitar-neck'
+import Fret from './Fret'
 
 const possibleAccidentals: Accidental[] =
   ACCIDENTALS
@@ -22,10 +23,6 @@ function noteExistsInScale(scale: Scale, note: Note): boolean {
   return getNoteInScale(scale, note) !== undefined
 }
 
-function getNoteNameWithoutPitch(note: Note): string {
-  return note.SPN.replace(/[0-9]/g, '')
-}
-
 const possibleNotes: Note[] = NOTES.map(n => new Note({ name: n }))
 
 function BuildScale() {
@@ -52,6 +49,10 @@ function BuildScale() {
     }
   }
 
+  function isNoteScaleRoot(scale: Scale, note: Note) {
+    return scale.key.SPN.replace(/[0-9]/, '') === note.SPN.replace(/[0-9]/, '')
+  }
+
   function getSelectNoteIndex(note: Note) {
     return selectedNotes.findIndex(sn => note.SPN === sn.SPN)
   }
@@ -73,11 +74,10 @@ function BuildScale() {
     }
   }, [rootNote, scaleIntervals])
 
-  console.log(scale)
-
   const { t } = useTranslation()
   return (
     <div>
+      <p>Select your note :</p>
       <ul className="flex flex-wrap">
         {possibleNotes.map(n =>
           <li key={n.name}>
@@ -90,6 +90,7 @@ function BuildScale() {
         )
         }
       </ul>
+      <p>Select if there is an accidental :</p>
       <ul className="flex flex-wrap">
         {possibleAccidentals.map(a =>
           <li key={a.name}>
@@ -102,6 +103,7 @@ function BuildScale() {
         )
         }
       </ul>
+      <p>Select your intervals</p>
       <ul className="flex flex-wrap">
         {possibleIntervals.map(i =>
           <li key={i.name}>
@@ -114,16 +116,38 @@ function BuildScale() {
         )
         }
       </ul>
-      <p>{rootNote.SPN}</p>
+      <p>Scale root : {rootNote.SPN}</p>
       <p>Scale name : {scale.name}</p>
-      <p>Scale mode : {scale.mode}</p>
+      { scale.mode && <p>Scale mode : {scale.mode}</p> }
       <select onChange={(e) => { setScaleIntervals(SCALES[e.target.value].intervals) }}>
         {Object.keys(SCALES).map(s => <option key={s}>{s}</option>)}
       </select>
-      <GuitarNeck
-        highlightFret={({ note }) => noteExistsInScale(scale, note)}
-        getFret={({ note }) => noteExistsInScale(scale, note) ? <p>{ getNoteNameWithoutPitch(getNoteInScale(scale, note)) }</p> : <p></p>}
-      />
+      <div className='py-4'>
+        <GuitarNeck
+          highlightFret={({ note }) => noteExistsInScale(scale, note)}
+          getFret={(props) =>
+            <Fret
+              {...props}
+              getNoteInScale={(note) => getNoteInScale(scale, note)}
+              noteExistsInScale={(note) => noteExistsInScale(scale, note)}
+              isNoteScaleRoot={(note) => isNoteScaleRoot(scale, note)}
+            />
+          }
+        />
+      </div>
+      <p>Here are the chords I can identify for each note within the scale :</p>
+      <ul className='py-5'>
+        {scale.scaleChords.map(chord =>
+          chord.notation && <li key={`${chord.root.name}${chord.notation}`}>
+            <p>
+              <span>{chord.root.name}</span>
+              <span>{chord.notation} :</span>
+              <span>{chord.notes.map(note => ` ${note.SPN.replace(/[0-9]/, '')}`)}</span>
+            </p>
+          </li>
+        )}
+      </ul>
+      <p>Select notes from the scale to find a chord :</p>
       <ul className='flex'>
         {scale.notes.map(n => (
           <li key={n.SPN}>
@@ -135,10 +159,11 @@ function BuildScale() {
           </li>
         ))}
       </ul>
-      {chord ? <p>
+      {chord && (<p>
+        <span></span>
         <span>{t(`mtts.notes.${chord.root.name}`)}</span>
         <span>{chord.notation}</span>
-      </p> : null}
+      </p>)}
     </div>
   )
 }

components/mtts/instruments/guitar/_guitar-fret.tsx

@@ -5,7 +5,7 @@ import { Note } from 'mtts'
 import classNames from 'classnames'
 
 export type FHighlight = ({ note, stringNumber, fretNumber }: { note: Note, stringNumber?: number, fretNumber?: number }) => boolean
-export type FGetFret = ({ note, stringNumber, fretNumber, highlighted }: { note?: Note, highlighted?: boolean, stringNumber?: number, fretNumber?: number }) => React.JSX.Element | null | string
+export type FGetFret = ({ note, stringNumber, fretNumber, highlighted }: { note: Note, highlighted: boolean, stringNumber: number, fretNumber: number }) => React.JSX.Element | null | string
 
 export interface GuitarFretProps {
   stringNumber: number,
@@ -17,17 +17,8 @@ export interface GuitarFretProps {
 
 function GuitarFret ({ note, stringNumber, fretNumber, highlight, getFret }: GuitarFretProps) {
   const highlighted = highlight({ note, stringNumber, fretNumber })
-  return <div className='border border-collapse'>
-    <div
-      className={classNames({
-        'bg-mtts-dark-violet color-white rounded text-white': highlight({ note, stringNumber, fretNumber }),
-        'p-2 m-2 w-10 flex align-items border-left-1': true
-      })}
-    >
-      <div className="m-auto">
-        {getFret({ note, stringNumber, fretNumber, highlighted })}
-      </div>
-    </div>
+  return <div className={classNames({ 'border border-collapse': fretNumber !== 0 })}>
+    {getFret({ note, stringNumber, fretNumber, highlighted })}
   </div>
 }
 

components/mtts/instruments/guitar/guitar-neck.tsx

@@ -6,12 +6,12 @@ import GuitarString, { GuitarStringProps } from './_guitar-string'
 import { FGetFret, FHighlight } from './_guitar-fret'
 
 const DEFAULT_GUITAR_TUNING = (() => [
-  new Note({ name: 'E', pitch: new Pitch({ value: 2 }) }).SPN,
-  new Note({ name: 'A', pitch: new Pitch({ value: 2 }) }).SPN,
-  new Note({ name: 'D', pitch: new Pitch({ value: 3 }) }).SPN,
-  new Note({ name: 'G', pitch: new Pitch({ value: 3 }) }).SPN,
+  new Note({ name: 'E', pitch: new Pitch({ value: 4 }) }).SPN,
   new Note({ name: 'B', pitch: new Pitch({ value: 3 }) }).SPN,
-  new Note({ name: 'E', pitch: new Pitch({ value: 4 }) }).SPN
+  new Note({ name: 'G', pitch: new Pitch({ value: 3 }) }).SPN,
+  new Note({ name: 'D', pitch: new Pitch({ value: 3 }) }).SPN,
+  new Note({ name: 'A', pitch: new Pitch({ value: 2 }) }).SPN,
+  new Note({ name: 'E', pitch: new Pitch({ value: 2 }) }).SPN
 ])()
 const DEFAULT_FRET_NUMBERS = 24
 
@@ -38,7 +38,7 @@ function GuitarNeck ({
 
   return <div>
     <ul className="flex flex-col">
-      { strings.map(string => <GuitarString key={`string-${string.stringNumber}`} {...string} />)}
+      { strings.map((string, stringNumber) => <GuitarString key={`string-${string.stringNumber}`} stringNumber={stringNumber} {...string} />)}
     </ul>
   </div>
 }

package.json

@@ -17,7 +17,7 @@
     "i18next": "^19.0.3",
     "markdown-it": "^10.0.0",
     "moment": "^2.24.0",
-    "mtts": "^0.0.1",
+    "mtts": "^0.0.2",
     "next": "^13.4.4",
     "node-sass": "^9.0.0",
     "prismjs": "^1.20.0",

styles/blog.scss

@@ -6,6 +6,7 @@
     a {
       @apply no-underline;
       @apply text-4xl;
+      @apply pr-4;
     }
   }