User script for putting the "Events" page of Grand Archive Omnidex into tabs (by events judged / RSVPs / events entered)

omnidex-tabber.user.js

// ==UserScript==
// @name     Omnidex Tabber
// @namespace   http://mduo13.com/
// @description Make events on Omnidex display in tabs for judged/rsvp/past
// @include     https://omni.gatcg.com/*
// @version  1
// @grant    none
// ==/UserScript==


function onMutation(l,o) {
  const announcer = document.querySelector("next-route-announcer p")
  //console.log("[OmniTabber] mutations:", l)
  if (announcer.innerText == "Omnidex - Events") {
    //console.log("[OmniTabber] tabbifying!")
    waitForArticle()
  } else {
    //console.log("[OmniTabber] Other route:", announcer.innerText)
  }
  if (!announcer) {
    //console.log("[OmniTabber] announcer died?") 
  }
}

function tapannouncer(announcer) {
  const observer = new MutationObserver(onMutation)
  observer.observe(announcer, {childList: true, characterData: true, subtree: true})
}

function waitForRouteAnnouncer() {
  const a = document.querySelector("next-route-announcer")
  if (a) {
		//console.log("[OmniTabber] route announcer up")
  	tapannouncer(a)
  } else {
    //console.log("[OmniTabber] waiting for route announcer")
    setTimeout(waitForRouteAnnouncer, 800)
  }
}
waitForRouteAnnouncer()


if (window.location == "https://omni.gatcg.com/events") {
	waitForArticle()
}

function tabbify(article) {
  const sects = article.querySelectorAll("section")
  const tabs = article.querySelectorAll('section > div:not([role="presentation"]')
  const loadmore = article.querySelector('section > div[role="presentation"]')
  const tabsection = document.createElement("div")
  tabsection.id = "evt-tab-section"
  tabsection.style["display"] = "flex"
  article.prepend(tabsection)
  article.style["row-gap"] = "0"
  
  for (const sect of sects) {
    const h3 = sect.querySelector("h3")
    tabsection.append(h3)
    h3.style["margin-right"] = "5px"
    h3.style["border"] = "1px solid transparent"
    h3.style["border-bottom"] = "4px solid transparent"
  	h3.style["padding"] = "5px"
  	h3.style["border-radius"] = "10px 10px 0 0"
    h3.style["background-color"] = "#121212"

    const thistab = sect.querySelector("div")
    if (thistab) {
      h3.style["cursor"] = "pointer"
      if (h3.innerText === "Your events") {
        h3.style["border-bottom-color"] = "#64b5f6"
      } else {
	      thistab.style["display"] = "none"
      }
      h3.addEventListener("click", (evt) => {
        for (const tab of tabs) {
          tab.style["display"] = "none"
        }
        for (const tabh3 of tabsection.querySelectorAll("h3")) {
        	tabh3.style["border-bottom-color"] = "transparent"
        }
        h3.style["border-bottom-color"] = "#64b5f6"
        if (h3.innerText === "Your RSVPs") {
          thistab.style["display"] = "block"
        } else {
          thistab.style["display"] = "flex"
        }
        if (h3.innerText === "Your events") {
          loadmore.style["display"] = "block"
        } else {
          loadmore.style["display"] = "none"
        }
      })
    } else {
      h3.style["cursor"] = "not-allowed"
      h3.style["background-color"] = "#343434"
      h3.style["color"] = "#999"
    }
    const tabpara = sect.querySelector("p")
    if (tabpara && tabpara.innerText == "Events you RSVP to will be displayed here.") {
      tabpara.style["display"] = "none"
    }
  }
}


function waitForArticle() {
  const a = document.querySelector("article")
  if (a) {
		//console.log("[OmniTabber] events are loaded")
  	tabbify(a)
  } else {
    //console.log("[OmniTabber] waiting to tabbify")
    setTimeout(waitForArticle, 800)
  }
}