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

src/components/modals/RoleModal.vue

@@ -11,23 +11,41 @@
           : "bluffing"
       }}
     </h3>
-    <ul class="tokens">
+    <ul>
-      <li
+      <li class="button-group">
-        v-for="role in availableRoles"
+        <span
-        :class="[role.team]"
+          class="button"
-        :key="role.id"
+          :class="{ active: tab === 'editionRoles' }"
-        @click="setRole(role)"
+          @click="tab = 'editionRoles'"
-      >
+          >Edtition Roles</span
-        <Token :role="role" />
+        >
-      </li>
+        <span
-      <li
+          class="button"
-        v-for="role in extraTravellers"
+          :class="{ active: tab === 'otherTravellers' }"
-        :class="[role.team]"
+          @click="tab = 'otherTravellers'"
-        :key="role.id"
+          >Other Travellers</span
-        @click="setRole(role)"
+        >
-      >
-        <Token :role="role" />
       </li>
+      <ul class="tokens" v-if="tab === 'editionRoles'">
+        <li
+          v-for="role in availableRoles"
+          :class="[role.team]"
+          :key="role.id"
+          @click="setRole(role)"
+        >
+          <Token :role="role" />
+        </li>
+      </ul>
+      <ul class="tokens" v-if="tab === 'otherTravellers'">
+        <li
+          v-for="role in extraTravellers"
+          :class="[role.team]"
+          :key="role.id"
+          @click="setRole(role)"
+        >
+          <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;
 }