garik

ggg

이 스크립트를 설치하려면 Tampermonkey, Greasemonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey와 같은 확장 프로그램을 설치해야 합니다.

이 스크립트를 설치하려면 Tampermonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey 또는 Userscripts와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 유저 스크립트 관리자 확장 프로그램이 필요합니다.

(이미 유저 스크립트 관리자가 설치되어 있습니다. 설치를 진행합니다!)

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

(이미 유저 스타일 관리자가 설치되어 있습니다. 설치를 진행합니다!)

// ==UserScript==
// @name         garik
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  ggg
// @author       g
// @match        https://gartic.io/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=gartic.io
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    /*
    Burada "Strict Mode" kullanıyoruz ki JavaScript hatalarımızı affetmesin,
    daha temiz kod yazalım.
    */

    // --- 1. DEĞİŞKENLER VE AYARLAR ---
    let menuAcik = false; // Menünün açık/kapalı durumunu tutar
    let overlayGorsel = null; // Eklediğimiz resim elementi

    // --- 2. HTML ARAYÜZÜ (MENÜ TASARIMI) ---
    /*
    HTML'i JavaScript içinde string (yazı) olarak oluşturuyoruz.
    Buna 'Template Literal' denir..
    */
    const menuHTML = `
        <div id="ressam-menu" style="
            position: fixed;
            top: 20px;
            left: 20px;
            background: rgba(0, 0, 0, 0.85);
            color: #00ff00;
            padding: 20px;
            border: 2px solid #00ff00;
            border-radius: 10px;
            z-index: 9999;
            font-family: 'Courier New', monospace;
            box-shadow: 0 0 15px #00ff00;
            display: none; /* Başlangıçta gizli */
        ">
            <h3 style="margin-top:0; text-align:center;">🎨 RESSAM MODU</h3>
            <hr style="border-color: #00ff00;">

            <label>Resim URL'si:</label><br>
            <input type="text" id="img-url" placeholder="Link yapıştır..." style="
                width: 200px;
                background: #222;
                color: white;
                border: 1px solid #555;
                padding: 5px;
            "><br><br>

            <label>Opaklık (Şeffaflık):</label><br>
            <input type="range" id="opacity-slider" min="0" max="1" step="0.1" value="0.5"><br><br>

            <button id="btn-yukle" style="
                width: 100%;
                background: #00ff00;
                color: black;
                font-weight: bold;
                border: none;
                padding: 10px;
                cursor: pointer;
            ">RESMİ YANSIT</button>

            <p style="font-size: 10px; color: gray; margin-top: 10px;">Menü: [INSERT] Tuşu</p>
        </div>
    `;

    // --- 3. ARAYÜZÜ SAYFAYA EKLEME (INJECTION) ---
    // Oluşturduğumuz HTML'i body'nin en sonuna ekliyoruz.
    const div = document.createElement('div');
    div.innerHTML = menuHTML;
    document.body.appendChild(div);

    // --- 4. RESMİ OYUN ALANINA YERLEŞTİRME FONKSİYONU ---
    function resmiYansit() {
        /*
        VIDEO NOTU:
        Burada oyunun çizim alanını (Canvas) bulmamız lazım.
        Gartic.io'da çizim alanı genellikle 'canvas' etiketidir.
        Biz resmimizi bu canvas'ın tam üzerine, "pointer-events: none" ile koyacağız.
        Böylece tıkladığımızda resme değil, arkasındaki tuvale tıklamış olacağız.
        */

        const url = document.getElementById('img-url').value;
        const opacity = document.getElementById('opacity-slider').value;
        const oyunCanvas = document.querySelector('canvas'); // Oyundaki canvası bul

        if (!url) {
            alert('Lütfen bir resim linki yapıştırın!');
            return;
        }

        if (!oyunCanvas) {
            alert('Oyun alanı bulunamadı! Oyuna girdiğinden emin ol.');
            return;
        }

        // Eğer zaten bir overlay varsa, eskisini güncelle
        if (!overlayGorsel) {
            overlayGorsel = document.createElement('img');
            overlayGorsel.style.position = 'absolute';
            overlayGorsel.style.pointerEvents = 'none'; // ÖNEMLİ: Tıklamalar arkaya geçsin
            overlayGorsel.style.zIndex = '100'; // Canvas'ın üstünde durmalı
            document.body.appendChild(overlayGorsel);
        }

        // Resim özelliklerini ayarla
        overlayGorsel.src = url;
        overlayGorsel.style.opacity = opacity;

        // Resmi Canvas'ın tam üzerine oturt (Konumlandırma)
        const rect = oyunCanvas.getBoundingClientRect();
        overlayGorsel.style.top = rect.top + 'px';
        overlayGorsel.style.left = rect.left + 'px';
        overlayGorsel.style.width = rect.width + 'px';
        overlayGorsel.style.height = rect.height + 'px';

        console.log("Ressam Modu: Resim başarıyla yansıtıldı.");
    }

    // --- 5. OLAY DİNLEYİCİLERİ (EVENT LISTENERS) ---

    // Butona tıklayınca çalışacak
    document.getElementById('btn-yukle').addEventListener('click', resmiYansit);

    // Opaklık slider'ı değişince anlık güncelle
    document.getElementById('opacity-slider').addEventListener('input', (e) => {
        if(overlayGorsel) {
            overlayGorsel.style.opacity = e.target.value;
        }
    });

    // Klavye kontrolleri (INSERT ile aç/kapa)
    document.addEventListener('keydown', function(e) {
        if (e.code === 'Insert') {
            const menu = document.getElementById('ressam-menu');
            menuAcik = !menuAcik;

            if (menuAcik) {
                menu.style.display = 'block';
            } else {
                menu.style.display = 'none';
            }
        }
    });

    // Pencere boyutu değişirse resim kaymasın diye güncelleme
    window.addEventListener('resize', () => {
        if(overlayGorsel) resmiYansit();
    });

})();