From 31b4cd5183bf7d8d3df9167130ae675d0f590672 Mon Sep 17 00:00:00 2001 From: Steffen Date: Wed, 3 Jun 2020 22:25:23 +0200 Subject: [PATCH] added vote buttons --- src/components/Player.vue | 32 ++++++++++++++++-- src/components/TownSquare.vue | 3 +- src/components/Vote.vue | 62 +++++++++++++++++++++++++++++++---- src/main.js | 1 + src/store/modules/session.js | 9 ++++- src/store/socket.js | 56 +++++++++++++++++++++++++++---- 6 files changed, 144 insertions(+), 19 deletions(-) diff --git a/src/components/Player.vue b/src/components/Player.vue index d96d10f..e5c8020 100644 --- a/src/components/Player.vue +++ b/src/components/Player.vue @@ -7,7 +7,8 @@ { dead: player.isDead, 'no-vote': player.isVoteless, - you: player.id === session.playerId + you: player.id === session.playerId, + 'voted-yes': session.votes[index] }, player.role.team ]" @@ -40,6 +41,12 @@ /> + svg.vote { + color: $demon; + opacity: 0.5; + transform: scale(1); +} + +#townsquare.vote .player.you.voted-yes > svg.vote { + opacity: 1; + transform: scale(1); +} + li.from:not(.nominate) .player > svg.cancel { opacity: 1; transform: scale(1); @@ -432,7 +458,7 @@ li.move:not(.from) .player > svg.move { } /****** Vote icon ********/ -.player .vote { +.player .has-vote { position: absolute; right: 2px; bottom: 45px; diff --git a/src/components/TownSquare.vue b/src/components/TownSquare.vue index 7aafb34..7af8aeb 100644 --- a/src/components/TownSquare.vue +++ b/src/components/TownSquare.vue @@ -4,7 +4,8 @@ class="square" v-bind:class="{ public: grimoire.isPublic, - spectator: session.isSpectator + spectator: session.isSpectator, + vote: session.nomination }" v-bind:style="{ zoom: grimoire.zoom }" > diff --git a/src/components/Vote.vue b/src/components/Vote.vue index 4ad774b..f8633c8 100644 --- a/src/components/Vote.vue +++ b/src/components/Vote.vue @@ -1,5 +1,5 @@ @@ -54,6 +66,10 @@ export default { transform: `rotate(${Math.round((nomination / players) * 360)}deg)` }; }, + player: function() { + const id = this.$store.state.session.playerId; + return this.$store.state.players.players.find(p => p.id === id); + }, ...mapState("players", ["players"]), ...mapState(["session"]), ...mapGetters({ alive: "players/alive" }) @@ -61,6 +77,12 @@ export default { methods: { finish() { this.$store.commit("session/nomination", false); + }, + vote(vote) { + const index = this.players.findIndex(p => p.id === this.session.playerId); + if (index >= 0 && !!this.session.votes[index] !== vote) { + this.$store.commit("session/vote", [index, vote]); + } } } }; @@ -69,7 +91,7 @@ export default { diff --git a/src/main.js b/src/main.js index 5af2559..85f3ef9 100644 --- a/src/main.js +++ b/src/main.js @@ -10,6 +10,7 @@ const faIcons = [ "BroadcastTower", "Camera", "CheckSquare", + "Skull", "Cog", "Copy", "ExchangeAlt", diff --git a/src/store/modules/session.js b/src/store/modules/session.js index e5e1b6e..3043280 100644 --- a/src/store/modules/session.js +++ b/src/store/modules/session.js @@ -4,7 +4,9 @@ const state = () => ({ playerCount: 0, playerId: "", claimedSeat: -1, - nomination: false + nomination: false, + votes: [], + lockedVote: -1 }); const getters = {}; @@ -29,6 +31,11 @@ const mutations = { }, nomination(state, nomination) { state.nomination = nomination; + state.votes = []; + }, + vote(state, [index, vote]) { + state.votes = [...state.votes]; + state.votes[index] = vote === undefined ? !state.votes[index] : vote; } }; diff --git a/src/store/socket.js b/src/store/socket.js index 4d99702..b606eaa 100644 --- a/src/store/socket.js +++ b/src/store/socket.js @@ -99,6 +99,12 @@ class LiveSession { case "ping": this._handlePing(params); break; + case "nomination": + this._store.commit("session/nomination", params); + break; + case "vote": + this._store.commit("session/vote", params); + break; case "bye": this._handleBye(params); break; @@ -291,7 +297,7 @@ class LiveSession { } // remove claimed seats from players that are no longer connected this._store.state.players.players.forEach(player => { - if (player.id && !this._players[player.id]) { + if (!this._isSpectator && player.id && !this._players[player.id]) { this._store.commit("players/update", { player, property: "id", @@ -336,20 +342,50 @@ class LiveSession { * @private */ _updateSeat([index, value]) { + if (this._isSpectator) return; const property = "id"; + const players = this._store.state.players.players; // remove previous seat - const player = this._store.state.players.players.find( - ({ id }) => id === value - ); - if (player) { - this._store.commit("players/update", { player, property, value: "" }); + const oldIndex = players.findIndex(({ id }) => id === value); + if (oldIndex >= 0 && oldIndex !== index) { + this._store.commit("players/update", { + player: players[oldIndex], + property, + value: "" + }); } // add playerId to new seat if (index >= 0) { - const player = this._store.state.players.players[index]; + const player = players[index]; if (!player) return; this._store.commit("players/update", { player, property, value }); } + // update player session list as if this was a ping + this._handlePing([true, value]); + } + + /** + * A player nomination. + * @param nomination [nominator, nominee] + */ + nomination(nomination) { + if (this._isSpectator) return; + const players = this._store.state.players.players; + if ( + !nomination || + (players.length > nomination[0] && players.length > nomination[1]) + ) { + this._send("nomination", nomination); + } + } + + /** + * Send a vote. + * @param index + */ + vote([index]) { + if (!this._isSpectator) return; + this._send("vote", [index, this._store.state.session.votes[index]]); } } @@ -371,6 +407,12 @@ module.exports = store => { case "session/claimSeat": session.claimSeat(payload); break; + case "session/nomination": + session.nomination(payload); + break; + case "session/vote": + session.vote(payload); + break; case "players/set": case "players/swap": case "players/move":