feat: arena ladder
This commit is contained in:
parent
ac6ca4c84e
commit
f7be06074e
12 changed files with 429 additions and 10 deletions
115
static/arena-team.hbs
Normal file
115
static/arena-team.hbs
Normal 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>
|
||||
|
|
@ -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
29
static/css/arena-team.css
Normal 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;
|
||||
}
|
||||
|
|
@ -1,7 +1,3 @@
|
|||
#select-realm {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
#results_processing {
|
||||
height: 70px;
|
||||
}
|
||||
|
|
|
|||
8
static/css/ladder-arena.css
Normal file
8
static/css/ladder-arena.css
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
#select-arena-type-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#select-arena-type-container .arena-type-label {
|
||||
align-self: center;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
|
@ -3,8 +3,11 @@
|
|||
|
||||
<h1 class="title is-size-1">Armory</h1>
|
||||
|
||||
{{#if (not (equalsLength realms 1))}}
|
||||
<a href="{{websiteRoot}}/arena">Arena Ladder</a> 
|
||||
|
||||
<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
101
static/ladder-arena.hbs
Normal 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> 
|
||||
|
||||
<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>
|
||||
 
|
||||
<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>
|
||||
|
|
@ -1,10 +1,10 @@
|
|||
<a href="{{websiteRoot}}/">Back to Armory</a>
|
||||
<br><br>
|
||||
|
||||
<a href="{{websiteRoot}}/character/{{realm}}/{{name}}">Character</a> 
|
||||
<a href="{{websiteRoot}}/character/{{realm}}/{{name}}/talents">Talents</a> 
|
||||
<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> 
|
||||
<a href="{{websiteRoot}}/character/{{realm}}/{{name}}/talents">Talents</a> 
|
||||
<a href="{{websiteRoot}}/character/{{realm}}/{{name}}/achievements">Achievements</a> 
|
||||
<a href="{{websiteRoot}}/character/{{realm}}/{{name}}/pvp">PvP</a> 
|
||||
<br>
|
||||
<br>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue