fabled UI finished

src/App.vue

@@ -18,6 +18,7 @@
     <TownSquare @screenshot="takeScreenshot"></TownSquare>
     <Menu ref="menu"></Menu>
     <EditionModal />
+    <FabledModal />
     <RolesModal />
     <ReferenceModal />
     <NightOrderModal />
@@ -39,9 +40,11 @@ import ReferenceModal from "./components/modals/ReferenceModal";
 import Vote from "./components/Vote";
 import Gradients from "./components/Gradients";
 import NightOrderModal from "./components/modals/NightOrderModal";
+import FabledModal from "@/components/modals/FabledModal";
 
 export default {
   components: {
+    FabledModal,
     NightOrderModal,
     Vote,
     ReferenceModal,

src/components/Menu.vue

@@ -54,6 +54,10 @@
                 ]"
             /></em>
           </li>
+          <li v-if="!session.isSpectator" @click="toggleModal('fabled')">
+            Add Fabled
+            <em><font-awesome-icon icon="dragon"/></em>
+          </li>
           <li v-if="players.length">
             Zoom
             <em>

src/components/Player.vue

@@ -542,7 +542,7 @@ li.move:not(.from) .player .overlay svg.move {
   pointer-events: all;
 }
 
-/****** Vote icon ********/
+/****** Vote  icon ********/
 .player .has-vote {
   position: absolute;
   right: 2px;
@@ -558,6 +558,7 @@ li.move:not(.from) .player .overlay svg.move {
   }
 }
 
+/****** Session seat glow *****/
 @mixin glow($name, $color) {
   @keyframes #{$name}-glow {
     0% {

src/components/Token.vue

@@ -67,6 +67,8 @@ export default {
 </script>
 
 <style scoped lang="scss">
+@import "../vars.scss";
+
 .token {
   border-radius: 50%;
   width: 100%;
@@ -79,8 +81,23 @@ export default {
   display: flex;
   align-items: center;
   justify-content: center;
+  transition: border-color 250ms;
 
-  .icon {
+  &:hover .name .label {
+    stroke: black;
+    fill: white;
+    @-moz-document url-prefix() {
+      &.mozilla {
+        stroke: none;
+        filter: drop-shadow(0 1.5px 0 black) drop-shadow(0 -1.5px 0 black)
+          drop-shadow(1.5px 0 0 black) drop-shadow(-1.5px 0 0 black)
+          drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5));
+      }
+    }
+  }
+
+  .icon,
+  &:before {
     background-size: 100%;
     background-repeat: no-repeat;
     background-position: center 30%;
@@ -149,8 +166,9 @@ export default {
           // Vue doesn't support scoped media queries, so we have to use a second css class
           stroke: none;
           text-shadow: none;
-          filter: drop-shadow(0 2px 0 white) drop-shadow(0 -2px 0 white)
+          filter: drop-shadow(0 1.5px 0 white) drop-shadow(0 -1.5px 0 white)
-            drop-shadow(2px 0 0 white) drop-shadow(-2px 0 0 white);
+            drop-shadow(1.5px 0 0 white) drop-shadow(-1.5px 0 0 white)
+            drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5));
         }
       }
     }

src/components/TownSquare.vue

@@ -62,7 +62,7 @@
         <li
           v-for="(fabled, index) in grimoire.fabled"
           :key="index"
-          @click="openRoleModal(index * -1)"
+          @click="removeFabled(index)"
         >
           <Token :role="fabled"></Token>
         </li>
@@ -114,6 +114,9 @@ export default {
     toggleFabled() {
       this.isFabledOpen = !this.isFabledOpen;
     },
+    removeFabled(index) {
+      this.$store.commit("setFabled", { index });
+    },
     handleTrigger(playerIndex, [method, params]) {
       if (typeof this[method] === "function") {
         this[method](playerIndex, params);
@@ -409,7 +412,22 @@ export default {
     ul li {
       width: 0;
       height: 0;
+      .token {
+        border-width: 0;
+      }
     }
   }
 }
+
+.fabled ul li .token:before {
+  content: " ";
+  opacity: 0;
+  transition: opacity 250ms;
+  background-image: url("../assets/icons/x.png");
+  z-index: 2;
+}
+
+.fabled ul li:hover .token:before {
+  opacity: 1;
+}
 </style>

src/components/modals/FabledModal.vue

@@ -0,0 +1,61 @@
+<template>
+  <Modal v-show="modals.fabled && fabled.length" @close="toggleModal('fabled')">
+    <h3>
+      Choose a fabled character to add to the game
+    </h3>
+    <ul class="tokens">
+      <li v-for="role in fabled" v-bind:key="role.id" @click="setFabled(role)">
+        <Token :role="role" />
+      </li>
+    </ul>
+  </Modal>
+</template>
+
+<script>
+import { mapMutations, mapState } from "vuex";
+import Modal from "./Modal";
+import Token from "../Token";
+
+export default {
+  components: { Token, Modal },
+  computed: {
+    ...mapState(["modals", "fabled", "grimoire"]),
+    fabled() {
+      const fabled = [];
+      this.$store.state.fabled.forEach(role => {
+        // don't show fabled that are already in play
+        if (
+          !this.$store.state.grimoire.fabled.some(fable => fable.id === role.id)
+        ) {
+          fabled.push(role);
+        }
+      });
+      return fabled;
+    }
+  },
+  methods: {
+    setFabled(role) {
+      this.$store.commit("setFabled", {
+        fabled: role
+      });
+    },
+    ...mapMutations(["toggleModal"])
+  }
+};
+</script>
+
+<style scoped lang="scss">
+@import "../../vars.scss";
+
+ul.tokens li {
+  border-radius: 50%;
+  width: 6vw;
+  margin: 1%;
+  transition: transform 500ms ease;
+
+  &:hover {
+    transform: scale(1.2);
+    z-index: 10;
+  }
+}
+</style>

src/components/modals/ReminderModal.vue

@@ -59,6 +59,16 @@ export default {
           ];
         }
       });
+      this.$store.state.grimoire.fabled.forEach(role => {
+        reminders = [
+          ...reminders,
+          ...role.reminders.map(name => ({
+            role: role.id,
+            image: role.image,
+            name
+          }))
+        ];
+      });
       reminders.push({ role: "good", name: "Good" });
       reminders.push({ role: "evil", name: "Evil" });
       reminders.push({ role: "custom", name: "Custom note" });

src/main.js

@@ -17,6 +17,7 @@ const faIcons = [
   "Cog",
   "Copy",
   "Dice",
+  "Dragon",
   "ExchangeAlt",
   "FileUpload",
   "HandPointRight",

src/store/index.js

@@ -61,12 +61,13 @@ export default new Vuex.Store({
       fabled: []
     },
     modals: {
-      reference: false,
       edition: false,
-      roles: false,
+      fabled: false,
-      role: false,
+      nightOrder: false,
+      reference: false,
       reminder: false,
-      nightOrder: false
+      role: false,
+      roles: false
     },
     edition: "tb",
     roles: getRolesByEdition(),
@@ -130,6 +131,13 @@ export default new Vuex.Store({
         grimoire.bluffs = [];
       }
     },
+    setFabled({ grimoire }, { index, fabled } = {}) {
+      if (index !== undefined) {
+        grimoire.fabled.splice(index, 1);
+      } else {
+        grimoire.fabled.push(fabled);
+      }
+    },
     toggleModal({ modals }, name) {
       if (name) {
         modals[name] = !modals[name];

src/store/persistence.js

@@ -24,6 +24,13 @@ module.exports = store => {
       });
     });
   }
+  if (localStorage.fabled !== undefined) {
+    JSON.parse(localStorage.fabled).forEach(role => {
+      store.commit("setFabled", {
+        fabled: store.state.fabled.get(role) || {}
+      });
+    });
+  }
   if (localStorage.players) {
     store.commit(
       "players/set",
@@ -87,6 +94,12 @@ module.exports = store => {
           JSON.stringify(state.grimoire.bluffs.map(({ id }) => id))
         );
         break;
+      case "setFabled":
+        localStorage.setItem(
+          "fabled",
+          JSON.stringify(state.grimoire.fabled.map(({ id }) => id))
+        );
+        break;
       case "players/add":
       case "players/update":
       case "players/remove":