add global audio mute entry to grimoire menu

src/components/Menu.vue

@@ -76,6 +76,13 @@
             Background image
             <em><font-awesome-icon icon="image"/></em>
           </li>
+          <li @click="toggleMute">
+            Mute Sounds
+            <em
+              ><font-awesome-icon
+                :icon="['fas', grimoire.isMuted ? 'volume-mute' : 'volume-up']"
+            /></em>
+          </li>
         </template>
 
         <template v-if="tab === 'session'">
@@ -215,6 +222,9 @@ export default {
         this.$store.commit("setBackground", background);
       }
     },
+    toggleMute() {
+      this.$store.commit("setIsMuted", !this.grimoire.isMuted);
+    },
     hostSession() {
       if (this.session.sessionId) return;
       const sessionId = prompt(

src/components/Vote.vue

@@ -5,7 +5,7 @@
       <span class="nominator" :style="nominatorStyle"></span>
     </div>
     <div class="overlay">
-      <audio src="../assets/sounds/countdown.mp3"></audio>
+      <audio src="../assets/sounds/countdown.mp3" preload="auto"></audio>
       <em class="blue">{{ nominator.name }}</em> nominated
       <em>{{ nominee.name }}</em
       >!
@@ -99,7 +99,11 @@
         <span>2</span>
         <span>1</span>
         <span>GO</span>
-        <audio autoplay src="../assets/sounds/countdown.mp3"></audio>
+        <audio
+          :autoplay="!grimoire.isMuted"
+          src="../assets/sounds/countdown.mp3"
+          :muted="grimoire.isMuted"
+        ></audio>
       </div>
     </transition>
   </div>
@@ -111,7 +115,7 @@ import { mapGetters, mapState } from "vuex";
 export default {
   computed: {
     ...mapState("players", ["players"]),
-    ...mapState(["session"]),
+    ...mapState(["session", "grimoire"]),
     ...mapGetters({ alive: "players/alive" }),
     nominator: function() {
       return this.players[this.session.nomination[0]];

src/main.js

@@ -44,6 +44,8 @@ const faIcons = [
   "UserEdit",
   "UserFriends",
   "Users",
+  "VolumeUp",
+  "VolumeMute",
   "VoteYea"
 ];
 const fabIcons = ["Github", "Discord"];

src/store/index.js

@@ -53,6 +53,7 @@ export default new Vuex.Store({
       isNightOrder: true,
       isPublic: true,
       isMenuOpen: false,
+      isMuted: false,
       zoom: 0,
       background: ""
     },
@@ -133,6 +134,9 @@ export default new Vuex.Store({
     setBackground({ grimoire }, background) {
       grimoire.background = background;
     },
+    setIsMuted({ grimoire }, isMuted) {
+      grimoire.isMuted = isMuted;
+    },
     toggleModal({ modals }, name) {
       if (name) {
         modals[name] = !modals[name];

src/store/persistence.js

@@ -3,6 +3,9 @@ module.exports = store => {
   if (localStorage.getItem("background")) {
     store.commit("setBackground", localStorage.background);
   }
+  if (localStorage.getItem("muted")) {
+    store.commit("setIsMuted", true);
+  }
   if (localStorage.getItem("zoom")) {
     store.commit("setZoom", parseFloat(localStorage.getItem("zoom")));
   }
@@ -70,6 +73,13 @@ module.exports = store => {
           localStorage.removeItem("background");
         }
         break;
+      case "setIsMuted":
+        if (payload) {
+          localStorage.setItem("muted", 1);
+        } else {
+          localStorage.removeItem("muted");
+        }
+        break;
       case "setZoom":
         if (payload !== 0) {
           localStorage.setItem("zoom", payload);