new update

tictactoe/assets/script/client.js

@@ -0,0 +1,40 @@
+class Client{
+    constructor(){
+        this.socket = io('https://tic-tac-toe-k2oh.onrender.com', {
+            transports: ['websocket']
+        });
+        this.#socketWork();
+    }
+
+    #socketWork(){
+        this.socket.on('waiting', () => {
+            console.log('wating');
+            multiplayer.waiting();
+        });
+
+        this.socket.on('match', (name,id,move)=>{
+            console.log(name,id,move);
+            multiplayer.startGame(name,move,id);
+        });
+
+        this.socket.on('leave', ()=>{
+            console.log('opponent leave');
+            multiplayer.opponentLeave();
+        });
+
+        this.socket.on('opponent-move', (position) => {
+            multiplayer.opponentMove(position);
+        })
+        // this.socket.on
+    }
+
+    JoinUser(name){
+        this.socket.emit('new-player', name);
+    }
+
+    myMove(position,toid){
+
+        this.socket.emit('player-move', position, toid);
+    }
+
+}

tictactoe/assets/script/multiplayer.js

@@ -0,0 +1,179 @@
+class MultiPlayer {
+    constructor() {
+        this.over = false;
+        this.mode = '';
+        this.opponent = {name:"", id:""};
+        this.panel = document.querySelector('.game-box');
+    }
+
+    waiting() {
+        this.panel.innerHTML = "";
+        let div = document.createElement('div');
+        div.classList.add('loading-spinner');
+        let h = document.createElement('h2');
+        h.innerText = "Matching ..."
+        // h.style = "";
+        this.panel.append(div);
+        this.panel.append(h);
+    }
+
+    startGame(opponent,move,id) {
+        this.mode = move ? 'x' : 'o';
+        this.opponent.id = id;
+        this.opponent.name = opponent;
+        let start = new Audio('./tune/begin.mp3');
+        start.play();
+        this.panel.innerHTML = "";
+
+        let div = document.createElement('div');
+        div.classList.add('battle');
+
+        let div1 = document.createElement('div');
+        div1.classList.add('p1');
+        div1.innerHTML = "YOU";
+
+        let div2 = document.createElement('div');
+        div2.classList.add('p2');
+        div2.innerHTML = opponent;
+
+        div.append(div1);
+        div.append('V/S');
+        div.append(div2);
+
+        let h = document.createElement('h1');
+        h.innerText = 'tic tac toe';
+        h.classList.add('welcome-title');
+        this.panel.append(h);
+        this.panel.append(div);
+
+        // Countdown timer
+        let countdown = 5;
+        let countdownInterval = setInterval(() => {
+            h.innerText = "Match begin in "+countdown;
+            countdown--;
+
+            if (countdown < 1) {
+                clearInterval(countdownInterval);
+
+                // Triggering the animation after the countdown
+                setTimeout(() => {
+                    h.innerText = 'Match Begin';
+                    div.classList.add('show');
+                    div1.classList.add('show');
+                    div2.classList.add('show');
+                    setTimeout(() => {
+                        this.#showGameBox();
+                    }, 2000);
+                }, 1000); // Adjust the delay as needed
+            }
+        }, 1000); // Update every second
+    }    
+
+    #showGameBox(){
+        let message = document.createElement('div');
+        message.classList.add('message');
+        message.innerHTML = `<p>${this.mode == 'x' ? "YOU" : this.opponent.name} turn</p>`;
+        let tictactoe = document.createElement('div');
+        tictactoe.classList.add('tictactoe');
+        for(let i = 0 ; i < 9 ; i++){
+            let cells = document.createElement('div');
+            cells.classList.add('cell');
+            tictactoe.append(cells);
+        }
+        this.panel.innerHTML = '';
+        this.panel.append(message);
+        let lobby = document.createElement('button');
+        lobby.innerText = 'lobby';
+        lobby.addEventListener('click',()=>{
+            location.reload();
+        })
+        this.panel.append(tictactoe);
+        this.panel.append(lobby);
+        this.#addEventListeners();
+    }
+
+    opponentMove(position){
+        const cells = document.querySelectorAll('.cell');
+        const message = document.querySelector('.message p');
+        cells[position].classList.add(this.mode);
+        cells[position].innerHTML = this.mode;
+        blocks[position] = this.mode;
+        this.mode = 'x';
+        message.textContent = "Your turn";
+        this.#evaluateWinner();
+    }
+
+    opponentLeave(){
+        if(!this.over){
+            this.#hideTictactoe();
+            const message = document.querySelector('.message p');
+            message.classList.add('win');
+            message.innerHTML = 'Opponent Leave match <br> You won';
+            startConfetti();
+        }
+    }
+
+    #addEventListeners() {
+        const cells = document.querySelectorAll('.cell');
+        const message = document.querySelector('.message p');
+
+        cells.forEach((cell) => { // Use an arrow function here
+            cell.addEventListener('click', () => {
+                const cellIndex = Array.from(cells).indexOf(cell);
+                if (cell.innerHTML == '' && this.mode == 'x') {
+                    cell.classList.add(this.mode);
+                    cell.innerHTML = this.mode;
+                    blocks[cellIndex] = this.mode;
+                    this.mode = 'o';
+                    message.textContent = this.opponent.name + " turn";
+                    client.myMove(cellIndex,this.opponent.id);
+                    this.#evaluateWinner();
+                }
+            });
+        });
+    }
+
+    #evaluateWinner(){
+        const message = document.querySelector('.message p');
+        let winner = check();
+        if (winner !== null) {
+            this.over = true;
+            if (winner.win == 'x') {
+                this.#updateWinningCells(winner.condition, 'winner-cell');
+                message.classList.add('win');
+                message.textContent = 'You Won';
+                setTimeout(() => {
+                    startConfetti();
+                    this.#hideTictactoe();
+                }, 300);
+            } else if (winner.win == 'o') { // Fix the condition here
+                this.#updateWinningCells(winner.condition, 'losser-cell');
+                message.classList.add('loss');
+                message.textContent = 'You Loss';
+                setTimeout(() => {
+                    looser();
+                    this.#hideTictactoe();
+                }, 300);
+            } else {
+                message.textContent = 'Match TIE';
+                setTimeout(() => {
+                    tie();
+                }, 300);
+            }
+        } 
+    }
+
+    #hideTictactoe() {
+        let tictactoe = document.querySelector('.tictactoe');
+        tictactoe.style.display = 'none';
+    }
+
+    #updateWinningCells(winningIndexes, cls) {
+        winningIndexes.forEach(index => {
+            document.querySelectorAll('.cell')[index].classList.add(cls);
+        });
+    }
+
+
+
+}

tictactoe/assets/script/script.js

@@ -15,7 +15,7 @@ function startGame(btn) {
     let btn3 = document.createElement('button');
     btn1.innerHTML = '<a href="twoPlayer.html">Two Player</a>';
     btn2.innerHTML = '<a href="computer.html">Play Against Computer</a>';
-    btn3.innerHTML = '<a href="https://tic-tac-toe-k2oh.onrender.com/multiplayer">Online Multiplayer</a>';
+    btn3.innerHTML = '<a href="multiplayer.html">Online Multiplayer</a>';
     div.appendChild(btn1);
     div.appendChild(btn2);
     div.appendChild(btn3);

tictactoe/assets/style/game.css

@@ -1,6 +1,7 @@
 .game-box, .level {
     max-width: 400px;
     padding: 20px;
+    flex: 1;
     background-color: #9de39d;
     color: rgb(10, 9, 9);
     box-shadow: 0 0 10px 0px;
@@ -94,4 +95,19 @@
     color: rgb(189, 8, 8);
     font-weight: bolder;
     font-size: xx-large;
+}
+
+#input{
+    display: flex;
+    max-width: 800px;
+    gap: 10px;
+    flex-wrap: wrap;
+}
+
+#input input{
+    padding: 5px;
+    border: none;
+    outline: none;
+    font-weight: bolder;
+    border-radius: 10px;
 }

tictactoe/assets/style/style.css

@@ -47,7 +47,7 @@ button {
     border-radius: 5px;
 }
 
-button:hover{
+button:hover {
     background-color: #31a335;
 }
 
@@ -59,7 +59,7 @@ button:hover{
     animation: borderAnimation 1s infinite alternate;
 }
 
-.options{
+.options {
     display: flex;
     flex-wrap: wrap;
     padding: 10px;
@@ -88,7 +88,6 @@ button:hover{
 
 .content {
     z-index: 2;
-    /* Set a higher z-index for the content to make sure it's above the confetti */
     padding: 20px;
     text-align: center;
     color: #333;
@@ -101,12 +100,13 @@ button:hover{
     from {
         width: 10px;
     }
+
     to {
         width: 200px;
     }
 }
 
-#mute{
+#mute {
     position: absolute;
     right: 25px;
     bottom: 25px;
@@ -142,8 +142,13 @@ button:hover{
 }
 
 @keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
 }
 
 body.loaded .loading-overlay {
@@ -154,8 +159,43 @@ body.loaded .content {
     display: block;
 }
 
-
-a{
+a {
     text-decoration: none;
-    color:white;
+    color: white;
+}
+
+.battle {
+    font-size: 24px;
+    display: flex;
+    align-items: center;
+    width: 100%;
+} 
+
+.p1, .p2 {
+    width: 50%;
+    text-align: center;
+    padding: 10px;
+    border-radius: 30% 10%;
+    color: white;
+    opacity: 0;
+    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
+}
+
+.p1 {
+    background-color: red;
+    transform: translateX(-100%);
+}
+
+.p2 {
+    background-color: green;
+    transform: translateX(100%);
+}
+
+.battle.show {
+    opacity: 1;
+}
+
+.p1.show, .p2.show {
+    opacity: 1;
+    transform: translateX(0);
 }