git push

_assets/js/calculator.js

@@ -15,23 +15,5 @@ var calculator = new Vue({
       'G9',
       'G10',
     ]
-  },
-  computed: {
-    // Helps render enemy teams in order by power level
-    orderedEnemies: function () {
-      return orderByPower(this.map.enemySlots);
-    },
-    // Helps render allied teams in order by power level
-    orderedAllies: function () {
-      return orderByPower(this.map.ourSlots);
-    },
-    // Renders total team powers: hero, titan, total
-    getAllyPower: function () {
-      return getTotalPower(this.map.ourSlots);
-    },
-    // Renders total enemy team powers: hero, titan, total
-    getEnemyPower: function () {
-      return getTotalPower(this.map.enemySlots);
-    }
   }
 });

_assets/js/toe.js

@@ -0,0 +1,102 @@
+$(function(){
+var toe = new Vue({
+  el: '#toe',
+  data: {
+    only_selected: true,
+    filters: 'any',
+    titans: [
+      '4000', '4001', '4002', '4003',
+      '4010', '4011', '4012', '4013',
+      '4020', '4021', '4022', '4023'
+    ],
+    selectedTitans: [],
+    matches: []
+  },
+  methods: {
+    getEnemyTeam: function (team) {
+      var titans = '';
+      for (titan in team) titans += titan;
+
+      return titans;
+    },
+
+    getSelectedTitans: function () {
+      var titans = '';
+      var selectedTeam = this.sortedSelectedTitans;
+      for (titan in selectedTeam) titans += selectedTeam[titan];
+
+      return titans;
+    }
+  },
+  computed: {
+    sortedSelectedTitans: function () {
+      return this.selectedTitans.sort();
+    },
+
+    filteredMatches: function () {
+      var t = this;
+      var aFilteredMatches = t.matches.filter(function (match) {
+        return (
+          t.only_selected === false &&
+          (
+            (t.filters == 'any' && match.enemypower < 1000000) ||
+            (t.filters == 'only_lords' && match.enemypower > 1000000) ||
+            (t.filters == 'only_gt_600k' && match.enemypower > 600000 && match.enemypower < 1000000) ||
+            (t.filters == 'misses' && match.enemypower < 1000000 && match.defenceScoreEarned < 50)
+          )
+
+          ||
+
+          t.only_selected === true && t.getSelectedTitans() == t.getEnemyTeam(match.defBattle.attackers) &&
+          (
+            (t.filters == 'any' && match.enemypower < 1000000) ||
+            ((t.filters == 'only_lords') && (match.enemypower > 1000000)) ||
+            ((t.filters == 'only_gt_600k') && (match.enemypower > 600000) && (match.enemypower < 1000000)) ||
+            ((t.filters == 'misses') && match.enemypower < 1000000 && (match.defenceScoreEarned < 50))
+          )
+        )
+      });
+
+      var orderedMatches = aFilteredMatches.sort(function(a, b) {
+        return b.enemypower - a.enemypower;
+      });
+
+      return orderedMatches;
+    }
+  }
+});
+
+function getData(fileindex) {
+  var nextfile = fileindex + 1;
+
+  $.get('/toe/' + fileindex + '.json', function (data) {
+    var matches = data.results[0].result.response.results;
+
+    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;
+      }
+      matches[match].enemypower = power;
+
+      toe.matches.push(matches[match]);
+    }
+  })
+    .done(function () {
+      getData(nextfile);
+      $('.loadingbar').css({
+        'width': fileindex + '%'
+      });
+    })
+    .fail(function () {
+      $('.loadingbar').css('width', '100%').delay(150).fadeOut(150);
+    });
+}
+
+if ($('#toe').length) {
+  getData(1);
+}
+});

_assets/sass/main.scss

@@ -23,6 +23,7 @@
   "modules/hamburger",
   "modules/header",
   "modules/calculator",
+  "modules/toe",
 
   // Print
   "base/print"

_assets/sass/modules/_toe.scss

@@ -0,0 +1,81 @@
+.loadingbar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 8px;
+  background: #3a86ff;
+}
+
+.toe {
+  .titans {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    width: 200px;
+    margin: 0 auto 60px;
+
+    li {
+      flex: 0 0 25%;
+      width: 25%;
+      max-width: 25%;
+    }
+
+    img {
+      opacity: .5;
+      max-width: 46px;
+      margin: 2px;
+    }
+
+    input {
+      display: none;
+
+      &:checked + img {
+        opacity: 1;
+      }
+    }
+  }
+
+  table {
+    width: 700px;
+    margin: 0 auto;
+
+    tfoot {
+      td {
+        font-weight: bold;
+        padding: 40px 0 20px;
+      }
+    }
+
+    thead {
+      font-weight: 600;
+      color: #261CD1;
+
+      th {
+        padding-bottom: 20px;
+        font-weight: 600;
+      }
+    }
+
+    td {
+      padding: 5px 10px;
+      text-align: center;
+      vertical-align: middle;
+      border: solid $white;
+      border-width: 2px 0;
+    }
+
+    .missed td:first-child {
+      border-left: 8px solid #ffadad;
+    }
+  }
+
+  img {
+    max-width: 32px;
+    background: black;
+    border-radius: 50%;
+    vertical-align: middle;
+    margin: 1px;
+    border: 1px solid #666;
+  }
+}