made voting clock speed customizable (closes #27)

src/App.vue

@@ -63,7 +63,8 @@ export default {
     takeScreenshot(dimensions) {
       this.$refs.menu.takeScreenshot(dimensions);
     },
-    keyup({ key }) {
+    keyup({ key, ctrlKey, metaKey }) {
+      if (ctrlKey || metaKey) return;
       switch (key.toLocaleLowerCase()) {
         case "g":
           this.$store.commit("toggleGrimoire");

src/components/Vote.vue

@@ -24,19 +24,38 @@
         voted <em>YES</em>
       </div>
 
-      <div class="button-group" v-if="!session.isSpectator">
+      <template v-if="!session.isSpectator">
-        <div class="button" v-if="!session.lockedVote" @click="start">
+        <div v-if="!session.lockedVote">
-          Start Vote
+          Vote time per player:
+          <font-awesome-icon
+            @mousedown.prevent="setVotingSpeed(-1)"
+            icon="minus-circle"
+          />
+          {{ session.votingSpeed }}s
+          <font-awesome-icon
+            @mousedown.prevent="setVotingSpeed(1)"
+            icon="plus-circle"
+          />
         </div>
-        <div class="button" v-else @click="stop">
+        <div class="button-group">
-          Reset Vote
+          <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" @click="finish">Finish</div>
+      </template>
-      </div>
+      <template v-else-if="canVote">
-      <div class="button-group" v-else-if="canVote">
+        <div v-if="!session.lockedVote">
-        <div class="button vote-no" @click="vote(false)">Vote NO</div>
+          {{ session.votingSpeed }} seconds between votes
-        <div class="button vote-yes" @click="vote(true)">Vote YES</div>
+        </div>
-      </div>
+        <div class="button-group">
+          <div class="button vote-no" @click="vote(false)">Vote NO</div>
+          <div class="button vote-yes" @click="vote(true)">Vote YES</div>
+        </div>
+      </template>
       <div v-else-if="!player">
         Please claim a seat to vote.
       </div>
@@ -59,7 +78,8 @@ export default {
       const players = this.players.length;
       const nomination = this.session.nomination[0];
       return {
-        transform: `rotate(${Math.round((nomination / players) * 360)}deg)`
+        transform: `rotate(${Math.round((nomination / players) * 360)}deg)`,
+        transitionDuration: this.session.votingSpeed - 0.1 + "s"
       };
     },
     nominee: function() {
@@ -71,7 +91,8 @@ export default {
       const lock = this.session.lockedVote;
       const rotation = (360 * (nomination + Math.min(lock, players))) / players;
       return {
-        transform: `rotate(${Math.round(rotation)}deg)`
+        transform: `rotate(${Math.round(rotation)}deg)`,
+        transitionDuration: this.session.votingSpeed - 0.1 + "s"
       };
     },
     player: function() {
@@ -109,7 +130,7 @@ export default {
         if (this.session.lockedVote > this.players.length) {
           clearInterval(this.voteTimer);
         }
-      }, 3000);
+      }, this.session.votingSpeed * 1000);
     },
     stop() {
       clearInterval(this.voteTimer);
@@ -125,6 +146,12 @@ export default {
       if (index >= 0 && !!this.session.votes[index] !== vote) {
         this.$store.commit("session/voteSync", [index, vote]);
       }
+    },
+    setVotingSpeed(diff) {
+      const speed = this.session.votingSpeed + diff;
+      if (speed > 0) {
+        this.$store.commit("session/setVotingSpeed", speed);
+      }
     }
   }
 };
@@ -161,6 +188,15 @@ export default {
       color: $townsfolk;
     }
   }
+
+  svg {
+    cursor: pointer;
+    &:hover path {
+      fill: url(#demon);
+      stroke-width: 30px;
+      stroke: white;
+    }
+  }
 }
 
 @keyframes arrow-cw {

src/main.js

@@ -21,7 +21,9 @@ const faIcons = [
   "Heartbeat",
   "Image",
   "Link",
+  "MinusCircle",
   "PeopleArrows",
+  "PlusCircle",
   "Question",
   "Random",
   "RedoAlt",

src/store/modules/session.js

@@ -17,7 +17,8 @@ const state = () => ({
   claimedSeat: -1,
   nomination: false,
   votes: [],
-  lockedVote: 0
+  lockedVote: 0,
+  votingSpeed: 3
 });
 
 const getters = {};
@@ -29,6 +30,7 @@ const mutations = {
   setPlayerId: set("playerId"),
   setSpectator: set("isSpectator"),
   setPlayerCount: set("playerCount"),
+  setVotingSpeed: set("votingSpeed"),
   claimSeat: set("claimedSeat"),
   nomination(state, nomination) {
     state.nomination = nomination;

src/store/socket.js

@@ -102,6 +102,9 @@ class LiveSession {
       case "nomination":
         this._store.commit("session/nomination", params);
         break;
+      case "votingSpeed":
+        this._store.commit("session/setVotingSpeed", params);
+        break;
       case "vote":
         this._handleVote(params);
         break;
@@ -168,21 +171,22 @@ class LiveSession {
     this._send("gs", {
       gamestate: this._gamestate,
       edition: this._store.state.edition,
-      nomination: this._store.state.session.nomination
+      nomination: this._store.state.session.nomination,
+      votingSpeed: this._store.state.session.votingSpeed
     });
   }
 
   /**
    * Update the gamestate based on incoming data.
-   * @param gamestate
+   * @param data
-   * @param edition
-   * @param nomination
    * @private
    */
-  _updateGamestate({ gamestate, edition, nomination }) {
+  _updateGamestate(data) {
     if (!this._isSpectator) return;
+    const { gamestate, edition, nomination, votingSpeed } = data;
     this._store.commit("setEdition", edition);
     this._store.commit("session/nomination", nomination);
+    this._store.commit("session/setVotingSpeed", votingSpeed);
     const players = this._store.state.players.players;
     // adjust number of players
     if (players.length < gamestate.length) {
@@ -372,6 +376,7 @@ class LiveSession {
 
   /**
    * A player nomination. ST only
+   * This also syncs the voting speed to the players.
    * @param nomination [nominator, nominee]
    */
   nomination(nomination) {
@@ -381,10 +386,22 @@ class LiveSession {
       !nomination ||
       (players.length > nomination[0] && players.length > nomination[1])
     ) {
+      this.setVotingSpeed(this._store.state.session.votingSpeed);
       this._send("nomination", nomination);
     }
   }
 
+  /**
+   * Send the voting speed. ST only
+   * @param votingSpeed voting speed in seconds, minimum 1
+   */
+  setVotingSpeed(votingSpeed) {
+    if (this._isSpectator) return;
+    if (votingSpeed) {
+      this._send("votingSpeed", votingSpeed);
+    }
+  }
+
   /**
    * Send a vote. Player or ST
    * @param index Seat of the player
@@ -467,6 +484,9 @@ module.exports = store => {
       case "session/lockVote":
         session.lockVote();
         break;
+      case "session/setVotingSpeed":
+        session.setVotingSpeed(payload);
+        break;
       case "players/set":
       case "players/swap":
       case "players/move":