Hamatti/liiga-bookmarklet.js

## liiga-bookmarklet.js
/**
 * A bookmarklet to highlight teams in standings in Liiga.fi
 * You can use https://caiorss.github.io/bookmarklet-maker/ to turn this into a minified bookmarklet
 *
 * This works best when combined with custom CSS (I use Stylus extension for that) which hides everything
 * except schedule and standings. See liiga.css.
 */

/**
 * Injects our custom stylesheet into the `<head>`
 *
 * It will turn custom-highlight colors to black background and white background
 * and adjusts a few generated classes to force inherited color.
 *
 * It's very likely these dynamic class names change regularly so this will probably break all the time.
 */
function addCustomStyles() {
  const style = document.createElement("style");
  style.innerText = `.custom-highlight { background: black !important; color: white !important; } ._sairaTeamName_yum7u_18, ._dataElement_yum7u_388 { color: inherit !important;}`;

  document.querySelector("head").appendChild(style);
}

addCustomStyles();

const standings = document.querySelector("#main-standings-container");

/**
 * Removes custom-highlight class from everywhere
 */
function clearHighlights() {
  const highlighted = document.querySelectorAll(".custom-highlight");
  Object.values(highlighted).forEach((node) => {
    node.classList.remove("custom-highlight");
  });
}

/**
 * When hovering over a match in the schedule, will highlight
 * the teams of the provided match argument in the standings table
 *
 */
function onHover(teams) {
  // First we clear all previous highlights
  clearHighlights();

  // Find the correct team nodes in the standings table
  const teamSpans = document.querySelectorAll("#standing-grid-team");
  const currentTeams = Object.values(teamSpans).filter((teamSpan) => {
    let name = teamSpan.querySelector("span:last-child").textContent;
    return teams.includes(name);
  });

  // For teams found, we traverse the span elements in the page
  // and currently the amount of spans is first + 6 elements.
  // Add custom-highlight class to each and remove background-color inline style
  // if one exists
  currentTeams.forEach((node) => {
    node.classList.add("custom-highlight");
    node.style.removeProperty("background-color");

    for (let i = 0; i < 6; i++) {
      node = node.nextSibling;

      node.classList.add("custom-highlight");
      node.style.removeProperty("background-color");
    }
  });
}

const matches = document.querySelectorAll(
  "#latest-games-card-container > div:not(:first-child)"
);

matches.forEach((match) => {
  match.addEventListener(
    "mouseover",
    (event) => {
      // I'm using a bit of a hack here to get the team names from alt texts.
      // It's the least likely part to break when they change something in the DOM.
      const teams = Object.values(match.querySelectorAll("img")).map(
        (img) => img.alt
      );
      onHover(teams);
    },
    {
      capture: true,
    }
  );
});

## liiga.css
#main-right-container {
    display: none !important;
}

._container .leftContainer {
    flex-direction: row;
    gap: 4em;
    justify-self: start;
}

#main-left-container > div {
    min-width: 400px;
}

#main-partners-banner-container {
 display: none;
}
	/**
	* A bookmarklet to highlight teams in standings in Liiga.fi
	* You can use https://caiorss.github.io/bookmarklet-maker/ to turn this into a minified bookmarklet
	*
	* This works best when combined with custom CSS (I use Stylus extension for that) which hides everything
	* except schedule and standings. See liiga.css.
	*/

	/**
	* Injects our custom stylesheet into the `<head>`
	*
	* It will turn custom-highlight colors to black background and white background
	* and adjusts a few generated classes to force inherited color.
	*
	* It's very likely these dynamic class names change regularly so this will probably break all the time.
	*/
	function addCustomStyles() {
	const style = document.createElement("style");
	style.innerText = `.custom-highlight { background: black !important; color: white !important; } ._sairaTeamName_yum7u_18, ._dataElement_yum7u_388 { color: inherit !important;}`;

	document.querySelector("head").appendChild(style);
	}

	addCustomStyles();

	const standings = document.querySelector("#main-standings-container");

	/**
	* Removes custom-highlight class from everywhere
	*/
	function clearHighlights() {
	const highlighted = document.querySelectorAll(".custom-highlight");
	Object.values(highlighted).forEach((node) => {
	node.classList.remove("custom-highlight");
	});
	}

	/**
	* When hovering over a match in the schedule, will highlight
	* the teams of the provided match argument in the standings table
	*
	*/
	function onHover(teams) {
	// First we clear all previous highlights
	clearHighlights();

	// Find the correct team nodes in the standings table
	const teamSpans = document.querySelectorAll("#standing-grid-team");
	const currentTeams = Object.values(teamSpans).filter((teamSpan) => {
	let name = teamSpan.querySelector("span:last-child").textContent;
	return teams.includes(name);
	});

	// For teams found, we traverse the span elements in the page
	// and currently the amount of spans is first + 6 elements.
	// Add custom-highlight class to each and remove background-color inline style
	// if one exists
	currentTeams.forEach((node) => {
	node.classList.add("custom-highlight");
	node.style.removeProperty("background-color");

	for (let i = 0; i < 6; i++) {
	node = node.nextSibling;

	node.classList.add("custom-highlight");
	node.style.removeProperty("background-color");
	}
	});
	}

	const matches = document.querySelectorAll(
	"#latest-games-card-container > div:not(:first-child)"
	);

	matches.forEach((match) => {
	match.addEventListener(
	"mouseover",
	(event) => {
	// I'm using a bit of a hack here to get the team names from alt texts.
	// It's the least likely part to break when they change something in the DOM.
	const teams = Object.values(match.querySelectorAll("img")).map(
	(img) => img.alt
	);
	onHover(teams);
	},
	{
	capture: true,
	}
	);
	});
	#main-right-container {
	display: none !important;
	}

	._container .leftContainer {
	flex-direction: row;
	gap: 4em;
	justify-self: start;
	}

	#main-left-container > div {
	min-width: 400px;
	}

	#main-partners-banner-container {
	display: none;
	}