160 lines
6.0 KiB
HTML
160 lines
6.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" data-baseurl="hero-wars-planner">
|
|
|
|
|
|
|
|
<!-- _includes/partials/head.html -->
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0">
|
|
|
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="/hero-wars-planner/assets/sass/main.css">
|
|
</head>
|
|
|
|
<!-- / _includes/partials/head.html -->
|
|
|
|
|
|
|
|
<body>
|
|
<!-- _includes/partials/header.html -->
|
|
|
|
<header>
|
|
<button class="button hamburger-button">
|
|
<strong>Load War</strong>
|
|
</button>
|
|
|
|
<form id="dataform" class="form">
|
|
<h3>Add War</h3>
|
|
<textarea id="data"></textarea>
|
|
<input type="submit" value="Submit" class="button" />
|
|
or
|
|
<label class="button">
|
|
Upload File
|
|
<input id="fileUpload" type="file" accept=".har" />
|
|
</label>
|
|
|
|
|
<a href="#" class="button button--danger"
|
|
onClick="(function(){var newStorage=JSON.parse(localStorage.getItem('HeroWarsHistory'));newStorage.shift();localStorage.setItem('HeroWarsHistory',JSON.stringify(newStorage));})();">
|
|
Remove Newest Entry</a>
|
|
</form>
|
|
</header>
|
|
|
|
<!-- / _includes/partials/header.html -->
|
|
|
|
|
|
<main class="wrapper">
|
|
|
|
<div id="app" class="war">
|
|
<nav class="hamburger">
|
|
<ul>
|
|
<li v-for="(item, index) in storage">
|
|
<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}} -
|
|
{{ item.results[1].result.response.enemyClan.title }}</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<section v-if="orderedAllies.length">
|
|
<h1 v-if="orderedAllies.length">{{ map.ourSlots[1].user.clanTitle }} VS. {{ map.enemyClan.title }}</h1>
|
|
|
|
<div class="row">
|
|
<div class="col col-3">
|
|
<h4>HEROES - Allies</h4>
|
|
<div class="team team--hero ally-team js-ally-hero" :data-name="ally.user.name" :data-power="ally.power"
|
|
v-if="ally.location.type == 'Hero' && ally.user.name != 'Empty'" v-for="ally in orderedAllies">
|
|
<input name="attack_first" 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="'assets/img/Pets/'+ character.id + '.png'" />
|
|
<div class="team__details">
|
|
<span class="team__location">{{ ally.location.name }}</span>
|
|
{{ ally.user.name }} - {{ ally.power | formatNumber }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col col-3">
|
|
<h4>HEROES - Enemies</h4>
|
|
<label class="team team--hero enemy-team js-enemy-hero" :data-name="enemy.user.name" :data-power="enemy.power"
|
|
v-if="enemy.location.type == 'Hero' && enemy.user.name != 'Empty'" v-for="enemy in orderedEnemies">
|
|
<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="'assets/img/Pets/'+ character.id + '.png'" />
|
|
<div class="team__details">
|
|
<span class="team__location">{{ enemy.location.name }}</span>
|
|
{{ enemy.user.name }} - {{ enemy.power | formatNumber }}
|
|
</div>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="col col-3">
|
|
<h4>Titans - Allies</h4>
|
|
<div class="team team--titan ally-team js-ally-titan" :data-name="ally.user.name" :data-power="ally.power"
|
|
v-if="ally.location.type == 'Titan' && ally.user.name != 'Empty'" v-for="ally in orderedAllies">
|
|
<input name="attack_first" type="checkbox" />
|
|
<input name="attack_second" type="checkbox" />
|
|
<img v-for="character in ally.team[0]" :src="'assets/img/Titans/'+ character.id + '.png'" />
|
|
<div class="team__details">
|
|
<span class="team__location">{{ ally.location.name }}</span>
|
|
{{ ally.user.name }} - {{ ally.power | formatNumber }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col col-3">
|
|
<h4>Titans - Enemies</h4>
|
|
<label class="team team--titan enemy-team js-enemy-titan" :data-name="enemy.user.name" :data-power="enemy.power"
|
|
v-if="enemy.location.type == 'Titan' && enemy.user.name != 'Empty'" v-for="enemy in orderedEnemies">
|
|
<input type="checkbox" />
|
|
<img v-for="character in enemy.team[0]" :src="'assets/img/Titans/'+ character.id + '.png'" />
|
|
<div class="team__details">
|
|
<span class="team__location">{{ enemy.location.name }}</span>
|
|
{{ enemy.user.name }} - {{ enemy.power | formatNumber }}
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col col-3">
|
|
<h4>Allies Stats</h4>
|
|
Allies Hero Power: <strong>{{ getAllyPower.heroPower | formatNumber }}</strong> <br />
|
|
Allies Titan Power: <strong>{{ getAllyPower.titanPower | formatNumber }}</strong> <br />
|
|
Allies Total Power: <strong>{{ getAllyPower.totalPower | formatNumber }}</strong> <br />
|
|
</div>
|
|
<div class="col col-3">
|
|
<h4>Enemy Stats</h4>
|
|
Enemy Hero Power: <strong>{{ getEnemyPower.heroPower | formatNumber }}</strong> <br />
|
|
Enemy Titan Power: <strong>{{ getEnemyPower.titanPower | formatNumber }}</strong> <br />
|
|
Enemy Total Power: <strong>{{ getEnemyPower.totalPower | formatNumber }}</strong> <br />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
</main>
|
|
|
|
<!-- _includes/partials/footer.html -->
|
|
|
|
<footer>
|
|
|
|
</footer>
|
|
|
|
<!-- / _includes/partials/footer.html -->
|
|
|
|
|
|
<!-- _includes/partials/scripts.html -->
|
|
|
|
|
|
<script src="/hero-wars-planner/assets/js/main.min.js"></script>
|
|
|
|
|
|
<!-- / _includes/partials/scripts.html -->
|
|
|
|
</body>
|
|
</html>
|