chess.com highlights snippet

chess_highlights.js

function coord_boundaries(coord) {
    coord = coord.toString()
    return coord[0] >= 1 && coord[0] <= 8 && coord[1] >= 1 && coord[1] <= 8 

}

function highlight_square(coord, color) {

    board = document.getElementsByClassName('layout-board')[0]

    highlight = document.createElement('div')
    highlight.setAttribute('class', 'highlight square-' + coord + ' attack')
    if (color == 'w') {
        highlight.setAttribute('style', 'background-color: rgb(255, 0, 0); opacity: 0.2;') 
    }
    else {
       highlight.setAttribute('style', 'background-color: rgb(255, 255, 0); opacity: 0.2;') 
    }

    highlight.setAttribute('data-test-element', 'highlight') 
       
    if (
        coord_boundaries(coord) 
    ) {
        board.appendChild(highlight)
    }
}


function pawn(coord, color) {
    
    if (color == 'b') {
        row = parseInt(coord[1]) - 1
    } else 
    {
        row = parseInt(coord[1]) + 1
    };
    
    // right
    highlight_square(
        (parseInt(coord[0]) + 1) * 10 + row,
        color
    );

    // left
    highlight_square(
        (parseInt(coord[0]) - 1) * 10 + row,
        color  
    );
    
}

function knight(coord, color) {
    
    // +1 row -2 column
    highlight_square(
        (parseInt(coord[0]) - 2) * 10 +
        parseInt(coord[1]) + 1,
        color
    )

    // +1 row +2 column
    highlight_square(
        (parseInt(coord[0]) + 2) * 10 +
        parseInt(coord[1]) + 1,
        color
    )

    // +2 row +1 column
    highlight_square(
        (parseInt(coord[0]) + 1) * 10 +
        parseInt(coord[1]) + 2,
        color
    )

    // +2 row -1 column
    highlight_square(
        (parseInt(coord[0]) - 1) * 10 +
        parseInt(coord[1]) + 2,
        color
    )

    // -2 row -1 column
    highlight_square(
        (parseInt(coord[0]) - 1) * 10 +
        parseInt(coord[1]) - 2,
        color
    )

    // -2 row +1 column
    highlight_square(
        (parseInt(coord[0]) + 1) * 10 +
        parseInt(coord[1]) - 2,
        color
    )
}

function king(coord, color){
    
    for (row of [-1, 0, 1]) {

        for (col of [-1, 0, 1]) {

            if (!(row == 0 && col == 0)) {

                highlight_square(
                    (parseInt(coord[0]) + row) * 10 +
                    parseInt(coord[1]) + col,
                    color
                )
            }
        }
    }
}

function alldirections(coord, color, positions, 
                        rowRange, colRange, condition) {
    
    for (row of rowRange) {
        for (col of colRange) {
            if (condition(row, col) == true) { 
                c = coord
                while (coord_boundaries(c)) {
                    c = ((parseInt(c[0]) + row) * 10 +
                          parseInt(c[1]) + col).toString()

                    if (positions.includes(c)) {
                        highlight_square(
                            c,
                            color
                        )
                        break
                    } else {
                         highlight_square(
                            c,
                            color
                        )
    }}}}}}    

function true_func(row, col){
    return true
}

function bishop(coord, color, positions) {
    
    alldirections(coord, color, positions, [-1,1], [-1,1], true_func)

}

function queen(coord, color, positions) {
    
    alldirections(coord, color, positions, [-1,0,1], [-1,0,1], true_func)

}

function rook_func(row, col){
    return (Math.abs(row) + Math.abs(col)) == 1
}

function rook(coord, color, positions) {
    
    alldirections(coord, color, positions, [-1,0,1], [-1,0,1], rook_func)

}

function attack_highlight(piece, pieces){

    piecePosition = piece.classList[2].substr(-2, 2)
    pieceName = piece.classList[1]

    if (pieceName.endsWith('p') == true) {
        pawn(piecePosition, pieceName[0])
    }
    if (piece.classList[1].endsWith('n') == true) {
        knight(piecePosition, pieceName[0]);
    }
    if (piece.classList[1].endsWith('k') == true) {
        king(piecePosition, pieceName[0]);
    }
    if (piece.classList[1].endsWith('b') == true) {
        bishop(piecePosition, pieceName[0], positions);
    }
    if (piece.classList[1].endsWith('q') == true) {
        queen(piecePosition, pieceName[0], positions);
    }
    if (piece.classList[1].endsWith('r') == true) {
        rook(piecePosition, pieceName[0], positions);
    }
           
}


function removeElementsByClass(className){
    var elements = document.getElementsByClassName(className);
    while(elements.length > 0){
        elements[0].parentNode.removeChild(elements[0]);
    }
}

function getPositions(pieces){
    var positions = Array()
    for (let piece of pieces) {
        positions.push(piece.classList[2].substr(-2, 2))
    }
    return positions
}

function main() {
    // Flush attack highlights
    removeElementsByClass('attack')
    
    pieces = document.getElementsByClassName('piece');
    positions = getPositions(pieces)
    for (let piece of pieces) {
        attack_highlight(piece, positions);
    }}


pieces = document.getElementsByClassName('piece');  

for (let piece of pieces) {
        piece.addEventListener("touchend", main);
    }