Added same color for background bubbles (win animation/draw animation), Added...

Added same color for background bubbles (win animation/draw animation), Added freeze for chips when some player wins, Added restart button functionality, reszied handcursor, added more bubbles to the background

app.js

@@ -5,13 +5,15 @@ document.addEventListener('DOMContentLoaded', () => {
   const flaechen = document.querySelectorAll('.grid div');
   const ergebnis = document.querySelector('#result');
   const ergebnis2 = document.querySelector('#result2');
-  const bubbles1 = document.querySelector('.bubbles span');
-  const bubbles2 = document.querySelector('.bubbles span:nth-child(even)');
+  const bubbles1 = document.querySelectorAll('.bubbles span:nth-child(odd)');
+  const bubbles2 = document.querySelectorAll('.bubbles span:nth-child(even)');
+
+  const takenChips = document.querySelectorAll('.grid div');
 
   const displayCurrentPlayer = document.querySelector('#current-player');
   // Variable für den aktuellen Spieler (1 oder 2)
   let currentPlayer = 1;
-
+  let gameActive = true;
 
 //Hier werden alle potentielle gewinn Flächen abgespeichert
 // 4 Flächen müssen mit der gleichen Farbe belegt sein
@@ -123,6 +125,7 @@ ws.onmessage = function(event) {
 };
   // Funktion, um eine Spielmarke in der angegebenen Spalte zu platzieren
 function placeChipInColumn(column) {
+  if (!gameActive) return;
   // Beginne am unteren Ende der Spalte und suche das erste freie Feld
   for (let i = 5; i >= 0; i--) {
     const index = i * 7 + column;
@@ -143,6 +146,14 @@ function placeChipInColumn(column) {
       break;
     }
   }
+}
+function checkForDraw(){
+  for (let i = 0; i < flaechen.length; i++) {
+    if (!flaechen[i].classList.contains('taken')) {
+      return false;
+    }
+  }
+  return true;
 }
   // DIese Methode Überprüft jede Gewinnkombination
   function checkBoard() {
@@ -161,10 +172,12 @@ function placeChipInColumn(column) {
       {
         ergebnis.innerHTML = 'Spieler 1 siegt!'
         ergebnis2.innerHTML = 'Spieler 1 siegt!'
-        bubbles1.style.background = '#ff0000'
-        bubbles2.style.background = '#ff0000'
-        bubbles1.style.boxShadow = '#ff000044'
-        bubbles2.style.boxShadow = '#ff000044'
+        bubbles2.forEach(bubble => {
+          bubble.style.background = '#ff0000';
+          bubble.style.boxShadow = '0 0 10px #ff0000';
+        });
+        gameActive = false;
+        return;
       }
 
       if (
@@ -176,17 +189,31 @@ function placeChipInColumn(column) {
       {
         ergebnis.innerHTML = 'Spieler 2 siegt!'
         ergebnis2.innerHTML = 'Spieler 2 siegt!'
-        bubbles1.style.background = '#ffff00'
-        bubbles2.style.background = '#ffff00'
-        bubbles1.style.boxShadow = '#ffff0044'
-        bubbles2.style.boxShadow = '#ffff0044'
+        bubbles1.forEach(bubble => {
+          bubble.style.background = '#ffff00';
+          bubble.style.boxShadow = '0 0 10px #ffff00';
+        });
+        gameActive = false;
+        return;
+      }
+      if(gewinnFlaechen.length - 1 === y && checkForDraw()){
+      ergebnis.innerHTML = 'Unentschieden!';
+      ergebnis2.innerHTML = 'Unentschieden!';
+      bubbles1.forEach(bubbleodd => {
+          bubbleodd.style.background = '#ffffff';
+          bubbleodd.style.boxShadow = '0 0 10px #ffffff';
+        });
+      bubbles2.forEach(bubbleeven => {
+          bubbleeven.style.background = '#ffffff';
+          bubbleeven.style.boxShadow = '0 0 10px #ffffff';
+        });
       }
-
     }
   }
 // Fügt jedem Feld im Grid einen Klick-Event-Listener hinzu
   for (let i = 0; i < flaechen.length; i++) {
     flaechen[i].onclick = () => {
+      if (!gameActive) return;
       // Überprüft, ob das darüberliegende Feld besetzt ist und das aktuelle Feld frei ist, um die Gültigkeit des Zuges zu sichern
       if (flaechen[i + 7].classList.contains('taken') &&!flaechen[i].classList.contains('taken')) {
         if (currentPlayer == 1) { // Wenn Spieler Eins am Zug ist
@@ -212,5 +239,9 @@ function simulateClick(divElement) {
     }
 }
 
+    const startButton = document.getElementById('restartButton');
+    startButton.addEventListener('click', () => {
+      location.reload()
+    });
 
 

index.html

@@ -8,7 +8,9 @@
   <script type="module" src="app.js" charset="utf-8" defer></script>
 </head>
 <body>
+
 <div class="backgroundContainer">
+  <button id="restartButton"><p id="test">RESTART</p></button>
   <div class="bubbles">
     <span style="--i:11"></span>
     <span style="--i:12"></span>
@@ -42,6 +44,11 @@
     <span style="--i:13"></span>
     <span style="--i:28"></span>
 
+    <span style="--i:26"></span>
+    <span style="--i:17"></span>
+    <span style="--i:13"></span>
+    <span style="--i:28"></span>
+
 
 
 
@@ -109,8 +116,8 @@
     <div class="taken"></div>
   </div>
   </div>
-<img id="cursor0" src="file.png" width="15" height="20" alt="Cursor 1" style="position: absolute;"/>
-<img id="cursor1" src="file.png" width="15" height="20" alt="Cursor 2" style="position: absolute;"/>
+<img id="cursor0" src="file.png" width="30" height="40" alt="Cursor 1" style="position: absolute;"/>
+<img id="cursor1" src="file.png" width="30" height="40" alt="Cursor 2" style="position: absolute;"/>
 </div>
 </div>
 

style.css

@@ -178,7 +178,15 @@ button:hover {
   font-family: "Comic Sans MS";
   color: green;
   font-size: 50px;
-
 }
+#restartButton{
+  position: absolute;
+  background:green;
+}
+#test{
+  color: black;
+  font-family: "Comic Sans MS";
+}
+