index.js

const player = {
    host: false,
    playedCell: "",
    roomId: null,
    username: "",
    socketId: "",
    symbol: "X",
    turn: false,
    win: false,
    isBlackPlayer: false
};

const socket = io();

const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const roomId = urlParams.get('room');

if (roomId) {
    document.getElementById('start').innerText = "Rejoindre";
}

const usernameInput = document.getElementById('username');

const gameCard = document.getElementById('game-card');
const userCard = document.getElementById('user-card');

const restartArea = document.getElementById('restart-area');
const waitingArea = document.getElementById('waiting-area');

const roomsCard = document.getElementById('rooms-card');
const roomsList = document.getElementById('rooms-list');

const turnMsg = document.getElementById('turn-message');
const linkToShare = document.getElementById('link-to-share');

let ennemyUsername = "";

socket.emit('get rooms');
socket.on('list rooms', (rooms) => {
    let html = "";

    if (rooms.length > 0) {
        rooms.forEach(room => {
            if (room.players.length !== 2) {
                html += `<li class="list-group-item d-flex justify-content-between">
                            <p class="p-0 m-0 flex-grow-1 fw-bold">Salon de ${room.players[0].username} - ${room.id}</p>
                            <button class="btn btn-sm btn-success join-room" data-room="${room.id}">Rejoindre</button>
                        </li>`;
            }
        });
    }

    if (html !== "") {
        roomsCard.classList.remove('d-none');
        roomsList.innerHTML = html;

        for (const element of document.getElementsByClassName('join-room')) {
            element.addEventListener('click', joinRoom, false)
        }
    }
});

$("#form").on('submit', function (e) {
    e.preventDefault();

    player.username = usernameInput.value;

    if (roomId) {
        player.roomId = roomId;
    } else {
        player.host = true;
        player.turn = true;
    }

    player.socketId = socket.id;

    userCard.hidden = true;
    waitingArea.classList.remove('d-none');
    roomsCard.classList.add('d-none');

    socket.emit('playerData', player);
});

$(".cell").on("click", function (e) {
    const playedCell = this.getAttribute('id');

    if (this.innerText === "" && player.turn) {
        player.playedCell = playedCell;

        this.innerText = player.symbol;

        player.win = calculateWin(playedCell);
        player.turn = false;

        socket.emit('play', player);
    }
});

$("#restart").on('click', function () {
    restartGame();
})

socket.on('join room', (roomId) => {
    player.roomId = roomId;
    linkToShare.innerHTML = `<a href="${window.location.href}?room=${player.roomId}" target="_blank">${window.location.href}?room=${player.roomId}</a>`;
});

socket.on('start game', (players) => {
    console.log(players)
    startGame(players);
});

socket.on('play', (ennemyPlayer) => {

    if (ennemyPlayer.socketId !== player.socketId && !ennemyPlayer.turn) {
        const playedCell = document.getElementById(`${ennemyPlayer.playedCell}`);

        playedCell.classList.add('text-danger');
        playedCell.innerHTML = 'O';

        if (ennemyPlayer.win) {
            setTurnMessage('alert-info', 'alert-danger', `C'est perdu ! <b>${ennemyPlayer.username}</b> a gagné !`);
            calculateWin(ennemyPlayer.playedCell, 'O');
            showRestartArea();
            return;
        }

        if (calculateEquality()) {
            setTurnMessage('alert-info', 'alert-warning', "C'est une egalité !");
            return;
        }

        setTurnMessage('alert-info', 'alert-success', "C'est ton tour de jouer");
        player.turn = true;
    } else {
        if (player.win) {
            $("#turn-message").addClass('alert-success').html("Félicitations, tu as gagné la partie !");
            showRestartArea();
            return;
        }

        if (calculateEquality()) {
            setTurnMessage('alert-info', 'alert-warning', "C'est une egalité !");
            showRestartArea();
            return;
        }

        setTurnMessage('alert-success', 'alert-info', `C'est au tour de <b>${ennemyUsername}</b> de jouer`)
        player.turn = false;
    }
});

socket.on('play again', (players) => {
    restartGame(players);
})

function startGame(players) {
    restartArea.classList.add('d-none');
    waitingArea.classList.add('d-none');
    turnMsg.classList.remove('d-none');
    draw();
    const ennemyPlayer = players.find(p => p.socketId != player.socketId);
    ennemyUsername = ennemyPlayer.username;


    player.isBlackPlayer = !player.host;

    if (player.host && player.turn) {
        setTurnMessage('alert-info', 'alert-success', "C'est ton tour de jouer");
    } else {
        setTurnMessage('alert-success', 'alert-info', `C'est au tour de <b>${ennemyUsername}</b> de jouer`);
    }
    draw();
}

function setTurnMessage(classToRemove, classToAdd, html) {
    turnMsg.classList.remove(classToRemove);
    turnMsg.classList.add(classToAdd);
    turnMsg.innerHTML = html;
}
const joinRoom = function () {
    if (usernameInput.value !== "") {
        player.username = usernameInput.value;
        player.socketId = socket.id;
        player.roomId = this.dataset.room;

        socket.emit('playerData', player);

        userCard.hidden = true;
        waitingArea.classList.remove('d-none');
        roomsCard.classList.add('d-none');
    }
}

const canvas = document.getElementById("chessboard");
const ctx = canvas.getContext("2d");
const size = 60; // Taille des cases
currentPlayer = 0;
// Disposition initiale de l'échiquier
const board = [
    ["T", "C", "F", "Q", "K", "F", "C", "T"],
    ["P", "P", "P", "P", "P", "P", "P", "P"],
    ["", "", "", "", "", "", "", ""],
    ["", "", "", "", "", "", "", ""],
    ["", "", "", "", "", "", "", ""],
    ["", "", "", "", "", "", "", ""],
    ["p", "p", "p", "p", "p", "p", "p", "p"],
    ["t", "c", "f", "q", "k", "f", "c", "t"]
];

// Charger les images des pièces

const pieceImages = {
    "p": "pion_blanc.png",
    "P": "pion_noir.png",
    "t": "tour_blanc.png",
    "T": "tour_noir.png",
    "c": "cavalier_blanc.png",
    "C": "cavalier_noir.png",
    "f": "fou_blanc.png",
    "F": "fou_noir.png",
    "q": "reine_blanc.png",
    "Q": "reine_noir.png",
    "k": "roi_blanc.png",
    "K": "roi_noir.png"
};

const pieces_joueurs = {0: ["p","t","c","f","q","k"],1:["P","T","C","F","Q","K"]};




// Dessiner l'échiquier avec les couleurs des cases
function drawBoard() {
    for (let row = 0; row < 8; row++) {
        for (let col = 0; col < 8; col++) {
            let displayRow = player.isBlackPlayer ? 7 - row : row;
            let displayCol = player.isBlackPlayer ? 7 - col : col;
            ctx.fillStyle = (displayRow + displayCol) % 2 === 0 ? "#F5DEB3" : "#8B4513";
            ctx.fillRect(col * size, row * size, size, size);
        }
    }
}


// Dessiner les pièces sur l'échiquier
function drawPieces() {
    for (let row = 0; row < 8; row++) {
        for (let col = 0; col < 8; col++) {
            let piece = board[row][col];
            if (piece !== "") {
                let img = new Image();
                img.src = "chess_pieces/" + pieceImages[piece];
                img.onload = function () {
                    let displayRow = player.isBlackPlayer ? 7 - row : row;
                    let displayCol = player.isBlackPlayer ? 7 - col : col;
                    ctx.drawImage(img, displayCol * size, displayRow * size, size, size);
                };
            }
        }
    }
}


// Fonction principale pour dessiner l'échiquier
function draw() {
    drawBoard();
    drawPieces();
}

// Appeler la fonction pour afficher l'échiquier



//Mouvement des pièces sur l'échiquier 

let selectedPiece = null;
let selectedPosition = null;

canvas.addEventListener("click", function(event) {
    let col = Math.floor(event.offsetX / size);
    let row = Math.floor(event.offsetY / size);

    if (player.isBlackPlayer) {
        col = 7 - col;
        row = 7 - row;
    }

    if (selectedPiece) {
        movePiece(row, col);
    } else {
        selectPiece(row, col);
    }
});


function selectPiece(row, col) {
    const piece = board[row][col];

    if (piece !== "" && pieces_joueurs[currentPlayer].includes(piece)) {  // Vérifier que ce n'est pas une case vide
        selectedPiece = piece;
        selectedPosition = { row, col };
        highlightMoves(currentPlayer,piece, row, col);
    }
}

function highlightMoves(player,piece, row, col) {
    if (player===0){
        direction=-1;
        opponent=1;
    }
    else{direction=1;
        opponent=0;
    }
    let moves = [];
    if (piece.toLowerCase() === "p") {
        if(row===6 && player===0){
            if (board[row + 2*direction][col] === "") {
                moves.push({row: row + 2*direction,col});
            }
        }
        if(row===1 && player===1){
            if (board[row +2*direction][col] === "") {
                moves.push({row: row + 2*direction,col});
            }
        }
        if (board[row + direction] && board[row + direction][col] === "") {
            moves.push({ row: row + direction, col });
        }
        if (pieces_joueurs[opponent].includes(board[row + direction][col + direction])){
            moves.push({row: row +direction, col: col + direction })
        }
        if (pieces_joueurs[opponent].includes(board[row + direction][col - direction])){
            moves.push({row: row +direction, col: col - direction })
        }
    }
    if (piece.toLowerCase() === "t") {
        // Déplacements vers le haut
        for (let r = row - 1; r >= 0; r--) {
            if (board[r][col] === "") {
            moves.push({ row: r, col });
            } 
            else {
                if (pieces_joueurs[opponent].includes(board[r][col])) {
                moves.push({ row: r, col }); // Capture possible
                }
                break // Bloqué par une pièce
            }
        }

        // Déplacements vers le bas
        for (let r = row + 1; r < 8; r++) {
            if (board[r][col] === "") {
                moves.push({ row: r, col });
            } else {
                if (pieces_joueurs[opponent].includes(board[r][col])) {
                    moves.push({ row: r, col });
                }
                break;
            }
        }

        // Déplacements vers la gauche
        for (let c = col - 1; c >= 0; c--) {
            if (board[row][c] === "") {
                moves.push({ row, col: c });
            } else {
                if (pieces_joueurs[opponent].includes(board[row][c])) {
                    moves.push({ row, col: c });
                }
                break;
            }
        }

        // Déplacements vers la droite
        for (let c = col + 1; c < 8; c++) {
            if (board[row][c] === "") {
                moves.push({ row, col: c });
            } else {
                if (pieces_joueurs[opponent].includes(board[row][c])) {
                    moves.push({ row, col: c });
                }
                break;
            }
        }
    }
    if (piece.toLowerCase() === "f") {
        // Déplacements en haut à gauche
        for (let r = row - 1, c = col - 1; r >= 0 && c >= 0; r--, c--) {
            if (board[r][c] === "") {
                moves.push({ row: r, col: c });
            } else {
                if (pieces_joueurs[opponent].includes(board[r][c])) {
                    moves.push({ row: r, col: c });
                }
                break; // Bloqué par une pièce
            }
        }
    
        // Déplacements en haut à droite
        for (let r = row - 1, c = col + 1; r >= 0 && c < 8; r--, c++) {
            if (board[r][c] === "") {
                moves.push({ row: r, col: c });
            } else {
                if (pieces_joueurs[opponent].includes(board[r][c])) {
                    moves.push({ row: r, col: c });
                }
                break;
            }
        }
    
        // Déplacements en bas à gauche
        for (let r = row + 1, c = col - 1; r < 8 && c >= 0; r++, c--) {
            if (board[r][c] === "") {
                moves.push({ row: r, col: c });
            } else {
                if (pieces_joueurs[opponent].includes(board[r][c])) {
                    moves.push({ row: r, col: c });
                }
                break;
            }
        }
    
        // Déplacements en bas à droite
        for (let r = row + 1, c = col + 1; r < 8 && c < 8; r++, c++) {
            if (board[r][c] === "") {
                moves.push({ row: r, col: c });
            } else {
                if (pieces_joueurs[opponent].includes(board[r][c])) {
                    moves.push({ row: r, col: c });
                }
                break;
            }
        }
    }
    if (piece.toLowerCase() === "k") {
        let directions = [
            { dr: -1, dc: 0 },  // Haut
            { dr: 1, dc: 0 },   // Bas
            { dr: 0, dc: -1 },  // Gauche
            { dr: 0, dc: 1 },   // Droite
            { dr: -1, dc: -1 }, // Diagonale haut-gauche
            { dr: -1, dc: 1 },  // Diagonale haut-droite
            { dr: 1, dc: -1 },  // Diagonale bas-gauche
            { dr: 1, dc: 1 }    // Diagonale bas-droite
        ];
    
        for (let { dr, dc } of directions) {
            let newRow = row + dr;
            let newCol = col + dc;
    
            // Vérifie que la nouvelle position est sur l'échiquier
            if (newRow >= 0 && newRow < 8 && newCol >= 0 && newCol < 8) {
                if (board[newRow][newCol] === "" || pieces_joueurs[opponent].includes(board[newRow][newCol])) {
                    moves.push({ row: newRow, col: newCol });
                }
            }
        }
    }
    if (piece.toLowerCase() === "c") {
        let movesL = [
            { dr: -2, dc: -1 }, { dr: -2, dc: 1 }, // Haut gauche, Haut droite
            { dr: 2, dc: -1 }, { dr: 2, dc: 1 },   // Bas gauche, Bas droite
            { dr: -1, dc: -2 }, { dr: -1, dc: 2 }, // Gauche haut, Droite haut
            { dr: 1, dc: -2 }, { dr: 1, dc: 2 }    // Gauche bas, Droite bas
        ];
    
        for (let { dr, dc } of movesL) {
            let newRow = row + dr;
            let newCol = col + dc;
    
            // Vérifie que la nouvelle position est sur l'échiquier
            if (newRow >= 0 && newRow < 8 && newCol >= 0 && newCol < 8) {
                if (board[newRow][newCol] === "" || pieces_joueurs[opponent].includes(board[newRow][newCol])) {
                    moves.push({ row: newRow, col: newCol });
                }
            }
        }
    }

    if (piece.toLowerCase() === "q") {
        // Déplacements verticaux (haut et bas)
        for (let r = row - 1; r >= 0; r--) { // Haut
            if (board[r][col] === "") {
                moves.push({ row: r, col });
            } else {
                if (pieces_joueurs[opponent].includes(board[r][col])) {
                    moves.push({ row: r, col }); // Capture possible
                }
                break; // Bloqué par une pièce
            }
        }
        for (let r = row + 1; r < 8; r++) { // Bas
            if (board[r][col] === "") {
                moves.push({ row: r, col });
            } else {
                if (pieces_joueurs[opponent].includes(board[r][col])) {
                    moves.push({ row: r, col });
                }
                break;
            }
        }
    
        // Déplacements horizontaux (gauche et droite)
        for (let c = col - 1; c >= 0; c--) { // Gauche
            if (board[row][c] === "") {
                moves.push({ row, col: c });
            } else {
                if (pieces_joueurs[opponent].includes(board[row][c])) {
                    moves.push({ row, col: c });
                }
                break;
            }
        }
        for (let c = col + 1; c < 8; c++) { // Droite
            if (board[row][c] === "") {
                moves.push({ row, col: c });
            } else {
                if (pieces_joueurs[opponent].includes(board[row][c])) {
                    moves.push({ row, col: c });
                }
                break;
            }
        }
    
        // Déplacements diagonaux (haut-gauche, haut-droite, bas-gauche, bas-droite)
        for (let r = row - 1, c = col - 1; r >= 0 && c >= 0; r--, c--) { // Haut-Gauche
            if (board[r][c] === "") {
                moves.push({ row: r, col: c });
            } else {
                if (pieces_joueurs[opponent].includes(board[r][c])) {
                    moves.push({ row: r, col: c });
                }
                break;
            }
        }
        for (let r = row - 1, c = col + 1; r >= 0 && c < 8; r--, c++) { // Haut-Droite
            if (board[r][c] === "") {
                moves.push({ row: r, col: c });
            } else {
                if (pieces_joueurs[opponent].includes(board[r][c])) {
                    moves.push({ row: r, col: c });
                }
                break;
            }
        }
        for (let r = row + 1, c = col - 1; r < 8 && c >= 0; r++, c--) { // Bas-Gauche
            if (board[r][c] === "") {
                moves.push({ row: r, col: c });
            } else {
                if (pieces_joueurs[opponent].includes(board[r][c])) {
                    moves.push({ row: r, col: c });
                }
                break;
            }
        }
        for (let r = row + 1, c = col + 1; r < 8 && c < 8; r++, c++) { // Bas-Droite
            if (board[r][c] === "") {
                moves.push({ row: r, col: c });
            } else {
                if (pieces_joueurs[opponent].includes(board[r][c])) {
                    moves.push({ row: r, col: c });
                }
                break;
            }
        }
    }

    return moves;

    }





function drawHighlightedMoves(moves) {
    ctx.fillStyle = "rgba(0, 255, 0, 0.5)";  // Vert transparent

    for (let move of moves) {
        ctx.beginPath();
        ctx.arc(move.col * size + size / 2, move.row * size + size / 2, size / 4, 0, 2 * Math.PI);
        ctx.fill();
    }
}
function movePiece(newRow, newCol) {
    if (!selectedPiece) return;

    // Vérifier si le mouvement est valide
    const validMoves = highlightMoves(currentPlayer,selectedPiece, selectedPosition.row, selectedPosition.col);


    // Vérifier que validMoves est un tableau et qu'il contient des objets avec { row, col }
    const isValidMove = Array.isArray(validMoves) && validMoves.some(m => m.row === newRow && m.col === newCol);

    if (isValidMove) {
        // Déplacer la pièce
        board[newRow][newCol] = selectedPiece;
        board[selectedPosition.row][selectedPosition.col] = "";

        // Réinitialiser la pièce sélectionnée
        selectedPiece = null;
        selectedPosition = null;
        currentPlayer=(currentPlayer+1)%2;
        // Redessiner le plateau
        drawBoard();
        drawPieces();
    } else {
        // Si le mouvement est invalide, tu pourrais afficher un message
        console.log("Mouvement invalide !");
        selectedPiece=null;
    }
}