diff --git a/src/App.vue b/src/App.vue
index 35bcd39..0b69982 100644
--- a/src/App.vue
+++ b/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}')`
: ''
}"
>
+
@@ -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;
+}
diff --git a/src/assets/clouds.png b/src/assets/clouds.png
new file mode 100644
index 0000000..3841fd8
Binary files /dev/null and b/src/assets/clouds.png differ
diff --git a/src/components/Menu.vue b/src/components/Menu.vue
index 19ce3d3..2cd1911 100644
--- a/src/components/Menu.vue
+++ b/src/components/Menu.vue
@@ -49,6 +49,14 @@
Show
[G]
+
+ Switch to Night
+ Switch to Day
+
+
Night order
-
- Add Fabled
-
-
Zoom
@@ -138,6 +142,10 @@
Choose & Assign
[C]
+
+ Add Fabled
+
+
Remove all
@@ -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",
diff --git a/src/components/TownInfo.vue b/src/components/TownInfo.vue
index 1aa0866..5dd8a0b 100644
--- a/src/components/TownInfo.vue
+++ b/src/components/TownInfo.vue
@@ -34,6 +34,11 @@
v-bind:icon="teams.traveler > 1 ? 'user-friends' : 'user'"
/>
+
+
+ Night phase
+
+
@@ -59,7 +64,7 @@ export default {
).length
};
},
- ...mapState(["edition"]),
+ ...mapState(["edition", "grimoire"]),
...mapState("players", ["players"])
}
};
diff --git a/src/main.js b/src/main.js
index 4c2bac5..0c80cfe 100644
--- a/src/main.js
+++ b/src/main.js
@@ -34,6 +34,7 @@ const faIcons = [
"SearchPlus",
"Skull",
"Square",
+ "Sun",
"TheaterMasks",
"Times",
"TimesCircle",
diff --git a/src/store/index.js b/src/store/index.js
index b557ef0..e8f057e 100644
--- a/src/store/index.js
+++ b/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;
},
diff --git a/src/store/socket.js b/src/store/socket.js
index f99f7c4..f279ef4 100644
--- a/src/store/socket.js
+++ b/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;