vote timer

src/components/Vote.vue

@@ -18,8 +18,13 @@
         <em>exile</em>.
       </template>
       <div class="button-group" v-if="!session.isSpectator">
-        <div class="button">Start Vote</div>
-        <div class="button" @click="finish">Finish Vote</div>
+        <div class="button" v-if="!session.lockedVote" @click="start">
+          Start Vote
+        </div>
+        <div class="button" v-else @click="stop">
+          Reset Vote
+        </div>
+        <div class="button" @click="finish">Finish</div>
       </div>
       <div
         class="button-group"
@@ -62,8 +67,10 @@ export default {
     nomineeStyle: function() {
       const players = this.$store.state.players.players.length;
       const nomination = this.$store.state.session.nomination[1];
+      const lock = this.$store.state.session.lockedVote;
+      const rotation = (360 * (nomination + Math.min(lock, players))) / players;
       return {
-        transform: `rotate(${Math.round((nomination / players) * 360)}deg)`
+        transform: `rotate(${Math.round(rotation)}deg)`
       };
     },
     player: function() {
@@ -75,6 +82,19 @@ export default {
     ...mapGetters({ alive: "players/alive" })
   },
   methods: {
+    start() {
+      this.$store.commit("session/lockVote");
+      this.voteTimer = setInterval(() => {
+        this.$store.commit("session/lockVote");
+        if (this.session.lockedVote > this.players.length) {
+          clearInterval(this.voteTimer);
+        }
+      }, 3000);
+    },
+    stop() {
+      this.$store.commit("session/lockVote", 0);
+      clearInterval(this.voteTimer);
+    },
     finish() {
       this.$store.commit("session/nomination", false);
     },
@@ -152,6 +172,7 @@ export default {
     position: absolute;
     width: 100%;
     height: 100%;
+    transition: transform 3s;
   }
   span:before {
     content: " ";

src/store/modules/session.js

@@ -6,7 +6,7 @@ const state = () => ({
   claimedSeat: -1,
   nomination: false,
   votes: [],
-  lockedVote: -1
+  lockedVote: 0
 });
 
 const getters = {};
@@ -32,10 +32,15 @@ const mutations = {
   nomination(state, nomination) {
     state.nomination = nomination;
     state.votes = [];
+    state.lockedVote = 0;
   },
   vote(state, [index, vote]) {
+    if (!state.nomination) return;
     state.votes = [...state.votes];
     state.votes[index] = vote === undefined ? !state.votes[index] : vote;
+  },
+  lockVote(state, lock) {
+    state.lockedVote = lock !== undefined ? lock : state.lockedVote + 1;
   }
 };
 

src/store/socket.js

@@ -105,6 +105,9 @@ class LiveSession {
       case "vote":
         this._store.commit("session/vote", params);
         break;
+      case "lock":
+        this._store.commit("session/lockVote", params);
+        break;
       case "bye":
         this._handleBye(params);
         break;
@@ -365,7 +368,7 @@ class LiveSession {
   }
 
   /**
-   * A player nomination.
+   * A player nomination. ST only
    * @param nomination [nominator, nominee]
    */
   nomination(nomination) {
@@ -380,13 +383,21 @@ class LiveSession {
   }
 
   /**
-   * Send a vote.
+   * Send a vote. Player only
    * @param index
    */
   vote([index]) {
     if (!this._isSpectator) return;
     this._send("vote", [index, this._store.state.session.votes[index]]);
   }
+
+  /**
+   * Lock a vote. ST only
+   */
+  lockVote() {
+    if (this._isSpectator) return;
+    this._send("lock", this._store.state.session.lockedVote);
+  }
 }
 
 module.exports = store => {
@@ -413,6 +424,9 @@ module.exports = store => {
       case "session/vote":
         session.vote(payload);
         break;
+      case "session/lockVote":
+        session.lockVote();
+        break;
       case "players/set":
       case "players/swap":
       case "players/move":