CCCC customization script

cccc.js

// CCCC customization script
// Add board coordinates, material diff, rule 50 counter
// Insert this script to your brawser Javascript console

(function() {
    'use strict';
    var intervalTime = 500;
    var allPieces = 'pnbrqk';
    var pieceNamesW = {'p': '♙', 'n': '♘', 'b': '♗', 'r': '♖', 'q': '♕', 'k': '♔'};
    var pieceNamesB = {'p': '♟', 'n': '♞', 'b': '♝', 'r': '♜', 'q': '♛', 'k': '♚'};

    [].forEach.call(document.querySelectorAll('.evals'),function(e){
        e.parentNode.removeChild(e);
    });

    setInterval(updateDiff, intervalTime);

    var evals = document.querySelectorAll('#enginedata-eval');
    var ev1 = document.createElement('div');
    evals[0].parentNode.insertBefore(ev1, evals[0]);
    ev1.className = "evals";

    var ev2 = document.createElement('div');
    evals[1].parentNode.insertBefore(ev2, evals[1]);
    ev2.className = "evals";

    var i2 = document.querySelector('.secondary-backcolor.movetable-tablewrapper')
    var cnt = document.createElement('div');
    cnt.style = "color: white;height: 20px;padding-top: 7px;padding-left: 2px;";
    //cnt.innerText = "draw after: 49";
    i2.appendChild(cnt);

    var order = document.getElementById('black-player').getAttribute('style') == 'order: 1;';

    function updateDiff(){
        var pieces = ([].filter.call(document.querySelectorAll('.board-board img'), isPiece)).map(pieceFromUrl);
        var moves_table = document.querySelector('table.primary-font');
        var moves = [...moves_table.querySelectorAll('td')].map(moveFromTd).reverse();
        var count50 = 50 - Math.floor(moves.findIndex(isResetMove) / 2);

        var whitePieces = pieces.filter(getFilterByColor('w')).map(removeColor);
        var blackPieces = pieces.filter(getFilterByColor('b')).map(removeColor);
        var whitePiecesCount = getPieceCount(whitePieces);
        var blackPiecesCount = getPieceCount(blackPieces);
        var diff = getPieceDiff(whitePiecesCount, blackPiecesCount);
        var diffFormatted = formatDiff(diff);
        //diffFormatted = {'w': '♙♙♗♗♕', 'b': '♙♙♗♗♕'}
        ev1.innerText = diffFormatted.b;
        ev2.innerText = diffFormatted.w;
        cnt.innerText = "to draw: " + count50.toString();
    }

    function isPiece(x){ return x.src.indexOf('preview')< 0; }
    function isResetMove(x){ return !!x.match(/^[abcdefgh]|x/); }

    function pieceFromUrl(x){ return x.src.substr(-6,2); }
    function moveFromTd(x){ return x.innerHTML.trim(); }

    function removeColor(x){ return x.substr(1,1); }

    function getFilterByColor(c) {
        return function(p) { return p.substr(0,1) == c; }
    }

    function getPieceCount(pieces) {
        var pCount = {};
        for(var p in pieces){
            var piece = pieces[p];
            if (pCount[piece]){
                pCount[piece]++;
            }else{
                pCount[piece] = 1;
            }
        }
        return pCount;
    }

    function getPieceDiff(white, black) {
        var diff = {};
        for(var p in allPieces){
            var piece = allPieces[p];
            var whitePieceCount = white[piece] || 0;
            var blackPieceCount = black[piece] || 0;
            if (whitePieceCount != blackPieceCount) {
                diff[piece] = (whitePieceCount - blackPieceCount);
            }
        }
        return diff;
    }

    function formatDiff(diff) {
        var msg = {'w': [], 'b': []};
        for(var p in diff) {
            if (diff[p] == 0) continue;
            var color = (diff[p] > 0 ? 'w' : 'b');
            var names = (diff[p] > 0 ? pieceNamesW : pieceNamesW);

            var n = Math.abs(diff[p]); 
            for (var i = 0; i < n; i++) msg[color].push(names[p]);
        }
        msg.w = (msg.w.join('') || '');
        msg.b = (msg.b.join('') || '');
        return msg;
    }

    function show_coordinates(initial) {
      [].forEach.call(document.querySelectorAll('.coordinates'),function(e){
        e.parentNode.removeChild(e);
      });

      var places1 = document.querySelectorAll('div.board-board span.board-primary-square');
      var places2 = document.querySelectorAll('div.board-board span.board-secondary-square');

      var order = document.getElementById('black-player').getAttribute('style') == 'order: 1;';
      var style = 'position: relative;width: 20px; height: 20px; background: #fff; font-size: 80%; font-family: "Lucida Console", Monaco, monospace; background-color:transparent;color:#4d6b30;';
      var acode = "a".charCodeAt(0);

      if (initial) {
        var swap = document.querySelector('i.icon-repeat.ihover');
        swap.addEventListener('click', function(e) { show_coordinates(false); }, true);
      }

      for (var i = 0; i < 8; i++) { 
        for (var j = 0; j < 8; j++) {
          var idx = i * 4 + Math.floor(j / 2);
          var e = null;
          if (i % 2 == 0)
            if (j % 2 == 0) e = places2[idx]; else e = places1[idx];
          else
            if (j % 2 == 0) e = places1[idx]; else e = places2[idx];
          var d = document.createElement('div');
          d.style = style;
          d.style.top = "1px";
          d.style.left = "1px";
          if (order)
            d.innerText = String.fromCharCode(acode + j) + (8 - i).toString();
          else
            d.innerText = String.fromCharCode(acode + 7 - j) + (i + 1).toString();
          d.className = "coordinates";
          e.appendChild(d);
        }
      }
    }

    show_coordinates(true);
})();