alike03 / Steam Achievements Helper

// ==UserScript==
// @name        Steam Achievements Helper
// @description Allows to hide the completed achivements.
// @author      alike03
// @version     1.0
// @namespace   Steam_achv
// @license     MIT
// @updateURL   https://openuserjs.org/meta/alike03/Steam_Achievements_Helper.meta.js
// @downloadURL https://openuserjs.org/install/alike03/Steam_Achievements_Helper.user.js
// @supportURL  https://github.com/alike03/Userscripts/issues
// @match       http*://steamcommunity.com/stats/*/achievements*
// @match       http*://steamcommunity.com/id/*/stats/appid/*/achievements*
// @copyright 2023, alike03 (https://openuserjs.org/users/alike03)
// ==/UserScript==

window.addEventListener('load', function () {
  addCSS();
  addHideButton();
  makeHideable();
});

function addCSS() {
  let css = [
    ".alikeButton {",
    "user-select: none;",
    "background: hsl(202, 41%, 25%) !important;",
    "}",
    ".alikeButton.hide {",
    "background: hsl(202, 41%, 43%) !important;",
    "}",
    "#mainContents.hide .achieveRow.unlocked,",
    "#mainContents.hide .achieveRow.unlocked {",
    "display: none;",
    "}",
  ].join("\n"); {
    let node = document.createElement("style");
    node.appendChild(document.createTextNode(css));
    let heads = document.getElementsByTagName("head");
    if (heads.length > 0) {
      heads[0].appendChild(node);
    } else {
      document.documentElement.appendChild(node);
    }
  }
}

function addHideButton() {
  const container = document.createElement("div");
  container.classList.add('tab');
  container.classList.add('steamdb_stats_tab');
  
  const button = document.createElement("a");
  button.classList.add('tabOn');
  button.classList.add('alikeButton');
  button.textContent = "Hide completed Achievements";
  button.onclick = function () {
    clickHideButton(this)
  };
  
  container.appendChild(button);
  document.getElementById("tabs").appendChild(container);
  button.click();
}

function clickHideButton(button) {
  const mainContents = button.parentNode.parentNode.parentNode;

  if (button.classList.contains('hide')) {
    button.classList.remove('hide');
    mainContents.classList.remove('hide');
  } else {
    button.classList.add('hide');
    mainContents.classList.add('hide');
  }
}

function makeHideable() {
  const element = document.querySelectorAll("#mainContents #personalAchieve .achieveRow");
  for (let i = 0; i < element.length; i++) {
    if (element[i].querySelector('.achieveUnlockTime') !== null)
      if (!element[i].classList.contains('unlocked'))
        element[i].classList.add('unlocked');
  }
}