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];
-        // 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);
+        matchesArray.push(matches[match]);
       }
 
       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",
@@ -27,4 +28,4 @@
 
   // Print
   "base/print"
-;
+;

_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;
       }
     }