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.
170 lines
4.5 KiB
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>
|