Userscript for showing which events have already passed on the GDQ Schedule page

gdq-schedule-progress.user.js

// ==UserScript==
// @name         GDQ Schedule Progress
// @description  Style the GDQ Schedule page to show which events have already passed
//
// @author       jjspace
// @namespace    https://github.com/jjspace
// @downloadURL  https://gist.github.com/jjspace/1140c685307d157a9c83640e2a031a27/raw/gdq-schedule-progress.user.js
//
// @version      0.2.3
// @updateURL    https://gist.github.com/jjspace/1140c685307d157a9c83640e2a031a27/raw/gdq-schedule-progress.user.js
//
// @match        https://gamesdonequick.com/schedule
// @match        https://gamesdonequick.com/schedule/*
// @grant        none
// ==/UserScript==

/*
 * NOTE: As of agdq 2024 this doesn't seem to be needed anymore
 */

(function() {
  /* global moment */
  'use strict';

  const padZero = (str) => ('00' + str).substr(-2);

  const updateProgress = () => {
    // find each start time and do all further searching relative to that
    document.querySelectorAll('.start-time').forEach(e => {

      // extract each block's hour and minute. Offset to 24hr time for PM
      let [,hour,min,period] = e.innerText.match(/(\d{1,2}):(\d\d) (AM|PM)/);
      hour = +hour;
      if (period === 'PM' && hour !== 12) hour = +hour + 12;
      if (period === 'AM' && hour === 12) hour = 0;
      hour = padZero(hour);

      // find the "day" by searching previous rows in the table for a day split
      let row = e.parentElement;
      let day = row.previousSibling;
      while (day.nodeType === 3 || !day.classList.contains('day-split')) {
        day = day.previousSibling;
      }
      let date = day.childNodes[0].innerText; // eg. "Saturday, January 9th"
      date = padZero(date.match(/\d+/)[0]);

      // find event duration. The table is built of a tr and a tr.second-row
      let detailRow = row.nextElementSibling;
      let duration = detailRow.querySelector('.text-right').innerText; // eg. "1:11:59"
      let [, durHr, durMin, durSec] = duration.match(/(\d{1,2}):(\d\d):(\d\d)/);

      // find setup time after this event
      let setupCol = row.querySelector('td:last-of-type');
      let setupTime = setupCol.innerText;
      let [, setupHr, setupMin, setupSec] = setupTime !== '' ? setupTime.match(/(\d{1,2}):(\d\d):(\d\d)/) : [, '0', '00', '00'];

      // construct a moment datetime to use for comparisons
      //const now = new Date(Date.now());
      // for debugging
      const now = moment().subtract(15, 'minutes').toDate();
      const year = now.getFullYear(); // assume same year
      const month = padZero(now.getMonth() + 1); // assume same month
      let time = moment(`${year}-${month}-${date}T${hour}:${min}:00`);

      // offset the event time by the duration to get event end time
      let timeEnd = time.clone();
      timeEnd.add(durHr, 'hours');
      timeEnd.add(durMin, 'minutes');
      timeEnd.add(durSec, 'seconds');

      // offset event end time by setup to enable setup checking
      let setupEnd = timeEnd.clone();
      setupEnd.add(setupHr, 'hours');
      setupEnd.add(setupMin, 'minutes');
      setupEnd.add(setupSec, 'seconds');

      let eventOver = timeEnd.isBefore(now);
      let isCurrentEvent = time.isBefore(now) && !eventOver;
      let isDuringEventSetup = eventOver && !setupEnd.isBefore(now);
      //console.log('event time:', time.format(), 'event end', timeEnd.format(), 'current event?', isCurrentEvent, 'eventOver?', eventOver);

      // Style based on if event is current or already over
      let overBg = '#eee';
      let overColor = '#ccc';
      let currentBg = '#fdd8e0';
      let currentColor = '#333';
      if (eventOver) {
        row.style.background = overBg;
        row.style.color = overColor;
        detailRow.style.background = overBg;
        detailRow.style.color = overColor;

        if (isDuringEventSetup) {
          setupCol.style.background = currentBg;
          setupCol.style.color = currentColor;
        }
      }
      else if (isCurrentEvent) {
        row.style.background = currentBg;
        detailRow.style.background = currentBg;
      }

    });
  }

  const setupRefresh = () => {
    // set up auto refresh
    if(!window.progressIntervalId) {
      const interval = 60 * 1000; // every minute
      window.refreshIntervalId = setInterval(updateProgress, interval);
    }
  }

  const stopRefresh = () => {
    clearInterval(window.refreshIntervalId)
  }

  // call on initial load
  updateProgress();
  setupRefresh();

  // attach to window events so not updating in background
  //window.addEventListener('focus', () => setupRefresh);
  //window.addEventListener('blur', () => stopRefresh);

})();