adding search to role modal to find off script characters

src/App.vue

@@ -97,7 +97,7 @@ export default {
   },
   methods: {
     keyup({ key, ctrlKey, metaKey }) {
-      if (ctrlKey || metaKey) return;
+      if (ctrlKey || metaKey || true) return;
       switch (key.toLocaleLowerCase()) {
         case "g":
           this.$store.commit("toggleGrimoire");

src/components/modals/RoleModal.vue

@@ -8,7 +8,26 @@
           : "bluffing"
       }}
     </h3>
-    <ul class="tokens" v-if="tab === 'editionRoles' || !otherTravelers.size">
+    <div
+      v-if="fabled.find((r) => r.id === 'plusone') && tab === 'editionRoles'"
+    >
+      <span>Find a Plus One character: </span>
+      <input type="text" v-model="filter" />
+    </div>
+    <ul class="tokens" v-if="filteredRoles.length > 0">
+      <li
+        v-for="role in filteredRoles.slice(0, 10)"
+        @class="[role.team]"
+        :key="role.id"
+        @click="setRole(role)"
+      >
+        <token :role="role" />
+      </li>
+    </ul>
+    <ul
+      class="tokens"
+      v-if="tab === 'editionRoles' || !otherTravelers.length > 0"
+    >
       <li
         v-for="role in availableRoles"
         :class="[role.team]"
@@ -18,9 +37,12 @@
         <Token :role="role" />
       </li>
     </ul>
-    <ul class="tokens" v-if="tab === 'otherTravelers' && otherTravelers.size">
+    <ul
+      class="tokens"
+      v-if="tab === 'otherTravelers' && otherTravelers.length > 0"
+    >
       <li
-        v-for="role in otherTravelers.values()"
+        v-for="role in otherTravelers"
         :class="[role.team]"
         :key="role.id"
         @click="setRole(role)"
@@ -30,7 +52,9 @@
     </ul>
     <div
       class="button-group"
-      v-if="playerIndex >= 0 && otherTravelers.size && !session.isSpectator"
+      v-if="
+        playerIndex >= 0 && otherTravelers.length > 0 && !session.isSpectator
+      "
     >
       <span
         class="button"
@@ -57,15 +81,25 @@ export default {
   components: { Token, Modal },
   props: ["playerIndex"],
   computed: {
+    filteredRoles() {
+      if (this.filter === "") {
+        return [];
+      }
+      var filteredRoles = this.otherRoles.filter((role) => {
+        return role.name.toLowerCase().includes(this.filter.toLowerCase());
+      });
+      console.log(filteredRoles);
+      return filteredRoles;
+    },
     availableRoles() {
       const availableRoles = [];
       const players = this.$store.state.players.players;
-      this.$store.state.roles.forEach(role => {
+      this.$store.state.roles.forEach((role) => {
         // don't show bluff roles that are already assigned to players
         if (
           this.playerIndex >= 0 ||
           (this.playerIndex < 0 &&
-            !players.some(player => player.role.id === role.id))
+            !players.some((player) => player.role.id === role.id))
         ) {
           availableRoles.push(role);
         }
@@ -74,12 +108,14 @@ export default {
       return availableRoles;
     },
     ...mapState(["modals", "roles", "session"]),
-    ...mapState("players", ["players"]),
-    ...mapState(["otherTravelers"])
+    ...mapState("players", ["players", "fabled"]),
+    ...mapState(["otherTravelers"]),
+    ...mapState(["otherRoles"]),
   },
   data() {
     return {
-      tab: "editionRoles"
+      tab: "editionRoles",
+      filter: "",
     };
   },
   methods: {
@@ -88,7 +124,7 @@ export default {
         // assign to bluff slot (index < 0)
         this.$store.commit("players/setBluff", {
           index: this.playerIndex * -1 - 1,
-          role
+          role,
         });
       } else {
         if (this.session.isSpectator && role.team === "traveler") return;
@@ -97,7 +133,7 @@ export default {
         this.$store.commit("players/update", {
           player,
           property: "role",
-          value: role
+          value: role,
         });
       }
       this.tab = "editionRoles";
@@ -107,8 +143,8 @@ export default {
       this.tab = "editionRoles";
       this.toggleModal("role");
     },
-    ...mapMutations(["toggleModal"])
-  }
+    ...mapMutations(["toggleModal"]),
+  },
 };
 </script>
 

src/store/index.js

@@ -22,28 +22,20 @@ 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])
+  return rolesJSON.filter(
+    (r) =>
+      r.team === "traveler" &&
+      r.edition !== edition.id &&
+      !edition.roles.includes(r.id)
   );
 };
 
 const getRolesNotInEdition = (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.name])
+  return rolesJSON.filter(
+    (r) =>
+      r.team !== "traveler" &&
+      r.edition !== edition.id &&
+      !edition.roles.includes(r.id)
   );
 };
 
@@ -144,7 +136,7 @@ export default new Vuex.Store({
     edition: editionJSONbyId.get("tb"),
     roles: getRolesByEdition(),
     otherTravelers: getTravelersNotInEdition(),
-    otherRoles: getTravelersNotInEdition(),
+    otherRoles: getRolesNotInEdition(),
     fabled,
     jinxes,
   },
@@ -284,6 +276,7 @@ export default new Vuex.Store({
         state.edition = editionJSONbyId.get(edition.id);
         state.roles = getRolesByEdition(state.edition);
         state.otherTravelers = getTravelersNotInEdition(state.edition);
+        state.otherRoles = getRolesNotInEdition(state.edition);
       } else {
         state.edition = edition;
       }