add shadows when winning

script.js

@@ -24,11 +24,11 @@ function set(column) {
     }
 }
 
-function render() {
+function render(win) {
     const tableContainer = document.querySelector("#table-container");
     tableContainer.innerHTML = '';
-    if (turn == -1 || turn == -2) {
-        const winText = document.createTextNode(`player ${-1*turn} won. Click on the board to reset the game.`);
+    if (win) {
+        const winText = document.createTextNode(`player ${win[0][0]} won. Click on the board to reset the game.`);
         tableContainer.appendChild(winText);
     }
     const table = document.createElement("table");
@@ -36,6 +36,10 @@ function render() {
         const row = document.createElement("tr");
         for (let j = 0; j < 7; j++) {
             const cell = document.createElement("td");
+            if (win && win.some(([_, x, y]) => x === i && y === j)) {
+                const player = win.find(([_, x, y]) => x === i && y === j)[0];
+                cell.classList.add(`winning${player}`);
+            }
             if (board[i][j] === 1) {
                 cell.classList.add("player1");
             } else if (board[i][j] === 2) {
@@ -51,47 +55,59 @@ function render() {
 function playerMove(e) {
     if (turn == -1 || turn == -2) {
         reset()
+        render()
     } else {
         column = e.target.cellIndex
         console.log(column)
         set(column)
-        checkWin()
+        result = checkWin();
+        if (result) {
+            turn = (result[0][0])*-1
+        }
+        render(result)
     }
-    render()
 }
 
 function checkColumns() {
+    for (let j = 0; j < 7; j++) {
+        let ctr = 0;
+        let winningCells = [];
         for (let i = 0; i < 6; i++) {
+            if (board[i][j] != 0 && (board[i][j] === board[i+1]?.[j])) {
+                ctr++;
+                winningCells.push([board[i][j], i, j]);
+            } else {
                 ctr = 0;
-        for (let j = 0; j < 6; j++) {
-            if (board[i][j] != 0 && (board[i][j] === board[i][j+1])) {
-                ctr +=1
-                console.log(`ctr ${ctr}`)
+                winningCells = [];
             }
-            if (ctr == 3) {
-                console.log(`player ${board[i][j]} won`);
-                turn = -1*board[i][j];
-                return true;
+            if (ctr === 3) {
+                winningCells.push([board[i+1][j], i+1, j]);
+                return winningCells;
             }
         }
     }
+    return null;
 }
 
 function checkRows() {
-        for (let i = 0; i < 7; i++) {
+    for (let i = 0; i < 6; i++) {
+        let ctr = 0;
+        let winningCells = [];
+        for (let j = 0; j < 7; j++) {
+            if (board[i][j] != 0 && (board[i][j] === board[i][j+1])) {
+                ctr++;
+                winningCells.push([board[i][j], i, j]);
+            } else {
                 ctr = 0;
-        for (let j = 0; j < 5; j++) {
-            if (board[j][i] != 0 && (board[j][i] === board[j+1][i])) {
-                ctr +=1
+                winningCells = [];
             }
-            if (ctr == 3) {
-                console.log(`player ${board[j][i]} won`);
-                turn = -1*board[j][i];
-                return true;
+            if (ctr === 3) {
+                winningCells.push([board[i][j+1], i, j+1]);
+                return winningCells;
             }
         }
     }
-    return false;
+    return null;
 }
 
 function checkDescendingDiagonals() {
@@ -99,13 +115,16 @@ function checkDescendingDiagonals() {
         for (let j = 0; j < 4; j++) {
             let player = board[i][j];
             if (player !== 0 && player === board[i+1][j+1] && player === board[i+2][j+2] && player === board[i+3][j+3]) {
-                console.log(`Player ${player} won`);
-                turn = -1 * player;
-                return true;
+                return [
+                    [player, i, j],
+                    [player, i+1, j+1],
+                    [player, i+2, j+2],
+                    [player, i+3, j+3]
+                ];
             }
         }
     }
-    return false;
+    return null;
 }
 
 function checkAscendingDiagonals() {
@@ -113,18 +132,43 @@ function checkAscendingDiagonals() {
         for (let j = 3; j < 7; j++) {
             let player = board[i][j];
             if (player !== 0 && player === board[i+1][j-1] && player === board[i+2][j-2] && player === board[i+3][j-3]) {
-                console.log(`Player ${player} won`);
-                turn = -1 * player;
-                return true;
+                return [
+                    [player, i, j],
+                    [player, i+1, j-1],
+                    [player, i+2, j-2],
+                    [player, i+3, j-3]
+                ];
             }
         }
     }
-    return false;
+    return null;
 }
 
 function checkWin() {
-    return checkColumns() || checkRows() || checkAscendingDiagonals() || checkDescendingDiagonals();
+    let winArray = [];
+
+    let columnWin = checkColumns();
+    if (columnWin) {
+        winArray = winArray.concat(columnWin);
+    }
+
+    let rowWin = checkRows();
+    if (rowWin) {
+        winArray = winArray.concat(rowWin);
+    }
+
+    let descendingDiagonalWin = checkDescendingDiagonals();
+    if (descendingDiagonalWin) {
+        winArray = winArray.concat(descendingDiagonalWin);
+    }
+
+    let ascendingDiagonalWin = checkAscendingDiagonals();
+    if (ascendingDiagonalWin) {
+        winArray = winArray.concat(ascendingDiagonalWin);
+    }
+
+    return winArray.length > 0 ? winArray : null;
 }
 
-render();
+render(null);
 document.querySelector("#table-container").addEventListener("click", (e) => playerMove(e))

style.css

@@ -21,3 +21,9 @@ td {
 .player2 {
     background-color: yellow;
 }
+.winning1 {
+    box-shadow: 5px 5px 5px 5px red;
+}
+.winning2 {
+    box-shadow: 5px 5px 5px 5px yellow;
+}