basic player store

src/App.vue

@@ -37,11 +37,12 @@ export default {
     TownInfo,
     RoleSelectionModal
   },
-  computed: mapState(["grimoire"]),
+  computed: mapState({
+    grimoire: state => state.grimoire,
+    players: state => state.players.players
+  }),
   data: function() {
-    return {
-      players: []
-    };
+    return {};
   },
   methods: {
     takeScreenshot(dimensions) {
@@ -68,49 +69,6 @@ export default {
           this.$store.commit("toggleMenu");
       }
     }
-  },
-  mounted() {
-    if (localStorage.players) {
-      this.players = JSON.parse(localStorage.players).map(player => ({
-        ...player,
-        role: this.$store.state.roles.get(player.role) || {}
-      }));
-    }
-  },
-  watch: {
-    players: {
-      handler(newPlayers) {
-        const firstNight = [0];
-        const otherNight = [0];
-        newPlayers.forEach(({ role }) => {
-          if (role.firstNight && !firstNight.includes(role.firstNight)) {
-            firstNight.push(role.firstNight);
-          }
-          if (role.otherNight && !otherNight.includes(role.otherNight)) {
-            otherNight.push(role.otherNight);
-          }
-        });
-        firstNight.sort((a, b) => a - b);
-        otherNight.sort((a, b) => a - b);
-        newPlayers.forEach(player => {
-          player.firstNight = Math.max(
-            firstNight.indexOf(player.role.firstNight),
-            0
-          );
-          player.otherNight = Math.max(
-            otherNight.indexOf(player.role.otherNight),
-            0
-          );
-        });
-        localStorage.players = JSON.stringify(
-          newPlayers.map(player => ({
-            ...player,
-            role: player.role.id || {}
-          }))
-        );
-      },
-      deep: true
-    }
   }
 };
 </script>

src/store/index.js

@@ -1,6 +1,7 @@
 import Vue from "vue";
 import Vuex from "vuex";
 import persistence from "./persistence";
+import players from "./modules/players";
 import editionJSON from "../editions.json";
 import rolesJSON from "../roles.json";
 
@@ -20,6 +21,9 @@ const getRolesByEdition = (edition = "tb") => {
 };
 
 export default new Vuex.Store({
+  modules: {
+    players
+  },
   state: {
     grimoire: {
       isNightOrder: true,
@@ -35,8 +39,7 @@ export default new Vuex.Store({
       roles: false
     },
     edition: "tb",
-    roles: getRolesByEdition(),
-    players: []
+    roles: getRolesByEdition()
   },
   mutations: {
     toggleMenu({ grimoire }) {

src/store/modules/players.js

@@ -0,0 +1,56 @@
+const state = () => ({
+  players: []
+});
+const getters = {};
+const actions = {
+  // recalculate night order for all players
+  updateNightOrder({ state, commit }) {
+    const firstNight = [0];
+    const otherNight = [0];
+    state.players.forEach(({ role }) => {
+      if (role.firstNight && !firstNight.includes(role.firstNight)) {
+        firstNight.push(role.firstNight);
+      }
+      if (role.otherNight && !otherNight.includes(role.otherNight)) {
+        otherNight.push(role.otherNight);
+      }
+    });
+    firstNight.sort((a, b) => a - b);
+    otherNight.sort((a, b) => a - b);
+    state.players.forEach((player, index) => {
+      const first = Math.max(firstNight.indexOf(player.role.firstNight), 0);
+      const other = Math.max(otherNight.indexOf(player.role.otherNight), 0);
+      if (player.firstNight !== first || player.otherNight !== other) {
+        player.firstNight = first;
+        player.otherNight = other;
+        commit("updatePlayer", index, player);
+      }
+    });
+  }
+};
+const mutations = {
+  setPlayers(state, players = []) {
+    state.players = players;
+  },
+  updatePlayer(state, index, player) {
+    state.players[index] = player;
+  },
+  addPlayer(state, name) {
+    state.players.push({
+      name,
+      role: {},
+      reminders: []
+    });
+  },
+  removePlayer(state, index) {
+    state.players.splice(index, 1);
+  }
+};
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  actions,
+  mutations
+};

src/store/persistence.js

@@ -1,4 +1,5 @@
 module.exports = store => {
+  // initialize data
   if (localStorage.background !== undefined) {
     store.commit("setBackground", localStorage.background);
   }
@@ -8,7 +9,17 @@ module.exports = store => {
   if (localStorage.edition !== undefined) {
     store.commit("setEdition", localStorage.edition);
   }
+  if (localStorage.players) {
+    store.commit(
+      "players/setPlayers",
+      JSON.parse(localStorage.players).map(player => ({
+        ...player,
+        role: store.state.roles.get(player.role) || {}
+      }))
+    );
+  }
 
+  // listen to mutations
   store.subscribe(({ type, payload }, state) => {
     switch (type) {
       case "toggleGrimoire":
@@ -28,6 +39,19 @@ module.exports = store => {
       case "setEdition":
         localStorage.setItem("edition", payload);
         break;
+      case "addPlayer":
+      case "updatePlayer":
+      case "removePlayer":
+        localStorage.setItem(
+          "players",
+          JSON.stringify(
+            state.players.players.map(player => ({
+              ...player,
+              role: player.role.id || {}
+            }))
+          )
+        );
+        break;
     }
     console.log(type, payload);
   });