ESPN.com Game Focus Console command

espn-game-focus.js

// This console script allows you to set the `gamesInterestedIn` to be games you want to keep tabs on.
// Just need one team in the game you are interested in (like you don't need both teams listed).
// Then run the whole script, and the games you are not interested in will be filtered away.

// It sets divs to be style "display: none" because if the elements are removed, when ESPN updates 
// something and the node is removed, it throws an error. Styling them to display none, means the node 
// is still there, and it can do its thing.
// Some definitions for easier reading
const gameIds = new Set;
const q = (selector) => document.querySelectorAll(selector);
const getParent = (el) => el.closest('section').closest('div').closest('section');
const getParentId = (el) => getParent(el).getAttribute('id');
const setDisplayNone = (els) => els.forEach(el => el.style.display = 'none');

// The main part, take the names of teams we want to see... get the gameId from the .Scoreboard node.
// adds ids to gameIds Set
const gamesInterestedIn = [
    "Kentucky",
    "Alabama",
    "Georgia",
    "Rutgers",
    "West Virginia",
    "Tulane",
    "Illinois",
    "Arkansas State",
    "Oregon State",
    "James Madison",
    "LSU",
    "BYU",
].forEach(name => {
    const el = [...q(".Card .ScoreCell__TeamName")]
      .find(el => el.textContent == name);
      gameIds.add(getParentId(el));
})


// Hide other sections of site
const classesToHide = [
    {
        class: '.Scoreboard',
        forEach: (els) => els.forEach(game => {
            if(!gameIds.has(game.getAttribute('id'))) {
                setDisplayNone([game]);
            }
        })
    },
    '.gameModules:not(:first-child)',
    '.pageContent > div:first-child',
    '.PageLayout__RightAside',
    '.Scoreboard__Header',
    '.Ad--banner',
    '.sponsored-content',
    '.HeaderScoreboardWrapper',
    '.page-footer-container',
    '.Site__Header__Wrapper',
    '.Scoreboard__Callouts',
    '.Scoreboard__Column--3'
].forEach(cls => {
    if(typeof cls === 'string') {
        setDisplayNone(q(cls))
    } else {
        cls.forEach(q(cls.class));
    }
})