allow the ST to set a vote

src/components/Player.vue

@@ -285,9 +285,16 @@ export default {
       this.isMenuOpen = false;
       this.$emit("trigger", ["claimSeat"]);
     },
+    /**
+     * Allow the ST to override a locked vote.
+     */
     vote() {
-      if (this.player.id !== this.session.playerId) return;
+      if (this.session.isSpectator) return;
-      this.$store.commit("session/vote", [this.index]);
+      if (!this.voteLocked) return;
+      this.$store.commit("session/voteSync", [
+        this.index,
+        !this.session.votes[this.index]
+      ]);
     }
   }
 };
@@ -503,11 +510,13 @@ export default {
   }
 }
 
+// other player voted yes, but is not locked yet
 #townsquare.vote .player.vote-yes .overlay svg.vote.fa-skull {
   opacity: 0.5;
   transform: scale(1);
 }
 
+// you voted yes | a locked vote yes | a locked vote no
 #townsquare.vote .player.you.vote-yes .overlay svg.vote.fa-skull,
 #townsquare.vote .player.vote-lock.vote-yes .overlay svg.vote.fa-skull,
 #townsquare.vote .player.vote-lock:not(.vote-yes) .overlay svg.vote.fa-times {
@@ -515,6 +524,11 @@ export default {
   transform: scale(1);
 }
 
+// a locked vote can be clicked on by the ST
+#townsquare.vote:not(.spectator) .player.vote-lock .overlay svg.vote {
+  pointer-events: all;
+}
+
 li.from:not(.nominate) .player .overlay svg.cancel {
   opacity: 1;
   transform: scale(1);

src/components/Vote.vue

@@ -19,7 +19,8 @@
       </template>
 
       <div v-if="session.lockedVote > 1">
-        <em class="blue">{{ voters.join(", ") || "nobody" }} </em>
+        <em class="blue" v-if="voters.length">{{ voters.join(", ") }} </em>
+        <span v-else>nobody</span>
         voted <em>YES</em>
       </div>
 
@@ -122,7 +123,7 @@ export default {
       if (!this.canVote) return false;
       const index = this.players.findIndex(p => p.id === this.session.playerId);
       if (index >= 0 && !!this.session.votes[index] !== vote) {
-        this.$store.commit("session/vote", [index, vote]);
+        this.$store.commit("session/voteSync", [index, vote]);
       }
     }
   }

src/store/modules/session.js

@@ -1,3 +1,14 @@
+// helper functions
+const set = key => (state, val) => {
+  state[key] = val;
+};
+
+const handleVote = (state, [index, vote]) => {
+  if (!state.nomination) return;
+  state.votes = [...state.votes];
+  state.votes[index] = vote === undefined ? !state.votes[index] : vote;
+};
+
 const state = () => ({
   sessionId: "",
   isSpectator: false,
@@ -14,31 +25,24 @@ const getters = {};
 const actions = {};
 
 const mutations = {
-  setSessionId(state, sessionId) {
+  setSessionId: set("sessionId"),
-    state.sessionId = sessionId;
+  setPlayerId: set("playerId"),
-  },
+  setSpectator: set("isSpectator"),
-  setPlayerId(state, playerId) {
+  setPlayerCount: set("playerCount"),
-    state.playerId = playerId;
+  claimSeat: set("claimedSeat"),
-  },
-  setSpectator(state, spectator) {
-    state.isSpectator = spectator;
-  },
-  setPlayerCount(state, playerCount) {
-    state.playerCount = playerCount;
-  },
-  claimSeat(state, claimedSeat) {
-    state.claimedSeat = claimedSeat;
-  },
   nomination(state, nomination) {
     state.nomination = nomination;
     state.votes = [];
     state.lockedVote = 0;
   },
-  vote(state, [index, vote]) {
+  /**
-    if (!state.nomination) return;
+   * Store a vote with and without syncing it to the live session.
-    state.votes = [...state.votes];
+   * This is necessary in order to prevent infinite voting loops.
-    state.votes[index] = vote === undefined ? !state.votes[index] : vote;
+   * @param state
-  },
+   * @param vote
+   */
+  vote: handleVote,
+  voteSync: handleVote,
   lockVote(state, lock) {
     state.lockedVote = lock !== undefined ? lock : state.lockedVote + 1;
   }

src/store/socket.js

@@ -386,27 +386,28 @@ class LiveSession {
   }
 
   /**
-   * Send a vote. Player only
+   * Send a vote. Player or ST
    * @param index Seat of the player
+   * @param sync Flag whether to sync this vote with others or not
    */
   vote([index]) {
-    if (!this._isSpectator) return;
     const player = this._store.state.players.players[index];
-    if (this._store.state.session.playerId === player.id) {
+    if (
-      // send vote only if it is your own vote
+      this._store.state.session.playerId === player.id ||
+      !this._isSpectator
+    ) {
+      // send vote only if it is your own vote or you are the storyteller
       this._send("vote", [index, this._store.state.session.votes[index]]);
     }
   }
 
   /**
    * Handle an incoming vote, but not if it is for your own seat.
+   * @param index
    * @param vote
    */
-  _handleVote(vote) {
+  _handleVote([index, vote]) {
-    const player = this._store.state.players.players[vote[0]];
+    this._store.commit("session/vote", [index, vote]);
-    if (this._store.state.session.playerId !== player.id) {
-      this._store.commit("session/vote", vote);
-    }
   }
 
   /**
@@ -460,7 +461,7 @@ module.exports = store => {
       case "session/nomination":
         session.nomination(payload);
         break;
-      case "session/vote":
+      case "session/voteSync":
         session.vote(payload);
         break;
       case "session/lockVote":