sdaasd
// ==UserScript==
// @name gariks 2
// @namespace http://tampermonkey.net/
// @version 2.0
// @description sdaasd
// @author g
// @match https://gartic.io/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=gartic.io
// @grant none
// ==/UserScript==
(function() {
'use strict';
// --- 1. DEĞİŞKENLER ---
let overlayGorsel = null; // Eklediğimiz resim elementi
let menuAcik = false; // Menü durumu
// --- 2. HTML ARAYÜZÜ ---
// A) Sabit Duran Açma/Kapama Butonu (Sol Üst)
const toggleButtonHTML = `
<button id="ressam-toggle-btn" style="
position: fixed;
top: 10px;
left: 10px;
width: 50px;
height: 50px;
background: #222;
color: #00ff00;
border: 2px solid #00ff00;
border-radius: 50%;
font-size: 24px;
cursor: pointer;
z-index: 10000;
box-shadow: 0 0 10px #00ff00;
display: flex;
align-items: center;
justify-content: center;
">
🎨
</button>
`;
// B) Ayar Menüsü
const menuHTML = `
<div id="ressam-menu" style="
position: fixed;
top: 70px;
left: 10px;
background: rgba(0, 0, 0, 0.9);
color: #00ff00;
padding: 15px;
border: 2px solid #00ff00;
border-radius: 10px;
z-index: 9999;
font-family: sans-serif;
box-shadow: 0 0 15px #00ff00;
display: none;
width: 240px;
">
<h4 style="margin:0 0 10px 0; text-align:center; color:white;">GELİŞMİŞ AYARLAR</h4>
<!-- Yöntem 1: URL -->
<label style="font-size:12px; color:#ddd;">🔗 Link Yapıştır:</label>
<input type="text" id="img-url" placeholder="https://..." style="
width: 95%; background: #333; color: white; border: 1px solid #666; padding: 5px; margin-bottom: 5px; border-radius: 4px;
">
<button id="btn-link-yukle" style="width:100%; background:#444; color:white; border:1px solid #666; cursor:pointer; margin-bottom:10px;">Linkten Yükle</button>
<!-- Yöntem 2: Dosya Seç -->
<label style="font-size:12px; color:#ddd;">📂 Dosya Seç:</label>
<input type="file" id="img-upload" accept="image/*" style="width:100%; font-size:11px; margin-bottom:10px; color:white;">
<!-- Bilgilendirme -->
<div style="border:1px dashed #666; padding:5px; margin-bottom:10px; font-size:11px; color:#aaa; text-align:center;">
Ekrana <b>Sürükle-Bırak</b> yapabilir<br>veya <b>Ctrl+V</b> ile yapıştırabilirsin.
</div>
<!-- Ayarlar -->
<label style="font-size:12px;">👁️ Saydamlık:</label>
<input type="range" id="opacity-slider" min="0" max="1" step="0.1" value="0.5" style="width:100%;">
<button id="btn-gizle" style="
width: 100%;
background: #ff3333;
color: white;
font-weight: bold;
border: none;
padding: 5px;
cursor: pointer;
margin-top: 10px;
border-radius: 4px;
font-size: 11px;
">RESMİ KALDIR</button>
</div>
`;
// --- 3. ARAYÜZÜ SAYFAYA EKLEME ---
const container = document.createElement('div');
container.innerHTML = toggleButtonHTML + menuHTML;
document.body.appendChild(container);
// --- 4. TEMEL FONKSİYONLAR ---
// Resmi ekrana basan ana fonksiyon (URL veya Base64 alır)
function gorseliBaslat(sourceUrl) {
const oyunCanvas = document.querySelector('canvas');
if (!oyunCanvas) {
alert('Oyun alanı (Canvas) henüz yüklenmedi! Oyuna girince tekrar deneyin.');
return;
}
// Element yoksa oluştur
if (!overlayGorsel) {
overlayGorsel = document.createElement('img');
overlayGorsel.style.position = 'absolute';
overlayGorsel.style.pointerEvents = 'none'; // Tıklamalar arkaya geçsin
overlayGorsel.style.zIndex = '100';
document.body.appendChild(overlayGorsel);
}
// Kaynağı ayarla
overlayGorsel.src = sourceUrl;
// Opaklığı ayarla
const currentOpacity = document.getElementById('opacity-slider').value;
overlayGorsel.style.opacity = currentOpacity;
overlayGorsel.style.display = 'block';
// Pozisyonu ayarla
pozisyonGuncelle();
}
// Resmi Canvas üzerine hizalama
function pozisyonGuncelle() {
if (!overlayGorsel || overlayGorsel.style.display === 'none') return;
const oyunCanvas = document.querySelector('canvas');
if (!oyunCanvas) return;
const rect = oyunCanvas.getBoundingClientRect();
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
overlayGorsel.style.top = (rect.top + scrollTop) + 'px';
overlayGorsel.style.left = (rect.left + scrollLeft) + 'px';
overlayGorsel.style.width = rect.width + 'px';
overlayGorsel.style.height = rect.height + 'px';
}
// Dosya okuma (File Object -> Base64)
function dosyaOku(file) {
if (!file || !file.type.startsWith('image/')) return;
const reader = new FileReader();
reader.onload = (e) => {
gorseliBaslat(e.target.result);
};
reader.readAsDataURL(file);
}
// Resmi kaldırma
function resmiKaldir() {
if (overlayGorsel) {
overlayGorsel.style.display = 'none';
overlayGorsel.src = '';
document.getElementById('img-upload').value = ''; // Dosya inputunu temizle
}
}
// --- 5. OLAY DİNLEYİCİLERİ (EVENTS) ---
// A) Menü Aç/Kapa
document.getElementById('ressam-toggle-btn').addEventListener('click', () => {
const menu = document.getElementById('ressam-menu');
menuAcik = !menuAcik;
menu.style.display = menuAcik ? 'block' : 'none';
});
// B) Linkten Yükleme Butonu
document.getElementById('btn-link-yukle').addEventListener('click', () => {
const url = document.getElementById('img-url').value;
if (url) gorseliBaslat(url);
});
// C) Dosya Seçme Inputu (Bilgisayardan)
document.getElementById('img-upload').addEventListener('change', (e) => {
if (e.target.files && e.target.files[0]) {
dosyaOku(e.target.files[0]);
}
});
// D) Yapıştırma (Ctrl + V) Desteği
window.addEventListener('paste', (e) => {
// Eğer menü açık değilse veya kullanıcı chat'e yazıyorsa karışmayalım (isteğe bağlı, şu an her yerde çalışır)
const items = (e.clipboardData || e.originalEvent.clipboardData).items;
for (let item of items) {
if (item.type.indexOf('image') === 0) {
const blob = item.getAsFile();
dosyaOku(blob);
// Menüyü otomatik aç ki kullanıcı resmi görsün
if (!menuAcik) {
document.getElementById('ressam-toggle-btn').click();
}
}
}
});
// E) Sürükle & Bırak (Drag & Drop) Desteği
// Tarayıcının resmi yeni sekmede açmasını engellemek için preventDefault şart
window.addEventListener('dragover', (e) => {
e.preventDefault();
});
window.addEventListener('drop', (e) => {
e.preventDefault();
if (e.dataTransfer.files && e.dataTransfer.files[0]) {
dosyaOku(e.dataTransfer.files[0]);
if (!menuAcik) {
document.getElementById('ressam-toggle-btn').click();
}
}
});
// F) Diğer Kontroller
document.getElementById('btn-gizle').addEventListener('click', resmiKaldir);
document.getElementById('opacity-slider').addEventListener('input', (e) => {
if(overlayGorsel) overlayGorsel.style.opacity = e.target.value;
});
window.addEventListener('resize', pozisyonGuncelle);
// Gartic.io bazen canvas'ı yeniden boyutlandırır, belli aralıklarla kontrol edelim
setInterval(pozisyonGuncelle, 1000);
})();