Raw Source Toggle Dropdown

• Minified Source

greenbeanyum / really cool emoji

// ==UserScript==
// @name         really cool emoji
// @version      0.2
// @namespace    https://github.com/frenchcutgreenbean/
// @description  chatbox emojis
// @author       dantayy
// @match        https://blutopia.cc/
// @icon         https://www.google.com/s2/favicons?sz=64&domain=blutopia.cc
// @downloadURL  https://openuserjs.org/install/greenbeanyum/really_cool_emoji.user.js
// @updateURL    https://openuserjs.org/meta/greenbeanyum/really_cool_emoji.meta.js
// @grant        GM_addStyle
// @license      GPL-3.0-or-later
// ==/UserScript==

(function () {
    'use strict';

    const emojis = {
        "comedy": "https://ptpimg.me/x0rx70.png",
        "counting": "https://ptpimg.me/59emhk.gif",
        "feltcute": "https://ptpimg.me/20180i.png",
        "giggle": "https://ptpimg.me/f9opi2.png",
        "huh": "https://ptpimg.me/12kx8m.gif",
        "rage": "https://ptpimg.me/cqu9qr.gif",
        "reallymad": "https://ptpimg.me/znro3o.png",
        "reallysad": "https://ptpimg.me/m9f985.png",
        "slightlymad": "https://ptpimg.me/ut9wv7.png",
        "ultramad": "https://ptpimg.me/vbg6q3.png",
        "yawn": "https://ptpimg.me/l4l3r6.png",
        "whatda": "https://i.ibb.co/YTDbxm1/WHAT.gif",
        "feet": "https://ptpimg.me/622oxi.png",
        "sleepy": "https://i.ibb.co/b5Svttf/sleepy.gif",
        "sadd": "https://i.ibb.co/CV28H5h/sad.gif",
        "joe": "https://i.ibb.co/JBncpnh/OOOOO.gif",
        "chatting": "https://i.ibb.co/jTYXKTg/chatting.gif",
        "ayo": "https://i.ibb.co/Vx9jZB9/ayo.gif",
        "bratwu": "https://i.ibb.co/k834WdR/bratwur.png",
        ":o": "https://i.ibb.co/1Z0sS6J/OO.png",
        "o7": "https://i.ibb.co/5sqKm4Y/o7.png",
    };

    let chatboxHeader, chatForm;
    const emojiMenu = document.createElement("div");
    emojiMenu.className = "emoji-content";

    for (const [key, value] of Object.entries(emojis)) {
        const emojiItem = document.createElement("div");
        emojiItem.classList.add("emoji-item");
        emojiItem.style.backgroundImage = `url(${value})`;
        emojiItem.addEventListener("click", () => onEmojiclick(value));
        emojiMenu.appendChild(emojiItem);
    }

    function onEmojiclick(image) {
        const emoji = `[img=32]${image}[/img]`;
        chatForm.value = chatForm.value ? `${chatForm.value.trim()} ${emoji}` : emoji;
    }

    function handleInputChange(e) {
        const regex = /^http.*\.(jpg|jpeg|png|gif|bmp|webp)$/i
        const message = e.target.value.trim();

        if (message.startsWith('!') && message.includes('http')) {
            let m = message.split(' ');
            let num = m[0].substring(1)
            let url = m[1].trim()
            if (!regex.test(url)) return;
            if (parseInt(num)) {
                chatForm.value = `[img=${num}]${m[1]}[/img]`;
                return;
            }

        }
        if (emojis[message]) {
            chatForm.value = `[img=32]${emojis[message]}[/img]`;
        }
    }

    function createModal() {
        const modalStyler = `
            .emoji-menu {
                position: fixed;
                border-radius: 5px;
                z-index: 1;
                left: 60%;
                top: 20%;
                overflow: auto;
                background-color: rgba(0,0,0,0.4);
            }
            .emoji-content {
                background-color: #1C1C1C;
                color: #CCCCCC;
                margin: 15% auto;
                padding: 20px;
                max-width: 300px;
                position: relative;
                display: flex;
                flex-wrap: wrap;
                gap: 10px;
            }
            .emoji-item {
                width: 40px;
                height: 40px;
                cursor: pointer;
                background-size: contain;
                background-repeat: no-repeat;
                background-position: center;
                transition: transform 0.1s;
            }
            .emoji-item:hover {
                transform: scale(1.1);
            }
            .menu-close {
                background-color: transparent;
                color: #BBBBBB;
                position: absolute;
                top: 10px;
                right: 10px;
                padding: 5px;
                border: 0;
                cursor: pointer;
                transition: opacity 0.1s;
            }
            .menu-close:hover {
                opacity: 0.8;
            }
        `;
        GM_addStyle(modalStyler);

        const modal = document.createElement("div");
        modal.className = "emoji-menu";

        const closeButton = document.createElement("button");
        closeButton.className = "menu-close";
        closeButton.textContent = "Close";
        closeButton.onclick = () => modal.style.display = "none";

        modal.appendChild(closeButton);
        modal.appendChild(emojiMenu);
        document.body.appendChild(modal);
    }

    function addEmojiButton() {
        chatboxHeader = document.querySelector('#chatbox_header div');
        chatForm = document.getElementById('chatbox__messages-create');

        if (!chatboxHeader || !chatForm) {
            setTimeout(addEmojiButton, 5000);
            return;
        }

        const emojiButtonStyler = `
            .emoji-button {
                cursor: pointer;
                font-size: 24px;
                margin-left: 10px;
            }
        `;
        GM_addStyle(emojiButtonStyler);

        const emojiButton = document.createElement('span');
        emojiButton.classList.add('emoji-button');
        emojiButton.innerHTML = '😂';
        emojiButton.addEventListener('click', createModal);

        chatboxHeader.prepend(emojiButton);
        chatForm.addEventListener('input', handleInputChange);
    }

    addEmojiButton()
})();