modularized session

src/components/Menu.vue

@@ -106,10 +106,10 @@
             <em>[C]</em>
             Choose & Assign
           </li>
+        </template>
         <li @click="clearRoles" v-if="players.length">
           Remove all
         </li>
-        </template>
       </ul>
     </div>
   </div>
@@ -144,9 +144,9 @@ export default {
         Math.round(Math.random() * 10000)
       );
       if (sessionId) {
-        this.$store.commit("setSpectator", false);
+        this.$store.commit("session/setSpectator", false);
         this.$store.commit(
-          "setSessionId",
+          "session/setSessionId",
           sessionId.replace(/[^0-9a-z]/g, "").substr(0, 5)
         );
         this.copySessionUrl();
@@ -169,17 +169,17 @@ export default {
         "Enter the channel number / name of the session you want to join"
       );
       if (sessionId) {
-        this.$store.commit("setSpectator", true);
+        this.$store.commit("session/setSpectator", true);
         this.$store.commit(
-          "setSessionId",
+          "session/setSessionId",
           sessionId.replace(/[^0-9a-z]/g, "").substr(0, 5)
         );
       }
     },
     leaveSession() {
       if (confirm("Are you sure you want to leave the active live game?")) {
-        this.$store.commit("setSpectator", false);
+        this.$store.commit("session/setSpectator", false);
-        this.$store.commit("setSessionId", "");
+        this.$store.commit("session/setSessionId", "");
       }
     },
     addPlayer() {
@@ -203,7 +203,6 @@ export default {
       }
     },
     clearRoles() {
-      if (this.session.isSpectator) return;
       if (confirm("Are you sure you want to remove all player roles?")) {
         this.$store.dispatch("players/clearRoles");
         this.$store.commit("setBluff");

src/components/Player.vue

@@ -69,7 +69,8 @@
       </div>
 
       <transition name="fold">
-        <ul class="menu" v-if="isMenuOpen && !session.isSpectator">
+        <ul class="menu" v-if="isMenuOpen">
+          <template v-if="!session.isSpectator">
             <li @click="changeName">
               <font-awesome-icon icon="user-edit" />Rename
             </li>
@@ -93,6 +94,10 @@
               <font-awesome-icon icon="times-circle" />
               Remove
             </li>
+          </template>
+          <li @click="claimSeat" v-if="session.isSpectator">
+            <font-awesome-icon icon="chair" /> Claim seat
+          </li>
         </ul>
       </transition>
     </div>

src/main.js

@@ -30,7 +30,8 @@ const faIcons = [
   "UserEdit",
   "UserFriends",
   "Users",
-  "VoteYea"
+  "VoteYea",
+  "Chair"
 ];
 library.add(...faIcons.map(i => fas["fa" + i]));
 Vue.component("font-awesome-icon", FontAwesomeIcon);

src/store/index.js

@@ -1,8 +1,9 @@
 import Vue from "vue";
 import Vuex from "vuex";
 import persistence from "./persistence";
-import session from "./session";
+import socket from "./socket";
 import players from "./modules/players";
+import session from "./modules/session";
 import editionJSON from "../editions.json";
 import rolesJSON from "../roles.json";
 
@@ -23,7 +24,8 @@ const getRolesByEdition = (edition = "tb") => {
 
 export default new Vuex.Store({
   modules: {
-    players
+    players,
+    session
   },
   state: {
     grimoire: {
@@ -36,12 +38,6 @@ export default new Vuex.Store({
       background: "",
       bluffs: []
     },
-    session: {
-      sessionId: "",
-      isSpectator: false,
-      playerCount: 0,
-      playerId: ""
-    },
     modals: {
       reference: false,
       edition: false,
@@ -75,18 +71,6 @@ export default new Vuex.Store({
     setBackground({ grimoire }, background) {
       grimoire.background = background;
     },
-    setSessionId({ session }, sessionId) {
-      session.sessionId = sessionId;
-    },
-    setPlayerId({ session }, playerId) {
-      session.playerId = playerId;
-    },
-    setSpectator({ session }, spectator) {
-      session.isSpectator = spectator;
-    },
-    setPlayerCount({ session }, playerCount) {
-      session.playerCount = playerCount;
-    },
     setBluff({ grimoire }, { index, role } = {}) {
       if (index !== undefined) {
         grimoire.bluffs.splice(index, 1, role);
@@ -128,5 +112,5 @@ export default new Vuex.Store({
       }
     }
   },
-  plugins: [persistence, session]
+  plugins: [persistence, socket]
 });

src/store/modules/players.js

@@ -48,11 +48,23 @@ const actions = {
       .map(a => a[1]);
     commit("set", players);
   },
-  clearRoles({ state, commit }) {
+  clearRoles({ state, commit, rootState }) {
-    const players = state.players.map(({ name }) => ({
+    let players;
+    if (rootState.session.isSpectator) {
+      players = state.players.map(player => {
+        if (player.role.team !== "traveler") {
+          player.role = {};
+        }
+        player.reminders = [];
+        return player;
+      });
+    } else {
+      players = state.players.map(({ name, id }) => ({
         name,
+        id,
         ...NEWPLAYER
       }));
+    }
     commit("set", players);
   }
 };

src/store/modules/session.js

@@ -0,0 +1,34 @@
+const state = () => ({
+  sessionId: "",
+  isSpectator: false,
+  playerCount: 0,
+  playerId: "",
+  claimedSeat: -1
+});
+
+const getters = {};
+
+const actions = {};
+
+const mutations = {
+  setSessionId(state, sessionId) {
+    state.sessionId = sessionId;
+  },
+  setPlayerId(state, playerId) {
+    state.playerId = playerId;
+  },
+  setSpectator(state, spectator) {
+    state.isSpectator = spectator;
+  },
+  setPlayerCount(state, playerCount) {
+    state.playerCount = playerCount;
+  }
+};
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  actions,
+  mutations
+};

src/store/persistence.js

@@ -32,12 +32,12 @@ module.exports = store => {
   }
   /**** Session related data *****/
   if (localStorage.getItem("playerId")) {
-    store.commit("setPlayerId", localStorage.getItem("playerId"));
+    store.commit("session/setPlayerId", localStorage.getItem("playerId"));
   }
   if (localStorage.getItem("session")) {
     const [spectator, sessionId] = JSON.parse(localStorage.getItem("session"));
-    store.commit("setSpectator", spectator);
+    store.commit("session/setSpectator", spectator);
-    store.commit("setSessionId", sessionId);
+    store.commit("session/setSessionId", sessionId);
   }
 
   // listen to mutations
@@ -99,7 +99,7 @@ module.exports = store => {
           localStorage.removeItem("players");
         }
         break;
-      case "setSessionId":
+      case "session/setSessionId":
         if (payload) {
           localStorage.setItem(
             "session",
@@ -109,11 +109,11 @@ module.exports = store => {
           localStorage.removeItem("session");
         }
         break;
-      case "setPlayerId":
+      case "session/setPlayerId":
         if (payload) {
           localStorage.setItem("playerId", payload);
         } else {
-          localStorage.removeItem("setPlayerId");
+          localStorage.removeItem("playerId");
         }
         break;
     }

src/store/socket.js

@@ -27,7 +27,7 @@ class LiveSession {
     this._socket.onopen = this._onOpen.bind(this);
     this._socket.onclose = () => {
       this._socket = null;
-      this._store.commit("setSessionId", "");
+      this._store.commit("session/setSessionId", "");
       clearInterval(this._pingTimer);
       this._pingTimer = null;
     };
@@ -110,13 +110,13 @@ class LiveSession {
   connect(channel) {
     if (!this._store.state.session.playerId) {
       this._store.commit(
-        "setPlayerId",
+        "session/setPlayerId",
         Math.random()
           .toString(36)
           .substr(2)
       );
     }
-    this._store.commit("setPlayerCount", 0);
+    this._store.commit("session/setPlayerCount", 0);
     this._isSpectator = this._store.state.session.isSpectator;
     this._open(channel);
   }
@@ -125,7 +125,7 @@ class LiveSession {
    * Close the current session, if any.
    */
   disconnect() {
-    this._store.commit("setPlayerCount", 0);
+    this._store.commit("session/setPlayerCount", 0);
     if (this._socket) {
       this._send("bye", this._store.state.session.playerId);
       this._socket.close();
@@ -140,6 +140,7 @@ class LiveSession {
     if (this._isSpectator) return;
     this._gamestate = this._store.state.players.players.map(player => ({
       name: player.name,
+      id: player.id,
       isDead: player.isDead,
       isVoteless: player.isVoteless,
       ...(player.role && player.role.team === "traveler"
@@ -181,28 +182,15 @@ class LiveSession {
     // update status for each player
     gamestate.forEach((state, x) => {
       const player = players[x];
-      const { name, isDead, isVoteless, role } = state;
+      const { role } = state;
-      if (player.name !== name) {
+      // update relevant properties
-        this._store.commit("players/update", {
+      ["name", "id", "isDead", "isVoteless"].forEach(property => {
-          player,
+        const value = state[property];
-          property: "name",
+        if (player[property] !== value) {
-          value: name
+          this._store.commit("players/update", { player, property, value });
-        });
         }
-      if (player.isDead !== isDead) {
-        this._store.commit("players/update", {
-          player,
-          property: "isDead",
-          value: isDead
       });
-      }
+      // roles are special, because of travelers
-      if (player.isVoteless !== isVoteless) {
-        this._store.commit("players/update", {
-          player,
-          property: "isVoteless",
-          value: isVoteless
-        });
-      }
       if (role && player.role.id !== role.id) {
         this._store.commit("players/update", {
           player,
@@ -298,7 +286,10 @@ class LiveSession {
         delete this._players[player];
       }
     }
-    this._store.commit("setPlayerCount", Object.keys(this._players).length);
+    this._store.commit(
+      "session/setPlayerCount",
+      Object.keys(this._players).length
+    );
   }
 
   /**
@@ -308,7 +299,10 @@ class LiveSession {
    */
   _handleBye(playerId) {
     delete this._players[playerId];
-    this._store.commit("setPlayerCount", Object.keys(this._players).length);
+    this._store.commit(
+      "session/setPlayerCount",
+      Object.keys(this._players).length
+    );
   }
 }
 
@@ -319,7 +313,7 @@ module.exports = store => {
   // listen to mutations
   store.subscribe(({ type, payload }) => {
     switch (type) {
-      case "setSessionId":
+      case "session/setSessionId":
         if (payload) {
           session.connect(payload);
         } else {
@@ -345,7 +339,7 @@ module.exports = store => {
   // check for session Id in hash
   const [command, param] = window.location.hash.substr(1).split("/");
   if (command === "play") {
-    store.commit("setSpectator", true);
+    store.commit("session/setSpectator", true);
-    store.commit("setSessionId", param);
+    store.commit("session/setSessionId", param);
   }
 };