v2.13.0 (#168)

* add support for custom fabled (closes #110)

* 2.13.0

* show custom fabled first

* add recordVoteHistory & clearVoteHistory to session menu

* Update CHANGELOG.md

* socket part of toggle recordVoteHistory

analogous to isNight

* remove accidental

* Add files via upload

* add custom fabled

* Add option to reduce night animations to save power.

* add fallback icon for fabled

* changelog

* disable all animations now

* linter

* 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

* hide rounded corners on maximized modals

(barely visible anyway)

* ST always sees vote history

i.e. toggle affects only players

* empty block at night

* avoid clashing with seat icon

* nlc: toggle within session.js

* lint

* minor

* Use proper "Exile" terminology for exile

* Add info about "Banishment"->"Exile" to CHANGELOG

* requested changes

* remove direct ST control of block

* player menu order

* move block/night logic from socket to menu

* minor fix to previous

* on block -> marked

* requested changes

* requested change

Co-authored-by: Steffen <steffen@baumgart.biz>

* fix players being moved or removed during a nomination (closes #164)
add vue linter

* let's try adding a lint error

* linter adjusted

* it's working!

* requested change

record marked player id in session

* feedback implemented
npm audit

* prepare develop branch

* adjust linter config

* revert version bump

* fixes & visuals

* Update CHANGELOG.md

* restore old lint command (fixes #170)

* minor fix default

* show jinxed interactions on character reference modal

* 2.13.0

* changelog

Co-authored-by: nicfreeman1209 <nicfreeman1209@gmail.com>
Co-authored-by: nicfreeman1209 <14160941+nicfreeman1209@users.noreply.github.com>
Co-authored-by: Adrian Irving-Beer <wisq@wisq.net>
Co-authored-by: Andrew Conant <emptierset@gmail.com>

.github/workflows/changelog-check.yml

@@ -4,6 +4,7 @@ on:
     types: [assigned, opened, synchronize, reopened, labeled, unlabeled]
     branches:
       - main
+      - develop
 jobs:
   build:
     name: Check Actions

.github/workflows/codeql-analysis.yml

@@ -13,10 +13,10 @@ name: "CodeQL"
 
 on:
   push:
-    branches: [ main ]
+    branches: [ main, develop ]
   pull_request:
     # The branches below must be a subset of the branches above
-    branches: [ main ]
+    branches: [ main, develop ]
   schedule:
     - cron: '27 22 * * 1'
 

.github/workflows/linter.yml

@@ -1,53 +1,20 @@
----
-###########################
-###########################
-## Linter GitHub Actions ##
-###########################
-###########################
 name: Lint Code Base
 
-#
-# Documentation:
-# https://help.github.com/en/articles/workflow-syntax-for-github-actions
-#
-
-#############################
-# Start the job on all push #
-#############################
 on:
   push:
-    branches-ignore:
+    branches: [ main, develop ]
-      - 'gh-pages'
   pull_request:
-    # The branches below must be a subset of the branches above
+    branches: [ main, develop ]
-    branches: [ main ]
 
-###############
-# Set the Job #
-###############
 jobs:
   build:
-    # Name the Job
     name: Lint Code Base
-    # Set the agent to run on
     runs-on: ubuntu-latest
-
-    ##################
-    # Load all steps #
-    ##################
     steps:
-      ##########################
+      - uses: actions/checkout@v2
-      # Checkout the code base #
+      - uses: actions/setup-node@v2
-      ##########################
+        with:
-      - name: Checkout Code
+          node-version: '14'
-        uses: actions/checkout@v2
+      - run: npm install
+      - run: npm run lint-ci
 
-      ################################
-      # Run Linter against code base #
-      ################################
-      - name: Lint Code Base
-        uses: docker://github/super-linter:v2.2.0
-        env:
-          VALIDATE_ALL_CODEBASE: false
-          VALIDATE_ANSIBLE: false
-          DEFAULT_BRANCH: "main"

CHANGELOG.md

@@ -1,5 +1,19 @@
 # Release Notes
 
+---
+
+### Version 2.13.0
+- 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
+- show Jinxed interactions on character reference list
+- add 'marked for execution' 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

CONTRIBUTING.md

@@ -19,6 +19,9 @@ Before submitting your contribution, please make sure to take a moment and read
 
 - The `main` branch is what is currently deployed to the website. All development should be done in dedicated branches.
 
+- The `develop` branch contains the changes that will be deployed to main next. In order to prepare a release, development
+  branches should have their Pull Request against `develop` and only releases should be merged from `develop` into `main`. 
+
 - Work in the `src` folder and **DO NOT** checkin `dist` in the commits.
 
 - It's OK to have multiple small commits as you work on the PR - GitHub will automatically squash it before merging.
@@ -30,6 +33,9 @@ Before submitting your contribution, please make sure to take a moment and read
 - If fixing a bug:
   - If you are resolving a special issue, add `(fix #xxxx[,#xxxx])` (#xxxx is the issue id) in your PR title for a better release log, e.g. `update entities encoding/decoding (fix #3899)`.
   - Provide a detailed description of the bug in the PR. Live demo preferred.
+  
+- You'll need to update the `CHANGELOG.md` with a description of your changes before you open a pull request and your code
+  should pass the lint check.
 
 ## Development Setup
 

README.md

@@ -96,7 +96,8 @@ For base game characters, it is sufficient to only provide the ID, similar to wh
 - **remindersGlobal**: global reminder tokens that will always be available, no matter if the character is assigned to a player or not
 - **setup**: whether this token affects setup (orange leaf), like the Drunk or Baron
 - **name**: the displayed name of this character
-- **team**: the team of the character, has to be one of `townsfolk`, `outsider`, `minion`, `demon` or `traveler`
+- **team**: the team of the character, has to be one of `townsfolk`, `outsider`, `minion`, `demon`, `traveler` or `fabled`<br>
+  _Note_: if you create a custom Fabled character, it will be automatically added to the game when the custom script is loaded
 - **ability**: the displayed ability text of the character
 
 ## [Code of Conduct](CODE_OF_CONDUCT.md)

package.json

@@ -1,12 +1,13 @@
 {
   "name": "townsquare",
-  "version": "2.12.0",
+  "version": "2.13.0",
   "description": "Blood on the Clocktower Town Square",
   "author": "Steffen Baumgart",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build ./src/main.js",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint",
+    "lint-ci": "vue-cli-service lint --no-fix --max-warnings=0"
   },
   "main": "App.vue",
   "dependencies": {

src/App.vue

@@ -3,7 +3,10 @@
     id="app"
     @keyup="keyup"
     tabindex="-1"
-    :class="{ night: grimoire.isNight }"
+    :class="{
+      night: grimoire.isNight,
+      static: grimoire.isStatic
+    }"
     :style="{
       backgroundImage: grimoire.background
         ? `url('${grimoire.background}')`
@@ -110,13 +113,13 @@ export default {
           this.$store.commit("toggleModal", "roles");
           break;
         case "v":
-          if (this.session.voteHistory.length) {
+          if (this.session.voteHistory.length || !this.session.isSpectator) {
             this.$store.commit("toggleModal", "voteHistory");
           }
           break;
         case "s":
           if (this.session.isSpectator) return;
-          this.$store.commit("toggleNight");
+          this.$refs.menu.toggleNight();
           break;
         case "escape":
           this.$store.commit("toggleModal");
@@ -202,6 +205,14 @@ ul {
   align-items: center;
   align-content: center;
   justify-content: center;
+
+  // disable all animations
+  &.static *,
+  &.static *:after,
+  &.static *:before {
+    transition: none !important;
+    animation: none !important;
+  }
 }
 
 #version {

src/components/Menu.vue

@@ -60,13 +60,14 @@
           </li>
           <li @click="toggleNightOrder" v-if="players.length">
             Night order
-            <em
+            <em>
-              ><font-awesome-icon
+              <font-awesome-icon
                 :icon="[
                   'fas',
                   grimoire.isNightOrder ? 'check-square' : 'square'
                 ]"
-            /></em>
+              />
+            </em>
           </li>
           <li v-if="players.length">
             Zoom
@@ -82,6 +83,10 @@
               />
             </em>
           </li>
+          <li @click="setBackground">
+            Background image
+            <em><font-awesome-icon icon="image"/></em>
+          </li>
           <li v-if="!edition.isOfficial" @click="imageOptIn">
             <small>Show Custom Images</small>
             <em
@@ -92,9 +97,12 @@
                 ]"
             /></em>
           </li>
-          <li @click="setBackground">
+          <li @click="toggleStatic">
-            Background image
+            Disable Animations
-            <em><font-awesome-icon icon="image"/></em>
+            <em
+              ><font-awesome-icon
+                :icon="['fas', grimoire.isStatic ? 'check-square' : 'square']"
+            /></em>
           </li>
           <li @click="toggleMuted">
             Mute Sounds
@@ -131,10 +139,10 @@
               <em><font-awesome-icon icon="theater-masks"/></em>
             </li>
             <li
-              v-if="session.voteHistory.length"
+              v-if="session.voteHistory.length || !session.isSpectator"
               @click="toggleModal('voteHistory')"
             >
-              Nomination history<em>[V]</em>
+              Vote history<em>[V]</em>
             </li>
             <li @click="leaveSession">
               Leave Session
@@ -319,6 +327,10 @@ export default {
     clearPlayers() {
       if (this.session.isSpectator) return;
       if (confirm("Are you sure you want to remove all players?")) {
+        // abort vote if in progress
+        if (this.session.nomination) {
+          this.$store.commit("session/nomination");
+        }
         this.$store.commit("players/clear");
       }
     },
@@ -327,13 +339,19 @@ export default {
         this.$store.dispatch("players/clearRoles");
       }
     },
+    toggleNight() {
+      this.$store.commit("toggleNight");
+      if (this.grimoire.isNight) {
+        this.$store.commit("session/setMarkedPlayer", -1);
+      }
+    },
     ...mapMutations([
       "toggleGrimoire",
       "toggleMenu",
       "toggleImageOptIn",
       "toggleMuted",
-      "toggleNight",
       "toggleNightOrder",
+      "toggleStatic",
       "setZoom",
       "toggleModal"
     ])

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],
@@ -97,6 +98,11 @@
         @click="updatePlayer('isVoteless', true)"
         title="Ghost vote"
       />
+
+      <!-- On block icon -->
+      <div class="marked">
+        <font-awesome-icon icon="skull" />
+      </div>
       <div
         class="name"
         @click="isMenuOpen = !isMenuOpen"
@@ -124,18 +130,18 @@
             <li @click="changeName">
               <font-awesome-icon icon="user-edit" />Rename
             </li>
-            <li v-if="!session.nomination" @click="nominatePlayer()">
+            <li @click="movePlayer()" :class="{ disabled: session.lockedVote }">
-              <font-awesome-icon icon="hand-point-right" />
-              Nomination
-            </li>
-            <li @click="movePlayer()">
               <font-awesome-icon icon="redo-alt" />
               Move player
             </li>
-            <li @click="swapPlayer()">
+            <li @click="swapPlayer()" :class="{ disabled: session.lockedVote }">
               <font-awesome-icon icon="exchange-alt" />
               Swap seats
             </li>
+            <li @click="removePlayer" :class="{ disabled: session.lockedVote }">
+              <font-awesome-icon icon="times-circle" />
+              Remove
+            </li>
             <li
               @click="updatePlayer('id', '', true)"
               v-if="player.id && session.sessionId"
@@ -143,10 +149,12 @@
               <font-awesome-icon icon="chair" />
               Empty seat
             </li>
-            <li @click="removePlayer">
+            <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>
           <li
             @click="claimSeat"
@@ -257,6 +265,9 @@ export default {
       if (this.grimoire.isPublic) {
         if (!this.player.isDead) {
           this.updatePlayer("isDead", true);
+          if (this.player.isMarked) {
+            this.updatePlayer("isMarked", false);
+          }
         } else if (this.player.isVoteless) {
           this.updatePlayer("isVoteless", false);
           this.updatePlayer("isDead", false);
@@ -265,6 +276,9 @@ export default {
         }
       } else {
         this.updatePlayer("isDead", !this.player.isDead);
+        if (this.player.isMarked) {
+          this.updatePlayer("isMarked", false);
+        }
         if (this.player.isVoteless) {
           this.updatePlayer("isVoteless", false);
         }
@@ -579,9 +593,6 @@ li.move:not(.from) .player .overlay svg.move {
 
 /****** Vote icon ********/
 .player .has-vote {
-  position: absolute;
-  right: 2px;
-  margin-top: -15%;
   color: #fff;
   filter: drop-shadow(0 0 3px black);
   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 *****/
 @mixin glow($name, $color) {
   @keyframes #{$name}-glow {
@@ -624,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;
@@ -759,7 +808,8 @@ li.move:not(.from) .player .overlay svg.move {
   }
 
   li.disabled {
-    cursor: default;
+    cursor: not-allowed;
+    opacity: 0.5;
     &:hover {
       color: white;
     }

src/components/TownSquare.vue

@@ -152,20 +152,52 @@ export default {
       this.$store.commit("toggleModal", "role");
     },
     removePlayer(playerIndex) {
-      if (this.session.isSpectator) return;
+      if (this.session.isSpectator || this.session.lockedVote) return;
       if (
         confirm(
           `Do you really want to remove ${this.players[playerIndex].name}?`
         )
       ) {
+        const { nomination } = this.session;
+        if (nomination) {
+          if (nomination.includes(playerIndex)) {
+            // abort vote if removed player is either nominator or nominee
+            this.$store.commit("session/nomination");
+          } else if (
+            nomination[0] > playerIndex ||
+            nomination[1] > playerIndex
+          ) {
+            // update nomination array if removed player has lower index
+            this.$store.commit("session/setNomination", [
+              nomination[0] > playerIndex ? nomination[0] - 1 : nomination[0],
+              nomination[1] > playerIndex ? nomination[1] - 1 : nomination[1]
+            ]);
+          }
+        }
         this.$store.commit("players/remove", playerIndex);
       }
     },
     swapPlayer(from, to) {
+      if (this.session.isSpectator || this.session.lockedVote) return;
       if (to === undefined) {
         this.cancel();
         this.swap = from;
       } else {
+        if (this.session.nomination) {
+          // update nomination if one of the involved players is swapped
+          const swapTo = this.players.indexOf(to);
+          const updatedNomination = this.session.nomination.map(nom => {
+            if (nom === this.swap) return swapTo;
+            if (nom === swapTo) return this.swap;
+            return nom;
+          });
+          if (
+            this.session.nomination[0] !== updatedNomination[0] ||
+            this.session.nomination[1] !== updatedNomination[1]
+          ) {
+            this.$store.commit("session/setNomination", updatedNomination);
+          }
+        }
         this.$store.commit("players/swap", [
           this.swap,
           this.players.indexOf(to)
@@ -174,10 +206,27 @@ export default {
       }
     },
     movePlayer(from, to) {
+      if (this.session.isSpectator || this.session.lockedVote) return;
       if (to === undefined) {
         this.cancel();
         this.move = from;
       } else {
+        if (this.session.nomination) {
+          // update nomination if it is affected by the move
+          const moveTo = this.players.indexOf(to);
+          const updatedNomination = this.session.nomination.map(nom => {
+            if (nom === this.move) return moveTo;
+            if (nom > this.move && nom <= moveTo) return nom - 1;
+            if (nom < this.move && nom >= moveTo) return nom + 1;
+            return nom;
+          });
+          if (
+            this.session.nomination[0] !== updatedNomination[0] ||
+            this.session.nomination[1] !== updatedNomination[1]
+          ) {
+            this.$store.commit("session/setNomination", updatedNomination);
+          }
+        }
         this.$store.commit("players/move", [
           this.move,
           this.players.indexOf(to)
@@ -186,6 +235,7 @@ export default {
       }
     },
     nominatePlayer(from, to) {
+      if (this.session.isSpectator || this.session.lockedVote) return;
       if (to === undefined) {
         this.cancel();
         if (from !== this.nominate) {

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,6 +55,20 @@
           </template>
           <div class="button demon" @click="finish">Close</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 v-else-if="canVote">
         <div v-if="!session.isVoteInProgress">
@@ -122,7 +130,7 @@ export default {
       const nomination = this.session.nomination[0];
       return {
         transform: `rotate(${Math.round((nomination / players) * 360)}deg)`,
-        transitionDuration: this.session.votingSpeed - 0.1 + "s"
+        transitionDuration: this.session.votingSpeed - 100 + "ms"
       };
     },
     nominee: function() {
@@ -235,6 +243,12 @@ export default {
       if (speed > 0) {
         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,
     -1px 0 2px #000000;
 
+  .mark .button {
+    font-size: 75%;
+    margin: 0;
+  }
+
   &:after {
     content: " ";
     padding-bottom: 100%;

src/components/modals/Modal.vue

@@ -115,6 +115,7 @@ export default {
 .maximized {
   background: rgba(0, 0, 0, 0.95);
   padding: 0;
+  border-radius: 0;
   height: 100%;
   width: 100%;
   max-width: 100%;

src/components/modals/ReferenceModal.vue

@@ -50,6 +50,40 @@
         <li :class="[team]"></li>
       </ul>
     </div>
+
+    <div class="team jinxed" v-if="jinxed.length">
+      <aside>
+        <h4>Jinxed</h4>
+      </aside>
+      <ul>
+        <li v-for="(jinx, index) in jinxed" :key="index">
+          <span
+            class="icon"
+            :style="{
+              backgroundImage: `url(${require('../../assets/icons/' +
+                jinx.first.id +
+                '.png')})`
+            }"
+          ></span>
+          <span
+            class="icon"
+            :style="{
+              backgroundImage: `url(${require('../../assets/icons/' +
+                jinx.second.id +
+                '.png')})`
+            }"
+          ></span>
+          <div class="role">
+            <span class="name"
+              >{{ jinx.first.name }} & {{ jinx.second.name }}</span
+            >
+            <span class="ability">{{ jinx.reason }}</span>
+          </div>
+        </li>
+        <li></li>
+        <li></li>
+      </ul>
+    </div>
   </Modal>
 </template>
 
@@ -62,6 +96,27 @@ export default {
     Modal
   },
   computed: {
+    /**
+     * Return a list of jinxes in the form of role IDs and a reason
+     * @returns {*[]} [{first, second, reason}]
+     */
+    jinxed: function() {
+      const jinxed = [];
+      this.roles.forEach(role => {
+        if (this.jinxes.get(role.id)) {
+          this.jinxes.get(role.id).forEach((reason, second) => {
+            if (this.roles.get(second)) {
+              jinxed.push({
+                first: role,
+                second: this.roles.get(second),
+                reason
+              });
+            }
+          });
+        }
+      });
+      return jinxed;
+    },
     rolesGrouped: function() {
       const rolesGrouped = {};
       this.roles.forEach(role => {
@@ -85,7 +140,7 @@ export default {
       });
       return players;
     },
-    ...mapState(["roles", "modals", "edition", "grimoire"]),
+    ...mapState(["roles", "modals", "edition", "grimoire", "jinxes"]),
     ...mapState("players", ["players"])
   },
   methods: {
@@ -147,6 +202,15 @@ h3 {
   }
 }
 
+.jinxed {
+  .name {
+    color: $fabled;
+  }
+  aside {
+    background: linear-gradient(-90deg, $fabled, transparent);
+  }
+}
+
 .team {
   display: flex;
   align-items: stretch;
@@ -180,6 +244,12 @@ h3 {
     transform-origin: center;
     font-size: 80%;
   }
+
+  &.jinxed {
+    .icon {
+      margin: 0 -5px;
+    }
+  }
 }
 
 ul {

src/components/modals/VoteHistoryModal.vue

@@ -1,17 +1,36 @@
 <template>
   <Modal
     class="vote-history"
-    v-if="modals.voteHistory && session.voteHistory"
+    v-if="modals.voteHistory && (session.voteHistory || !session.isSpectator)"
     @close="toggleModal('voteHistory')"
   >
     <font-awesome-icon
       @click="clearVoteHistory"
       icon="trash-alt"
       class="clear"
-      title="Clear history"
+      title="Clear vote history"
+      v-if="session.isSpectator"
     />
 
-    <h3>Nomination history</h3>
+    <h3>Vote history</h3>
+
+    <template v-if="!session.isSpectator">
+      <div class="options">
+        <div class="option" @click="setRecordVoteHistory">
+          <font-awesome-icon
+            :icon="[
+              'fas',
+              session.isVoteHistoryAllowed ? 'check-square' : 'square'
+            ]"
+          />
+          Accessible to players
+        </div>
+        <div class="option" @click="clearVoteHistory">
+          <font-awesome-icon icon="trash-alt" />
+          Clear for everyone
+        </div>
+      </div>
+    </template>
     <table>
       <thead>
         <tr>
@@ -79,8 +98,16 @@ export default {
     ...mapState(["session", "modals"])
   },
   methods: {
-    ...mapMutations(["toggleModal"]),
+    clearVoteHistory() {
-    ...mapMutations("session", ["clearVoteHistory"])
+      this.$store.commit("session/clearVoteHistory");
+    },
+    setRecordVoteHistory() {
+      this.$store.commit(
+        "session/setVoteHistoryAllowed",
+        !this.session.isVoteHistoryAllowed
+      );
+    },
+    ...mapMutations(["toggleModal"])
   }
 };
 </script>
@@ -98,6 +125,24 @@ export default {
   }
 }
 
+.options {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  justify-content: center;
+  align-content: center;
+}
+
+.option {
+  color: white;
+  text-decoration: none;
+  margin: 0 15px;
+  &:hover {
+    color: red;
+    cursor: pointer;
+  }
+}
+
 h3 {
   margin: 0 40px 0 10px;
   svg {

src/hatred.json

@@ -0,0 +1,163 @@
+[{
+		"id": "Chambermaid",
+		"hatred": [{
+			"id": "Mathematician",
+			"reason": "The Chambermaid learns if the Mathematician wakes tonight or not, even though the Chambermaid wakes first."
+		}]
+	},
+	{
+		"id": "Butler",
+		"hatred": [{
+			"id": "Cannibal",
+			"reason": "If the Cannibal gains the Butler ability, the Cannibal learns this."
+		}]
+	},
+	{
+		"id": "Mutant",
+		"hatred": [{
+			"id": "Undertaker",
+			"reason": "If the Mutant causes a second execution, the Undertaker learns either one or both executed characters (Storyteller's choice)."
+		}]
+	},
+	{
+		"id": "Lunatic",
+		"hatred": [{
+			"id": "Mathematician",
+			"reason": "The Mathematician learns if the Lunatic attacks a different player(s) than the real Demon attacked."
+		}]
+	},
+	{
+		"id": "Pit-Hag",
+		"hatred": [{
+				"id": "Politician",
+				"reason": "A Pit-Hag can not create an evil Politician."
+			},
+			{
+				"id": "Heretic",
+				"reason": "A Pit-Hag can not create a Heretic. "
+			}
+		]
+
+	},
+	{
+		"id": "Cerenovus",
+		"hatred": [{
+				"id": "Undertaker",
+				"reason": "If the Cerenovus causes a second execution, the Undertaker learns either one or both executed characters (Storyteller's choice)."
+			},
+			{
+				"id": "Goblin",
+				"reason": "The Cerenovus may choose to make a player mad that they are the Goblin."
+			}
+		]
+	},
+	{
+		"id": "Leviathan",
+		"hatred": [{
+				"id": "Soldier",
+				"reason": "If Leviathan nominates and executes the Soldier, the Soldier does not die."
+			},
+			{
+				"id": "Monk",
+				"reason": "If Leviathan nominates and executes the player the Monk chose, that player does not die."
+			},
+			{
+				"id": "Innkeeper",
+				"reason": "If Leviathan nominates and executes a player the Innkeeper chose, that player does not die."
+			},
+			{
+				"id": "Ravenkeeper",
+				"reason": "If Leviathan is in play & the Ravenkeeper dies by execution, they wake that night to use their ability."
+			},
+			{
+				"id": "Sage",
+				"reason": "If Leviathan is in play & the Sage dies by execution, they wake that night to use their ability."
+			},
+			{
+				"id": "Mayor",
+				"reason": "If Leviathan is in play & no execution occurs on day 5, good wins."
+			}
+		]
+	},
+	{
+		"id": "Lil' Monsta",
+		"hatred": [{
+				"id": "Scarlet Woman",
+				"reason": "If there are 5 or more players alive and the player holding the Lil' Monsta token dies, the Scarlet Woman is given the Lil' Monsta token tonight."
+			},
+			{
+				"id": "Poppy Grower",
+				"reason": "If the Poppy Grower is in play, Minions don't wake together. They are woken one by one, until one of them chooses to take the Lil' Monsta token."
+			}
+		]
+	},
+	{
+		"id": "Lycanthrope",
+		"hatred": [{
+			"id": "Gambler",
+			"reason": "If the Lycanthrope is alive and the Gambler kills themself at night, no other players can die tonight."
+		}]
+	},
+	{
+		"id": "Legion",
+		"hatred": [{
+			"id": "Preacher",
+			"reason": "Only 1 jinxed character can be in play. Evil players start knowing which player and character it is."
+		}]
+	},
+	{
+		"id": "Fang Gu",
+		"hatred": [{
+			"id": "Scarlet Woman",
+			"reason": "If the Fang Gu chooses an Outsider and dies, the Scarlet Woman does not become the Fang Gu."
+		}]
+	},
+	{
+		"id": "Spy",
+		"hatred": [{
+				"id": "Poppy Grower",
+				"reason": "If the Poppy Grower is in play, the Spy does not see the Grimoire until the Poppy Grower dies."
+			},
+			{
+				"id": "Heretic",
+				"reason": "Only 1 jinxed character can be in play."
+			}
+		]
+	},
+	{
+		"id": "Widow",
+		"hatred": [{
+				"id": "Poppy Grower",
+				"reason": "If the Poppy Grower is in play, the Widow does not see the Grimoire until the Poppy Grower dies."
+			},
+			{
+				"id": "Heretic",
+				"reason": "Only 1 jinxed character can be in play."
+			}
+		]
+	},
+	{
+		"id": "Godfather",
+		"hatred": [{
+			"id": "Heretic",
+			"reason": "Only 1 jinxed character can be in play."
+		}]
+	},
+	{
+		"id": "Marionette",
+		"hatred": [
+		  {
+			"id": "Lil' Monsta",
+			"reason": "The Marionette neighbors a Minion, not the Demon. The Marionette is not woken to choose who takes the Lil' Monsta token."
+		  },
+		  {
+			"id": "Poppy Grower",
+			"reason": "When the Poppy Grower dies, the Demon learns the Marionette but the Marionette learns nothing."
+		  },
+		  {
+			"id": "Balloonist",
+			"reason": "If the Marionette thinks that they are the Balloonist, +1 Outsider was added."
+		  }
+		]
+	}
+]

src/main.js

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

src/store/index.js

@@ -7,16 +7,10 @@ import session from "./modules/session";
 import editionJSON from "../editions.json";
 import rolesJSON from "../roles.json";
 import fabledJSON from "../fabled.json";
+import jinxesJSON from "../hatred.json";
 
 Vue.use(Vuex);
 
-// global data maps
-const editionJSONbyId = new Map(
-  editionJSON.map(edition => [edition.id, edition])
-);
-const rolesJSONbyId = new Map(rolesJSON.map(role => [role.id, role]));
-const fabled = new Map(fabledJSON.map(role => [role.id, role]));
-
 // helper functions
 const getRolesByEdition = (edition = editionJSON[0]) => {
   return new Map(
@@ -52,6 +46,33 @@ const toggle = key => ({ grimoire }, val) => {
   }
 };
 
+const clean = id => id.toLocaleLowerCase().replace(/[^a-z0-9]/g, "");
+
+// global data maps
+const editionJSONbyId = new Map(
+  editionJSON.map(edition => [edition.id, edition])
+);
+const rolesJSONbyId = new Map(rolesJSON.map(role => [role.id, role]));
+const fabled = new Map(fabledJSON.map(role => [role.id, role]));
+
+// jinxes
+let jinxes = {};
+try {
+  // Note: can't fetch live list due to lack of CORS headers
+  // fetch("https://bloodontheclocktower.com/script/data/hatred.json")
+  //   .then(res => res.json())
+  //   .then(jinxesJSON => {
+  jinxes = new Map(
+    jinxesJSON.map(({ id, hatred }) => [
+      clean(id),
+      new Map(hatred.map(({ id, reason }) => [clean(id), reason]))
+    ])
+  );
+  // });
+} catch (e) {
+  console.error("couldn't load jinxes", e);
+}
+
 // base definition for custom roles
 const customRole = {
   id: "",
@@ -81,6 +102,7 @@ export default new Vuex.Store({
       isNightOrder: true,
       isPublic: true,
       isMenuOpen: false,
+      isStatic: false,
       isMuted: false,
       isImageOptIn: false,
       zoom: 0,
@@ -100,7 +122,8 @@ export default new Vuex.Store({
     edition: editionJSONbyId.get("tb"),
     roles: getRolesByEdition(),
     otherTravelers: getTravelersNotInEdition(),
-    fabled
+    fabled,
+    jinxes
   },
   getters: {
     /**
@@ -144,6 +167,7 @@ export default new Vuex.Store({
     toggleMuted: toggle("isMuted"),
     toggleMenu: toggle("isMenuOpen"),
     toggleNightOrder: toggle("isNightOrder"),
+    toggleStatic: toggle("isStatic"),
     toggleNight: toggle("isNight"),
     toggleGrimoire: toggle("isPublic"),
     toggleImageOptIn: toggle("isImageOptIn"),
@@ -162,54 +186,62 @@ export default new Vuex.Store({
      * @param roles Array of role IDs or full role definitions
      */
     setCustomRoles(state, roles) {
-      state.roles = new Map(
+      const processedRoles = roles
-        roles
+        // replace numerical role object keys with matching key names
-          // replace numerical role object keys with matching key names
+        .map(role => {
-          .map(role => {
+          if (role[0]) {
-            if (role[0]) {
+            const customKeys = Object.keys(customRole);
-              const customKeys = Object.keys(customRole);
+            const mappedRole = {};
-              const mappedRole = {};
+            for (let prop in role) {
-              for (let prop in role) {
+              if (customKeys[prop]) {
-                if (customKeys[prop]) {
+                mappedRole[customKeys[prop]] = role[prop];
-                  mappedRole[customKeys[prop]] = role[prop];
-                }
               }
-              return mappedRole;
-            } else {
-              return role;
             }
-          })
+            return mappedRole;
-          // clean up role.id
+          } else {
-          .map(role => {
-            role.id = role.id.toLocaleLowerCase().replace(/[^a-z0-9]/g, "");
             return role;
-          })
+          }
-          // map existing roles to base definition or pre-populate custom roles to ensure all properties
+        })
-          .map(
+        // clean up role.id
-            role =>
+        .map(role => {
-              rolesJSONbyId.get(role.id) ||
+          role.id = clean(role.id);
-              state.roles.get(role.id) ||
+          return role;
-              Object.assign({}, customRole, role)
+        })
-          )
+        // map existing roles to base definition or pre-populate custom roles to ensure all properties
-          // default empty icons and placeholders
+        .map(
-          .map(role => {
+          role =>
-            if (rolesJSONbyId.get(role.id)) return role;
+            rolesJSONbyId.get(role.id) ||
-            role.imageAlt = // map team to generic icon
+            state.roles.get(role.id) ||
-              {
+            Object.assign({}, customRole, role)
-                townsfolk: "good",
+        )
-                outsider: "outsider",
+        // default empty icons and placeholders
-                minion: "minion",
+        .map(role => {
-                demon: "evil"
+          if (rolesJSONbyId.get(role.id)) return role;
-              }[role.team] || "custom";
+          role.imageAlt = // map team to generic icon
-            return role;
+            {
-          })
+              townsfolk: "good",
-          // filter out roles that don't match an existing role and also don't have name/ability/team
+              outsider: "outsider",
-          .filter(role => role.name && role.ability && role.team)
+              minion: "minion",
-          // sort by team
+              demon: "evil",
-          .sort((a, b) => b.team.localeCompare(a.team))
+              fabled: "fabled"
-          // convert to Map
+            }[role.team] || "custom";
+          return role;
+        })
+        // filter out roles that don't match an existing role and also don't have name/ability/team
+        .filter(role => role.name && role.ability && role.team)
+        // sort by team
+        .sort((a, b) => b.team.localeCompare(a.team));
+      // convert to Map without Fabled
+      state.roles = new Map(
+        processedRoles
+          .filter(role => role.team !== "fabled")
           .map(role => [role.id, role])
       );
+      // update Fabled to include custom Fabled from this script
+      state.fabled = new Map([
+        ...processedRoles.filter(r => r.team === "fabled").map(r => [r.id, r]),
+        ...fabledJSON.map(role => [role.id, role])
+      ]);
       // update extraTravelers map to only show travelers not in this script
       state.otherTravelers = new Map(
         rolesJSON

src/store/modules/session.js

@@ -25,6 +25,8 @@ const state = () => ({
   votingSpeed: 3000,
   isVoteInProgress: false,
   voteHistory: [],
+  markedPlayer: -1,
+  isVoteHistoryAllowed: true,
   isRolesDistributed: false
 });
 
@@ -45,6 +47,9 @@ const mutations = {
   setPing: set("ping"),
   setVotingSpeed: set("votingSpeed"),
   setVoteInProgress: set("isVoteInProgress"),
+  setMarkedPlayer: set("markedPlayer"),
+  setNomination: set("nomination"),
+  setVoteHistoryAllowed: set("isVoteHistoryAllowed"),
   claimSeat: set("claimedSeat"),
   distributeRoles: set("isRolesDistributed"),
   setSessionId(state, sessionId) {
@@ -70,15 +75,16 @@ const mutations = {
    * @param players
    */
   addHistory(state, players) {
+    if (!state.isVoteHistoryAllowed && state.isSpectator) return;
     if (!state.nomination || state.lockedVote <= players.length) return;
-    const isBanishment = players[state.nomination[1]].role.team === "traveler";
+    const isExile = players[state.nomination[1]].role.team === "traveler";
     state.voteHistory.push({
       timestamp: new Date(),
       nominator: players[state.nomination[0]].name,
       nominee: players[state.nomination[1]].name,
-      type: isBanishment ? "Banishment" : "Execution",
+      type: isExile ? "Exile" : "Execution",
       majority: Math.ceil(
-        players.filter(player => !player.isDead || isBanishment).length / 2
+        players.filter(player => !player.isDead || isExile).length / 2
       ),
       votes: players
         .filter((player, index) => state.votes[index])

src/store/persistence.js

@@ -11,6 +11,9 @@ module.exports = store => {
   if (localStorage.getItem("muted")) {
     store.commit("toggleMuted", true);
   }
+  if (localStorage.getItem("static")) {
+    store.commit("toggleStatic", true);
+  }
   if (localStorage.getItem("imageOptIn")) {
     store.commit("toggleImageOptIn", true);
   }
@@ -39,8 +42,8 @@ module.exports = store => {
   }
   if (localStorage.fabled !== undefined) {
     store.commit("players/setFabled", {
-      fabled: JSON.parse(localStorage.fabled).map(id =>
+      fabled: JSON.parse(localStorage.fabled).map(
-        store.state.fabled.get(id)
+        fabled => store.state.fabled.get(fabled.id) || fabled
       )
     });
   }
@@ -91,6 +94,13 @@ module.exports = store => {
           localStorage.removeItem("muted");
         }
         break;
+      case "toggleStatic":
+        if (state.grimoire.isStatic) {
+          localStorage.setItem("static", 1);
+        } else {
+          localStorage.removeItem("static");
+        }
+        break;
       case "toggleImageOptIn":
         if (state.grimoire.isImageOptIn) {
           localStorage.setItem("imageOptIn", 1);
@@ -127,7 +137,11 @@ module.exports = store => {
       case "players/setFabled":
         localStorage.setItem(
           "fabled",
-          JSON.stringify(state.players.fabled.map(({ id }) => id))
+          JSON.stringify(
+            state.players.fabled.map(fabled =>
+              fabled.isCustom ? fabled : { id: fabled.id }
+            )
+          )
         );
         break;
       case "players/add":

src/store/socket.js

@@ -168,10 +168,19 @@ class LiveSession {
         if (!this._isSpectator) return;
         this._store.commit("players/remove", params);
         break;
+      case "marked":
+        if (!this._isSpectator) return;
+        this._store.commit("session/setMarkedPlayer", params);
+        break;
       case "isNight":
         if (!this._isSpectator) return;
         this._store.commit("toggleNight", params);
         break;
+      case "isVoteHistoryAllowed":
+        if (!this._isSpectator) return;
+        this._store.commit("session/setVoteHistoryAllowed", params);
+        this._store.commit("session/clearVoteHistory");
+        break;
       case "votingSpeed":
         if (!this._isSpectator) return;
         this._store.commit("session/setVotingSpeed", params);
@@ -268,11 +277,13 @@ class LiveSession {
       this._sendDirect(playerId, "gs", {
         gamestate: this._gamestate,
         isNight: grimoire.isNight,
+        isVoteHistoryAllowed: session.isVoteHistoryAllowed,
         nomination: session.nomination,
         votingSpeed: session.votingSpeed,
         lockedVote: session.lockedVote,
         isVoteInProgress: session.isVoteInProgress,
-        fabled: fabled.map(({ id }) => id),
+        markedPlayer: session.markedPlayer,
+        fabled: fabled.map(f => (f.isCustom ? f : { id: f.id })),
         ...(session.nomination ? { votes: session.votes } : {})
       });
     }
@@ -289,11 +300,13 @@ class LiveSession {
       gamestate,
       isLightweight,
       isNight,
+      isVoteHistoryAllowed,
       nomination,
       votingSpeed,
       votes,
       lockedVote,
       isVoteInProgress,
+      markedPlayer,
       fabled
     } = data;
     const players = this._store.state.players.players;
@@ -340,6 +353,7 @@ class LiveSession {
     });
     if (!isLightweight) {
       this._store.commit("toggleNight", !!isNight);
+      this._store.commit("session/setVoteHistoryAllowed", isVoteHistoryAllowed);
       this._store.commit("session/nomination", {
         nomination,
         votes,
@@ -347,8 +361,9 @@ class LiveSession {
         lockedVote,
         isVoteInProgress
       });
+      this._store.commit("session/setMarkedPlayer", markedPlayer);
       this._store.commit("players/setFabled", {
-        fabled: fabled.map(id => this._store.state.fabled.get(id))
+        fabled: fabled.map(f => this._store.state.fabled.get(f.id) || f)
       });
     }
   }
@@ -407,7 +422,7 @@ class LiveSession {
     const { fabled } = this._store.state.players;
     this._send(
       "fabled",
-      fabled.map(({ id }) => id)
+      fabled.map(f => (f.isCustom ? f : { id: f.id }))
     );
   }
 
@@ -419,7 +434,7 @@ class LiveSession {
   _updateFabled(fabled) {
     if (!this._isSpectator) return;
     this._store.commit("players/setFabled", {
-      fabled: fabled.map(id => this._store.state.fabled.get(id))
+      fabled: fabled.map(f => this._store.state.fabled.get(f.id) || f)
     });
   }
 
@@ -656,10 +671,12 @@ class LiveSession {
   /**
    * A player nomination. ST only
    * This also syncs the voting speed to the players.
-   * @param nomination [nominator, nominee]
+   * Payload can be an object with {nomination} property or just the nomination itself, or undefined.
+   * @param payload [nominator, nominee]|{nomination}
    */
-  nomination({ nomination } = {}) {
+  nomination(payload) {
     if (this._isSpectator) return;
+    const nomination = payload ? payload.nomination || payload : payload;
     const players = this._store.state.players.players;
     if (
       !nomination ||
@@ -686,6 +703,17 @@ class LiveSession {
     this._send("isNight", this._store.state.grimoire.isNight);
   }
 
+  /**
+   * Send the isVoteHistoryAllowed state. ST only
+   */
+  setVoteHistoryAllowed() {
+    if (this._isSpectator) return;
+    this._send(
+      "isVoteHistoryAllowed",
+      this._store.state.session.isVoteHistoryAllowed
+    );
+  }
+
   /**
    * Send the voting speed. ST only
    * @param votingSpeed voting speed in seconds, minimum 1
@@ -697,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
    */
@@ -823,6 +860,7 @@ export default store => {
         }
         break;
       case "session/nomination":
+      case "session/setNomination":
         session.nomination(payload);
         break;
       case "session/setVoteInProgress":
@@ -840,6 +878,9 @@ export default store => {
       case "session/clearVoteHistory":
         session.clearVoteHistory();
         break;
+      case "session/setVoteHistoryAllowed":
+        session.setVoteHistoryAllowed();
+        break;
       case "toggleNight":
         session.setIsNight();
         break;
@@ -849,6 +890,9 @@ export default store => {
       case "players/setFabled":
         session.sendFabled();
         break;
+      case "session/setMarkedPlayer":
+        session.setMarked(payload);
+        break;
       case "players/swap":
         session.swapPlayer(payload);
         break;