Merge pull request #159 from bra1n/animation_toggle

add global animation toggle

CHANGELOG.md

@@ -1,5 +1,6 @@
 # Release Notes
 
+- 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
 

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}')`
@@ -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

@@ -83,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
@@ -93,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
@@ -335,6 +342,7 @@ export default {
       "toggleMuted",
       "toggleNight",
       "toggleNightOrder",
+      "toggleStatic",
       "setZoom",
       "toggleModal"
     ])

src/store/index.js

@@ -81,6 +81,7 @@ export default new Vuex.Store({
       isNightOrder: true,
       isPublic: true,
       isMenuOpen: false,
+      isStatic: false,
       isMuted: false,
       isImageOptIn: false,
       zoom: 0,
@@ -144,6 +145,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"),

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);
   }
@@ -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);