ok-ready-go/js/localState.js

document.addEventListener("alpine:init", () => {
  Alpine.store("localState", {
    _state: 0,
    // 0: idle
    // 1: starting
    // 2: running
    // 3: sending time to mqtt
    // 4: stopped
    // 5: connecting to mqtt

    startedAt: null,
    time: null,
    stateHint: "",
    password: null,

    init() {
      Alpine.effect(() => {
        if (this.password == null) {
          this.password = localStorage.getItem("password");
        } else {
          localStorage.setItem("password", this.password);
        }

        const mqtt = Alpine.store("mqtt");
        if (!mqtt) return;
        if (this.password == null || this.password == "") {
          mqtt.disconnect();
        } else {
          mqtt.connect();
        }
      });

      Alpine.effect(() => {
        switch (this._state) {
          case 0:
            this.stateHint = "Tap here to start";
            break;
          case 1:
            this.stateHint = "Get ready...";
            break;
          case 2:
            this.stateHint = "Tap anywhere to stop";
            break;
          case 3:
            this.stateHint = "Sending time to MQTT...";
            break;

          case 4:
            this.stateHint = "Tap here to reset";
            break;
        }
      });
    },

    next() {
      playAudio(document.getElementById("sound-silence"));

      if (this._state == 1 || this._state == 3) return;

      this._setState((this._state + 1) % 5);
    },

    _setState(state) {
      switch (state) {
        case 0: {
          this.startedAt = null;
          this.time = null;
          break;
        }
        case 1: {
          playAudio(document.getElementById("sound-ok-ready-go")).then(() => {
            Alpine.store("localState")._setState(2);
          });
          break;
        }
        case 2: {
          this.startedAt = new Date().getTime() - 200;
          break;
        }
        case 3: {
          this.time =
            Math.floor(((new Date().getTime() - this.startedAt) / 1000).toFixed(2) * 1000);
          this.startedAt = null;
          sayNumber(this.time / 10);

          if (Alpine.store("mqtt").connected) {
            Alpine.store("mqtt")
              .sendTime(this.time)
              .then(() => {
                Alpine.store("localState")._setState(4);
              });
            break;
          }

          state = 4;
          break;
        }
        default:
            break;
      }

      this._state = state;
    },
  });
});