parent
4d4062e7dc
commit
6e1828a5fd
GPG Key ID:
6CD17CBCD7B45462
@ -0,0 +1,2 @@ |
|||||||
|
**/node_modules/ |
||||||
|
|
||||||
@ -1,3 +1,6 @@ |
|||||||
# htc-ranking |
# htc-ranking |
||||||
|
|
||||||
De live ranking gebruikt voor de Haramvision Team Contest. |
De live ranking gebruikt voor de Haramvision Team Contest. |
||||||
|
|
||||||
|
Before you can use this for yourself you also need to setup your own Pusher channel. For |
||||||
|
more information on how to do that go to [https://pusher.com/docs/channels/getting_started/javascript](https://pusher.com/docs/channels/getting_started/javascript). |
||||||
|
|||||||
Binary file not shown.
@ -0,0 +1,70 @@ |
|||||||
|
|
||||||
|
|
||||||
|
var Pusher = require('pusher'); |
||||||
|
|
||||||
|
var pusher = new Pusher({ |
||||||
|
// Go to https://pusher.com/docs/channels/getting_started/javascript#trigger-events-from-your-server
|
||||||
|
// for setting up the variables below.
|
||||||
|
appId: 'APP_ID', |
||||||
|
key: 'KEY', |
||||||
|
secret: 'SECRET', |
||||||
|
cluster: 'CLUSTER', |
||||||
|
encrypted: true |
||||||
|
}); |
||||||
|
|
||||||
|
const readline = require('readline'); |
||||||
|
const rl = readline.createInterface({ |
||||||
|
input: process.stdin, |
||||||
|
output: process.stdout, |
||||||
|
prompt: '> ' |
||||||
|
}); |
||||||
|
|
||||||
|
rl.prompt(); |
||||||
|
|
||||||
|
rl.on('line', (line) => { |
||||||
|
words = line.trim().split(' '); |
||||||
|
switch (words[0]) { |
||||||
|
case 'p': |
||||||
|
teamstr = words.slice(2).join(' '); |
||||||
|
if (teamstr.length = 2) { |
||||||
|
teamnr = teamstr.substr(1); |
||||||
|
switch (teamstr.charAt(0)) { |
||||||
|
case 'h': |
||||||
|
teamstr = "Men's " + teamnr; |
||||||
|
break; |
||||||
|
case 'd': |
||||||
|
teamstr = "Ladies " + teamnr; |
||||||
|
break; |
||||||
|
case 'r': |
||||||
|
teamstr = "Recr. " + teamnr; |
||||||
|
break; |
||||||
|
case 'm': |
||||||
|
teamstr = "Mix " + teamnr; |
||||||
|
break; |
||||||
|
default: |
||||||
|
console.log('Incorrect team name: "' + teamstr + '"'); |
||||||
|
} |
||||||
|
} |
||||||
|
pusher.trigger('ranking', 'points', { |
||||||
|
'points': parseInt(words[1]), |
||||||
|
'team': teamstr |
||||||
|
}); |
||||||
|
console.log('Added ' + words[1] + ' points to "' + teamstr + '"'); |
||||||
|
break; |
||||||
|
case 'undo': |
||||||
|
pusher.trigger('ranking', 'undo', {}); |
||||||
|
console.log('Triggered undo action.'); |
||||||
|
break; |
||||||
|
case 'reset': |
||||||
|
pusher.trigger('ranking', 'reset', {}); |
||||||
|
console.log('Triggered reset action.'); |
||||||
|
break; |
||||||
|
default: |
||||||
|
console.log(`Incorrect command: '${line.trim()}'`); |
||||||
|
break; |
||||||
|
} |
||||||
|
rl.prompt(); |
||||||
|
}).on('close', () => { |
||||||
|
console.log('Exiting...'); |
||||||
|
process.exit(0); |
||||||
|
}); |
||||||
@ -0,0 +1,12 @@ |
|||||||
|
{ |
||||||
|
"name": "ranking", |
||||||
|
"version": "1.0.0", |
||||||
|
"description": "", |
||||||
|
"main": "index.js", |
||||||
|
"scripts": { |
||||||
|
"test": "echo \"Error: no test specified\" && exit 1" |
||||||
|
}, |
||||||
|
"keywords": [], |
||||||
|
"author": "", |
||||||
|
"license": "ISC" |
||||||
|
} |
||||||
@ -0,0 +1,169 @@ |
|||||||
|
<!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> |
||||||
@ -0,0 +1,81 @@ |
|||||||
|
body { |
||||||
|
--orange: #ff9d00; |
||||||
|
--bg: #51198a; |
||||||
|
--purple: #351159; |
||||||
|
--team-height: 50px; |
||||||
|
background: var(--bg); |
||||||
|
} |
||||||
|
.main-container { |
||||||
|
} |
||||||
|
.team-div { |
||||||
|
background: var(--purple); |
||||||
|
position: absolute; |
||||||
|
width: 300px; |
||||||
|
height: var(--team-height); |
||||||
|
font-family: 'Exo 2'; |
||||||
|
font-size: 30px; |
||||||
|
color: white; |
||||||
|
z-index: 1; |
||||||
|
} |
||||||
|
|
||||||
|
.team-div::before { |
||||||
|
position: absolute; |
||||||
|
content: ""; |
||||||
|
top: 0; |
||||||
|
right: 0; |
||||||
|
bottom: 0; |
||||||
|
left: 0; |
||||||
|
background-image: linear-gradient(90deg, rgba(94,0,94,1) 0%, rgba(109,9,121,1) 23%, rgba(168,0,222,1) 100%); |
||||||
|
z-index: -1; |
||||||
|
transition: opacity 0.25s linear; |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.awarded::before { |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
|
||||||
|
.team-name { |
||||||
|
line-height: var(--team-height); |
||||||
|
margin-left: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.team-points { |
||||||
|
float: right; |
||||||
|
line-height: var(--team-height); |
||||||
|
margin-right: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.points { |
||||||
|
z-index: 10; |
||||||
|
font-weight: bold; |
||||||
|
position: absolute; |
||||||
|
top: 0px; |
||||||
|
left: 200px; |
||||||
|
width: var(--team-height); |
||||||
|
height: var(--team-height); |
||||||
|
line-height: var(--team-height); |
||||||
|
text-align: center; |
||||||
|
background: var(--orange); |
||||||
|
-webkit-animation: fadeIn ease 0.5s; |
||||||
|
} |
||||||
|
|
||||||
|
@-webkit-keyframes fadeIn { |
||||||
|
0% {opacity:0;-webkit-transform: scale(0.5);} |
||||||
|
80% {opacity:0.8;-webkit-transform: scale(1.2);} |
||||||
|
100% {opacity:1;-webkit-transform: scale(1);} |
||||||
|
} |
||||||
|
|
||||||
|
.buttons { |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.buttons > div { |
||||||
|
display: block; |
||||||
|
position: relative; |
||||||
|
height: 30px; |
||||||
|
} |
||||||
|
.inp > * { |
||||||
|
position: absolute; |
||||||
|
right: 0; |
||||||
|
} |
||||||
Loading…
Reference in new issue