Remove <600k toe teams + perf imporvements

_assets/js/toe.js

@@ -59,19 +59,8 @@ $(function () {
       var matches = data.results[0].result.response.results;
       var matchesArray = [];
 
-      // @TODO should move everything below to the build process
-      // speed things up a little
       for (match in matches) {
-        var thisMatch = matches[match];
+        matchesArray.push(matches[match]);
-        // add enemy total power to match data
-        var power = 0;
-        var attackerTeam = thisMatch.defBattle.attackers;
-        for (titan in attackerTeam) {
-          power += attackerTeam[titan].power;
-        }
-        thisMatch.enemypower = power;
-
-        matchesArray.push(thisMatch);
       }
 
       var orderedMatches = matchesArray.sort(function (a, b) {
@@ -79,6 +68,7 @@ $(function () {
       });
 
       toe.matches = orderedMatches;
+      console.log(toe.matches);
     });
   }
 });

_assets/sass/main.scss

@@ -19,6 +19,7 @@
   // Modules
   "modules/wrapper",
   "modules/buttons",
+  "modules/titan_thumbs",
   "modules/war",
   "modules/hamburger",
   "modules/header",

_assets/sass/modules/_titan_thumbs.scss

@@ -0,0 +1,29 @@
+[data-titan-thumb] {
+  display: inline-block;
+  width: 32px;
+  height: 32px;
+  background: $black;
+  border-radius: 50%;
+  vertical-align: middle;
+  margin: 1px;
+  border: 1px solid #666;
+  background-size: cover;
+
+  &.thumb--large {
+    width: 46px;
+    height: 46px;
+    margin: 2px;
+  }
+}
+
+$titans: 0, 1, 2, 3;
+$elements: 400, 401, 402;
+
+@each $element in $elements {
+  @each $titan in $titans {
+    $id: #{$element}#{$titan};
+    [data-titan-thumb="#{$id}"] {
+      background-image: url("../img/Titans/#{$id}.png");
+    }
+  }
+}

_assets/sass/modules/_toe.scss

@@ -19,7 +19,7 @@
       text-transform: uppercase;
       letter-spacing: .2px;
       display: block;
-      padding: 3px 12px;
+      padding: 3px 16px;
       line-height: 20px;
       margin: 0 5px;
       box-shadow: 0 0 0 1px #eee;
@@ -56,7 +56,7 @@
     &__shortcut {
       display: flex;
       flex-direction: column;
-      margin-left: 37px;
+      margin-left: 15px;
 
       button {
         width: 46px;
@@ -106,7 +106,7 @@
       max-width: 25%;
     }
 
-    img {
+    .thumb--large {
       opacity: .5;
       max-width: 46px;
       margin: 2px;
@@ -115,7 +115,7 @@
     input {
       display: none;
 
-      &:checked + img {
+      &:checked + .thumb--large {
         opacity: 1;
       }
     }

_layouts/toe.html

@@ -12,15 +12,11 @@
         <div class="toe__filters">
           <label>
             <input type="radio" name="filter" value="any" v-model="filters" />
-            <span>All</span>
+            <span>No Filters</span>
-          </label>
-          <label>
-            <input type="radio" name="filter" value="only_gt_600k" v-model="filters" />
-            <span>> 600k</span>
           </label>
           <label>
             <input type="radio" name="filter" value="misses" v-model="filters" />
-            <span>< 50 points</span>
+            <span>Misses</span>
           </label>
           <label>
             <input type="radio" name="filter" value="only_lords" v-model="filters" />
@@ -33,7 +29,7 @@
             <li v-for="titan in titans">
               <label>
                 <input type="checkbox" :value="titan" v-model="selectedTitans" />
-                <img :src="'../assets/img/Titans/'+ titan + '.png'" />
+                <span class="thumb--large" :data-titan-thumb="titan" />
               </label>
             </li>
           </ul>
@@ -64,12 +60,11 @@
               v-for="(match, index) in matches" 
               v-bind:class="{missed : match.defenceScoreEarned < 50}"
 
-              v-show="
+              v-if="
               !selectedTitans.length &&
               (
                 (filters == 'any' && match.enemypower < 1000000) ||
                 (filters == 'only_lords' && match.enemypower > 1000000) ||
-                (filters == 'only_gt_600k' && match.enemypower > 600000 && match.enemypower < 1000000) ||
                 (filters == 'misses' && match.enemypower < 1000000 && match.defenceScoreEarned < 50)
               )
 
@@ -79,7 +74,6 @@
               (
                 (filters == 'any' && match.enemypower < 1000000) ||
                 ((filters == 'only_lords') && (match.enemypower > 1000000)) ||
-                ((filters == 'only_gt_600k') && (match.enemypower > 600000) && (match.enemypower < 1000000)) ||
                 ((filters == 'misses') && match.enemypower < 1000000 && (match.defenceScoreEarned < 50))
               )"
               >
@@ -88,16 +82,16 @@
               </td>
 
               <td>
-                <img 
+                <span 
                   v-for="(titan, index) in match.defBattle.attackers" 
                   :title="'Totem level ' + titan.elementSpiritLevel + ', ' + titan.elementSpiritStar + '*'" 
-                  :src="'../assets/img/Titans/'+ titan.id + '.png'" />
+                  :data-titan-thumb="titan.id" /></span>
               </td>
 
               <td>
-                <img 
+                <span 
                   v-for="titan in match.defBattle.defenders[0]" 
-                  :src="'../assets/img/Titans/'+ titan.id + '.png'" />
+                  :data-titan-thumb="titan.id" /></span>
               </td>
 
               <td :title="match.defBattle.userId | humanPlayer">