fixes & visuals

This commit is contained in:
nicfreeman1209 2021-05-09 22:13:06 +01:00
parent 5937209b35
commit dda94d75df
6 changed files with 76 additions and 65 deletions

View File

@ -342,7 +342,7 @@ export default {
toggleNight() {
this.$store.commit("toggleNight");
if (this.grimoire.isNight) {
this.$store.commit("players/setMarked", -1);
this.$store.commit("session/setMarkedPlayer", -1);
}
},
...mapMutations([

View File

@ -6,6 +6,7 @@
:class="[
{
dead: player.isDead,
marked: session.markedPlayer === index,
'no-vote': player.isVoteless,
you: session.sessionId && player.id && player.id === session.playerId,
'vote-yes': session.votes[index],
@ -99,12 +100,9 @@
/>
<!-- On block icon -->
<font-awesome-icon
icon="skull"
v-if="session.markedPlayerId === index"
class="on-block"
/>
<div class="marked">
<font-awesome-icon icon="skull" />
</div>
<div
class="name"
@click="isMenuOpen = !isMenuOpen"
@ -144,12 +142,6 @@
<font-awesome-icon icon="times-circle" />
Remove
</li>
<template v-if="!session.nomination">
<li @click="nominatePlayer()">
<font-awesome-icon icon="hand-point-right" />
Nomination
</li>
</template>
<li
@click="updatePlayer('id', '', true)"
v-if="player.id && session.sessionId"
@ -157,6 +149,12 @@
<font-awesome-icon icon="chair" />
Empty seat
</li>
<template v-if="!session.nomination">
<li @click="nominatePlayer()">
<font-awesome-icon icon="hand-point-right" />
Nomination
</li>
</template>
</template>
<li
@click="claimSeat"
@ -594,8 +592,7 @@ li.move:not(.from) .player .overlay svg.move {
}
/****** Vote icon ********/
.player .has-vote,
.player .on-block {
.player .has-vote {
color: #fff;
filter: drop-shadow(0 0 3px black);
transition: opacity 250ms;
@ -613,13 +610,6 @@ li.move:not(.from) .player .overlay svg.move {
right: 2px;
}
.on-block {
position: absolute;
margin-top: -95%;
right: 2px;
color: darkred;
}
/****** Session seat glow *****/
@mixin glow($name, $color) {
@keyframes #{$name}-glow {
@ -651,6 +641,38 @@ li.move:not(.from) .player .overlay svg.move {
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 ********/
.player .seat {
position: absolute;

View File

@ -251,13 +251,6 @@ export default {
this.move = -1;
this.swap = -1;
this.nominate = -1;
},
toggleOnBlock(playerIndex) {
if (this.players[playerIndex].isMarked) {
this.$store.commit("players/setMarked", -1);
} else {
this.$store.commit("players/setMarked", playerIndex);
}
}
}
};

View File

@ -19,12 +19,6 @@
</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">
<div v-if="!session.isVoteInProgress && session.lockedVote < 1">
Time per player:
@ -61,16 +55,17 @@
</template>
<div class="button demon" @click="finish">Close</div>
</div>
</template>
<template v-if="!session.isSpectator">
<div class="button-group mark" v-if="nominee.role.team !== 'traveler'">
<div
class="button-group"
v-if="session.lockedVote && !session.isVoteInProgress"
class="button"
:class="{
disabled: session.nomination[1] === session.markedPlayer
}"
@click="setMarked"
>
<div class="button demon" @click="setMarked">
Mark nominee
Mark for execution
</div>
<div class="button demon" @click="removeMarked">
<div class="button" @click="removeMarked">
Clear mark
</div>
</div>
@ -250,12 +245,10 @@ export default {
}
},
setMarked() {
this.$store.commit("session/setMarkedPlayerId", this.session.nomination[1]);
this.finish();
this.$store.commit("session/setMarkedPlayer", this.session.nomination[1]);
},
removeMarked() {
this.$store.commit("session/setMarkedPlayerId", -1);
this.finish();
this.$store.commit("session/setMarkedPlayer", -1);
}
}
};
@ -278,6 +271,11 @@ export default {
text-shadow: 0 1px 2px #000000, 0 -1px 2px #000000, 1px 0 2px #000000,
-1px 0 2px #000000;
.mark .button {
font-size: 75%;
margin: 0;
}
&:after {
content: " ";
padding-bottom: 100%;

View File

@ -22,10 +22,10 @@ const state = () => ({
nomination: false,
votes: [],
lockedVote: 0,
votingSpeed: 3000,
votingSpeed: 500,
isVoteInProgress: false,
voteHistory: [],
markedPlayerId: -1,
markedPlayer: -1,
isVoteHistoryAllowed: true,
isRolesDistributed: false
});
@ -47,7 +47,7 @@ const mutations = {
setPing: set("ping"),
setVotingSpeed: set("votingSpeed"),
setVoteInProgress: set("isVoteInProgress"),
setMarkedPlayerId: set("markedPlayerId"),
setMarkedPlayer: set("markedPlayer"),
setNomination: set("nomination"),
setVoteHistoryAllowed: set("isVoteHistoryAllowed"),
claimSeat: set("claimedSeat"),

View File

@ -170,7 +170,7 @@ class LiveSession {
break;
case "marked":
if (!this._isSpectator) return;
this._store.commit("session/setMarkedPlayerId", params);
this._store.commit("session/setMarkedPlayer", params);
break;
case "isNight":
if (!this._isSpectator) return;
@ -282,7 +282,7 @@ class LiveSession {
votingSpeed: session.votingSpeed,
lockedVote: session.lockedVote,
isVoteInProgress: session.isVoteInProgress,
markedPlayerId: session.markedPlayerId,
markedPlayer: session.markedPlayer,
fabled: fabled.map(f => (f.isCustom ? f : { id: f.id })),
...(session.nomination ? { votes: session.votes } : {})
});
@ -306,7 +306,7 @@ class LiveSession {
votes,
lockedVote,
isVoteInProgress,
markedPlayerId,
markedPlayer,
fabled
} = data;
const players = this._store.state.players.players;
@ -325,14 +325,12 @@ class LiveSession {
const player = players[x];
const { roleId } = state;
// update relevant properties
["name", "id", "isDead", "isVoteless", "pronouns"].forEach(
property => {
["name", "id", "isDead", "isVoteless", "pronouns"].forEach(property => {
const value = state[property];
if (player[property] !== value) {
this._store.commit("players/update", { player, property, value });
}
}
);
});
// roles are special, because of travelers
if (roleId && player.role.id !== roleId) {
const role =
@ -361,9 +359,9 @@ class LiveSession {
votes,
votingSpeed,
lockedVote,
isVoteInProgress,
isVoteInProgress
});
this._store.commit("session/setMarkedPlayerId", markedPlayerId);
this._store.commit("session/setMarkedPlayer", markedPlayer);
this._store.commit("players/setFabled", {
fabled: fabled.map(f => this._store.state.fabled.get(f.id) || f)
});
@ -729,7 +727,7 @@ class LiveSession {
/**
* Set which player is on the block. ST only
* @param id, player id or -1 for empty
* @param playerIndex, player id or -1 for empty
*/
setMarked(playerIndex) {
if (this._isSpectator) return;
@ -892,7 +890,7 @@ export default store => {
case "players/setFabled":
session.sendFabled();
break;
case "session/setMarkedPlayerId":
case "session/setMarkedPlayer":
session.setMarked(payload);
break;
case "players/swap":