Gartic Phone Auto Draw

Adds a small GUI for auto-drawing in Gartic Phone, including image upload and drag & drop

目前為 2025-03-26 提交的版本,檢視 最新版本

您需要先安裝使用者腳本管理器擴展,如 TampermonkeyGreasemonkeyViolentmonkey 之後才能安裝該腳本。

You will need to install an extension such as Tampermonkey to install this script.

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyUserscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展,比如 Tampermonkey,才能安裝此腳本

您需要先安裝使用者腳本管理器擴充功能後才能安裝該腳本。

(我已經安裝了使用者腳本管理器,讓我安裝!)

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

(我已經安裝了使用者樣式管理器,讓我安裝!)

// ==UserScript==
// @name         Gartic Phone Auto Draw
// @namespace    https://greasyfork.org/en/users/fdslalkad
// @version      1.1
// @description  Adds a small GUI for auto-drawing in Gartic Phone, including image upload and drag & drop
// @author       fdslalkad
// @match        *://garticphone.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Create GUI
    let gui = document.createElement('div');
    gui.style.position = 'fixed';
    gui.style.top = '10px';
    gui.style.right = '10px';
    gui.style.background = 'rgba(0,0,0,0.8)';
    gui.style.color = 'white';
    gui.style.padding = '10px';
    gui.style.borderRadius = '5px';
    gui.style.zIndex = '10000';
    gui.innerHTML = `
        <button id="autoDrawBtn">Auto Draw</button>
        <br>
        <input type="file" id="uploadImage" accept="image/*"><br>
        <input type="text" id="imageUrl" placeholder="Image URL">
        <button id="loadImageBtn">Load Image</button>
    `;
    document.body.appendChild(gui);

    // Auto Draw Function (Simple Example)
    function autoDraw(image) {
        let canvas = document.querySelector('canvas');
        if (!canvas) {
            alert('Canvas not found!');
            return;
        }
        let ctx = canvas.getContext('2d');
        ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
    }

    // Handle Image Upload
    document.getElementById('uploadImage').addEventListener('change', function(event) {
        let file = event.target.files[0];
        if (file) {
            let img = new Image();
            img.onload = () => autoDraw(img);
            img.src = URL.createObjectURL(file);
        }
    });

    // Handle Image URL Input
    document.getElementById('loadImageBtn').addEventListener('click', function() {
        let url = document.getElementById('imageUrl').value;
        if (url) {
            let img = new Image();
            img.crossOrigin = 'Anonymous';
            img.onload = () => autoDraw(img);
            img.src = url;
        }
    });

    // Drag & Drop Image Support
    document.addEventListener('dragover', function(event) {
        event.preventDefault();
    });

    document.addEventListener('drop', function(event) {
        event.preventDefault();
        let file = event.dataTransfer.files[0];
        if (file) {
            let img = new Image();
            img.onload = () => autoDraw(img);
            img.src = URL.createObjectURL(file);
        }
    });

    // Button Click Event (for placeholder drawing)
    document.getElementById('autoDrawBtn').addEventListener('click', function() {
        let canvas = document.querySelector('canvas');
        if (!canvas) {
            alert('Canvas not found!');
            return;
        }
        let ctx = canvas.getContext('2d');
        ctx.beginPath();
        ctx.arc(100, 100, 50, 0, Math.PI * 2);
        ctx.stroke();
    });
})();