Torn Chat Emoji+

// ==UserScript==
// @name         Torn Chat Emoji+
// @namespace    http://tampermonkey.net/
// @version      1.2
// @description  Adds a categorized emoji menu with dark mode, favorites and configurable button emoji.
// @author       HeyItzWerty [3626448]
// @match        https://www.torn.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // --- STORAGE KEYS ---
    const FAVORITES_KEY = 'torn_emoji_plus_favorites';
    const CUSTOM_KEY = 'torn_emoji_plus_custom';
    const DARK_MODE_KEY = 'torn_emoji_plus_dark_mode';
    const BUTTON_EMOJI_KEY = 'torn_emoji_plus_button_emoji';

    let favorites = JSON.parse(localStorage.getItem(FAVORITES_KEY)) || [];
    let customEmojis = JSON.parse(localStorage.getItem(CUSTOM_KEY)) || [];
    let isDarkMode = localStorage.getItem(DARK_MODE_KEY) === 'true';
    let fixedButtonEmoji = localStorage.getItem(BUTTON_EMOJI_KEY) || '😊';
    let isSelectingButtonEmoji = false;

const emojiCategories = {
    '⭐ Favorites': favorites,
    '✨ My Custom Emojis': customEmojis,

    '🙂 Smileys & Emotion': ['😀','😃','😄','😁','😆','😅','😂','🤣','🥲','🥹','😊','😇','🙂','🙃','😉','😍','🥰','😘','😋','😛','😜','🤪','🤨','🧐','🤓','😎','🥸','🤩','🥳','😏','😒','😞','😔','😟','😕','🙁','☹️','😣','😖','😫','😩','🥺','😢','😭','😤','😠','😡','🤬','🤯','😳','🥵','🥶','😱','😨','😰','😥','😓','🫣','🤗','🫡','🤔','🫢','🤭','🤫','🤥','😶','😶‍🌫️','😐','😑','😬','🙄','😯','😦','😧','😮','😲','🥱','😴','🤤','😪','😵','😵‍💫','🫥','🤐','🥴','🤢','🤮','🤧','😷','🤒','🤕','🤑','🤠','🤡','💩','👻','🎃','😺','😸','😹','😻','😼','😽','🙀','😿','😾'],

    '👋 People & Body': ['👋','🤚','🖐️','✋','🖖','👌','🤌','🤏','✌️','🤞','🫰','🤟','🤘','🤙','👈','👉','👆','🖕','👇','☝️','👍','👎','✊','👊','🤛','🤜','👏','🙌','👐','🤲','🤝','🙏','✍️','💅','🤳','💪','🦾','🦿','🦵','🦶','👂','🦻','👃','🧠','🫀','🫁','🦷','🦴','👀','👁️','👅','👄','🫦','👶','👧','🧒','👦','👩','🧑','👨','👵','🧓','👴','👮‍♀️','👮','👷‍♀️','👷','🕵️‍♀️','🕵️','👩‍⚕️','🧑‍⚕️','👨‍⚕️','👩‍🎓','🧑‍🎓','👨‍🎓','👩‍🏫','🧑‍🏫','👨‍🏫','👩‍⚖️','🧑‍⚖️','👨‍⚖️','👩‍🌾','🧑‍🌾','👨‍🌾','👩‍🍳','🧑‍🍳','👨‍🍳','👩‍🔧','🧑‍🔧','👨‍🔧','👩‍💻','🧑‍💻','👨‍💻','👩‍🎤','🧑‍🎤','👨‍🎤','👩‍🎨','🧑‍🎨','👨‍🎨','👩‍🚀','🧑‍🚀','👨‍🚀','👸','🤴','🦸‍♀️','🦸','🦹‍♀️','🦹','🎅','🤶','🧙‍♀️','🧙','🧝‍♀️','🧝','🧛‍♀️','🧛','🧟‍♀️','🧟','🧞‍♀️','🧞','🧜‍♀️','🧜','🧚‍♀️','🧚','👼','🤰','🤱','🙇‍♀️','🙇','💁‍♀️','💁','🙅‍♀️','🙅','🙆‍♀️','🙆','🙋‍♀️','🙋','🤦‍♀️','🤦','🤷‍♀️','🤷','🙎‍♀️','🙎','🙍‍♀️','🙍','💇‍♀️','💇','💆‍♀️','💆','💃','🕺','🏃‍♀️','🏃','🚶‍♀️','🚶','🫂','🗣️','👤','👥'],

    '🐻 Animals': ['🐵','🐒','🦍','🦧','🐶','🐕','🦮','🐕‍🦺','🐩','🐺','🦊','🦝','🐱','🐈','🐈‍⬛','🦁','🐯','🐅','🐆','🐴','🐎','🦄','🦓','🦌','🦬','🐮','🐂','🐃','🐄','🐷','🐖','🐗','🐽','🐏','🐑','🐐','🐪','🐫','🦙','🦒','🐘','🦣','🦏','🦛','🐭','🐁','🐀','🐹','🐰','🐇','🐿️','🦫','🦔','🦇','🐻','🐻‍❄️','🐨','🐼','🦥','🦦','🦨','🦘','🦡','🐾','🦃','🐔','🐓','🐣','🐤','🐥','🐦','🐧','🕊️','🦅','🦆','🦢','🦉','🦤','🪶','🐸','🐊','🐢','🦎','🐍','🐲','🐉','🐳','🐋','🐬','🦭','🐟','🐠','🐡','🦈','🐙','🐚','🐌','🦋','🐛','🐜','🐝','🪲','🐞','🦗','🪳','🕷️','🕸️','🦂','🦟','🪰','🪱'],

    '🌳 Nature': ['💐','🌸','💮','🏵️','🌹','🥀','🌺','🌻','🌼','🌷','🌱','🪴','🌲','🌳','🌴','🪵','🌵','🌾','🌿','☘️','🍀','🍁','🍂','🍃','🌍','🌎','🌏','🌕','🌖','🌗','🌘','🌑','🌒','🌓','🌔','🌙','⭐','🌟','💫','✨','☄️','☀️','🌤️','⛅','🌥️','🌦️','☁️','🌧️','⛈️','🌩️','⚡','🔥','💥','❄️','🌨️','☃️','⛄','🌬️','💨','🌪️','🌫️','🌊','💧','💦'],

    '🍔 Food & Drink': ['🍇','🍈','🍉','🍊','🍋','🍌','🍍','🥭','🍎','🍏','🍐','🍑','🍒','🍓','🫐','🥝','🍅','🫒','🥥','🥑','🍆','🥔','🥕','🌽','🌶️','🫑','🥒','🥬','🥦','🧄','🧅','🍄','🥜','🫘','🌰','🍞','🥐','🥖','🫓','🥨','🥯','🥞','🧇','🧀','🍖','🍗','🥩','🥓','🍔','🍟','🍕','🌭','🥪','🥙','🧆','🌮','🌯','🫔','🥗','🥘','🫕','🥫','🍝','🍜','🍲','🍛','🍣','🍱','🥟','🦪','🍤','🍙','🍚','🍘','🍥','🥠','🥮','🍢','🍡','🍧','🍨','🍦','🥧','🧁','🍰','🎂','🍮','🍭','🍬','🍫','🍿','🍩','🍪','🍯','🥛','🍼','☕️','🫖','🍵','🍶','🍾','🍷','🍸','🍹','🍺','🍻','🥂','🥃','🫗','🥤','🧋','🧃','🧉','🧊','🥢','🍽️','🍴','🥄','🏺'],

    '⚽ Activities & Events': ['⚽','🏀','🏈','⚾','🥎','🎾','🏐','🏉','🥏','🎱','🪀','🏓','🏸','🏒','🏑','🥍','🏏','🪃','🥅','⛳','🪁','🏹','🎣','🤿','🥊','🥋','🎽','🛹','🛼','🛷','⛸️','🥌','🎿','⛷️','🏂','🪂','🏋️‍♀️','🏋️','🏋️‍♂️','🤼‍♀️','🤼','🤼‍♂️','🤸‍♀️','🤸','🤸‍♂️','⛹️‍♀️','⛹️','⛹️‍♂️','🤺','🤾‍♀️','🤾','🤾‍♂️','🏌️‍♀️','🏌️','🏌️‍♂️','🏇','🧘‍♀️','🧘','🧘‍♂️','🏄‍♀️','🏄','🏄‍♂️','🏊‍♀️','🏊','🏊‍♂️','🤽‍♀️','🤽','🤽‍♂️','🚣‍♀️','🚣','🚣‍♂️','🧗‍♀️','🧗','🧗‍♂️','🚵‍♀️','🚵','🚵‍♂️','🚴‍♀️','🚴','🚴‍♂️','🏆','🥇','🥈','🥉','🏅','🎖️','🏵️','🎗️','🎫','🎟️','🎪','🤹','🤹‍♂️','🤹‍♀️','🎭','🩰','🎨','🎬','🎤','🎧','🎼','🎹','🥁','🪘','🎷','🎺','🪗','🎸','🪕','🎻','🪈','🎲','♟️','🎯','🎳','🎮','🎰','🧩','🎄','🎆','🎇','🎈','🎉','🎊','🎁'],

    '💡 Objects': ['⌚','📱','📲','💻','⌨️','🖥️','🖨️','🖱️','🖲️','🕹️','💽','💾','💿','📀','📼','📷','📸','📹','🎥','📞','☎️','📟','📠','📺','📻','🎙️','💡','🔦','🕯️','💰','💵','💴','💶','💷','🪙','💳','💎','⚖️','🔧','🔨','⚒️','🛠️','⛏️','🔩','⚙️','🧱','⛓️','🧲','⚰️','🪦','⚱️','🔮','📿','🧿','💈','🔭','🔬','🕳️','🩹','🩺','🧬','🦠','🧪','🌡️','🧹','🧺','🚽','🚰','🚿','🛁','🧼','🪥','🧽','🧯','🔑','🗝️','🚪','🛋️','🛏️','🧸','🖼️','🛍️','🛒','✉️','🧧','📫','📮','📦','🏷️','📜','📃','📄','📑','📊','📈','📉','🗒️','🗓️','🗑️','📁','📂','✂️','🖊️','✒️','🖌️','🖍️','📝','✏️','🔍','🔎','🔒','🔐','🔓','🔏'],

    '🔞 Torn-Themed': ['🔫','💣','🧨','🪓','🔪','🗡️','⚔️','🛡️','🚬','💊','💉','🩸','❤️‍🔥','❤️‍🩹','💋','💯','💢','💦','🍆','🍑','😈','👿','👹','👺','🔥','💥','💨','💸','⚗️','🔞'],

    '❤️‍ Symbols & Flags': ['🆔','⚛️','☢️','☣️','📴','🆚','🉑','㊗️','㊙️','🉐','🆘','⛔','🚫','❌','⭕','🛑','📛','♨️','❗️','❕','❓','❔','‼️','⁉️','✅','✔️','☑️','❎','✝️','☪️','🕉️','✡️','☯️','☮️','☦️','⚠️','🚸','♻️','⚜️','🔱','🔰','🏧','♿','🅿️','🚾','📶','🈁','🈂️','🈚','🈯','🉐','🈹','🈺','🈶','🈷️','🈸','🈲','🈵','🈴','🆎','🅱️','🅰️','🅾️','🆑','🆒','🆓','🆕','🆖','🆗','🆙','↔️','↕️','↖️','↗️','↘️','↙️','↩️','↪️','⤴️','⤵️','➡️','⬅️','⬆️','⬇️','➕','➖','➗','✖️','♾️','💲','💱','™️','©️','®️','🔚','🔙','🔛','🔝','🔜','🔴','🟠','🟡','🟢','🔵','🟣','🟤','⚫','⚪','🟥','🟧','🟨','🟩','🟦','🟪','🟫','⬛','⬜','🏁','🚩','🎌','🏴','🏳️','🏳️‍🌈','🏳️‍⚧️','🏴‍☠️']
};


    const themes = {
        light: { bg: '#f2f2f2', text: '#000', border: '#ccc', catBg: '#e9e9e9' },
        dark:  { bg: '#2c2c2c', text: '#f1f1f1', border: '#555', catBg: '#222' }
    };

    const nativeTextareaValueSetter = Object.getOwnPropertyDescriptor(window.HTMLTextAreaElement.prototype, "value").set;

    function simulateUserInput(textarea, text) {
        const start = textarea.selectionStart;
        const end = textarea.selectionEnd;
        const newText = textarea.value.substring(0, start) + text + textarea.value.substring(end);
        nativeTextareaValueSetter.call(textarea, newText);
        textarea.dispatchEvent(new Event('input', { bubbles: true }));
        textarea.selectionStart = textarea.selectionEnd = start + text.length;
        textarea.focus();
    }

    function save(key, data) {
        localStorage.setItem(key, JSON.stringify(data));
    }

    function showNotification(message) {
        const notif = document.createElement('div');
        notif.textContent = message;
        Object.assign(notif.style, {
            position: 'fixed', top: '20px', right: '20px',
            background: 'rgba(0,0,0,0.7)', color: 'white',
            padding: '10px 20px', borderRadius: '5px', zIndex: 9999
        });
        document.body.appendChild(notif);
        setTimeout(() => notif.remove(), 1500);
    }

    function addEmojiButtonTo(chatContainer) {
        if (chatContainer.querySelector('.custom-emoji-button-v3')) return;

        const emojiButton = document.createElement('button');
        emojiButton.className = 'custom-emoji-button-v3';
        emojiButton.textContent = fixedButtonEmoji;
        Object.assign(emojiButton.style, {
            background: 'transparent',
            border: 'none',
            fontSize: '22px',
            cursor: 'pointer',
            height: '32px',
            width: '32px',
            marginRight: '5px'
        });

        const picker = document.createElement('div');
        Object.assign(picker.style, {
            position: 'absolute', display: 'none',
            bottom: '40px', left: '0',
            width: '300px', height: '320px',
            borderRadius: '8px', zIndex: 1001,
            boxShadow: '0 5px 15px rgba(0,0,0,0.3)',
            display: 'flex', flexDirection: 'column'
        });

        const categoryContainer = document.createElement('div');
        Object.assign(categoryContainer.style, {
            display: 'flex', flexWrap: 'wrap',
            padding: '5px', alignItems: 'center'
        });

        const emojiDisplay = document.createElement('div');
        Object.assign(emojiDisplay.style, {
            padding: '5px', flexGrow: '1', overflowY: 'auto'
        });

        picker.append(categoryContainer, emojiDisplay);

        function applyTheme() {
            const theme = isDarkMode ? themes.dark : themes.light;
            Object.assign(picker.style, {
                background: theme.bg,
                border: `1px solid ${theme.border}`,
                color: theme.text
            });
            categoryContainer.style.background = theme.catBg;
        }

        function renderEmojis(list) {
            emojiDisplay.innerHTML = '';
            const grid = document.createElement('div');
            Object.assign(grid.style, { display: 'flex', flexWrap: 'wrap' });

            list.forEach(emoji => {
                const span = document.createElement('span');
                span.textContent = emoji;
                Object.assign(span.style, {
                    cursor: 'pointer', padding: '4px', fontSize: '22px'
                });

                span.addEventListener('click', () => {
                    if (isSelectingButtonEmoji) {
                        fixedButtonEmoji = emoji;
                        localStorage.setItem(BUTTON_EMOJI_KEY, emoji);
                        emojiButton.textContent = emoji;
                        isSelectingButtonEmoji = false;
                        showNotification(`Button emoji set to ${emoji}`);
                        return;
                    }
                    simulateUserInput(chatContainer.querySelector('textarea.textarea___V8HsV'), emoji);
                    picker.style.display = 'none';
                });

                grid.appendChild(span);
            });

            emojiDisplay.appendChild(grid);
        }

        Object.keys(emojiCategories).forEach(name => {
            const tab = document.createElement('button');
            tab.textContent = name.split(' ')[0];
            Object.assign(tab.style, {
                background: 'none', border: 'none',
                cursor: 'pointer', fontSize: '20px', padding: '5px'
            });
            tab.addEventListener('click', () => renderEmojis(emojiCategories[name]));
            categoryContainer.appendChild(tab);
        });

        const themeToggle = document.createElement('button');
        themeToggle.textContent = '🌙';
        Object.assign(themeToggle.style, {
            border: '1px solid', borderRadius: '5px',
            cursor: 'pointer', fontSize: '16px',
            width: '30px', height: '30px', marginLeft: 'auto'
        });

        themeToggle.addEventListener('click', () => {
            isDarkMode = !isDarkMode;
            localStorage.setItem(DARK_MODE_KEY, isDarkMode);
            applyTheme();
        });

        const settingsBtn = document.createElement('button');
        settingsBtn.textContent = '⚙️';
        settingsBtn.title = 'Set button emoji';
        Object.assign(settingsBtn.style, {
            border: '1px solid', borderRadius: '5px',
            cursor: 'pointer', fontSize: '16px',
            width: '30px', height: '30px', marginLeft: '5px'
        });

        settingsBtn.addEventListener('click', () => {
            isSelectingButtonEmoji = true;
            showNotification('Click an emoji to set as button icon');
        });

        categoryContainer.append(themeToggle, settingsBtn);

        emojiButton.addEventListener('click', (e) => {
            e.stopPropagation();
            picker.style.display = picker.style.display === 'none' ? 'flex' : 'none';
            applyTheme();
            renderEmojis(emojiCategories['🙂 Smileys & Emotion']);
        });

        chatContainer.insertBefore(emojiButton, chatContainer.querySelector('.iconWrapper___tyRRU'));
        chatContainer.appendChild(picker);
    }

    document.addEventListener('click', (e) => {
        if (!e.target.closest('.custom-emoji-picker') && !e.target.closest('.custom-emoji-button-v3')) {
            document.querySelectorAll('.custom-emoji-picker').forEach(p => p.style.display = 'none');
        }
    });

    const observer = new MutationObserver(() => {
        document.querySelectorAll('.root___WUd1h').forEach(container => addEmojiButtonTo(container));
    });

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

})();