Merge pull request #160 from nicfreeman1209/on_block

add 'on the block' indicator
This commit is contained in:
Steffen 2021-05-10 21:16:42 +02:00 committed by GitHub
commit f718d8b24b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 115 additions and 19 deletions

View File

@ -6,6 +6,7 @@
- added global animation toggle for better performance - added global animation toggle for better performance
- added record vote history toggle to session menu, and clear vote history button - added record vote history toggle to session menu, and clear vote history button
- add support for custom Fabled characters - add support for custom Fabled characters
- add 'marked for execution' indicator
--- ---

View File

@ -119,7 +119,7 @@ export default {
break; break;
case "s": case "s":
if (this.session.isSpectator) return; if (this.session.isSpectator) return;
this.$store.commit("toggleNight"); this.$refs.menu.toggleNight();
break; break;
case "escape": case "escape":
this.$store.commit("toggleModal"); this.$store.commit("toggleModal");

View File

@ -339,12 +339,17 @@ export default {
this.$store.dispatch("players/clearRoles"); this.$store.dispatch("players/clearRoles");
} }
}, },
toggleNight() {
this.$store.commit("toggleNight");
if (this.grimoire.isNight) {
this.$store.commit("session/setMarkedPlayer", -1);
}
},
...mapMutations([ ...mapMutations([
"toggleGrimoire", "toggleGrimoire",
"toggleMenu", "toggleMenu",
"toggleImageOptIn", "toggleImageOptIn",
"toggleMuted", "toggleMuted",
"toggleNight",
"toggleNightOrder", "toggleNightOrder",
"toggleStatic", "toggleStatic",
"setZoom", "setZoom",

View File

@ -6,6 +6,7 @@
:class="[ :class="[
{ {
dead: player.isDead, dead: player.isDead,
marked: session.markedPlayer === index,
'no-vote': player.isVoteless, 'no-vote': player.isVoteless,
you: session.sessionId && player.id && player.id === session.playerId, you: session.sessionId && player.id && player.id === session.playerId,
'vote-yes': session.votes[index], 'vote-yes': session.votes[index],
@ -97,6 +98,11 @@
@click="updatePlayer('isVoteless', true)" @click="updatePlayer('isVoteless', true)"
title="Ghost vote" title="Ghost vote"
/> />
<!-- On block icon -->
<div class="marked">
<font-awesome-icon icon="skull" />
</div>
<div <div
class="name" class="name"
@click="isMenuOpen = !isMenuOpen" @click="isMenuOpen = !isMenuOpen"
@ -124,10 +130,6 @@
<li @click="changeName"> <li @click="changeName">
<font-awesome-icon icon="user-edit" />Rename <font-awesome-icon icon="user-edit" />Rename
</li> </li>
<li v-if="!session.nomination" @click="nominatePlayer()">
<font-awesome-icon icon="hand-point-right" />
Nomination
</li>
<li @click="movePlayer()" :class="{ disabled: session.lockedVote }"> <li @click="movePlayer()" :class="{ disabled: session.lockedVote }">
<font-awesome-icon icon="redo-alt" /> <font-awesome-icon icon="redo-alt" />
Move player Move player
@ -136,6 +138,10 @@
<font-awesome-icon icon="exchange-alt" /> <font-awesome-icon icon="exchange-alt" />
Swap seats Swap seats
</li> </li>
<li @click="removePlayer" :class="{ disabled: session.lockedVote }">
<font-awesome-icon icon="times-circle" />
Remove
</li>
<li <li
@click="updatePlayer('id', '', true)" @click="updatePlayer('id', '', true)"
v-if="player.id && session.sessionId" v-if="player.id && session.sessionId"
@ -143,10 +149,12 @@
<font-awesome-icon icon="chair" /> <font-awesome-icon icon="chair" />
Empty seat Empty seat
</li> </li>
<li @click="removePlayer" :class="{ disabled: session.lockedVote }"> <template v-if="!session.nomination">
<font-awesome-icon icon="times-circle" /> <li @click="nominatePlayer()">
Remove <font-awesome-icon icon="hand-point-right" />
</li> Nomination
</li>
</template>
</template> </template>
<li <li
@click="claimSeat" @click="claimSeat"
@ -257,6 +265,9 @@ export default {
if (this.grimoire.isPublic) { if (this.grimoire.isPublic) {
if (!this.player.isDead) { if (!this.player.isDead) {
this.updatePlayer("isDead", true); this.updatePlayer("isDead", true);
if (this.player.isMarked) {
this.updatePlayer("isMarked", false);
}
} else if (this.player.isVoteless) { } else if (this.player.isVoteless) {
this.updatePlayer("isVoteless", false); this.updatePlayer("isVoteless", false);
this.updatePlayer("isDead", false); this.updatePlayer("isDead", false);
@ -265,6 +276,9 @@ export default {
} }
} else { } else {
this.updatePlayer("isDead", !this.player.isDead); this.updatePlayer("isDead", !this.player.isDead);
if (this.player.isMarked) {
this.updatePlayer("isMarked", false);
}
if (this.player.isVoteless) { if (this.player.isVoteless) {
this.updatePlayer("isVoteless", false); this.updatePlayer("isVoteless", false);
} }
@ -579,9 +593,6 @@ li.move:not(.from) .player .overlay svg.move {
/****** Vote icon ********/ /****** Vote icon ********/
.player .has-vote { .player .has-vote {
position: absolute;
right: 2px;
margin-top: -15%;
color: #fff; color: #fff;
filter: drop-shadow(0 0 3px black); filter: drop-shadow(0 0 3px black);
transition: opacity 250ms; transition: opacity 250ms;
@ -593,6 +604,12 @@ li.move:not(.from) .player .overlay svg.move {
} }
} }
.has-vote {
position: absolute;
margin-top: -15%;
right: 2px;
}
/****** Session seat glow *****/ /****** Session seat glow *****/
@mixin glow($name, $color) { @mixin glow($name, $color) {
@keyframes #{$name}-glow { @keyframes #{$name}-glow {
@ -624,6 +641,38 @@ li.move:not(.from) .player .overlay svg.move {
animation: townsfolk-glow 5s ease-in-out infinite; animation: townsfolk-glow 5s ease-in-out infinite;
} }
/****** Marked icon ******/
.player .marked {
position: absolute;
width: 100%;
top: 0;
filter: drop-shadow(0px 0px 6px black);
pointer-events: none;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 250ms;
opacity: 0;
&:before {
content: " ";
padding-top: 100%;
display: block;
}
svg {
height: 60%;
width: 60%;
position: absolute;
stroke: white;
stroke-width: 15px;
path {
fill: white;
}
}
}
.player.marked .marked {
opacity: 0.5;
}
/****** Seat icon ********/ /****** Seat icon ********/
.player .seat { .player .seat {
position: absolute; position: absolute;

View File

@ -19,12 +19,6 @@
</em> </em>
<em v-else>(majority is {{ Math.ceil(players.length / 2) }})</em> <em v-else>(majority is {{ Math.ceil(players.length / 2) }})</em>
<div v-if="session.isVoteInProgress || session.lockedVote > 1">
<em class="blue" v-if="voters.length">{{ voters.join(", ") }} </em>
<span v-else>nobody</span>
had their hand <em>UP</em>
</div>
<template v-if="!session.isSpectator"> <template v-if="!session.isSpectator">
<div v-if="!session.isVoteInProgress && session.lockedVote < 1"> <div v-if="!session.isVoteInProgress && session.lockedVote < 1">
Time per player: Time per player:
@ -61,6 +55,20 @@
</template> </template>
<div class="button demon" @click="finish">Close</div> <div class="button demon" @click="finish">Close</div>
</div> </div>
<div class="button-group mark" v-if="nominee.role.team !== 'traveler'">
<div
class="button"
:class="{
disabled: session.nomination[1] === session.markedPlayer
}"
@click="setMarked"
>
Mark for execution
</div>
<div class="button" @click="removeMarked">
Clear mark
</div>
</div>
</template> </template>
<template v-else-if="canVote"> <template v-else-if="canVote">
<div v-if="!session.isVoteInProgress"> <div v-if="!session.isVoteInProgress">
@ -235,6 +243,12 @@ export default {
if (speed > 0) { if (speed > 0) {
this.$store.commit("session/setVotingSpeed", speed); this.$store.commit("session/setVotingSpeed", speed);
} }
},
setMarked() {
this.$store.commit("session/setMarkedPlayer", this.session.nomination[1]);
},
removeMarked() {
this.$store.commit("session/setMarkedPlayer", -1);
} }
} }
}; };
@ -257,6 +271,11 @@ export default {
text-shadow: 0 1px 2px #000000, 0 -1px 2px #000000, 1px 0 2px #000000, text-shadow: 0 1px 2px #000000, 0 -1px 2px #000000, 1px 0 2px #000000,
-1px 0 2px #000000; -1px 0 2px #000000;
.mark .button {
font-size: 75%;
margin: 0;
}
&:after { &:after {
content: " "; content: " ";
padding-bottom: 100%; padding-bottom: 100%;

View File

@ -35,6 +35,7 @@ const faIcons = [
"RedoAlt", "RedoAlt",
"SearchMinus", "SearchMinus",
"SearchPlus", "SearchPlus",
"Skull",
"Square", "Square",
"TheaterMasks", "TheaterMasks",
"Times", "Times",

View File

@ -25,6 +25,7 @@ const state = () => ({
votingSpeed: 3000, votingSpeed: 3000,
isVoteInProgress: false, isVoteInProgress: false,
voteHistory: [], voteHistory: [],
markedPlayer: -1,
isVoteHistoryAllowed: true, isVoteHistoryAllowed: true,
isRolesDistributed: false isRolesDistributed: false
}); });
@ -46,6 +47,7 @@ const mutations = {
setPing: set("ping"), setPing: set("ping"),
setVotingSpeed: set("votingSpeed"), setVotingSpeed: set("votingSpeed"),
setVoteInProgress: set("isVoteInProgress"), setVoteInProgress: set("isVoteInProgress"),
setMarkedPlayer: set("markedPlayer"),
setNomination: set("nomination"), setNomination: set("nomination"),
setVoteHistoryAllowed: set("isVoteHistoryAllowed"), setVoteHistoryAllowed: set("isVoteHistoryAllowed"),
claimSeat: set("claimedSeat"), claimSeat: set("claimedSeat"),

View File

@ -168,6 +168,10 @@ class LiveSession {
if (!this._isSpectator) return; if (!this._isSpectator) return;
this._store.commit("players/remove", params); this._store.commit("players/remove", params);
break; break;
case "marked":
if (!this._isSpectator) return;
this._store.commit("session/setMarkedPlayer", params);
break;
case "isNight": case "isNight":
if (!this._isSpectator) return; if (!this._isSpectator) return;
this._store.commit("toggleNight", params); this._store.commit("toggleNight", params);
@ -278,6 +282,7 @@ class LiveSession {
votingSpeed: session.votingSpeed, votingSpeed: session.votingSpeed,
lockedVote: session.lockedVote, lockedVote: session.lockedVote,
isVoteInProgress: session.isVoteInProgress, isVoteInProgress: session.isVoteInProgress,
markedPlayer: session.markedPlayer,
fabled: fabled.map(f => (f.isCustom ? f : { id: f.id })), fabled: fabled.map(f => (f.isCustom ? f : { id: f.id })),
...(session.nomination ? { votes: session.votes } : {}) ...(session.nomination ? { votes: session.votes } : {})
}); });
@ -301,6 +306,7 @@ class LiveSession {
votes, votes,
lockedVote, lockedVote,
isVoteInProgress, isVoteInProgress,
markedPlayer,
fabled fabled
} = data; } = data;
const players = this._store.state.players.players; const players = this._store.state.players.players;
@ -355,6 +361,7 @@ class LiveSession {
lockedVote, lockedVote,
isVoteInProgress isVoteInProgress
}); });
this._store.commit("session/setMarkedPlayer", markedPlayer);
this._store.commit("players/setFabled", { this._store.commit("players/setFabled", {
fabled: fabled.map(f => this._store.state.fabled.get(f.id) || f) fabled: fabled.map(f => this._store.state.fabled.get(f.id) || f)
}); });
@ -718,6 +725,15 @@ class LiveSession {
} }
} }
/**
* Set which player is on the block. ST only
* @param playerIndex, player id or -1 for empty
*/
setMarked(playerIndex) {
if (this._isSpectator) return;
this._send("marked", playerIndex);
}
/** /**
* Clear the vote history for everyone. ST only * Clear the vote history for everyone. ST only
*/ */
@ -874,6 +890,9 @@ export default store => {
case "players/setFabled": case "players/setFabled":
session.sendFabled(); session.sendFabled();
break; break;
case "session/setMarkedPlayer":
session.setMarked(payload);
break;
case "players/swap": case "players/swap":
session.swapPlayer(payload); session.swapPlayer(payload);
break; break;