☰

Sticker Menu Drawaria

Use Stickers in Drawaria online!

  1. // ==UserScript==
  2. // @name         Sticker Menu Drawaria
  3. // @namespace    http://tampermonkey.net/
  4. // @version      2024-09-06
  5. // @description  Use Stickers in Drawaria online!
  6. // @author       YouTubeDrawaria
  7. // @match        https://drawaria.online/*
  8. // @icon         https://www.google.com/s2/favicons?sz=64&domain=drawaria.online
  9. // @grant        none
  10. // @license      MIT
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.  
  16.     // Array de URLs de los stickers
  17.     const stickers = [
  18.         "https://i.gifer.com/origin/f5/f5baef4b6b6677020ab8d091ef78a3bc_w200.webp",
  19.         "https://i.gifer.com/origin/95/952780ba778267ca60b2c8e94dece14b_w200.webp",
  20.         "https://i.gifer.com/origin/a5/a55b0d1e8dbb607c2a205b092ad18bc7_w200.webp",
  21.         "https://i.gifer.com/origin/60/600d072d11a7a433f8f5ec979bdd44f2_w200.webp",
  22.         "https://i.gifer.com/origin/3f/3fcf565ccc553afcfd89858c97304705_w200.webp",
  23.         "https://i.gifer.com/origin/22/22133af5b0f5dfa0021a84d4c886b42b_w200.webp",
  24.         "https://i.gifer.com/origin/f5/f5026f5ddbdfacfeab04e4d078175c15_w200.webp",
  25.         "https://i.gifer.com/origin/3b/3b2adebdeba786705de52d65b0896b3e_w200.webp"
  26.     ];
  27.  
  28.     // Crear el contenedor de stickers
  29.     const stickerMenu = document.createElement('div');
  30.     stickerMenu.style.position = 'fixed';
  31.     stickerMenu.style.top = '10px';
  32.     stickerMenu.style.left = '10px';
  33.     stickerMenu.style.backgroundColor = '#f0f0f0';
  34.     stickerMenu.style.padding = '10px';
  35.     stickerMenu.style.border = '2px solid #333';
  36.     stickerMenu.style.borderRadius = '8px';
  37.     stickerMenu.style.zIndex = '1000';
  38.     stickerMenu.style.display = 'flex';
  39.     stickerMenu.style.width = '400px';  // Ancho fijo para el contenedor
  40.     stickerMenu.style.height = 'auto';
  41.     stickerMenu.style.overflow = 'auto';  // Permitir desplazamiento si hay muchos stickers
  42.     stickerMenu.style.transition = 'transform 0.3s ease';
  43.     stickerMenu.style.transform = 'translateX(0)';  // Inicialmente visible
  44.  
  45.     // Crear botón para abrir y cerrar el menú
  46.     const toggleButton = document.createElement('button');
  47.     toggleButton.textContent = 'Stickers';
  48.     toggleButton.style.position = 'fixed';
  49.     toggleButton.style.top = '10px';
  50.     toggleButton.style.left = '10px';
  51.     toggleButton.style.padding = '5px 10px';
  52.     toggleButton.style.backgroundColor = '#333';
  53.     toggleButton.style.color = '#fff';
  54.     toggleButton.style.border = 'none';
  55.     toggleButton.style.borderRadius = '8px';
  56.     toggleButton.style.cursor = 'pointer';
  57.     toggleButton.style.zIndex = '1001';
  58.  
  59.     let menuVisible = true;
  60.  
  61.     toggleButton.addEventListener('click', () => {
  62.         if (menuVisible) {
  63.             stickerMenu.style.transform = 'translateX(-410px)';  // Ocultar el menú
  64.         } else {
  65.             stickerMenu.style.transform = 'translateX(0)';  // Mostrar el menú
  66.         }
  67.         menuVisible = !menuVisible;
  68.     });
  69.  
  70.     // Función para colocar el sticker en el canvas de Drawaria
  71.     function addStickerToCanvas(stickerUrl) {
  72.         const canvas = document.getElementById('canvas');
  73.         const ctx = canvas.getContext('2d');
  74.         const img = new Image();
  75.         img.src = stickerUrl;
  76.         img.onload = function() {
  77.             ctx.drawImage(img, 0, 0, canvas.width, canvas.height);  // Dibuja la imagen en el canvas
  78.         };
  79.     }
  80.  
  81.     // Añadir los stickers al menú
  82.     stickers.forEach(stickerUrl => {
  83.         const stickerImg = document.createElement('img');
  84.         stickerImg.src = stickerUrl;
  85.         stickerImg.style.width = '50px';
  86.         stickerImg.style.height = '50px';
  87.         stickerImg.style.marginRight = '5px';
  88.         stickerImg.style.cursor = 'pointer';
  89.  
  90.         // Añadir evento para colocar el sticker en el canvas
  91.         stickerImg.addEventListener('click', () => {
  92.             addStickerToCanvas(stickerImg.src);
  93.         });
  94.  
  95.         stickerMenu.appendChild(stickerImg);
  96.     });
  97.  
  98.     // Añadir el menú y el botón al documento
  99.     document.body.appendChild(stickerMenu);
  100.     document.body.appendChild(toggleButton);
  101.  
  102.     // Ajustar el tamaño del canvas
  103.     const canvas = document.getElementById('canvas');
  104.     if (canvas) {
  105.         canvas.height = 650;
  106.         canvas.width = 780;
  107.     }
  108. })();