From 943d228e9871d77fdc21226b61e732bc1e8e7cd4 Mon Sep 17 00:00:00 2001
From: nicfreeman1209 <nicfreeman1209@gmail.com>
Date: Sun, 2 May 2021 22:52:20 +0100
Subject: [PATCH 01/13] add 'on the block' indicator

- after vote, ST chooses to put onto block / empty block / no change to block
- player menu has add / remove from block
- players are automatically removed from the block when (i) they die (ii) another player is put onto block
- fixed crash on add/remove/etc player mid vote
---
 CHANGELOG.md                  |  2 +
 src/components/Menu.vue       |  2 +-
 src/components/Player.vue     | 69 +++++++++++++++++++++++++----------
 src/components/TownSquare.vue |  7 ++++
 src/components/Vote.vue       | 21 +++++++++++
 src/main.js                   |  1 +
 src/store/modules/players.js  |  9 +++++
 src/store/socket.js           | 29 ++++++++++++---
 8 files changed, 115 insertions(+), 25 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e62792b..7415615 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,7 @@
 # Release Notes
 
+- add 'on the block' indicator
+
 ### Version 2.12.0
 - tweak reference sheet to better fit screen in single column layout
 - add warning icon overlay for setup roles on character assignment modal
diff --git a/src/components/Menu.vue b/src/components/Menu.vue
index 40abc72..9b919c6 100644
--- a/src/components/Menu.vue
+++ b/src/components/Menu.vue
@@ -143,7 +143,7 @@
           </template>
         </template>
 
-        <template v-if="tab === 'players' && !session.isSpectator">
+        <template v-if="tab === 'players' && !session.isSpectator && !session.nomination">
           <!-- Users -->
           <li class="headline">Players</li>
           <li @click="addPlayer" v-if="players.length < 20">Add<em>[A]</em></li>
diff --git a/src/components/Player.vue b/src/components/Player.vue
index 6ee7c4e..a0f7489 100644
--- a/src/components/Player.vue
+++ b/src/components/Player.vue
@@ -97,6 +97,11 @@
         @click="updatePlayer('isVoteless', true)"
         title="Ghost vote"
       />
+      <font-awesome-icon
+        icon="crosshairs"
+        v-if="player.isOnBlock"
+        class="on-block"
+      />
       <div
         class="name"
         @click="isMenuOpen = !isMenuOpen"
@@ -124,18 +129,28 @@
             <li @click="changeName">
               <font-awesome-icon icon="user-edit" />Rename
             </li>
-            <li v-if="!session.nomination" @click="nominatePlayer()">
-              <font-awesome-icon icon="hand-point-right" />
-              Nomination
-            </li>
-            <li @click="movePlayer()">
-              <font-awesome-icon icon="redo-alt" />
-              Move player
-            </li>
-            <li @click="swapPlayer()">
-              <font-awesome-icon icon="exchange-alt" />
-              Swap seats
+            <li v-if="!session.nomination" @click="removePlayer">
+              <font-awesome-icon icon="times-circle" />
+              Remove
             </li>
+            <template v-if="!session.nomination">
+              <li @click="movePlayer()">
+                <font-awesome-icon icon="redo-alt" />
+                Move player
+              </li>
+              <li @click="swapPlayer()">
+                <font-awesome-icon icon="exchange-alt" />
+                Swap seats
+              </li>
+              <li @click="toggleOnBlock()">
+                <font-awesome-icon icon="crosshairs" />
+                {{ player.isOnBlock ? "Take off block" : "Put on block" }}
+              </li>
+              <li @click="nominatePlayer()">
+                <font-awesome-icon icon="hand-point-right" />
+                Nomination
+              </li>
+            </template>
             <li
               @click="updatePlayer('id', '', true)"
               v-if="player.id && session.sessionId"
@@ -143,10 +158,6 @@
               <font-awesome-icon icon="chair" />
               Empty seat
             </li>
-            <li @click="removePlayer">
-              <font-awesome-icon icon="times-circle" />
-              Remove
-            </li>
           </template>
           <li
             @click="claimSeat"
@@ -257,6 +268,9 @@ export default {
       if (this.grimoire.isPublic) {
         if (!this.player.isDead) {
           this.updatePlayer("isDead", true);
+          if (this.player.isOnBlock) {
+            this.toggleOnBlock();
+          }
         } else if (this.player.isVoteless) {
           this.updatePlayer("isVoteless", false);
           this.updatePlayer("isDead", false);
@@ -265,6 +279,9 @@ export default {
         }
       } else {
         this.updatePlayer("isDead", !this.player.isDead);
+        if (this.player.isOnBlock) {
+          this.toggleOnBlock();
+        }
         if (this.player.isVoteless) {
           this.updatePlayer("isVoteless", false);
         }
@@ -319,6 +336,10 @@ export default {
       this.isMenuOpen = false;
       this.$emit("trigger", ["claimSeat"]);
     },
+    toggleOnBlock() {
+      this.isMenuOpen = false;
+      this.$emit("trigger", ["toggleOnBlock"]);
+    },
     /**
      * Allow the ST to override a locked vote.
      */
@@ -578,10 +599,7 @@ li.move:not(.from) .player .overlay svg.move {
 }
 
 /****** Vote icon ********/
-.player .has-vote {
-  position: absolute;
-  right: 2px;
-  margin-top: -15%;
+.player .has-vote .on-block {
   color: #fff;
   filter: drop-shadow(0 0 3px black);
   transition: opacity 250ms;
@@ -593,6 +611,19 @@ li.move:not(.from) .player .overlay svg.move {
   }
 }
 
+.has-vote {
+  position: absolute;
+  margin-top: -15%;
+  right: 2px;
+}
+
+.on-block {
+  position: absolute;
+  margin-top: -15%;
+  left: 3px;
+  color: darkred;
+}
+
 /****** Session seat glow *****/
 @mixin glow($name, $color) {
   @keyframes #{$name}-glow {
diff --git a/src/components/TownSquare.vue b/src/components/TownSquare.vue
index 729a813..86cb846 100644
--- a/src/components/TownSquare.vue
+++ b/src/components/TownSquare.vue
@@ -201,6 +201,13 @@ export default {
       this.move = -1;
       this.swap = -1;
       this.nominate = -1;
+    },
+    toggleOnBlock(playerIndex) {
+      if (this.players[playerIndex].isOnBlock) {
+        this.$store.commit("players/setOnBlock", -1);
+      } else {
+        this.$store.commit("players/setOnBlock", playerIndex);
+      }
     }
   }
 };
diff --git a/src/components/Vote.vue b/src/components/Vote.vue
index 4bdd242..0152f29 100644
--- a/src/components/Vote.vue
+++ b/src/components/Vote.vue
@@ -62,6 +62,19 @@
           <div class="button demon" @click="finish">Close</div>
         </div>
       </template>
+      <template v-if="!session.isSpectator">
+        <div
+          class="button-group"
+          v-if="session.lockedVote && !session.isVoteInProgress"
+        >
+          <div class="button demon" @click="setOnBlock">
+            Put on block
+          </div>
+          <div class="button demon" @click="emptyBlock">
+            Empty block
+          </div>
+        </div>
+      </template>
       <template v-else-if="canVote">
         <div v-if="!session.isVoteInProgress">
           {{ session.votingSpeed / 1000 }} seconds between votes
@@ -235,6 +248,14 @@ export default {
       if (speed > 0) {
         this.$store.commit("session/setVotingSpeed", speed);
       }
+    },
+    setOnBlock() {
+      this.$store.commit("players/setOnBlock", this.session.nomination[1]);
+      this.finish();
+    },
+    emptyBlock() {
+      this.$store.commit("players/setOnBlock", -1);
+      this.finish();
     }
   }
 };
diff --git a/src/main.js b/src/main.js
index dd39a1b..35c7fc6 100644
--- a/src/main.js
+++ b/src/main.js
@@ -16,6 +16,7 @@ const faIcons = [
   "CloudMoon",
   "Cog",
   "Copy",
+  "Crosshairs",
   "Dice",
   "Dragon",
   "ExchangeAlt",
diff --git a/src/store/modules/players.js b/src/store/modules/players.js
index 9a7ab0f..8d8d08c 100644
--- a/src/store/modules/players.js
+++ b/src/store/modules/players.js
@@ -5,6 +5,7 @@ const NEWPLAYER = {
   reminders: [],
   isVoteless: false,
   isDead: false,
+  isOnBlock: false,
   pronouns: ""
 };
 
@@ -136,6 +137,14 @@ const mutations = {
   move(state, [from, to]) {
     state.players.splice(to, 0, state.players.splice(from, 1)[0]);
   },
+  setOnBlock(state, playerIndex) {
+    state.players.forEach(player => {
+      player.isOnBlock = false;
+    });
+    if (playerIndex >= 0) {
+      state.players[playerIndex].isOnBlock = true;
+    }
+  },
   setBluff(state, { index, role } = {}) {
     if (index !== undefined) {
       state.bluffs.splice(index, 1, role);
diff --git a/src/store/socket.js b/src/store/socket.js
index e193a08..3dc4239 100644
--- a/src/store/socket.js
+++ b/src/store/socket.js
@@ -168,6 +168,10 @@ class LiveSession {
         if (!this._isSpectator) return;
         this._store.commit("players/remove", params);
         break;
+      case "onBlock":
+        if (!this._isSpectator) return;
+        this._store.commit("players/setOnBlock", params);
+        break;
       case "isNight":
         if (!this._isSpectator) return;
         this._store.commit("toggleNight", params);
@@ -251,6 +255,7 @@ class LiveSession {
       id: player.id,
       isDead: player.isDead,
       isVoteless: player.isVoteless,
+      isOnBlock: player.isOnBlock,
       pronouns: player.pronouns,
       ...(player.role && player.role.team === "traveler"
         ? { roleId: player.role.id }
@@ -312,12 +317,14 @@ class LiveSession {
       const player = players[x];
       const { roleId } = state;
       // update relevant properties
-      ["name", "id", "isDead", "isVoteless", "pronouns"].forEach(property => {
-        const value = state[property];
-        if (player[property] !== value) {
-          this._store.commit("players/update", { player, property, value });
+      ["name", "id", "isDead", "isVoteless", "isOnBlock", "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 =
@@ -697,6 +704,15 @@ class LiveSession {
     }
   }
 
+  /**
+   * Set which player is on the block. ST only
+   * @param id, player id or -1 for empty
+   */
+  setOnBlock(playerIndex) {
+    if (this._isSpectator) return;
+    this._send("onBlock", playerIndex);
+  }
+
   /**
    * Clear the vote history for everyone. ST only
    */
@@ -849,6 +865,9 @@ export default store => {
       case "players/setFabled":
         session.sendFabled();
         break;
+      case "players/setOnBlock":
+        session.setOnBlock(payload);
+        break;
       case "players/swap":
         session.swapPlayer(payload);
         break;

From f0619bdaebd69c8d8ba3d47caa6b774a523f49e6 Mon Sep 17 00:00:00 2001
From: nicfreeman1209 <nicfreeman1209@gmail.com>
Date: Mon, 3 May 2021 16:53:46 +0100
Subject: [PATCH 02/13] empty block at night

---
 src/store/socket.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/store/socket.js b/src/store/socket.js
index 3dc4239..c2d1af3 100644
--- a/src/store/socket.js
+++ b/src/store/socket.js
@@ -691,6 +691,9 @@ class LiveSession {
   setIsNight() {
     if (this._isSpectator) return;
     this._send("isNight", this._store.state.grimoire.isNight);
+    if (this._store.state.grimoire.isNight) {
+      this._store.commit("players/setOnBlock", -1);
+    }
   }
 
   /**

From 14de625811a511ff87ecd611eb6782d13826e027 Mon Sep 17 00:00:00 2001
From: nicfreeman1209 <nicfreeman1209@gmail.com>
Date: Mon, 3 May 2021 17:22:47 +0100
Subject: [PATCH 03/13] avoid clashing with seat icon

---
 src/components/Player.vue | 11 +++++++----
 src/main.js               |  2 +-
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/Player.vue b/src/components/Player.vue
index a0f7489..f484e33 100644
--- a/src/components/Player.vue
+++ b/src/components/Player.vue
@@ -97,11 +97,14 @@
         @click="updatePlayer('isVoteless', true)"
         title="Ghost vote"
       />
+
+      <!-- On block icon -->
       <font-awesome-icon
-        icon="crosshairs"
+        icon="skull"
         v-if="player.isOnBlock"
         class="on-block"
       />
+
       <div
         class="name"
         @click="isMenuOpen = !isMenuOpen"
@@ -143,7 +146,7 @@
                 Swap seats
               </li>
               <li @click="toggleOnBlock()">
-                <font-awesome-icon icon="crosshairs" />
+                <font-awesome-icon icon="skull" />
                 {{ player.isOnBlock ? "Take off block" : "Put on block" }}
               </li>
               <li @click="nominatePlayer()">
@@ -619,8 +622,8 @@ li.move:not(.from) .player .overlay svg.move {
 
 .on-block {
   position: absolute;
-  margin-top: -15%;
-  left: 3px;
+  margin-top: -95%;
+  right: 2px;
   color: darkred;
 }
 
diff --git a/src/main.js b/src/main.js
index 35c7fc6..9d7af31 100644
--- a/src/main.js
+++ b/src/main.js
@@ -16,7 +16,6 @@ const faIcons = [
   "CloudMoon",
   "Cog",
   "Copy",
-  "Crosshairs",
   "Dice",
   "Dragon",
   "ExchangeAlt",
@@ -36,6 +35,7 @@ const faIcons = [
   "RedoAlt",
   "SearchMinus",
   "SearchPlus",
+  "Skull",
   "Square",
   "TheaterMasks",
   "Times",

From 4067f45ee25b6c17866612e410a99179a77b5f31 Mon Sep 17 00:00:00 2001
From: nicfreeman1209 <nicfreeman1209@gmail.com>
Date: Tue, 4 May 2021 22:01:20 +0100
Subject: [PATCH 04/13] lint

---
 src/components/Menu.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/Menu.vue b/src/components/Menu.vue
index 9b919c6..6063014 100644
--- a/src/components/Menu.vue
+++ b/src/components/Menu.vue
@@ -143,7 +143,11 @@
           </template>
         </template>
 
-        <template v-if="tab === 'players' && !session.isSpectator && !session.nomination">
+        <template
+          v-if="
+            tab === 'players' && !session.isSpectator && !session.nomination
+          "
+        >
           <!-- Users -->
           <li class="headline">Players</li>
           <li @click="addPlayer" v-if="players.length < 20">Add<em>[A]</em></li>

From 00e1446e6488d3462facc80ef5ed3143ec94d815 Mon Sep 17 00:00:00 2001
From: nicfreeman1209 <nicfreeman1209@gmail.com>
Date: Tue, 4 May 2021 23:18:25 +0100
Subject: [PATCH 05/13] minor

---
 src/components/Menu.vue   | 2 +-
 src/components/Player.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Menu.vue b/src/components/Menu.vue
index 6063014..0819449 100644
--- a/src/components/Menu.vue
+++ b/src/components/Menu.vue
@@ -145,7 +145,7 @@
 
         <template
           v-if="
-            tab === 'players' && !session.isSpectator && !session.nomination
+            tab === 'players' && !session.isSpectator
           "
         >
           <!-- Users -->
diff --git a/src/components/Player.vue b/src/components/Player.vue
index f484e33..cae71ca 100644
--- a/src/components/Player.vue
+++ b/src/components/Player.vue
@@ -602,7 +602,7 @@ li.move:not(.from) .player .overlay svg.move {
 }
 
 /****** Vote icon ********/
-.player .has-vote .on-block {
+.player .has-vote, .player .on-block {
   color: #fff;
   filter: drop-shadow(0 0 3px black);
   transition: opacity 250ms;

From 335c2dd2110479221e5e9d2a5f44e0fcf8b249b8 Mon Sep 17 00:00:00 2001
From: nicfreeman1209 <nicfreeman1209@gmail.com>
Date: Wed, 5 May 2021 08:20:38 +0100
Subject: [PATCH 06/13] remove direct ST control of block

---
 src/components/Player.vue | 16 ++++------------
 1 file changed, 4 insertions(+), 12 deletions(-)

diff --git a/src/components/Player.vue b/src/components/Player.vue
index cae71ca..7cf8cac 100644
--- a/src/components/Player.vue
+++ b/src/components/Player.vue
@@ -132,11 +132,10 @@
             <li @click="changeName">
               <font-awesome-icon icon="user-edit" />Rename
             </li>
-            <li v-if="!session.nomination" @click="removePlayer">
+            <li @click="removePlayer">
               <font-awesome-icon icon="times-circle" />
               Remove
             </li>
-            <template v-if="!session.nomination">
               <li @click="movePlayer()">
                 <font-awesome-icon icon="redo-alt" />
                 Move player
@@ -145,10 +144,7 @@
                 <font-awesome-icon icon="exchange-alt" />
                 Swap seats
               </li>
-              <li @click="toggleOnBlock()">
-                <font-awesome-icon icon="skull" />
-                {{ player.isOnBlock ? "Take off block" : "Put on block" }}
-              </li>
+            <template v-if="!session.nomination">
               <li @click="nominatePlayer()">
                 <font-awesome-icon icon="hand-point-right" />
                 Nomination
@@ -272,7 +268,7 @@ export default {
         if (!this.player.isDead) {
           this.updatePlayer("isDead", true);
           if (this.player.isOnBlock) {
-            this.toggleOnBlock();
+            this.updatePlayer("isOnBlock", false);
           }
         } else if (this.player.isVoteless) {
           this.updatePlayer("isVoteless", false);
@@ -283,7 +279,7 @@ export default {
       } else {
         this.updatePlayer("isDead", !this.player.isDead);
         if (this.player.isOnBlock) {
-          this.toggleOnBlock();
+          this.updatePlayer("isOnBlock", false);
         }
         if (this.player.isVoteless) {
           this.updatePlayer("isVoteless", false);
@@ -339,10 +335,6 @@ export default {
       this.isMenuOpen = false;
       this.$emit("trigger", ["claimSeat"]);
     },
-    toggleOnBlock() {
-      this.isMenuOpen = false;
-      this.$emit("trigger", ["toggleOnBlock"]);
-    },
     /**
      * Allow the ST to override a locked vote.
      */

From 946bafec5b0ac0f249843ea1627f5246618f021b Mon Sep 17 00:00:00 2001
From: nicfreeman1209 <nicfreeman1209@gmail.com>
Date: Wed, 5 May 2021 11:21:31 +0100
Subject: [PATCH 07/13] player menu order

---
 src/components/Menu.vue   |  6 +-----
 src/components/Player.vue | 19 ++++++++++---------
 2 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/src/components/Menu.vue b/src/components/Menu.vue
index 0819449..40abc72 100644
--- a/src/components/Menu.vue
+++ b/src/components/Menu.vue
@@ -143,11 +143,7 @@
           </template>
         </template>
 
-        <template
-          v-if="
-            tab === 'players' && !session.isSpectator
-          "
-        >
+        <template v-if="tab === 'players' && !session.isSpectator">
           <!-- Users -->
           <li class="headline">Players</li>
           <li @click="addPlayer" v-if="players.length < 20">Add<em>[A]</em></li>
diff --git a/src/components/Player.vue b/src/components/Player.vue
index 7cf8cac..a90f0a2 100644
--- a/src/components/Player.vue
+++ b/src/components/Player.vue
@@ -132,18 +132,18 @@
             <li @click="changeName">
               <font-awesome-icon icon="user-edit" />Rename
             </li>
+            <li @click="movePlayer()">
+              <font-awesome-icon icon="redo-alt" />
+              Move player
+            </li>
+            <li @click="swapPlayer()">
+              <font-awesome-icon icon="exchange-alt" />
+              Swap seats
+            </li>
             <li @click="removePlayer">
               <font-awesome-icon icon="times-circle" />
               Remove
             </li>
-              <li @click="movePlayer()">
-                <font-awesome-icon icon="redo-alt" />
-                Move player
-              </li>
-              <li @click="swapPlayer()">
-                <font-awesome-icon icon="exchange-alt" />
-                Swap seats
-              </li>
             <template v-if="!session.nomination">
               <li @click="nominatePlayer()">
                 <font-awesome-icon icon="hand-point-right" />
@@ -594,7 +594,8 @@ li.move:not(.from) .player .overlay svg.move {
 }
 
 /****** Vote icon ********/
-.player .has-vote, .player .on-block {
+.player .has-vote,
+.player .on-block {
   color: #fff;
   filter: drop-shadow(0 0 3px black);
   transition: opacity 250ms;

From 8dacfea0cb092a4be702bc9427ed8a2be1793dea Mon Sep 17 00:00:00 2001
From: nicfreeman1209 <nicfreeman1209@gmail.com>
Date: Wed, 5 May 2021 11:54:48 +0100
Subject: [PATCH 08/13] move block/night logic from socket to menu

---
 src/App.vue             | 2 +-
 src/components/Menu.vue | 7 ++++++-
 src/store/socket.js     | 3 ---
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index bb5bc65..1956431 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -116,7 +116,7 @@ export default {
           break;
         case "s":
           if (this.session.isSpectator) return;
-          this.$store.commit("toggleNight");
+          this.$refs.menu.toggleNight();
           break;
         case "escape":
           this.$store.commit("toggleModal");
diff --git a/src/components/Menu.vue b/src/components/Menu.vue
index 40abc72..bc951c4 100644
--- a/src/components/Menu.vue
+++ b/src/components/Menu.vue
@@ -327,12 +327,17 @@ export default {
         this.$store.dispatch("players/clearRoles");
       }
     },
+    toggleNight() {
+      this.$store.commit("toggleNight");
+      if (this.grimoire.isNight) {
+        this.$store.commit("players/setOnBlock", -1);
+      }
+    },
     ...mapMutations([
       "toggleGrimoire",
       "toggleMenu",
       "toggleImageOptIn",
       "toggleMuted",
-      "toggleNight",
       "toggleNightOrder",
       "setZoom",
       "toggleModal"
diff --git a/src/store/socket.js b/src/store/socket.js
index c2d1af3..3dc4239 100644
--- a/src/store/socket.js
+++ b/src/store/socket.js
@@ -691,9 +691,6 @@ class LiveSession {
   setIsNight() {
     if (this._isSpectator) return;
     this._send("isNight", this._store.state.grimoire.isNight);
-    if (this._store.state.grimoire.isNight) {
-      this._store.commit("players/setOnBlock", -1);
-    }
   }
 
   /**

From 205bd0ba799cb90eac8d7bdcd7c4579de32eee02 Mon Sep 17 00:00:00 2001
From: nicfreeman1209 <nicfreeman1209@gmail.com>
Date: Wed, 5 May 2021 15:20:37 +0100
Subject: [PATCH 09/13] on block -> marked

---
 src/components/Menu.vue       |  2 +-
 src/components/Player.vue     | 10 +++++-----
 src/components/TownSquare.vue |  6 +++---
 src/components/Vote.vue       | 16 ++++++++--------
 src/store/modules/players.js  |  8 ++++----
 src/store/socket.js           | 12 ++++++------
 6 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/src/components/Menu.vue b/src/components/Menu.vue
index bc951c4..764c27e 100644
--- a/src/components/Menu.vue
+++ b/src/components/Menu.vue
@@ -330,7 +330,7 @@ export default {
     toggleNight() {
       this.$store.commit("toggleNight");
       if (this.grimoire.isNight) {
-        this.$store.commit("players/setOnBlock", -1);
+        this.$store.commit("players/setMarked", -1);
       }
     },
     ...mapMutations([
diff --git a/src/components/Player.vue b/src/components/Player.vue
index a90f0a2..8c28e06 100644
--- a/src/components/Player.vue
+++ b/src/components/Player.vue
@@ -101,7 +101,7 @@
       <!-- On block icon -->
       <font-awesome-icon
         icon="skull"
-        v-if="player.isOnBlock"
+        v-if="player.isMarked"
         class="on-block"
       />
 
@@ -267,8 +267,8 @@ export default {
       if (this.grimoire.isPublic) {
         if (!this.player.isDead) {
           this.updatePlayer("isDead", true);
-          if (this.player.isOnBlock) {
-            this.updatePlayer("isOnBlock", false);
+          if (this.player.isMarked) {
+            this.updatePlayer("isMarked", false);
           }
         } else if (this.player.isVoteless) {
           this.updatePlayer("isVoteless", false);
@@ -278,8 +278,8 @@ export default {
         }
       } else {
         this.updatePlayer("isDead", !this.player.isDead);
-        if (this.player.isOnBlock) {
-          this.updatePlayer("isOnBlock", false);
+        if (this.player.isMarked) {
+          this.updatePlayer("isMarked", false);
         }
         if (this.player.isVoteless) {
           this.updatePlayer("isVoteless", false);
diff --git a/src/components/TownSquare.vue b/src/components/TownSquare.vue
index 86cb846..1bd17b3 100644
--- a/src/components/TownSquare.vue
+++ b/src/components/TownSquare.vue
@@ -203,10 +203,10 @@ export default {
       this.nominate = -1;
     },
     toggleOnBlock(playerIndex) {
-      if (this.players[playerIndex].isOnBlock) {
-        this.$store.commit("players/setOnBlock", -1);
+      if (this.players[playerIndex].isMarked) {
+        this.$store.commit("players/setMarked", -1);
       } else {
-        this.$store.commit("players/setOnBlock", playerIndex);
+        this.$store.commit("players/setMarked", playerIndex);
       }
     }
   }
diff --git a/src/components/Vote.vue b/src/components/Vote.vue
index 0152f29..3bc807d 100644
--- a/src/components/Vote.vue
+++ b/src/components/Vote.vue
@@ -67,11 +67,11 @@
           class="button-group"
           v-if="session.lockedVote && !session.isVoteInProgress"
         >
-          <div class="button demon" @click="setOnBlock">
-            Put on block
+          <div class="button demon" @click="setMarked">
+            Mark nominee
           </div>
-          <div class="button demon" @click="emptyBlock">
-            Empty block
+          <div class="button demon" @click="removeMarked">
+            Clear mark
           </div>
         </div>
       </template>
@@ -249,12 +249,12 @@ export default {
         this.$store.commit("session/setVotingSpeed", speed);
       }
     },
-    setOnBlock() {
-      this.$store.commit("players/setOnBlock", this.session.nomination[1]);
+    setMarked() {
+      this.$store.commit("players/setMarked", this.session.nomination[1]);
       this.finish();
     },
-    emptyBlock() {
-      this.$store.commit("players/setOnBlock", -1);
+    removeMarked() {
+      this.$store.commit("players/setMarked", -1);
       this.finish();
     }
   }
diff --git a/src/store/modules/players.js b/src/store/modules/players.js
index 8d8d08c..38a740c 100644
--- a/src/store/modules/players.js
+++ b/src/store/modules/players.js
@@ -5,7 +5,7 @@ const NEWPLAYER = {
   reminders: [],
   isVoteless: false,
   isDead: false,
-  isOnBlock: false,
+  isMarked: false,
   pronouns: ""
 };
 
@@ -137,12 +137,12 @@ const mutations = {
   move(state, [from, to]) {
     state.players.splice(to, 0, state.players.splice(from, 1)[0]);
   },
-  setOnBlock(state, playerIndex) {
+  setMarked(state, playerIndex) {
     state.players.forEach(player => {
-      player.isOnBlock = false;
+      player.isMarked = false;
     });
     if (playerIndex >= 0) {
-      state.players[playerIndex].isOnBlock = true;
+      state.players[playerIndex].isMarked = true;
     }
   },
   setBluff(state, { index, role } = {}) {
diff --git a/src/store/socket.js b/src/store/socket.js
index 3dc4239..305a439 100644
--- a/src/store/socket.js
+++ b/src/store/socket.js
@@ -170,7 +170,7 @@ class LiveSession {
         break;
       case "onBlock":
         if (!this._isSpectator) return;
-        this._store.commit("players/setOnBlock", params);
+        this._store.commit("players/setMarked", params);
         break;
       case "isNight":
         if (!this._isSpectator) return;
@@ -255,7 +255,7 @@ class LiveSession {
       id: player.id,
       isDead: player.isDead,
       isVoteless: player.isVoteless,
-      isOnBlock: player.isOnBlock,
+      isMarked: player.isMarked,
       pronouns: player.pronouns,
       ...(player.role && player.role.team === "traveler"
         ? { roleId: player.role.id }
@@ -317,7 +317,7 @@ class LiveSession {
       const player = players[x];
       const { roleId } = state;
       // update relevant properties
-      ["name", "id", "isDead", "isVoteless", "isOnBlock", "pronouns"].forEach(
+      ["name", "id", "isDead", "isVoteless", "isMarked", "pronouns"].forEach(
         property => {
           const value = state[property];
           if (player[property] !== value) {
@@ -708,7 +708,7 @@ class LiveSession {
    * Set which player is on the block. ST only
    * @param id, player id or -1 for empty
    */
-  setOnBlock(playerIndex) {
+  setMarked(playerIndex) {
     if (this._isSpectator) return;
     this._send("onBlock", playerIndex);
   }
@@ -865,8 +865,8 @@ export default store => {
       case "players/setFabled":
         session.sendFabled();
         break;
-      case "players/setOnBlock":
-        session.setOnBlock(payload);
+      case "players/setMarked":
+        session.setMarked(payload);
         break;
       case "players/swap":
         session.swapPlayer(payload);

From 4d2afadc01e9b37f1e4e51a8ec8ea36f11c6e384 Mon Sep 17 00:00:00 2001
From: nicfreeman1209 <nicfreeman1209@gmail.com>
Date: Sat, 8 May 2021 11:01:23 +0100
Subject: [PATCH 10/13] requested change

record marked player id in session
---
 src/components/Player.vue    |  2 +-
 src/components/Vote.vue      |  4 ++--
 src/store/modules/players.js |  9 ---------
 src/store/modules/session.js |  2 ++
 src/store/socket.js          | 18 ++++++++++--------
 5 files changed, 15 insertions(+), 20 deletions(-)

diff --git a/src/components/Player.vue b/src/components/Player.vue
index 8c28e06..cc3d4d2 100644
--- a/src/components/Player.vue
+++ b/src/components/Player.vue
@@ -101,7 +101,7 @@
       <!-- On block icon -->
       <font-awesome-icon
         icon="skull"
-        v-if="player.isMarked"
+        v-if="session.markedPlayerId === index"
         class="on-block"
       />
 
diff --git a/src/components/Vote.vue b/src/components/Vote.vue
index 3bc807d..1e3a87f 100644
--- a/src/components/Vote.vue
+++ b/src/components/Vote.vue
@@ -250,11 +250,11 @@ export default {
       }
     },
     setMarked() {
-      this.$store.commit("players/setMarked", this.session.nomination[1]);
+      this.$store.commit("session/setMarkedPlayerId", this.session.nomination[1]);
       this.finish();
     },
     removeMarked() {
-      this.$store.commit("players/setMarked", -1);
+      this.$store.commit("session/setMarkedPlayerId", -1);
       this.finish();
     }
   }
diff --git a/src/store/modules/players.js b/src/store/modules/players.js
index 38a740c..9a7ab0f 100644
--- a/src/store/modules/players.js
+++ b/src/store/modules/players.js
@@ -5,7 +5,6 @@ const NEWPLAYER = {
   reminders: [],
   isVoteless: false,
   isDead: false,
-  isMarked: false,
   pronouns: ""
 };
 
@@ -137,14 +136,6 @@ const mutations = {
   move(state, [from, to]) {
     state.players.splice(to, 0, state.players.splice(from, 1)[0]);
   },
-  setMarked(state, playerIndex) {
-    state.players.forEach(player => {
-      player.isMarked = false;
-    });
-    if (playerIndex >= 0) {
-      state.players[playerIndex].isMarked = true;
-    }
-  },
   setBluff(state, { index, role } = {}) {
     if (index !== undefined) {
       state.bluffs.splice(index, 1, role);
diff --git a/src/store/modules/session.js b/src/store/modules/session.js
index 80d4aaf..a691259 100644
--- a/src/store/modules/session.js
+++ b/src/store/modules/session.js
@@ -25,6 +25,7 @@ const state = () => ({
   votingSpeed: 3000,
   isVoteInProgress: false,
   voteHistory: [],
+  markedPlayerId: -1,
   isRolesDistributed: false
 });
 
@@ -45,6 +46,7 @@ const mutations = {
   setPing: set("ping"),
   setVotingSpeed: set("votingSpeed"),
   setVoteInProgress: set("isVoteInProgress"),
+  setMarkedPlayerId: set("markedPlayerId"),
   claimSeat: set("claimedSeat"),
   distributeRoles: set("isRolesDistributed"),
   setSessionId(state, sessionId) {
diff --git a/src/store/socket.js b/src/store/socket.js
index 305a439..5c40405 100644
--- a/src/store/socket.js
+++ b/src/store/socket.js
@@ -168,9 +168,9 @@ class LiveSession {
         if (!this._isSpectator) return;
         this._store.commit("players/remove", params);
         break;
-      case "onBlock":
+      case "marked":
         if (!this._isSpectator) return;
-        this._store.commit("players/setMarked", params);
+        this._store.commit("session/setMarkedPlayerId", params);
         break;
       case "isNight":
         if (!this._isSpectator) return;
@@ -255,7 +255,6 @@ class LiveSession {
       id: player.id,
       isDead: player.isDead,
       isVoteless: player.isVoteless,
-      isMarked: player.isMarked,
       pronouns: player.pronouns,
       ...(player.role && player.role.team === "traveler"
         ? { roleId: player.role.id }
@@ -277,6 +276,7 @@ class LiveSession {
         votingSpeed: session.votingSpeed,
         lockedVote: session.lockedVote,
         isVoteInProgress: session.isVoteInProgress,
+		markedPlayerId: session.markedPlayerId,
         fabled: fabled.map(({ id }) => id),
         ...(session.nomination ? { votes: session.votes } : {})
       });
@@ -299,6 +299,7 @@ class LiveSession {
       votes,
       lockedVote,
       isVoteInProgress,
+	  markedPlayerId,
       fabled
     } = data;
     const players = this._store.state.players.players;
@@ -317,7 +318,7 @@ class LiveSession {
       const player = players[x];
       const { roleId } = state;
       // update relevant properties
-      ["name", "id", "isDead", "isVoteless", "isMarked", "pronouns"].forEach(
+      ["name", "id", "isDead", "isVoteless", "pronouns"].forEach(
         property => {
           const value = state[property];
           if (player[property] !== value) {
@@ -352,9 +353,10 @@ class LiveSession {
         votes,
         votingSpeed,
         lockedVote,
-        isVoteInProgress
+        isVoteInProgress,
       });
-      this._store.commit("players/setFabled", {
+      this._store.commit("session/setMarkedPlayerId", markedPlayerId);
+	  this._store.commit("players/setFabled", {
         fabled: fabled.map(id => this._store.state.fabled.get(id))
       });
     }
@@ -710,7 +712,7 @@ class LiveSession {
    */
   setMarked(playerIndex) {
     if (this._isSpectator) return;
-    this._send("onBlock", playerIndex);
+    this._send("marked", playerIndex);
   }
 
   /**
@@ -865,7 +867,7 @@ export default store => {
       case "players/setFabled":
         session.sendFabled();
         break;
-      case "players/setMarked":
+      case "session/setMarkedPlayerId":
         session.setMarked(payload);
         break;
       case "players/swap":

From dda94d75dfd7d455afcf5a4d08f92e439705026d Mon Sep 17 00:00:00 2001
From: nicfreeman1209 <nicfreeman1209@gmail.com>
Date: Sun, 9 May 2021 22:13:06 +0100
Subject: [PATCH 11/13] fixes & visuals

---
 src/components/Menu.vue       |  2 +-
 src/components/Player.vue     | 64 +++++++++++++++++++++++------------
 src/components/TownSquare.vue |  7 ----
 src/components/Vote.vue       | 36 ++++++++++----------
 src/store/modules/session.js  |  6 ++--
 src/store/socket.js           | 26 +++++++-------
 6 files changed, 76 insertions(+), 65 deletions(-)

diff --git a/src/components/Menu.vue b/src/components/Menu.vue
index 25e236a..46133ca 100644
--- a/src/components/Menu.vue
+++ b/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([
diff --git a/src/components/Player.vue b/src/components/Player.vue
index 77c6c7e..8a52cd7 100644
--- a/src/components/Player.vue
+++ b/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;
diff --git a/src/components/TownSquare.vue b/src/components/TownSquare.vue
index 944c15d..4c34249 100644
--- a/src/components/TownSquare.vue
+++ b/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);
-      }
     }
   }
 };
diff --git a/src/components/Vote.vue b/src/components/Vote.vue
index 36132b4..c37df21 100644
--- a/src/components/Vote.vue
+++ b/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"
-          v-if="session.lockedVote && !session.isVoteInProgress"
-        >
-          <div class="button demon" @click="setMarked">
-            Mark nominee
+        <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 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%;
diff --git a/src/store/modules/session.js b/src/store/modules/session.js
index 5e31a18..2af436a 100644
--- a/src/store/modules/session.js
+++ b/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"),
diff --git a/src/store/socket.js b/src/store/socket.js
index f6d05ee..eea5821 100644
--- a/src/store/socket.js
+++ b/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 => {
-          const value = state[property];
-          if (player[property] !== value) {
-            this._store.commit("players/update", { player, property, value });
-          }
+      ["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":

From 7fa763cd269c6a7c612d133388de187291497294 Mon Sep 17 00:00:00 2001
From: nicfreeman1209 <nicfreeman1209@gmail.com>
Date: Sun, 9 May 2021 22:23:10 +0100
Subject: [PATCH 12/13] Update CHANGELOG.md

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0331948..d87c76e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,12 +1,12 @@
 # Release Notes
 
-- add 'on the block' indicator
 - fix players being moved or removed during nomination
 - add vue linter
 - use "Exile" rather than "Banishment" for exiles
 - added global animation toggle for better performance
 - added record vote history toggle to session menu, and clear vote history button
 - add support for custom Fabled characters
+- add 'marked for execution' indicator
 
 ---
 

From 5457a65de99d5a78c4ba12af26cf6f3df9c08f41 Mon Sep 17 00:00:00 2001
From: nicfreeman1209 <nicfreeman1209@gmail.com>
Date: Mon, 10 May 2021 19:34:02 +0100
Subject: [PATCH 13/13] minor fix default

---
 src/store/modules/session.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/store/modules/session.js b/src/store/modules/session.js
index 2af436a..884117a 100644
--- a/src/store/modules/session.js
+++ b/src/store/modules/session.js
@@ -22,7 +22,7 @@ const state = () => ({
   nomination: false,
   votes: [],
   lockedVote: 0,
-  votingSpeed: 500,
+  votingSpeed: 3000,
   isVoteInProgress: false,
   voteHistory: [],
   markedPlayer: -1,