added ability tooltips

fixed role selection modal buttons
added role selection modal randomizer

src/App.vue

@@ -312,6 +312,24 @@ ul.editions .edition {
 }
 
 // Buttons
+.button-group {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-content: center;
+  .button {
+    margin: 5px 0;
+    border-radius: 0;
+    &:first-child {
+      border-top-left-radius: 15px;
+      border-bottom-left-radius: 15px;
+    }
+    &:last-child {
+      border-top-right-radius: 15px;
+      border-bottom-right-radius: 15px;
+    }
+  }
+}
 .button {
   padding: 0;
   border: solid 0.125em transparent;
@@ -336,8 +354,9 @@ ul.editions .edition {
   &:hover {
     color: red;
   }
-  &:disabled {
+  &.disabled {
     color: gray;
+    cursor: default;
   }
   &:before,
   &:after {

src/components/Modal.vue

@@ -44,7 +44,6 @@ export default {
   padding: 10px 20px;
   border-radius: 10px;
   box-shadow: 2px 2px 20px 1px #000;
-  overflow-x: auto;
   display: flex;
   flex-direction: column;
   max-width: 60%;
@@ -62,7 +61,6 @@ export default {
     flex-wrap: wrap;
     align-content: center;
     align-items: center;
-    overflow: hidden;
     justify-content: center;
     font-size: 75%;
     line-height: 100%;

src/components/Player.vue

@@ -11,9 +11,7 @@
       <div class="shroud" @click="toggleStatus()"></div>
       <div class="life" @click="toggleStatus()"></div>
       <Token :role="player.role" @set-role="setRole" />
-      <div class="ability" v-if="player.role.ability">
-        {{ player.role.ability }}
-      </div>
+
       <div class="name" @click="changeName">
         {{ player.name }}
         <span class="remove" @click.stop="$emit('remove-player', player)">
@@ -220,7 +218,7 @@ export default {
 }
 
 /***** Player name *****/
-.name {
+.player > .name {
   font-size: 120%;
   line-height: 120%;
   filter: drop-shadow(0 0 1px rgba(0, 0, 0, 1))
@@ -241,33 +239,7 @@ export default {
 #townsquare.public .ability {
   display: none;
 }
-.circle .ability {
-  position: absolute;
-  padding: 5px 10px;
-  top: 20px;
-  right: 100%;
-  width: 250px;
-  z-index: 25;
-  font-size: 80%;
-  background: rgba(0, 0, 0, 0.7);
-  border-radius: 10px;
-  border: 3px solid black;
-  text-align: left;
-  display: none;
-  &:after {
-    content: " ";
-    border: 10px solid transparent;
-    position: absolute;
-    left: 100%;
-    width: 0;
-    height: 0;
-    border-left-color: black;
-    top: 20px;
-    margin: 0 2px;
-  }
-}
-
-.player:hover .ability {
+.circle .player:hover .ability {
   display: block;
 }
 

src/components/RoleSelectionModal.vue

@@ -19,11 +19,19 @@
         <Token :role="role" />
       </li>
     </ul>
-    <div class="button"
-      @click="assignRoles()"
-      v-bind:disabled="selectedRoles > nontravelerPlayers || !selectedRoles"
-    >
-      Assign {{ selectedRoles }} roles randomly
+    <div class="button-group">
+      <div
+        class="button"
+        @click="assignRoles"
+        v-bind:class="{
+          disabled: selectedRoles > nontravelerPlayers || !selectedRoles
+        }"
+      >
+        Assign {{ selectedRoles }} roles randomly
+      </div>
+      <div class="button" @click="selectRandomRoles">
+        Randomize roles
+      </div>
     </div>
   </Modal>
 </template>
@@ -78,7 +86,7 @@ export default {
     close() {
       this.$emit("close");
     },
-    showRoleSelectionModal() {
+    selectRandomRoles() {
       this.roleSelection = {};
       this.roles.forEach(role => {
         if (!this.roleSelection[role.team]) {
@@ -102,26 +110,26 @@ export default {
       });
     },
     assignRoles() {
-      // generate list of selected roles and randomize it
-      const roles = Object.values(this.roleSelection)
-        .map(roles => roles.filter(role => role.selected))
-        .reduce((a, b) => [...a, ...b], [])
-        .map(a => [Math.random(), a])
-        .sort((a, b) => a[0] - b[0])
-        .map(a => a[1]);
-      this.players.forEach(player => {
-        if (player.role.team !== "traveler" && roles.length) {
-          player.role = roles.pop();
-        }
-      });
-      this.close();
+      if (this.selectedRoles <= this.nontravelerPlayers && this.selectedRoles) {
+        // generate list of selected roles and randomize it
+        const roles = Object.values(this.roleSelection)
+          .map(roles => roles.filter(role => role.selected))
+          .reduce((a, b) => [...a, ...b], [])
+          .map(a => [Math.random(), a])
+          .sort((a, b) => a[0] - b[0])
+          .map(a => a[1]);
+        this.players.forEach(player => {
+          if (player.role.team !== "traveler" && roles.length) {
+            player.role = roles.pop();
+          }
+        });
+        this.close();
+      }
     }
   },
-  watch: {
-    isOpen(newIsOpen) {
-      if (newIsOpen) {
-        this.showRoleSelectionModal();
-      }
+  mounted: function() {
+    if (!Object.keys(this.roleSelection).length) {
+      this.selectRandomRoles();
     }
   }
 };

src/components/Token.vue

@@ -7,7 +7,10 @@
       v-bind:class="['leaf-top' + role.reminders.length]"
     ></span>
     <span class="leaf-orange" v-if="role.setup"></span>
-    <div>{{ role.name }}</div>
+    <div class="name">{{ role.name }}</div>
+    <div class="ability" v-if="role.ability">
+      {{ role.ability }}
+    </div>
   </div>
 </template>
 
@@ -39,11 +42,6 @@ export default {
   background: url("../assets/token.png") center center;
   background-size: 100%;
   text-align: center;
-  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;
   border: 3px solid black;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
   cursor: pointer;
@@ -58,13 +56,6 @@ export default {
     top: 0;
   }
 
-  div {
-    position: absolute;
-    top: 73%;
-    width: 100%;
-    line-height: 100%;
-  }
-
   span {
     position: absolute;
     width: 100%;
@@ -106,5 +97,47 @@ export default {
       background-image: url("../assets/leaf-top5.png");
     }
   }
+
+  .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 {
+    position: absolute;
+    padding: 5px 10px;
+    top: 20px;
+    left: 110%;
+    width: 250px;
+    z-index: 25;
+    font-size: 80%;
+    background: rgba(0, 0, 0, 0.7);
+    border-radius: 10px;
+    border: 3px solid black;
+    text-align: left;
+    display: none;
+
+    &:after {
+      content: " ";
+      border: 10px solid transparent;
+      position: absolute;
+      right: 100%;
+      width: 0;
+      height: 0;
+      border-right-color: black;
+      top: 10px;
+      margin: 0 2px;
+    }
+  }
+  &:hover .ability {
+    display: block;
+  }
 }
 </style>

src/components/TownSquare.vue

@@ -138,7 +138,9 @@ export default {
     &:before {
       background-image: url("../assets/icons/#{$img}.png");
     }
-    font-size: $fontsize;
+    .name {
+      font-size: $fontsize;
+    }
   }
 
   .reminder.#{$img}:before {
@@ -181,18 +183,18 @@ export default {
       transform: rotate($rot * 1deg);
       @if $i - 1 <= $item-count / 2 {
         z-index: $item-count - $i + 1;
-        .ability {
-          left: 100%;
-          right: auto;
-          &:after {
-            border-left-color: transparent;
-            border-right-color: black;
-            left: auto;
-            right: 100%;
-          }
-        }
       } @else {
         z-index: $i - 1;
+        .ability {
+          right: 110%;
+          left: auto;
+          &:after {
+            border-right-color: transparent;
+            border-left-color: black;
+            right: auto;
+            left: 100%;
+          }
+        }
       }
       > * {
         transform: rotate($rot * -1deg);
@@ -245,6 +247,7 @@ ul.tokens li {
   }
   &:hover {
     transform: scale(1.2);
+    z-index: 10;
   }
 }