From 79206e17dfaf8aa7c8660081c12e891509393543 Mon Sep 17 00:00:00 2001
From: Steffen <steffen@baumgart.biz>
Date: Sat, 18 Apr 2020 21:03:58 +0200
Subject: [PATCH] added demon bluffs

---
 public/index.html                     |  1 +
 src/App.vue                           | 13 +++++-
 src/components/Modal.vue              |  5 ---
 src/components/Player.vue             |  8 ++--
 src/components/RoleSelectionModal.vue |  7 ++-
 src/components/Token.vue              | 26 +++++------
 src/components/TownSquare.vue         | 62 ++++++++++++++++++++++++---
 7 files changed, 92 insertions(+), 30 deletions(-)
diff --git a/public/index.html b/public/index.html
index 96bbbcb..5b33bf2 100644
--- a/public/index.html
+++ b/public/index.html
@@ -22,6 +22,7 @@
   <meta name="msapplication-TileColor" content="#000000">
   <meta name="msapplication-TileImage" content="/static/ms-icon-144x144.png">
   <meta name="theme-color" content="#ff0000">
+  <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed&display=swap" rel="stylesheet">
 </head>
 <body>
 <div id="app"></div>
diff --git a/src/App.vue b/src/App.vue
index 47bdd77..887a93c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -13,7 +13,7 @@
       v-show="isEditionModalOpen"
       @close="isEditionModalOpen = false"
     >
-      <h2>Select an edition:</h2>
+      <h3>Select an edition:</h3>
       <ul class="editions">
         <li
           v-for="edition in editions"
@@ -247,6 +247,17 @@ body {
   position: relative;
 }
 
+h1, h2, h3, h4, h5 {
+  margin: 0;
+  text-align: center;
+}
+
+ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
 #app {
   height: 100%;
 }
diff --git a/src/components/Modal.vue b/src/components/Modal.vue
index d0cc7e8..4232748 100644
--- a/src/components/Modal.vue
+++ b/src/components/Modal.vue
@@ -48,11 +48,6 @@ export default {
   flex-direction: column;
   max-width: 60%;
 
-  h2 {
-    margin: 0;
-    text-align: center;
-  }
-
   ul {
     list-style-type: none;
     margin: 0;
diff --git a/src/components/Player.vue b/src/components/Player.vue
index 7565187..028ca41 100644
--- a/src/components/Player.vue
+++ b/src/components/Player.vue
@@ -106,7 +106,7 @@ export default {
     transform-origin: top center;
     transition: transform 200ms ease-in-out;
     z-index: 2;
-    filter: drop-shadow(0 0 5px rgba(0,0,0,0.8));
+    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.8));
 
     &:before {
       content: " ";
@@ -137,7 +137,7 @@ export default {
     top: 0;
     transform: perspective(400px) scale(1);
   }
-  &.dead .name {
+  &.dead > .name {
     opacity: 0.5;
   }
 }
@@ -250,12 +250,12 @@ export default {
   width: $token / 2;
   height: $token / 2;
   color: black;
-  font-size: 50%;
+  font-size: 45%;
   font-weight: bold;
   display: block;
   margin: 5px ($token / -4) 0;
   text-align: center;
-  padding-top: $token * 0.3 + 2px;
+  padding: ($token * 0.3 + 2px) 5px 0;
   border-radius: 50%;
   line-height: 90%;
   border: 3px solid black;
diff --git a/src/components/RoleSelectionModal.vue b/src/components/RoleSelectionModal.vue
index b5ef46a..c53eeb7 100644
--- a/src/components/RoleSelectionModal.vue
+++ b/src/components/RoleSelectionModal.vue
@@ -1,6 +1,6 @@
 <template>
   <Modal class="roles" v-show="isOpen" @close="close()">
-    <h2>Select the roles for {{ nontravelerPlayers }} players:</h2>
+    <h3>Select the roles for {{ nontravelerPlayers }} players:</h3>
     <ul
       class="tokens"
       v-for="(teamRoles, team) in roleSelection"
@@ -131,6 +131,11 @@ export default {
     if (!Object.keys(this.roleSelection).length) {
       this.selectRandomRoles();
     }
+  },
+  watch: {
+    roles() {
+      this.selectRandomRoles();
+    }
   }
 };
 </script>
diff --git a/src/components/Token.vue b/src/components/Token.vue
index e4379ab..e84a074 100644
--- a/src/components/Token.vue
+++ b/src/components/Token.vue
@@ -98,18 +98,6 @@ export default {
     }
   }
 
-  .name {
-    color: black;
-    font-weight: 600;
-    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff,
-    1px 1px 0 #fff, 0 0 5px rgba(0, 0, 0, 0.75);
-    font-family: "Papyrus", serif;
-    position: absolute;
-    top: 73%;
-    width: 100%;
-    line-height: 100%;
-  }
-
   .ability {
     display: flex;
     position: absolute;
@@ -122,6 +110,7 @@ export default {
     background: rgba(0, 0, 0, 0.5);
     border-radius: 10px;
     border: 3px solid black;
+    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
     text-align: left;
     justify-items: center;
     align-content: center;
@@ -129,7 +118,6 @@ export default {
     pointer-events: none;
     opacity: 0;
     transition: opacity 200ms ease-in-out;
-    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5));
 
     &:before {
       content: " ";
@@ -142,6 +130,18 @@ export default {
       right: 100%;
     }
   }
+
+  .name {
+    color: black;
+    font-weight: 600;
+    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff,
+      1px 1px 0 #fff, 0 0 5px rgba(0, 0, 0, 0.75);
+    font-family: "Papyrus", serif;
+    position: absolute;
+    top: 73%;
+    width: 100%;
+    line-height: 100%;
+  }
   &:hover .ability {
     opacity: 1;
   }
diff --git a/src/components/TownSquare.vue b/src/components/TownSquare.vue
index 442f89a..61be220 100644
--- a/src/components/TownSquare.vue
+++ b/src/components/TownSquare.vue
@@ -17,8 +17,26 @@
         @remove-player="removePlayer"
       ></Player>
     </ul>
-    <Modal v-show="availableReminders.length && selectedPlayer" @close="closeModal">
-      <h2>Choose a reminder token:</h2>
+    <div class="bluffs" v-if="players.length > 6">
+      <h3>Demon bluffs</h3>
+      <ul>
+        <li @click="openRoleModal(bluffs[0])">
+          <Token :role="bluffs[0].role"></Token>
+        </li>
+        <li @click="openRoleModal(bluffs[1])">
+          <Token :role="bluffs[1].role"></Token>
+        </li>
+        <li @click="openRoleModal(bluffs[2])">
+          <Token :role="bluffs[2].role"></Token>
+        </li>
+      </ul>
+    </div>
+
+    <Modal
+      v-show="availableReminders.length && selectedPlayer"
+      @close="closeModal"
+    >
+      <h3>Choose a reminder token:</h3>
       <ul class="reminders">
         <li
           v-for="reminder in availableReminders"
@@ -32,7 +50,7 @@
       </ul>
     </Modal>
     <Modal v-show="availableRoles.length && selectedPlayer" @close="closeModal">
-      <h2>Choose a new role:</h2>
+      <h3>Choose a new role:</h3>
       <ul class="tokens">
         <li
           v-for="role in availableRoles"
@@ -80,7 +98,8 @@ export default {
     return {
       selectedPlayer: false,
       availableReminders: [],
-      availableRoles: []
+      availableRoles: [],
+      bluffs: Array(3).fill({}).map(() => ({ role: {} }))
     };
   },
   methods: {
@@ -104,7 +123,7 @@ export default {
       this.availableReminders = [];
       this.selectedPlayer = player;
       this.roles.forEach(role => {
-        if (role.id !== player.role.id) {
+        if (player.role && role.id !== player.role.id) {
           this.availableRoles.push(role);
         }
       });
@@ -222,6 +241,36 @@ export default {
   padding: 20px;
 }
 
+/***** Demon bluffs *******/
+.bluffs {
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+  background: rgba(0, 0, 0, 0.5);
+  border-radius: 10px;
+  border: 3px solid black;
+  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
+  transform-origin: bottom left;
+  transform: scale(1);
+  opacity: 1;
+  transition: all 200ms ease-in-out;
+  h3 {
+    margin-top: 5px;
+  }
+  li {
+    width: 120px;
+    height: 120px;
+    margin: 0 5px;
+    display: inline-block;
+    font-size: 18px;
+  }
+}
+
+#townsquare.public .bluffs {
+  opacity: 0;
+  transform: scale(0.1);
+}
+
 /***** Role token modal ******/
 ul.tokens li {
   border-radius: 50%;
@@ -267,7 +316,8 @@ ul.reminders .reminder {
   border: 3px solid black;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
   cursor: pointer;
-  padding-top: 65px;
+  padding: 65px 9px 0;
+  line-height: 100%;
   transition: transform 500ms ease;
 
   &:before {
