☰

Menu Tweaks

Move menu items around.

// ==UserScript==
// @name         Menu Tweaks
// @namespace    com.anwinity.idlepixel
// @version      1.0.1
// @description  Move menu items around.
// @author       Wynaan
// @license      MIT
// @match        *://idle-pixel.com/login/play*
// @require      https://greasyfork.org/scripts/441206-idlepixel/code/IdlePixel+.js?anticache=20220905
// @grant none
// ==/UserScript==

(function() {
    'use strict';

    class MenuTweaksPlugin extends IdlePixelPlusPlugin {
        constructor() {
            super("menu_tweaks", {
                about: {
                    name: GM_info.script.name + " (ver: " + GM_info.script.version + ")",
                    version: GM_info.script.version,
                    author: GM_info.script.author,
                    description: GM_info.script.description
                }
            });
            this.topbarSections = [{
                rows: []
            }];
        }

        onConfigsChanged() {

        }

        onLogin() {
            $("head").append(`
            <style id="styles-menu-tweaks">
                #user-info-top-bar {
                    width: 100%;
                    color: silver;
                    > * tr {
                    }
                }
            </style>
            `);

            this.topbarSections = [];

            const topBar = document.getElementById("top-bar");
            const leftMenuTop = document.getElementById("menu-bar-buttons").querySelector("div");

            // Player infos, to the left
            const flag = document.getElementById("country-flag-top-bar");
            const username = topBar.querySelector("item-display");
            const searchHiScores = document.getElementById("search-username-hiscores");
            const player_id = document.getElementById("player_id");

            const playerLevel = topBar.querySelector('a[href="https://idle-pixel.com/hiscores/"]');
            const completionistLabel = document.getElementById("completionist-label");
            const playtime = document.querySelector('item-display[data-key="playtime"]');

            topBar.removeChild(flag);
            topBar.removeChild(username);
            topBar.removeChild(searchHiScores);
            if(player_id)
                topBar.removeChild(player_id);

            topBar.removeChild(playerLevel);
            if(completionistLabel)
                topBar.removeChild(completionistLabel);
            topBar.removeChild(playtime);

            this.topbarSections.push({ rows: [
                `${flag.outerHTML}${username.outerHTML}${searchHiScores.outerHTML}${player_id ? player_id.outerHTML : ""}`,
                `${playerLevel.outerHTML}${completionistLabel.outerHTML}`,
                playtime.outerHTML
            ]});

            // Currencies
            const coins = document.getElementById("item-display-coins").parentElement;
            const oil = document.querySelector('item-display[data-key="oil"]').parentElement;
            const stardust = document.querySelector('item-display[data-key="stardust"]').parentElement;

            leftMenuTop.removeChild(coins);
            leftMenuTop.removeChild(oil);
            leftMenuTop.removeChild(stardust);

            this.topbarSections.push({ rows: [
                coins.outerHTML,
                oil.outerHTML,
                stardust.outerHTML
            ]});

            // Resources
            const energy = document.getElementById('menu-bar-energy');
            const heat = document.getElementById('menu-bar-heat');
            const fightPoints = document.getElementById("menu-bar-fp");

            energy.parentElement.removeChild(energy);

            this.topbarSections.push({ rows: [
                fightPoints ? fightPoints.outerHTML : "",
                energy.outerHTML,
                heat ? heat.outerHTML : ""
            ]});

            if(IdlePixelPlus.plugins['ui-tweaks'] !== undefined) {
                heat.parentElement.removeChild(heat);
                fightPoints.parentElement.removeChild(fightPoints);
                // Rocket info
                const rocketImg = document.getElementById("rocket-type-img-reg");
                const rocketImgMega = document.getElementById("rocket-type-img-mega");
                const rocketTime = document.getElementById("current-rocket-travel-times");

                const distanceImgMoon = document.getElementById("rocket-current-travel-location-moon");
                const distanceImgSun = document.getElementById("rocket-current-travel-location-sun");
                const rocketDistance = document.getElementById("current-rocket-travel-distances");

                const rocketPot = document.getElementById("current-rocket-pot-info");

                rocketImg.parentElement.removeChild(rocketImg);
                rocketImgMega.parentElement.removeChild(rocketImgMega);
                rocketTime.parentElement.removeChild(rocketTime);

                distanceImgMoon.parentElement.removeChild(distanceImgMoon);
                distanceImgSun.parentElement.removeChild(distanceImgSun);
                rocketDistance.parentElement.removeChild(rocketDistance);

                rocketPot.parentElement.removeChild(rocketPot);

                this.topbarSections.push({ rows: [
                    `${rocketImg.outerHTML}${rocketImgMega.outerHTML}${rocketTime.outerHTML}`,
                    `${distanceImgMoon.outerHTML}${distanceImgSun.outerHTML}${rocketDistance.outerHTML}`,
                    rocketPot.outerHTML
                ]});

                // Moon & sun distance
                const moonDistance = document.getElementById("menu-bar-rocket_moon");
                const sunDistance = document.getElementById("menu-bar-rocket_sun");

                this.topbarSections.push({ rows: [
                    moonDistance.outerHTML,
                    sunDistance.outerHTML
                ]});

                moonDistance.parentElement.removeChild(moonDistance);
                sunDistance.parentElement.removeChild(sunDistance);
            }

            // Options + players online, to the right
            const options = document.querySelector("div.dropdown");
            const playersOnline = document.querySelector('div[onclick*="show_players"]');
            const activityLog = document.querySelector('a[title="Activity Log"]');
            const varViewer = document.querySelector('a[title="Open VarViewer"]');

            topBar.removeChild(options);
            topBar.removeChild(playersOnline);
            if(activityLog)
                topBar.removeChild(activityLog);
            if(varViewer)
                topBar.removeChild(varViewer);

            this.topbarSections.push({ rows: [
                options.outerHTML,
                playersOnline.outerHTML,
                `<div id="plugin-buttons"></div>`
            ]});

            // Hide original left menu
            leftMenuTop.style.display = "none";
            const topSeparator = leftMenuTop.nextElementSibling;
            if(topSeparator.nodeName === "HR")
                topSeparator.style.display = "none";

            // Remove text nodes
            topBar.textContent = "";

            const tableBody = Array.from({length: Math.max(...this.topbarSections.map(s => s.rows.length))}, (_, i) => i)
                .map(i => "<tr>" + this.topbarSections.map(s => `<td style='width: auto; max-width: ${100 / this.topbarSections.length}vw;'>` + (s.rows[i] || "") + "</td>").join("") + "</tr>").join("");

            topBar.insertAdjacentHTML("afterbegin", `
            <table id="user-info-top-bar" class="">
                <tbody>${tableBody}</tbody>
            </table>
            `);

            document.getElementById("plugin-buttons").appendChild(varViewer);
            document.getElementById("plugin-buttons").appendChild(activityLog);
         }
    }

    const plugin = new MenuTweaksPlugin();
    IdlePixelPlus.registerPlugin(plugin);

})();