added night order

src/App.vue

@@ -52,7 +52,7 @@
         @click="takeScreenshot()"
         v-bind:class="{ success: isScreenshotSuccess }"
       />
-      <font-awesome-icon icon="cogs" @click="isControlOpen = !isControlOpen" />
+      <font-awesome-icon icon="cog" @click="isControlOpen = !isControlOpen" />
       <ul v-if="isControlOpen">
         <li @click="togglePublic">Toggle <em>G</em>rimoire</li>
         <li>
@@ -223,6 +223,22 @@ export default {
   watch: {
     players: {
       handler(newPlayers) {
+        const firstNight = [0];
+        const otherNight = [0];
+        newPlayers.forEach(({ role }) => {
+          if (role.firstNight && !firstNight.includes(role.firstNight)) {
+            firstNight.push(role.firstNight);
+          }
+          if (role.otherNight && !otherNight.includes(role.otherNight)) {
+            otherNight.push(role.otherNight);
+          }
+        });
+        firstNight.sort();
+        otherNight.sort();
+        newPlayers.forEach(player => {
+          player.firstNight = Math.max(firstNight.indexOf(player.role.firstNight), 0);
+          player.otherNight = Math.max(otherNight.indexOf(player.role.otherNight), 0);
+        });
         localStorage.players = JSON.stringify(
           newPlayers.map(player => ({
             ...player,

src/components/Player.vue

@@ -11,6 +11,16 @@
     >
       <div class="shroud" @click="toggleStatus()"></div>
       <div class="life" @click="toggleStatus()"></div>
+
+      <div class="night first" v-if="player.firstNight">
+        <em>{{ player.firstNight }}.</em>
+        <span>{{ player.role.firstNightReminder }}</span>
+      </div>
+      <div class="night other" v-if="player.otherNight">
+        <em>{{ player.otherNight }}.</em>
+        <span>{{ player.role.otherNightReminder }}</span>
+      </div>
+
       <Token :role="player.role" @set-role="setRole" />
 
       <div class="name" @click="changeName">
@@ -283,6 +293,68 @@ export default {
   opacity: 1;
 }
 
+/**** Night reminders ****/
+.player .night {
+  position: absolute;
+  top: 40%;
+  width: 100%;
+  z-index: 2;
+  cursor: pointer;
+  opacity: 1;
+  transition: opacity 200ms;
+
+  #townsquare.public & {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  &:hover ~ .token .ability {
+    opacity: 0;
+  }
+
+  &.first em {
+    left: -15px;
+    background: linear-gradient(
+      180deg,
+      rgba(0, 0, 0, 1) 0%,
+      rgba(147, 0, 0, 1) 100%
+    );
+  }
+
+  &.other em {
+    right: -15px;
+    background: linear-gradient(
+      180deg,
+      rgba(0, 0, 0, 1) 0%,
+      rgba(7, 0, 147, 1) 100%
+    );
+  }
+
+  em {
+    font-style: normal;
+    position: absolute;
+    width: 40px;
+    height: 40px;
+    text-align: center;
+    line-height: 37px;
+    top: -20px;
+    border-radius: 50%;
+    border: 3px solid black;
+    filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.5));
+    font-weight: bold;
+    opacity: 1;
+    transition: opacity 200ms;
+  }
+
+  #app.screenshot & {
+    display: none;
+  }
+}
+
+.player.dead .night em {
+  opacity: 0;
+}
+
 /***** Reminder token *****/
 .circle .reminder {
   background: url("../assets/reminder.png") center center;

src/components/Token.vue

@@ -45,6 +45,8 @@ export default {
   border: 3px solid black;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
   cursor: pointer;
+  display: flex;
+  align-items: center;
 
   &:before {
     content: " ";
@@ -102,8 +104,7 @@ export default {
     display: flex;
     position: absolute;
     padding: 5px 10px;
-    top: 20px;
-    left: 110%;
+    left: 120%;
     width: 250px;
     z-index: 25;
     font-size: 80%;

src/components/TownSquare.vue

@@ -213,8 +213,9 @@ export default {
         z-index: $item-count - $i + 1;
       } @else {
         z-index: $i - 1;
-        .ability {
-          right: 110%;
+        .ability,
+        .night span {
+          right: 120%;
           left: auto;
           &:before {
             border-right-color: transparent;
@@ -229,7 +230,8 @@ export default {
       }
       .life,
       .token,
-      .shroud {
+      .shroud,
+      .night {
         transition-delay: ($i - 1) * 50ms;
       }
 

src/main.js

@@ -8,7 +8,7 @@ import {
   faUserFriends,
   faUser,
   faTimesCircle,
-  faCogs,
+  faCog,
   faSearchMinus,
   faSearchPlus,
   faCamera
@@ -22,7 +22,7 @@ library.add(
   faUserFriends,
   faUser,
   faTimesCircle,
-  faCogs,
+  faCog,
   faSearchMinus,
   faSearchPlus,
   faCamera