dhm customizer

dhmc.user.js

// ==UserScript==
// @name         DHM Customizer
// @namespace    https://diamondhunt.app/
// @version      0.0.1
// @description  Customizable UI for Diamond Hunt Mobile
// @author       somebody
// @match        https://diamondhunt.app/
// @grant        GM_getValue
// @grant        GM_setValue
// ==/UserScript==

/* eslint loopfunc: 0 */
/* global navigate: writable */
let oldNavigate = navigate;
let loadLoopHandle = setInterval(function() {
    'use strict';

    if (document.getElementById('login-screen').style.display !== 'none') {
        return;
    }

    clearInterval(loadLoopHandle);

    let config = GM_getValue('config');
    if (config) {
        config = JSON.parse(config);
    } else {
        config = {
            tileSize: 40
        };
    }

    let redBox = document.createElement('div');
    redBox.style.display = 'none';
    redBox.style.border = '1px solid red';
    redBox.style.position = 'absolute';
    redBox.style.borderRadius = '6px';
    redBox.style.pointerEvents = 'none';
    document.body.appendChild(redBox);
    let showRedBox = true; // false;
    let redBoxTargets = [];
    let redBoxTarget = null;

    function refreshRedBox() {
        if (!showRedBox || !redBoxTarget) {
            redBox.style.display = 'none';
            return;
        }
        let { elements, columns, rows } = redBoxTarget;
        let rect = elements[0].getBoundingClientRect();
        // elements
        for (let element of elements.slice(1)) {
            let newRect = element.getBoundingClientRect();
            if (newRect.left < rect.left) {
                rect.left = newRect.left;
                rect.width += rect.left - newRect.left;
            }
            if (newRect.left + newRect.width > rect.left + rect.width) {
                rect.width = newRect.left + newRect.width - rect.left;
            }
            if (newRect.top < rect.top) {
                rect.top = newRect.top;
                rect.height += rect.top - newRect.top;
            }
            if (newRect.top + newRect.height > rect.top + rect.height) {
                rect.height = newRect.top + newRect.height - rect.top;
            }
        }
        let xCenter = rect.left + rect.width / 2,
            yCenter = rect.top + rect.height / 2,
            width = columns * config.tileSize,
            height = rows * config.tileSize;
        redBox.style.width = width;
        redBox.style.height = height;
        redBox.style.left = xCenter - width / 2;
        redBox.style.top = yCenter - height / 2;
        redBox.style.display = '';
    }
    window.addEventListener('resize', refreshRedBox);

    let mainDiv = document.getElementById('body-tag-child'),
        mainWidth = mainDiv.getBoundingClientRect().width,
        tilesX = Math.ceil((screen.width / 2 - mainWidth) / config.tileSize),
        tilesY = Math.ceil(screen.height / config.tileSize),
        flexDiv = document.createElement('div'),
        leftGrid = document.createElement('div'),
        rightGrid = document.createElement('div');

    flexDiv.style.display = 'flex';
    flexDiv.style.flexFlow = 'row nowrap';

    leftGrid.style.flex = '1 0 auto';
    leftGrid.style.display = 'grid';
    leftGrid.style.gridAutoColumns = leftGrid.style.gridAutoRows = config.tileSize; // + 'px';

    rightGrid.style.flex = '1 0 auto';
    rightGrid.style.display = 'grid';
    rightGrid.style.gridAutoColumns = rightGrid.style.gridAutoRows = config.tileSize;

    mainDiv.parentNode.insertBefore(flexDiv, mainDiv);
    flexDiv.appendChild(leftGrid);
    flexDiv.appendChild(mainDiv);
    flexDiv.appendChild(rightGrid);

    let servicesUniquesDiv = document.getElementById('main-button-mayor-services-luxury-tr');
    let draggables = [
        {elements: [servicesUniquesDiv.children[0].children[0]], columns: 1, rows: 1},
        {elements: [servicesUniquesDiv.children[0], servicesUniquesDiv.children[1]], columns: 6, rows: 1}
    ];
    for (let draggable of draggables) {
        for (let element of draggable.elements) {
            (function () {
                element.addEventListener('mouseenter', function (event) {
                    if (!showRedBox) {
                        return;
                    }
                    if (!redBoxTargets.includes(draggable)) {
                        redBoxTarget = draggable;
                        redBoxTargets.push(redBoxTarget);
                        refreshRedBox();
                    }
                });

                element.addEventListener('mouseleave', function (event) {
                    if (!showRedBox) {
                        return;
                    }
                    if (redBoxTargets.includes(draggable)) {
                        while (redBoxTarget !== draggable) {
                            redBoxTarget = redBoxTargets.pop() || null;
                        }
                        refreshRedBox();
                    }
                });

                element.addEventListener('dragstart', function (event) {
                    if (!showRedBox) {
                        return;
                    }
                    // your normal draggable stuff - create a ghost that follows the mouse
                });
            })();
        }
    }
}, 250);