finished moving stuff to store

src/components/Menu.vue

@@ -232,10 +232,10 @@ export default {
       font-weight: bold;
       background: linear-gradient(
         to right,
-        $demon 0%,
+        $townsfolk 0%,
         rgba(0, 0, 0, 0.5) 20%,
         rgba(0, 0, 0, 0.5) 80%,
-        $townsfolk 100%
+        $demon 100%
       );
     }
   }

src/components/Player.vue

@@ -14,18 +14,18 @@
 
       <div
         class="night first"
-        v-if="player.firstNight && grimoire.isNightOrder"
+        v-if="nightOrder.get(player).first && grimoire.isNightOrder"
       >
-        <em>{{ player.firstNight }}.</em>
+        <em>{{ nightOrder.get(player).first }}.</em>
         <span v-if="player.role.firstNightReminder">{{
           player.role.firstNightReminder | handleEmojis
         }}</span>
       </div>
       <div
         class="night other"
-        v-if="player.otherNight && grimoire.isNightOrder"
+        v-if="nightOrder.get(player).other && grimoire.isNightOrder"
       >
-        <em>{{ player.otherNight }}.</em>
+        <em>{{ nightOrder.get(player).other }}.</em>
         <span v-if="player.role.otherNightReminder">{{
           player.role.otherNightReminder | handleEmojis
         }}</span>
@@ -72,7 +72,7 @@
 
 <script>
 import Token from "./Token";
-import { mapState } from "vuex";
+import { mapGetters, mapState } from "vuex";
 
 export default {
   components: {
@@ -84,7 +84,10 @@ export default {
       required: true
     }
   },
-  computed: mapState(["grimoire"]),
+  computed: {
+    ...mapState(["grimoire"]),
+    ...mapGetters({ nightOrder: "players/nightOrder" })
+  },
   data() {
     return {};
   },
@@ -99,23 +102,32 @@ export default {
     toggleStatus() {
       if (this.grimoire.isPublic) {
         if (!this.player.hasDied) {
-          this.$set(this.player, "hasDied", true);
+          this.updatePlayer("hasDied", true);
         } else if (this.player.hasVoted) {
-          this.$set(this.player, "hasVoted", false);
-          this.$set(this.player, "hasDied", false);
+          this.updatePlayer("hasVoted", false);
+          this.updatePlayer("hasDied", false);
         } else {
-          this.$set(this.player, "hasVoted", true);
+          this.updatePlayer("hasVoted", true);
         }
       } else {
-        this.$set(this.player, "hasDied", !this.player.hasDied);
+        this.updatePlayer("hasDied", !this.player.hasDied);
       }
     },
     changeName() {
-      const name = prompt("Player name", this.player.name);
-      this.player.name = name || this.player.name;
+      const name = prompt("Player name", this.player.name) || this.player.name;
+      this.updatePlayer("name", name);
     },
     removeReminder(reminder) {
-      this.player.reminders.splice(this.player.reminders.indexOf(reminder), 1);
+      const reminders = [...this.player.reminders];
+      reminders.splice(this.player.reminders.indexOf(reminder), 1);
+      this.updatePlayer("reminders", reminders);
+    },
+    updatePlayer(property, value) {
+      this.$store.commit("players/update", {
+        player: this.player,
+        property,
+        value
+      });
     }
   }
 };

src/components/TownSquare.vue

@@ -80,7 +80,6 @@ export default {
         )
       ) {
         this.$store.commit("players/remove", playerIndex);
-        this.$store.dispatch("players/updateNightOrder");
       }
     }
   }

src/components/modals/ReminderModal.vue

@@ -56,8 +56,12 @@ export default {
   methods: {
     addReminder(reminder) {
       const player = this.$store.state.players.players[this.playerIndex];
-      player.reminders.push(reminder);
-      this.$store.commit("players/update", { index: this.playerIndex, player });
+      const value = [...player.reminders, reminder];
+      this.$store.commit("players/update", {
+        player,
+        property: "reminders",
+        value
+      });
       this.$store.commit("toggleModal", "reminder");
     },
     ...mapMutations(["toggleModal"])

src/components/modals/RoleModal.vue

@@ -3,7 +3,7 @@
     v-show="modals.role && availableRoles.length"
     @close="toggleModal('role')"
   >
-    <h3>Choose a new character: {{playerIndex}}</h3>
+    <h3>Choose a new character: {{ playerIndex }}</h3>
     <ul class="tokens">
       <li
         v-for="role in availableRoles"
@@ -56,12 +56,11 @@ export default {
       } else {
         // assign to player
         const player = this.$store.state.players.players[this.playerIndex];
-        player.role = role;
         this.$store.commit("players/update", {
-          index: this.playerIndex,
-          player
+          player,
+          property: "role",
+          value: role
         });
-        this.$store.dispatch("players/updateNightOrder");
       }
       this.$store.commit("toggleModal", "role");
     },

src/components/modals/RolesModal.vue

@@ -114,13 +114,16 @@ export default {
           .map(a => [Math.random(), a])
           .sort((a, b) => a[0] - b[0])
           .map(a => a[1]);
-        this.players.forEach((player, index) => {
+        this.players.forEach(player => {
           if (player.role.team !== "traveler" && roles.length) {
-            player.role = roles.pop();
-            this.$store.commit("players/update", { index, player });
+            const value = roles.pop();
+            this.$store.commit("players/update", {
+              player,
+              property: "role",
+              value
+            });
           }
         });
-        this.$store.dispatch("players/updateNightOrder");
         this.$store.commit("toggleModal", "roles");
       }
     },

src/store/modules/players.js

@@ -2,9 +2,7 @@ const NEWPLAYER = {
   role: {},
   reminders: [],
   hasVoted: false,
-  hasDied: false,
-  firstNight: 0,
-  otherNight: 0
+  hasDied: false
 };
 
 const state = () => ({
@@ -17,15 +15,12 @@ const getters = {
       player => player.role.team !== "traveler"
     );
     return Math.min(nonTravelers.length, 15);
-  }
-};
-
-const actions = {
-  // recalculate night order for all players
-  updateNightOrder({ state, commit }) {
+  },
+  // calculate a Map of player => night order
+  nightOrder({ players }) {
     const firstNight = [0];
     const otherNight = [0];
-    state.players.forEach(({ role }) => {
+    players.forEach(({ role }) => {
       if (role.firstNight && !firstNight.includes(role.firstNight)) {
         firstNight.push(role.firstNight);
       }
@@ -35,17 +30,17 @@ const actions = {
     });
     firstNight.sort((a, b) => a - b);
     otherNight.sort((a, b) => a - b);
-    state.players.forEach((player, index) => {
+    const nightOrder = new Map();
+    players.forEach(player => {
       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("update", { index, player });
-        console.log("updated night order for player", player.name);
-      }
+      nightOrder.set(player, { first, other });
     });
-  },
+    return nightOrder;
+  }
+};
+
+const actions = {
   randomize({ state, commit }) {
     const players = state.players
       .map(a => [Math.random(), a])
@@ -69,8 +64,11 @@ const mutations = {
   set(state, players = []) {
     state.players = players;
   },
-  update(state, { index, player }) {
-    state.players[index] = player;
+  update(state, { player, property, value }) {
+    const index = state.players.indexOf(player);
+    if (index >= 0) {
+      state.players[index][property] = value;
+    }
   },
   add(state, name) {
     state.players.push({

src/store/persistence.js

@@ -26,8 +26,6 @@ module.exports = store => {
         role: store.state.roles.get(player.role) || {}
       }))
     );
-    // recalculate night order
-    store.dispatch("players/updateNightOrder");
   }
 
   // listen to mutations
@@ -68,9 +66,7 @@ module.exports = store => {
               state.players.players.map(player => ({
                 ...player,
                 // simplify the stored data
-                role: player.role.id || {},
-                firstNight: undefined,
-                otherNight: undefined
+                role: player.role.id || {}
               }))
             )
           );
@@ -79,6 +75,5 @@ module.exports = store => {
         }
         break;
     }
-    console.log("persistance", type, payload);
   });
 };