Merge pull request #157 from wisq/main

Add option to reduce night animations to save power.

src/App.vue

@@ -17,7 +17,8 @@
       autoplay
       loop
     ></video>
-    <div class="backdrop"></div>
+    <div v-if="grimoire.isNightAnimated" class="backdrop animated"></div>
+    <div v-else class="backdrop"></div>
     <transition name="blur">
       <Intro v-if="!players.length"></Intro>
       <TownInfo v-if="players.length && !session.nomination"></TownInfo>
@@ -339,11 +340,14 @@ 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

@@ -96,6 +96,16 @@
             Background image
             <em><font-awesome-icon icon="image"/></em>
           </li>
+          <li @click="toggleNightAnimated">
+            Animated night
+            <em
+              ><font-awesome-icon
+                :icon="[
+                  'fas',
+                  grimoire.isNightAnimated ? 'check-square' : 'square'
+                ]"
+            /></em>
+          </li>
           <li @click="toggleMuted">
             Mute Sounds
             <em
@@ -334,6 +344,7 @@ export default {
       "toggleMuted",
       "toggleNight",
       "toggleNightOrder",
+      "toggleNightAnimated",
       "setZoom",
       "toggleModal"
     ])

src/store/index.js

@@ -79,6 +79,7 @@ export default new Vuex.Store({
     grimoire: {
       isNight: false,
       isNightOrder: true,
+      isNightAnimated: true,
       isPublic: true,
       isMenuOpen: false,
       isMuted: false,
@@ -144,6 +145,7 @@ export default new Vuex.Store({
     toggleMuted: toggle("isMuted"),
     toggleMenu: toggle("isMenuOpen"),
     toggleNightOrder: toggle("isNightOrder"),
+    toggleNightAnimated: toggle("isNightAnimated"),
     toggleNight: toggle("isNight"),
     toggleGrimoire: toggle("isPublic"),
     toggleImageOptIn: toggle("isImageOptIn"),