added night phase switch

src/App.vue

@@ -3,13 +3,17 @@
     id="app"
     @keyup="keyup"
     tabindex="-1"
-    v-bind:class="{ screenshot: grimoire.isScreenshot }"
+    v-bind:class="{
+      screenshot: grimoire.isScreenshot,
+      night: grimoire.isNight
+    }"
     v-bind:style="{
       backgroundImage: grimoire.background
         ? `url('${grimoire.background}')`
         : ''
     }"
   >
+    <div class="backdrop"></div>
     <transition name="blur">
       <Intro v-if="!players.length"></Intro>
       <TownInfo v-if="players.length && !session.nomination"></TownInfo>
@@ -333,4 +337,47 @@ ul {
     height: 10px;
   }
 }
+
+/* Night phase backdrop */
+#app > .backdrop {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  pointer-events: none;
+  background: black;
+  background: linear-gradient(
+    180deg,
+    rgba(0, 0, 0, 1) 0%,
+    rgba(1, 22, 46, 1) 50%,
+    rgba(0, 39, 70, 1) 100%
+  );
+  opacity: 0;
+  transition: opacity 1s ease-in-out;
+  &:after {
+    content: " ";
+    display: block;
+    width: 100%;
+    padding-right: 2000px;
+    height: 100%;
+    background: url("assets/clouds.png") repeat;
+    background-size: 2000px auto;
+    animation: move-background 120s linear infinite;
+    opacity: 0.3;
+  }
+}
+
+@keyframes move-background {
+  from {
+    transform: translate3d(-2000px, 0px, 0px);
+  }
+  to {
+    transform: translate3d(0px, 0px, 0px);
+  }
+}
+
+#app.night > .backdrop {
+  opacity: 0.5;
+}
 </style>

src/components/Menu.vue

@@ -49,6 +49,14 @@
             <template v-if="grimoire.isPublic">Show</template>
             <em>[G]</em>
           </li>
+          <li @click="toggleNight" v-if="!session.isSpectator">
+            <template v-if="!grimoire.isNight">Switch to Night</template>
+            <template v-if="grimoire.isNight">Switch to Day</template>
+            <em
+              ><font-awesome-icon
+                :icon="['fas', grimoire.isNight ? 'sun' : 'cloud-moon']"
+            /></em>
+          </li>
           <li @click="toggleNightOrder" v-if="players.length">
             Night order
             <em
@@ -59,10 +67,6 @@
                 ]"
             /></em>
           </li>
-          <li v-if="!session.isSpectator" @click="toggleModal('fabled')">
-            Add Fabled
-            <em><font-awesome-icon icon="dragon"/></em>
-          </li>
           <li v-if="players.length">
             Zoom
             <em>
@@ -138,6 +142,10 @@
             Choose & Assign
             <em>[C]</em>
           </li>
+          <li v-if="!session.isSpectator" @click="toggleModal('fabled')">
+            Add Fabled
+            <em><font-awesome-icon icon="dragon"/></em>
+          </li>
           <li @click="clearRoles" v-if="players.length">
             Remove all
             <em><font-awesome-icon icon="trash-alt"/></em>
@@ -244,6 +252,7 @@ export default {
       );
       if (sessionId) {
         this.$store.commit("session/setSpectator", true);
+        this.$store.commit("toggleGrimoire", false);
         this.$store.commit(
           "session/setSessionId",
           sessionId
@@ -287,6 +296,7 @@ export default {
     ...mapMutations([
       "toggleGrimoire",
       "toggleMenu",
+      "toggleNight",
       "toggleNightOrder",
       "updateScreenshot",
       "setZoom",

src/components/TownInfo.vue

@@ -34,6 +34,11 @@
           v-bind:icon="teams.traveler > 1 ? 'user-friends' : 'user'"
         />
       </template>
+      <template v-if="grimoire.isNight">
+        <br />
+        Night phase
+        <font-awesome-icon :icon="['fas', 'cloud-moon']" />
+      </template>
     </li>
   </ul>
 </template>
@@ -59,7 +64,7 @@ export default {
           ).length
       };
     },
-    ...mapState(["edition"]),
+    ...mapState(["edition", "grimoire"]),
     ...mapState("players", ["players"])
   }
 };

src/main.js

@@ -34,6 +34,7 @@ const faIcons = [
   "SearchPlus",
   "Skull",
   "Square",
+  "Sun",
   "TheaterMasks",
   "Times",
   "TimesCircle",

src/store/index.js

@@ -50,6 +50,7 @@ export default new Vuex.Store({
   },
   state: {
     grimoire: {
+      isNight: false,
       isNightOrder: true,
       isPublic: true,
       isMenuOpen: false,
@@ -113,6 +114,13 @@ export default new Vuex.Store({
         grimoire.isPublic ? "Town Square" : "Grimoire"
       }`;
     },
+    toggleNight({ grimoire }, isNight) {
+      if (isNight === true || isNight === false) {
+        grimoire.isNight = isNight;
+      } else {
+        grimoire.isNight = !grimoire.isNight;
+      }
+    },
     toggleNightOrder({ grimoire }) {
       grimoire.isNightOrder = !grimoire.isNightOrder;
     },

src/store/socket.js

@@ -138,6 +138,10 @@ class LiveSession {
         if (!this._isSpectator) return;
         this._store.commit("players/move", params);
         break;
+      case "isNight":
+        if (!this._isSpectator) return;
+        this._store.commit("toggleNight", params);
+        break;
       case "votingSpeed":
         if (!this._isSpectator) return;
         this._store.commit("session/setVotingSpeed", params);
@@ -205,11 +209,12 @@ class LiveSession {
         ? { roleId: player.role.id }
         : {})
     }));
-    const { session } = this._store.state;
+    const { session, grimoire } = this._store.state;
     const { fabled } = this._store.state.players;
     this.sendEdition();
     this._send("gs", {
       gamestate: this._gamestate,
+      isNight: grimoire.isNight,
       nomination: session.nomination,
       votingSpeed: session.votingSpeed,
       lockedVote: session.lockedVote,
@@ -227,12 +232,14 @@ class LiveSession {
     if (!this._isSpectator) return;
     const {
       gamestate,
+      isNight,
       nomination,
       votingSpeed,
       votes,
       lockedVote,
       fabled
     } = data;
+    this._store.commit("toggleNight", isNight);
     this._store.commit("session/nomination", {
       nomination,
       votes,
@@ -519,6 +526,13 @@ class LiveSession {
     }
   }
 
+  /**
+   * Send the isNight status. ST only
+   */
+  setIsNight() {
+    if (this._isSpectator) return;
+    this._send("isNight", this._store.state.grimoire.isNight);
+  }
   /**
    * Send the voting speed. ST only
    * @param votingSpeed voting speed in seconds, minimum 1
@@ -644,6 +658,9 @@ export default store => {
       case "session/setVotingSpeed":
         session.setVotingSpeed(payload);
         break;
+      case "toggleNight":
+        session.setIsNight();
+        break;
       case "setEdition":
         session.sendEdition();
         break;