adding store methods to get role by id and roles not in json

src/store/index.js

@@ -15,9 +15,9 @@ Vue.use(Vuex);
 const getRolesByEdition = (edition = editionJSON[0]) => {
   return new Map(
     rolesJSON
-      .filter(r => r.edition === edition.id || edition.roles.includes(r.id))
+      .filter((r) => r.edition === edition.id || edition.roles.includes(r.id))
       .sort((a, b) => b.team.localeCompare(a.team))
-      .map(role => [role.id, role])
+      .map((role) => [role.id, role])
   );
 };
 
@@ -25,35 +25,57 @@ const getTravelersNotInEdition = (edition = editionJSON[0]) => {
   return new Map(
     rolesJSON
       .filter(
-        r =>
+        (r) =>
           r.team === "traveler" &&
           r.edition !== edition.id &&
           !edition.roles.includes(r.id)
       )
-      .map(role => [role.id, role])
+      .map((role) => [role.id, role])
   );
 };
 
-const set = key => ({ grimoire }, val) => {
-  grimoire[key] = val;
+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])
+  );
 };
 
-const toggle = key => ({ grimoire }, val) => {
-  if (val === true || val === false) {
+const getRoleById = (id) => {
+  return rolesJSON.find((r) => r.id === id);
+  ``;
+};
+
+const set =
+  (key) =>
+  ({ grimoire }, val) => {
     grimoire[key] = val;
-  } else {
-    grimoire[key] = !grimoire[key];
-  }
-};
+  };
 
-const clean = id => id.toLocaleLowerCase().replace(/[^a-z0-9]/g, "");
+const toggle =
+  (key) =>
+  ({ grimoire }, val) => {
+    if (val === true || val === false) {
+      grimoire[key] = val;
+    } else {
+      grimoire[key] = !grimoire[key];
+    }
+  };
+
+const clean = (id) => id.toLocaleLowerCase().replace(/[^a-z0-9]/g, "");
 
 // global data maps
 const editionJSONbyId = new Map(
-  editionJSON.map(edition => [edition.id, edition])
+  editionJSON.map((edition) => [edition.id, edition])
 );
-const rolesJSONbyId = new Map(rolesJSON.map(role => [role.id, role]));
-const fabled = new Map(fabledJSON.map(role => [role.id, role]));
+const rolesJSONbyId = new Map(rolesJSON.map((role) => [role.id, role]));
+const fabled = new Map(fabledJSON.map((role) => [role.id, role]));
 
 // jinxes
 let jinxes = {};
@@ -65,7 +87,7 @@ try {
   jinxes = new Map(
     jinxesJSON.map(({ id, hatred }) => [
       clean(id),
-      new Map(hatred.map(({ id, reason }) => [clean(id), reason]))
+      new Map(hatred.map(({ id, reason }) => [clean(id), reason])),
     ])
   );
   // });
@@ -88,13 +110,13 @@ const customRole = {
   remindersGlobal: [],
   setup: false,
   team: "townsfolk",
-  isCustom: true
+  isCustom: true,
 };
 
 export default new Vuex.Store({
   modules: {
     players,
-    session
+    session,
   },
   state: {
     grimoire: {
@@ -106,7 +128,7 @@ export default new Vuex.Store({
       isMuted: false,
       isImageOptIn: false,
       zoom: 0,
-      background: ""
+      background: "",
     },
     modals: {
       edition: false,
@@ -117,13 +139,14 @@ export default new Vuex.Store({
       reminder: false,
       role: false,
       roles: false,
-      voteHistory: false
+      voteHistory: false,
     },
     edition: editionJSONbyId.get("tb"),
     roles: getRolesByEdition(),
     otherTravelers: getTravelersNotInEdition(),
+    otherRoles: getTravelersNotInEdition(),
     fabled,
-    jinxes
+    jinxes,
   },
   getters: {
     /**
@@ -138,9 +161,9 @@ export default new Vuex.Store({
       const strippedProps = [
         "firstNightReminder",
         "otherNightReminder",
-        "isCustom"
+        "isCustom",
       ];
-      roles.forEach(role => {
+      roles.forEach((role) => {
         if (!role.isCustom) {
           customRoles.push({ id: role.id });
         } else {
@@ -159,7 +182,8 @@ export default new Vuex.Store({
       });
       return customRoles;
     },
-    rolesJSONbyId: () => rolesJSONbyId
+    rolesJSONbyId: () => rolesJSONbyId,
+    roleById: getRoleById,
   },
   mutations: {
     setZoom: set("zoom"),
@@ -188,7 +212,7 @@ export default new Vuex.Store({
     setCustomRoles(state, roles) {
       const processedRoles = roles
         // replace numerical role object keys with matching key names
-        .map(role => {
+        .map((role) => {
           if (role[0]) {
             const customKeys = Object.keys(customRole);
             const mappedRole = {};
@@ -203,19 +227,19 @@ export default new Vuex.Store({
           }
         })
         // clean up role.id
-        .map(role => {
+        .map((role) => {
           role.id = clean(role.id);
           return role;
         })
         // map existing roles to base definition or pre-populate custom roles to ensure all properties
         .map(
-          role =>
+          (role) =>
             rolesJSONbyId.get(role.id) ||
             state.roles.get(role.id) ||
             Object.assign({}, customRole, role)
         )
         // default empty icons and placeholders, clean up firstNight / otherNight
-        .map(role => {
+        .map((role) => {
           if (rolesJSONbyId.get(role.id)) return role;
           role.imageAlt = // map team to generic icon
             {
@@ -223,32 +247,36 @@ export default new Vuex.Store({
               outsider: "outsider",
               minion: "minion",
               demon: "evil",
-              fabled: "fabled"
+              fabled: "fabled",
             }[role.team] || "custom";
           role.firstNight = Math.abs(role.firstNight);
           role.otherNight = Math.abs(role.otherNight);
           return role;
         })
         // filter out roles that don't match an existing role and also don't have name/ability/team
-        .filter(role => role.name && role.ability && role.team)
+        .filter((role) => role.name && role.ability && role.team)
         // sort by team
         .sort((a, b) => b.team.localeCompare(a.team));
       // convert to Map without Fabled
       state.roles = new Map(
         processedRoles
-          .filter(role => role.team !== "fabled")
-          .map(role => [role.id, role])
+          .filter((role) => role.team !== "fabled")
+          .map((role) => [role.id, role])
       );
       // update Fabled to include custom Fabled from this script
       state.fabled = new Map([
-        ...processedRoles.filter(r => r.team === "fabled").map(r => [r.id, r]),
-        ...fabledJSON.map(role => [role.id, role])
+        ...processedRoles
+          .filter((r) => r.team === "fabled")
+          .map((r) => [r.id, r]),
+        ...fabledJSON.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])
+          .filter(
+            (r) => r.team === "traveler" && !roles.some((i) => i.id === r.id)
+          )
+          .map((role) => [role.id, role])
       );
     },
     setEdition(state, edition) {
@@ -260,7 +288,7 @@ export default new Vuex.Store({
         state.edition = edition;
       }
       state.modals.edition = false;
-    }
+    },
   },
-  plugins: [persistence, socket]
+  plugins: [persistence, socket],
 });