Raw Source Toggle Dropdown

• Minified Source

alike03 / PowerPyx Trophy Tracker

// ==UserScript==
// @name        PowerPyx Trophy Tracker
// @description A script to track the trophies in the PowerPyx trophy guides website
// @namespace   alike.powerpyx
// @version     1.0
// @author      alike03
// @icon        https://www.powerpyx.com/wp-content/uploads/trophy-guide-platinum.png
// @updateURL   https://openuserjs.org/meta/alike03/PowerPyx_Trophy_Tracker.meta.js
// @downloadURL https://openuserjs.org/install/alike03/PowerPyx_Trophy_Tracker.user.js
// @match       https://www.powerpyx.com/*trophy*
// @noframes
// @copyright    2023, alike03 (https://openuserjs.org/users/alike03)
// @license      MIT
// ==/UserScript==

/* jshint esversion: 6 */

(function() {
  const save = {
    trophies: {
      hideCompleted: false,
      completed: []
    }
  };
  
  const updateSave = () => {
    localStorage.setItem('powerpyx.alike', JSON.stringify(save));
  };

  const loadSave = () => {
    const loaded = localStorage.getItem('powerpyx.alike');
    if (loaded) {
      Object.assign(save, JSON.parse(loaded));
    }
  }

  const loadCss = () => {
    const style = document.createElement('style');
    style.innerHTML = `
      .alike-container {
        display: flex;
        justify-content: space-evenly;
        margin: 50px;
      }

      .alike-button {
        padding: 7px 13px;
      }

      .completed {
        opacity: 0.5;
        filter: grayscale(100%);
      }

      .hide-completed .completed,
      .hide-completed .completed + .details {
        display: none;
      }
    `;
    document.head.appendChild(style);
  }

  const table = document.querySelector('table');
  if (!table) return;

  const tbody = table.querySelector('tbody');
  if (!tbody) return;

  const rows = tbody.querySelectorAll('tr');
  if (!rows) return;

  // initialize
  loadSave();
  loadCss();

  // Check if the table is hidden
  if (save.trophies.hideCompleted) {
    table.classList.add('hide-completed');
  }

  // Add the button to hide completed trophies
  const hideCompletedButton = document.createElement('button');
  hideCompletedButton.innerText = 'Hide completed';
  hideCompletedButton.classList.add('hide-button', 'alike-button');
  hideCompletedButton.addEventListener('click', function() {
    table.classList.toggle('hide-completed');
    save.trophies.hideCompleted = table.classList.contains('hide-completed');
    updateSave();
  });
  const container = document.createElement('div');
  container.classList.add('alike-container');
  container.appendChild(hideCompletedButton);
  table.parentNode.insertBefore(container, table);

  // Add the button to each row to mark the trophy as completed
  let count = 0;
  let completed = 0;

  rows.forEach((row, index) => {
    const cells = row.querySelectorAll('td');
    if (!cells) return;

    // if it is only one cell it is the content
    if (cells.length === 1) {
      row.classList.add('details');
    } else {
      row.classList.add('header');
      count++;

      // Check if the trophy is completed and add the class
      if (save.trophies.completed[index]) {
        row.classList.add('completed');
        completed++;
      }

      // Add the button to mark the trophy as completed
      const button = document.createElement('button');
      button.innerText = 'Completed';
      button.classList.add('complete-button', 'alike-button');
      button.addEventListener('click', function() {
        row.classList.toggle('completed');
        save.trophies.completed[index] = row.classList.contains('completed');
        if (save.trophies.completed[index]) {
          completed++;
        } else {
          completed--;
        }
        updateCounter();
        updateSave();
      });
      cells[2].appendChild(button);
    }
  });

  // Add the counter
  const counter = document.createElement('div');
  counter.innerText = `${completed}/${count}`;
  counter.classList.add('counter');
  container.appendChild(counter);

  const updateCounter = () => {
    counter.innerText = `${completed}/${count}`;
  }

})();