From e6574af7984404ea05f156d082a693c4d1f638d1 Mon Sep 17 00:00:00 2001
From: Ehab Elasam <eelasam@c3r1p5.42vienna.com>
Date: Wed, 3 Apr 2024 14:42:27 +0200
Subject: [PATCH] e

---
 frontend/css/PongEhab.css     |  1 -
 frontend/css/PongGame.css     | 31 +++++++++++++++++++++
 frontend/index.html           |  2 ++
 frontend/js/PongEhab.js       | 52 +++++++++++++++++++++++------------
 frontend/views/playerai1.html |  2 +-
 frontend/views/pongehab.html  |  2 +-
 6 files changed, 70 insertions(+), 20 deletions(-)
 create mode 100644 frontend/css/PongGame.css

diff --git a/frontend/css/PongEhab.css b/frontend/css/PongEhab.css
index bebd6b2..12f6bdc 100644
--- a/frontend/css/PongEhab.css
+++ b/frontend/css/PongEhab.css
@@ -1,4 +1,3 @@
-
 #pongEhabGameCanvas {
     background-color: #111;
 }
diff --git a/frontend/css/PongGame.css b/frontend/css/PongGame.css
new file mode 100644
index 0000000..e206287
--- /dev/null
+++ b/frontend/css/PongGame.css
@@ -0,0 +1,31 @@
+#pongGameCanvas {
+    background-color: #111;
+}
+
+.pong-game-over-modal {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: #222;
+    color: white;
+    padding: 20px;
+    border-radius: 10px;
+    text-align: center;
+    display: none; /* Versteckt das Modal standardmäßig */
+}
+
+.pong-game-over-modal button {
+    background-color: #555;
+    border: none;
+    padding: 10px 20px;
+    text-transform: uppercase;
+    color: white;
+    cursor: pointer;
+    margin-top: 20px;
+    border-radius: 5px;
+}
+
+.pong-game-over-modal button:hover {
+    background-color: #777;
+}
\ No newline at end of file
diff --git a/frontend/index.html b/frontend/index.html
index 62f85c9..4468b4a 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -18,6 +18,8 @@
   <link rel="stylesheet" href="./css/Profile.css" />
   <link rel="stylesheet" href="./css/Register.css" />
   <link rel="stylesheet" href="./css/Navbar.css" />
+  <link rel="stylesheet" href="./css/PongEhab.css" />
+  <link rel="stylesheet" href="./css/PongGame.css" />
   <script
   src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
   integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
diff --git a/frontend/js/PongEhab.js b/frontend/js/PongEhab.js
index e465863..a80ff6d 100644
--- a/frontend/js/PongEhab.js
+++ b/frontend/js/PongEhab.js
@@ -36,13 +36,27 @@ function showPongEhabPage() {
             color: "#FFF"
         };
     
-        document.addEventListener('keydown', function(event) {
+/*         document.addEventListener('keydown', function(event) {
             switch(event.key) {
                 case 'w': player1.y -= 20; break;
                 case 's': player1.y += 20; break;
                 case 'ArrowUp': player2.y -= 20; break;
                 case 'ArrowDown': player2.y += 20; break;
             }
+        }); */
+
+        document.addEventListener('keydown', function(event) {
+            const moveAmount = 30; // Erhöht von 20 auf 30 für schnellere Bewegung
+            switch(event.key) {
+                case 'w': player1.y -= moveAmount; break;
+                case 's': player1.y += moveAmount; break;
+                case 'ArrowUp': player2.y -= moveAmount; break;
+                case 'ArrowDown': player2.y += moveAmount; break;
+            }
+            
+            // Verhindere, dass die Schläger über den Bildschirm hinaus bewegt werden
+            player1.y = Math.max(Math.min(player1.y, canvas.height - player1.height), 0);
+            player2.y = Math.max(Math.min(player2.y, canvas.height - player2.height), 0);
         });
     
         function drawBall() {
@@ -66,21 +80,27 @@ function showPongEhabPage() {
         }
     
         function collisionDetection(ball, player) {
-            if (ball.x - ball.radius < 0 || ball.x + ball.radius > canvas.width) {
-                if (ball.y > player.y && ball.y < player.y + player.height) {
-                    ball.velocityX = -ball.velocityX;
-                } else {
-                    if (ball.x - ball.radius < 0) player2.score++;
-                    else player1.score++;
-                    
-                    if (player1.score === 7 || player2.score === 7) {
-                        gameOver = true;
-                        winner = player1.score === 7 ? 'Player 1' : 'Player 2';
-                        generateConfetti();
-                    }
-    
-                    resetBall();
+            // Kollisionsüberprüfung für den linken und rechten Schläger
+            if (ball.x - ball.radius < player1.x + player1.width && ball.x + ball.radius > player1.x &&
+                ball.y + ball.radius > player1.y && ball.y - ball.radius < player1.y + player1.height ||
+                ball.x - ball.radius < player2.x + player2.width && ball.x + ball.radius > player2.x &&
+                ball.y + ball.radius > player2.y && ball.y - ball.radius < player2.y + player2.height) {
+                
+                // Kollision detektiert, Ballrichtung umkehren
+                ball.velocityX = -ball.velocityX * 1.1; // Erhöht zusätzlich die Geschwindigkeit des Balls bei jedem Schlag
+                ball.velocityY += 0.1 * (Math.random() > 0.5 ? 1 : -1); // Fügt eine kleine zufällige Y-Verschiebung hinzu
+            } else if (ball.x - ball.radius < 0 || ball.x + ball.radius > canvas.width) {
+                // Überprüft, ob der Ball einen der horizontalen Ränder ohne Kollision mit den Schlägern erreicht hat
+                if (ball.x < canvas.width / 2) player2.score++; // Punkt für Spieler 2
+                else player1.score++; // Punkt für Spieler 1
+                
+                if (player1.score === 7 || player2.score === 7) {
+                    gameOver = true;
+                    winner = player1.score === 7 ? 'Player 1' : 'Player 2';
+                    generateConfetti();
                 }
+                
+                resetBall();
             }
         }
     
@@ -164,6 +184,4 @@ function showPongEhabPage() {
     
             updateConfetti();
         }
-
-
 };
\ No newline at end of file
diff --git a/frontend/views/playerai1.html b/frontend/views/playerai1.html
index d382d90..3b8347c 100644
--- a/frontend/views/playerai1.html
+++ b/frontend/views/playerai1.html
@@ -1,5 +1,5 @@
 <canvas id="playerAiCanvas"></canvas>
     <div id="playerAiModal" class="modal hidden">
         <h1 id="playerAiWinner"></h1>
-        <button id="playerAiRestart">Neu starten</button>
+        <button id="playerAiRestart">New Game</button>
     </div>
\ No newline at end of file
diff --git a/frontend/views/pongehab.html b/frontend/views/pongehab.html
index 282950a..8fb8d5e 100644
--- a/frontend/views/pongehab.html
+++ b/frontend/views/pongehab.html
@@ -2,6 +2,6 @@
     <canvas id="pongEhabGameCanvas"></canvas>
     <div id="pongEhabGameOverModal" class="pongEhab-hidden">
         <h1 id="pongEhabWinnerText"></h1>
-        <button id="pongEhabRestartButton">Neu starten</button>
+        <button id="pongEhabRestartButton">New Game</button>
     </div>
 </div>
\ No newline at end of file