fixed travelers, added zoom

src/App.vue

@@ -5,6 +5,7 @@
       :is-public="isPublic"
       :players="players"
       :roles="roles"
+      :zoom="zoom"
     ></TownSquare>
 
     <Modal
@@ -37,6 +38,12 @@
       <font-awesome-icon icon="cogs" @click="isControlOpen = !isControlOpen" />
       <ul v-if="isControlOpen">
         <li @click="togglePublic">Toggle <em>G</em>rimoire</li>
+        <li>
+          Size
+          <font-awesome-icon @click="zoom -= 0.1" icon="search-minus" />
+          {{ Math.round(zoom * 100) }}%
+          <font-awesome-icon @click="zoom += 0.1" icon="search-plus" />
+        </li>
         <li @click="addPlayer" v-if="players.length < 20">
           <em>A</em>dd Player
         </li>
@@ -84,7 +91,8 @@ export default {
       isRoleModalOpen: false,
       players: [],
       roles: this.getRolesByEdition(),
-      edition: "tb"
+      edition: "tb",
+      zoom: 1
     };
   },
   methods: {

src/components/Player.vue

@@ -169,10 +169,6 @@ export default {
   }
 
   &.dead {
-    &.traveler {
-      filter: grayscale(100%);
-    }
-
     &.no-vote .life:after {
       display: none;
     }
@@ -193,6 +189,10 @@ export default {
       }
     }
   }
+
+  &.traveler .life {
+    filter: grayscale(100%);
+  }
 }
 
 #townsquare.public .player {

src/components/RoleSelectionModal.vue

@@ -61,8 +61,10 @@ export default {
   },
   computed: {
     nontravelerPlayers: function() {
-      return this.players.filter(({ role }) => role && role.team !== "traveler")
+      return Math.min(
-        .length;
+        this.players.filter(({ role }) => role && role.team !== "traveler").length,
+        15
+      );
     },
     selectedRoles: function() {
       return Object.values(this.roleSelection)

src/components/TownInfo.vue

@@ -52,9 +52,10 @@ export default {
   },
   computed: {
     teams: function() {
-      const nontravelers = this.players.filter(
+      const nontravelers = Math.min(
-        player => player.role.team !== "traveler"
+        this.players.filter(player => player.role.team !== "traveler").length,
-      ).length;
+        15
+      );
       const alive = this.players.filter(player => player.hasDied !== true)
         .length;
       return {

src/components/TownSquare.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="townsquare" class="square" v-bind:class="{ public: isPublic }">
+  <div id="townsquare" class="square" v-bind:class="{ public: isPublic }" v-bind:style="{ zoom: zoom }">
     <ul class="circle" v-bind:class="['size-' + players.length]">
       <Player
         v-for="(player, index) in players"
@@ -64,6 +64,10 @@ export default {
     roles: {
       type: Map,
       required: true
+    },
+    zoom: {
+      type: Number,
+      required: true
     }
   },
   data() {

src/main.js

@@ -8,7 +8,9 @@ import {
   faUserFriends,
   faUser,
   faTimesCircle,
-  faCogs
+  faCogs,
+  faSearchMinus,
+  faSearchPlus
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 
@@ -19,7 +21,9 @@ library.add(
   faUserFriends,
   faUser,
   faTimesCircle,
-  faCogs
+  faCogs,
+  faSearchMinus,
+  faSearchPlus
 );
 
 Vue.component("font-awesome-icon", FontAwesomeIcon);