requested changes

src/App.vue

@@ -110,7 +110,7 @@ export default {
           this.$store.commit("toggleModal", "roles");
           break;
         case "v":
-          if (this.session.voteHistory.length) {
+          if (this.session.voteHistory.length || !this.session.isSpectator) {
             this.$store.commit("toggleModal", "voteHistory");
           }
           break;

src/components/Menu.vue

@@ -132,26 +132,11 @@
               <em><font-awesome-icon icon="theater-masks"/></em>
             </li>
             <li
-              v-if="session.voteHistory.length"
+              v-if="session.voteHistory.length || !session.isSpectator"
               @click="toggleModal('voteHistory')"
             >
               Vote history<em>[V]</em>
             </li>
-            <li @click="toggleRecordVoteHistory" v-if="!session.isSpectator">
-              Permit vote history
-              <em>
-                <font-awesome-icon
-                  :icon="[
-                    'fas',
-                    session.recordVoteHistory ? 'check-square' : 'square'
-                  ]"
-                />
-              </em>
-            </li>
-            <li @click="clearVoteHistory" v-if="!session.isSpectator">
-              Clear vote history
-              <em><font-awesome-icon icon="trash-alt"/></em>
-            </li>
             <li @click="leaveSession">
               Leave Session
               <em>{{ session.sessionId }}</em>
@@ -343,12 +328,6 @@ export default {
         this.$store.dispatch("players/clearRoles");
       }
     },
-    clearVoteHistory() {
-      this.$store.commit("session/clearVoteHistory");
-    },
-    toggleRecordVoteHistory() {
-      this.$store.commit("session/toggleRecordVoteHistory");
-    },
     ...mapMutations([
       "toggleGrimoire",
       "toggleMenu",

src/components/modals/VoteHistoryModal.vue

@@ -1,7 +1,7 @@
 <template>
   <Modal
     class="vote-history"
-    v-if="modals.voteHistory && session.voteHistory"
+    v-if="modals.voteHistory && (session.voteHistory || !session.isSpectator)"
     @close="toggleModal('voteHistory')"
   >
     <font-awesome-icon
@@ -9,9 +9,35 @@
       icon="trash-alt"
       class="clear"
       title="Clear history"
+      v-if="session.isSpectator"
     />
 
     <h3>Nomination history</h3>
+
+    <template v-if="!session.isSpectator">
+      <table>
+        <tr>
+          <td class="option">
+            <div class="option" @click="setRecordVoteHistory">
+              <font-awesome-icon
+                :icon="[
+                  'fas',
+                  session.isVoteHistoryAllowed ? 'check-square' : 'square'
+                ]"
+              />
+              Allow players to view this?
+            </div>
+          </td>
+          <td></td>
+          <td>
+            <div class="option" @click="clearVoteHistory">
+              <font-awesome-icon icon="trash-alt" />
+              Clear players vote histories
+            </div>
+          </td>
+        </tr>
+      </table>
+    </template>
     <table>
       <thead>
         <tr>
@@ -79,6 +105,15 @@ export default {
     ...mapState(["session", "modals"])
   },
   methods: {
+    clearVoteHistory() {
+      this.$store.commit("session/clearVoteHistory");
+    },
+    setRecordVoteHistory() {
+      this.$store.commit(
+        "session/setVoteHistoryAllowed",
+        !this.session.isVoteHistoryAllowed
+      );
+    },
     ...mapMutations(["toggleModal"]),
     ...mapMutations("session", ["clearVoteHistory"])
   }
@@ -98,6 +133,14 @@ export default {
   }
 }
 
+.option {
+  color: white;
+  text-decoration: none;
+  &:hover {
+    color: red;
+  }
+}
+
 h3 {
   margin: 0 40px 0 10px;
   svg {

src/store/modules/session.js

@@ -22,10 +22,10 @@ const state = () => ({
   nomination: false,
   votes: [],
   lockedVote: 0,
-  votingSpeed: 1000,
+  votingSpeed: 3000,
   isVoteInProgress: false,
   voteHistory: [],
-  recordVoteHistory: true,
+  isVoteHistoryAllowed: true,
   isRolesDistributed: false
 });
 
@@ -38,14 +38,6 @@ const set = key => (state, val) => {
   state[key] = val;
 };
 
-const toggle = key => (state, val) => {
-  if (val === true || val === false) {
-    state[key] = val;
-  } else {
-    state[key] = !state[key];
-  }
-};
-
 const mutations = {
   setPlayerId: set("playerId"),
   setSpectator: set("isSpectator"),
@@ -54,7 +46,7 @@ const mutations = {
   setPing: set("ping"),
   setVotingSpeed: set("votingSpeed"),
   setVoteInProgress: set("isVoteInProgress"),
-  toggleRecordVoteHistory: toggle("recordVoteHistory"),
+  setVoteHistoryAllowed: set("isVoteHistoryAllowed"),
   claimSeat: set("claimedSeat"),
   distributeRoles: set("isRolesDistributed"),
   setSessionId(state, sessionId) {
@@ -80,7 +72,7 @@ const mutations = {
    * @param players
    */
   addHistory(state, players) {
-    if (!state.recordVoteHistory && state.isSpectator) return;
+    if (!state.isVoteHistoryAllowed && state.isSpectator) return;
     if (!state.nomination || state.lockedVote <= players.length) return;
     const isBanishment = players[state.nomination[1]].role.team === "traveler";
     state.voteHistory.push({

src/store/socket.js

@@ -172,9 +172,9 @@ class LiveSession {
         if (!this._isSpectator) return;
         this._store.commit("toggleNight", params);
         break;
-      case "recordVoteHistory":
+      case "isVoteHistoryAllowed":
         if (!this._isSpectator) return;
-        this._store.commit("session/toggleRecordVoteHistory", params);
+        this._store.commit("session/setVoteHistoryAllowed", params);
         break;
       case "votingSpeed":
         if (!this._isSpectator) return;
@@ -272,7 +272,7 @@ class LiveSession {
       this._sendDirect(playerId, "gs", {
         gamestate: this._gamestate,
         isNight: grimoire.isNight,
-        recordVoteHistory: session.recordVoteHistory,
+        isVoteHistoryAllowed: session.isVoteHistoryAllowed,
         nomination: session.nomination,
         votingSpeed: session.votingSpeed,
         lockedVote: session.lockedVote,
@@ -294,7 +294,7 @@ class LiveSession {
       gamestate,
       isLightweight,
       isNight,
-      recordVoteHistory,
+      isVoteHistoryAllowed,
       nomination,
       votingSpeed,
       votes,
@@ -346,7 +346,10 @@ class LiveSession {
     });
     if (!isLightweight) {
       this._store.commit("toggleNight", !!isNight);
-      this._store.commit("session/toggleRecordVoteHistory", recordVoteHistory);
+      this._store.commit(
+        "session/toggleRecordVoteHistory",
+        isVoteHistoryAllowed
+      );
       this._store.commit("session/nomination", {
         nomination,
         votes,
@@ -694,13 +697,13 @@ class LiveSession {
   }
 
   /**
-   * Send the recordVoteHistory state. ST only
+   * Send the isVoteHistoryAllowed state. ST only
    */
-  setRecordVoteHistory() {
+  setVoteHistoryAllowed() {
     if (this._isSpectator) return;
     this._send(
-      "recordVoteHistory",
-      this._store.state.session.recordVoteHistory
+      "isVoteHistoryAllowed",
+      this._store.state.session.isVoteHistoryAllowed
     );
   }
 
@@ -858,8 +861,8 @@ export default store => {
       case "session/clearVoteHistory":
         session.clearVoteHistory();
         break;
-      case "session/toggleRecordVoteHistory":
-        session.setRecordVoteHistory();
+      case "session/setVoteHistoryAllowed":
+        session.setVoteHistoryAllowed();
         break;
       case "toggleNight":
         session.setIsNight();