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