Geopixels - Hide Paint Menu Button

hides paint menu to the bottom using slider button
줄 바꿈
// ==UserScript==
// @name         Geopixels - Hide Paint Menu Button
// @namespace    http://tampermonkey.net/
// @version      2025-11-28
// @description  hides paint menu to the bottom using slider button
// @author       ariapokoteng
// @match        *://geopixels.net/*
// @match        *://*.geopixels.net/*
// @license      MIT
// @icon         https://www.google.com/s2/favicons?sz=64&domain=geopixels.net
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const init = () => {
        const bottomControls = document.getElementById('bottomControls');
        const energyDisplay = document.getElementById('currentEnergyDisplay');

        if (!bottomControls || !energyDisplay) {
            console.log('Elements not found, retrying...');
            setTimeout(init, 500);
            return;
        }

        // --- 1. CONFIGURATION & STATE ---
        // 0 = Left, 1 = Center (Default), 2 = Right
        let currentPosIndex = 1;
        let isCollapsed = false;

        // --- 2. CONTAINER STYLING ---
        // Remove conflicting Tailwind classes
        bottomControls.classList.remove('-translate-x-1/2');
        bottomControls.classList.remove('left-1/2');

        // Keep the original width behavior but add positioning control
        bottomControls.style.position = 'fixed';
        bottomControls.style.bottom = '1rem';
        bottomControls.style.zIndex = '9999';
        bottomControls.style.transition = 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)';
        // Remove any width override to preserve original responsive behavior
        bottomControls.style.width = '';
        bottomControls.style.maxWidth = '';

        // Start centered (preserve original behavior)
        bottomControls.style.left = '50%';
        bottomControls.style.transform = 'translateX(-50%)';

        // --- 3. CREATE UI ELEMENTS ---

        // A. Collapse Button (Top Handle)
        const toggleBtn = document.createElement('button');
        toggleBtn.innerHTML = '▼';
        toggleBtn.style.cssText = `
            position: absolute;
            top: -24px;
            left: 50%;
            transform: translateX(-50%);
            width: 40px;
            height: 24px;
            background: white;
            border: 1px solid #e5e7eb;
            border-bottom: none;
            border-radius: 8px 8px 0 0;
            cursor: pointer;
            font-size: 12px;
            color: #6b7280;
            z-index: 20;
            display: flex;
            align-items: center;
            justify-content: center;
        `;
        bottomControls.appendChild(toggleBtn);

        // --- 4. LOGIC ENGINE ---

        const updateState = () => {
            // Reset positioning
            bottomControls.style.right = 'auto';
            bottomControls.style.left = 'auto';

            let xTransform = '';
            let yTransform = isCollapsed ? 'translateY(calc(100% - 10px))' : 'translateY(0)';

            // Calculate horizontal position based on actual width
            if (currentPosIndex === 0) {
                // LEFT - Use margin instead of absolute positioning
                bottomControls.style.left = '2.5%'; // 2.5% from left edge
                xTransform = 'translateX(0)';
            } else if (currentPosIndex === 1) {
                // CENTER - True center
                bottomControls.style.left = '50%';
                xTransform = 'translateX(-50%)';
            } else if (currentPosIndex === 2) {
                // RIGHT - Use margin from right
                bottomControls.style.left = '97.5%'; // 97.5% from left = 2.5% from right
                xTransform = 'translateX(-100%)';
            }

            // Combine transforms
            bottomControls.style.transform = `${xTransform} ${yTransform}`;
            toggleBtn.innerHTML = isCollapsed ? '▲' : '▼';
        };

        // --- 5. EVENT LISTENERS ---

        toggleBtn.addEventListener('click', () => {
            isCollapsed = !isCollapsed;
            updateState();
        });

        // Initialize
        updateState();
        console.log('Bottom controls enhanced: properly centered with left/right positioning.');
    };

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }
})();