From f7c8e022a30ff5b85abf71ba199aa0059a41ae69 Mon Sep 17 00:00:00 2001
From: Steffen <steffen@baumgart.biz>
Date: Sun, 9 Aug 2020 21:28:38 +0200
Subject: [PATCH] fabled UI finished

---
 src/App.vue                             |  3 ++
 src/components/Menu.vue                 |  4 ++
 src/components/Player.vue               |  3 +-
 src/components/Token.vue                | 24 ++++++++--
 src/components/TownSquare.vue           | 20 +++++++-
 src/components/modals/FabledModal.vue   | 61 +++++++++++++++++++++++++
 src/components/modals/ReminderModal.vue | 10 ++++
 src/main.js                             |  1 +
 src/store/index.js                      | 16 +++++--
 src/store/persistence.js                | 13 ++++++
 10 files changed, 146 insertions(+), 9 deletions(-)
 create mode 100644 src/components/modals/FabledModal.vue

diff --git a/src/App.vue b/src/App.vue
index 6fd7a35..f261468 100644
--- a/src/App.vue
+++ b/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,
diff --git a/src/components/Menu.vue b/src/components/Menu.vue
index 481154e..f4cafb4 100644
--- a/src/components/Menu.vue
+++ b/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>
diff --git a/src/components/Player.vue b/src/components/Player.vue
index 29ae30e..792c60e 100644
--- a/src/components/Player.vue
+++ b/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% {
diff --git a/src/components/Token.vue b/src/components/Token.vue
index 9315694..d12e997 100644
--- a/src/components/Token.vue
+++ b/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)
-            drop-shadow(2px 0 0 white) drop-shadow(-2px 0 0 white);
+          filter: drop-shadow(0 1.5px 0 white) drop-shadow(0 -1.5px 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));
         }
       }
     }
diff --git a/src/components/TownSquare.vue b/src/components/TownSquare.vue
index 84b539a..76ae9fa 100644
--- a/src/components/TownSquare.vue
+++ b/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>
diff --git a/src/components/modals/FabledModal.vue b/src/components/modals/FabledModal.vue
new file mode 100644
index 0000000..b8630b9
--- /dev/null
+++ b/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>
diff --git a/src/components/modals/ReminderModal.vue b/src/components/modals/ReminderModal.vue
index 036258c..fd4c123 100644
--- a/src/components/modals/ReminderModal.vue
+++ b/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" });
diff --git a/src/main.js b/src/main.js
index 8549216..4c2bac5 100644
--- a/src/main.js
+++ b/src/main.js
@@ -17,6 +17,7 @@ const faIcons = [
   "Cog",
   "Copy",
   "Dice",
+  "Dragon",
   "ExchangeAlt",
   "FileUpload",
   "HandPointRight",
diff --git a/src/store/index.js b/src/store/index.js
index 2f08901..9c9578b 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -61,12 +61,13 @@ export default new Vuex.Store({
       fabled: []
     },
     modals: {
-      reference: false,
       edition: false,
-      roles: false,
-      role: false,
+      fabled: 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];
diff --git a/src/store/persistence.js b/src/store/persistence.js
index 24b37cc..4235267 100644
--- a/src/store/persistence.js
+++ b/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":