Script for chess.com (can be pasted to development console while game) that highlights figures under attack

chua.js

function chuaClearAllMarks() {
    for (let x = 1; x < 9; x++) {
        for (let y = 1; y < 9; y++) {
            var elem = document.getElementsByClassName('piece square-0' + x + '0' + y);
            if (elem.length > 0) {
                if (elem[0].style.hasOwnProperty('backgroundColor') && elem[0].style.backgroundColor) {
                    elem[0].style.backgroundColor = null;
                    elem[0].style.animation = null;
                    console.log(elem[0].classList[1]);
                }
            }
        }
    }
}

function chuaGetCoords(element) {
    let coordsStr = element.classList[1].split('-')[1];
    let x = parseInt(coordsStr.slice(0,2));
    let y = parseInt(coordsStr.slice(2));
    return {'x': x, 'y': y};
}

function chuaFindElementAttackedFigs(element, myColor, enemyColor, attackedFigs) {
    let enemyBackgroundImgRegex = new RegExp('url\\(\\".*\\/' + enemyColor + '.\\.png"\\)');
    if (element.style.backgroundImage.includes(myColor + 'p.png')) {//pawn
        let coords = chuaGetCoords(element);
        let dy = myColor == 'w' ? 1 : -1;
        let el = document.getElementsByClassName('piece square-0' + (coords.x + 1) + '0' + (coords.y + dy));
        if (el.length > 0 && el[0].style.backgroundImage.match(enemyBackgroundImgRegex)) attackedFigs.push(el[0]);
        el = document.getElementsByClassName('piece square-0' + (coords.x - 1) + '0' + (coords.y + dy));
        if (el.length > 0 && el[0].style.backgroundImage.match(enemyBackgroundImgRegex)) attackedFigs.push(el[0]);
    } else if (element.style.backgroundImage.includes(myColor + 'r.png')) {//rook
        let coords = chuaGetCoords(element);
        for (let x = (coords.x + 1); x < 9; x++) {
            let el = document.getElementsByClassName('piece square-0' + x + '0' + coords.y);
            if (el.length == 0) continue;
            if (el[0].style.backgroundImage.match(enemyBackgroundImgRegex)) {
                attackedFigs.push(el[0]);
            }
            break;
        }
        for (let x = (coords.x - 1); x > 0; x--) {
            let el = document.getElementsByClassName('piece square-0' + x + '0' + coords.y);
            if (el.length == 0) continue;
            if (el[0].style.backgroundImage.match(enemyBackgroundImgRegex)) {
                attackedFigs.push(el[0]);
            }
            break;
        }
        for (let y = (coords.y + 1); y < 9; y++) {
            let el = document.getElementsByClassName('piece square-0' + coords.x + '0' + y);
            if (el.length == 0) continue;
            if (el[0].style.backgroundImage.match(enemyBackgroundImgRegex)) {
                attackedFigs.push(el[0]);
            }
            break;
        }
        for (let y = (coords.y - 1); y > 0; y--) {
            let el = document.getElementsByClassName('piece square-0' + coords.x + '0' + y);
            if (el.length == 0) continue;
            if (el[0].style.backgroundImage.match(enemyBackgroundImgRegex)) {
                attackedFigs.push(el[0]);
            }
            break;
        }
    } else if (element.style.backgroundImage.includes(myColor + 'b.png')) {//bishop
        let coords = chuaGetCoords(element);
        let x = coords.x;
        let y = coords.y;
        while (true) {
            x++;
            y++;
            if (x > 8 || y > 8) break;
            let el = document.getElementsByClassName('piece square-0' + x + '0' + y);
            if (el.length == 0) continue;
            if (el[0].style.backgroundImage.match(enemyBackgroundImgRegex)) {
                attackedFigs.push(el[0]);
            }
            break;
        }
        x = coords.x;
        y = coords.y;
        while (true) {
            x--;
            y--;
            if (x < 1 || y < 1) break;
            let el = document.getElementsByClassName('piece square-0' + x + '0' + y);
            if (el.length == 0) continue;
            if (el[0].style.backgroundImage.match(enemyBackgroundImgRegex)) {
                attackedFigs.push(el[0]);
            }
            break;
        }
        x = coords.x;
        y = coords.y;
        while (true) {
            x++;
            y--;
            if (x > 8 || y < 1) break;
            let el = document.getElementsByClassName('piece square-0' + x + '0' + y);
            if (el.length == 0) continue;
            if (el[0].style.backgroundImage.match(enemyBackgroundImgRegex)) {
                attackedFigs.push(el[0]);
            }
            break;
        }
        x = coords.x;
        y = coords.y;
        while (true) {
            x--;
            y++;
            if (x < 1 || y > 8) break;
            let el = document.getElementsByClassName('piece square-0' + x + '0' + y);
            if (el.length == 0) continue;
            if (el[0].style.backgroundImage.match(enemyBackgroundImgRegex)) {
                attackedFigs.push(el[0]);
            }
            break;
        }
    } else if (element.style.backgroundImage.includes(myColor + 'q.png')) {//queen
        let coords = chuaGetCoords(element);
        let x = coords.x;
        let y = coords.y;
        while (true) {
            x++;
            y++;
            if (x > 8 || y > 8) break;
            let el = document.getElementsByClassName('piece square-0' + x + '0' + y);
            if (el.length == 0) continue;
            if (el[0].style.backgroundImage.match(enemyBackgroundImgRegex)) {
                attackedFigs.push(el[0]);
            }
            break;
        }
        x = coords.x;
        y = coords.y;
        while (true) {
            x--;
            y--;
            if (x < 1 || y < 1) break;
            let el = document.getElementsByClassName('piece square-0' + x + '0' + y);
            if (el.length == 0) continue;
            if (el[0].style.backgroundImage.match(enemyBackgroundImgRegex)) {
                attackedFigs.push(el[0]);
            }
            break;
        }
        x = coords.x;
        y = coords.y;
        while (true) {
            x++;
            y--;
            if (x > 8 || y < 1) break;
            let el = document.getElementsByClassName('piece square-0' + x + '0' + y);
            if (el.length == 0) continue;
            if (el[0].style.backgroundImage.match(enemyBackgroundImgRegex)) {
                attackedFigs.push(el[0]);
            }
            break;
        }
        x = coords.x;
        y = coords.y;
        while (true) {
            x--;
            y++;
            if (x < 1 || y > 8) break;
            let el = document.getElementsByClassName('piece square-0' + x + '0' + y);
            if (el.length == 0) continue;
            if (el[0].style.backgroundImage.match(enemyBackgroundImgRegex)) {
                attackedFigs.push(el[0]);
            }
            break;
        }
        for (let x = (coords.x + 1); x < 9; x++) {
            let el = document.getElementsByClassName('piece square-0' + x + '0' + coords.y);
            if (el.length == 0) continue;
            if (el[0].style.backgroundImage.match(enemyBackgroundImgRegex)) {
                attackedFigs.push(el[0]);
            }
            break;
        }
        for (let x = (coords.x - 1); x > 0; x--) {
            let el = document.getElementsByClassName('piece square-0' + x + '0' + coords.y);
            if (el.length == 0) continue;
            if (el[0].style.backgroundImage.match(enemyBackgroundImgRegex)) {
                attackedFigs.push(el[0]);
            }
            break;
        }
        for (let y = (coords.y + 1); y < 9; y++) {
            let el = document.getElementsByClassName('piece square-0' + coords.x + '0' + y);
            if (el.length == 0) continue;
            if (el[0].style.backgroundImage.match(enemyBackgroundImgRegex)) {
                attackedFigs.push(el[0]);
            }
            break;
        }
        for (let y = (coords.y - 1); y > 0; y--) {
            let el = document.getElementsByClassName('piece square-0' + coords.x + '0' + y);
            if (el.length == 0) continue;
            if (el[0].style.backgroundImage.match(enemyBackgroundImgRegex)) {
                attackedFigs.push(el[0]);
            }
            break;
        }
    } else if (element.style.backgroundImage.includes(myColor + 'k.png')) {//king
        let coords = chuaGetCoords(element);
        let el = document.getElementsByClassName('piece square-0' + (coords.x+1) + '0' + (coords.y + 1));
        if (el.length > 0 && el[0].style.backgroundImage.match(enemyBackgroundImgRegex)) attackedFigs.push(el[0]);
        el = document.getElementsByClassName('piece square-0' + coords.x + '0' + (coords.y + 1));
        if (el.length > 0 && el[0].style.backgroundImage.match(enemyBackgroundImgRegex)) attackedFigs.push(el[0]);
        el = document.getElementsByClassName('piece square-0' + (coords.x-1) + '0' + (coords.y + 1));
        if (el.length > 0 && el[0].style.backgroundImage.match(enemyBackgroundImgRegex)) attackedFigs.push(el[0]);
        el = document.getElementsByClassName('piece square-0' + (coords.x+1) + '0' + coords.y);
        if (el.length > 0 && el[0].style.backgroundImage.match(enemyBackgroundImgRegex)) attackedFigs.push(el[0]);
        el = document.getElementsByClassName('piece square-0' + (coords.x-1) + '0' + coords.y);
        if (el.length > 0 && el[0].style.backgroundImage.match(enemyBackgroundImgRegex)) attackedFigs.push(el[0]);
        el = document.getElementsByClassName('piece square-0' + (coords.x+1) + '0' + (coords.y - 1));
        if (el.length > 0 && el[0].style.backgroundImage.match(enemyBackgroundImgRegex)) attackedFigs.push(el[0]);
        el = document.getElementsByClassName('piece square-0' + coords.x + '0' + (coords.y - 1));
        if (el.length > 0 && el[0].style.backgroundImage.match(enemyBackgroundImgRegex)) attackedFigs.push(el[0]);
        el = document.getElementsByClassName('piece square-0' + (coords.x-1) + '0' + (coords.y - 1));
        if (el.length > 0 && el[0].style.backgroundImage.match(enemyBackgroundImgRegex)) attackedFigs.push(el[0]);
    } else if (element.style.backgroundImage.includes(myColor + 'n.png')) {//knight 
        let coords = chuaGetCoords(element);
        let el = document.getElementsByClassName('piece square-0' + (coords.x + 1) + '0' + (coords.y + 2));
        if (el.length > 0 && el[0].style.backgroundImage.match(enemyBackgroundImgRegex)) attackedFigs.push(el[0]);
        el = document.getElementsByClassName('piece square-0' + (coords.x + 2) + '0' + (coords.y + 1));
        if (el.length > 0 && el[0].style.backgroundImage.match(enemyBackgroundImgRegex)) attackedFigs.push(el[0]);
        el = document.getElementsByClassName('piece square-0' + (coords.x + 2) + '0' + (coords.y - 1));
        if (el.length > 0 && el[0].style.backgroundImage.match(enemyBackgroundImgRegex)) attackedFigs.push(el[0]);
        el = document.getElementsByClassName('piece square-0' + (coords.x + 1) + '0' + (coords.y - 2));
        if (el.length > 0 && el[0].style.backgroundImage.match(enemyBackgroundImgRegex)) attackedFigs.push(el[0]);
        el = document.getElementsByClassName('piece square-0' + (coords.x -1 ) + '0' + (coords.y - 2));
        if (el.length > 0 && el[0].style.backgroundImage.match(enemyBackgroundImgRegex)) attackedFigs.push(el[0]);
        el = document.getElementsByClassName('piece square-0' + (coords.x - 2) + '0' + (coords.y - 1));
        if (el.length > 0 && el[0].style.backgroundImage.match(enemyBackgroundImgRegex)) attackedFigs.push(el[0]);
        el = document.getElementsByClassName('piece square-0' + (coords.x - 2) + '0' + (coords.y + 1));
        if (el.length > 0 && el[0].style.backgroundImage.match(enemyBackgroundImgRegex)) attackedFigs.push(el[0]);
        el = document.getElementsByClassName('piece square-0' + (coords.x - 1) + '0' + (coords.y + 2));
        if (el.length > 0 && el[0].style.backgroundImage.match(enemyBackgroundImgRegex)) attackedFigs.push(el[0]);
    }
}

function chuaRemoveDublicates(arr) {
    let newArr = [];
    arr.forEach(element => {
        if (!newArr.includes(element)) newArr.push(element);
    });
    return newArr;
}

function chuaShowUnderAttack(enemyColor) {
    let attackedFigs = [];
    let protectedFigs = [];
    let enemyBackgroundImgRegex = new RegExp('url\\(\\".*\\/' + enemyColor + '.\\.png"\\)');
    for (let element of document.getElementsByClassName('piece')) {
        chuaFindElementAttackedFigs(element, 'b' == enemyColor ? 'w' : 'b', enemyColor, attackedFigs);
        chuaFindElementAttackedFigs(element, enemyColor, enemyColor, protectedFigs);
    }
    attackedFigs = chuaRemoveDublicates(attackedFigs);
    protectedFigs = chuaRemoveDublicates(protectedFigs);
    let unprotectedFigs = [];
    attackedFigs.forEach(element => {
        if (!protectedFigs.includes(element)) {
            unprotectedFigs.push(element);
        }
    });
    attackedFigs.forEach(element => {
        if (element.style.backgroundImage.match(enemyBackgroundImgRegex)) {
            element.style.backgroundColor = "#ffaaaa";
        }
    });
    unprotectedFigs.forEach(element => {
        if (element.style.backgroundImage.match(enemyBackgroundImgRegex)) {
            element.style.animation = 'chuaUnprotected 3s infinite';
        }
    });
}

function chuaRun() {
    chuaClearAllMarks();
    chuaShowUnderAttack('b');
    chuaShowUnderAttack('w');
}

let chuaStyles = null;
let chuaTimer = null;

function addStyles() {
  if (!chuaStyles) {
    chuaStyles = document.createElement('style');
    chuaStyles.type = 'text/css';
    document.head.appendChild(chuaStyles);

    chuaStyles.sheet.insertRule(`
    @keyframes chuaUnprotected {
        0% {
          opacity: 1;
          background-color: #ff0000;
        }
        50% {
          opacity: 0.5;
          background-color: rgba(255,0,0,0.3);
        }
        100% {
          opacity: 1;
          background-color: #ff0000;
        }
      }`, chuaStyles.length);
  }
}

function chuaEnable(enable) {
    if (enable) {
        MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

        window.chuaObserver = new MutationObserver(function(mutations, observer) {
            if (chuaTimer) clearTimeout(chuaTimer);
            chuaTimer = setTimeout(chuaRun, 300);
        });

        window.chuaObserver.observe(document.getElementsByClassName('pieces')[0], {
        subtree: true,
        attributes: true,
        attributeFilter: ['class']
        });

        addStyles();
    } else if (window.chuaObserver) {
        window.chuaObserver.disconnect();
    }
}

chuaEnable(true);