Liiga.fi customizations

README.md

Custom Javascript bookmarklet and CSS style definitions for customizing the experience of liiga.fi.

More about this in my blog https://hamatti.org/posts/customizing-liiga-fi-experience/.

custom.css

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

#main-right-container {
    display: none;
}

#main-standings-container {
    margin-top: 0;
    margin-left: 3em;
    width: 600px;
}

#main-left-container {
    flex-direction: row;
    max-width: 80%;
}


#main-latest-games-container {
    width: 600px;
}

.highlight td {
    background: black !important;
    color: white !important;
}

highlight.bookmarklet

javascript:(function() {let standingsNode=document.getElementById("main-standings-container").querySelector("tbody");function onHover(e){let t,n=e.target.children,r=(t=5===n.length?n[3]:n[1]).children[0].children[0].innerText,i=t.children[2].children[1].innerText,l=standingsNode.querySelectorAll(%22tr%22);l.forEach(e=%3Ee.classList.remove(%22highlight%22)),Object.values(l).filter(e=%3E{let%20t=e.querySelector(%22.TeamNameTd%22).innerText;return%20t===r||t===i}).forEach(e=%3E{e.classList.add(%22highlight%22)})}let%20scoreContainers=Object.values(document.querySelectorAll(%22.LatestGames_gameCardContainer__aEuDi%22));scoreContainers.forEach(e=%3Ee.addEventListener(%22mouseenter%22,onHover));})()

highlight.js

let standingsNode = document
  .getElementById("main-standings-container")
  .querySelector("tbody");

function onHover(event) {
  let children = event.target.children;

  let teamsContainer;
  if (children.length === 5) {
    teamsContainer = children[3];
  } else {
    teamsContainer = children[1];
  }
  let homeTeam = teamsContainer.children[0].children[0].innerText;
  let awayTeam = teamsContainer.children[2].children[1].innerText;

  let teamNodes = standingsNode.querySelectorAll("tr");
  teamNodes.forEach((node) => node.classList.remove("highlight"));

  let selected = Object.values(teamNodes).filter((node) => {
    let teamName = node.querySelector(".TeamNameTd").innerText;
    return teamName === homeTeam || teamName === awayTeam;
  });

  selected.forEach((tr) => {
    tr.classList.add("highlight");
  });
}

let scoreContainers = Object.values(
  document.querySelectorAll(".LatestGames_gameCardContainer__aEuDi")
);

scoreContainers.forEach((container) =>
  container.addEventListener("mouseenter", onHover)
);