Polytoria Hex Input

Adds a Hex input to the advanced color picker.
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name Polytoria Hex Input
// @version 1.5
// @description Adds a Hex input to the advanced color picker.
// @author Eave
// @match *://polytoria.com/my/avatar*
// @run-at document-start
// @grant none
// @license MIT
// @namespace https://greasyfork.org/users/1567372
// ==/UserScript==

(function() {
    'use strict';

    let activePicker = null;

    const observeIro = () => {
        if (window.iro && !window.iro._hooked) {
            const OriginalPicker = window.iro.ColorPicker;
            window.iro.ColorPicker = function(el, opts) {
                const instance = new OriginalPicker(el, opts);
                activePicker = instance;

                instance.on('color:change', (color) => {
                    const input = document.getElementById('hex-input');
                    if (input && document.activeElement !== input) {
                        input.value = color.hexString.toUpperCase();
                    }
                });
                return instance;
            };
            window.iro._hooked = true;
        }
    };

    const injectUI = () => {
        const container = document.querySelector('.wheel-container');
        if (!container || document.getElementById('hex-input')) return;

        container.style.display = 'flex';
        container.style.flexDirection = 'column';
        container.style.alignItems = 'center';

        const hexInput = document.createElement('input');
        hexInput.id = 'hex-input';
        hexInput.type = 'text';
        hexInput.maxLength = 7;
        hexInput.placeholder = '#FFFFFF';

        Object.assign(hexInput.style, {
            width: '200px',
            marginTop: '15px',
            padding: '10px',
            backgroundColor: '#1b1b1b',
            border: '1px solid #323232',
            color: '#ffffff',
            textAlign: 'center',
            borderRadius: '8px',
            fontSize: '14px',
            fontWeight: '600',
            outline: 'none',
            transition: 'border-color 0.2s ease',
            boxSizing: 'border-box',
            display: 'block'
        });

        hexInput.onfocus = () => hexInput.style.borderColor = '#3b82f6';
        hexInput.onblur = () => hexInput.style.borderColor = '#323232';

        hexInput.addEventListener('input', (e) => {
            const val = e.target.value;

            const hexRegex = /^#?[0-9A-Fa-f]{6}$/;

            if (hexRegex.test(val) && activePicker) {
                const formattedHex = val.startsWith('#') ? val : '#' + val;
                try {activePicker.color.set(formattedHex);} catch (err) {}
            }
        });

        container.appendChild(hexInput);
    };

    setInterval(() => {
        observeIro();
        injectUI();
    }, 500);
})();