From 3f3afef40d3725f13db671592a2292ef3548d659 Mon Sep 17 00:00:00 2001 From: Lukas Doerr Date: Mon, 21 Jun 2021 12:59:32 +0200 Subject: [PATCH] fixed Animitation shoot --- Output/public/css/style.css | 5 +- Output/public/js/Board.js | 108 ++++++++++++++++++++++-------------- Output/public/js/app.js | 2 +- 3 files changed, 72 insertions(+), 43 deletions(-) diff --git a/Output/public/css/style.css b/Output/public/css/style.css index 58cdaed..b95d9dd 100644 --- a/Output/public/css/style.css +++ b/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)} +} diff --git a/Output/public/js/Board.js b/Output/public/js/Board.js index fc6bbf0..bfe5814 100644 --- a/Output/public/js/Board.js +++ b/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; }; /** diff --git a/Output/public/js/app.js b/Output/public/js/app.js index 277016d..69abbe5 100644 --- a/Output/public/js/app.js +++ b/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',