coords_around_nav.user.js

// ==UserScript==
// @name         Pardus Coords Around Nav
// @version      0.2
// @author       Kui
// @match        http*://*.pardus.at/main.php*
// @grant        none
// @updateURL    https://gist.github.com/likuilin/e095903f3cbcc20a2eb1d5e98170645c/raw/coords_around_nav.user.js
// ==/UserScript==

(function() {
    'use strict';
    //size of lines to add, make this zero for no lines
    let lineWidth = 3;

    //make sure we're on nav screen
    if (!document.getElementById("navarea") || !document.getElementById("tdSpaceChart")) return;

    //number of tiles on nav screen
    let rows = document.querySelectorAll("#navarea tr").length;
    let cols = document.querySelectorAll("#navarea td").length / rows;
    if (rows <= 0 || cols <= 0) return;

    //size of images
    let tileSize = document.querySelector("#navarea img").width + lineWidth;

    //general add number element, called for each row and each column
    let addNumber = function (outer, rowCol) {
        let elem = document.createElement("div");
        elem.style.width = !rowCol ? (tileSize - 2) + "px" : "14px";
        elem.style.height = rowCol ? (tileSize - 2) + "px" : "14px";
        elem.style.overflow = "hidden";
        elem.style.display = "inline-block";
        if (!rowCol) {
            elem.style.borderLeft = elem.style.borderRight = "1px solid gray";
            elem.style.textAlign = "center";
        } else {
            elem.style.borderTop = elem.style.borderBottom = "1px solid gray";
            elem.style.lineHeight = tileSize + "px";
            elem.style.textAlign = "right";
        }
        outer.appendChild(elem);
    }

    //build column numbers
    let row = document.createElement("div");
    row.style.height = "14px";
    row.innerHTML = "";
    for (let i=0; i<cols; i++) addNumber(row, 0);
    let rowTd = document.querySelectorAll("#tdSpaceChart>table tr")[0].querySelectorAll("td")[1];
    rowTd.innerHTML = "";
    rowTd.style.background = "";
    rowTd.appendChild(row);

    //build row numbers
    let col = document.createElement("div");
    col.style.width = "14px";
    for (let i=0; i<rows; i++) addNumber(col, 1);
    let colTd = document.querySelectorAll("#tdSpaceChart>table tr")[1].querySelectorAll("td")[0];
    colTd.innerHTML = "";
    colTd.style.background = "";
    colTd.appendChild(col);

    //change the top corners to be slightly prettier
    //(because we increase the height of the top bar from 9px to 14px)
    document.querySelectorAll("#tdSpaceChart>table tr")[0].querySelectorAll("td").forEach(e=>{e.style.verticalAlign="bottom"});

    //add lines
    if (lineWidth != 0) {
        document.querySelectorAll("#navarea img").forEach(e=>{e.style.border = lineWidth / 2 + "px solid black"});
        let addSize = function (elem) {
            elem.style.width = parseInt(elem.style.width) + lineWidth * cols + "px";
            elem.style.height = parseInt(elem.style.height) + lineWidth * rows + "px";
        }
        addSize(document.getElementById("navarea"));
        addSize(document.getElementById("nav").parentElement);
    }

    //getting the actual numbers, because they change after navAjaxing
    let draw = function () {
        //coords from status box
        let coords = document.getElementById("coords").innerText.slice(1, -1).split(",").map(e=>+e);
        for (let i=0; i<cols; i++) row.children[i].innerText = i - (cols-1)/2 + coords[0];
        for (let i=0; i<rows; i++) col.children[i].innerText = i - (rows-1)/2 + coords[1];
    }

    draw();
    window.addUserFunction(draw);
})();