Files
external-tools-frontend/_layouts/toe.html
2020-05-28 15:29:58 +03:00

106 lines
3.3 KiB
HTML

<!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">
<div class="toe__filters">
<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>
</div>
<div class="titans__container">
<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>
<div class="titans__shortcut">
<button title="Select Water Team" v-on:click="setTitans(['4000', '4001', '4002', '4003'])" class="titans__waterteam">💧</button>
<button title="Select Fire Team" v-on:click="setTitans(['4010', '4011', '4012', '4013'])" class="titans__fireteam">🔥</button>
<button title="Select Earth Team" v-on:click="setTitans(['4020', '4021', '4022', '4023'])" class="titans__earthteam">🍀</button>
</div>
<div class="titans__row">
<button v-on:click="setTitans([])" class="titans__clear">Clear Selection</button>
</div>
</div>
<table>
<thead>
<tr>
<th width="100">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 :title="match.defBattle.startTime | humanDate">
<strong>{{ match.enemypower }}</strong><br/>
</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 :title="match.defBattle.userId | humanPlayer">
<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>