cleaning up vueX code to reuse existing player update methods, and add form flow logic to block infinite loops

src/components/Player.vue

@@ -248,11 +248,7 @@ export default {
         "Player preffered pronouns",
         this.player.pronouns
       );
-      this.$store.commit("players/setPronouns", {
-        player: this.player,
-        pronouns
-      });
-      this.isMenuOpen = false;
+      this.updatePlayer("pronouns", pronouns, true);
     },
     toggleStatus() {
       if (this.grimoire.isPublic) {
@@ -282,7 +278,12 @@ export default {
       this.updatePlayer("reminders", reminders, true);
     },
     updatePlayer(property, value, closeMenu = false) {
-      if (this.session.isSpectator && property !== "reminders") return;
+      if (
+        this.session.isSpectator &&
+        property !== "reminders" &&
+        property !== "pronouns"
+      )
+        return;
       this.$store.commit("players/update", {
         player: this.player,
         property,

src/store/modules/players.js

@@ -107,12 +107,6 @@ const mutations = {
       state.players[index][property] = value;
     }
   },
-  setPronouns(state, { player, pronouns }) {
-    const index = state.players.indexOf(player);
-    if (index >= 0) {
-      state.players[index].pronouns = pronouns;
-    }
-  },
   add(state, name) {
     state.players.push({
       ...NEWPLAYER,

src/store/persistence.js

@@ -137,7 +137,6 @@ module.exports = store => {
       case "players/set":
       case "players/swap":
       case "players/move":
-      case "players/setPronouns":
         if (state.players.players.length) {
           localStorage.setItem(
             "players",

src/store/socket.js

@@ -488,24 +488,29 @@ class LiveSession {
   /**
    * Publish a player pronouns update
    * @param player
-   * @param pronouns
+   * @param value
    */
-  sendPlayerPronouns({ player, pronouns }) {
-    if (!this._isSpectator) return;
+  sendPlayerPronouns({ player, value }) {
+    //send pronoun only for the current player
+    if (this._store.state.session.playerId !== player.id) return;
     const index = this._store.state.players.players.indexOf(player);
-    this._send("pronouns", { index, pronouns });
+    this._send("pronouns", { index, value });
   }
 
   /**
    * Update a pronouns based on incoming data. Player only.
    * @param index
-   * @param pronouns
+   * @param value
    * @private
    */
-  _updatePlayerPronouns({ index, pronouns }) {
+  _updatePlayerPronouns({ index, value }) {
     const player = this._store.state.players.players[index];
-    if (!player) return;
-    this._store.commit("players/setPronouns", { player, pronouns });
+    if (!player || this._store.state.session.playerId === player.id) return;
+    this._store.commit("players/update", {
+      player,
+      property: "pronouns",
+      value
+    });
   }
 
   /**
@@ -837,11 +842,12 @@ export default store => {
         session.sendGamestate("", true);
         break;
       case "players/update":
+        if (payload.property === "pronouns") {
+          session.sendPlayerPronouns(payload);
+          break;
+        }
         session.sendPlayer(payload);
         break;
-      case "players/setPronouns":
-        session.sendPlayerPronouns(payload);
-        break;
     }
   });