1 files changed, 49 insertions, 40 deletions
diff --git a/src/view/play.ts b/src/view/play.ts
index f0340f7..b85e505 100644
--- a/src/view/play.ts
+++ b/src/view/play.ts
@@ -1,49 +1,58 @@
-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'
+import { h, withVar, Html } from 'lib/rx'
+import * as Options from 'view/options'
+import * as Chord from 'chord'
 
-export function view(options: Options): Element[] {
-  let chords = h('div', 
-    { className: 'g-Play' }, 
-    chordNode(),
-    chordNode(options),
-    chordNode(options)
-  )
-
-  let chordBeat = 1
+interface ViewParams {
+  options: Options.Model
+}
 
-  dom.triggerAnimation(chords.children[1] 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[1] as HTMLElement, 'g-Chord--Beat')
-      chordBeat = 1
-    } else {
-      dom.triggerAnimation(chords.children[1] as HTMLElement, 'g-Chord--Beat')
-      chordBeat += 1
-    }
-  }, 60 / options.bpm * 1000)
+export function view({ options }: ViewParams): Html {
+  const initChords: Array<[string, string]> = [['', ''], Chord.generate(options), Chord.generate(options)]
 
-  return layout.view(chords)
-}
+  return withVar(initChords, (chords, updateChords) =>
+    withVar(undefined, (beat, updateBeat) => {
+      let chordBeat = 1
+      const interval = setInterval(() => {
+        if (chordBeat === options.beatsPerChord) {
+          updateChords(xs => {
+            xs.shift()
+            xs.push(Chord.generate(options))
+            return xs
+          })
+          chordBeat = 1
+        } else {
+          updateBeat(_ => undefined)
+          chordBeat += 1
+        }
+      }, 60 / options.bpm * 1000)
 
-/* Shift chords and generate a new random one.
- */
-function shiftChords(chords: Element, options: Options) {
-  chords.removeChild(chords.children[0])
-  chords.appendChild(chordNode(options))
+      return h('div',
+        { className: 'g-Play',
+          onunmount: () => clearInterval(interval)
+        },
+        chords.map(xs =>
+          h('div',
+            { className: 'g-Chords' },
+            xs.map((chord, i) => {
+              if (i == 0) {
+                return viewChord(chord, 'g-Chord--Disappear')
+              } else if (i == 1) {
+                return beat.map(_ => viewChord(chord))
+              } else {
+                return viewChord(chord)
+              }
+            })
+          )
+        )
+      )
+    })
+  )
 }
 
-function chordNode(options?: Options): Element {
-  let [base, alteration] = options ? chord.generate(options) : ['', '']
-
-  return h('div', 
-    { className: 'g-Chord' }, 
+function viewChord([base, alteration]: [string, string], className: string = ''): Html {
+  return h('div',
+    { className: `g-Chord ${className}` },
     base,
-    h('sup', {}, alteration)
+    h('sup', alteration)
   )
 }