syncing and styling

src/App.vue

@@ -10,10 +10,12 @@
         : ''
     }"
   >
+    <transition name="zoom">
       <Intro v-if="!players.length"></Intro>
       <TownInfo v-if="players.length && !session.nomination"></TownInfo>
-    <TownSquare @screenshot="takeScreenshot"></TownSquare>
       <Vote v-if="session.nomination"></Vote>
+    </transition>
+    <TownSquare @screenshot="takeScreenshot"></TownSquare>
     <Menu ref="menu"></Menu>
     <EditionModal />
     <RolesModal />
@@ -163,6 +165,17 @@ ul {
   justify-content: center;
 }
 
+.zoom-enter-active,
+.zoom-leave-active {
+  transition: all 250ms;
+  filter: blur(0);
+}
+.zoom-enter,
+.zoom-leave-to {
+  opacity: 0;
+  filter: blur(20px)
+}
+
 // Buttons
 .button-group {
   display: flex;

src/store/socket.js

@@ -167,7 +167,8 @@ class LiveSession {
     }));
     this._send("gs", {
       gamestate: this._gamestate,
-      edition: this._store.state.edition
+      edition: this._store.state.edition,
+      nomination: this._store.state.session.nomination
     });
   }
 
@@ -177,9 +178,10 @@ class LiveSession {
    * @param edition
    * @private
    */
-  _updateGamestate({ gamestate, edition }) {
+  _updateGamestate({ gamestate, edition, nomination }) {
     if (!this._isSpectator) return;
     this._store.commit("setEdition", edition);
+    this._store.commit("session/nomination", nomination);
     const players = this._store.state.players.players;
     // adjust number of players
     if (players.length < gamestate.length) {