Showing pertinent Fabled during setup (#201)

Showing Fabled which impact setup

CHANGELOG.md

@@ -1,12 +1,15 @@
 # Release Notes
 
 ## Upcoming version
+
 - Adding some special votes
 - Automatic Djinn and Bootlegger
 - Updating night order
 - Updating jinxes
+- Showing pertinent Fabled during setup
 
 ### Version 3.20.1
+
 - Inconsistancies in french translations for "Power" & "Character"
 
 ### Version 3.20.0

src/components/modals/RolesModal.vue

@@ -34,7 +34,17 @@
         </div>
       </li>
     </ul>
-    <div class="warning" v-if="hasSelectedSetupRoles">
+    <ul class="tokens">
+      <li
+        v-for="role in fabledWithSetup"
+        :class="['fabled', 'selected']"
+        :key="role.id"
+      >
+        <Token :role="role" />
+        <font-awesome-icon icon="exclamation-triangle" />
+      </li>
+    </ul>
+    <div class="warning" v-if="hasSelectedSetupRoles || fabledWithSetup.length">
       <font-awesome-icon icon="exclamation-triangle" />
       <span>{{ locale.modal.roles.warning }}</span>
     </div>
@@ -97,8 +107,18 @@ export default {
         roles.some((role) => role.selected && role.setup),
       );
     },
+    fabledWithSetup: function () {
+      const { fabled } = this.$store.state.players;
+      let res = [];
+      for (let i = 0; i < fabled.length; i++) {
+        if (fabled[i].setup) {
+          res.push(fabled[i]);
+        }
+      }
+      return res;
+    },
     ...mapState(["roles", "modals", "locale"]),
-    ...mapState("players", ["players"]),
+    ...mapState("players", ["players", "fabled"]),
     ...mapGetters({ nonTravelers: "players/nonTravelers" }),
   },
   methods: {
@@ -214,6 +234,11 @@ ul.tokens {
         0 0 10px $traveler,
         0 0 10px $traveler;
     }
+    &.fabled {
+      box-shadow:
+        0 0 10px $fabled,
+        0 0 10px $fabled;
+    }
     &:hover {
       transform: scale(1.2);
       z-index: 10;