☰

Drawaria Online: Custom Features with Image Upload Drawing

Add custom features to Drawaria Online for educational purposes

目前為 2025-01-26 提交的版本，檢視 最新版本。

// ==UserScript==
// @name         Drawaria Online: Custom Features with Image Upload Drawing
// @namespace    http://tampermonkey.net/
// @version      1.3
// @description  Add custom features to Drawaria Online for educational purposes
// @author       You
// @license      MIT
// @match        https://drawaria.online/*
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    // Function to embed a YouTube video
    function addYouTubeVideo(url) {
        const iframe = document.createElement('iframe');
        iframe.src = url;
        iframe.width = '560';
        iframe.height = '315';
        iframe.frameBorder = '0';
        iframe.allow = 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture';
        iframe.allowFullscreen = true;
        iframe.style.position = 'fixed';
        iframe.style.bottom = '20px';
        iframe.style.right = '20px';
        document.body.appendChild(iframe);
    }

    // Replace with your preferred YouTube video URL
    addYouTubeVideo('https://www.youtube.com/embed/your-video-id'); // Replace 'your-video-id' with your YouTube video ID

    // Virtual player: Creates a random drawing avatar that mimics a player
    function createVirtualPlayer() {
        const player = document.createElement('div');
        player.style.width = '50px';
        player.style.height = '50px';
        player.style.backgroundColor = '#00f';
        player.style.position = 'absolute';
        player.style.left = `${Math.random() * window.innerWidth}px`;
        player.style.top = `${Math.random() * window.innerHeight}px`;
        player.style.borderRadius = '50%';
        player.style.zIndex = '1000';
        document.body.appendChild(player);
        
        // Move player around randomly (simulates drawing or movement)
        setInterval(() => {
            player.style.left = `${Math.random() * window.innerWidth}px`;
            player.style.top = `${Math.random() * window.innerHeight}px`;
        }, 1000);
    }

    createVirtualPlayer();

    // Message bubble: Simple message bubble to display text
    function createMessageBubble(message) {
        const bubble = document.createElement('div');
        bubble.style.position = 'absolute';
        bubble.style.top = `${Math.random() * (window.innerHeight - 100) + 50}px`;  // Ensures bubble stays within viewable area
        bubble.style.left = `${Math.random() * (window.innerWidth - 200) + 50}px`; // Ensures bubble stays within viewable area
        bubble.style.padding = '10px';
        bubble.style.backgroundColor = '#f1f1f1';
        bubble.style.border = '1px solid #ccc';
        bubble.style.borderRadius = '12px';
        bubble.style.maxWidth = '200px';
        bubble.style.zIndex = '999'; // Lower z-index to stay behind UI elements like menu
        bubble.style.fontSize = '14px';
        bubble.textContent = message;

        document.body.appendChild(bubble);
        
        // Auto-remove bubble after 5 seconds
        setTimeout(() => {
            bubble.remove();
        }, 5000);
    }

    // Create a random message bubble
    setInterval(() => {
        const messages = ['Hello!', 'Watch out!', 'Nice drawing!', 'Good job!', 'Keep going!'];
        const randomMessage = messages[Math.floor(Math.random() * messages.length)];
        createMessageBubble(randomMessage);
    }, 3000);

    // Draw with Image: Upload an image and overlay it on the canvas to draw
    function addImageToCanvas() {
        // Create an input for file upload
        const input = document.createElement('input');
        input.type = 'file';
        input.accept = 'image/*';
        input.style.position = 'fixed';
        input.style.top = '10px';
        input.style.right = '10px';
        input.style.zIndex = '1000';
        document.body.appendChild(input);

        // Handle file upload
        input.addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (!file) return;
            const reader = new FileReader();
            reader.onload = function() {
                const img = new Image();
                img.src = reader.result;

                // Draw the image on the canvas when loaded
                img.onload = function() {
                    const canvas = document.querySelector('canvas'); // Assume the canvas element is the main drawing canvas
                    if (!canvas) return;
                    
                    const ctx = canvas.getContext('2d');
                    ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas before drawing
                    ctx.drawImage(img, 0, 0, canvas.width, canvas.height); // Draw the image on the canvas
                };
            };
            reader.readAsDataURL(file);
        });
    }

    addImageToCanvas();

})();