De live ranking gebruikt voor de Haramvision Team Contest.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
htc-ranking/ranking/index.html

170 lines
4.5 KiB

4 years ago
<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./styles.css">
<link href='https://fonts.googleapis.com/css?family=Exo 2' rel='stylesheet'>
<body>
<div class="main-container"></div>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
<script src="https://js.pusher.com/7.0/pusher.min.js"></script>
<script>
var PADDING = 50;
var COLUMN_LENGTH = 16;
var TEAM_HEIGHT = 50;
var TEAM_WIDTH = 300;
var VER_SPACING = 4;
var HOR_SPACING = 10;
var his = [];
var teams = [
"Ladies 1",
"Ladies 2",
"Ladies 3",
"Ladies 4",
"Ladies 5",
"Ladies 6",
"Ladies 7",
"Ladies 8",
"Ladies 9",
"Ladies 10",
"Men's 1",
"Men's 2",
"Men's 3",
"Men's 4",
"Men's 5",
"Men's 6",
"Men's 7",
"Men's 8",
"Men's 9",
"Mix 1",
"Mix 2",
"Mix 3",
"Mix 4",
"Mix 5",
"Mix 6",
"Mix 7",
"Mix 8",
"Mix 9",
"Mix 10",
"Recr. 1",
"Recr. 2"
];
var scores = {};
var ordering = [];
var $main = $('.main-container');
var $jqObjects = {};
teams.forEach(function(team) {
scores[team] = 0;
ordering.push(team);
});
for (var i = 0; i < ordering.length; i++) {
$main.append('<div id="' + ordering[i] + '" class="team-div" style="top: ' +
(i%COLUMN_LENGTH * (TEAM_HEIGHT + VER_SPACING) + PADDING) +
'px; left: ' + (parseInt((i / COLUMN_LENGTH)) * (TEAM_WIDTH + HOR_SPACING) + PADDING) +
'px;"><span class="team-name">' + ordering[i] +
'</span><span class="team-points">0</span></div>');
}
for (var i = 0; i < ordering.length; i++) {
$jqObjects[ordering[i]] = $('[id="' + ordering[i] + '"]');
}
function updatePositioning() {
ordering.sort(compare);
for (var i = 0; i < ordering.length; i++) {
var nx = parseInt((i / COLUMN_LENGTH)) * (TEAM_WIDTH + HOR_SPACING) + PADDING;
var ny = (i%COLUMN_LENGTH * (TEAM_HEIGHT + VER_SPACING) + PADDING);
$jqObj = $jqObjects[ordering[i]];
var pos = $jqObj.offset();
if (pos.left != nx || pos.top != ny) {
$jqObj.animate({
left: nx,
top: ny
}, 1300);
}
}
}
function compare(a, b) {
if (scores[a] > scores[b])
return -1;
if (scores[a] < scores[b])
return 1;
return 0;
}
function awardPoints(points, team) {
$jqObj = $jqObjects[team];
$jqObj.addClass('awarded');
$jqObj.append(
'<div class="points">' + points + '</div>');
var count_duration = 700;
console.log($jqObj);
$teamPoints = $jqObj.find('.team-points');
console.log('hai2');
for (var i = 1; i <= points; i++) {
setTimeout(function(p, tp) {
tp.text(p);
}.bind(null, scores[team] + i, $teamPoints), 500 + parseInt(i/points * count_duration));
console.log(i/points * count_duration)
}
scores[team] = scores[team] + points;
setTimeout(updatePositioning, 2000);
his.push({team: team, points: points});
}
function resetPoints() {
j = 0;
for (var i = 0; i < ordering.length; i ++) {
$jqObj = $jqObjects[ordering[i]];
if ($jqObj.hasClass('awarded')) {
setTimeout(function(teamObj) {
teamObj.removeClass('awarded');
teamObj.find('.points').animate({opacity:0},300, function() {
$(this).remove();
});
}.bind(null, $jqObj), j*200);
j++;
}
}
}
function undo() {
if (his.length == 0)
return;
elem = his.pop();
scores[elem.team] = scores[elem.team] - elem.points;
$jqObj = $jqObjects[elem.team]
$jqObj.find('.team-points').text(scores[elem.team]);
$jqObj.removeClass('awarded');
$jqObj.find('.points').animate({opacity:0},300, function() {
$(this).remove();
});
updatePositioning();
};
Pusher.logToConsole = true;
var pusher = new Pusher('APP_KEY', {
cluster: 'eu'
});
var channel = pusher.subscribe('ranking');
channel.bind('points', function(data) {
awardPoints(parseInt(data.points), data.team);
});
channel.bind('undo', function(data) {
undo();
});
channel.bind('reset', function(data) {
resetPoints();
});
</script>
</body>
</html>