Add Team Value to Transferview

fantasyBundesliga.user.js

// ==UserScript==
// @name         Fantasy Bundesliga
// @namespace    https://fantasy.bundesliga.de
// @version      0.1.1
// @description  add Team Value to Transferview and hide infoBox if desired
// @author       You
// @match        https://fantasy.bundesliga.de/player_transfers
// @grant        none
// ==/UserScript==

function observeOnce(element, callback) {
  const observer = new MutationObserver(() => {
    observer.disconnect()
    callback()
  })

  // define what element should be observed by the observer
  // and what types of mutations trigger the callback
  observer.observe(element, {
    childList: true
  });
}

(function() {
  'use strict';
  const container = document.querySelector('.player-transfers')
  observeOnce(container, () => {
    const budgetDiv = document.querySelector('.transf__detailRow.--bold:not(.--lighten)')
    const styleSheet = Array.from(document.styleSheets).find(({href}) => href.includes(location.host))
    styleSheet.insertRule(
      '.custom-row-not-last {' +
      'margin-bottom: 0 !important;' +
      'padding-bottom: 0 !important;' +
      'border-bottom: 0 !important;' +
      '}', 0)
    styleSheet.insertRule('.custom-row-not-first { padding-top: 0 !important; }', 0)

    function getTeamValue() {
      return parseFloat(
        Array.from(document.querySelectorAll('.squad-list-item'))
        .filter(item => !item.querySelector('.player-info__status').childNodes[0].classList.contains('icon-marked-to-sell'))
        .map(item => {
          return parseFloat(item.querySelector('.transfer-value').innerText)
        })
        .reduce((sum, price) => sum += price, 0).toFixed(1)
      )
    }

    const teamValueDiv = budgetDiv.cloneNode(true)
    const totalDiv = budgetDiv.cloneNode(true)
    teamValueDiv.children[0].innerText = 'Team Value'
    const teamValue = getTeamValue()
    teamValueDiv.children[1].innerText = `${teamValue} M`
    totalDiv.children[0].innerText = 'Gesamt'
    const total = teamValue + parseFloat(budgetDiv.children[1].innerText)
    totalDiv.children[1].innerText = `${total.toFixed(1)} M`
    budgetDiv.parentElement.append(teamValueDiv, totalDiv)

    Array.from(budgetDiv.parentElement.childNodes).filter(node => !node.classList.contains('section-title-wrapper')).forEach((node, i, array) => {
      if (i > 0) {
        node.classList.add('custom-row-not-first')
      }
      if (i < array.length - 1) {
        node.classList.add('custom-row-not-last')
      }
    })

    //hide info box
    const infoBox = document.querySelector('div.pageInfoBox')
    if (infoBox) {
      if (localStorage.getItem('hideInfoBox') === '1') {
        infoBox.remove()
      } else {
        const moreLink = infoBox.querySelector('a')
        const classes = moreLink.classList.values()
        const container = document.createElement('div')
        let klass
        while (true) {
          klass = classes.next()
          if (klass.done) break
          moreLink.classList.remove(klass.value)
          container.classList.add(klass.value)
        }
        container.appendChild(moreLink)
        const delimiter = document.createElement('span')
        delimiter.innerText = ' - '
        container.appendChild(delimiter)
        const hideInfoBoxLink = document.createElement('a')
        hideInfoBoxLink.innerText = 'Hide'
        hideInfoBoxLink.onclick = () => {
          infoBox.remove()
          localStorage.setItem('hideInfoBox', '1')
        }
        container.appendChild(hideInfoBoxLink)
        infoBox.appendChild(container)
      }
    }
  })
})()