☰

Greasy Fork is available in English.

Drawaria 3D Cube

3D rotating cube for drawaria.online

// ==UserScript==
// @name         Drawaria 3D Cube
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  3D rotating cube for drawaria.online
// @author       YouTubeDrawaria
// @match        https://drawaria.online/*
// @grant        none
// @icon         https://drawaria.online/avatar/cache/86e33830-86ea-11ec-8553-bff27824cf71.jpg
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    // Create cube container
    const cubeContainer = document.createElement('div');
    cubeContainer.style.position = 'fixed';
    cubeContainer.style.top = '20px';
    cubeContainer.style.right = '20px';
    cubeContainer.style.zIndex = '9999';
    cubeContainer.style.cursor = 'move'; // Change cursor to indicate draggable

    // Create cube element
    const cube = document.createElement('div');
    cube.className = 'cube';

    // Create cube faces
    const faces = ['front', 'back', 'right', 'left', 'top', 'bottom'];
    faces.forEach(face => {
        const faceDiv = document.createElement('div');
        faceDiv.className = face;
        cube.appendChild(faceDiv);
    });

    // Add elements to page
    cubeContainer.appendChild(cube);
    document.body.appendChild(cubeContainer);

    // Add styles
    const style = document.createElement('style');
    style.textContent = `
        .cube {
            width: 100px;
            height: 100px;
            position: relative;
            transform-style: preserve-3d;
            animation: rotate 5s infinite linear;
        }
        .cube div {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: rgba(0, 0, 0, 0.8);
            border: 1px solid #fff;
        }
        .front  { transform: translateZ(50px); }
        .back   { transform: rotateY(180deg) translateZ(50px); }
        .right  { transform: rotateY(90deg) translateZ(50px); }
        .left   { transform: rotateY(-90deg) translateZ(50px); }
        .top    { transform: rotateX(90deg) translateZ(50px); }
        .bottom { transform: rotateX(-90deg) translateZ(50px); }
        @keyframes rotate {
            0% { transform: rotateX(0deg) rotateY(0deg); }
            100% { transform: rotateX(360deg) rotateY(360deg); }
        }
    `;
    document.head.appendChild(style);

    // Add keyboard controls
    let rotationSpeed = 5;
    document.addEventListener('keydown', (event) => {
        if (event.key === 'ArrowUp') {
            rotationSpeed = Math.max(0.5, rotationSpeed - 0.5);
            cube.style.animationDuration = `${rotationSpeed}s`;
        } else if (event.key === 'ArrowDown') {
            rotationSpeed += 0.5;
            cube.style.animationDuration = `${rotationSpeed}s`;
        }
    });

    // Drag and drop functionality
    let isDragging = false;
    let offsetX, offsetY;

    cubeContainer.addEventListener('mousedown', (e) => {
        isDragging = true;
        offsetX = e.clientX - cubeContainer.getBoundingClientRect().left;
        offsetY = e.clientY - cubeContainer.getBoundingClientRect().top;
        cubeContainer.style.transition = 'none'; // Disable transition during drag
    });

    document.addEventListener('mousemove', (e) => {
        if (isDragging) {
            const x = e.clientX - offsetX;
            const y = e.clientY - offsetY;
            cubeContainer.style.left = `${x}px`;
            cubeContainer.style.top = `${y}px`;
        }
    });

    document.addEventListener('mouseup', () => {
        isDragging = false;
        cubeContainer.style.transition = ''; // Re-enable transition
    });
})();