☰

Gartic Phone Shortcuts

3/25/2021, 9:17:44 PM

// ==UserScript==
// @name        Gartic Phone Shortcuts
// @namespace   Violentmonkey Scripts
// @match       https://garticphone.com/*
// @grant       none
// @version     1.1
// @author      Rundik
// @description 3/25/2021, 9:17:44 PM
// ==/UserScript==


// space, z, x, c, a, s, d, w = Tools
// 1-9, Shift + 1-8 = Colors
// Shift + space, Shift + z, Shift + x, Shift + c, Shift + a = Thiknesses
// p = insert an image overlay  
  

window.onload = () => {
  history.pushState = ( f => function pushState(){
    const ret = f.apply(this, arguments);
    window.dispatchEvent(new Event('pushstate'));
    window.dispatchEvent(new Event('locationchange'));
    return ret;
  })(history.pushState);

  history.replaceState = ( f => function replaceState(){
      const ret = f.apply(this, arguments);
      window.dispatchEvent(new Event('replacestate'));
      window.dispatchEvent(new Event('locationchange'));
      return ret;
  })(history.replaceState);

  window.addEventListener('popstate',()=>{
      window.dispatchEvent(new Event('locationchange'))
  });

  window.addEventListener('locationchange', () => {
    console.log(location.pathname);
    if (location.pathname === "/draw") {
      window.ondrawpage = true;
      setTimeout(initKeybinds, 1000);
      document.removeEventListener("keyup", keyupEvent);
      document.addEventListener("keyup", keyupEvent);
    } else {
      window.ondrawpage = false;
    }
  });
};

const initKeybinds = () => {
  window.keybinds = [
    // Tools
    { key: 32, el: document.querySelector(".tools .pen") },
    { key: 90, el: document.querySelector(".tools .ers") },
    { key: 88, el: document.querySelector(".tools .reb") },
    { key: 67, el: document.querySelector(".tools .ellb") },
    { key: 65, el: document.querySelector(".tools .rec") },
    { key: 83, el: document.querySelector(".tools .ell") },
    { key: 68, el: document.querySelector(".tools .lin") },
    { key: 87, el: document.querySelector(".tools .fil") },
    // Colors
    { key: 49, el: document.querySelectorAll(".color")[0] },
    { key: 50, el: document.querySelectorAll(".color")[1] },
    { key: 51, el: document.querySelectorAll(".color")[2] },
    { key: 52, el: document.querySelectorAll(".color")[3] },
    { key: 53, el: document.querySelectorAll(".color")[4] },
    { key: 54, el: document.querySelectorAll(".color")[5] },
    { key: 55, el: document.querySelectorAll(".color")[6] },
    { key: 56, el: document.querySelectorAll(".color")[7] },
    { key: 57, el: document.querySelectorAll(".color")[8] },
    { key: 48, el: document.querySelectorAll(".color")[9] },
    { key: 49, el: document.querySelectorAll(".color")[10], shift: true },
    { key: 50, el: document.querySelectorAll(".color")[11], shift: true },
    { key: 51, el: document.querySelectorAll(".color")[12], shift: true },
    { key: 52, el: document.querySelectorAll(".color")[13], shift: true },
    { key: 53, el: document.querySelectorAll(".color")[14], shift: true },
    { key: 54, el: document.querySelectorAll(".color")[15], shift: true },
    { key: 55, el: document.querySelectorAll(".color")[16], shift: true },
    { key: 56, el: document.querySelectorAll(".color")[17], shift: true },
    // Thikness
    { key: 32, el: document.querySelectorAll(".thickness")[0], shift: true },
    { key: 90, el: document.querySelectorAll(".thickness")[1], shift: true },
    { key: 88, el: document.querySelectorAll(".thickness")[2], shift: true },
    { key: 67, el: document.querySelectorAll(".thickness")[3], shift: true },
    { key: 65, el: document.querySelectorAll(".thickness")[4], shift: true },
    // Insert image
    { key: 80, func: () => {
      const src = prompt("Image URL:");
      const canvas = document.querySelector(".drawingContainer canvas");
      const context = canvas.getContext('2d');
      const img = new Image();
      img.onload = function() {
        context.drawImage(this, 0, 0, canvas.width, canvas.height);
      }
      img.src = src;
    }}
  ];
}

const keyupEvent = function(e) {
  keybinds.every(k => {
    if (!e.ctrlKey && window.ondrawpage && ((!k.shift && !e.shiftKey && e.which === k.key) || (k.shift && e.which === k.key && e.shiftKey))) {
      if (k.func) {
        k.func()
      } else {
        k.el.click();
      }
      return false;
    }
    return true;
  });
}