show generic icons for custom roles and opt out players

src/components/Player.vue

@@ -23,7 +23,7 @@
       >
         <em>{{ nightOrder.get(player).first }}.</em>
         <span v-if="player.role.firstNightReminder">{{
-          player.role.firstNightReminder | handleEmojis
+          player.role.firstNightReminder
         }}</span>
       </div>
       <div
@@ -32,7 +32,7 @@
       >
         <em>{{ nightOrder.get(player).other }}.</em>
         <span v-if="player.role.otherNightReminder">{{
-          player.role.otherNightReminder | handleEmojis
+          player.role.otherNightReminder
         }}</span>
       </div>
 
@@ -165,8 +165,13 @@
         <span
           class="icon"
           :style="{
-            backgroundImage: `url(${reminder.image ||
+            backgroundImage: `url(${
-              require('../assets/icons/' + reminder.role + '.png')})`
+              reminder.image && grimoire.isImageOptIn
+                ? reminder.image
+                : require('../assets/icons/' +
+                    (reminder.imageAlt || reminder.role) +
+                    '.png')
+            })`
           }"
         ></span>
         <span class="text">{{ reminder.name }}</span>
@@ -226,9 +231,6 @@ export default {
       isSwap: false
     };
   },
-  filters: {
-    handleEmojis: text => text.replace(/:([^: ]+?):/g, "").replace(/ •/g, "\n•")
-  },
   methods: {
     toggleStatus() {
       if (this.grimoire.isPublic) {

src/components/Token.vue

@@ -4,8 +4,11 @@
       class="icon"
       v-if="role.id"
       :style="{
-        backgroundImage: `url(${role.image ||
+        backgroundImage: `url(${
-          require('../assets/icons/' + role.id + '.png')})`
+          role.image && grimoire.isImageOptIn
+            ? role.image
+            : require('../assets/icons/' + (role.imageAlt || role.id) + '.png')
+        })`
       }"
     ></span>
     <span
@@ -47,6 +50,8 @@
 </template>
 
 <script>
+import { mapState } from "vuex";
+
 export default {
   name: "Token",
   props: {
@@ -55,6 +60,9 @@ export default {
       default: () => ({})
     }
   },
+  computed: {
+    ...mapState(["grimoire"])
+  },
   data() {
     return {};
   },

src/components/modals/NightOrderModal.vue

@@ -41,8 +41,13 @@
             class="icon"
             v-if="role.id"
             :style="{
-              backgroundImage: `url(${role.image ||
+              backgroundImage: `url(${
-                require('../../assets/icons/' + role.id + '.png')})`
+                role.image && grimoire.isImageOptIn
+                  ? role.image
+                  : require('../../assets/icons/' +
+                      (role.imageAlt || role.id) +
+                      '.png')
+              })`
             }"
           ></span>
         </li>
@@ -58,8 +63,13 @@
             class="icon"
             v-if="role.id"
             :style="{
-              backgroundImage: `url(${role.image ||
+              backgroundImage: `url(${
-                require('../../assets/icons/' + role.id + '.png')})`
+                role.image && grimoire.isImageOptIn
+                  ? role.image
+                  : require('../../assets/icons/' +
+                      (role.imageAlt || role.id) +
+                      '.png')
+              })`
             }"
           ></span>
           <span class="name">

src/components/modals/ReferenceModal.vue

@@ -34,8 +34,13 @@
             class="icon"
             v-if="role.id"
             :style="{
-              backgroundImage: `url(${role.image ||
+              backgroundImage: `url(${
-                require('../../assets/icons/' + role.id + '.png')})`
+                role.image && grimoire.isImageOptIn
+                  ? role.image
+                  : require('../../assets/icons/' +
+                      (role.imageAlt || role.id) +
+                      '.png')
+              })`
             }"
           ></span>
           <span class="ability">{{ role.ability }}</span>
@@ -80,7 +85,7 @@ export default {
       });
       return players;
     },
-    ...mapState(["roles", "modals", "edition"]),
+    ...mapState(["roles", "modals", "edition", "grimoire"]),
     ...mapState("players", ["players"])
   },
   methods: {

src/components/modals/ReminderModal.vue

@@ -15,8 +15,13 @@
         <span
           class="icon"
           :style="{
-            backgroundImage: `url(${reminder.image ||
+            backgroundImage: `url(${
-              require('../../assets/icons/' + reminder.role + '.png')})`
+              reminder.image && grimoire.isImageOptIn
+                ? reminder.image
+                : require('../../assets/icons/' +
+                    (reminder.imageAlt || reminder.role) +
+                    '.png')
+            })`
           }"
         ></span>
         <span class="text">{{ reminder.name }}</span>
@@ -29,6 +34,18 @@
 import Modal from "./Modal";
 import { mapMutations, mapState } from "vuex";
 
+/**
+ * Helper function that maps a reminder name with a role-based object that provides necessary visual data.
+ * @param role The role for which the reminder should be generated
+ * @return {function(*): {image: string|string[]|string|*, role: *, name: *, imageAlt: string|*}}
+ */
+const mapReminder = ({ id, image, imageAlt }) => name => ({
+  role: id,
+  image,
+  imageAlt,
+  name
+});
+
 export default {
   components: { Modal },
   props: ["playerIndex"],
@@ -39,61 +56,29 @@ export default {
       this.$store.state.roles.forEach(role => {
         // add reminders from player roles
         if (players.some(p => p.role.id === role.id)) {
-          reminders = [
+          reminders = [...reminders, ...role.reminders.map(mapReminder(role))];
-            ...reminders,
-            ...role.reminders.map(name => ({
-              role: role.id,
-              image: role.image,
-              name
-            }))
-          ];
         }
         // add reminders from bluff/other roles
         else if (bluffs.some(bluff => bluff.id === role.id)) {
-          reminders = [
+          reminders = [...reminders, ...role.reminders.map(mapReminder(role))];
-            ...reminders,
-            ...role.reminders.map(name => ({
-              role: role.id,
-              image: role.image,
-              name
-            }))
-          ];
         }
         // add global reminders
         if (role.remindersGlobal && role.remindersGlobal.length) {
           reminders = [
             ...reminders,
-            ...role.remindersGlobal.map(name => ({
+            ...role.remindersGlobal.map(mapReminder(role))
-              role: role.id,
-              image: role.image,
-              name
-            }))
           ];
         }
       });
       // add fabled reminders
       this.$store.state.players.fabled.forEach(role => {
-        reminders = [
+        reminders = [...reminders, ...role.reminders.map(mapReminder(role))];
-          ...reminders,
-          ...role.reminders.map(name => ({
-            role: role.id,
-            image: role.image,
-            name
-          }))
-        ];
       });
 
       // add out of script traveler reminders
       this.$store.state.otherTravelers.forEach(role => {
         if (players.some(p => p.role.id === role.id)) {
-          reminders = [
+          reminders = [...reminders, ...role.reminders.map(mapReminder(role))];
-            ...reminders,
-            ...role.reminders.map(name => ({
-              role: role.id,
-              image: role.image,
-              name
-            }))
-          ];
         }
       });
 
@@ -102,7 +87,7 @@ export default {
       reminders.push({ role: "custom", name: "Custom note" });
       return reminders;
     },
-    ...mapState(["modals"]),
+    ...mapState(["modals", "grimoire"]),
     ...mapState("players", ["players"])
   },
   methods: {

src/store/index.js

@@ -53,10 +53,11 @@ const toggle = key => ({ grimoire }, val) => {
 };
 
 // base definition for custom roles
-const imageBase =
-  "https://raw.githubusercontent.com/bra1n/townsquare/main/src/assets/icons/";
 const customRole = {
+  id: "",
+  name: "",
   image: "",
+  ability: "",
   edition: "custom",
   firstNight: 0,
   firstNightReminder: "",
@@ -109,7 +110,11 @@ export default new Vuex.Store({
      */
     customRolesStripped: ({ roles }) => {
       const customRoles = [];
-      const strippedProps = ["firstNightReminder", "otherNightReminder"]
+      const strippedProps = [
+        "firstNightReminder",
+        "otherNightReminder",
+        "isCustom"
+      ];
       roles.forEach(role => {
         if (!role.isCustom) {
           customRoles.push({ id: role.id });
@@ -120,7 +125,10 @@ export default new Vuex.Store({
               continue;
             }
             const value = role[prop];
-            if (prop !== "isCustom" && value !== customRole[prop]) {
+            if (
+              Object.keys(customRole).includes(prop) &&
+              value !== customRole[prop]
+            ) {
               strippedRole[prop] = value;
             }
           }
@@ -164,16 +172,16 @@ export default new Vuex.Store({
               state.roles.get(role.id) ||
               Object.assign({}, customRole, role)
           )
-          // default empty icons to good / evil / traveler
+          // default empty icons and placeholders
           .map(role => {
             if (rolesJSONbyId.get(role.id)) return role;
-            if (role.team === "townsfolk" || role.team === "outsider") {
+            role.imageAlt = // map team to generic icon
-              role.image = role.image || imageBase + "good.png";
+              {
-            } else if (role.team === "demon" || role.team === "minion") {
+                townsfolk: "good",
-              role.image = role.image || imageBase + "evil.png";
+                outsider: "outsider",
-            } else {
+                minion: "minion",
-              role.image = role.image || imageBase + "custom.png";
+                demon: "evil"
-            }
+              }[role.team] || "custom";
             return role;
           })
           // filter out roles that don't match an existing role and also don't have name/ability/team

src/store/persistence.js

@@ -115,10 +115,7 @@ module.exports = store => {
         if (!payload.length) {
           localStorage.removeItem("roles");
         } else {
-          localStorage.setItem(
+          localStorage.setItem("roles", JSON.stringify(payload));
-            "roles",
-            JSON.stringify(payload)
-          );
         }
         break;
       case "players/setBluff":