fixed Animitation shoot

Output/public/css/style.css

@@ -141,7 +141,10 @@ ellipse{
     100%{top: var(--top325)}
 }
 
-
+@-webkit-keyframes Shoot{
+    0%{top: var(--top)}
+    100%{top: var(--top325)}
+}
 
 
 

Output/public/js/Board.js

@@ -60,6 +60,7 @@ Board.prototype.enableTurn = function() {
             cup.setAttribute('active', 'true');
         }
     });
+   ball.classList.remove("Shoot");
 };
 
 Board.prototype.highlightcups = function() {
@@ -79,88 +80,110 @@ Board.prototype.lowlightcups = function() {
     });
 };
 
+Board.prototype.shoot = function(cup) {
+  ball.classList.add("Shoot");  
+  switch(cup) {
+    case 0:
+    root.style.setProperty('--top325', "-515"+ "px");
+    ball.style.top = "-515px";
+    ball.style.left = "-155px";
+      break;
+    case 1:
+      root.style.setProperty('--top325', "-515"+ "px");
+      ball.style.top = "-515px";
+      ball.style.left = "-50px";
+      break;
+    case 2:
+      root.style.setProperty('--top325', "-515"+ "px");
+      ball.style.top = "-515px";
+      ball.style.left = "50px";
+      break;
+    case 3:
+      root.style.setProperty('--top325', "-515"+ "px");
+      ball.style.top = "-515px";
+      ball.style.left = "150px";
+      break;
+    case 4:
+      root.style.setProperty('--top325', "-430"+ "px");
+      ball.style.top = "-430px";
+      ball.style.left = "-100px";
+      break;
+    case 5:
+      root.style.setProperty('--top325', "-430"+ "px");
+      ball.style.top = "-430px";
+      ball.style.left = "0px";
+      break;
+    case 6:
+      root.style.setProperty('--top325', "-430"+ "px");
+      ball.style.top = "-430px";
+      ball.style.left = "100px";
+      break;
+    case 7:
+      root.style.setProperty('--top325', "-340"+ "px");
+      ball.style.top = "-340px"
+      ball.style.left = "-50px";
+      break;
+    case 8:
+      root.style.setProperty('--top325', "-340"+ "px");
+      ball.style.top = "-340px"
+      ball.style.left = "50px";
+      break;
+    case 9:
+      root.style.setProperty('--top325', "-250"+ "px");
+      ball.style.top = "-250px"
+      ball.style.left = "0px";
+      break;
+    default:
+      break;
+  }
+
+
+}
+
+
 
 Board.prototype.getCup = function(code) {
-  ball.classList.add("Shoot");
+ 
   switch (code)
   {
     case 'q':
     case 'Q':
-    root.style.setProperty('--top325', "-515"+ "px");
-    ball.style.top = "-515px";
-    ball.style.left = "-155px";
       return "cup1";
       break;
     case 'w':
     case 'W':
-      root.style.setProperty('--top325', "-515"+ "px");
-      ball.style.top = "-515px";
-      ball.style.left = "-50px";
       return "cup2";
-      //removeCup("2");j
       break;
     case 'e':
     case 'E':
-      root.style.setProperty('--top325', "-515"+ "px");
-      ball.style.top = "-515px";
-      ball.style.left = "50px";
       return "cup3";
-      //removeCup("3");
       break;
     case 'r':
     case 'R':
-      root.style.setProperty('--top325', "-515"+ "px");
-      ball.style.top = "-515px";
-      ball.style.left = "150px";
       return "cup4";
-      //removeCup("4");
       break;
     case 'a':
     case 'A':
-      root.style.setProperty('--top325', "-430"+ "px");
-      ball.style.top = "-430px";
-      ball.style.left = "-100px";
       return "cup5";
-      //removeCup("5");
       break;
     case 's':
     case 'S':
-      root.style.setProperty('--top325', "-430"+ "px");
-      ball.style.top = "-430px";
-      ball.style.left = "0px";
       return "cup6";
-      //removeCup("6");
       break;
     case 'd':
     case 'D':
-      root.style.setProperty('--top325', "-430"+ "px");
-      ball.style.top = "-430px";
-      ball.style.left = "100px";
-      //removeCup("7");
       return "cup7";
       break;
     case 'y':
     case 'Y':
-      root.style.setProperty('--top325', "-340"+ "px");
-      ball.style.top = "-340px"
-      ball.style.left = "-50px";
-      //removeCup("8");
       return "cup8";
       break;
     case 'x':
     case 'X':
-      root.style.setProperty('--top325', "-340"+ "px");
-      ball.style.top = "-340px"
-      ball.style.left = "50px";
-      //removeCup("9");
       return "cup9";
       break;
     case 'c':
     case 'C':
-      root.style.setProperty('--top325', "-250"+ "px");
-      ball.style.top = "-250px"
-      ball.style.left = "0px";
-      //removeCup("10");
       return "cup10";
       break;
     default:
@@ -174,6 +197,7 @@ Board.prototype.getCup = function(code) {
  */
 Board.prototype.mark = function(event) {
     if (this.ready) {
+      
       var target = document.getElementById(this.getCup(event.key));
       if (target.getAttribute('data-intent') === 'gamecup' && target.getAttribute('active') === 'true') {
           this.onMark(this.cups.indexOf(target));
@@ -192,13 +216,15 @@ Board.prototype.doMark = function(cupId, label) {
     var cup = this.cups[cupId];
     cup.textContent = label;
     //cup.classList.add('notActive');
-    // removeCup
+    // removeCup 
+    if(cup.getAttribute('marked') === 'false') this.shoot(cupId);
     setTimeout(this.cups[cupId].classList.add("fadeAway") ,1000);
     cup.setAttribute('marked', 'true');
     setTimeout(function() {
       ball.style.top = "0px";
       ball.style.left = "0px";
     }, 1000);
+    this.currentTurn = (this.currentTurn + 1) % 2;
 };
 
 /**

Output/public/js/app.js

@@ -1,4 +1,4 @@
-var socket = new WebSocket('ws://192.168.188.72:2667');
+var socket = new WebSocket('ws://localhost:2667');
 var events = {
     outgoing: {
         JOIN_GAME: 'csJoinGame',