fixes & visuals

src/components/Menu.vue

@@ -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([

src/components/Player.vue

@@ -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;

src/components/TownSquare.vue

@@ -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);
-      }
     }
   }
 };

src/components/Vote.vue

@@ -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%;

src/store/modules/session.js

@@ -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"),

src/store/socket.js

@@ -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":