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();
}
})();