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

_includes/scripts.html

@@ -12,6 +12,7 @@
   <script src="{{ "/assets/js/localstorage.js" | relative_url }}"></script>
   <script src="{{ "/assets/js/hamburger.js" | relative_url }}"></script>
   <script src="{{ "/assets/js/calculator.js" | relative_url }}"></script>
+  <script src="{{ "/assets/js/toe.js" | relative_url }}"></script>
 {% endif %}
 
 <!-- / _includes/partials/scripts.html -->

_layouts/toe.html

@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="en" data-baseurl="{{site.baseurl}}">
+{% include svg.html %}
+
+{% include head.html %}
+
+<body>
+  <main class="wrapper">
+    <div class="loadingbar"></div>
+
+    {% raw %}
+    <div id="toe" class="toe">
+      <label>
+        <input type="checkbox" v-model="only_selected" />
+        <span>Show only selected teams</span>
+      </label>
+
+      <br/>
+
+      <label>
+        <input type="radio" name="filter" value="any" v-model="filters" />
+        <span>All</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>
+      </label>
+      <label>
+        <input type="radio" name="filter" value="only_lords" v-model="filters" />
+        <span>Lords</span>
+      </label>
+
+      <ul class="titans">
+        <li v-for="titan in titans">
+          <label>
+            <input type="checkbox" :value="titan" v-model="selectedTitans" />
+            <img :src="'/assets/img/Titans/'+ titan + '.png'" />
+          </label>
+        </li>
+      </ul>
+
+      <table>
+        <thead>
+          <tr>
+            <th width="85">Power</th>
+            <th width="249">Attackers</th>
+            <th width="249">Defenders</th>
+            <th>Defense score</th>
+          </tr>
+        </thead>
+
+        <tbody>
+          <tr v-for="(match, index) in filteredMatches" v-bind:class="{missed : match.defenceScoreEarned < 50}">
+            <td>
+              <strong>{{ match.enemypower }}</strong>
+            </td>
+
+            <td>
+              <img 
+                v-for="(titan, index) in match.defBattle.attackers" 
+                :title="'Totem level ' + titan.elementSpiritLevel + ', ' + titan.elementSpiritStar + '*'" 
+                :src="'/assets/img/Titans/'+ titan.id + '.png'" />
+            </td>
+
+            <td>
+              <img 
+                v-for="titan in match.defBattle.defenders[0]" 
+                :src="'/assets/img/Titans/'+ titan.id + '.png'" />
+            </td>
+
+            <td>
+              <strong v-bind:class="match.defenceScoreEarned == 50 ? 'green' : 'red'">{{ match.defenceScoreEarned }}</strong>
+            </td>
+          </tr>
+        </tbody>
+
+        <tfoot>
+          <tr>
+            <td colspan="4">
+              Dataset: {{ filteredMatches.length }} battles
+            </td>
+          </tr>
+        </tfoot>
+      </table>
+    </div>
+    {% endraw %}
+  </main>
+
+  {% include footer.html %}
+
+  {% include scripts.html %}
+</body>
+
+</html>

toe.md

@@ -0,0 +1,6 @@
+---
+layout: toe
+title: ''
+meta_description: ''
+meta_image: ''
+---