Add option to reduce night animations to save power.

This commit is contained in:
Adrian Irving-Beer 2021-04-28 17:45:33 -04:00
parent b96f14ae02
commit a66892c30d
No known key found for this signature in database
GPG Key ID: 97FFEBDCDADF6EF3
3 changed files with 19 additions and 2 deletions

View File

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

View File

@ -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"
])

View File

@ -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"),