disable all animations now

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}')`
@@ -17,8 +20,7 @@
       autoplay
       loop
     ></video>
-    <div v-if="grimoire.isNightAnimated" class="backdrop animated"></div>
+    <div class="backdrop"></div>
-    <div v-else class="backdrop"></div>
     <transition name="blur">
       <Intro v-if="!players.length"></Intro>
       <TownInfo v-if="players.length && !session.nomination"></TownInfo>
@@ -203,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 {
@@ -340,14 +350,11 @@ video#background {
     height: 100%;
     background: url("assets/clouds.png") repeat;
     background-size: 2000px auto;
+    animation: move-background 120s linear infinite;
     opacity: 0.3;
   }
 }
 
-#app > .backdrop.animated:after {
-  animation: move-background 120s linear infinite;
-}
-
 @keyframes move-background {
   from {
     transform: translate3d(-2000px, 0px, 0px);

src/components/Menu.vue

@@ -82,28 +82,25 @@
               />
             </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
-              ><font-awesome-icon
+            ><font-awesome-icon
                 :icon="[
                   'fas',
                   grimoire.isImageOptIn ? 'check-square' : 'square'
                 ]"
             /></em>
           </li>
-          <li @click="setBackground">
+          <li @click="toggleStatic">
-            Background image
+            Disable Animations
-            <em><font-awesome-icon icon="image"/></em>
-          </li>
-          <li @click="toggleNightAnimated">
-            Animated night
             <em
               ><font-awesome-icon
-                :icon="[
+                :icon="['fas', grimoire.isStatic ? 'check-square' : 'square']"
-                  'fas',
-                  grimoire.isNightAnimated ? 'check-square' : 'square'
-                ]"
             /></em>
           </li>
           <li @click="toggleMuted">
@@ -344,7 +341,7 @@ export default {
       "toggleMuted",
       "toggleNight",
       "toggleNightOrder",
-      "toggleNightAnimated",
+      "toggleStatic",
       "setZoom",
       "toggleModal"
     ])

src/store/index.js

@@ -79,9 +79,9 @@ export default new Vuex.Store({
     grimoire: {
       isNight: false,
       isNightOrder: true,
-      isNightAnimated: true,
       isPublic: true,
       isMenuOpen: false,
+      isStatic: false,
       isMuted: false,
       isImageOptIn: false,
       zoom: 0,
@@ -145,7 +145,7 @@ export default new Vuex.Store({
     toggleMuted: toggle("isMuted"),
     toggleMenu: toggle("isMenuOpen"),
     toggleNightOrder: toggle("isNightOrder"),
-    toggleNightAnimated: toggle("isNightAnimated"),
+    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);