Update make some changes to the JS files of the app
to match the server output. Signed-off-by: Josef Fröhle <github@josef-froehle.de>
This commit is contained in:
@@ -1,14 +1,14 @@
|
|||||||
|
|
||||||
var DEBUG_APP = false;
|
var DEBUG_APP = true;
|
||||||
|
|
||||||
$('#dataform').on('submit', function (e) {
|
$('#dataform').on('submit', function (e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
var inputContent = $.trim( $('#data').val() );
|
var inputContent = $.trim($('#data').val());
|
||||||
|
|
||||||
if (inputContent.length > 0) {
|
if (inputContent.length > 0) {
|
||||||
var warData = JSON.parse( inputContent );
|
var warData = JSON.parse(inputContent);
|
||||||
if (initApp(warData, 'withSave', warData) != false){
|
if (initApp(warData, 'withSave', warData) != false) {
|
||||||
$('#data').val('');
|
$('#data').val('');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -16,43 +16,43 @@ $('#dataform').on('submit', function (e) {
|
|||||||
|
|
||||||
$('#fileUpload').on('change', function () {
|
$('#fileUpload').on('change', function () {
|
||||||
var fileUploader = document.getElementById("fileUpload");
|
var fileUploader = document.getElementById("fileUpload");
|
||||||
if ( fileUploader.files.length > 0 ) {
|
if (fileUploader.files.length > 0) {
|
||||||
getFileContents( fileUploader.files[0] );
|
getFileContents(fileUploader.files[0]);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
function initApp (data, callback, callbackData) {
|
function initApp(data, callback, callbackData) {
|
||||||
if( data.results && data.results.length == 3 ){
|
if (data.results && data.results.length == 3) {
|
||||||
var reWriteMapData = JSON.parse(JSON.stringify(data));
|
var reWriteMapData = JSON.parse(JSON.stringify(data));
|
||||||
reWriteMapData.results[1].ident = reWriteMapData.results[1].ident.replace(/group_\d+_/g, "");
|
reWriteMapData.results[1].ident = reWriteMapData.results[1].ident.replace(/group_\d+_/g, "");
|
||||||
reWriteMapData.results[2].ident = reWriteMapData.results[2].ident.replace(/group_\d+_/g, "");
|
reWriteMapData.results[2].ident = reWriteMapData.results[2].ident.replace(/group_\d+_/g, "");
|
||||||
reWriteMapData.results.shift();
|
reWriteMapData.results.shift();
|
||||||
callbackData = data = JSON.parse(JSON.stringify(reWriteMapData)) ;
|
callbackData = data = JSON.parse(JSON.stringify(reWriteMapData));
|
||||||
delete reWriteMapData;
|
delete reWriteMapData;
|
||||||
if (DEBUG_APP) console.log(data);
|
if (DEBUG_APP) console.log(data);
|
||||||
}
|
}
|
||||||
if( !data.results || data.results.length !=2 ||
|
if (!data.results || data.results.length != 2 ||
|
||||||
!data.results[0] ||
|
!data.results[0] ||
|
||||||
data.results[0].ident != "body" ||
|
data.results[0].ident != "body" ||
|
||||||
!data.results[1] ||
|
!data.results[1] ||
|
||||||
data.results[1].ident != "clanWarGetInfo" ||
|
data.results[1].ident != "clanWarGetInfo" ||
|
||||||
!data.results[1].result ||
|
!data.results[1].result ||
|
||||||
!data.results[1].result.response ) {
|
!data.results[1].result.response) {
|
||||||
alert("Please recreate the JSON, switch to the main screen, and switch back to GuildWars. Then copy the JSON!");
|
alert("Please recreate the JSON, switch to the main screen, and switch back to GuildWars. Then copy the JSON!");
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (DEBUG_APP) console.log(data)
|
if (DEBUG_APP) console.log(data)
|
||||||
var mapData = data.results[1].result.response;
|
var mapData = data.results[1].result.response;
|
||||||
|
|
||||||
if (DEBUG_APP) console.log('data', JSON.parse( JSON.stringify(data)) );
|
if (DEBUG_APP) console.log('data', JSON.parse(JSON.stringify(data)));
|
||||||
enhanceMap(mapData.enemySlots);
|
enhanceMap(mapData.enemySlots);
|
||||||
enhanceMap(mapData.ourSlots);
|
enhanceMap(mapData.ourSlots);
|
||||||
|
|
||||||
app.map = mapData;
|
app.map = mapData;
|
||||||
app.map.warDate = data.date;
|
app.map.warDate = data.warDate;
|
||||||
|
|
||||||
if (DEBUG_APP) console.log('app.map', JSON.parse( JSON.stringify(mapData)) );
|
if (DEBUG_APP) console.log('app.map', JSON.parse(JSON.stringify(mapData)));
|
||||||
|
|
||||||
Vue.nextTick(function () {
|
Vue.nextTick(function () {
|
||||||
// Determine which player team has more power: titans or heroes
|
// Determine which player team has more power: titans or heroes
|
||||||
@@ -65,45 +65,91 @@ function initApp (data, callback, callbackData) {
|
|||||||
// Highlights the other player team when the other one is hovered
|
// Highlights the other player team when the other one is hovered
|
||||||
highlightHovered();
|
highlightHovered();
|
||||||
|
|
||||||
if(callback == 'withSave') {
|
if (callback == 'withSave') {
|
||||||
saveToStorage(callbackData);
|
saveToStorage(callbackData);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
var app = new Vue({
|
function initApp2(data) {
|
||||||
el : '#app',
|
|
||||||
data : {
|
|
||||||
map: {}, //mapData, the data obtained from the game
|
|
||||||
mapSlots: mapSlots, // maps building names and types of data obtained from the game
|
|
||||||
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();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
|
var mapData = data;
|
||||||
|
if (DEBUG_APP) console.log('data', JSON.parse(JSON.stringify(data)));
|
||||||
|
enhanceMap(mapData.enemySlots);
|
||||||
|
enhanceMap(mapData.ourSlots);
|
||||||
|
|
||||||
|
app.map = mapData;
|
||||||
|
app.map.warDate = data.warDate;
|
||||||
|
|
||||||
|
if (DEBUG_APP) 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();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
var app = {};
|
||||||
|
var jsondata = [];
|
||||||
|
|
||||||
|
if (DEBUG_APP) {
|
||||||
|
Vue.config.devtools = true;
|
||||||
|
}
|
||||||
|
console.log("hello");
|
||||||
|
$.getJSON('/hwtools/data/clanWarGetInfo.json', function (data) {
|
||||||
|
console.log("hello 222222222");
|
||||||
|
jsondata = data
|
||||||
|
jsondata = jsondata.filter(function (el) {
|
||||||
|
return !!(el.enemyClan && el.enemyClan.title);
|
||||||
|
});
|
||||||
|
mapData = jsondata[0];
|
||||||
|
enhanceMap(mapData.enemySlots);
|
||||||
|
enhanceMap(mapData.ourSlots);
|
||||||
|
|
||||||
|
console.log(jsondata[0]);
|
||||||
|
app = new Vue({
|
||||||
|
el: '#app',
|
||||||
|
data: {
|
||||||
|
map: mapData, //mapData, the data obtained from the game
|
||||||
|
mapSlots: mapSlots, // maps building names and types of data obtained from the game
|
||||||
|
storage: jsondata || []
|
||||||
|
},
|
||||||
|
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();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.fail(function( jqxhr, textStatus, error ) {
|
||||||
|
var err = textStatus + ", " + error;
|
||||||
|
console.log( "Request Failed: " + err );
|
||||||
|
})
|
||||||
@@ -16,30 +16,35 @@ function compareDates(a, b) {
|
|||||||
|
|
||||||
|
|
||||||
function saveToStorage(warData) {
|
function saveToStorage(warData) {
|
||||||
var storageData = JSON.parse( localStorage.getItem('HeroWarsHistory') ) || [];
|
//var storageData = JSON.parse( localStorage.getItem('HeroWarsHistory') ) || [];
|
||||||
|
var storageData = JSON.parse(jsondata) || [];
|
||||||
|
|
||||||
storageData.push(warData);
|
storageData.push(warData);
|
||||||
storageData.sort(compareDates);
|
storageData.sort(compareDates);
|
||||||
localStorage.setItem('HeroWarsHistory', JSON.stringify(storageData) );
|
localStorage.setItem('HeroWarsHistory', JSON.stringify(storageData));
|
||||||
app.storage = storageData;
|
app.storage = storageData;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
$('body').on('click', '.js--load-war', function(){
|
$('body').on('click', '.js--load-war', function () {
|
||||||
var $t = $(this),
|
var $t = $(this),
|
||||||
index = $t.attr('data-item'),
|
index = $t.attr('data-item'),
|
||||||
localData = JSON.parse( localStorage.getItem('HeroWarsHistory') ),
|
//localData = JSON.parse( localStorage.getItem('HeroWarsHistory') ),
|
||||||
localWar = localData[index];
|
//localData = JSON.parse(jsondata),
|
||||||
|
//localWar = localData[index];
|
||||||
|
localWar = jsondata[index];
|
||||||
|
|
||||||
initApp(localWar);
|
initApp2(localWar);
|
||||||
toggleHamburger();
|
toggleHamburger();
|
||||||
});
|
});
|
||||||
|
|
||||||
$('body').on('click', '.js--remove-storage', function (){
|
$('body').on('click', '.js--remove-storage', function () {
|
||||||
var storageData = JSON.parse( localStorage.getItem('HeroWarsHistory') ) || [];
|
// var storageData = JSON.parse( localStorage.getItem('HeroWarsHistory') ) || [];
|
||||||
|
//var storageData = JSON.parse(jsondata) || [];
|
||||||
|
var storageData = jsondata || [];
|
||||||
var index = $(this).attr('data-item');
|
var index = $(this).attr('data-item');
|
||||||
|
|
||||||
storageData.splice(index, 1);
|
storageData.splice(index, 1);
|
||||||
localStorage.setItem('HeroWarsHistory', JSON.stringify(storageData) );
|
localStorage.setItem('HeroWarsHistory', JSON.stringify(storageData));
|
||||||
app.storage = storageData;
|
app.storage = storageData;
|
||||||
});
|
});
|
||||||
@@ -9,7 +9,7 @@ meta_image: '' # Global fallback for meta image
|
|||||||
is_production: false
|
is_production: false
|
||||||
|
|
||||||
# Root folder is always "/" regardless of production build settings.
|
# Root folder is always "/" regardless of production build settings.
|
||||||
baseurl: "/"
|
baseurl: "/hwtools/"
|
||||||
url: "http://localhost:3000"
|
url: "http://localhost:3000"
|
||||||
hostname: "localhost"
|
hostname: "localhost"
|
||||||
|
|
||||||
|
|||||||
@@ -5,8 +5,8 @@ meta_description: '' # Global fallback meta description
|
|||||||
meta_image: '' # Global fallback for meta image
|
meta_image: '' # Global fallback for meta image
|
||||||
|
|
||||||
# Build settings
|
# Build settings
|
||||||
baseurl: "/" # The subfolder where the site will live, no trailing slash. Ex: "investors/reports/2019"
|
baseurl: "/hwtools/" # The subfolder where the site will live, no trailing slash. Ex: "investors/reports/2019"
|
||||||
url: "https://hw.deineagentur.biz" # The base url, no trailing slash. Ex: "https://www.example.com"
|
url: "https://hwcollector.derhost.com" # The base url, no trailing slash. Ex: "https://www.example.com"
|
||||||
hostname: "localhost"
|
hostname: "localhost"
|
||||||
|
|
||||||
is_production: true # Leave unchanged. Used for production build.
|
is_production: true # Leave unchanged. Used for production build.
|
||||||
|
|||||||
@@ -5,7 +5,7 @@
|
|||||||
<strong>Load War</strong>
|
<strong>Load War</strong>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<form id="dataform" class="form">
|
<!--<form id="dataform" class="form">
|
||||||
<h3>Add War</h3>
|
<h3>Add War</h3>
|
||||||
<textarea id="data">{{ site.testdata }}</textarea>
|
<textarea id="data">{{ site.testdata }}</textarea>
|
||||||
<input type="submit" value="Submit" class="button" />
|
<input type="submit" value="Submit" class="button" />
|
||||||
@@ -16,9 +16,10 @@
|
|||||||
</label>
|
</label>
|
||||||
|
|
|
|
||||||
<a href="#" class="button button--danger"
|
<a href="#" class="button button--danger"
|
||||||
onClick="(function(){var newStorage=JSON.parse(localStorage.getItem('HeroWarsHistory'));newStorage.shift();localStorage.setItem('HeroWarsHistory',JSON.stringify(newStorage));})();">
|
onClick="/*(function(){var newStorage=JSON.parse(localStorage.getItem('HeroWarsHistory'));newStorage.shift();localStorage.setItem('HeroWarsHistory',JSON.stringify(newStorage));})();*/">
|
||||||
Remove Newest Entry</a>
|
Remove Newest Entry</a>
|
||||||
</form>
|
</form>
|
||||||
|
-->
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<!-- / _includes/partials/header.html -->
|
<!-- / _includes/partials/header.html -->
|
||||||
|
|||||||
@@ -7,15 +7,17 @@ layout: default
|
|||||||
<ul>
|
<ul>
|
||||||
<li v-for="(item, index) in storage">
|
<li v-for="(item, index) in storage">
|
||||||
<button class="button button--danger js--remove-storage" :data-item="index">×</button>
|
<button class="button button--danger js--remove-storage" :data-item="index">×</button>
|
||||||
<a class="js--load-war" href="javascript:;" :data-item="index">{{ item.date | unixToLocale}} -
|
<a class="js--load-war" href="javascript:;" :data-item="index">{{ item.warDate | unixToLocale}} -
|
||||||
{{ item.results[1].result.response.enemyClan.title }}</a>
|
<span>
|
||||||
|
{{ item.enemyClan.title || "unknown" }}
|
||||||
|
</span></a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<section v-if="orderedAllies.length">
|
<section v-if="orderedAllies.length">
|
||||||
<h1 v-if="orderedAllies.length">
|
<h1 v-if="orderedAllies.length">
|
||||||
{{ map.ourSlots[1].user.clanTitle }} VS. {{ map.enemyClan.title }}
|
{{ map.ourSlots[1].user.clanTitle }} VS. {{ map.enemyClan.title || "unknown" }}
|
||||||
<date>{{ map.warDate | unixToLocale }}</date>
|
<date>{{ map.warDate | unixToLocale }}</date>
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
@@ -26,8 +28,8 @@ layout: default
|
|||||||
v-if="ally.location.type == 'Hero' && ally.user.name != 'Empty'" v-for="ally in orderedAllies">
|
v-if="ally.location.type == 'Hero' && ally.user.name != 'Empty'" v-for="ally in orderedAllies">
|
||||||
<input name="attack_first" type="checkbox" />
|
<input name="attack_first" type="checkbox" />
|
||||||
<input name="attack_second" type="checkbox" />
|
<input name="attack_second" type="checkbox" />
|
||||||
<img v-if="character.type != 'pet'" v-for="character in ally.team[0]" :src="'assets/img/Heroes/00'+ character.id + '.png'" />
|
<img v-if="character.type != 'pet'" v-for="character in ally.team[0]" :src="'/hwtools/assets/img/Heroes/00'+ character.id + '.png'" />
|
||||||
<img v-if="character.type == 'pet'" v-for="character in ally.team[0]" :src="'assets/img/Pets/'+ character.id + '.png'" />
|
<img v-if="character.type == 'pet'" v-for="character in ally.team[0]" :src="'/hwtools/assets/img/Pets/'+ character.id + '.png'" />
|
||||||
<div class="team__details">
|
<div class="team__details">
|
||||||
<span class="team__location">{{ ally.location.name }}</span>
|
<span class="team__location">{{ ally.location.name }}</span>
|
||||||
<span class="team__name">{{ ally.user.name }} - {{ ally.power | formatNumber }}</span>
|
<span class="team__name">{{ ally.user.name }} - {{ ally.power | formatNumber }}</span>
|
||||||
@@ -40,8 +42,8 @@ layout: default
|
|||||||
<label class="team team--hero enemy-team js-enemy-hero" :data-id="enemy.user.id" :data-power="enemy.power"
|
<label class="team team--hero enemy-team js-enemy-hero" :data-id="enemy.user.id" :data-power="enemy.power"
|
||||||
v-if="enemy.location.type == 'Hero' && enemy.user.name != 'Empty'" v-for="enemy in orderedEnemies">
|
v-if="enemy.location.type == 'Hero' && enemy.user.name != 'Empty'" v-for="enemy in orderedEnemies">
|
||||||
<input type="checkbox" />
|
<input type="checkbox" />
|
||||||
<img v-if="character.type != 'pet'" v-for="character in enemy.team[0]" :src="'assets/img/Heroes/00'+ character.id + '.png'" />
|
<img v-if="character.type != 'pet'" v-for="character in enemy.team[0]" :src="'/hwtools/assets/img/Heroes/00'+ character.id + '.png'" />
|
||||||
<img v-if="character.type == 'pet'" v-for="character in enemy.team[0]" :src="'assets/img/Pets/'+ character.id + '.png'" />
|
<img v-if="character.type == 'pet'" v-for="character in enemy.team[0]" :src="'/hwtools/assets/img/Pets/'+ character.id + '.png'" />
|
||||||
<div class="team__details">
|
<div class="team__details">
|
||||||
<span class="team__location">{{ enemy.location.name }}</span>
|
<span class="team__location">{{ enemy.location.name }}</span>
|
||||||
<span class="team__name">{{ enemy.user.name }} - {{ enemy.power | formatNumber }}</span>
|
<span class="team__name">{{ enemy.user.name }} - {{ enemy.power | formatNumber }}</span>
|
||||||
@@ -55,7 +57,7 @@ layout: default
|
|||||||
v-if="ally.location.type == 'Titan' && ally.user.name != 'Empty'" v-for="ally in orderedAllies">
|
v-if="ally.location.type == 'Titan' && ally.user.name != 'Empty'" v-for="ally in orderedAllies">
|
||||||
<input name="attack_first" type="checkbox" />
|
<input name="attack_first" type="checkbox" />
|
||||||
<input name="attack_second" type="checkbox" />
|
<input name="attack_second" type="checkbox" />
|
||||||
<img v-for="character in ally.team[0]" :src="'assets/img/Titans/'+ character.id + '.png'" />
|
<img v-for="character in ally.team[0]" :src="'/hwtools/assets/img/Titans/'+ character.id + '.png'" />
|
||||||
<div class="team__details">
|
<div class="team__details">
|
||||||
<span class="team__location">{{ ally.location.name }}</span>
|
<span class="team__location">{{ ally.location.name }}</span>
|
||||||
<span class="team__name">{{ ally.user.name }} - {{ ally.power | formatNumber }}</span>
|
<span class="team__name">{{ ally.user.name }} - {{ ally.power | formatNumber }}</span>
|
||||||
@@ -68,7 +70,7 @@ layout: default
|
|||||||
<label class="team team--titan enemy-team js-enemy-titan" :data-id="enemy.user.id" :data-power="enemy.power"
|
<label class="team team--titan enemy-team js-enemy-titan" :data-id="enemy.user.id" :data-power="enemy.power"
|
||||||
v-if="enemy.location.type == 'Titan' && enemy.user.name != 'Empty'" v-for="enemy in orderedEnemies">
|
v-if="enemy.location.type == 'Titan' && enemy.user.name != 'Empty'" v-for="enemy in orderedEnemies">
|
||||||
<input type="checkbox" />
|
<input type="checkbox" />
|
||||||
<img v-for="character in enemy.team[0]" :src="'assets/img/Titans/'+ character.id + '.png'" />
|
<img v-for="character in enemy.team[0]" :src="'/hwtools/assets/img/Titans/'+ character.id + '.png'" />
|
||||||
<div class="team__details">
|
<div class="team__details">
|
||||||
<span class="team__location">{{ enemy.location.name }}</span>
|
<span class="team__location">{{ enemy.location.name }}</span>
|
||||||
<span class="team__name">{{ enemy.user.name }} - {{ enemy.power | formatNumber }}</span>
|
<span class="team__name">{{ enemy.user.name }} - {{ enemy.power | formatNumber }}</span>
|
||||||
|
|||||||
BIN
assets/img/splash_screen.png
Normal file
BIN
assets/img/splash_screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 392 KiB |
109
assets/js/app.js
109
assets/js/app.js
@@ -1,109 +0,0 @@
|
|||||||
|
|
||||||
var DEBUG_APP = false;
|
|
||||||
|
|
||||||
$('#dataform').on('submit', function (e) {
|
|
||||||
e.preventDefault();
|
|
||||||
|
|
||||||
var inputContent = $.trim( $('#data').val() );
|
|
||||||
|
|
||||||
if (inputContent.length > 0) {
|
|
||||||
var warData = JSON.parse( inputContent );
|
|
||||||
if (initApp(warData, 'withSave', warData) != false){
|
|
||||||
$('#data').val('');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
$('#fileUpload').on('change', function () {
|
|
||||||
var fileUploader = document.getElementById("fileUpload");
|
|
||||||
if ( fileUploader.files.length > 0 ) {
|
|
||||||
getFileContents( fileUploader.files[0] );
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
function initApp (data, callback, callbackData) {
|
|
||||||
if( data.results && data.results.length == 3 ){
|
|
||||||
var reWriteMapData = JSON.parse(JSON.stringify(data));
|
|
||||||
reWriteMapData.results[1].ident = reWriteMapData.results[1].ident.replace(/group_\d+_/g, "");
|
|
||||||
reWriteMapData.results[2].ident = reWriteMapData.results[2].ident.replace(/group_\d+_/g, "");
|
|
||||||
reWriteMapData.results.shift();
|
|
||||||
callbackData = data = JSON.parse(JSON.stringify(reWriteMapData)) ;
|
|
||||||
delete reWriteMapData;
|
|
||||||
if (DEBUG_APP) console.log(data);
|
|
||||||
}
|
|
||||||
if( !data.results || data.results.length !=2 ||
|
|
||||||
!data.results[0] ||
|
|
||||||
data.results[0].ident != "body" ||
|
|
||||||
!data.results[1] ||
|
|
||||||
data.results[1].ident != "clanWarGetInfo" ||
|
|
||||||
!data.results[1].result ||
|
|
||||||
!data.results[1].result.response ) {
|
|
||||||
alert("Please recreate the JSON, switch to the main screen, and switch back to GuildWars. Then copy the JSON!");
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (DEBUG_APP) console.log(data)
|
|
||||||
var mapData = data.results[1].result.response;
|
|
||||||
|
|
||||||
if (DEBUG_APP) console.log('data', JSON.parse( JSON.stringify(data)) );
|
|
||||||
enhanceMap(mapData.enemySlots);
|
|
||||||
enhanceMap(mapData.ourSlots);
|
|
||||||
|
|
||||||
app.map = mapData;
|
|
||||||
app.map.warDate = data.date;
|
|
||||||
|
|
||||||
if (DEBUG_APP) 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 : {
|
|
||||||
map: {}, //mapData, the data obtained from the game
|
|
||||||
mapSlots: mapSlots, // maps building names and types of data obtained from the game
|
|
||||||
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();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
@@ -1,19 +0,0 @@
|
|||||||
var calculator = new Vue({
|
|
||||||
el : '#calculator',
|
|
||||||
data : {
|
|
||||||
//guilds: new Array(10)
|
|
||||||
guilds: [
|
|
||||||
'',
|
|
||||||
'G1',
|
|
||||||
'G2',
|
|
||||||
'G3',
|
|
||||||
'G4',
|
|
||||||
'G5',
|
|
||||||
'G6',
|
|
||||||
'G7',
|
|
||||||
'G8',
|
|
||||||
'G9',
|
|
||||||
'G10',
|
|
||||||
]
|
|
||||||
}
|
|
||||||
});
|
|
||||||
@@ -1,17 +0,0 @@
|
|||||||
function getFileContents(file) {
|
|
||||||
var file = document.getElementById("fileUpload").files[0];
|
|
||||||
var fileContents = false;
|
|
||||||
|
|
||||||
if (file) {
|
|
||||||
var reader = new FileReader();
|
|
||||||
reader.readAsText(file, "UTF-8");
|
|
||||||
reader.onload = function (evt) {
|
|
||||||
var warData = JSON.parse(evt.target.result);
|
|
||||||
initApp(warData, 'withSave', warData);
|
|
||||||
}
|
|
||||||
reader.onerror = function (evt) {
|
|
||||||
console.error('error reading the file.')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
function toggleHamburger () {
|
|
||||||
$('.hamburger').toggleClass('is-active');
|
|
||||||
}
|
|
||||||
|
|
||||||
$('.hamburger-button').on('click', function () {
|
|
||||||
toggleHamburger();
|
|
||||||
});
|
|
||||||
2
assets/js/lib/jquery-3.4.1.min.js
vendored
2
assets/js/lib/jquery-3.4.1.min.js
vendored
File diff suppressed because one or more lines are too long
6
assets/js/lib/vue.min.js
vendored
6
assets/js/lib/vue.min.js
vendored
File diff suppressed because one or more lines are too long
@@ -1,45 +0,0 @@
|
|||||||
/*
|
|
||||||
* 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;
|
|
||||||
});
|
|
||||||
1
assets/js/main.min.js
vendored
Normal file
1
assets/js/main.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
121
assets/js/map.js
121
assets/js/map.js
@@ -1,121 +0,0 @@
|
|||||||
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'
|
|
||||||
}];
|
|
||||||
@@ -1,78 +0,0 @@
|
|||||||
|
|
||||||
var toe = new Vue({
|
|
||||||
el: '#toe',
|
|
||||||
data: {
|
|
||||||
filters: 'any',
|
|
||||||
titans: [
|
|
||||||
'4000', '4001', '4002', '4003',
|
|
||||||
'4010', '4011', '4012', '4013',
|
|
||||||
'4020', '4021', '4022', '4023'
|
|
||||||
],
|
|
||||||
selectedTitans: [],
|
|
||||||
matches: []
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
findInTeam: function (team, seachTeam) {
|
|
||||||
return seachTeam.every(function (v) {
|
|
||||||
return team.includes(v)
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
getEnemyTeam: function (team) {
|
|
||||||
var titans = [];
|
|
||||||
for (titan in team) titans.push(titan);
|
|
||||||
return titans;
|
|
||||||
},
|
|
||||||
|
|
||||||
getSelectedTitans: function () {
|
|
||||||
var titans = [];
|
|
||||||
var selectedTeam = this.sortedSelectedTitans;
|
|
||||||
for (titan in selectedTeam) titans.push(selectedTeam[titan])
|
|
||||||
return titans;
|
|
||||||
},
|
|
||||||
|
|
||||||
setTitans: function (team) {
|
|
||||||
this.selectedTitans = team;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
sortedSelectedTitans: function () {
|
|
||||||
return this.selectedTitans.sort();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
filters: {
|
|
||||||
humanDate: function (timestamp) {
|
|
||||||
return new Date(timestamp * 1000).toLocaleString(undefined, { year: 'numeric', month: 'long', day: 'numeric' });
|
|
||||||
},
|
|
||||||
humanPlayer: function (id) {
|
|
||||||
var player;
|
|
||||||
|
|
||||||
if (id == 7737454) player = 'Zero';
|
|
||||||
else if (id == 3244200) player = 'OPM';
|
|
||||||
else if (id == 3075580) player = 'Other OPM';
|
|
||||||
else player = 'Who knows';
|
|
||||||
|
|
||||||
return player;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
$(function () {
|
|
||||||
if ($('#toe').length) {
|
|
||||||
$.get('../assets/json/toedata.combined.min.json', function (data) {
|
|
||||||
var matches = data.results[0].result.response.results;
|
|
||||||
var matchesArray = [];
|
|
||||||
|
|
||||||
for (match in matches) {
|
|
||||||
matchesArray.push(matches[match]);
|
|
||||||
}
|
|
||||||
|
|
||||||
var orderedMatches = matchesArray.sort(function (a, b) {
|
|
||||||
return b.enemypower - a.enemypower;
|
|
||||||
});
|
|
||||||
|
|
||||||
toe.matches = orderedMatches;
|
|
||||||
console.log(toe.matches);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
@@ -1,150 +0,0 @@
|
|||||||
/*
|
|
||||||
* 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 id = $t.attr('data-id');
|
|
||||||
var heroPower = parseInt( $t.attr('data-power') );
|
|
||||||
var $titanTeam = $('.js-'+ guild +'-titan[data-id="'+ id +'"]');
|
|
||||||
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'),
|
|
||||||
playerID = $t.parent().attr('data-id');
|
|
||||||
|
|
||||||
$('[data-id="'+ playerID +'"]')
|
|
||||||
.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),
|
|
||||||
id = $t.attr('data-id');
|
|
||||||
$('.team[data-id="'+ id +'"]').addClass('is--hover');
|
|
||||||
},
|
|
||||||
'mouseleave': function () {
|
|
||||||
var $t = $(this),
|
|
||||||
id = $t.attr('data-id');
|
|
||||||
$('.team[data-id="'+ id +'"]').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
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
File diff suppressed because one or more lines are too long
1265
assets/sass/main.css
1265
assets/sass/main.css
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user