feat: arena ladder

This commit is contained in:
Axel Cocat 2023-08-05 00:42:55 +02:00
parent ac6ca4c84e
commit f7be06074e
12 changed files with 429 additions and 10 deletions

115
static/arena-team.hbs Normal file
View file

@ -0,0 +1,115 @@
<link rel="stylesheet" type="text/css" href="{{websiteRoot}}/css/arena-team.css">
{{> datatables}}
{{> emblems}}
<a href="{{websiteRoot}}/arena">Back to Arena Ladder</a>
<br><br>
<div id="arena-header">
<div class="emblem-container">
<div class="arena-emblem">
<canvas width="74" height="128"></canvas>
</div>
</div>
<div class="info">
<div class="team-name is-size-3">{{name}}</div>
<div class="is-size-5">
{{type}}v{{type}} Team, {{realm}}
</div>
</div>
</div>
<br>
<div class="is-size-5">Rating: {{rating}}</div>
<table id="stats">
<thead>
<tr>
<th></th>
<th>Games</th>
<th>Wins</th>
<th>Losses</th>
<th>Win Rate</th>
</tr>
</thead>
<tbody>
<tr>
<td>Week</td>
<td>{{weekGames}}</td>
<td>{{weekWins}}</td>
<td>{{subtract weekGames weekWins}}</td>
<td>
{{#if (isnt weekGames 0)}}
{{toPrecision (multiply (divide weekWins weekGames) 100) 3}} %
{{/if}}
</td>
</tr>
<tr>
<td>Season</td>
<td>{{seasonGames}}</td>
<td>{{seasonWins}}</td>
<td>{{subtract seasonGames seasonWins}}</td>
<td>
{{#if (isnt seasonGames 0)}}
{{toPrecision (multiply (divide seasonWins seasonGames) 100) 3}} %
{{/if}}
</td>
</tr>
</tbody>
</table>
<br>
<div class="is-size-5">Members:</div>
<table id="members" class="stripe hover row-border">
<thead>
<tr>
<th>Name</th>
<th>Class</th>
<th>Race</th>
<th>Week Wins</th>
<th>Week Losses</th>
<th>Season Wins</th>
<th>Season Losses</th>
<th>Rating</th>
<th>Online</th>
</tr>
</thead>
<tbody>
{{#each members}}
<tr>
<td>
<a href="{{../websiteRoot}}/character/{{../realm}}/{{name}}/pvp">
{{name}}
</a>
</td>
<td>
<img src="{{../aowow}}/static/images/wow/icons/medium/class_{{class}}.jpg">
</td>
<td>
<img src="{{../aowow}}/static/images/wow/icons/medium/race_{{race}}_{{gender}}.jpg">
</td>
<td>{{weekWins}}</td>
<td>{{subtract weekGames weekWins}}</td>
<td>{{seasonWins}}</td>
<td>{{subtract seasonGames seasonWins}}</td>
<td>{{personalRating}}</td>
<td>{{#if online}}🟢{{else}}🔴{{/if}}</td>
</tr>
{{/each}}
</tbody>
</table>
<script type="application/javascript">
$(window).on("load", () => {
createArenaEmblem({{this.type}}, {{{JSONstringify this.emblem}}}, $(".arena-emblem")[0]);
const dt = $("#members").DataTable({
searching: false,
paging: false,
responsive: {
details: true,
},
});
});
</script>

View file

@ -20,7 +20,9 @@
<div class="column is-full-touch is-one-quarter-desktop">
<div class="box arena-team" data-team-id="{{this.id}}">
<div class="info has-text-centered">
<div class="is-size-4">{{this.name}}</div>
<div class="is-size-4">
<a href="{{../websiteRoot}}/arena/team/{{../realm}}/{{this.name}}">{{this.name}}</a>
</div>
<div class="is-size-5">{{this.type}}v{{this.type}} Team</div>
<div>Rating: {{this.rating}}</div>
<div>{{this.seasonWins}} W / {{subtract this.seasonGames this.seasonWins}} L</div>

29
static/css/arena-team.css Normal file
View file

@ -0,0 +1,29 @@
#arena-header {
display: flex;
}
#arena-header .emblem-container {
margin-right: 1em;
}
#arena-header .info {
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}
#arena-header .info .team-name {
margin-top: -8px;
}
#stats td,
#stats th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
.dataTables_info {
display: none;
}

View file

@ -1,7 +1,3 @@
#select-realm {
margin-bottom: 16px;
}
#results_processing {
height: 70px;
}

View file

@ -0,0 +1,8 @@
#select-arena-type-container {
display: flex;
}
#select-arena-type-container .arena-type-label {
align-self: center;
margin-right: 4px;
}

View file

@ -3,8 +3,11 @@
<h1 class="title is-size-1">Armory</h1>
{{#if (not (equalsLength realms 1))}}
<a href="{{websiteRoot}}/arena">Arena Ladder</a>&emsp;
<br><br>
{{#if (not (equalsLength realms 1))}}
<div id="select-realm-container">
<span class="realm-label">Realm:</span>
<div class="select">

101
static/ladder-arena.hbs Normal file
View file

@ -0,0 +1,101 @@
<link rel="stylesheet" type="text/css" href="{{websiteRoot}}/css/index.css">
<link rel="stylesheet" type="text/css" href="{{websiteRoot}}/css/ladder-arena.css">
{{> datatables}}
<h1 class="title is-size-1">Arena Ladder</h1>
<a href="{{websiteRoot}}/">Armory</a>&emsp;
<br><br>
{{#if (not (equalsLength realms 1))}}
<div id="select-realm-container">
<span class="realm-label">Realm:</span>
<div class="select">
<select id="select-realm">
{{#each realms}}
<option>{{this}}</option>
{{/each}}
</select>
</div>
&ensp;
<div class="select">
<select id="select-arena-type">
<option value="2">2v2</option>
<option value="3">3v3</option>
<option value="5">5v5</option>
</select>
</div>
</div>
{{else}}
<div id="select-arena-type-container">
<span class="arena-type-label">Type:</span>
<div class="select">
<select id="select-arena-type">
<option value="2">2v2</option>
<option value="3">3v3</option>
<option value="5">5v5</option>
</select>
</div>
</div>
{{/if}}
<br>
<table id="results" class="stripe hover row-border">
<thead>
<tr>
<th>Name</th>
<th>Rating</th>
<th>Wins</th>
<th>Losses</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script type="application/javascript">
$(window).on("load", () => {
let dt;
$("#select-realm, #select-arena-type").on("change", () => {
dt.draw();
});
dt = $("#results").DataTable({
processing: true,
serverSide: true,
searchDelay: 800,
ajax: {
url: `{{websiteRoot}}/arena/ladder`,
data: d => {
d.realm = $("#select-realm").val();
d.teamsize = $("#select-arena-type").val();
},
},
columnDefs: [
{
targets: 0,
render: (name, type, row, meta) => `<a href="{{websiteRoot}}/arena/team/${meta.settings.json.realm}/${name}">${name}</a>`,
},
{
targets: 1,
searchable: false,
},
{
targets: 2,
searchable: false,
},
{
targets: 3,
searchable: false,
render: (gamesPlayed, type, row, meta) => gamesPlayed - row[2],
},
],
responsive: {
details: true,
},
order: [[1, "desc"], [0, "asc"]],
});
});
</script>

View file

@ -1,10 +1,10 @@
<a href="{{websiteRoot}}/">Back to Armory</a>
<br><br>
<a href="{{websiteRoot}}/character/{{realm}}/{{name}}">Character</a>&ensp;
<a href="{{websiteRoot}}/character/{{realm}}/{{name}}/talents">Talents</a>&ensp;
<a href="{{websiteRoot}}/character/{{realm}}/{{name}}/achievements">Achievements</a>
<a href="{{websiteRoot}}/character/{{realm}}/{{name}}/pvp">PvP</a>
<a href="{{websiteRoot}}/character/{{realm}}/{{name}}">Character</a>&emsp;
<a href="{{websiteRoot}}/character/{{realm}}/{{name}}/talents">Talents</a>&emsp;
<a href="{{websiteRoot}}/character/{{realm}}/{{name}}/achievements">Achievements</a>&emsp;
<a href="{{websiteRoot}}/character/{{realm}}/{{name}}/pvp">PvP</a>&emsp;
<br>
<br>