From 2218b10331530ef8d3dae4dd047c350e509cd942 Mon Sep 17 00:00:00 2001 From: Steffen Date: Thu, 18 Jun 2020 10:00:32 +0200 Subject: [PATCH] made voting clock speed customizable (closes #27) --- src/App.vue | 3 +- src/components/Vote.vue | 64 ++++++++++++++++++++++++++++-------- src/main.js | 2 ++ src/store/modules/session.js | 4 ++- src/store/socket.js | 30 ++++++++++++++--- 5 files changed, 82 insertions(+), 21 deletions(-) diff --git a/src/App.vue b/src/App.vue index 82b8390..2c1ead0 100644 --- a/src/App.vue +++ b/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"); diff --git a/src/components/Vote.vue b/src/components/Vote.vue index 9f85c13..6a8873e 100644 --- a/src/components/Vote.vue +++ b/src/components/Vote.vue @@ -24,19 +24,38 @@ voted YES -
-
- Start Vote + +
Please claim a seat to vote.
@@ -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 { diff --git a/src/main.js b/src/main.js index 1b30071..866dc81 100644 --- a/src/main.js +++ b/src/main.js @@ -21,7 +21,9 @@ const faIcons = [ "Heartbeat", "Image", "Link", + "MinusCircle", "PeopleArrows", + "PlusCircle", "Question", "Random", "RedoAlt", diff --git a/src/store/modules/session.js b/src/store/modules/session.js index 4ab53ae..0d45405 100644 --- a/src/store/modules/session.js +++ b/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; diff --git a/src/store/socket.js b/src/store/socket.js index 4bd1d82..5524590 100644 --- a/src/store/socket.js +++ b/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 edition - * @param nomination + * @param data * @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":