☰

Gartic.io Advanced Calculator

Adds an advanced calculator to Gartic.io

// ==UserScript==
// @name         Gartic.io Advanced Calculator
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Adds an advanced calculator to Gartic.io
// @author       《₁₈₇》
// @match        https://gartic.io/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    let calcDiv = document.createElement('div');
    calcDiv.style.position = 'fixed';
    calcDiv.style.bottom = '10px';
    calcDiv.style.right = '10px';
    calcDiv.style.backgroundColor = '#f9f9f9';
    calcDiv.style.padding = '20px';
    calcDiv.style.border = '2px solid #ccc';
    calcDiv.style.borderRadius = '8px';
    calcDiv.style.zIndex = '9999';
    calcDiv.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.2)';
    calcDiv.style.fontFamily = 'Arial, sans-serif';
    calcDiv.style.width = '300px';

    let displayField = document.createElement('div');
    displayField.style.backgroundColor = 'red';
    displayField.style.color = 'white';
    displayField.style.padding = '10px';
    displayField.style.fontSize = '24px';
    displayField.style.borderRadius = '4px';
    displayField.style.marginBottom = '10px';
    displayField.style.textAlign = 'right';

    let buttonsContainer = document.createElement('div');
    buttonsContainer.style.display = 'grid';
    buttonsContainer.style.gridTemplateColumns = 'repeat(4, 1fr)';
    buttonsContainer.style.gap = '10px';

    const buttons = [
        '7', '8', '9', '/',
        '4', '5', '6', '*',
        '1', '2', '3', '-',
        '0', '.', '=', '+',
        'Delete'
    ];

    buttons.forEach(button => {
        let btn = document.createElement('button');
        btn.textContent = button;
        btn.style.padding = '15px';
        btn.style.backgroundColor = 'blue';
        btn.style.color = 'white';
        btn.style.border = 'none';
        btn.style.borderRadius = '4px';
        btn.style.cursor = 'pointer';
        btn.style.fontSize = '18px';

        btn.addEventListener('click', function() {
            if (button === '=') {
                try {
                    let result = eval(displayField.textContent);
                    displayField.textContent = result;
                } catch (e) {
                    displayField.textContent = 'Error';
                }
            } else if (button === 'Delete') {
                displayField.textContent = '';
            } else {
                displayField.textContent += button;
            }
        });

        buttonsContainer.appendChild(btn);
    });

    let hideButton = document.createElement('button');
    hideButton.textContent = 'Hide';
    hideButton.style.padding = '10px';
    hideButton.style.backgroundColor = 'orange';
    hideButton.style.color = 'white';
    hideButton.style.border = 'none';
    hideButton.style.borderRadius = '4px';
    hideButton.style.cursor = 'pointer';
    hideButton.style.fontSize = '18px';
    hideButton.style.marginTop = '10px';

    hideButton.addEventListener('click', function() {
        calcDiv.style.display = 'none';
        bringBackButton.style.display = 'block';
    });

    let bringBackButton = document.createElement('button');
    bringBackButton.textContent = 'Bring it back';
    bringBackButton.style.padding = '10px';
    bringBackButton.style.backgroundColor = 'blue';
    bringBackButton.style.color = 'green';
    bringBackButton.style.border = 'none';
    bringBackButton.style.borderRadius = '4px';
    bringBackButton.style.cursor = 'pointer';
    bringBackButton.style.fontSize = '18px';
    bringBackButton.style.display = 'none'; // Initially hidden
    bringBackButton.style.position = 'absolute';
    bringBackButton.style.left = '50%';
    bringBackButton.style.transform = 'translateX(-50%)';
    bringBackButton.style.top = '50%';
    bringBackButton.style.zIndex = '9998';

    bringBackButton.addEventListener('click', function() {
        calcDiv.style.display = 'block';
        bringBackButton.style.display = 'none';
    });

    calcDiv.appendChild(displayField);
    calcDiv.appendChild(buttonsContainer);
    calcDiv.appendChild(hideButton);
    document.body.appendChild(calcDiv);
    document.body.appendChild(bringBackButton);
})();