☰

Gartic.io Pro Drawing Assist (Sparkle UI + Grid + Guides + DnD)

Reference overlay + grid + shape guides + color helper for Gartic.io. URL/file/drag-n-drop, drag/scale/rotate/opacity/lock/reset/clear, glittery UI, and hotkeys.

// ==UserScript==
// @name         Gartic.io Pro Drawing Assist (Sparkle UI + Grid + Guides + DnD)
// @namespace    http://tampermonkey.net/
// @version      5.0
// @description  Reference overlay + grid + shape guides + color helper for Gartic.io. URL/file/drag-n-drop, drag/scale/rotate/opacity/lock/reset/clear, glittery UI, and hotkeys.
// @match        *://gartic.io/*
// @grant        none
// ==/UserScript==

(function () {
  'use strict';

  // ---------- Styles ----------
  const css = `
  :root {
    --da-bg: rgba(18,18,30,.96);
    --da-panel-w: 280px;
    --da-accent1:#ff6eb4;
    --da-accent2:#ff9bd3;
    --da-text:#fff;
  }
  #da-panel, #da-color {
    position: fixed; top: 20px; left: 20px; z-index: 999999; width: var(--da-panel-w);
    background: var(--da-bg); color: var(--da-text); border-radius: 14px; padding: 12px;
    box-shadow: 0 10px 30px rgba(255, 150, 200, 0.35); font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    user-select: none; overflow: hidden;
  }
  #da-color { top: 20px; left: calc(20px + var(--da-panel-w) + 12px); }
  /* Sparkles only inside panels */
  #da-panel::before, #da-color::before{
    content: ""; position: absolute; inset: -50% -50%;
    background:
      radial-gradient(2px 2px at 20% 30%, #ffffffcc, transparent 40%),
      radial-gradient(2px 2px at 80% 70%, #ff69b4cc, transparent 40%),
      radial-gradient(2px 2px at 50% 50%, #ffd700cc, transparent 40%);
    animation: da-spark 4s linear infinite; pointer-events: none;
  }
  @keyframes da-spark { from{transform:translate(0,0)} to{transform:translate(-35%,-35%)} }
  h3{margin:0 0 8px 0; text-align:center; font-size:16px; color:#ffd1e9}
  .da-row{margin-top:8px}
  input[type="text"], input[type="file"], input[type="number"]{
    width:100%; background:#1f1f2b; color:#fff; border:1px solid #3a3a4d; border-radius:8px; padding:6px 8px; font-size:13px; box-sizing:border-box; outline:none;
  }
  input[type="text"]:focus{ border-color:#ff7abf; box-shadow:0 0 0 3px rgba(255,122,191,.2) }
  .da-label{font-size:12px;opacity:.9;display:flex;justify-content:space-between}
  input[type="range"]{ -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:999px; background:linear-gradient(90deg,#ff7abf,#ffd1e9); outline:none; margin-top:4px}
  input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none; width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid #ff7abf; box-shadow:0 0 10px rgba(255,122,191,.7); cursor:pointer}
  .da-flex{display:flex; gap:8px}
  .da-col{flex:1}
  .da-btn{
    width:100%; padding:9px 10px; border:none; border-radius:10px; font-weight:700; font-size:14px; color:#fff; cursor:pointer; margin-top:8px;
    background:linear-gradient(120deg,var(--da-accent1),var(--da-accent2),var(--da-accent1)); background-size:220% 220%;
    box-shadow:0 8px 20px rgba(255,110,180,.35); transition:transform .15s ease, box-shadow .2s ease, opacity .2s ease; position:relative; overflow:hidden;
  }
  .da-btn:hover{ transform:translateY(-1px); box-shadow:0 12px 26px rgba(255,110,180,.5) }
  .da-btn::after{ content:""; position:absolute; top:0; left:-150%; width:120%; height:100%;
    background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.35) 50%,transparent 100%); transform:skewX(-20deg); animation:da-glitter 3s linear infinite}
  @keyframes da-glitter { 0%{left:-150%} 60%{left:110%} 100%{left:110%} }
  .gray{ background-image:linear-gradient(120deg,#607d8b,#8aa2ad,#607d8b) }
  .warn{ background-image:linear-gradient(120deg,#ff9800,#ffc36a,#ff9800) }
  .danger{ background-image:linear-gradient(120deg,#e53935,#ff6b66,#e53935) }
  #da-show{
    position:fixed; top:20px; left:20px; z-index:1000000; display:none; padding:8px 12px; border-radius:10px; border:none; font-weight:800; color:#fff; cursor:pointer;
    background:linear-gradient(120deg,#2196f3,#64b5f6,#2196f3); background-size:220% 220%; box-shadow:0 8px 20px rgba(33,150,243,.35)
  }
  #da-overlay{
    position:absolute; top:100px; left:100px; width:380px; height:auto; opacity:.7; transform-origin:center center; pointer-events:auto; z-index:999998;
    user-select:none; -webkit-user-drag:none; cursor:grab;
  }
  /* Grid canvas overlay (over content, not blocking clicks) */
  #da-grid{
    position:fixed; inset:0; pointer-events:none; z-index:999997; opacity:.4; display:none;
  }
  /* Guides */
  .da-guide{ position:absolute; border:2px dashed rgba(255,206,230,.9); z-index:999999; cursor:move; box-shadow:0 0 10px rgba(255,110,180,.35) inset }
  .da-circle{ border-radius:50% }
  .da-handle{ position:absolute; width:10px;height:10px;background:#ffd1e9;border:2px solid #ff7abf;border-radius:50%; z-index:9999999; cursor:nwse-resize }
  .da-handle.br{ right:-7px; bottom:-7px }
  .da-handle.tl{ left:-7px; top:-7px }
  /* Color panel */
  #da-color .swatch{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px }
  #da-color .swatch button{ width:22px;height:22px;border-radius:6px;border:none;cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.25) }
  #da-color .mini{ display:flex; gap:8px; margin-top:8px }
  #da-color input[type="color"]{ width:100%; height:40px; border:none; border-radius:8px; padding:0 }
  #da-copy{ margin-top:8px }
  .da-help{ font-size:11px; opacity:.85; margin-top:8px; line-height:1.35 }
  `;
  const style = document.createElement('style');
  style.textContent = css;
  document.head.appendChild(style);

  // ---------- Main Panel ----------
  const panel = document.createElement('div');
  panel.id = 'da-panel';
  panel.innerHTML = `
    <h3>✨ Drawing Assist</h3>
    <div class="da-row"><input type="text" id="da-url" placeholder="Paste image URL & press Enter"></div>
    <div class="da-row"><input type="file" id="da-file" accept="image/*"></div>
    <div class="da-row"><div class="da-label"><span>Opacity</span><span id="da-op-val">0.70</span></div>
      <input type="range" id="da-op" min="0" max="1" step="0.01" value="0.70"></div>
    <div class="da-row"><div class="da-label"><span>Scale</span><span id="da-sc-val">1.00×</span></div>
      <input type="range" id="da-sc" min="0.10" max="3.00" step="0.05" value="1.00"></div>
    <div class="da-row"><div class="da-label"><span>Rotate</span><span id="da-rt-val">0°</span></div>
      <input type="range" id="da-rt" min="0" max="360" step="1" value="0"></div>
    <div class="da-row"><label style="font-size:12px; display:flex; align-items:center; gap:8px;">
      <input type="checkbox" id="da-lock"> Lock image position</label></div>
    <div class="da-flex">
      <button class="da-btn gray" id="da-grid-toggle">Grid: Off</button>
      <button class="da-btn gray" id="da-grid-settings">⚙</button>
    </div>
    <div class="da-flex">
      <button class="da-btn" id="da-circle-toggle">Circle Guide</button>
      <button class="da-btn" id="da-rect-toggle">Rect Guide</button>
    </div>
    <button class="da-btn danger" id="da-clear">Clear Image</button>
    <button class="da-btn warn"   id="da-reset">Reset Transform/Pos</button>
    <button class="da-btn gray"   id="da-hide">Hide UI</button>
    <div class="da-help">
      <b>Hotkeys:</b> H (UI), G (grid), C (circle), V (rect), Arrows (move), +/- (scale), , . (rotate), [ ] (opacity), R (reset), Del (clear). Shift = bigger steps. Drag & drop an image onto the page to load it.
    </div>
  `;
  document.body.appendChild(panel);

  // ---------- Color Helper Panel ----------
  const colorPanel = document.createElement('div');
  colorPanel.id = 'da-color';
  colorPanel.innerHTML = `
    <h3>🎨 Color Helper</h3>
    <div class="mini">
      <input type="color" id="da-color-input" value="#ff6eb4">
      <input type="text" id="da-color-hex" value="#ff6eb4">
    </div>
    <div class="swatch" id="da-swatch"></div>
    <button class="da-btn" id="da-copy">Copy HEX</button>
    <div class="da-help">Tip: pick here, then click game color closest to this value.</div>
  `;
  document.body.appendChild(colorPanel);

  // ---------- Floating Show Button ----------
  const showBtn = document.createElement('button');
  showBtn.id = 'da-show';
  showBtn.textContent = 'Show UI';
  document.body.appendChild(showBtn);

  // ---------- Overlay Image ----------
  const overlay = document.createElement('img');
  overlay.id = 'da-overlay';
  overlay.alt = '';
  document.body.appendChild(overlay);

  // ---------- Grid Canvas ----------
  const grid = document.createElement('canvas');
  grid.id = 'da-grid';
  document.body.appendChild(grid);

  // ---------- Guides (rectangle & circle) ----------
  function createGuide(className, defaultW=150, defaultH=150){
    const g = document.createElement('div');
    g.className = `da-guide ${className}`;
    g.style.left = '120px'; g.style.top = '120px';
    g.style.width = `${defaultW}px`; g.style.height = `${defaultH}px`;
    const tl = document.createElement('div'); tl.className='da-handle tl';
    const br = document.createElement('div'); br.className='da-handle br';
    g.appendChild(tl); g.appendChild(br);
    document.body.appendChild(g);

    // drag
    let dragging=false, offX=0, offY=0;
    g.addEventListener('mousedown', (e)=>{
      if (e.target.classList.contains('da-handle')) return;
      dragging=true;
      const r=g.getBoundingClientRect();
      offX=e.clientX - r.left; offY=e.clientY - r.top;
      e.preventDefault();
    });
    document.addEventListener('mousemove', (e)=>{
      if(!dragging) return;
      g.style.left = `${e.clientX - offX + window.scrollX}px`;
      g.style.top  = `${e.clientY - offY + window.scrollY}px`;
    });
    document.addEventListener('mouseup', ()=> dragging=false);

    // resize (tl & br)
    let resizing=null, startX=0, startY=0, startW=0, startH=0, startL=0, startT=0;
    function startResize(which,e){
      resizing=which;
      const r=g.getBoundingClientRect();
      startX=e.clientX; startY=e.clientY;
      startW=r.width; startH=r.height; startL=r.left + window.scrollX; startT=r.top + window.scrollY;
      e.preventDefault();
      e.stopPropagation();
    }
    tl.addEventListener('mousedown', e=> startResize('tl',e));
    br.addEventListener('mousedown', e=> startResize('br',e));
    document.addEventListener('mousemove', (e)=>{
      if(!resizing) return;
      if(resizing==='br'){
        const w=Math.max(20, startW + (e.clientX - startX));
        const h=Math.max(20, startH + (e.clientY - startY));
        g.style.width = `${w}px`; g.style.height = `${h}px`;
      }else{
        const dx = e.clientX - startX, dy = e.clientY - startY;
        const w=Math.max(20, startW - dx);
        const h=Math.max(20, startH - dy);
        g.style.width = `${w}px`; g.style.height = `${h}px`;
        g.style.left = `${startL + dx}px`; g.style.top = `${startT + dy}px`;
      }
    });
    document.addEventListener('mouseup', ()=> resizing=null);

    g.style.display = 'none';
    return g;
  }
  const circleGuide = createGuide('da-circle', 160,160);
  const rectGuide   = createGuide('da-rect', 200,120);

  // ---------- State ----------
  let scale = 1, rotation = 0, locked = false;
  const qs = s => document.querySelector(s);
  const urlInput = qs('#da-url'), fileInput = qs('#da-file');
  const opRange = qs('#da-op'), scRange = qs('#da-sc'), rtRange = qs('#da-rt');
  const opVal = qs('#da-op-val'), scVal = qs('#da-sc-val'), rtVal = qs('#da-rt-val');
  const clearBtn = qs('#da-clear'), resetBtn = qs('#da-reset'), hideBtn = qs('#da-hide');
  const lockChk = qs('#da-lock');
  const gridToggle = qs('#da-grid-toggle'), gridSettings = qs('#da-grid-settings');

  function applyTransform(){ overlay.style.transform = `scale(${scale}) rotate(${rotation}deg)`; }
  function clamp(n,min,max){ return Math.max(min, Math.min(max, n)); }
  function typing(el){ if(!el) return false; const t=(el.tagName||'').toLowerCase(); const type=(el.type||'').toLowerCase(); return t==='input'||t==='textarea'||el.isContentEditable||type==='text'||type==='search'; }

  // ---------- Overlay loading ----------
  urlInput.addEventListener('keydown', e=>{ if(e.key==='Enter'){ overlay.src = urlInput.value.trim(); }});
  fileInput.addEventListener('change', e=>{
    const f=e.target.files?.[0]; if(!f) return;
    const rd=new FileReader(); rd.onload = ev => overlay.src = ev.target.result; rd.readAsDataURL(f);
  });
  // Drag & Drop anywhere
  window.addEventListener('dragover', e=>{ e.preventDefault(); });
  window.addEventListener('drop', e=>{
    e.preventDefault();
    if (e.dataTransfer.files && e.dataTransfer.files[0]) {
      const f = e.dataTransfer.files[0];
      if (f.type.startsWith('image/')) {
        const rd=new FileReader(); rd.onload = ev=> overlay.src=ev.target.result; rd.readAsDataURL(f);
      }
    } else {
      const text = e.dataTransfer.getData('text/uri-list') || e.dataTransfer.getData('text/plain');
      if (text && /^https?:\/\//i.test(text)) overlay.src = text.trim();
    }
  });

  // ---------- Controls ----------
  opRange.addEventListener('input', ()=>{ overlay.style.opacity = opRange.value; opVal.textContent = Number(opRange.value).toFixed(2); });
  scRange.addEventListener('input', ()=>{ scale = Number(scRange.value); scVal.textContent=`${scale.toFixed(2)}×`; applyTransform(); });
  rtRange.addEventListener('input', ()=>{ rotation = Number(rtRange.value); rtVal.textContent=`${rotation}°`; applyTransform(); });
  lockChk.addEventListener('change', ()=>{ locked = lockChk.checked; overlay.style.cursor = locked ? 'default' : 'grab'; });
  clearBtn.addEventListener('click', ()=> overlay.src='');
  resetBtn.addEventListener('click', ()=>{
    overlay.style.top='100px'; overlay.style.left='100px';
    scale=1; rotation=0; scRange.value='1.00'; rtRange.value='0'; scVal.textContent='1.00×'; rtVal.textContent='0°';
    opRange.value='0.70'; overlay.style.opacity='0.70'; opVal.textContent='0.70'; applyTransform();
  });
  hideBtn.addEventListener('click', ()=>{ panel.style.display='none'; colorPanel.style.display='none'; showBtn.style.display='block'; });
  showBtn.addEventListener('click', ()=>{ panel.style.display='block'; colorPanel.style.display='block'; showBtn.style.display='none'; });

  // ---------- Drag overlay (no jump) ----------
  let dragging=false, offX=0, offY=0;
  overlay.addEventListener('mousedown', (e)=>{
    if(locked) return;
    dragging=true; overlay.style.cursor='grabbing';
    const r=overlay.getBoundingClientRect();
    offX=e.clientX - r.left; offY=e.clientY - r.top; e.preventDefault();
  });
  document.addEventListener('mousemove', (e)=>{
    if(!dragging) return;
    overlay.style.left = `${e.clientX - offX + window.scrollX}px`;
    overlay.style.top  = `${e.clientY - offY + window.scrollY}px`;
  });
  document.addEventListener('mouseup', ()=>{ dragging=false; if(!locked) overlay.style.cursor='grab'; });

  // ---------- Quick resize (Shift + Wheel) ----------
  document.addEventListener('wheel', (e)=>{
    if(!overlay.src) return;
    if(e.shiftKey){
      e.preventDefault();
      const step = e.deltaY<0 ? 0.05 : -0.05;
      scale = clamp(scale + step, 0.10, 3.00);
      scRange.value = scale.toFixed(2); scVal.textContent = `${scale.toFixed(2)}×`; applyTransform();
    }
  }, {passive:false});

  // ---------- Grid ----------
  let gridOn=false, gridSpacing=40, gridOpacity=0.4;
  function drawGrid(){
    grid.width = window.innerWidth; grid.height = window.innerHeight;
    const ctx = grid.getContext('2d');
    ctx.clearRect(0,0,grid.width,grid.height);
    ctx.globalAlpha = gridOpacity;
    ctx.strokeStyle = '#ffc2e6';
    ctx.lineWidth = 1;
    for(let x=0; x<grid.width; x+=gridSpacing){ ctx.beginPath(); ctx.moveTo(x,0); ctx.lineTo(x,grid.height); ctx.stroke(); }
    for(let y=0; y<grid.height; y+=gridSpacing){ ctx.beginPath(); ctx.moveTo(0,y); ctx.lineTo(grid.width,y); ctx.stroke(); }
  }
  function toggleGrid(force){
    gridOn = (typeof force==='boolean') ? force : !gridOn;
    grid.style.display = gridOn ? 'block' : 'none';
    gridToggle.textContent = `Grid: ${gridOn?'On':'Off'}`;
    if (gridOn){ drawGrid(); }
  }
  window.addEventListener('resize', ()=>{ if(gridOn) drawGrid(); });

  // Grid settings prompt (simple)
  gridSettings.addEventListener('click', ()=>{
    const sp = prompt('Grid spacing (px):', String(gridSpacing));
    if(sp!==null){
      const n = Math.max(5, Math.min(400, parseInt(sp,10)||gridSpacing));
      gridSpacing = n;
    }
    const op = prompt('Grid opacity (0-1):', String(gridOpacity));
    if(op!==null){
      const f = Math.max(0, Math.min(1, parseFloat(op)||gridOpacity));
      gridOpacity = f;
    }
    if(gridOn) drawGrid();
  });
  gridToggle.addEventListener('click', ()=> toggleGrid());

  // ---------- Guides toggles ----------
  function toggleEl(el){ el.style.display = (el.style.display==='none' || !el.style.display) ? 'block' : 'none'; }
  qs('#da-circle-toggle').addEventListener('click', ()=> toggleEl(circleGuide));
  qs('#da-rect-toggle').addEventListener('click', ()=> toggleEl(rectGuide));

  // ---------- Color helper ----------
  const colorInput = qs('#da-color-input');
  const colorHex   = qs('#da-color-hex');
  const copyBtn    = qs('#da-copy');
  const swatch = qs('#da-swatch');
  const presets = ['#000000','#ffffff','#ff6eb4','#ff9bd3','#ff9800','#ffd700','#00bcd4','#4caf50','#9c27b0','#e91e63'];
  presets.forEach(hex=>{
    const b=document.createElement('button'); b.style.background=hex; b.title=hex;
    b.addEventListener('click', ()=>{ colorInput.value=hex; colorHex.value=hex; });
    swatch.appendChild(b);
  });
  colorInput.addEventListener('input', ()=> colorHex.value = colorInput.value);
  colorHex.addEventListener('input', ()=> {
    let v=colorHex.value.trim();
    if(!v.startsWith('#')) v='#'+v;
    if(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(v)) colorInput.value=v;
  });
  copyBtn.addEventListener('click', ()=>{
    const v = colorHex.value.trim();
    navigator.clipboard?.writeText(v).then(()=>{ copyBtn.textContent='Copied!'; setTimeout(()=>copyBtn.textContent='Copy HEX',800); });
  });

  // ---------- Keyboard Hotkeys ----------
  document.addEventListener('keydown', (e)=>{
    if(typing(e.target)) return;
    const move = e.shiftKey? 20:5, stepScale = e.shiftKey? .10:.05, stepRot = e.shiftKey? 10:2, stepOp = e.shiftKey? .10:.05;

    switch(e.key){
      case 'h': case 'H':
        if (panel.style.display==='none'){ panel.style.display='block'; colorPanel.style.display='block'; showBtn.style.display='none'; }
        else { panel.style.display='none'; colorPanel.style.display='none'; showBtn.style.display='block'; }
        break;
      case 'g': case 'G': toggleGrid(); break;
      case 'c': case 'C': toggleEl(circleGuide); break;
      case 'v': case 'V': toggleEl(rectGuide); break;

      case 'ArrowLeft':  e.preventDefault(); overlay.style.left = `${(parseFloat(overlay.style.left)||100)-move}px`; break;
      case 'ArrowRight': e.preventDefault(); overlay.style.left = `${(parseFloat(overlay.style.left)||100)+move}px`; break;
      case 'ArrowUp':    e.preventDefault(); overlay.style.top  = `${(parseFloat(overlay.style.top )||100)-move}px`; break;
      case 'ArrowDown':  e.preventDefault(); overlay.style.top  = `${(parseFloat(overlay.style.top )||100)+move}px`; break;

      case '+': case '=':
        if(!overlay.src) break;
        scale = clamp(scale + stepScale, .10, 3.00); scRange.value=scale.toFixed(2); scVal.textContent=`${scale.toFixed(2)}×`; applyTransform(); break;
      case '-':
        if(!overlay.src) break;
        scale = clamp(scale - stepScale, .10, 3.00); scRange.value=scale.toFixed(2); scVal.textContent=`${scale.toFixed(2)}×`; applyTransform(); break;

      case ',': // rotate left
        if(!overlay.src) break;
        rotation = (rotation - stepRot + 360)%360; rtRange.value=rotation; rtVal.textContent=`${rotation}°`; applyTransform(); break;
      case '.': // rotate right
        if(!overlay.src) break;
        rotation = (rotation + stepRot)%360; rtRange.value=rotation; rtVal.textContent=`${rotation}°`; applyTransform(); break;

      case '[': // opacity down
        if(!overlay.src) break;
        opRange.value = clamp(parseFloat(opRange.value)-stepOp,0,1).toFixed(2); overlay.style.opacity=opRange.value; opVal.textContent=opRange.value; break;
      case ']': // opacity up
        if(!overlay.src) break;
        opRange.value = clamp(parseFloat(opRange.value)+stepOp,0,1).toFixed(2); overlay.style.opacity=opRange.value; opVal.textContent=opRange.value; break;

      case 'r': case 'R':
        overlay.style.top='100px'; overlay.style.left='100px'; scale=1; rotation=0;
        scRange.value='1.00'; rtRange.value='0'; scVal.textContent='1.00×'; rtVal.textContent='0°';
        opRange.value='0.70'; overlay.style.opacity='0.70'; opVal.textContent='0.70'; applyTransform(); break;

      case 'Delete': overlay.src=''; break;
    }
  });

})();