whose-turn-is-it/index.js

function JoinForm() {
  return {
    formData: {
      name: "",
    },
    submitForm() {
      Alpine.store("localState").join(this.formData.name);
    },
  };
}

function uuidv4() {
  return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>
    (
      c ^
      (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))
    ).toString(16)
  );
}

function Timer() {
  return {
    time: 0,
    init() {
      setInterval(() => {
        const lastPlayerSwitch = Alpine.store("remoteState").lastPlayerSwitch;
        console.log(lastPlayerSwitch);
        if (!lastPlayerSwitch) {
          this.time = null;
        } else {
          this.time = parseInt(
            (90000 - (new Date().getTime() - lastPlayerSwitch)) / 1000
          );
        }
      }, 100);
    },
  };
}

document.addEventListener("alpine:init", () => {
  console.log("Alpine.js is ready to go!");

  Alpine.store("localState", {
    joined: false,
    nextPlayer: null,
    name: "",
    id: "",

    init() {
      Alpine.effect(() => {
        if (this.joined) {
          Alpine.store("remoteState").connect();
        }
      });

      this.restore();
    },

    join(name) {
      this.joined = true;
      this.name = name;
      this.id = uuidv4();
      localStorage.clear();
      localStorage.setItem("joined", this.joined);
      localStorage.setItem("name", this.name);
      localStorage.setItem("id", this.id);
    },

    leave() {
      this.joined = false;
      this.name = "";
      localStorage.clear();
      localStorage.setItem("id", this.id);
      Alpine.store("remoteState").disconnect();
    },

    restore() {
      const joined = localStorage.getItem("joined");
      if (joined) {
        this.joined = true;
        this.name = localStorage.getItem("name");
        this.id = localStorage.getItem("id");
      }
    },
  });

  Alpine.store("remoteState", {
    players: [],
    currentPlayer: null,
    lastPlayerSwitch: null,
    connected: false,
    isMyTurn: false,
    _client: null,

    init() {
      Alpine.effect(() => {
        if (
          this.connected &&
          Object.keys(this.players).indexOf(Alpine.store("localState").id) ===
            -1
        ) {
          this._client.publish(
            "im.dorian.whos-turn-is-it.players",
            JSON.stringify({
              [Alpine.store("localState").id]: Alpine.store("localState").name,
              ...this.players,
            }),
            { qos: 1, retain: true }
          );
        }
      });

      Alpine.effect(() => {
        if (this.currentPlayer == Alpine.store("localState").id) {
          this.isMyTurn = true;
        } else {
          this.isMyTurn = false;
        }
      });

      Alpine.effect(() => {
        if (
          Alpine.store("localState").nextPlayer == null ||
          Alpine.store("localState").nextPlayer ==
            Alpine.store("localState").id ||
          !Object.keys(this.players).includes(
            Alpine.store("localState").nextPlayer
          )
        ) {
          const players = Object.keys(this.players).sort();
          const nextPlayer =
            players[
              (players.indexOf(Alpine.store("localState").id) + 1) %
                players.length
            ];
          Alpine.store("localState").nextPlayer = nextPlayer;
        }
      });

      Alpine.effect(() => {
        if (this.isMyTurn) {
          Alpine.store("audio").playDing();
        }
      });
    },

    connect() {
      const url = "wss://broker.emqx.io:8084/mqtt";

      const options = {
        // Clean session
        clean: true,
        connectTimeout: 4000,
        // Authentication
        clientId: Alpine.store("localState").id,
      };

      this._client = mqtt.connect(url, options);
      const client = this._client;
      this._client.on("connect", function () {
        // Subscribe to a topic
        client.subscribe("im.dorian.whos-turn-is-it.players");
        client.subscribe("im.dorian.whos-turn-is-it.currentPlayer");
      });

      this._client.on("message", function (topic, message) {
        // message is Buffer
        console.log(topic, message.toString());

        if (topic === "im.dorian.whos-turn-is-it.players") {
          const data = JSON.parse(message.toString());
          if (!Alpine.store("remoteState").connected) {
            Alpine.store("remoteState").connected = true;
          }
          Alpine.store("remoteState").players = data;
        } else if (topic === "im.dorian.whos-turn-is-it.currentPlayer") {
          const data = JSON.parse(message.toString());
          Alpine.store("remoteState").currentPlayer = data.id;
          Alpine.store("remoteState").lastPlayerSwitch = data.since;
        }
      });
    },

    giveTurnToNextPlayer() {
      this._client.publish(
        "im.dorian.whos-turn-is-it.currentPlayer",
        JSON.stringify({
          id: Alpine.store("localState").nextPlayer,
          since: new Date().getTime(),
        }),
        { qos: 1, retain: true }
      );
    },

    disconnect() {
      this._client.end(true);
    },

    clear() {
      this._client.publish(
        "im.dorian.whos-turn-is-it.players",
        JSON.stringify({
          [Alpine.store("localState").id]: Alpine.store("localState").name,
        }),
        { qos: 1, retain: true }
      );
      this._client.publish(
        "im.dorian.whos-turn-is-it.currentPlayer",
        JSON.stringify({
          id: Alpine.store("localState").id,
          since: new Date().getTime(),
        }),
        { qos: 1, retain: true }
      );
    },
  });

  Alpine.store("audio", {
    hasBeenTested: false,
    isAvailable: false,
    isEnabled: false,
    audioPlayer: null,

    init() {
      this.audioPlayer = new Audio("silence.mp3");

      Alpine.effect(() => {
        localStorage.setItem("audio_enabled", this.isEnabled);
      });
    },

    testPermission() {
      if (this.isEnabled) return;
      this.audioPlayer.src = "silence.mp3";
      this.audioPlayer
        .play()
        .then(() => {
          this.isAvailable = true;
          this.isEnabled =
            localStorage.getItem("audio_enabled") === false ? false : true;
          this.hasBeenTested = true;
        })
        .catch((error) => {
          console.warn("Audio permission not granted!");
          this.isAvailable = false;
          this.isEnabled = false;
          this.hasBeenTested = true;
        });
    },

    playDing() {
      if (!this.isEnabled) return;
      this.playSound("ding.mp3");
    },

    playSound(soundFile) {
      if (!this.audioPlayer.paused || !this.isAvailable) {
        return;
      }
      if (!this.audioPlayer.src.endsWith(soundFile)) {
        this.audioPlayer.src = soundFile;
      }
      this.audioPlayer.play();
    },
  });
});