☰

Scryfall Hover Price

Show prices of MTG cards by hovering over them while searching Scryfall

// ==UserScript==
// @name        Scryfall Hover Price
// @namespace   Tripp Lyons
// @match       *://scryfall.com/search
// @version     1.0
// @author      Tripp Lyons
// @description Show prices of MTG cards by hovering over them while searching Scryfall
// ==/UserScript==

/* jshint esversion: 6 */

function makePriceElement() {
  let el = document.createElement('div')
  el.innerText = 'Loading...'
  el.className = 'price'
  el.style.backgroundColor = 'rgba(0,0,0,0.5)'
  el.style.color = 'white'
  el.style.fontFamily = 'sans-serif'
  el.style.fontSize = '18px'
  el.style.display = 'flex'
  el.style.justifyContent = 'center'
  el.style.alignItems = 'center'
  el.style.position = 'absolute'
  el.style.left = '0px'
  el.style.right = '0px'
  el.style.top = '0px'
  el.style.bottom = '0px'
  el.style.zIndex = '999'
  el.style.borderRadius = '4.75% / 3.5%'
  return el
}

let cards = [...document.querySelectorAll('.card-grid-item-card')]

cards.forEach(card => {
  let id = card.href.split('card/').slice(1).join('').split('/').slice(0,-1).join('/')
  let priceUrl = 'https://api.scryfall.com/cards/' + id
  let lastEnter = 0
  card.addEventListener('mouseenter', () => {
    let el = makePriceElement()
    card.appendChild(el)
    fetch(priceUrl).then(result => result.json()).then(obj => {
      let price = obj.prices.usd
      if(price) {
        el.innerText = '$' + price
      } else {
        el.innerText = 'No price found.'
      }
    })
  })
  card.addEventListener('mouseleave', () => {
    document.querySelectorAll('.price').forEach(a => a.parentNode.removeChild(a))
  })
})