☰

Map Controls Hide

Toggle the display of the Torn map controls

// ==UserScript==
// @name         Map Controls Hide
// @namespace    https://lazerpent.com
// @version      1.0
// @description  Toggle the display of the Torn map controls
// @author       Lazerpent
// @match        https://www.torn.com/city.php*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const stateKey = 'hide-controls';

    const style = document.createElement('style');
    style.textContent = `
        .hidden-container .leaflet-control-container {
            display: none;
        }
    `;
    document.head.appendChild(style);

    function injectSwitch() {
        const mapContainer = document.getElementById('map-cont');
        if (mapContainer && !document.getElementById('controls-switcher')) {
            const toggleHTML = document.createElement('div');
            toggleHTML.className = 'territory-info-toggle white-grad border-round m-top10 p10 t-gray-6';
            toggleHTML.innerHTML = `
                <div class="info">
                    <span class="inactive-mode hide">
                        Enable to hide map controls.
                    </span>
                    <span class="active-mode">
                        Map controls are being hidden.
                    </span>
                </div>
                <div class="btn-toggle-wrap torn-switcher">
                    <input type="checkbox" id="controls-switcher" switch="" class="active">
                    <label for="controls-switcher" data-on-label="on" data-off-label="off"></label>
                </div>`;
            mapContainer.appendChild(toggleHTML);

            const switcher = toggleHTML.querySelector('#controls-switcher');

            const savedState = localStorage.getItem(stateKey);
            const isHidden = savedState === 'true';
            switcher.checked = isHidden;
            applyState(isHidden, mapContainer, toggleHTML);

            switcher.addEventListener('change', function() {
                const newState = this.checked;
                localStorage.setItem(stateKey, newState);
                applyState(newState, mapContainer, toggleHTML);
            });
        }
    }

    function applyState(isHidden, mapContainer, toggleHTML) {
        if (isHidden) {
            mapContainer.classList.add('hidden-container');
            toggleHTML.querySelector('.inactive-mode').classList.add('hide');
            toggleHTML.querySelector('.active-mode').classList.remove('hide');
        } else {
            mapContainer.classList.remove('hidden-container');
            toggleHTML.querySelector('.inactive-mode').classList.remove('hide');
            toggleHTML.querySelector('.active-mode').classList.add('hide');
        }
    }

    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.type === 'childList' || mutation.type === 'subtree') {
                injectSwitch();
            }
        });
    });

    observer.observe(document.body, { childList: true, subtree: true });

    injectSwitch();
})();