highlight dead players on night order sheet (closes #106)

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Release Notes
 
+## Version 2.6.0
+- night mode can be toggeled with [S] now (thanks @davotronic5000)
+- night order shows which players are dead
+
+---
+
 ## Version 2.5.0
 - all travelers from the base editions are now optionally available (thanks @davotronic5000)
 - night order shows player names near roles now

src/components/modals/NightOrderModal.vue

@@ -24,13 +24,18 @@
           :class="[role.team]"
         >
           <span class="name">
-            {{ role.name }}<br />
-            <small>{{
-                players
-                    .filter(p => p.role.id === role.id)
-                    .map(p => p.name)
-                    .join(", ")
-              }}</small>
+            {{ role.name }}
+            <template v-if="role.players.length">
+              <br />
+              <small
+                v-for="(player, index) in role.players"
+                :class="{ dead: player.isDead }"
+                :key="index"
+                >{{
+                  player.name + (role.players.length > index + 1 ? "," : "")
+                }}</small
+              >
+            </template>
           </span>
           <span
             class="icon"
@@ -58,13 +63,18 @@
             }"
           ></span>
           <span class="name">
-            {{ role.name }}<br />
-            <small>{{
-              players
-                  .filter(p => p.role.id === role.id)
-                  .map(p => p.name)
-                  .join(", ")
-            }}</small>
+            {{ role.name }}
+            <template v-if="role.players.length">
+              <br />
+              <small
+                v-for="(player, index) in role.players"
+                :class="{ dead: player.isDead }"
+                :key="index"
+                >{{
+                  player.name + (role.players.length > index + 1 ? "," : "")
+                }}</small
+              >
+            </template>
           </span>
         </li>
       </ul>
@@ -80,11 +90,6 @@ export default {
   components: {
     Modal
   },
-  data: function() {
-    return {
-      roleSelection: {}
-    };
-  },
   computed: {
     rolesFirstNight: function() {
       const rolesFirstNight = [];
@@ -95,23 +100,22 @@ export default {
             id: "evil",
             name: "Minion info",
             firstNight: 2,
-            team: "minion"
+            team: "minion",
+            players: this.players.filter(p => p.role.team === "minion")
           },
           {
             id: "evil",
             name: "Demon info & bluffs",
             firstNight: 4,
-            team: "demon"
+            team: "demon",
+            players: this.players.filter(p => p.role.team === "demon")
           }
         );
       }
       this.roles.forEach(role => {
-        if (
-          role.firstNight &&
-          (role.team !== "traveler" ||
-            this.players.some(p => p.role.id === role.id))
-        ) {
-          rolesFirstNight.push(role);
+        const players = this.players.filter(p => p.role.id === role.id);
+        if (role.firstNight && (role.team !== "traveler" || players.length)) {
+          rolesFirstNight.push(Object.assign({ players }, role));
         }
       });
       this.fabled
@@ -125,12 +129,9 @@ export default {
     rolesOtherNight: function() {
       const rolesOtherNight = [];
       this.roles.forEach(role => {
-        if (
-          role.otherNight &&
-          (role.team !== "traveler" ||
-            this.players.some(p => p.role.id === role.id))
-        ) {
-          rolesOtherNight.push(role);
+        const players = this.players.filter(p => p.role.id === role.id);
+        if (role.otherNight && (role.team !== "traveler" || players.length)) {
+          rolesOtherNight.push(Object.assign({ players }, role));
         }
       });
       this.fabled
@@ -260,6 +261,10 @@ ul {
       border-right: 1px solid rgba(255, 255, 255, 0.4);
       small {
         color: #888;
+        margin-right: 5px;
+        &.dead {
+          text-decoration: line-through;
+        }
       }
     }
   }

src/components/modals/ReferenceModal.vue

@@ -56,11 +56,6 @@ export default {
   components: {
     Modal
   },
-  data: function() {
-    return {
-      roleSelection: {}
-    };
-  },
   computed: {
     rolesGrouped: function() {
       const rolesGrouped = {};
@@ -136,7 +131,6 @@ h4 {
 
 .townsfolk {
   .name,
-  .player,
   h4 {
     color: $townsfolk;
     &:before,
@@ -147,7 +141,6 @@ h4 {
 }
 .outsider {
   .name,
-  .player,
   h4 {
     color: $outsider;
     &:before,
@@ -158,7 +151,6 @@ h4 {
 }
 .minion {
   .name,
-  .player,
   h4 {
     color: $minion;
     &:before,
@@ -169,7 +161,6 @@ h4 {
 }
 .demon {
   .name,
-  .player,
   h4 {
     color: $demon;
     &:before,
@@ -208,7 +199,6 @@ ul {
       width: 15%;
       font-weight: bold;
       text-align: right;
-      font-family: "Papyrus", sans-serif;
       font-size: 110%;
     }
     .player {
@@ -216,6 +206,8 @@ ul {
       flex-shrink: 1;
       text-align: right;
       margin: 0 10px;
+      color: #888;
+      font-size: smaller;
     }
     .ability {
       flex-grow: 1;
@@ -230,6 +222,7 @@ ul {
       height: auto;
       font-family: inherit;
       font-size: inherit;
+      color: #fff;
     }
     .icon:after {
       padding-top: 0;