added character reference modal

src/App.vue

@@ -14,8 +14,9 @@
     <TownInfo v-if="players.length"></TownInfo>
     <TownSquare @screenshot="takeScreenshot"></TownSquare>
     <Menu ref="menu"></Menu>
-    <EditionModal></EditionModal>
-    <RolesModal></RolesModal>
+    <EditionModal />
+    <RolesModal />
+    <ReferenceModal />
   </div>
 </template>
 
@@ -27,9 +28,11 @@ import Menu from "./components/Menu";
 import RolesModal from "./components/modals/RolesModal";
 import EditionModal from "./components/modals/EditionModal";
 import Intro from "./components/Intro";
+import ReferenceModal from "./components/modals/ReferenceModal";
 
 export default {
   components: {
+    ReferenceModal,
     Intro,
     TownInfo,
     TownSquare,
@@ -54,7 +57,7 @@ export default {
           this.$refs.menu.addPlayer();
           break;
         case "r":
-          this.$refs.menu.randomizeSeatings();
+          this.$store.commit("toggleModal", "reference");
           break;
         case "e":
           if (this.session.isSpectator) return;

src/components/Menu.vue

@@ -86,12 +86,18 @@
           <li @click="clearPlayers" v-if="players.length">
             Remove all
           </li>
+        </template>
 
-          <!-- Characters -->
-          <li class="headline">
-            <font-awesome-icon icon="theater-masks" />
-            Characters
-          </li>
+        <!-- Characters -->
+        <li class="headline">
+          <font-awesome-icon icon="theater-masks" />
+          Characters
+        </li>
+        <li @click="toggleModal('reference')">
+          <em>[R]</em>
+          Reference Sheet
+        </li>
+        <template v-if="!session.isSpectator">
           <li @click="toggleModal('edition')">
             <em>[E]</em>
             Select Edition

src/components/modals/Modal.vue

@@ -48,6 +48,11 @@ export default {
   flex-direction: column;
   max-width: 60%;
 
+  .characters & {
+    max-height: 80%;
+    overflow-y: auto;
+  }
+
   ul {
     list-style-type: none;
     margin: 0;

src/components/modals/ReferenceModal.vue

@@ -0,0 +1,212 @@
+<template>
+  <Modal
+    class="characters"
+    v-show="modals.reference"
+    @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>
+        </li>
+      </ul>
+    </div>
+  </Modal>
+</template>
+
+<script>
+import Modal from "./Modal";
+import editionJSON from "./../../editions.json";
+import { mapMutations, mapState } from "vuex";
+
+export default {
+  components: {
+    Modal
+  },
+  data: function() {
+    return {
+      roleSelection: {}
+    };
+  },
+  computed: {
+    editionName: function() {
+      const edition = editionJSON.find(({ id }) => id === this.edition);
+      return edition ? edition.name : "Custom script";
+    },
+    rolesGrouped: function() {
+      const rolesGrouped = {};
+      this.roles.forEach(role => {
+        if (!rolesGrouped[role.team]) {
+          rolesGrouped[role.team] = [];
+        }
+        rolesGrouped[role.team].push(role);
+      });
+      delete rolesGrouped["traveler"];
+      return rolesGrouped;
+    },
+    playersByRole: function() {
+      const players = {};
+      this.players.forEach(({ name, role }) => {
+        if (role && role.id && role.team !== "traveler") {
+          if (!players[role.id]) {
+            players[role.id] = [];
+          }
+          players[role.id].push(name);
+        }
+      });
+      return players;
+    },
+    ...mapState(["roles", "modals", "edition"]),
+    ...mapState("players", ["players"])
+  },
+  methods: {
+    ...mapMutations(["toggleModal"])
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../vars.scss";
+
+h4 {
+  text-transform: capitalize;
+  display: flex;
+  align-items: center;
+  height: 20px;
+  &:before,
+  &:after {
+    content: " ";
+    width: 100%;
+    height: 1px;
+    border-radius: 2px;
+  }
+  &:before {
+    margin-right: 15px;
+  }
+  &:after {
+    margin-left: 15px;
+  }
+}
+
+.townsfolk {
+  .name,
+  .player,
+  h4 {
+    color: $townsfolk;
+    &:before,
+    &:after {
+      background-color: $townsfolk;
+    }
+  }
+}
+.outsider {
+  .name,
+  .player,
+  h4 {
+    color: $outsider;
+    &:before,
+    &:after {
+      background-color: $outsider;
+    }
+  }
+}
+.minion {
+  .name,
+  .player,
+  h4 {
+    color: $minion;
+    &:before,
+    &:after {
+      background-color: $minion;
+    }
+  }
+}
+.demon {
+  .name,
+  .player,
+  h4 {
+    color: $demon;
+    &:before,
+    &:after {
+      background-color: $demon;
+    }
+  }
+}
+ul {
+  li {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    align-content: center;
+    /*background: linear-gradient(0deg, #ffffff0f, transparent);*/
+    border-radius: 10px;
+    .icon {
+      width: 60px;
+      height: 40px;
+      background-size: cover;
+      background-position: 0 -5px;
+      flex-grow: 0;
+      flex-shrink: 0;
+      margin: 0 10px;
+      text-align: center;
+      border-left: 1px solid #ffffff1f;
+      border-right: 1px solid #ffffff1f;
+    }
+    .name {
+      flex-grow: 0;
+      flex-shrink: 0;
+      width: 150px;
+      font-weight: bold;
+      text-align: right;
+      font-family: "Papyrus", sans-serif;
+      font-size: 110%;
+    }
+    .player {
+      flex-grow: 0;
+      flex-shrink: 1;
+      text-align: right;
+      margin: 0 10px;
+    }
+    .ability {
+      flex-grow: 1;
+    }
+  }
+  &.legend {
+    font-weight: bold;
+    height: 20px;
+    margin-top: 10px;
+    li span {
+      background: none;
+      height: auto;
+      font-family: inherit;
+      font-size: inherit;
+    }
+  }
+}
+</style>

src/store/index.js

@@ -42,6 +42,7 @@ export default new Vuex.Store({
       playerCount: 0
     },
     modals: {
+      reference: false,
       edition: false,
       roles: false,
       role: false,
@@ -91,6 +92,12 @@ export default new Vuex.Store({
     },
     toggleModal({ modals }, name) {
       modals[name] = !modals[name];
+      if (modals[name]) {
+        for (let modal in modals) {
+          if (modal === name) continue;
+          modals[modal] = false;
+        }
+      }
     },
     updateScreenshot({ grimoire }, status) {
       if (status !== true && status !== false) {