started working on fabled

src/App.vue

@@ -190,11 +190,14 @@ body {
 
 // odd aspect ratio
 @media (max-aspect-ratio: 11/7) {
-  .bluffs h3 {
-    max-width: 14vh;
-  }
-  .bluffs ul {
-    flex-direction: column;
+  .bluffs,
+  .fabled {
+    h3 {
+      max-width: 14vh;
+    }
+    ul {
+      flex-direction: column;
+    }
   }
 }
 

src/components/TownSquare.vue

@@ -48,6 +48,27 @@
       </ul>
     </div>
 
+    <div
+      class="fabled"
+      :class="{ closed: !isFabledOpen }"
+      v-if="grimoire.fabled.length"
+    >
+      <h3>
+        <span>Fabled</span>
+        <font-awesome-icon icon="times-circle" @click.stop="toggleFabled" />
+        <font-awesome-icon icon="plus-circle" @click.stop="toggleFabled" />
+      </h3>
+      <ul>
+        <li
+          v-for="(fabled, index) in grimoire.fabled"
+          :key="index"
+          @click="openRoleModal(index * -1)"
+        >
+          <Token :role="fabled"></Token>
+        </li>
+      </ul>
+    </div>
+
     <ReminderModal :player-index="selectedPlayer"></ReminderModal>
     <RoleModal :player-index="selectedPlayer"></RoleModal>
   </div>
@@ -78,7 +99,8 @@ export default {
       swap: -1,
       move: -1,
       nominate: -1,
-      isBluffsOpen: true
+      isBluffsOpen: true,
+      isFabledOpen: true
     };
   },
   methods: {
@@ -89,6 +111,9 @@ export default {
     toggleBluffs() {
       this.isBluffsOpen = !this.isBluffsOpen;
     },
+    toggleFabled() {
+      this.isFabledOpen = !this.isFabledOpen;
+    },
     handleTrigger(playerIndex, [method, params]) {
       if (typeof this[method] === "function") {
         this[method](playerIndex, params);
@@ -290,10 +315,16 @@ export default {
   }
 }
 
-/***** Demon bluffs *******/
-.bluffs {
+/***** Demon bluffs / Fabled *******/
+.bluffs,
+.fabled {
   position: absolute;
-  bottom: 10px;
+  &.bluffs {
+    bottom: 10px;
+  }
+  &.fabled {
+    top: 10px;
+  }
   left: 10px;
   background: rgba(0, 0, 0, 0.5);
   border-radius: 10px;
@@ -305,7 +336,7 @@ export default {
   transition: all 200ms ease-in-out;
   z-index: 50;
 
-  #townsquare.public & {
+  #townsquare.public &.bluffs {
     opacity: 0;
     transform: scale(0.1);
   }

src/fabled.json

@@ -0,0 +1,122 @@
+[
+  {
+    "id": "doomsayer",
+    "firstNightReminder": "",
+    "otherNightReminder": "",
+    "reminders": [],
+    "setup": false,
+    "name": "Doomsayer",
+    "team": "fabled",
+    "ability": "If 4 or more players live, each living player may publicly choose (once per game) that a player of their own alignment dies."
+  },
+  {
+    "id": "angel",
+    "firstNightReminder": "",
+    "otherNightReminder": "",
+    "reminders": ["Protect", "Punish"],
+    "setup": false,
+    "name": "Angel",
+    "team": "fabled",
+    "ability": "Something bad might happen to whoever is most responsible for the death of a new player."
+  },
+  {
+    "id": "buddhist",
+    "firstNightReminder": "",
+    "otherNightReminder": "",
+    "reminders": [],
+    "setup": false,
+    "name": "Buddhist",
+    "team": "fabled",
+    "ability": "For the first 2 minutes of each day, veteran players may not talk."
+  },
+  {
+    "id": "hellslibrarian",
+    "firstNightReminder": "",
+    "otherNightReminder": "",
+    "reminders": ["Punish"],
+    "setup": false,
+    "name": "Hell's Librarian",
+    "team": "fabled",
+    "ability": "Something bad might happen to whoever talks when the Storyteller has asked for silence."
+  },
+  {
+    "id": "revolutionary",
+    "firstNightReminder": "",
+    "otherNightReminder": "",
+    "reminders": ["Used"],
+    "setup": false,
+    "name": "Revolutionary",
+    "team": "fabled",
+    "ability": "2 neighboring players are known to be the same alignment. Once per game, one of them registers falsely."
+  },
+  {
+    "id": "fiddler",
+    "firstNightReminder": "",
+    "otherNightReminder": "",
+    "reminders": [],
+    "setup": false,
+    "name": "Fiddler",
+    "team": "fabled",
+    "ability": "Once per game, the Demon secretly chooses an opposing player: all players choose which of these 2 players win."
+  },
+  {
+    "id": "toymaker",
+    "firstNightReminder": "",
+    "otherNightReminder": "If it is a night when a Demon attack could end the game, and the Demon is marked “Final night: No Attack,” then the Demon does not act tonight. (Do not wake them.)",
+    "reminders": ["Final Night: No Attack"],
+    "setup": false,
+    "name": "Toymaker",
+    "team": "fabled",
+    "ability": "The Demon may choose not to attack & must do this at least once per game. Evil players get normal starting info."
+  },
+  {
+    "id": "fibbin",
+    "firstNightReminder": "",
+    "otherNightReminder": "",
+    "reminders": ["Used"],
+    "setup": false,
+    "name": "Fibbin",
+    "team": "fabled",
+    "ability": "Once per game, 1 good player might get false information."
+  },
+  {
+    "id": "duchess",
+    "firstNightReminder": "",
+    "otherNightReminder": "Wake each player marked “Visitor” or “False Info” one at a time. Show them the Duchess token, then fingers (1, 2, 3) equaling the number of evil players marked “Visitor” or, if you are waking the player marked “False Info,” show them any number of fingers except the number of evil players marked “Visitor.”",
+    "reminders": ["Visitor", "False Info"],
+    "setup": false,
+    "name": "Duchess",
+    "team": "fabled",
+    "ability": "Each day, 3 players may choose to visit you. At night*, each visitor learns how many visitors are evil, but 1 gets false info."
+  },
+  {
+    "id": "sentinel",
+    "firstNightReminder": "",
+    "otherNightReminder": "",
+    "reminders": [],
+    "setup": true,
+    "name": "Sentinel",
+    "team": "fabled",
+    "ability": "There might be 1 extra or 1 fewer Outsider in play."
+  },
+  {
+    "id": "spiritofivory",
+    "firstNightReminder": "",
+    "otherNightReminder": "",
+    "reminders": ["No extra evil"],
+    "setup": false,
+    "name": "Spirit of Ivory",
+    "team": "fabled",
+    "ability": "There can't be more than 1 extra evil player."
+  },
+  {
+    "id": "djinn",
+    "firstNightReminder": "Wake each evil player and show them which jinxed characters are in play, so that they know not to bluff as characters that can not be in play.",
+    "otherNightReminder": "",
+    "reminders": [],
+    "setup": false,
+    "name": "Djinn",
+    "team": "fabled",
+    "ability": "Jinxed characters are not both in-play, but evil players know which ones are. Or, use the Djinn's \"Special Rule\"."
+  }
+]

src/store/index.js

@@ -6,10 +6,12 @@ import players from "./modules/players";
 import session from "./modules/session";
 import editionJSON from "../editions.json";
 import rolesJSON from "../roles.json";
+import fabledJSON from "../fabled.json";
 
 Vue.use(Vuex);
 
 const rolesJSONbyId = new Map(rolesJSON.map(role => [role.id, role]));
+const fabled = new Map(fabledJSON.map(role => [role.id, role]));
 
 const getRolesByEdition = (edition = "tb") => {
   const selectedEdition =
@@ -55,7 +57,8 @@ export default new Vuex.Store({
       isScreenshotSuccess: false,
       zoom: 0,
       background: "",
-      bluffs: []
+      bluffs: [],
+      fabled: []
     },
     modals: {
       reference: false,
@@ -66,7 +69,8 @@ export default new Vuex.Store({
       nightOrder: false
     },
     edition: "tb",
-    roles: getRolesByEdition()
+    roles: getRolesByEdition(),
+    fabled
   },
   getters: {
     /**