Merge pull request #152 from nicfreeman1209/main

add ST toggle for recording nomination history

CHANGELOG.md

@@ -1,6 +1,6 @@
 # Release Notes
 
-### Version 2.13.0
+- added record vote history toggle to session menu, and clear vote history button
 - add support for custom Fabled characters
 
 ---

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

@@ -60,13 +60,14 @@
           </li>
           <li @click="toggleNightOrder" v-if="players.length">
             Night order
-            <em
-              ><font-awesome-icon
+            <em>
+              <font-awesome-icon
                 :icon="[
                   'fas',
                   grimoire.isNightOrder ? 'check-square' : 'square'
                 ]"
-            /></em>
+              />
+            </em>
           </li>
           <li v-if="players.length">
             Zoom
@@ -131,10 +132,10 @@
               <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')"
             >
-              Nomination history<em>[V]</em>
+              Vote history<em>[V]</em>
             </li>
             <li @click="leaveSession">
               Leave Session

src/components/modals/Modal.vue

@@ -115,6 +115,7 @@ export default {
 .maximized {
   background: rgba(0, 0, 0, 0.95);
   padding: 0;
+  border-radius: 0;
   height: 100%;
   width: 100%;
   max-width: 100%;

src/components/modals/VoteHistoryModal.vue

@@ -1,17 +1,36 @@
 <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
       @click="clearVoteHistory"
       icon="trash-alt"
       class="clear"
-      title="Clear history"
+      title="Clear vote history"
+      v-if="session.isSpectator"
     />
 
-    <h3>Nomination history</h3>
+    <h3>Vote history</h3>
+
+    <template v-if="!session.isSpectator">
+      <div class="options">
+        <div class="option" @click="setRecordVoteHistory">
+          <font-awesome-icon
+            :icon="[
+              'fas',
+              session.isVoteHistoryAllowed ? 'check-square' : 'square'
+            ]"
+          />
+          Accessible to players
+        </div>
+        <div class="option" @click="clearVoteHistory">
+          <font-awesome-icon icon="trash-alt" />
+          Clear for everyone
+        </div>
+      </div>
+    </template>
     <table>
       <thead>
         <tr>
@@ -79,8 +98,16 @@ export default {
     ...mapState(["session", "modals"])
   },
   methods: {
-    ...mapMutations(["toggleModal"]),
-    ...mapMutations("session", ["clearVoteHistory"])
+    clearVoteHistory() {
+      this.$store.commit("session/clearVoteHistory");
+    },
+    setRecordVoteHistory() {
+      this.$store.commit(
+        "session/setVoteHistoryAllowed",
+        !this.session.isVoteHistoryAllowed
+      );
+    },
+    ...mapMutations(["toggleModal"])
   }
 };
 </script>
@@ -98,6 +125,24 @@ export default {
   }
 }
 
+.options {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  justify-content: center;
+  align-content: center;
+}
+
+.option {
+  color: white;
+  text-decoration: none;
+  margin: 0 15px;
+  &:hover {
+    color: red;
+    cursor: pointer;
+  }
+}
+
 h3 {
   margin: 0 40px 0 10px;
   svg {

src/store/modules/session.js

@@ -25,6 +25,7 @@ const state = () => ({
   votingSpeed: 3000,
   isVoteInProgress: false,
   voteHistory: [],
+  isVoteHistoryAllowed: true,
   isRolesDistributed: false
 });
 
@@ -45,6 +46,7 @@ const mutations = {
   setPing: set("ping"),
   setVotingSpeed: set("votingSpeed"),
   setVoteInProgress: set("isVoteInProgress"),
+  setVoteHistoryAllowed: set("isVoteHistoryAllowed"),
   claimSeat: set("claimedSeat"),
   distributeRoles: set("isRolesDistributed"),
   setSessionId(state, sessionId) {
@@ -70,6 +72,7 @@ const mutations = {
    * @param players
    */
   addHistory(state, players) {
+    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,6 +172,11 @@ class LiveSession {
         if (!this._isSpectator) return;
         this._store.commit("toggleNight", params);
         break;
+      case "isVoteHistoryAllowed":
+        if (!this._isSpectator) return;
+        this._store.commit("session/setVoteHistoryAllowed", params);
+        this._store.commit("session/clearVoteHistory");
+        break;
       case "votingSpeed":
         if (!this._isSpectator) return;
         this._store.commit("session/setVotingSpeed", params);
@@ -268,6 +273,7 @@ class LiveSession {
       this._sendDirect(playerId, "gs", {
         gamestate: this._gamestate,
         isNight: grimoire.isNight,
+        isVoteHistoryAllowed: session.isVoteHistoryAllowed,
         nomination: session.nomination,
         votingSpeed: session.votingSpeed,
         lockedVote: session.lockedVote,
@@ -289,6 +295,7 @@ class LiveSession {
       gamestate,
       isLightweight,
       isNight,
+      isVoteHistoryAllowed,
       nomination,
       votingSpeed,
       votes,
@@ -340,6 +347,7 @@ class LiveSession {
     });
     if (!isLightweight) {
       this._store.commit("toggleNight", !!isNight);
+      this._store.commit("session/setVoteHistoryAllowed", isVoteHistoryAllowed);
       this._store.commit("session/nomination", {
         nomination,
         votes,
@@ -686,6 +694,17 @@ class LiveSession {
     this._send("isNight", this._store.state.grimoire.isNight);
   }
 
+  /**
+   * Send the isVoteHistoryAllowed state. ST only
+   */
+  setVoteHistoryAllowed() {
+    if (this._isSpectator) return;
+    this._send(
+      "isVoteHistoryAllowed",
+      this._store.state.session.isVoteHistoryAllowed
+    );
+  }
+
   /**
    * Send the voting speed. ST only
    * @param votingSpeed voting speed in seconds, minimum 1
@@ -840,6 +859,9 @@ export default store => {
       case "session/clearVoteHistory":
         session.clearVoteHistory();
         break;
+      case "session/setVoteHistoryAllowed":
+        session.setVoteHistoryAllowed();
+        break;
       case "toggleNight":
         session.setIsNight();
         break;