night order shows player names near roles now (closes #102)

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Release Notes
 
+## Version 2.5.0
+- all travelers from the base editions are now optionally available (thanks @davotronic5000)
+- night order shows player names near roles now
+
+---
+
 ## Version 2.4.0
 - added spoiler role (Pixie!)
 - fixed bug with ST sending out roles that are not part of the current edition / script (ie. travelers or base set roles)

src/components/modals/NightOrderModal.vue

@@ -24,7 +24,13 @@
           :class="[role.team]"
         >
           <span class="name">
-            {{ role.name }}
+            {{ role.name }}<br />
+            <small>{{
+                players
+                    .filter(p => p.role.id === role.id)
+                    .map(p => p.name)
+                    .join(", ")
+              }}</small>
           </span>
           <span
             class="icon"
@@ -52,7 +58,13 @@
             }"
           ></span>
           <span class="name">
-            {{ role.name }}
+            {{ role.name }}<br />
+            <small>{{
+              players
+                  .filter(p => p.role.id === role.id)
+                  .map(p => p.name)
+                  .join(", ")
+            }}</small>
           </span>
         </li>
       </ul>
@@ -179,57 +191,42 @@ h4 {
 }
 
 .fabled {
-  .name,
+  .name {
-  .player,
+    background: linear-gradient(90deg, $fabled, transparent 35%);
-  h4 {
+    .night .other & {
-    color: $fabled;
+      background: linear-gradient(-90deg, $fabled, transparent 35%);
-    &:before,
-    &:after {
-      background-color: $fabled;
     }
   }
 }
 .townsfolk {
-  .name,
+  .name {
-  .player,
+    background: linear-gradient(90deg, $townsfolk, transparent 35%);
-  h4 {
+    .night .other & {
-    color: $townsfolk;
+      background: linear-gradient(-90deg, $townsfolk, transparent 35%);
-    &:before,
-    &:after {
-      background-color: $townsfolk;
     }
   }
 }
 .outsider {
-  .name,
+  .name {
-  .player,
+    background: linear-gradient(90deg, $outsider, transparent 35%);
-  h4 {
+    .night .other & {
-    color: $outsider;
+      background: linear-gradient(-90deg, $outsider, transparent 35%);
-    &:before,
-    &:after {
-      background-color: $outsider;
     }
   }
 }
 .minion {
-  .name,
+  .name {
-  .player,
+    background: linear-gradient(90deg, $minion, transparent 35%);
-  h4 {
+    .night .other & {
-    color: $minion;
+      background: linear-gradient(-90deg, $minion, transparent 35%);
-    &:before,
-    &:after {
-      background-color: $minion;
     }
   }
 }
 .demon {
-  .name,
+  .name {
-  .player,
+    background: linear-gradient(90deg, $demon, transparent 35%);
-  h4 {
+    .night .other & {
-    color: $demon;
+      background: linear-gradient(-90deg, $demon, transparent 35%);
-    &:before,
-    &:after {
-      background-color: $demon;
     }
   }
 }
@@ -237,20 +234,15 @@ ul {
   li {
     display: flex;
     width: 100%;
-    align-items: center;
+    margin-bottom: 3px;
-    align-content: center;
-    /*background: linear-gradient(0deg, #ffffff0f, transparent);*/
-    border-radius: 10px;
     .icon {
       width: 6vh;
       background-size: cover;
-      background-position: 0 -5px;
+      background-position: 0 0;
       flex-grow: 0;
       flex-shrink: 0;
-      margin: 0 10px;
       text-align: center;
-      border-left: 1px solid #ffffff1f;
+      margin: 0 2px;
-      border-right: 1px solid #ffffff1f;
       &:after {
         content: " ";
         display: block;
@@ -261,19 +253,14 @@ ul {
       flex-grow: 0;
       flex-shrink: 0;
       width: 15%;
-      font-weight: bold;
       text-align: right;
-      font-family: "Papyrus", sans-serif;
       font-size: 110%;
+      padding: 5px;
+      border-left: 1px solid rgba(255, 255, 255, 0.4);
+      border-right: 1px solid rgba(255, 255, 255, 0.4);
+      small {
+        color: #888;
       }
-    .player {
-      flex-grow: 0;
-      flex-shrink: 1;
-      text-align: right;
-      margin: 0 10px;
-    }
-    .ability {
-      flex-grow: 1;
     }
   }
   &.legend {
@@ -307,28 +294,23 @@ ul {
   .headline {
     display: block;
     font-weight: bold;
-    border-bottom: 1px solid white;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
     padding: 5px 10px;
     border-radius: 0;
     text-align: center;
   }
-  .icon {
-    border-color: white;
-  }
   .name {
     flex-grow: 1;
   }
   .first {
-    .icon {
+    .name {
-      border-right: 0;
+      border-left: 0;
     }
   }
   .other {
     li .name {
       text-align: left;
-    }
+      border-right: 0;
-    .icon {
-      border-left: 0;
     }
   }
 }