aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--public/main.css4
-rw-r--r--src/chord.ts22
-rw-r--r--src/view/form.ts19
-rw-r--r--src/view/options.ts6
-rw-r--r--src/view/play.ts5
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)
)
}