Browse Source

fixed Animitation shoot

master
Lukas Doerr 1 year ago
parent
commit
3f3afef40d
3 changed files with 72 additions and 43 deletions
  1. 4
    1
      Output/public/css/style.css
  2. 67
    41
      Output/public/js/Board.js
  3. 1
    1
      Output/public/js/app.js

+ 4
- 1
Output/public/css/style.css View File

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


@-webkit-keyframes Shoot{
0%{top: var(--top)}
100%{top: var(--top325)}
}




+ 67
- 41
Output/public/js/Board.js View File

@@ -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;
};

/**

+ 1
- 1
Output/public/js/app.js View File

@@ -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',

Loading…
Cancel
Save