Git init

_assets/js/app.js

@@ -0,0 +1,79 @@
+
+$('#dataform').on('submit', function (e) {
+  e.preventDefault();
+
+  var warData = JSON.parse( $.trim( $('#data').val() ) );
+
+  if( warData.results && warData.results[1] && warData.results[1].result && warData.results[1].result.response ) {
+    initApp(warData, 'withSave', warData);
+  };
+});
+
+function initApp (data, callback, callbackData) {
+  console.log(data)
+  var mapData = data.results[1].result.response;
+
+  console.log('data', JSON.parse( JSON.stringify(data)) );
+
+  enhanceMap(mapData.enemySlots);
+  enhanceMap(mapData.ourSlots);
+
+  app.map = mapData;
+
+  console.log('app.map', JSON.parse( JSON.stringify(mapData)) );
+
+  Vue.nextTick(function () {
+    // Determine which player team has more power: titans or heroes
+    determineBestTeam('ally');
+    determineBestTeam('enemy');
+
+    // Syncs checkboxes between hero/titan teams
+    syncCheckboxes();
+
+    // Highlights the other player team when the other one is hovered
+    highlightHovered();
+
+    if(callback == 'withSave') {
+      saveToStorage(callbackData);
+    }
+  });
+}
+
+var app = new Vue({
+  el : '#app',
+  data : {
+    // the data obtained from the game
+    map: {}, //mapData,
+    // maps building names and types of data obtained from the game
+    mapSlots: mapSlots,
+    storage: JSON.parse( localStorage.getItem('HeroWarsHistory') ) || []
+  },
+  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);
+    }
+  },
+  filters: {
+    formatNumber: function (value) {
+      return value.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
+    },
+    unixToLocale: function (value) {
+      return new Date(value * 1000).toDateString();
+    }
+  }
+});
+
+

_assets/js/hamburger.js

@@ -0,0 +1,7 @@
+function toggleHamburger () {
+  $('.hamburger').toggleClass('is-active');
+}
+
+$('.hamburger-button').on('click', function () {
+  toggleHamburger();
+});

_assets/js/localstorage.js

@@ -0,0 +1,45 @@
+/*
+ * Compares dates (used to order localstorage items)
+ */
+function compareDates(a, b) {
+  var genreA = a.date;
+  var genreB = b.date;
+  var comparison = 0;
+
+  if (genreA > genreB) {
+    comparison = -1;
+  } else if (genreA < genreB) {
+    comparison = 1;
+  }
+  return comparison;
+}
+
+
+function saveToStorage(warData) {
+  var storageData = JSON.parse( localStorage.getItem('HeroWarsHistory') ) || [];
+
+  storageData.push(warData);
+  storageData.sort(compareDates);
+  localStorage.setItem('HeroWarsHistory', JSON.stringify(storageData) );
+  app.storage = storageData;
+};
+
+
+$('body').on('click', '.js--load-war', function(){
+  var $t = $(this),
+      index = $t.attr('data-item'),
+      localData = JSON.parse( localStorage.getItem('HeroWarsHistory') ),
+      localWar = localData[index];
+
+  initApp(localWar);
+  toggleHamburger();
+});
+
+$('body').on('click', '.js--remove-storage', function (){
+  var storageData = JSON.parse( localStorage.getItem('HeroWarsHistory') ) || [];
+  var index = $(this).attr('data-item');
+
+  storageData.splice(index, 1);
+  localStorage.setItem('HeroWarsHistory', JSON.stringify(storageData) );
+  app.storage = storageData;
+});

_assets/js/map.js

@@ -0,0 +1,121 @@
+var mapSlots = [{
+  "name" : 'Mage Academy',
+  "type" : 'Hero'
+},{
+  "name" : 'Mage Academy',
+  "type" : 'Hero'
+},{
+  "name" : 'Lighthouse',
+  "type" : 'Hero'
+},{
+  "name" : 'Lighthouse',
+  "type" : 'Hero'
+},{
+  "name" : 'Barracks',
+  "type" : 'Hero'
+},{
+  "name" : 'Barracks',
+  "type" : 'Hero'
+},{
+  "name" : 'Bridge',
+  "type" : 'Titan'
+},{
+  "name" : 'Bridge',
+  "type" : 'Titan'
+},{
+  "name" : 'Bridge',
+  "type" : 'Titan'
+},{
+  "name" : 'Spring of Elements',
+  "type" : 'Titan'
+},{
+  "name" : 'Spring of Elements',
+  "type" : 'Titan'
+},{
+  "name" : 'Spring of Elements',
+  "type" : 'Titan'
+},{
+  "name" : 'Foundry',
+  "type" : 'Hero'
+},{
+  "name" : 'Foundry',
+  "type" : 'Hero'
+},{
+  "name" : 'Foundry',
+  "type" : 'Hero'
+},{
+  "name" : 'Gates of Nature',
+  "type" : 'Titan'
+},{
+  "name" : 'Gates of Nature',
+  "type" : 'Titan'
+},{
+  "name" : 'Gates of Nature',
+  "type" : 'Titan'
+},{
+  "name" : 'Bastion of Fire',
+  "type" : 'Titan'
+},{
+  "name" : 'Bastion of Fire',
+  "type" : 'Titan'
+},{
+  "name" : 'Bastion of Fire',
+  "type" : 'Titan'
+},{
+  "name" : 'Bastion of Ice',
+  "type" : 'Titan'
+},{
+  "name" : 'Bastion of Ice',
+  "type" : 'Titan'
+},{
+  "name" : 'Bastion of Ice',
+  "type" : 'Titan'
+},{
+  "name" : 'Citadel',
+  "type" : 'Hero'
+},{
+  "name" : 'Citadel',
+  "type" : 'Hero'
+},{
+  "name" : 'Citadel',
+  "type" : 'Hero'
+},{
+  "name" : 'Citadel',
+  "type" : 'Hero'
+},{
+  "name" : 'Citadel',
+  "type" : 'Hero'
+},{
+  "name" : 'Citadel',
+  "type" : 'Hero'
+},{
+  "name" : 'Mage Academy',
+  "type" : 'Hero'
+},{
+  "name" : 'Lighthouse',
+  "type" : 'Hero'
+},{
+  "name" : 'Barracks',
+  "type" : 'Hero'
+},{
+  "name" : 'Bridge',
+  "type" : 'Titan'
+},{
+  "name" : 'Spring of Elements',
+  "type" : 'Titan'
+},{
+  "name" : 'Foundry',
+  "type" : 'Hero'
+},{
+  "name" : 'Gates of Nature',
+  "type" : 'Titan'
+},{
+  "name" : 'Bastion of Fire',
+  "type" : 'Titan'
+},{
+  "name" : 'Bastion of Ice',
+  "type" : 'Titan'
+},{
+  "name" : 'Citadel',
+  "type" : 'Hero'
+}];

_assets/js/utils.js

@@ -0,0 +1,150 @@
+/*
+ * Adds more data to the mapData object
+ * so it's easier to print out information
+ * such as buildings/location and total power
+ */
+function enhanceMap( slots ) {
+  for (var index in slots) {
+    //console.log(slots[index])
+    var teamSlot = slots[index];
+
+    if(teamSlot.status == 'empty' || teamSlot.user == null) {
+      teamSlot['user'] = {
+        "name" : 'Empty'
+      }
+    }
+
+    // Add the name and type of building for this team
+    var mapSlot = mapSlots[index - 1];
+
+    teamSlot['location'] = {
+      "name" : mapSlot.name,
+      "type" : mapSlot.type
+    }
+
+    // Add the total amount of team power
+    var power = 0;
+    for (var teamMember in teamSlot.team[0]) {
+      power += teamSlot.team[0][teamMember].power;
+    }
+    teamSlot['power'] = power;
+  }
+}
+
+
+/*
+ * Compares team power (used to order teams by power)
+ */
+function compare(a, b) {
+  var genreA = a.power;
+  var genreB = b.power;
+  var comparison = 0;
+
+  if (genreA > genreB) {
+    comparison = -1;
+  } else if (genreA < genreB) {
+    comparison = 1;
+  }
+  return comparison;
+}
+
+
+/*
+ * Order teams by power level
+ */
+function orderByPower(teamSlots) {
+  var teamArray = [];
+
+  for(var key in teamSlots) {
+    teamArray.push(teamSlots[key])
+  }
+
+  return teamArray.sort(compare);
+}
+
+
+/*
+ * Determines which player team has more power: titan or hero.
+ * Adds a CSS class to each of the better .ally-hero teams
+ */
+function determineBestTeam(guild) {
+  $.each($('body').find('.js-'+ guild +'-hero'), function () {
+    var $t = $(this);
+    var name = $t.attr('data-name');
+    var heroPower = parseInt( $t.attr('data-power') );
+    var $titanTeam = $('.js-'+ guild +'-titan[data-name="'+ name +'"]');
+    var titanPower = parseInt( $titanTeam.attr('data-power') );
+    var className = 'best-team';
+
+    if (heroPower > titanPower) {
+      $t.addClass(className);
+      $titanTeam.removeClass(className);
+    } else {
+      $titanTeam.addClass(className);
+      $t.removeClass(className);
+    }
+  });
+}
+
+
+/*
+ * Sync checkboxes between hero/titan teams of the same player
+ */
+function syncCheckboxes() {
+  $('input[type="checkbox"]').on('change', function() {
+    var $t = $(this),
+        checkName = $t.attr('name'),
+        playerName = $t.parent().attr('data-name');
+
+    $('[data-name="'+ playerName +'"]')
+      .find('input[name="'+ checkName +'"]')
+      .prop('checked', $t.is(':checked'));
+  });
+}
+
+
+/*
+ * Visual aid to help find the corresponding hero/titan team
+ * when the other one is hovered
+ */
+function highlightHovered() {
+  $('.team').on({
+    'mouseenter': function () {
+      var $t = $(this),
+          name = $t.attr('data-name');
+      $('.team[data-name="'+ name +'"]').addClass('is--hover');
+    },
+    'mouseleave': function () {
+      var $t = $(this),
+          name = $t.attr('data-name');
+      $('.team[data-name="'+ name +'"]').removeClass('is--hover');
+    }
+  })
+}
+
+function getTotalPower(guild) {
+  var heroPower = 0;
+  var titanPower = 0;
+  var totalPower = 0;
+  var data = guild; //this.map.ourSlots;
+
+  for (var i in data) {
+    var member = data[i];
+
+    if( member.location.type == "Hero" ) {
+      heroPower += member.power;
+    } else {
+      titanPower += member.power;
+    }
+
+    totalPower += member.power;
+  }
+
+  return {
+    "heroPower" : heroPower,
+    "titanPower" : titanPower,
+    "totalPower": totalPower
+  };
+}
+
+