☰

Dod DrawIt mod

Εμφανίζει παλέτα με όλα τα χρώματα για τη ζωγραφική. Ενεργοποίηση/Απενεργοποίηση πατώντας τη περισπωμένη (~). Καθώς ζωγραφίζεις πάτα τους αριθμούς 1-4 για να αλλάξει μέγεθος το μολύβι.

  1. // ==UserScript==
  2. // @name     Dod DrawIt mod
  3. // @version  2.4
  4. // @description Εμφανίζει παλέτα με όλα τα χρώματα για τη ζωγραφική. Ενεργοποίηση/Απενεργοποίηση πατώντας τη περισπωμένη (~). Καθώς ζωγραφίζεις πάτα τους αριθμούς 1-4 για να αλλάξει μέγεθος το μολύβι.
  5. // @match    https://www.dod.gr/*
  6. // @match    https://apps.facebook.com/dodcommunity/*
  7. // @grant    unsafeWindow
  8. // @grant    GM_addStyle
  9. // @grant    GM_getResourceText
  10. // @grant    GM_getResourceURL
  11. // @require  https://cdn.jsdelivr.net/gh/taufik-nurrohman/color-picker@73789b1469dcaa0ffb8b42c02c37f354b71a9546/color-picker.min.js
  12. // @resource  colorpickerCSS https://cdn.jsdelivr.net/gh/taufik-nurrohman/color-picker@73789b1469dcaa0ffb8b42c02c37f354b71a9546/color-picker.min.css
  13. // @resource  paletteImg https://i.postimg.cc/5ynWxzGK/palette.png
  14. // @namespace https://greatest.deepsurf.us/users/448863
  15. // ==/UserScript==
  16.  
  17.  
  18. window.addEventListener('load', function(event){
  19.     console.log('Dod DrawIt Mods');
  20.     GM_addStyle(GM_getResourceText("colorpickerCSS"));
  21.     unsafeWindow.$("head").append(`<style type="text/css">
  22. .color-view {
  23. display: block;
  24. overflow: hidden;
  25. width: 100%;
  26. height: 50px;
  27. border-radius: 0px 0px 10px 10px;
  28. }
  29. #colorpicker-container {
  30. position: absolute;
  31. z-index: 9;
  32. text-align: center;
  33. z-index: 10000;
  34. }
  35. #colorpicker-header {
  36. padding: 10px;
  37. cursor: move;
  38. z-index: 10;
  39. background-color: #3C3F4282;
  40. color: #fff;
  41. height: 30px;
  42. border-radius: 10px 10px 0 0;
  43. font-size: 10px;
  44. }
  45. .color-picker {
  46. border-radius: 10px;
  47. font-size: 20px;
  48. }
  49. .color-picker-h{
  50. background-image: linear-gradient(to bottom,white 0%, black 100%);
  51. }
  52. .color-picker-sv{
  53. width: 400px;
  54. height: 200px;
  55. background-image: url("${GM_getResourceURL('paletteImg')}");
  56. }</style>`);
  57.  
  58.     document.addEventListener('keypress', function(e){
  59.         if(e.code === "Backquote"){
  60.             let game = unsafeWindow.Engine.MANAGERS.loadManager.getLoadQueueApplicationByName('drawit');
  61.             if (game == null) return; game = game.instance;
  62.             console.log("toggling color picker");
  63.             let container = document.getElementById("colorpicker-container");
  64.             if(container != null) {container.remove(); return;}
  65.             unsafeWindow.$('#engineMain').append(`<div id="colorpicker-container"></div>`);
  66.             container = document.getElementById("colorpicker-container");
  67.             let picker = new CP(container, false, container);
  68.             picker.self.classList.add('static');
  69.             picker.enter();
  70.  
  71.             let preview = document.createElement('span');
  72.             preview.className = 'color-view';
  73.             picker.self.appendChild(preview);
  74.             let header = document.createElement('span');
  75.             header.className = 'color-view';
  76.             header.id = "colorpicker-header";
  77.             header.innerHTML = "Color Picker";
  78.             dragElement(container, header);
  79.             picker.self.insertBefore(header, picker.self.firstChild);
  80.  
  81.             let canvas = document.createElement("canvas"); canvas.width = 400; canvas.height = 200;
  82.             let ctx = canvas.getContext("2d");
  83.             let img = document.createElement("img");
  84.             let leftPanel = document.getElementsByClassName("color-picker-sv")[0];
  85.             let rightPanel = document.getElementsByClassName("color-picker-h")[0];
  86.             let imgData = window.getComputedStyle(leftPanel).getPropertyValue("background-image");
  87.             img.onload = () => ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
  88.             img.src = imgData.substring(5, imgData.length-2);
  89.  
  90.             picker.on("change:sv", function() {
  91.                 let rgbArr = getPixelColor();
  92.                 preview.style.backgroundColor = "rgb(" + rgbArr[0] + "," + rgbArr[1] + "," + rgbArr[2] + ")";
  93.             });
  94.             picker.on("stop:sv", function() {
  95.                 if(!game.youAreTheArtist) return;
  96.                 let rgbArr = getPixelColor();
  97.                 setGameColor(rgbArr);
  98.             });
  99.  
  100.             picker.on("change:h", function() {
  101.                 let r = rightPanel.getBoundingClientRect();
  102.                 let brightness = clamp(Math.floor(255*(1 - (unsafeWindow.event.clientY - r.top)/r.height)), 0, 255);
  103.                 preview.style.backgroundColor = "rgb(" + brightness + "," + brightness + "," + brightness + ")";
  104.             });
  105.             picker.on("stop:h", function() {
  106.                 if(!game.youAreTheArtist) return;
  107.                 let r = rightPanel.getBoundingClientRect();
  108.                 let brightness = clamp(Math.floor(255*(1 - (unsafeWindow.event.clientY - r.top)/r.height)), 0, 255);
  109.                 setGameColor([brightness,brightness,brightness]);
  110.             });
  111.  
  112.             function getPixelColor(){
  113.                 let r = leftPanel.getBoundingClientRect();
  114.                 let x = clamp(canvas.width*(unsafeWindow.event.clientX - r.left)/r.width, 0, canvas.width - 1);
  115.                 let y = clamp(canvas.height*(unsafeWindow.event.clientY - r.top)/r.height, 0, canvas.height - 1);
  116.                 let rgba = ctx.getImageData(x, y, 1, 1).data;
  117.                 return [(rgba[0]<16?16:rgba[0]), rgba[1], rgba[2]];
  118.             }
  119.  
  120.             function setGameColor(rgbArr){
  121.                 let colorValue = (rgbArr[0] << 16) + (rgbArr[1] << 8) + rgbArr[2];
  122.                 let colorStringPadded = colorValue.toString().padStart(6,'0');
  123.                 game.setColor(colorStringPadded);
  124.                 unsafeWindow.$('#molivaki>#pencil>').removeClass().addClass('pencil_default_mauro');
  125.             }
  126.  
  127.             function clamp(val, min, max) {
  128.                 return val > max ? max : val < min ? min : val;
  129.             }
  130.  
  131.         } else if(!isNaN(e.key) && e.key <= 4){
  132.             let game = unsafeWindow.Engine.MANAGERS.loadManager.getLoadQueueApplicationByName('drawit');
  133.             if (game == null || !game.instance.youAreTheArtist) return;
  134.             game.instance.setSize(e.key);
  135.         }
  136.     });
  137.  
  138.     function dragElement(elmnt,header) {
  139.         var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  140.         header.onmousedown = dragMouseDown;
  141.  
  142.         function dragMouseDown(e) {
  143.             e = e || window.event;
  144.             e.preventDefault();
  145.             pos3 = e.clientX;
  146.             pos4 = e.clientY;
  147.             document.onmouseup = closeDragElement;
  148.             document.onmousemove = elementDrag;
  149.         }
  150.  
  151.         function elementDrag(e) {
  152.             e = e || window.event;
  153.             e.preventDefault();
  154.             pos1 = pos3 - e.clientX;
  155.             pos2 = pos4 - e.clientY;
  156.             pos3 = e.clientX;
  157.             pos4 = e.clientY;
  158.             elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
  159.             elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  160.         }
  161.  
  162.         function closeDragElement() {
  163.             document.onmouseup = null;
  164.             document.onmousemove = null;
  165.         }
  166.     }
  167. });