From a66892c30d8d5a07b1584577e1fea788aed6d929 Mon Sep 17 00:00:00 2001
From: Adrian Irving-Beer <wisq@wisq.net>
Date: Wed, 28 Apr 2021 17:45:33 -0400
Subject: [PATCH] Add option to reduce night animations to save power.

---
 src/App.vue             |  8 ++++++--
 src/components/Menu.vue | 11 +++++++++++
 src/store/index.js      |  2 ++
 3 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index bb5bc65..906212d 100644
--- a/src/App.vue
+++ b/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);
diff --git a/src/components/Menu.vue b/src/components/Menu.vue
index 40abc72..ce4db99 100644
--- a/src/components/Menu.vue
+++ b/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"
     ])
diff --git a/src/store/index.js b/src/store/index.js
index 06a03be..5a411dc 100644
--- a/src/store/index.js
+++ b/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"),