Filter 17Lands data

Adds a input to quickly filter cards by name. Separate by commas to see multiple cards. Click `/` to quickly focus on input
安裝腳本 ?
發表問題、評論、或檢舉該腳本。
Wrap lines
// ==UserScript==
// @name        Filter 17Lands data
// @namespace   Violentmonkey Scripts
// @match       https://www.17lands.com/*
// @grant       none
// @version     1.3.5
// @author      rsromanowski
// @license     MIT
// @description Adds a input to quickly filter cards by name. Separate by commas to see multiple cards. Click `/` to quickly focus on input
// @require https://cdn.jsdelivr.net/npm/@violentmonkey/dom@2
// @require https://cdn.jsdelivr.net/npm/@violentmonkey/shortcut@1
// ==/UserScript==

switch(window.location.pathname) {
  case '/card_data':
    initCardData()
    break
  case '/card_data/details':
    initCardDetails()
    break
  default: 
    console.log(`Nothing to do on page: ${window.location.pathname}`)
    break
}

function initCardData() {
  function prettify() {
    const toolbar = document.querySelector('div > div > select').parentElement.parentElement
    toolbar.style.cssText += " justify-content: space-between"
  
    const divs = document.querySelectorAll('#app > div > div')
    divs.forEach(d => d.classList.add('container'))
  }
  
  function filterTable(filter) {
    const columns = [
      { name: 'Name', index: 0, isFilter: true },
      { name: 'Color', index: 1, isFilter: false },
      { name: 'Rarity', index: 2, isFilter: false },
    ]
  
    const filterColumns = columns.filter(c => c.isFilter).map(c => c.index)
  
    const rarityRegex = new RegExp('r[:=]([curm])', 'i')
    const colorRegex = new RegExp('c[:=]([wubrgcm])', 'i')
  
    // Currently only one table on page
    // Headers are in thead
    const rows = document.querySelectorAll(`table > tbody > tr`)
  
    const clauses = filter.split(",")
    const rarityClauses = clauses.filter(c => rarityRegex.test(c))
    const colorClauses = clauses.filter(c => colorRegex.test(c))
    const nameClauses = clauses.filter(c => !rarityRegex.test(c) && !colorRegex.test(c))
  
    const orFilter = nameClauses.filter(f => f.trim().length > 0).map(f => f.trim()).join("|")
    const regex = new RegExp(`${orFilter}`, 'i')
    const isFoundInTds = td => regex.test(td.innerHTML)
    const isFound = childrenArr => childrenArr.some(isFoundInTds)
    const setTrStyleDisplay = ({ style, children }) => {
      style.display = isFound([
        ...filterColumns.map(c => children[c]) // <-- filter Columns
      ]) ? '' : 'none'
    }
  
    rows.forEach(setTrStyleDisplay)
  }
  
  function createQueryInput() {
    const div = document.querySelector('.main-text')
    const i = document.createElement('input')
    i.id = "q"
    i.className = "form-control"
    i.placeholder = 'Press \'/\' to focus. Search by partial card names. i.e. "Candy Grapple" or "candy,torch"'
    div.appendChild(i)
  
    i.addEventListener("input", (event) => { filterTable(event.target.value) })
  
    // Select all text of focus for quick overwrite
    i.addEventListener("focus", function () { this.select() })
  }

  VM.observe(document.body, () => {
    const table = document.querySelector('table')

    if (table) {
      createQueryInput()
      prettify()

      return true // disconnect observer
    }
  })

  VM.shortcut.register('/', () => {
    document.getElementById("q").focus()
  })
}

function initCardDetails() {
  console.log(`details baby`)
  
  VM.shortcut.register('k', () => {
    console.log('k')
    const dropdown = document.getElementById('card')
    dropdown.selectedIndex = Math.max(0, dropdown.selectedIndex - 1)
    dropdown.dispatchEvent(new window.Event('change', { bubbles: true }))
  })
  VM.shortcut.register('j', () => {
    console.log('j')
    const dropdown = document.getElementById('card')
    dropdown.selectedIndex = Math.min(dropdown.childElementCount - 1, dropdown.selectedIndex + 1)
    dropdown.dispatchEvent(new window.Event('change', { bubbles: true }))
  })
}