2 files changed, 27 insertions, 20 deletions

diff --git a/src/view/form.ts b/src/view/form.ts
index 60e5f08..0b04cfb 100644
--- a/src/view/form.ts
+++ b/src/view/form.ts
@@ -36,12 +36,13 @@ export function view(config: Config.Config, showPage: (route: Router.Route) => v
             history.pushState({}, '', Router.toString(timerRoute))
             showPage(timerRoute)
         }},
-        labelledInput('prepare', 0, config.prepare, n => { config.prepare = n; wd()}),
-        labelledInput('tabatas', 1, config.tabatas, n => { config.tabatas = n; wd()}),
-        labelledInput('cycles', 1, config.cycles, n => { config.cycles = n; wd()}),
-        labelledInput('work', 5, config.work, n => { config.work = n; wd()}),
-        labelledInput('rest', 5, config.rest, n => { config.rest = n; wd()}),
-        h('div', { className: 'g-Form__Duration' }, 'duration', h('div', {}, duration)),
+        labelledInput('Warm Up', 0, config.warmup, n => { config.warmup = n; wd()}),
+        labelledInput('Tabatas', 1, config.tabatas, n => { config.tabatas = n; wd()}),
+        labelledInput('Prepare', 0, config.prepare, n => { config.prepare = n; wd()}),
+        labelledInput('Cycles', 1, config.cycles, n => { config.cycles = n; wd()}),
+        labelledInput('Work', 5, config.work, n => { config.work = n; wd()}),
+        labelledInput('Rest', 5, config.rest, n => { config.rest = n; wd()}),
+        h('div', { className: 'g-Form__Duration' }, 'Duration:', h('div', {}, duration)),
         h('button', { className: 'g-Form__Start' }, 'start'))
   )
 }
diff --git a/src/view/timer.ts b/src/view/timer.ts
index ddcea71..061f5d4 100644
--- a/src/view/timer.ts
+++ b/src/view/timer.ts
@@ -7,6 +7,8 @@ import h from 'h'
 
 let interval: number | undefined = undefined
 
+const endDuration: number = 4
+
 export function clearInterval() {
   if (interval !== undefined) {
     window.clearInterval(interval)
@@ -27,21 +29,22 @@ export function view(config: Config.Config, showPage: (route: Router.Route) => v
   // Elements
   const section = h('section', { className: timerClass(state.step) })
   const stepElt = document.createTextNode(State.prettyPrintStep(state.step))
-  const stepCountElt = document.createTextNode(stepCount(state))
+  const stepInfoElt = document.createTextNode(state.info)
   const arcPathElt = h('path', { class: 'g-Timer__ArcProgress' })
 
   const updateDom = () => {
-    const angle = elapsed / duration * 360
+    const angle = Math.min(359.999, elapsed / duration * 360)
     arcPathElt.setAttribute("d", Arc.describe(0, 0, 90, 0, angle))
     section.className = timerClass(state.step)
     stepElt.textContent = State.prettyPrintStep(state.step)
-    stepCountElt.textContent = stepCount(state)
+    stepInfoElt.textContent = state.info
     Audio.playFromStep(config, state)
   }
 
   const quit = () => {
     const formRoute = { kind: Router.Kind.Form, config }
     history.pushState({}, '', Router.toString(formRoute))
+    clearInterval()
     showPage(formRoute)
   }
 
@@ -49,7 +52,7 @@ export function view(config: Config.Config, showPage: (route: Router.Route) => v
     if (isPlaying) {
       elapsed = elapsed + 1
       state = State.getAt(config, elapsed)
-      elapsed > duration
+      elapsed >= duration + endDuration
         ? quit()
         : updateDom()
     }
@@ -62,6 +65,9 @@ export function view(config: Config.Config, showPage: (route: Router.Route) => v
   }
   interval = window.setInterval(update, 1000)
 
+  // Play initial audio
+  Audio.playFromStep(config, state)
+
   section.append(
     h('div',
       { className: 'g-Timer__Dial' },
@@ -78,7 +84,7 @@ export function view(config: Config.Config, showPage: (route: Router.Route) => v
         arcPathElt
       ),
       h('div', { className: 'g-Timer__Step' }, stepElt),
-      h('div', {}, stepCountElt)
+      h('div', {}, stepInfoElt)
     ),
     h('div',
       { className: 'g-Timer__Buttons' },
@@ -128,6 +134,10 @@ function arcPaths(config: Config.Config): Element[] {
     )
   }
 
+  if (config.warmup > 0) {
+    paths.push(arc('WarmUp', config.warmup))
+  }
+
   for (let tabata = 0; tabata < config.tabatas; tabata++) {
     paths.push(arc('Prepare', config.prepare))
     for (let cycle = 0; cycle < config.cycles; cycle++) {
@@ -140,19 +150,15 @@ function arcPaths(config: Config.Config): Element[] {
 }
 
 function timerClass(step: State.Step): string {
-  if (step === State.Step.Work) {
+  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 {
+  } else if (step === State.Step.Prepare) {
     return 'g-Layout__Page g-Timer g-Timer--Prepare'
-  }
-}
-
-function stepCount(state: State.State): string {
-  if (state.step === State.Step.Work || state.step === State.Step.Rest) {
-    return `#${state.tabata.toString()}.${state.cycle.toString()}`
   } else {
-    return `#${state.tabata.toString()}`
+    return 'g-Layout__Page g-Timer'
   }
 }