Add titan shortcut selections

_assets/js/toe.js

@@ -25,6 +25,10 @@ var toe = new Vue({
       for (titan in selectedTeam) titans += selectedTeam[titan];
 
       return titans;
+    },
+
+    setTitans: function (team) {
+      this.selectedTitans = team;
     }
   },
   computed: {

_assets/sass/modules/_toe.scss

@@ -44,7 +44,61 @@
     flex-wrap: wrap;
     justify-content: flex-start;
     width: 200px;
-    margin: 20px auto 60px;
+
+    &__container {
+      display: flex;
+      align-items: flex-start;
+      justify-content: center;
+      flex-wrap: wrap;
+      margin: 20px 0 60px;
+    }
+
+    &__shortcut {
+      display: flex;
+      flex-direction: column;
+      margin-left: 37px;
+
+      button {
+        width: 46px;
+        height: 46px;
+        line-height: 46px;
+        border-radius: 50%;
+        margin: 2px;
+        font-size: 16px;
+        font-weight: 300;
+        text-align: center;
+        color: $white;
+        border: 1px solid rgba($black, .2);
+      }
+    }
+
+    &__waterteam {
+      background: #359AE8;
+    }
+
+    &__fireteam {
+      background: #F54A48;
+    }
+
+    &__earthteam {
+      background: #4EBF41;
+    }
+
+    &__row {
+      display: flex;
+      align-items: flex-start;
+      justify-content: center;
+      flex-wrap: wrap;
+      width: 100%;
+      margin-top: 20px;
+    }
+
+    &__clear {
+      padding: 8px 32px;
+      border-radius: 16px;
+      background: rgba($black, .2);
+      border: 1px solid rgba($black, .2);
+    }
 
     li {
       flex: 0 0 25%;

_layouts/toe.html

@@ -29,6 +29,7 @@
         </label>
       </div>
 
+      <div class="titans__container">
         <ul class="titans">
           <li v-for="titan in titans">
             <label>
@@ -38,6 +39,17 @@
           </li>
         </ul>
 
+        <div class="titans__shortcut">
+          <button title="Select Water Team" v-on:click="setTitans(['4000', '4001', '4002', '4003'])" class="titans__waterteam">💧</button>
+          <button title="Select Fire Team" v-on:click="setTitans(['4010', '4011', '4012', '4013'])" class="titans__fireteam">🔥</button>
+          <button title="Select Earth Team" v-on:click="setTitans(['4020', '4021', '4022', '4023'])" class="titans__earthteam">🍀</button>
+        </div>
+
+        <div class="titans__row">
+          <button v-on:click="setTitans([])" class="titans__clear">Clear Selection</button>
+        </div>
+      </div>
+
       <table>
         <thead>
           <tr>