// ==UserScript==
// @name         Gartic Fix Chat & Emojis
// @description  Fix Chat / chat gartic / chat / emojis 
// @author       F̷a̷r̷e̷s̷
//  @icon         https://i.ibb.co/FbHjqHKt/8d93f7f2-e335-476d-808b-c4514cf81800.jpg
// @match        https://gartic.io/*
// @run-at       document-start
// @grant        unsafeWindow
// @grant        GM_addStyle
// @version      1.0
// @downloadURL none
// ==/UserScript==

(function() {
    'use strict';
    const window = typeof unsafeWindow !== 'undefined' ? unsafeWindow : window;
    window.kullanicilar = {}; window.mesajlar = []; window.ben = null; window.socket = null; window.id = null;

    GM_addStyle(`#screenRoom #chat .history, #screenRoom #chat .history .scrollElements { overflow-y: auto !important; height: 100% !important; display: block !important; scroll-behavior: smooth; } #screenRoom #chat .history::-webkit-scrollbar { width: 7px !important; display: block !important; } #screenRoom #chat .history::-webkit-scrollbar-thumb { background-color: rgba(120, 155, 176, 0.5) !important; border-radius: 10px; } .buton { background: #ffcc00; color: #001b4d; border-radius: 4px; padding: 2px 8px; font-size: 11px; cursor: pointer; margin-left: 10px; font-family: 'NunitoBlack'; text-transform: uppercase; display: inline-block; border: 1px solid #000; } body.aktif #canvas, body.aktif #answer, body.aktif #interaction > .bar { display: none !important; } body.aktif #screenRoom .ctt { display: flex !important; flex-direction: row !important; grid-template-areas: none !important; grid-template-columns: none !important; height: 100% !important; } body.aktif #interaction { flex: 1 !important; margin: 0 !important; height: 100% !important; } body.aktif #chat { height: 100% !important; } @media screen and (min-width: 641px) { #interaction { display: flex !important; } #answer, #chat { flex: 1 !important; width: 50% !important; min-width: 0 !important; } .mesaj { margin: 3px 0 3px 10px !important; display: block !important; color: #868d96 !important; font-size: 16px !important; line-height: 1.4 !important; } .mesaj span { background: none !important; box-shadow: none !important; padding: 0 !important; } .mesaj strong { margin-right: 6px !important; } .mesaj.you strong { color: #7b00ff !important; } .mesaj .avatar { display: none !important; } #chat .history { height: calc(100% - 60px) !important; } #chat .history .scrollElements > div.msg:not(.mesaj):not(.system):not(.alert) { display: none !important; } .sohbet { margin-bottom: 15px; padding: 0 10px; position: relative; } } #screenRoom .scrollBar, #screenRoom .scroll:before, #screenRoom .scroll:after { display: none !important; }`);

    GM_addStyle(`
        .emoji-picker-alt {
            position: absolute; bottom: 100px; left: 0; width: 100%; height: 300px;
            background: #fff; border: 2px solid #ddd; border-radius: 12px;
            display: none; flex-direction: column; z-index: 10005; box-shadow: 0 -5px 15px rgba(0,0,0,0.2);
        }
        .emoji-picker-alt.show { display: flex; }
        .emoji-tabs { display: flex; background: #f8f9fa; border-bottom: 1px solid #eee; padding: 5px; border-radius: 12px 12px 0 0; overflow-x: auto; }
        .emoji-tab { flex: none; width: 45px; text-align: center; cursor: pointer; padding: 8px 5px; font-size: 20px; transition: 0.2s; border-radius: 5px; }
        .emoji-tab:hover, .emoji-tab.active { background: #e9ecef; }
        .emoji-list { display: grid; grid-template-columns: repeat(6, 1fr); overflow-y: auto; padding: 10px; flex: 1; }
        .emoji-list span { cursor: pointer; font-size: 22px; padding: 8px; text-align: center; transition: 0.1s; }
        .emoji-list span:hover { transform: scale(1.2); background: #f0f0f0; border-radius: 8px; }
        .emoji-trigger { cursor: pointer; font-size: 30px; width: fit-content; margin: 5px 0 0 10px; background: transparent; border: none; display: block; }
        .sohbet { display: flex; flex-direction: column; }
    `);

    const emojiData = {
        "😀": ["😀","😃","😄","😁","😆","😅","🤣","😂","🙂","🙃","🫠","😉","😊","😇","🥰","😍","🤩","😘","😗","☺️","😚","😙","🥲","😋","😛","😜","🤪","😝","🤑","🤗","🤭","🫢","🫣","🤫","🤔","🫡","🤐","🤨","😐","😑","😶","🫥","😶‍🌫️","😏","😒","🙄","😬","😮‍💨","🤥","🫨","😌","😔","😪","🤤","😴","😷","🤒","🤕","🤢","🤮","🤧","🥵","🥶","🥴","😵","😵‍💫","🤯","🤠","🥳","🥸","😎","🤓","🧐","😕","🫤","😟","🙁","☹️","😮","😯","😲","😳","🥺","🥹","😦","😧","😨","😰","😥","😢","😭","😱","😖","😣","😞","😓","😩","😫","🥱","😤","😡","😠","🤬","😈","👿","💀","☠️","💩","🤡","👹","👺","👻","👽","👾","🤖"],
        "👋": ["👋","🤚","🖐","✋️","🖖","🫱","🫲","🫳","🫴","🫷","🫸","👌","🤌","🤏","✌️","🤞","🫰","🤟","🤘","🤙","👈","👉","👆","🖕","👇","☝️","🫵","👍","👎","✊️","👊","🤛","🤜","👏","🙌","🫶","👐","🤲","🤝","🙏","✍️","💅","🤳","💪","🦾","🦿","🦵","🦶","👂","🦻","👃","🧠","🫀","🫁","🦷","🦴","👀","👁","👅","👄","🫦","👶","🧒","👦","👧","🧑","👱","👨","👩","👴","👵","🧓","👣"],
        "🐶": ["🐵","🐒","🦍","🦧","🐶","🐕","🦮","🐕‍🦺","🐩","🐺","🦊","🦝","🐱","🐈","🐈‍⬛","🦁","🐯","🐅","🐆","🐴","🫎","🫏","🐎","🦄","🦓","🦌","🦬","🐮","🐂","🐃","🐄","🐷","🐖","🐗","🐽","🐏","🐑","🐐","🐪","🐫","🦙","🦒","🐘","🦣","🦏","🦛","🐭","🐁","🐀","🐹","🐰","🐇","🐿","🦫","🦔","🦇","🐻","🐨","🐻‍❄️","🐼","🦥","🦦","🦨","🦘","🦡","🐾"],
        "🍎": ["🍏","🍎","🍐","🍊","🍋","🍌","🍉","🍇","🍓","🫐","🍈","🍒","🍑","🥭","🍍","🥥","🥝","🍅","🍆","🥑","🥦","🥬","🥒","🌶","🫑","🌽","🥕","🫒","🧄","🧅","🥔","🍠","🥐","🍞","🥖","🫓","🥨","🥯","🥞","🧇","🧀","🍖","🍗","🥩","🥓","🍔","🍟","🍕","ホット","🌭","🥪","🌮","🌯","🌯","🥚","🍳","🥘","🍲","🥣","🥗","🍿","🧈","🧂","🥫"],
        "⚽": ["⚽","⚾","🥎","🏀","🏐","🏈","🏉","🎾","🥏","🎳","🏏","🏑"," hockey","🥍","🏓","🏸","🥊","🥋","🥅","⛳","⛸","🎣","🤿","🎽","🎿","🛷","🥌","🎯","🪀","🪁","🎱","🔮","🪄","🧿","🪬","🎮","🕹","🎰","🎲","🧩","🧸","🪅","🪩","🪆"],
        "💡": ["🌍","🌎","🌏","🌐","🗺","🧭","🏔","🌋","🏠","🏡","🏢","🚂","🚌","🚑","🚓","🚕","🚗","🚚","🚜","🚲","⚓","✈️","🚀","🛸","⌛","⌚","⏰","☀️","🌙","🔥","🌈","⚡","❄️","✨","🎈","🎉","🎁","🏆","💡","💰","✉️","✏️","✂️","🔒","🔑","❤️","💔","💯","💢","💥","💤","⚠️","✅","❌"]
    };

    function print(user, text, my) {
        const hedef = document.querySelector('#chat .history .scrollElements'); if (!hedef) return;
        const satir = document.createElement('div'); satir.className = `msg mesaj ${my ? 'you' : ''}`;
        const image = user.foto ? `<div class="avatar" style="background-image: url('${user.foto}')"></div>` : `<div class="avatar"><div class="av avt${user.avatar}"></div></div>`;
        satir.innerHTML = `${image}<div><strong>${user.nick}</strong><span>${text}</span></div>`;
        hedef.appendChild(satir);
        const area = document.querySelector('#chat .history'); if (area) area.scrollTop = area.scrollHeight; }

    const bridge = window.WebSocket;
    window.WebSocket = function(...args) {
        const socket = new bridge(...args); window.socket = socket;
        socket.addEventListener('message', (event) => {
            if (!event.data.startsWith('42[')) return;
            const paket = JSON.parse(event.data.slice(2));
            const sync = (data) => window.kullanicilar[data.id] = { nick: data.nick, avatar: data.avatar, foto: data.foto };
            if (paket[0] == 5) { window.ben = paket[1]; window.id = paket[2]; paket[5].forEach(sync); }
            if (paket[0] == 23) sync(paket[1]);
            if (paket[0] == 11) print(window.kullanicilar[paket[1]] || { nick: paket[1], avatar: 0, foto: null }, paket[2], paket[1] == window.ben); });
        return socket; };
    window.WebSocket.prototype = bridge.prototype;

    setInterval(() => {
        const chat = document.querySelector('#chat');
        if (chat && !document.querySelector('.sohbet')) {
            const sohbet = document.createElement('form'); sohbet.className = 'sohbet';
            sohbet.innerHTML = `
                <div class="textGame"><input type="text" class="mousetrap" placeholder="اكتب هنا..." style="width:100%; height:50px; font-size:18px;" maxlength="100"></div>
                <span class="emoji-trigger">😊</span>
            `;
            const picker = document.createElement('div'); picker.className = 'emoji-picker-alt';
            const tabsContainer = document.createElement('div'); tabsContainer.className = 'emoji-tabs';
            const listContainer = document.createElement('div'); listContainer.className = 'emoji-list';

            Object.keys(emojiData).forEach((tabIcon, index) => {
                const tab = document.createElement('div');
                tab.className = `emoji-tab ${index === 0 ? 'active' : ''}`;
                tab.innerText = tabIcon;
                tab.onclick = () => {
                    document.querySelectorAll('.emoji-tab').forEach(t => t.classList.remove('active'));
                    tab.classList.add('active');
                    loadEmojis(emojiData[tabIcon]);
                };
                tabsContainer.appendChild(tab);
            });

            const loadEmojis = (list) => {
                listContainer.innerHTML = '';
                list.forEach(e => {
                    const s = document.createElement('span'); s.innerText = e;
                    s.onclick = () => { sohbet.querySelector('input').value += e; };
                    listContainer.appendChild(s);
                });
            };

            loadEmojis(emojiData["😀"]);
            picker.appendChild(tabsContainer);
            picker.appendChild(listContainer);
            sohbet.querySelector('.emoji-trigger').onclick = () => picker.classList.toggle('show');
            sohbet.onsubmit = (event) => {
                event.preventDefault(); const input = sohbet.querySelector('input');
                if (input.value.trim() && window.socket && window.id !== null) {
                    window.socket.send(`42["11",${JSON.stringify(window.id)},"${input.value}"]`);
                    input.value = ''; picker.classList.remove('show');
                }
            };
            sohbet.appendChild(picker);
            chat.appendChild(sohbet);
        }

        const baslik = document.querySelector('#chat h5');
        if (baslik && !document.querySelector('.buton')) {
            const buton = document.createElement('div'); buton.className = 'buton';
            buton.innerText = document.body.classList.contains('aktif') ? 'غلق' : 'فتح';
            buton.onclick = () => buton.innerText = document.body.classList.toggle('aktif') ? 'غلق' : 'فتح';
            baslik.appendChild(buton);
        }
    }, 1000);
})();