1 files changed, 48 insertions, 0 deletions
diff --git a/src/view/play.ts b/src/view/play.ts
new file mode 100644
index 0000000..26558cd
--- /dev/null
+++ b/src/view/play.ts
@@ -0,0 +1,48 @@
+import h, { classNames } from 'lib/h'
+import * as dom from 'lib/dom'
+import { Options } from 'view/options'
+import * as chord from 'chord'
+import * as layout from 'view/layout'
+
+export function view(options: Options): Element[] {
+  let chords = h('div', 
+    { className: 'g-Play' }, 
+    chordNode(),
+    chordNode(),
+    chordNode(options),
+    chordNode(options)
+  )
+
+  let chordBeat = 1
+
+  dom.triggerAnimation(chords as HTMLElement, 'g-Play--Shift')
+  dom.triggerAnimation(chords.children[2] as HTMLElement, 'g-Chord--Beat')
+  setInterval(() => {
+    if (chordBeat == options.beatsPerChord) {
+      shiftChords(chords, options)
+      chords.children[0].classList.remove('g-Chord--Beat')
+      dom.triggerAnimation(chords as HTMLElement, 'g-Play--Shift')
+      dom.triggerAnimation(chords.children[2] as HTMLElement, 'g-Chord--Beat')
+      chordBeat = 1
+    } else {
+      dom.triggerAnimation(chords.children[2] as HTMLElement, 'g-Chord--Beat')
+      chordBeat += 1
+    }
+  }, 60 / options.bpm * 1000)
+
+  return layout.view(chords)
+}
+
+/* Shift chords and generate a new random one.
+ */
+function shiftChords(chords: Element, options: Options) {
+  chords.removeChild(chords.children[0])
+  chords.appendChild(chordNode(options))
+}
+
+function chordNode(options?: Options): Element {
+  return h('div', 
+    { className: 'g-Chord' }, 
+    options ? chord.generate(options) : ''
+  )
+}