ReasonML p5.js Stopwatch

reason_p5_stopwatch.re

type p5;

type sketch;

type button;

type state =
  | Initializing
  | NotStarted(button)
  | Running(button, int)
  | Stopped(button, int);

[@bs.module] [@bs.new] external createP5: (sketch => unit) => p5 = "p5";
[@bs.send] external createCanvas: (sketch, int, int) => unit = "createCanvas";
[@bs.send] external noCanvas: sketch => unit = "noCanvas";
[@bs.set] external onSetup: (sketch, unit => unit) => unit = "setup";
[@bs.set] external onDraw: (sketch, unit => unit) => unit = "draw";
[@bs.send] external millis: sketch => int = "millis";
[@bs.send] external createButton: (sketch, string) => button = "createButton";
[@bs.send] external html: (button, string) => unit = "html";
[@bs.send]
external mousePressed: (button, unit => unit) => unit = "mousePressed";
[@bs.send] external nfc: (sketch, float, int) => string = "nfc";

let makeSketch = s => {
  let appState = ref(Initializing);

  let btnPressed = () =>
    switch (appState^) {
    | NotStarted(btn) => appState := Running(btn, millis(s))
    | Running(btn, time) => appState := Stopped(btn, time)
    | Stopped(btn, _) =>
      appState := NotStarted(btn);
      btn->html("Start");
    | _ => ()
    };

  s->onSetup(() => {
      s->noCanvas;
      let btn = s->createButton("Start");
      btn->mousePressed(btnPressed);
      appState := NotStarted(btn);
    });

  s->onDraw(() =>
      switch (appState^) {
      | Running(btn, time) =>
        let seconds = float(millis(s) - time) /. 1000.0;
        let str = s->nfc(seconds, 2);

        btn->html(str ++ " Seconds");
      | _ => ()
      }
    );
};

createP5(makeSketch);