Remove Cups properly

Output/BoardServer.js

@@ -51,7 +51,6 @@ Board.prototype.enableAll = function() {
  * @param cupId
  */
 Board.prototype.mark = function(cupId) {
-  alert(' mark bsjs');
     var cup = this.cups[cupId];
 
     if (!cup) {
@@ -84,6 +83,7 @@ Board.prototype.mark = function(cupId) {
  * @returns {boolean}
  */
 Board.prototype.checkTurn = function(playerId) {
+  ('checkTurn');
     return this.players[this.currentTurn].id == playerId;
 };
 

Output/public/js/Board.js

@@ -2,6 +2,9 @@
  *
  * @constructor
  */
+var root = document.documentElement;
+var ball = document.getElementById("ball");
+
 var Board = function(scoreBoard) {
     this.cups = [];
     this.dom = document.getElementById('cont');
@@ -37,7 +40,6 @@ Board.prototype.init = function() {
 
 
 Board.prototype.disableAll = function() {
-  alert('disableAll');
     this.cups.forEach(function(cup) {
         //cup.classList.add('notActive');
     });
@@ -52,7 +54,6 @@ Board.prototype.enableAll = function() {
 };
 
 Board.prototype.enableTurn = function() {
-  alert('enableTurn');
     this.cups.forEach(function(cup) {
         if (cup.getAttribute('marked') === 'false') {
             //cup.classList.remove('notActive');
@@ -83,78 +84,87 @@ Board.prototype.lowlightcups = function() {
 
 
 Board.prototype.getCup = function(code) {
-  alert(code);
+  ball.classList.add("Shoot");
   switch (code)
   {
     case 'e':
     case 'E':
-    //root.style.setProperty('--top325', "-350"+ "px");
-    ball.style.top = "-350px"
+    root.style.setProperty('--top325', "-350"+ "px");
+    ball.style.top = "-350px";
     ball.style.left = "-155px";
       return "cup1";
       break;
     case 'r':
     case 'R':
-      //root.style.setProperty('--top325', "-350"+ "px");
-      ball.style.top = "-350px"
+      root.style.setProperty('--top325', "-350"+ "px");
+      ball.style.top = "-350px";
       ball.style.left = "-50px";
+      return "cup2";
       //removeCup("2");
       break;
     case 't':
     case 'T':
-      //root.style.setProperty('--top325', "-350"+ "px");
-      ball.style.top = "-350px"
+      root.style.setProperty('--top325', "-350"+ "px");
+      ball.style.top = "-350px";
       ball.style.left = "55px";
+      return "cup3";
       //removeCup("3");
       break;
     case 'z':
     case 'Z':
-      //root.style.setProperty('--top325', "-350"+ "px");
-      ball.style.top = "-350px"
+      root.style.setProperty('--top325', "-350"+ "px");
+      ball.style.top = "-350px";
       ball.style.left = "160px";
+      return "cup4";
       //removeCup("4");
       break;
     case 'd':
     case 'D':
-      //root.style.setProperty('--top325', "-290"+ "px");
-      ball.style.top = "-290px"
+      root.style.setProperty('--top325', "-290"+ "px");
+      ball.style.top = "-290px";
       ball.style.left = "-100px";
+      return "cup5";
       //removeCup("5");
       break;
     case 'f':
     case 'F':
-      //root.style.setProperty('--top325', "-290"+ "px");
-      ball.style.top = "-290px"
+      root.style.setProperty('--top325', "-290"+ "px");
+      ball.style.top = "-290px";
       ball.style.left = "0px";
+      return "cup6";
       //removeCup("6");
       break;
     case 'g':
     case 'G':
-      //root.style.setProperty('--top325', "-290"+ "px");
-      ball.style.top = "-290px"
+      root.style.setProperty('--top325', "-290"+ "px");
+      ball.style.top = "-290px";
       ball.style.left = "110px";
       //removeCup("7");
+      return "cup7";
       break;
     case 'c':
     case 'C':
-      //root.style.setProperty('--top325', "-220"+ "px");
+      root.style.setProperty('--top325', "-220"+ "px");
       ball.style.top = "-220px"
       ball.style.left = "-50px";
       //removeCup("8");
+      return "cup8";
       break;
     case 'v':
     case 'V':
-      //root.style.setProperty('--top325', "-220"+ "px");
+      root.style.setProperty('--top325', "-220"+ "px");
       ball.style.top = "-220px"
       ball.style.left = "55px";
       //removeCup("9");
+      return "cup9";
       break;
     case 'b':
     case 'B':
-      //root.style.setProperty('--top325', "-160"+ "px");
+      root.style.setProperty('--top325', "-160"+ "px");
       ball.style.top = "-160px"
       ball.style.left = "0px";
       //removeCup("10");
+      return "cup10";
       break;
     default:
       break;
@@ -166,12 +176,9 @@ Board.prototype.getCup = function(code) {
  * @param event
  */
 Board.prototype.mark = function(event) {
-    alert(this.ready);
     if (this.ready) {
       var target = document.getElementById(this.getCup(event.key));
-      alert(target);
       if (target.getAttribute('data-intent') === 'gamecup' && target.getAttribute('active') === 'true') {
-
           this.onMark(this.cups.indexOf(target));
           this.disableAll();
 
@@ -188,9 +195,13 @@ Board.prototype.doMark = function(cupId, label) {
     var cup = this.cups[cupId];
     cup.textContent = label;
     //cup.classList.add('notActive');
-
     // removeCup
+    setTimeout(this.cups[cupId].classList.add("fadeAway") ,1000);
     cup.setAttribute('marked', 'true');
+    setTimeout(function() {
+      ball.style.top = "0px";
+      ball.style.left = "0px";
+    }, 1000);
 };
 
 /**
@@ -206,6 +217,7 @@ Board.prototype.doWinner = function(pos) {
  *
  */
 Board.prototype.doDraw = function() {
+    alert('doDraw');
     this.lowlightcups();
 };
 

Output/public/js/app.js

@@ -54,7 +54,6 @@ function makeMessage(action, data){
  * @param cupId
  */
 board.onMark = function(cupId){
-  alert('onMark');
     socket.send(makeMessage(events.outgoing.MARK, {playerId: hero.id, cupId: cupId}));
 };
 
@@ -88,7 +87,7 @@ socket.onmessage = function(event){
 
     switch (msg.action) {
         case events.incoming.ERROR:
-            alert('Error: ' + msg.data);
+            alert('Errorrr: ' + msg.data);
             break;
         case events.incoming.JOIN_GAME:
             board.addPlayer(msg.data);
@@ -109,7 +108,6 @@ socket.onmessage = function(event){
 
             break;
         case events.incoming.MARK:
-        alert('incoming.mARK');
             board.doMark(msg.data.cupId, msg.data.player.label);
 
             break;

Output/server.js

@@ -78,6 +78,7 @@ wss.on('connection', function connection(ws) {
     });
 
     ws.on('message', function incoming(msg) {
+
         try {
             var msg = JSON.parse(msg);
         } catch (error) {

Output/views/layout.jade

@@ -1,5 +1,5 @@
 doctype html
-html(lang='en')
+html(lang='en')#cont
   head
     meta(charset='UTF-8')
     meta( http-equiv='X-UA-Compatible', content='IE=edge' )