Ultimate Gartic Experience
// ==UserScript==
// @name GarticFlix V1 Elite
// @namespace http://tampermonkey.net/
// @version v.11.0
// @description Ultimate Gartic Experience
// @author Akíra & ygn
// @match https://gartic.io/*
// @icon https://www.google.com/s2/favicons?domain=gartic.io
// @grant none
// ==/UserScript==
if (window.location.href.indexOf("?L") !== -1) {
const styles = `
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap');
:root {
--bg-primary: #0f172a;
--bg-secondary: #1e293b;
--accent: #6366f1;
--accent-hover: #4f46e5;
--text: #e2e8f0;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Outfit', sans-serif;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes shimmer {
0% { background-position: -1000px 0; }
100% { background-position: 1000px 0; }
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}
.container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: var(--bg-primary);
color: var(--text);
overflow-y: auto;
z-index: 9999;
padding: 20px;
}
.header {
background: linear-gradient(135deg, var(--accent), var(--accent-hover));
padding: 20px;
border-radius: 15px;
text-align: center;
margin-bottom: 20px;
position: relative;
overflow: hidden;
animation: float 6s ease-in-out infinite;
}
.header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
animation: shimmer 2s infinite;
}
.header h1 {
font-size: 28px;
font-weight: 700;
color: white;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
margin: 0;
}
.controls {
background: var(--bg-secondary);
border-radius: 15px;
padding: 20px;
margin-bottom: 20px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
animation: fadeIn 0.5s ease-out;
}
.control-input {
width: 100%;
padding: 12px;
background: rgba(255,255,255,0.1);
border: 2px solid var(--accent);
border-radius: 10px;
color: var(--text);
font-size: 16px;
transition: all 0.3s ease;
}
.control-input:focus {
outline: none;
border-color: var(--accent-hover);
box-shadow: 0 0 15px rgba(99, 102, 241, 0.3);
}
.stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 15px;
margin-bottom: 20px;
}
.stat-card {
background: var(--bg-secondary);
padding: 15px;
border-radius: 10px;
text-align: center;
}
.stat-value {
font-size: 24px;
font-weight: 700;
color: var(--accent);
}
.stat-label {
font-size: 14px;
opacity: 0.8;
margin-top: 5px;
}
.rooms-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
animation: fadeIn 0.6s ease-out;
}
.room-card {
background: var(--bg-secondary);
border-radius: 15px;
padding: 20px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.room-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
.room-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(99, 102, 241, 0.2);
}
.room-title {
font-size: 18px;
font-weight: 600;
color: var(--accent);
}
.room-stats {
font-size: 14px;
opacity: 0.8;
}
.room-actions {
display: flex;
gap: 10px;
}
.btn {
padding: 10px 20px;
border-radius: 8px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
border: none;
flex: 1;
font-size: 14px;
}
.btn-primary {
background: var(--accent);
color: white;
}
.btn-primary:hover {
background: var(--accent-hover);
transform: translateY(-2px);
}
.btn-secondary {
background: transparent;
border: 2px solid var(--accent);
color: var(--accent);
}
.btn-secondary:hover {
background: var(--accent);
color: white;
}
.users-grid {
display: none;
grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
gap: 10px;
margin-top: 15px;
padding: 15px;
background: rgba(0,0,0,0.2);
border-radius: 10px;
animation: fadeIn 0.3s ease-out;
}
.user-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease;
border: 2px solid var(--accent);
}
.user-avatar:hover {
transform: scale(1.1);
border-color: var(--accent-hover);
}
.nickname-tooltip {
position: absolute;
background: var(--accent);
color: white;
padding: 5px 10px;
border-radius: 5px;
font-size: 12px;
z-index: 1000;
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease;
}
@media (max-width: 768px) {
.controls {
grid-template-columns: 1fr;
}
.rooms-grid {
grid-template-columns: 1fr;
}
}
`;
document.head.innerHTML = `<style>${styles}</style>`;
const mainContainer = document.createElement("div");
mainContainer.className = "container";
mainContainer.innerHTML = `
<div class="header">
<h1>GarticFlix Elite</h1>
</div>
<div class="stats">
<div class="stat-card">
<div class="stat-value" id="totalRooms">0</div>
<div class="stat-label">Aktif Odalar</div>
</div>
<div class="stat-card">
<div class="stat-value" id="totalPlayers">0</div>
<div class="stat-label">Toplam Oyuncu</div>
</div>
<div class="stat-card">
<div class="stat-value" id="onlineUsers">0</div>
<div class="stat-label">Çevrimiçi</div>
</div>
</div>
<div class="controls">
<input type="text" class="control-input" placeholder="Oda veya Oyuncu Ara..." onkeyup="window.filterRooms(this.value)">
<select class="control-input theme-select" onchange="window.updateRooms()">
<option value="">Tüm Temalar</option>
<option value="1">Genel</option>
<option value="28">Anime</option>
<option value="30">Diğer</option>
<option value="12">Oyunlar</option>
<option value="24">Youtuber</option>
<option value="11">LoL</option>
<option value="2">Hayvanlar</option>
<option value="31">Minecraft</option>
<option value="4">Yiyecekler</option>
<option value="9">Animasyon</option>
<option value="35">Naruto</option>
<option value="16">Bayraklar</option>
<option value="10">Şarkılar</option>
<option value="17">Futbol</option>
<option value="26">Logo</option>
<option value="5">Fiiller</option>
<option value="33">FNAF</option>
<option value="3">Nesneler</option>
<option value="6">Ülkeler</option>
<option value="7">Markalar</option>
<option value="8">Filmler</option>
</select>
<select class="control-input lang-select" onchange="window.updateRooms()">
<option value="8">Türkçe</option>
<option value="2">English</option>
<option value="3">Español</option>
<option value="1">Português</option>
<option value="7">Русский</option>
<option value="13">Tiếng Việt</option>
<option value="15">日本語</option>
<option value="20">한국어</option>
<option value="23">Azərbaycanca</option>
<option value="45">Bahasa Indonesia</option>
<option value="11">Čeština</option>
<option value="14">Deutsch</option>
<option value="4">Français</option>
<option value="6">Italiano</option>
<option value="44">Magyar</option>
<option value="18">Nederlands</option>
<option value="10">Polski</option>
<option value="58">Română</option>
<option value="22">Slovenčina</option>
<option value="21">български език</option>
<option value="40">עברית</option>
<option value="19">العربية</option>
<option value="34">فارسی</option>
<option value="12">ภาษาไทย</option>
<option value="16">中文 (简化字)</option>
<option value="9">中文 (臺灣)</option>
<option value="17">中文 (香港)</option>
</select>
</div>
<div class="rooms-grid"></div>
`;
document.body.appendChild(mainContainer);
let roomsData = [];
let filteredRooms = [];
function createRoomCard(room) {
const card = document.createElement('div');
card.className = 'room-card';
card.innerHTML = `
<div class="room-header">
<div class="room-title">#${room.code}</div>
<div class="room-stats">${room.quant}/${room.max} Oyuncu</div>
</div>
<div class="room-actions">
<button class="btn btn-primary" onclick="window.joinRoom('${room.code}')">Katıl</button>
<button class="btn btn-secondary" onclick="window.watchRoom('${room.code}')">İzle</button>
<button class="btn btn-primary" onclick="window.showUsers('${room.code}')">Kullanıcılar</button>
</div>
<div class="users-grid" id="users-${room.code}"></div>
`;
return card;
}
window.filterRooms = (query) => {
query = query.toLowerCase();
filteredRooms = roomsData.filter(room =>
room.code.toLowerCase().includes(query) ||
(room.players && room.players.some(player =>
player.nick.toLowerCase().includes(query)
))
);
updateRoomsDisplay();
};
window.updateRooms = () => {
const theme = document.querySelector('.theme-select').value;
const lang = document.querySelector('.lang-select').value;
let url = `https://gartic.io/req/list?language[]=${lang}`;
if (theme) url += `&subject[]=${theme}`;
fetch(url)
.then(response => response.json())
.then(data => {
roomsData = data;
filteredRooms = data;
updateRoomsDisplay();
updateStats();
});
};
function updateStats() {
document.getElementById('totalRooms').textContent = roomsData.length;
const totalPlayers = roomsData.reduce((acc, room) => acc + room.quant, 0);
document.getElementById('totalPlayers').textContent = totalPlayers;
document.getElementById('onlineUsers').textContent = totalPlayers + Math.floor(Math.random() * 100);
}
function updateRoomsDisplay() {
const container = document.querySelector('.rooms-grid');
container.innerHTML = '';
filteredRooms.forEach(room => {
container.appendChild(createRoomCard(room));
});
}
window.joinRoom = (code) => {
window.open(`https://gartic.io/${code}`, '_blank');
};
window.watchRoom = (code) => {
window.open(`https://gartic.io/${code}/viewer`, '_blank');
};
window.showUsers = (roomCode) => {
const usersGrid = document.getElementById(`users-${roomCode}`);
const isVisible = usersGrid.style.display === 'grid';
if (!isVisible) {
usersGrid.style.display = 'grid';
loadRoomUsers(roomCode);
} else {
usersGrid.style.display = 'none';
}
};
function loadRoomUsers(roomCode) {
const usersGrid = document.getElementById(`users-${roomCode}`);
usersGrid.innerHTML = '';
const servers = ['01', '02', '03', '04', '05', '06'];
let connectedServer = false;
function tryNextServer(index) {
if (index >= servers.length || connectedServer) return;
const ws = new WebSocket(`wss://server${servers[index]}.gartic.io/socket.io/?EIO=3&transport=websocket`);
ws.onopen = () => {
ws.send(`42[12,{"v":20000,"platform":0,"sala":"${roomCode.slice(-4)}"}]`);
};
ws.onmessage = (msg) => {
if (msg.data.startsWith('42[5,')) {
try {
const data = JSON.parse(msg.data.slice(2));
if (data[0] === 5 && Array.isArray(data[5])) {
connectedServer = true;
displayUsers(data[5], usersGrid);
ws.close();
}
} catch (e) {
console.error('JSON parse error:', e);
}
}
};
ws.onerror = () => {
tryNextServer(index + 1);
};
ws.onclose = () => {
if (!connectedServer) {
tryNextServer(index + 1);
}
};
}
tryNextServer(0);
}
function displayUsers(users, container) {
users.forEach(user => {
const userContainer = document.createElement('div');
userContainer.style.position = 'relative';
const avatar = document.createElement('img');
avatar.className = 'user-avatar';
avatar.src = user.foto || `https://gartic.io/static/images/avatar/svg/${user.avatar}.svg`;
avatar.setAttribute('data-nick', user.nick);
avatar.setAttribute('data-points', user.pontos || 0);
avatar.addEventListener('mouseenter', showTooltip);
avatar.addEventListener('mouseleave', hideTooltip);
userContainer.appendChild(avatar);
container.appendChild(userContainer);
});
}
function showTooltip(event) {
const avatar = event.target;
const nick = avatar.getAttribute('data-nick');
const points = avatar.getAttribute('data-points');
const tooltip = document.createElement('div');
tooltip.className = 'nickname-tooltip';
tooltip.innerHTML = `
<div>${nick}</div>
<div style="font-size: 11px">${points} puan</div>
`;
const rect = avatar.getBoundingClientRect();
tooltip.style.position = 'fixed';
tooltip.style.left = `${rect.left + rect.width/2}px`;
tooltip.style.top = `${rect.top - 10}px`;
tooltip.style.transform = 'translate(-50%, -100%)';
tooltip.style.opacity = '1';
document.body.appendChild(tooltip);
avatar.tooltip = tooltip;
}
function hideTooltip(event) {
const tooltip = event.target.tooltip;
if (tooltip) {
tooltip.style.opacity = '0';
setTimeout(() => tooltip.remove(), 200);
}
}
window.updateRooms();
setInterval(window.updateRooms, 5000);
function handleResize() {
const container = document.querySelector('.container');
container.style.height = `${window.innerHeight}px`;
}
window.addEventListener('resize', handleResize);
handleResize();
let updateTimeout;
window.filterRooms = (query) => {
clearTimeout(updateTimeout);
updateTimeout = setTimeout(() => {
query = query.toLowerCase();
filteredRooms = roomsData.filter(room =>
room.code.toLowerCase().includes(query)
);
updateRoomsDisplay();
}, 300);
};
}