summaryrefslogtreecommitdiff
path: root/http
diff options
context:
space:
mode:
Diffstat (limited to 'http')
-rw-r--r--http/res/ranking.css23
-rw-r--r--http/res/ranking.js81
2 files changed, 104 insertions, 0 deletions
diff --git a/http/res/ranking.css b/http/res/ranking.css
new file mode 100644
index 0000000..da8b586
--- /dev/null
+++ b/http/res/ranking.css
@@ -0,0 +1,23 @@
+.table > tbody > tr.gold > td { background-color: #FFEF96 }
+.table > tbody > tr.silver > td { background-color: #E5E5E5 }
+.table > tbody > tr.bronze > td { background-color: #CAA077 }
+.table-hover > tbody > tr.gold:hover > td { background-color: #FFE34C }
+.table-hover > tbody > tr.silver:hover > td { background-color: #CDCDCD }
+.table-hover > tbody > tr.bronze:hover > td { background-color: #B88048 }
+.table {
+ border-top: solid 1px #ddd; border-bottom: solid 1px #ddd;
+ opacity: 0.1;
+}
+.table .label { display: inline-block; width: 40px }
+.table, .table .club,
+.table .region, .table .age,
+.table .gender, .table .ranking {
+ border-left: solid 1px #ddd; border-right: solid 1px #ddd
+}
+.table .pid {
+ border-left: solid 1px #ddd
+}
+.table .pidlink {
+ border-right: solid 1px #ddd
+}
+.table > tbody > tr { cursor: pointer }
diff --git a/http/res/ranking.js b/http/res/ranking.js
new file mode 100644
index 0000000..b1c0bf8
--- /dev/null
+++ b/http/res/ranking.js
@@ -0,0 +1,81 @@
+var playerClick = function(ev) {
+ if (!$(ev.target).closest('a').size()) {
+ var row = $(this);
+ var pid = row.find('td.pid').text();
+ if (pid) {
+ var link = 'players/' + pid.trim() + '.html';
+ location.href = link;
+ }
+ }
+}
+
+var parseHash = function() {
+ var hash = location.hash.replace(/^#/, '');
+ var hashParams = hash.split(',');
+ var params = new Map();
+ hashParams.forEach(function(hashParam) {
+ var param = hashParam.split(':');
+ if (param.length > 1) {
+ params.set(param[0], param[1]);
+ }
+ });
+ return params;
+}
+
+var constructHash = function(params) {
+ return Array.from(params).map(function(param) {
+ return param[0] + ':' + param[1];
+ }).join(',');
+}
+
+var readHash = function() {
+ $('button.btn-primary').removeClass('btn-primary');
+ var params = parseHash();
+ params.forEach(function(value, param) {
+ $('button[data-filter="' + param + '"][data-value="' + value + '"]').addClass('btn-primary');
+ });
+ var allParams = ['age', 'gender', 'region'];
+ allParams.forEach(function(param) {
+ if ($('button[data-filter="' + param + '"].btn-primary').size() == 0) {
+ $('button[data-clear="' + param + '"]').addClass('btn-primary');
+ }
+ });
+ filterRows(params);
+}
+
+var filterRows = function(params) {
+ $('table.table tbody tr').show().removeClass('gold silver bronze').each(function() {
+ var row = $(this);
+ params.forEach(function(value, param) {
+ if (row.find('td.' + param).text().trim() != value) {
+ row.hide();
+ }
+ });
+ });
+ $('table.table tbody tr:visible').eq(0).addClass('gold');
+ $('table.table tbody tr:visible').eq(1).addClass('silver');
+ $('table.table tbody tr:visible').eq(2).addClass('bronze');
+ $('table.table').css('opacity', 1);
+}
+
+$('.container .table tbody tr').click(playerClick);
+
+$(document).ready(function() {
+ $(window).on('hashchange', readHash).trigger('hashchange');
+});
+
+$('button[data-filter]').click(function() {
+ $('table.table').css('opacity', 0.1);
+ var button = $(this);
+ var params = parseHash();
+ params.set(button.attr('data-filter'), button.attr('data-value'));
+ location.hash = constructHash(params);
+});
+
+$('button[data-clear]').click(function() {
+ $('table.table').css('opacity', 0.1);
+ var button = $(this);
+ var params = parseHash();
+ params.delete(button.attr('data-clear'));
+ location.hash = constructHash(params);
+});