adding tabs to role modal and moving non edition travellers in to second tab

src/components/modals/RoleModal.vue

@@ -11,7 +11,22 @@
           : "bluffing"
       }}
     </h3>
-    <ul class="tokens">
+    <ul>
+      <li class="button-group">
+        <span
+          class="button"
+          :class="{ active: tab === 'editionRoles' }"
+          @click="tab = 'editionRoles'"
+          >Edtition Roles</span
+        >
+        <span
+          class="button"
+          :class="{ active: tab === 'otherTravellers' }"
+          @click="tab = 'otherTravellers'"
+          >Other Travellers</span
+        >
+      </li>
+      <ul class="tokens" v-if="tab === 'editionRoles'">
         <li
           v-for="role in availableRoles"
           :class="[role.team]"
@@ -20,6 +35,8 @@
         >
           <Token :role="role" />
         </li>
+      </ul>
+      <ul class="tokens" v-if="tab === 'otherTravellers'">
         <li
           v-for="role in extraTravellers"
           :class="[role.team]"
@@ -29,6 +46,7 @@
           <Token :role="role" />
         </li>
       </ul>
+    </ul>
   </Modal>
 </template>
 
@@ -63,6 +81,11 @@ export default {
     ...mapState(["modals", "roles", "session"]),
     ...mapState("players", ["players"])
   },
+  data() {
+    return {
+      tab: "editionRoles"
+    };
+  },
   methods: {
     setRole(role) {
       if (this.playerIndex < 0) {
@@ -118,6 +141,10 @@ ul.tokens li {
   }
 }
 
+.button.active {
+  background: linear-gradient(to bottom, $townsfolk 0%, rgba(0, 0, 0, 0.7) 100%);
+}
+
 #townsquare.spectator ul.tokens li.traveler {
   display: none;
 }