From 6e1828a5fd2ebfb9ea8d32c604f5176bdacadb25 Mon Sep 17 00:00:00 2001
From: wijtse <wijtse@rekkerit.nl>
Date: Wed, 25 Nov 2020 11:43:57 +0100
Subject: [PATCH] Initial commit

---
 .gitignore              |   2 +
 README.md               |   5 +-
 cli/htc-ranking-cli.zip | Bin 0 -> 1032 bytes
 cli/index.js            |  70 +++++++++++++++++
 cli/package.json        |  12 +++
 ranking/index.html      | 169 ++++++++++++++++++++++++++++++++++++++++
 ranking/styles.css      |  81 +++++++++++++++++++
 7 files changed, 338 insertions(+), 1 deletion(-)
 create mode 100644 .gitignore
 create mode 100644 cli/htc-ranking-cli.zip
 create mode 100644 cli/index.js
 create mode 100644 cli/package.json
 create mode 100644 ranking/index.html
 create mode 100644 ranking/styles.css

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..94824ae
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+**/node_modules/
+
diff --git a/README.md b/README.md
index 20d8b0d..fa7dfb6 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,6 @@
 # htc-ranking
 
-De live ranking gebruikt voor de Haramvision Team Contest.
\ No newline at end of file
+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).
diff --git a/cli/htc-ranking-cli.zip b/cli/htc-ranking-cli.zip
new file mode 100644
index 0000000000000000000000000000000000000000..fd48ba5f8dfb993f741f64bc9ffcacee9e1410cb
GIT binary patch
literal 1032
zcmWIWW@Zs#-~dABPSZdJC}?G20E#FuWag!$R_J9FhlcPnu=^d#i1!C#5M5fq&A`a=
zf|-E<O!Nl(=HE8p+50<O;3&h*2!$ty3pcUpZaB=h^X-P)0Si{0SrR4VIr&Md>%{+d
zUS&q=5^X;cPWSg$^@~hR-QUu@er>%gJO6_Z>8oX)ol$EMU9BVdrgOo^3!6WG=W&SG
zz3zRZ@3HQzK))Lu8)Wwh2AwT5jIX=Z^SoPJb9ri{|E>-0FAW5kSFf5i<@3#=;OVC$
zEoYx|nJTd<v(`aeGnXmA`+FMmq@V)bwBs4xQg4|h#Yz{O@a>(y;l;jmQ_Xt^=X`NJ
zuvM+Mcft&=z+2l=PFX2mtbXUbwq%M~?hZZy5#^RQxoaK^Mm#@Zx`+Amzw<BVs46R;
zc)Y!#-Mu4=f&Foo|FTI7A6&81-?6=y%d+`}b<rP3)}LIJkLu*@MQihFmVDqiv+1|7
z(EN8Z9@X8}ohwl6^nS{{Np_pvUOveDS~rpLImcCvIsLgWS=IfIzL+H)@TPMn#~t&o
zUFNz!_-`rx+_ymfx6!$2FExCc_ZZ%uQ@bvEP2)j#i_VLiwlf_(aM$t+|4fg)yMwA1
zI^SKp?$_m4x9;3qbYvOZ-|IiN>rFi4Zp9%v<zh|3vf#28hIjPtUd+Gl_ecAql=-6E
zL-A)5-+hkqek^m!;X|E%$)2t9_t+nor<`Yg>uBBovexj<aiz1{a(es^+e*CQJ{(`S
z+CjAFoWF7HE_aWKHFLH_rPeb9c(ZfdWVCqmlaYY|lxPCr$!Tf}B01d!CMzCbaw<qn
z&Q45E1tzHcJaCe#+LaMM1BgL1T9R_@-^h2!fXC%~UF*|@!mDm=)lN!CTf!5Vv_jKY
zOWh&xYQ4JWM2Yuze?E!kV%U<UlEdhFv+*r&Ip;nP8|&E>!B<1~20F)a`#*f1QxGyo
zG}^hi^t<%kCOawbDS|AY6pwm*=d-fuu*f`U<-zu&(<FYTPkX>L2V?dOgSd4&a~GVy
z-RW8S+*|FHWR?1VeYrI!f7v{#xRtz7EFR=#kt8+7nLtm0JQm>1$Rxsy$V14%0m?%#
vu%!{iA~r`Mn+gg_WE(+22?JXi{h1g@3fKT|RyL4sCLr7Zq@947n1KNRZ6cMB

literal 0
HcmV?d00001

diff --git a/cli/index.js b/cli/index.js
new file mode 100644
index 0000000..25bbed9
--- /dev/null
+++ 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);
+});
diff --git a/cli/package.json b/cli/package.json
new file mode 100644
index 0000000..a207894
--- /dev/null
+++ 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"
+}
diff --git a/ranking/index.html b/ranking/index.html
new file mode 100644
index 0000000..33dda9d
--- /dev/null
+++ 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>
diff --git a/ranking/styles.css b/ranking/styles.css
new file mode 100644
index 0000000..5982163
--- /dev/null
+++ 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;
+}