add "Ring bell" for Strory teller

src/App.vue

@@ -121,6 +121,10 @@ export default {
           if (this.session.isSpectator) return;
           this.$refs.menu.toggleNight();
           break;
+        case "b":
+          if (this.session.isSpectator) return;
+          this.$refs.menu.toggleRinging();
+          break;
         case "escape":
           this.$store.commit("toggleModal");
       }

src/components/Menu.vue

@@ -58,6 +58,10 @@
             <template v-if="grimoire.isNight">{{ locale.menu.grimoire.daySwitch }}</template>
             <em>[S]</em>
           </li>
+          <li @click="toggleRinging" v-if="!session.isSpectator">
+            <template>{{ locale.menu.grimoire.ringBell }}</template>
+            <em>[B]</em>
+          </li>
           <li @click="toggleNightOrder" v-if="players.length">
             {{ locale.menu.grimoire.order }}
             <em>
@@ -344,6 +348,10 @@ export default {
         this.$store.commit("session/setMarkedPlayer", -1);
       }
     },
+    toggleRinging() {
+      this.$store.commit("toggleRinging", true);
+      setTimeout(this.$store.commit, 4000, "toggleRinging", false);
+    },
     ...mapMutations([
       "toggleGrimoire",
       "toggleMenu",

src/components/TownInfo.vue

@@ -67,6 +67,16 @@
         Night phase
         <font-awesome-icon :icon="['fas', 'cloud-moon']" />
       </span>
+      <span v-if="grimoire.isRinging">
+        <audio
+          :autoplay="!grimoire.isMuted"
+          src="../assets/sounds/countdown.mp3"
+          :muted="grimoire.isMuted"
+        ></audio>
+        <font-awesome-icon :icon="['fas', 'music']" />
+        <font-awesome-icon :icon="['fas', 'bell']" />
+        <font-awesome-icon :icon="['fas', 'music']" />
+      </span>
     </li>
   </ul>
 </template>

src/main.js

@@ -8,6 +8,7 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 
 const faIcons = [
   "AddressCard",
+  "Bell",
   "BookOpen",
   "BookDead",
   "BroadcastTower",
@@ -29,6 +30,7 @@ const faIcons = [
   "Image",
   "Link",
   "MinusCircle",
+  "Music",
   "PeopleArrows",
   "PlusCircle",
   "Question",

src/store/index.js

@@ -104,6 +104,7 @@ export default new Vuex.Store({
     grimoire: {
       isNight: false,
       isNightOrder: true,
+      isRinging: false,
       isPublic: true,
       isMenuOpen: false,
       isStatic: false,
@@ -175,6 +176,7 @@ export default new Vuex.Store({
     toggleNightOrder: toggle("isNightOrder"),
     toggleStatic: toggle("isStatic"),
     toggleNight: toggle("isNight"),
+    toggleRinging: toggle("isRinging"),
     toggleGrimoire: toggle("isPublic"),
     toggleImageOptIn: toggle("isImageOptIn"),
     toggleModal({ modals }, name) {

src/store/locale/en/ui.json

@@ -11,7 +11,8 @@
       "background": "Background image",
       "customImages": "Show Custom Images",
       "animations": "Disable Animations",
-      "mute": "Mute Sounds"
+      "mute": "Mute Sounds",
+      "ringBell": "Ring Bell"
     },
     "session":{
       "title":{

src/store/locale/fr/ui.json

@@ -11,7 +11,8 @@
       "background": "Image de fond",
       "customImages": "Images Importées",
       "animations": "Effets réduits",
-      "mute": "Silencieux"
+      "mute": "Silencieux",
+      "ringBell": "Sonner Clocher"
     },
     "session":{
       "title":{

src/store/socket.js

@@ -176,6 +176,13 @@ class LiveSession {
         if (!this._isSpectator) return;
         this._store.commit("toggleNight", params);
         break;
+      case "isRinging":
+        if (!this._isSpectator) return;
+        this._store.commit("toggleRinging", params);
+        // if (params){
+        //   setTimeout(this._store.commit, 4000, "toggleRinging", false);
+        // }
+        break;
       case "isVoteHistoryAllowed":
         if (!this._isSpectator) return;
         this._store.commit("session/setVoteHistoryAllowed", params);
@@ -277,6 +284,7 @@ class LiveSession {
       this._sendDirect(playerId, "gs", {
         gamestate: this._gamestate,
         isNight: grimoire.isNight,
+        isRinging: grimoire.isRinging,
         isVoteHistoryAllowed: session.isVoteHistoryAllowed,
         nomination: session.nomination,
         votingSpeed: session.votingSpeed,
@@ -301,6 +309,7 @@ class LiveSession {
       isLightweight,
       isNight,
       isVoteHistoryAllowed,
+      isRinging,
       nomination,
       votingSpeed,
       votes,
@@ -352,6 +361,7 @@ class LiveSession {
       }
     });
     if (!isLightweight) {
+      this._store.commit("toggleRinging", !!isRinging);
       this._store.commit("toggleNight", !!isNight);
       this._store.commit("session/setVoteHistoryAllowed", isVoteHistoryAllowed);
       this._store.commit("session/nomination", {
@@ -703,6 +713,14 @@ class LiveSession {
     this._send("isNight", this._store.state.grimoire.isNight);
   }
 
+  /**
+   * Send the isRinging status. ST only
+   */
+  setIsRinging() {
+    if (this._isSpectator) return;
+    this._send("isRinging", this._store.state.grimoire.isRinging);
+  }
+
   /**
    * Send the isVoteHistoryAllowed state. ST only
    */
@@ -884,6 +902,9 @@ export default store => {
       case "toggleNight":
         session.setIsNight();
         break;
+      case "toggleRinging":
+        session.setIsRinging();
+        break;
       case "setEdition":
         session.sendEdition();
         break;