timer

-- 7GUIs task 4 — Timer.
--
-- The tick is an event: the platform fires `@tick` at frame
-- cadence with the elapsed milliseconds as payload, through the
-- same queue user events use — competing user/timer interactions
-- serialize by construction. Stopping IS the clamp: once
-- `elapsed` reaches `duration` the handler adds nothing, and
-- raising the duration past `elapsed` resumes ticking.
-- @cmd — zo run 004_timer.zo

load core::zsx::*;
load core::math::round;

fun one_decimal(x: float) -> float {
  round(x * 10.0) / 10.0
}

fun main() {
  mut elapsed: float = 0.0;
  mut duration: float = 15.0;
  mut shown: str = "0";

  imu timer: </> ::= <div @tick={fn(e) => {
    match e.value.parse_float() {
      Option::Some(dt_ms) => {
        if elapsed < duration {
          mut next: float = elapsed + dt_ms / 1000.0;

          if next > duration {
            next = duration;
          }

          elapsed = next;
          shown = one_decimal(elapsed).to_str();
        }
      }
      Option::None => {}
    };
  }}>
    <span>Elapsed time:</span>
    <progress value={elapsed} max={duration} />
    <p>{shown}s</p>
    <span>Duration:</span>
    <input
      type="range"
      min="0"
      max="60"
      step="0.1"
      value={duration}
      @input={fn(e) => {
        match e.value.parse_float() {
          Option::Some(next) => duration = next,
          Option::None => {}
        };
      }}
    />
    <button @click={fn() => {
      elapsed = 0.0;
      shown = "0";
    }}>Reset</button>
  </div>;

  #render timer;
}