Timer

export const TimerStyle = forSlots(TimerSlots)(Recipes.Timer({ progress: 'bar' }))

/** The time counted is the timer's Model, folded with `Timer.update`; its ticks are its Commands. */
export const timerCountdown = <Message>(
  style: NamedStyle<typeof TimerSlots>,
  model: Timer.Model,
  onMessage: (message: Timer.Message) => Message,
  h: HtmlBuilder<Message>,
): Html => Timer.view({ model, onMessage, label: 'Tea', units: ['minutes', 'seconds'], style }, h)

/** A stopwatch whose Model ticks every 10ms (`Timer.init({ id, interval: 10 })`), so hundredths show. */
export const timerStopwatch = <Message>(
  style: NamedStyle<typeof TimerSlots>,
  model: Timer.Model,
  onMessage: (message: Timer.Message) => Message,
  h: HtmlBuilder<Message>,
): Html =>
  Timer.view(
    {
      model,
      onMessage,
      label: 'Lap',
      units: ['minutes', 'seconds', 'milliseconds'],
      labels: { start: 'Go', restart: 'Again' },
      style,
    },
    h,
  )