1 files changed, 46 insertions, 41 deletions
diff --git a/src/view/timer.ts b/src/view/timer.ts
index 07b5db3..3cdf0d7 100644
--- a/src/view/timer.ts
+++ b/src/view/timer.ts
@@ -1,5 +1,5 @@
 import * as Config from 'config'
-import * as State from 'state'
+import * as Step from 'step'
 import * as Arc from 'arc'
 import * as Router from 'router'
 import * as Audio from 'audio'
@@ -16,29 +16,35 @@ export function clearInterval() {
   }
 }
 
+interface State {
+  isPlaying: boolean,
+  elapsed: number
+}
+
 export function view(config: Config.Config, showPage: (route: Router.Route) => void) {
 
   const formUrl = `${Router.toString({ name: 'form', config })}`
   const duration = Config.getDuration(config)
 
   // State
-  let isPlaying = true
-  let elapsed = 0
-  let state = State.getAt(config, elapsed)
+  let state = {
+    isPlaying: true,
+    elapsed: 0
+  }
 
   // Elements
-  const section = h('section', { className: timerClass(state.step) })
-  const stepElt = document.createTextNode(State.prettyPrintStep(state.step))
-  const stepInfoElt = document.createTextNode(state.info)
+  const initStep = Step.getAt(config, state.elapsed)
+  const section = h('section', { className: timerClass(initStep) })
+  const stepElt = document.createTextNode(Step.prettyPrint(initStep))
   const arcPathElt = h('path', { class: 'g-Timer__ArcProgress' })
 
   const updateDom = () => {
-    const angle = Math.min(359.999, elapsed / duration * 360)
+    const step = Step.getAt(config, state.elapsed)
+    const angle = Math.min(359.999, state.elapsed / duration * 360)
     arcPathElt.setAttribute("d", Arc.describe(0, 0, 90, 0, angle))
-    section.className = timerClass(state.step)
-    stepElt.textContent = State.prettyPrintStep(state.step)
-    stepInfoElt.textContent = state.info
-    Audio.playFromStep(config, state)
+    section.className = timerClass(step)
+    stepElt.textContent = Step.prettyPrint(step)
+    Audio.playFromStep(config, step, state.elapsed)
   }
 
   const quit = () => {
@@ -49,10 +55,9 @@ export function view(config: Config.Config, showPage: (route: Router.Route) => v
   }
 
   const update = () => {
-    if (isPlaying) {
-      elapsed = elapsed + 1
-      state = State.getAt(config, elapsed)
-      elapsed >= duration + endDuration
+    if (state.isPlaying) {
+      state.elapsed = state.elapsed + 1
+      state.elapsed >= duration + endDuration
         ? quit()
         : updateDom()
     }
@@ -66,7 +71,7 @@ export function view(config: Config.Config, showPage: (route: Router.Route) => v
   interval = window.setInterval(update, 1000)
 
   // Play initial audio
-  Audio.playFromStep(config, state)
+  Audio.playFromStep(config, initStep, state.elapsed)
 
   section.append(
     h('div',
@@ -83,31 +88,30 @@ export function view(config: Config.Config, showPage: (route: Router.Route) => v
         ...arcPaths(config),
         arcPathElt
       ),
-      h('div', { className: 'g-Timer__Step' }, stepElt),
-      h('div', {}, stepInfoElt)
+      stepElt
     ),
     h('div',
       { className: 'g-Timer__Buttons' },
       h('button',
-        { className: 'g-Timer__Button',
+        { className: 'g-Button',
           onclick: (e: MouseEvent) => {
-            isPlaying = !isPlaying
+            state.isPlaying = !state.isPlaying
             const elt = e.target as HTMLElement
-            elt.textContent = isPlaying
+            elt.textContent = state.isPlaying
               ? 'pause'
               : 'resume'
-            elt.className = isPlaying
-              ? 'g-Timer__Button'
-              : 'g-Timer__Button g-Timer__Button--Active'
+            elt.className = state.isPlaying
+              ? 'g-Button'
+              : 'g-Button g-Button--Active'
           }
         },
-        'pause'
+        'Pause'
       ),
       h('a',
-        { className: 'g-Timer__Button',
+        { className: 'g-Button',
           href: formUrl
         },
-        'quit'
+        'Quit'
       )
     )
   )
@@ -123,7 +127,7 @@ function arcPaths(config: Config.Config): Element[] {
 
   let arc = (kind: string, duration: number): Element => {
     const startAngle = 360 * t / totalDuration
-    const endAngle = 360 * (t + duration) / totalDuration
+    const endAngle = Math.min(360 * (t + duration) / totalDuration, 359.999)
 
     t += duration
 
@@ -138,7 +142,7 @@ function arcPaths(config: Config.Config): Element[] {
     paths.push(arc('WarmUp', config.warmup))
   }
 
-  for (let tabata = 0; tabata < config.tabatas; tabata++) {
+  for (let tabata = 0; tabata < config.tabatas.length; tabata++) {
     paths.push(arc('Prepare', config.prepare))
     for (let cycle = 0; cycle < config.cycles; cycle++) {
       paths.push(arc('Work', config.work))
@@ -149,16 +153,17 @@ function arcPaths(config: Config.Config): Element[] {
   return paths
 }
 
-function timerClass(step: State.Step): string {
-  if (step === State.Step.WarmUp) {
-    return 'g-Layout__Page g-Timer g-Timer--WarmUp'
-  } else if (step === State.Step.Work) {
-    return 'g-Layout__Page g-Timer g-Timer--Work'
-  } else if (step === State.Step.Rest) {
-    return 'g-Layout__Page g-Timer g-Timer--Rest'
-  } else if (step === State.Step.Prepare) {
-    return 'g-Layout__Page g-Timer g-Timer--Prepare'
-  } else {
-    return 'g-Layout__Page g-Timer'
+function timerClass(step: Step.Step): string {
+  switch (step.name) {
+    case 'warmup':
+      return 'g-Layout__Page g-Timer g-Timer--WarmUp'
+    case 'prepare':
+      return 'g-Layout__Page g-Timer g-Timer--Prepare'
+    case 'work':
+      return 'g-Layout__Page g-Timer g-Timer--Work'
+    case 'rest':
+      return 'g-Layout__Page g-Timer g-Timer--Rest'
+    case 'end':
+      return 'g-Layout__Page g-Timer'
   }
 }