☰

TC Drag the Clock

description

  1. // ==UserScript==
  2. // @name         TC Drag the Clock
  3. // @namespace    namespace
  4. // @version      0.2
  5. // @description  description
  6. // @license      MIT
  7. // @author       tos
  8. // @match       *.torn.com/*
  9. // @grant        GM_addStyle
  10. // ==/UserScript==
  11.  
  12. GM_addStyle(`
  13. .clock {
  14.   background-color: #fffb;
  15.   cursor: pointer;
  16.   padding: 0.5em;
  17.   position: absolute;
  18.   user-select: none;
  19.   z-index: 9999;
  20. }
  21. .clock.selected {
  22.   background-color: #9995;
  23. }
  24. `)
  25.  
  26. let s = {}
  27.  
  28. document.addEventListener('mousedown', mouseDown)
  29.  
  30. async function mouseDown(e) {
  31.   if (!e.target.parentElement?.className?.includes('date')) return
  32.   e.target.classList.add('clock','selected')
  33.   s = {
  34.     clientX: e.clientX,
  35.     clientY: e.clientY,
  36.     offsetLeft: e.target.offsetLeft,
  37.     offsetTop: e.target.offsetTop
  38.   }
  39.   document.addEventListener('mousemove', mouseMove)
  40.   document.addEventListener('mouseup', mouseUp)
  41. }
  42.  
  43. async function mouseMove(e) {
  44.   e.preventDefault()
  45.   const clock = document.querySelector('.clock')
  46.   clock.style.left = `${s.offsetLeft - (s.clientX - e.clientX)}px`
  47.   clock.style.top = `${s.offsetTop - (s.clientY - e.clientY)}px`
  48. }
  49.  
  50. async function mouseUp(e) {
  51.   document.querySelector('.clock').classList.remove('selected')
  52.   document.removeEventListener('mousemove', mouseMove)
  53.   document.removeEventListener('mouseup', mouseUp)
  54. }