Adding special votes (#198)

Creates a window to choose the type of special vote
- Adding the argument "playerForSpecialVote"
- Updating the history to take account of the special votes
- Allowing all players to vote during special vote
- Adding an option "Special vote" in players' menu
NB: This skull will not be visible while the vote is still open. You need to close the vote first.
If the vote is detected as special, the majority isn't printed

This change affects the Story Teller's mark (for the case of an Atheist-script, where the Story Teller is marked as being on the block).

This mark is now hidden for players if the option "Organ Grinder Vote" is turned on.

CHANGELOG.md

@@ -1,7 +1,7 @@
 # Release Notes
 
 ## Upcoming version
-
+- Adding some special votes
 - Automatic Djinn and Bootlegger
 
 ### Version 3.20.1

src/App.vue

@@ -34,6 +34,7 @@
     <NightOrderModal />
     <VoteHistoryModal />
     <GameStateModal />
+    <SpecialVoteModal />
     <Gradients />
     <span id="version">v{{ version }}</span>
   </div>
@@ -55,6 +56,7 @@ import NightOrderModal from "./components/modals/NightOrderModal";
 import FabledModal from "@/components/modals/FabledModal";
 import VoteHistoryModal from "@/components/modals/VoteHistoryModal";
 import GameStateModal from "@/components/modals/GameStateModal";
+import SpecialVoteModal from "@/components/modals/SpecialVoteModal";
 
 export default {
   components: {
@@ -71,6 +73,7 @@ export default {
     EditionModal,
     RolesModal,
     Gradients,
+    SpecialVoteModal,
   },
   computed: {
     ...mapState(["grimoire", "session", "edition"]),

src/components/Player.vue

@@ -53,6 +53,7 @@
         <font-awesome-icon
           v-if="
             !grimoire.isOrganVoteMode ||
+            typeof session.nomination[1] == 'object' ||
             !session.isSpectator ||
             player.id == session.playerId
           "
@@ -64,6 +65,7 @@
         <font-awesome-icon
           v-if="
             grimoire.isOrganVoteMode &&
+            typeof session.nomination[1] !== 'object' &&
             session.isSpectator &&
             player.id !== session.playerId
           "
@@ -86,6 +88,7 @@
         <font-awesome-icon
           v-if="
             grimoire.isOrganVoteMode &&
+            typeof session.nomination[1] !== 'object' &&
             session.isSpectator &&
             player.id !== session.playerId
           "
@@ -197,6 +200,12 @@
                 {{ locale.player.nomination }}
               </li>
             </template>
+            <template v-if="!session.nomination">
+              <li @click="specialVote()">
+                <font-awesome-icon icon="vote-yea" />
+                {{ locale.player.specialVote }}
+              </li>
+            </template>
           </template>
           <li
             @click="claimSeat"
@@ -274,7 +283,13 @@ export default {
       const players = this.players.length;
       if (!session.nomination) return false;
       const indexAdjusted =
-        (this.index - 1 + players - session.nomination[1]) % players;
+        (this.index -
+          1 +
+          players -
+          (typeof session.nomination[1] == "number"
+            ? session.nomination[1]
+            : session.nomination[0])) %
+        players;
       return indexAdjusted < session.lockedVote - 1;
     },
     zoom: function () {
@@ -370,6 +385,14 @@ export default {
       this.isMenuOpen = false;
       this.$emit("trigger", ["nominatePlayer", player]);
     },
+    specialVote() {
+      this.isMenuOpen = false;
+      this.$store.commit(
+        "session/setPlayerForSpecialVote",
+        this.players.indexOf(this.player),
+      );
+      this.$store.commit("toggleModal", "specialVote");
+    },
     cancel() {
       this.$emit("trigger", ["cancel"]);
     },

src/components/TownInfo.vue

@@ -89,6 +89,15 @@
         :timerDuration="grimoire.timer.duration"
       />
     </li>
+    <li
+      class="marked"
+      v-if="
+        typeof session.markedPlayer == 'string' &&
+        !(this.session.isSpectator && grimoire.isOrganVoteMode)
+      "
+    >
+      <font-awesome-icon icon="skull" />
+    </li>
   </ul>
 </template>
 
@@ -124,7 +133,7 @@ export default {
     countdownStyle: function () {
       return `--timer: ${this.$store.state.grimoire.timer.duration}`;
     },
-    ...mapState(["edition", "grimoire", "locale"]),
+    ...mapState(["edition", "grimoire", "locale", "session"]),
     ...mapState("players", ["players"]),
   },
 };
@@ -212,4 +221,18 @@ export default {
     top: -50%;
   }
 }
+
+.marked {
+  opacity: 0.5;
+  position: absolute;
+  svg {
+    height: 80px;
+    width: 80px;
+    stroke: white;
+    stroke-width: 15px;
+    path {
+      fill: white;
+    }
+  }
+}
 </style>

src/components/TownSquare.vue

@@ -82,13 +82,31 @@
         </div>
       </div>
       <div class="button-group" v-if="session.nomination">
-        <div @click="setAccusationTimer()" class="button">
+        <div
+          @click="setAccusationTimer()"
+          class="button"
+          v-if="typeof session.nomination[1] !== 'object'"
+        >
           {{ locale.townsquare.timer.accusation.button }}
         </div>
-        <div @click="setDefenseTimer()" class="button">
+        <div @click="setSpecialVoteTimer()" class="button" v-else>
+          {{ session.nomination[1][2] }}
+        </div>
+        <div
+          @click="setDefenseTimer()"
+          class="button"
+          v-if="typeof session.nomination[1] !== 'object'"
+        >
           {{ locale.townsquare.timer.defense.button }}
         </div>
-        <div @click="setDebateTimer()" class="button">
+        <div
+          @click="setDebateTimer()"
+          class="button"
+          v-if="typeof session.nomination[1] !== 'object'"
+        >
+          {{ locale.townsquare.timer.debate.button }}
+        </div>
+        <div @click="setSpecialDebateTimer()" class="button" v-else>
           {{ locale.townsquare.timer.debate.button }}
         </div>
       </div>
@@ -389,16 +407,38 @@ export default {
       this.timerDuration = 1;
       let timerText = this.locale.townsquare.timer.accusation.text;
       timerText = timerText
-        .replace("$accusator", this.players[this.session.nomination[0]].name)
-        .replace("$accusee", this.players[this.session.nomination[1]].name);
+        .replace(
+          "$accusator",
+          typeof this.session.nomination[0] == "number"
+            ? this.players[this.session.nomination[0]].name
+            : this.session.nomination[0][0].toUpperCase() +
+                this.session.nomination[0].slice(1),
+        )
+        .replace(
+          "$accusee",
+          typeof this.session.nomination[1] == "number"
+            ? this.players[this.session.nomination[1]].name
+            : this.session.nomination[1],
+        );
       this.timerName = timerText;
     },
     setDefenseTimer() {
       this.timerDuration = 1;
       let timerText = this.locale.townsquare.timer.defense.text;
       timerText = timerText
-        .replace("$accusee", this.players[this.session.nomination[1]].name)
-        .replace("$accusator", this.players[this.session.nomination[0]].name);
+        .replace(
+          "$accusee",
+          typeof this.session.nomination[1] == "number"
+            ? this.players[this.session.nomination[1]].name
+            : this.session.nomination[1][0].toUpperCase() +
+                this.session.nomination[1].slice(1),
+        )
+        .replace(
+          "$accusator",
+          typeof this.session.nomination[0] == "number"
+            ? this.players[this.session.nomination[0]].name
+            : this.session.nomination[0],
+        );
       this.timerName = timerText;
     },
     setDebateTimer() {
@@ -406,7 +446,26 @@ export default {
       let timerText = this.locale.townsquare.timer.debate.text;
       timerText = timerText.replace(
         "$accusee",
-        this.players[this.session.nomination[1]].name,
+        typeof this.session.nomination[1] == "number"
+          ? this.players[this.session.nomination[1]].name
+          : this.session.nomination[1],
+      );
+      this.timerName = timerText;
+    },
+    setSpecialVoteTimer() {
+      this.timerDuration = 1;
+      let timerText =
+        this.players[this.session.nomination[0]].name +
+        " " +
+        this.session.nomination[1][0];
+      this.timerName = timerText;
+    },
+    setSpecialDebateTimer() {
+      this.timerDuration = 2;
+      let timerText = this.session.nomination[1][1];
+      timerText = timerText.replace(
+        "$player",
+        this.players[this.session.nomination[0]].name,
       );
       this.timerName = timerText;
     },

src/components/Vote.vue

@@ -1,25 +1,34 @@
 <template>
   <div id="vote">
     <div class="arrows">
-      <span class="nominee" :style="nomineeStyle"></span>
-      <span class="nominator" :style="nominatorStyle"></span>
+      <span class="nominee" :style="nomineeStyle" v-if="nominee"></span>
+      <span class="nominator" :style="nominatorStyle" v-if="nominator"></span>
     </div>
     <div class="overlay">
       <audio src="../assets/sounds/countdown.mp3" preload="auto"></audio>
-      <em class="blue">{{ nominator.name }}</em>
+      <em class="blue">{{
+        nominator
+          ? nominator.name
+          : session.nomination[0][0].toUpperCase() +
+            session.nomination[0].slice(1)
+      }}</em>
       {{
-        nominee.role.team == "traveler"
-          ? locale.vote.callexile
-          : locale.vote.nominates
+        typeof session.nomination[1] == "object"
+          ? session.nomination[1][0]
+          : nominee && nominee.role.team == "traveler"
+            ? locale.vote.callexile
+            : locale.vote.nominates
       }}
-      <em>{{ nominee.name }}</em
+      <em v-if="typeof session.nomination[1] !== 'object'">{{
+        nominee ? nominee.name : session.nomination[1]
+      }}</em
       >{{ locale.vote.exclam }}
       <br />
       <em
         class="blue"
         v-if="
           !grimoire.isOrganVoteMode ||
-          nominee.role.team == 'traveler' ||
+          (nominee && nominee.role.team == 'traveler') ||
           !session.isSpectator
         "
       >
@@ -27,10 +36,15 @@
       </em>
       <em class="blue" v-else> ? {{ locale.vote.votes }} </em>
       {{ locale.vote.inFavor }}
-      <em v-if="nominee.role.team !== 'traveler'">
+      <em
+        v-if="
+          (nominee && nominee.role.team !== 'traveler') ||
+          typeof session.nomination[1] == 'string'
+        "
+      >
         ({{ locale.vote.majorityIs }} {{ Math.ceil(alive / 2) }})
       </em>
-      <em v-else>
+      <em v-else-if="nominee">
         ({{ locale.vote.majorityIs }} {{ Math.ceil(players.length / 2) }})
       </em>
 
@@ -72,7 +86,13 @@
             {{ locale.vote.close }}
           </div>
         </div>
-        <div class="button-group mark" v-if="nominee.role.team !== 'traveler'">
+        <div
+          class="button-group mark"
+          v-if="
+            typeof session.nomination[1] !== 'object' &&
+            (!nominee || nominee.role.team !== 'traveler')
+          "
+        >
           <div
             class="button"
             :class="{
@@ -149,18 +169,36 @@ export default {
     ...mapState(["session", "grimoire", "locale"]),
     ...mapGetters({ alive: "players/alive" }),
     nominator: function () {
-      return this.players[this.session.nomination[0]];
+      try {
+        return this.players[this.session.nomination[0]];
+      } catch (error) {
+        return null;
+      }
     },
     nominatorStyle: function () {
       const players = this.players.length;
       const nomination = this.session.nomination[0];
-      return {
-        transform: `rotate(${Math.round((nomination / players) * 360)}deg)`,
-        transitionDuration: this.session.votingSpeed - 100 + "ms",
-      };
+      if (this.nominee) {
+        return {
+          transform: `rotate(${Math.round((nomination / players) * 360)}deg)`,
+          transitionDuration: this.session.votingSpeed - 100 + "ms",
+        };
+      } else {
+        const lock = this.session.lockedVote;
+        const rotation =
+          (360 * (nomination + Math.min(lock, players))) / players;
+        return {
+          transform: `rotate(${Math.round(rotation)}deg)`,
+          transitionDuration: this.session.votingSpeed - 100 + "ms",
+        };
+      }
     },
     nominee: function () {
-      return this.players[this.session.nomination[1]];
+      try {
+        return this.players[this.session.nomination[1]];
+      } catch (error) {
+        return null;
+      }
     },
     nomineeStyle: function () {
       const players = this.players.length;
@@ -183,17 +221,27 @@ export default {
     },
     canVote: function () {
       if (!this.player) return false;
-      if (this.player.isVoteless && this.nominee.role.team !== "traveler")
+      if (
+        this.player.isVoteless &&
+        ((this.nominee && this.nominee.role.team !== "traveler") ||
+          typeof this.session.nomination[1] === "string")
+      )
         return false;
       const session = this.session;
       const players = this.players.length;
       const index = this.players.indexOf(this.player);
       const indexAdjusted =
-        (index - 1 + players - session.nomination[1]) % players;
+        (index -
+          1 +
+          players -
+          (this.nominee ? session.nomination[1] : session.nomination[0])) %
+        players;
       return indexAdjusted >= session.lockedVote - 1;
     },
     voters: function () {
-      const nomination = this.session.nomination[1];
+      const nomination = this.nominee
+        ? this.session.nomination[1]
+        : this.session.nomination[0];
       const voters = Array(this.players.length)
         .fill("")
         .map((x, index) =>

src/components/modals/SpecialVoteModal.vue

@@ -0,0 +1,128 @@
+<template>
+  <Modal v-if="modals.specialVote" @close="toggleModal('specialVote')">
+    <h3>{{ locale.modal.specialvote.title }}</h3>
+    <div class="allTheButtons">
+      <template>
+        <button @click="bishopVote()">
+          <img src="../../assets/icons/bishop.png" />
+          <span>{{ locale.modal.specialvote.bishop }}</span>
+        </button>
+        <button @click="atheistVote()">
+          <img src="../../assets/icons/atheist.png" />
+          <span>{{ locale.modal.specialvote.atheist }}</span>
+        </button>
+        <button @click="cultleaderVote()">
+          <img src="../../assets/icons/cultleader.png" />
+          <span>{{ locale.modal.specialvote.cultleader }}</span>
+        </button>
+        <button @click="customVote()">
+          <img src="../../assets/icons/custom.png" />
+          <span>{{ locale.modal.specialvote.custom }}</span>
+        </button>
+      </template>
+    </div>
+  </Modal>
+</template>
+
+<script>
+import { mapMutations, mapState } from "vuex";
+import Modal from "./Modal";
+
+export default {
+  components: {
+    Modal,
+  },
+  computed: {
+    ...mapState(["modals", "locale", "grimoire", "session"]),
+    ...mapState("players", ["players"]),
+  },
+  methods: {
+    launchVote(nomination) {
+      this.$store.commit("session/nomination", { nomination });
+      this.$store.commit("toggleModal", "specialVote");
+    },
+    bishopVote() {
+      this.launchVote([
+        this.locale.modal.specialvote.st,
+        this.session.playerForSpecialVote,
+      ]);
+    },
+    atheistVote() {
+      this.launchVote([
+        this.session.playerForSpecialVote,
+        this.locale.modal.specialvote.st,
+      ]);
+    },
+    cultleaderVote() {
+      this.launchVote([
+        this.session.playerForSpecialVote,
+        this.locale.modal.specialvote.cultleaderMessages,
+      ]);
+    },
+    customVote() {
+      let playerName = this.players[this.session.playerForSpecialVote].name;
+      let input = prompt(
+        this.locale.modal.specialvote.complete +
+          playerName +
+          " ____________________" +
+          this.locale.vote.exclam,
+      );
+      if (input) {
+        let messages = this.locale.modal.specialvote.customMessages;
+        messages[0] = input;
+        this.launchVote([this.session.playerForSpecialVote, messages]);
+      }
+    },
+    ...mapMutations(["toggleModal"]),
+  },
+};
+</script>
+
+<style scoped lang="scss">
+ul {
+  width: 100%;
+}
+
+div.allTheButtons {
+  margin-top: 30px;
+}
+
+button {
+  background-color: #66027f;
+  border: none;
+  border-radius: 10px;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  width: 35%;
+  margin-top: 15px;
+  display: flex;
+  align-items: center;
+}
+
+button:hover {
+  background-color: #9903bf;
+}
+
+button:focus {
+  background-color: #cc04ff;
+}
+
+span {
+  font-family: PiratesBay, sans-serif;
+  font-size: 22px;
+  color: white;
+  flex: 1;
+  text-align: center;
+}
+
+img {
+  width: 80px;
+  display: block;
+  margin-left: auto;
+}
+
+template {
+  margin-top: 30px;
+}
+</style>

src/components/modals/VoteHistoryModal.vue

@@ -60,7 +60,7 @@
             {{ vote.votes == null ? "?" : vote.votes.length }}
             <font-awesome-icon icon="hand-paper" />
           </td>
-          <td>
+          <td v-if="vote.nominee">
             {{ vote.majority }}
             <font-awesome-icon
               :icon="[
@@ -73,6 +73,7 @@
               ]"
             />
           </td>
+          <td v-else></td>
           <td>
             {{
               vote.votes == null

src/store/index.js

@@ -128,6 +128,7 @@ export default new Vuex.Store({
       role: false,
       roles: false,
       voteHistory: false,
+      specialVote: false,
     },
     edition: editionJSONbyId.get("tb"),
     editions: editionJSON,

src/store/locale/en/ui.json

@@ -151,6 +151,7 @@
     "removePlayer": "Remove",
     "emptySeat": "Empty seat",
     "nomination": "Nomination",
+    "specialVote": "Special vote",
     "claimSeat": "Claim seat",
     "vacateSeat": "Vacate seat",
     "occupiedSeat": "Seat occupied"
@@ -257,6 +258,17 @@
       "execution": "Execution",
       "exile": "Exile",
       "hiddenVote": "The result is hidden because of the Organ Grinder"
+    },
+    "specialvote": {
+      "title": "Choose a vote type:",
+      "bishop": "Nomination by the Story Teller",
+      "atheist": "Nomination of the Story Teller",
+      "st": "the Story Teller",
+      "cultleader": "Cult creation",
+      "cultleaderMessages": ["wants to create a cult","Do you want to join $player's cult?","Cult"],
+      "custom": "Custom vote",
+      "complete": "Complete: ",
+      "customMessages": ["","The debate is open","(Custom)"]
     }
   }
 }

src/store/locale/fr/ui.json

@@ -151,6 +151,7 @@
     "removePlayer": "Retirer le joueur",
     "emptySeat": "Vider le siège",
     "nomination": "Accusation",
+    "specialVote": "Vote spécial",
     "claimSeat": "S'asseoir ici",
     "vacateSeat": "Libérer le Siège",
     "occupiedSeat": "Siège Occupé"
@@ -257,6 +258,17 @@
       "execution": "Exécution",
       "exile": "Exil",
       "hiddenVote": "Résultat caché par l'Organiste"
+    },
+    "specialvote": {
+      "title": "Sélectionnez un type de vote :",
+      "bishop": "Accusation par le Narrateur",
+      "atheist": "Accusation du Narrateur",
+      "st": "le Narrateur",
+      "cultleader": "Création de secte",
+      "cultleaderMessages": ["veut créer une secte","Voulez-vous rejoindre la secte créée par $player ?","Secte"],
+      "custom": "Vote personnalisé",
+      "complete": "Complétez : ",
+      "customMessages": ["","Le débat est ouvert","(Personnalisé)"]
     }
   }
 }

src/store/modules/session.js

@@ -28,6 +28,7 @@ const state = () => ({
   isVoteInProgress: false,
   voteHistory: [],
   markedPlayer: -1,
+  playerForSpecialVote: -1,
   isVoteHistoryAllowed: true,
   isRolesDistributed: false,
 });
@@ -50,6 +51,7 @@ const mutations = {
   setVotingSpeed: set("votingSpeed"),
   setVoteInProgress: set("isVoteInProgress"),
   setMarkedPlayer: set("markedPlayer"),
+  setPlayerForSpecialVote: set("playerForSpecialVote"),
   setNomination: set("nomination"),
   setVoteHistoryAllowed: set("isVoteHistoryAllowed"),
   claimSeat: set("claimedSeat"),
@@ -80,16 +82,29 @@ const mutations = {
   addHistory(state, players) {
     if (!state.isVoteHistoryAllowed && state.isSpectator) return;
     if (!state.nomination || state.lockedVote <= players.length) return;
-    const isExile = players[state.nomination[1]].role.team === "traveler";
+    const isExile =
+      typeof state.nomination[1] == "number" &&
+      players[state.nomination[1]].role.team === "traveler";
     const organGrinder = gameInfo.state.grimoire.isOrganVoteMode && !isExile;
     state.voteHistory.push({
       timestamp: new Date(),
-      nominator: players[state.nomination[0]].name,
-      nominee: players[state.nomination[1]].name,
-      type: isExile
-        ? gameInfo.state.locale.modal.voteHistory.exile
-        : gameInfo.state.locale.modal.voteHistory.execution +
-          (organGrinder && !state.isSpectator ? "*" : ""),
+      nominator:
+        typeof state.nomination[0] == "number"
+          ? players[state.nomination[0]].name
+          : state.nomination[0],
+      nominee:
+        typeof state.nomination[1] == "number"
+          ? players[state.nomination[1]].name
+          : typeof state.nomination[1] == "string"
+            ? state.nomination[1]
+            : "",
+      type:
+        typeof state.nomination[1] !== "object"
+          ? isExile
+            ? gameInfo.state.locale.modal.voteHistory.exile
+            : gameInfo.state.locale.modal.voteHistory.execution +
+              (organGrinder && !state.isSpectator ? "*" : "")
+          : state.nomination[1][2],
       majority: Math.ceil(
         players.filter((player) => !player.isDead || isExile).length / 2,
       ),

src/store/socket.js

@@ -699,7 +699,8 @@ class LiveSession {
     const players = this._store.state.players.players;
     if (
       !nomination ||
-      (players.length > nomination[0] && players.length > nomination[1])
+      ((typeof nomination[0] !== "number" || players.length > nomination[0]) &&
+        (typeof nomination[1] !== "number" || players.length > nomination[1]))
     ) {
       this.setVotingSpeed(this._store.state.session.votingSpeed);
       this._send("nomination", nomination);
@@ -815,7 +816,13 @@ class LiveSession {
     const { session, players } = this._store.state;
     const playerCount = players.players.length;
     const indexAdjusted =
-      (index - 1 + playerCount - session.nomination[1]) % playerCount;
+      (index -
+        1 +
+        playerCount -
+        (typeof session.nomination[1] == "number"
+          ? session.nomination[1]
+          : session.nomination[0])) %
+      playerCount;
     if (fromST || indexAdjusted >= session.lockedVote - 1) {
       this._store.commit("session/vote", [index, vote]);
     }
@@ -828,7 +835,11 @@ class LiveSession {
     if (this._isSpectator) return;
     const { lockedVote, votes, nomination } = this._store.state.session;
     const { players } = this._store.state.players;
-    const index = (nomination[1] + lockedVote - 1) % players.length;
+    const index =
+      ((typeof nomination[1] == "number" ? nomination[1] : nomination[0]) +
+        lockedVote -
+        1) %
+      players.length;
     this._send("lock", [this._store.state.session.lockedVote, votes[index]]);
   }
 
@@ -844,7 +855,11 @@ class LiveSession {
     if (lock > 1) {
       const { lockedVote, nomination } = this._store.state.session;
       const { players } = this._store.state.players;
-      const index = (nomination[1] + lockedVote - 1) % players.length;
+      const index =
+        ((typeof nomination[1] == "number" ? nomination[1] : nomination[0]) +
+          lockedVote -
+          1) %
+        players.length;
       if (this._store.state.session.votes[index] !== vote) {
         this._store.commit("session/vote", [index, vote]);
       }