From b158230fce9ca54c5069b145fbdff80ba7acf175 Mon Sep 17 00:00:00 2001
From: Steffen <steffen@baumgart.biz>
Date: Wed, 1 Jul 2020 10:20:56 +0200
Subject: [PATCH] handle empty image urls correctly (fixes #42)

---
 src/components/modals/ReferenceModal.vue |  2 +-
 src/store/index.js                       | 17 ++++++++++++++---
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/components/modals/ReferenceModal.vue b/src/components/modals/ReferenceModal.vue
index d66a4c2..12f35bc 100644
--- a/src/components/modals/ReferenceModal.vue
+++ b/src/components/modals/ReferenceModal.vue
@@ -329,7 +329,7 @@ ul {
 
 .night {
   display: flex;
-  align-items: start;
+  align-items: flex-start;
   justify-content: center;
   > *:first-child {
     margin-right: 2vh;
diff --git a/src/store/index.js b/src/store/index.js
index 02ba61b..afed573 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -104,6 +104,8 @@ export default new Vuex.Store({
      * @param roles Array of role IDs or full role definitions
      */
     setCustomRoles(state, roles) {
+      const imageBase =
+        "https://raw.githubusercontent.com/bra1n/townsquare/main/src/assets/icons/";
       const customRole = {
         image: "",
         edition: "custom",
@@ -121,12 +123,21 @@ export default new Vuex.Store({
             role =>
               rolesJSONbyId.get(role.id) || Object.assign({}, customRole, role)
           )
+          // default empty icons to good / evil / traveler
+          .map(role => {
+            if (role.team === "townsfolk" || role.team === "outsider") {
+              role.image = role.image || imageBase + "good.png";
+            } else if (role.team === "demon" || role.team === "minion") {
+              role.image = role.image || imageBase + "evil.png";
+            } else {
+              role.image = role.image || imageBase + "custom.png";
+            }
+            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)
           // sort by team
-          .sort((a, b) =>
-            b.team.localeCompare(a.team)
-          )
+          .sort((a, b) => b.team.localeCompare(a.team))
           // convert to Map
           .map(role => [role.id, role])
       );