Add seventh chords

5 files changed, 45 insertions, 11 deletions

diff --git a/public/main.css b/public/main.css
index 3c850c2..fd5595f 100644
--- a/public/main.css
+++ b/public/main.css
@@ -93,6 +93,10 @@ header {
   width: fit-content;
 }
 
+.g-ChordLabel {
+  font-family: chords;
+}
+
 .g-Form input[type="number"] {
   width: var(--spacing-whale);
 }
diff --git a/src/chord.ts b/src/chord.ts
index b2645e2..0584727 100644
--- a/src/chord.ts
+++ b/src/chord.ts
@@ -1,14 +1,24 @@
 export type Options = {
   major: boolean,
-  minor: boolean
+  minor: boolean,
+  seventh: boolean,
+  minorSeventh: boolean,
+  majorSeventh: boolean,
 }
 
-export function generate({ major, minor }: Options): string {
-  let choices: string[] = []
-  if (major) choices = choices.concat(all)
-  if (minor) choices = choices.concat(all.map(chord => `${chord}m`))
+export function generate(o: Options): [string, string] {
 
-  return choices[Math.floor(Math.random() * choices.length)]
+  let base = all[Math.floor(Math.random() * all.length)]
+
+
+  let alterations: string[] = []
+  if (o.major) alterations = alterations.concat('')
+  if (o.minor) alterations = alterations.concat('-')
+  if (o.seventh) alterations = alterations.concat('7')
+  if (o.minorSeventh) alterations = alterations.concat('-7')
+  if (o.majorSeventh) alterations = alterations.concat('7')
+
+  return [base, alterations[Math.floor(Math.random() * alterations.length)]]
 }
 
 const all: string[] = [ 'C', 'D♭', 'D', 'E♭', 'E', 'F', 'G♭', 'G', 'A♭', 'A', 'B♭', 'B' ]
diff --git a/src/view/form.ts b/src/view/form.ts
index a74a7de..67df0d4 100644
--- a/src/view/form.ts
+++ b/src/view/form.ts
@@ -16,8 +16,11 @@ export function view(): Element[] {
         className: 'g-Form', 
         onsubmit 
       },
-      labelInput({ type: 'checkbox', name: 'major', label: 'Major', checked: opts.major }),
-      labelInput({ type: 'checkbox', name: 'minor', label: 'Minor', checked: opts.minor }),
+      chordCheckbox({ name: 'major', label: '', checked: opts.major }),
+      chordCheckbox({ name: 'minor', label: '-', checked: opts.minor }),
+      chordCheckbox({ name: 'seventh', label: '7', checked: opts.seventh }),
+      chordCheckbox({ name: 'minorSeventh', label: '-7', checked: opts.minorSeventh }),
+      chordCheckbox({ name: 'majorSeventh', label: '7', checked: opts.majorSeventh }),
       labelInput({ type: 'number', name: 'bpm', label: 'BPM', value: opts.bpm.toString() }),
       labelInput({ type: 'number', name: 'beatsPerChord', label: 'Beats per Chord', value: opts.beatsPerChord.toString() }),
       h('input', { type: 'submit', value: 'Play' })
@@ -25,12 +28,19 @@ export function view(): Element[] {
   )
 }
 
+function chordCheckbox({ name, label, checked }: any): Element {
+  return labelInput({ className: 'g-ChordLabel', type: 'checkbox', name, label, checked })
+}
+
 function onsubmit(event: Event): void {
   event.preventDefault()
   let input = (name: String) => document.querySelector(`input[name="${name}"]`) as HTMLInputElement
   let opts = {
     major: input('major').checked,
     minor: input('minor').checked,
+    seventh: input('seventh').checked,
+    minorSeventh: input('minorSeventh').checked,
+    majorSeventh: input('majorSeventh').checked,
     bpm: parseInt(input('bpm').value),
     beatsPerChord: parseInt(input('beatsPerChord').value)
   }
@@ -39,6 +49,7 @@ function onsubmit(event: Event): void {
 }
 
 type LabelInputParams = {
+  className?: string,
   type: string,
   name: string,
   label: string,
@@ -46,9 +57,9 @@ type LabelInputParams = {
   value?: string
 }
 
-function labelInput({ type, name, label, checked, value }: LabelInputParams) {
+function labelInput({ className, type, name, label, checked, value }: LabelInputParams) {
   return h('label',
-    {},
+    { className },
     h('input', { type, name, checked, value }),
     label
   )
diff --git a/src/view/options.ts b/src/view/options.ts
index 4c71be2..4a57f97 100644
--- a/src/view/options.ts
+++ b/src/view/options.ts
@@ -1,6 +1,9 @@
 export type Options = {
   major: boolean,
   minor: boolean,
+  seventh: boolean,
+  minorSeventh: boolean,
+  majorSeventh: boolean,
   bpm: number,
   beatsPerChord: number
 }
@@ -8,6 +11,9 @@ export type Options = {
 let defaultOptions: Options = {
   major: true,
   minor: false,
+  seventh: false,
+  minorSeventh: false,
+  majorSeventh: false,
   bpm: 90,
   beatsPerChord: 4
 }
diff --git a/src/view/play.ts b/src/view/play.ts
index 20da6c7..f0340f7 100644
--- a/src/view/play.ts
+++ b/src/view/play.ts
@@ -39,8 +39,11 @@ function shiftChords(chords: Element, options: Options) {
 }
 
 function chordNode(options?: Options): Element {
+  let [base, alteration] = options ? chord.generate(options) : ['', '']
+
   return h('div', 
     { className: 'g-Chord' }, 
-    options ? chord.generate(options) : ''
+    base,
+    h('sup', {}, alteration)
   )
 }