Chess.com square names

square-names.js

// ==UserScript==
// @name         Square names
// @source       https://gist.github.com/dlech/2e0e9304458b9f7b816a59e3f187a04b
// @namespace    com.lechnology.chess.squares
// @version      1.0.0
// @description  Display the square names on each square.
// @author       David Lechner
// @match        https://www.chess.com/*
// @grant        none
// ==/UserScript==


(function() {
    'use strict';

    const files = ["A", "B", "C", "D", "E", "F", "G", "H"];
    const ranks = ["1", "2", "3", "4", "5", "6", "7", "8"];

    const board = document.getElementById("board-board");

    if (!board) {
        return;
    }

    for (const [i, r] of ranks.entries()) {
        for (const [j, f] of files.entries()) {
            const name = document.createElement("div");
            name.innerHTML = f + r;
            board.append(name);

            function handleChange() {
                const flipped = board.classList.contains("flipped");
                const top = (flipped ? i : 7 - i) * board.clientHeight / 8;
                const left = (flipped ? 7 - j : j) * board.clientWidth / 8 + board.clientWidth / 200;

                name.style = `position: absolute; top: ${top}px; left: ${left}px; color: #444;`
            }

            const boardResize = new ResizeObserver(() => {
                handleChange();
            });

            boardResize.observe(board);

            const boardMutation = new MutationObserver(() => {
                handleChange();
            });

            boardMutation.observe(board, {attributes: true, attributeFilter: ["class"]});
        }
    }
})();