Merge pull request #91 from davotronic5000/#52_other_edition_travelers

#52 other edition travelers

src/components/modals/ReminderModal.vue

@@ -82,6 +82,21 @@ export default {
           }))
         ];
       });
+
+      // add out of script traveler reminders
+      this.$store.state.otherTravelers.forEach(role => {
+        if (players.some(p => p.role.id === role.id)) {
+          reminders = [
+            ...reminders,
+            ...role.reminders.map(name => ({
+              role: role.id,
+              image: role.image,
+              name
+            }))
+          ];
+        }
+      });
+
       reminders.push({ role: "good", name: "Good" });
       reminders.push({ role: "evil", name: "Evil" });
       reminders.push({ role: "custom", name: "Custom note" });

src/components/modals/RoleModal.vue

@@ -1,8 +1,5 @@
 <template>
-  <Modal
+  <Modal v-if="modals.role && availableRoles.length" @close="close">
-    v-if="modals.role && availableRoles.length"
-    @close="toggleModal('role')"
-  >
     <h3>
       Choose a new character for
       {{
@@ -11,7 +8,7 @@
           : "bluffing"
       }}
     </h3>
-    <ul class="tokens">
+    <ul class="tokens" v-if="tab === 'editionRoles' || !otherTravelers.size">
       <li
         v-for="role in availableRoles"
         :class="[role.team]"
@@ -21,6 +18,33 @@
         <Token :role="role" />
       </li>
     </ul>
+    <ul class="tokens" v-if="tab === 'otherTravelers' && otherTravelers.size">
+      <li
+        v-for="role in otherTravelers.values()"
+        :class="[role.team]"
+        :key="role.id"
+        @click="setRole(role)"
+      >
+        <Token :role="role" />
+      </li>
+    </ul>
+    <div
+      class="button-group"
+      v-if="playerIndex >= 0 && otherTravelers.size && !session.isSpectator"
+    >
+      <span
+        class="button"
+        :class="{ townsfolk: tab === 'editionRoles' }"
+        @click="tab = 'editionRoles'"
+        >Edtition Roles</span
+      >
+      <span
+        class="button"
+        :class="{ townsfolk: tab === 'otherTravelers' }"
+        @click="tab = 'otherTravelers'"
+        >Other Travelers</span
+      >
+    </div>
   </Modal>
 </template>
 
@@ -50,7 +74,13 @@ export default {
       return availableRoles;
     },
     ...mapState(["modals", "roles", "session"]),
-    ...mapState("players", ["players"])
+    ...mapState("players", ["players"]),
+    ...mapState(["otherTravelers"])
+  },
+  data() {
+    return {
+      tab: "editionRoles"
+    };
   },
   methods: {
     setRole(role) {
@@ -72,6 +102,10 @@ export default {
       }
       this.$store.commit("toggleModal", "role");
     },
+    close() {
+      this.tab = "editionRoles";
+      this.toggleModal("role");
+    },
     ...mapMutations(["toggleModal"])
   }
 };

src/store/index.js

@@ -25,6 +25,19 @@ const getRolesByEdition = (edition = editionJSON[0]) => {
   );
 };
 
+const getTravelersNotInEdition = (edition = editionJSON[0]) => {
+  return new Map(
+    rolesJSON
+      .filter(
+        r =>
+          r.team === "traveler" &&
+          r.edition !== edition.id &&
+          !edition.roles.includes(r.id)
+      )
+      .map(role => [role.id, role])
+  );
+};
+
 // base definition for custom roles
 const imageBase =
   "https://raw.githubusercontent.com/bra1n/townsquare/main/src/assets/icons/";
@@ -70,6 +83,7 @@ export default new Vuex.Store({
     },
     edition: editionJSONbyId.get("tb"),
     roles: getRolesByEdition(),
+    otherTravelers: getTravelersNotInEdition(),
     fabled
   },
   getters: {
@@ -180,11 +194,18 @@ export default new Vuex.Store({
           // convert to Map
           .map(role => [role.id, role])
       );
+      // update extraTravelers map to only show travelers not in this script
+      state.otherTravelers = new Map(
+        rolesJSON
+          .filter(r => r.team === "traveler" && !roles.some(i => i.id === r.id))
+          .map(role => [role.id, role])
+      );
     },
     setEdition(state, edition) {
       if (editionJSONbyId.has(edition.id)) {
         state.edition = editionJSONbyId.get(edition.id);
         state.roles = getRolesByEdition(state.edition);
+        state.otherTravelers = getTravelersNotInEdition(state.edition);
       } else {
         state.edition = edition;
       }