Silver calculator

_assets/js/calculator.js

@@ -0,0 +1,37 @@
+var calculator = new Vue({
+  el : '#calculator',
+  data : {
+    //guilds: new Array(10)
+    guilds: [
+      '',
+      'Pyro',
+      'Knights',
+      'Confectioners',
+      'Family',
+      'Sofa',
+      'Twisted',
+      'Trium',
+      'Atomic',
+      'Black',
+      'Vagabunden',
+    ]
+  },
+  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/sass/main.scss

@@ -22,6 +22,7 @@
   "modules/war",
   "modules/hamburger",
   "modules/header",
+  "modules/calculator",
 
   // Print
   "base/print"

_assets/sass/modules/_calculator.scss

@@ -0,0 +1,34 @@
+.calculator {
+  display: block;
+
+  table {
+    margin: 80px auto;
+  }
+
+  thead {
+    font-weight: 600;
+    color: #261CD1;
+  }
+
+  td {
+    border: 0;
+    padding: 15px 20px;
+    width: calc(100% / 6);
+  }
+
+  tbody tr {
+    &:nth-child(odd) td {
+      background: #FAFAFC;
+    }
+  }
+
+  input {
+    border: 0;
+    font: inherit;
+    font-weight: 600;
+    background: none;
+    outline: 0;
+    cursor: text;
+    color: #261CD1;
+  }
+}