Initial commit

3 years ago · 6e1828a5fd
parent 4d4062e7dc
commit 6e1828a5fd
7 changed files with 338 additions and 1 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,2 @@
+**/node_modules/
+
--- a/README.md
+++ b/README.md
@ -1,3 +1,6 @@
 # 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).
--- a/cli/htc-ranking-cli.zip
+++ b/cli/htc-ranking-cli.zip
--- a/cli/index.js
+++ b/cli/index.js
@ -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);
+});
--- a/cli/package.json
+++ b/cli/package.json
@ -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"
+}
--- a/ranking/index.html
+++ b/ranking/index.html
@ -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>
--- a/ranking/styles.css
+++ b/ranking/styles.css
@ -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;
+}