Hover previews for Deathsie's tier lists

deathsie-previews.user.js

// ==UserScript==
// @name        Deathsie Card Previews
// @namespace   Violentmonkey Scripts
// @include     https://docs.google.com/spreadsheets/d/e/2PACX-1vR1eo40sfGoZ-MLxXZsGRHEeAWlKBHYxLFGbTY64l0ZFmsXN25iXOHRYvN7Dt4AsCalgj_RK7KAMr9G/pubhtml
// @grant       none
// @version     1.0
// @author      George Ogata
// @description 9/13/2021, 1:34:27 AM
// ==/UserScript==

function cardURLFor(event) {
  const link = document.elementFromPoint(event.clientX, event.clientY).
    closest('a[href*="q=https://scryfall.com/" i]');

  if (!link)
    return;

  const googleURL = new URL(event.target.href);
  const scryfallURL = new URL(googleURL.searchParams.get('q'));
  const match = /\/card\/[^/]+\/[^/]+/.exec(scryfallURL.pathname);
  if (match)
    return 'https://api.scryfall.com' + match[0].replace('card', 'cards');
}

async function showPreview(cardURL, event) {
  const card = await fetch(cardURL).then(response => response.json());
  const imageURLs = card.card_faces ?
    card.card_faces.map(face => face.image_uris.normal) :
    [card.image_uris.normal];

  preview.innerHTML = '';
  imageURLs.forEach(url => {
    const img = document.createElement('img');
    img.src = url;
    img.style.height = '420px';
    preview.appendChild(img);
  });
  preview.style.display = 'flex';
  
  const x = event.clientX;
  const y = event.clientY;
  const w = preview.offsetWidth;
  const h = preview.offsetHeight;
  const W = window.innerWidth;
  const H = window.innerHeight;
  const gapx = 15;
  const gapy = 5;
  
  let px = x + gapx;
  let py = y + gapy;
  
  if (py + h > H)
    py -= py + h - H;
  
  if (px + w > W && px - w - gapx > 0)
    px = x - w - gapx;

  preview.style.left = `${px}px`;
  preview.style.top = `${py}px`;
}

function hidePreview() {
  preview.style.display = 'none';
}

function mousemove(event) {
  const cardURL = cardURLFor(event);
  if (cardURL) {
    showPreview(cardURL, event);
  } else {
    hidePreview();
  }
}

const preview = document.createElement('div');
preview.style.display = 'flex';
preview.style.position = 'absolute';
document.body.appendChild(preview);
document.body.addEventListener('mousemove', mousemove);