Dod DrawIt mod

Εμφανίζει παλέτα με όλα τα χρώματα για τη ζωγραφική. Ενεργοποίηση/Απενεργοποίηση πατώντας τη περισπωμένη (~). Καθώς ζωγραφίζεις πάτα τους αριθμούς 1-4 για να αλλάξει μεγεθος το μολύβι.
目前為 2020-02-23 提交的版本，檢視最新版本。
安裝腳本 ?
發表問題、評論、或檢舉該腳本。
換行
// ==UserScript==
// @name     Dod DrawIt mod
// @description Εμφανίζει παλέτα με όλα τα χρώματα για τη ζωγραφική. Ενεργοποίηση/Απενεργοποίηση πατώντας τη περισπωμένη (~). Καθώς ζωγραφίζεις πάτα τους αριθμούς 1-4 για να αλλάξει μεγεθος το μολύβι.
// @match    https://www.dod.gr/*
// @match    https://apps.facebook.com/dodcommunity/*
// @version  1
// @grant    unsafeWindow
// @grant    GM_addStyle
// @grant    GM_getResourceText
// @require  https://cdn.jsdelivr.net/gh/taufik-nurrohman/color-picker/color-picker.min.js
// @resource  colorpickerCSS https://cdn.jsdelivr.net/gh/taufik-nurrohman/color-picker/color-picker.min.css
// @namespace https://greasyfork.org/users/448863
// ==/UserScript==



window.addEventListener('load', function(event){
    console.log('Dod DrawIt Mods');
    GM_addStyle(GM_getResourceText("colorpickerCSS"));
    unsafeWindow.$("head").append(`<style type="text/css">
.color-view {
display: block;
overflow: hidden;
width: 100%;
height: 50px;
border-radius: 0px 0px 10px 10px;
}
#colorpicker-container {
position: absolute;
z-index: 9;
text-align: center;
z-index: 3000;
}
#colorpicker-header {
padding: 10px;
cursor: move;
z-index: 10;
background-color: #3C3F4282;
color: #fff;
height: 30px;
border-radius: 10px 10px 0 0;
font-size: 10px;
}
.color-picker {
border-radius: 10px;
font-size: 20px;
}
</style>`);

    document.addEventListener('keypress', function(e){
        //console.log("pressed " + e.code);
        let game = unsafeWindow.Engine.MANAGERS.loadManager.getLoadQueueApplicationByName('drawit').instance;
        if(e.code === "Backquote"){
            console.log("toggling color picker");
            let container = document.getElementById("colorpicker-container");
            if(container != null) {container.remove(); return;}
            unsafeWindow.$('#engineMain').append(`<div id="colorpicker-container"></div>`);
            container = document.getElementById("colorpicker-container");
            console.log(container);
            let picker = new CP(container, false, container);
            picker.self.classList.add('static');
            picker.enter();

            let preview = document.createElement('span');
            preview.className = 'color-view';
            picker.self.appendChild(preview);
            picker.on("change", function(color) {
                preview.style.backgroundColor = '#' + color;
            });

            let header = document.createElement('span');
            header.className = 'color-view';
            header.id = "colorpicker-header";
            header.innerHTML = "Color Picker";
            dragElement(container, header);
            picker.self.insertBefore(header, picker.self.firstChild);

            picker.on("stop", function(color) {
                console.log("#" + color);
                if(!game.youAreTheArtist) return;
                let rgbArr = CP.HEX2RGB(color);
                for(let i = 0; i < 3; ++i) {
                    rgbArr[i] = parseInt(rgbArr[i]).toString(16);
                    if (rgbArr[i].length == 1) rgbArr[i] = '0' + rgbArr[i];
                }
                game.setColor(parseInt(rgbArr.join(''), 16));
            });
        } else if(!isNaN(e.key) && e.key <= 4 && game.youAreTheArtist){
            game.setSize(e.key);
        }
    });

    function dragElement(elmnt,header) {
        var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
        header.onmousedown = dragMouseDown;

        function dragMouseDown(e) {
            e = e || window.event;
            e.preventDefault();
            pos3 = e.clientX;
            pos4 = e.clientY;
            document.onmouseup = closeDragElement;
            document.onmousemove = elementDrag;
        }

        function elementDrag(e) {
            e = e || window.event;
            e.preventDefault();
            pos1 = pos3 - e.clientX;
            pos2 = pos4 - e.clientY;
            pos3 = e.clientX;
            pos4 = e.clientY;
            elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
            elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
        }

        function closeDragElement() {
            document.onmouseup = null;
            document.onmousemove = null;
        }
    }
});