added night order to reference sheet (closes #30)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "townsquare",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Blood on the Clocktower Town Square",
   "author": "Steffen Baumgart",
   "scripts": {

src/components/modals/ReferenceModal.vue

@@ -5,38 +5,111 @@
     @close="toggleModal('reference')"
     v-if="roles.size"
   >
-    <h3>{{ editionName }} Character Reference</h3>
-    <ul class="legend">
-      <li>
-        <span class="name">Name</span>
-        <span class="icon">Icon</span>
-        <span class="ability">Ability</span>
-        <span class="player" v-if="Object.keys(playersByRole).length">
-          Player
-        </span>
-      </li>
-    </ul>
-    <div v-for="(teamRoles, team) in rolesGrouped" :key="team" :class="[team]">
-      <h4>{{ team }}</h4>
-      <ul>
-        <li v-for="role in teamRoles" :class="[team]" :key="role.id">
-          <span class="name">{{ role.name }}</span>
-          <span
-            class="icon"
-            v-if="role.id"
-            v-bind:style="{
-              backgroundImage: `url(${require('../../assets/icons/' +
-                role.id +
-                '.png')})`
-            }"
-          ></span>
-          <span class="ability">{{ role.ability }}</span>
-          <span class="player" v-if="Object.keys(playersByRole).length">{{
-            playersByRole[role.id] ? playersByRole[role.id].join(", ") : ""
-          }}</span>
+    <template v-if="!isNightOrder">
+      <font-awesome-icon
+        @click="isNightOrder = !isNightOrder"
+        icon="cloud-moon"
+        class="toggle"
+        title="Show Night Order"
+      />
+      <h3>
+        Character Reference
+        <font-awesome-icon icon="address-card" />
+        {{ editionName }}
+      </h3>
+      <ul class="legend">
+        <li>
+          <span class="name">Name</span>
+          <span class="icon">Icon</span>
+          <span class="ability">Ability</span>
+          <span class="player" v-if="Object.keys(playersByRole).length">
+            Player
+          </span>
         </li>
       </ul>
-    </div>
+      <div
+        v-for="(teamRoles, team) in rolesGrouped"
+        :key="team"
+        :class="[team]"
+      >
+        <h4>{{ team }}</h4>
+        <ul>
+          <li v-for="role in teamRoles" :class="[team]" :key="role.id">
+            <span class="name">{{ role.name }}</span>
+            <span
+              class="icon"
+              v-if="role.id"
+              v-bind:style="{
+                backgroundImage: `url(${require('../../assets/icons/' +
+                  role.id +
+                  '.png')})`
+              }"
+            ></span>
+            <span class="ability">{{ role.ability }}</span>
+            <span class="player" v-if="Object.keys(playersByRole).length">{{
+              playersByRole[role.id] ? playersByRole[role.id].join(", ") : ""
+            }}</span>
+          </li>
+        </ul>
+      </div>
+    </template>
+    <template v-else>
+      <font-awesome-icon
+        @click="isNightOrder = !isNightOrder"
+        icon="address-card"
+        class="toggle"
+        title="Show Character Reference"
+      />
+      <h3>
+        Night Order
+        <font-awesome-icon icon="cloud-moon" />
+        {{ editionName }}
+      </h3>
+      <div class="night">
+        <ul class="first">
+          <li class="headline">First Night</li>
+          <li
+            v-for="role in rolesFirstNight"
+            :key="role.id"
+            :class="[role.team]"
+          >
+            <span class="name">
+              {{ role.name }}
+            </span>
+            <span
+              class="icon"
+              v-if="role.id"
+              v-bind:style="{
+                backgroundImage: `url(${require('../../assets/icons/' +
+                  role.id +
+                  '.png')})`
+              }"
+            ></span>
+          </li>
+        </ul>
+        <ul class="other">
+          <li class="headline">Other Nights</li>
+          <li
+            v-for="role in rolesOtherNight"
+            :key="role.id"
+            :class="[role.team]"
+          >
+            <span
+              class="icon"
+              v-if="role.id"
+              v-bind:style="{
+                backgroundImage: `url(${require('../../assets/icons/' +
+                  role.id +
+                  '.png')})`
+              }"
+            ></span>
+            <span class="name">
+              {{ role.name }}
+            </span>
+          </li>
+        </ul>
+      </div>
+    </template>
   </Modal>
 </template>
 
@@ -51,13 +124,14 @@ export default {
   },
   data: function() {
     return {
-      roleSelection: {}
+      roleSelection: {},
+      isNightOrder: false
     };
   },
   computed: {
     editionName: function() {
       const edition = editionJSON.find(({ id }) => id === this.edition);
-      return edition ? edition.name : "Custom script";
+      return edition ? edition.name : "Custom Script";
     },
     rolesGrouped: function() {
       const rolesGrouped = {};
@@ -82,6 +156,26 @@ export default {
       });
       return players;
     },
+    rolesFirstNight: function() {
+      const rolesFirstNight = [];
+      this.roles.forEach(role => {
+        if (role.firstNight) {
+          rolesFirstNight.push(role);
+        }
+      });
+      rolesFirstNight.sort((a, b) => a.firstNight - b.firstNight);
+      return rolesFirstNight;
+    },
+    rolesOtherNight: function() {
+      const rolesOtherNight = [];
+      this.roles.forEach(role => {
+        if (role.otherNight) {
+          rolesOtherNight.push(role);
+        }
+      });
+      rolesOtherNight.sort((a, b) => a.otherNight - b.otherNight);
+      return rolesOtherNight;
+    },
     ...mapState(["roles", "modals", "edition"]),
     ...mapState("players", ["players"])
   },
@@ -94,6 +188,20 @@ export default {
 <style lang="scss" scoped>
 @import "../../vars.scss";
 
+.toggle {
+  position: absolute;
+  left: 20px;
+  top: 20px;
+  cursor: pointer;
+  &:hover {
+    color: red;
+  }
+}
+
+h3 svg {
+  vertical-align: middle;
+}
+
 h4 {
   text-transform: capitalize;
   display: flex;
@@ -216,4 +324,45 @@ ul {
     }
   }
 }
+
+.night {
+  display: flex;
+  align-items: start;
+  justify-content: center;
+  > *:first-child {
+    margin-right: 2vh;
+  }
+  > * {
+    flex-grow: 0;
+    flex-wrap: nowrap;
+    flex-direction: column;
+  }
+  .headline {
+    display: block;
+    font-weight: bold;
+    border-bottom: 1px solid white;
+    padding: 5px 10px;
+    border-radius: 0;
+    text-align: center;
+  }
+  .icon {
+    border-color: white;
+  }
+  .name {
+    flex-grow: 1;
+  }
+  .first {
+    .icon {
+      border-right: 0;
+    }
+  }
+  .other {
+    li .name {
+      text-align: left;
+    }
+    .icon {
+      border-left: 0;
+    }
+  }
+}
 </style>

src/main.js

@@ -7,11 +7,13 @@ import { fab } from "@fortawesome/free-brands-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 
 const faIcons = [
+  "AddressCard",
   "BookOpen",
   "BroadcastTower",
   "Camera",
   "Chair",
   "CheckSquare",
+  "CloudMoon",
   "Cog",
   "Copy",
   "Dice",

src/roles.json

@@ -1297,9 +1297,9 @@
   {
     "id": "amnesiac",
     "edition": "",
-    "firstNight": 20,
+    "firstNight": 21,
     "firstNightReminder": "Decide the Amnesiac's entire ability. If the Amnesiac's ability causes them to wake tonight: Wake the Amnesiac and run their ability.",
-    "otherNight": 20,
+    "otherNight": 30,
     "otherNightReminder": "If the Amnesiac's ability causes them to wake tonight: Wake the Amnesiac and run their ability.",
     "reminders": [],
     "setup": false,

src/store/modules/players.js

@@ -25,7 +25,8 @@ const getters = {
   nightOrder({ players }) {
     const firstNight = [0];
     const otherNight = [0];
-    players.forEach(({ role }) => {
+    players.forEach(({ role, isDead }) => {
+      if (isDead) return;
       if (role.firstNight && !firstNight.includes(role.firstNight)) {
         firstNight.push(role.firstNight);
       }