Remove Cups properly

Output/BoardServer.js

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

Output/public/js/Board.js

  *
  * @constructor
  */
+var root = document.documentElement;
+var ball = document.getElementById("ball");
+
 var Board = function(scoreBoard) {
     this.cups = [];
     this.dom = document.getElementById('cont');
 
 
 Board.prototype.disableAll = function() {
-  alert('disableAll');
     this.cups.forEach(function(cup) {
         //cup.classList.add('notActive');
     });
 };
 
 Board.prototype.enableTurn = function() {
-  alert('enableTurn');
     this.cups.forEach(function(cup) {
         if (cup.getAttribute('marked') === 'false') {
             //cup.classList.remove('notActive');
 
 
 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;
  * @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();
 
     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);
 };
 
 /**
  *
  */
 Board.prototype.doDraw = function() {
+    alert('doDraw');
     this.lowlightcups();
 };
 

Output/public/js/app.js

  * @param cupId
  */
 board.onMark = function(cupId){
-  alert('onMark');
     socket.send(makeMessage(events.outgoing.MARK, {playerId: hero.id, cupId: cupId}));
 };
 
 
     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);
 
             break;
         case events.incoming.MARK:
-        alert('incoming.mARK');
             board.doMark(msg.data.cupId, msg.data.player.label);
 
             break;

Output/server.js

     });
 
     ws.on('message', function incoming(msg) {
+
         try {
             var msg = JSON.parse(msg);
         } catch (error) {

Output/views/layout.jade

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