// ==UserScript==
// @name        LABYnet all badges
// @namespace   Violentmonkey Scripts
// @match       https://laby.net/badges
// @grant       none
// @version     1.0.0
// @author      Erb3
// @description 17/11/2023, 21:42:51
// ==/UserScript==

function log(...args) {
  console.log(`USERSCRIPT : ${GM_info.script.name}:`, ...args)
}

function insertAfter(referenceNode, newNode) {
  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

function removeAllAfter(element) {
    let parent = element.parentNode;
    let children = Array.from(parent.childNodes);
    let pos = children.indexOf(element);
    for(let i = children.length - 1; i > pos; i--) {
        parent.removeChild(children[i]);
    }
}

const endpoint = "https://laby.net/api/badges";

function generateCard(url, title, uuid, users) {
  const container = document.createElement("div");
  const link = document.createElement("a");
  const name = document.createElement("h6");
  const picture = document.createElement("picture");
  const webp = document.createElement("source");
  const png = document.createElement("source");
  const img = document.createElement("img");
  const amountContainer = document.createElement("span");
  const amount = document.createTextNode(users);
  const userIcon = document.createElement("i");
  container.classList.add("col-4", "col-md-2", "texture-item");
  link.href = url;
  name.innerHTML = title;
  webp.type = "image/webp";
  webp.srcset = `/texture/badge-1x/${uuid}.webp 50w, /texture/badge-2x/${uuid}.webp 100w, /texture/badge-3x/${uuid}.webp 150w, /texture/badge-4x/${uuid}.webp 200w`;
  png.type = "image/png";
  png.srcset = `/texture/badge-1x/${uuid} 50w, /texture/badge-2x/${uuid} 100w, /texture/badge-3x/${uuid} 150w, /texture/badge-4x/${uuid} 200w`
  img.src = `https://laby.net/texture/badge-3x/${uuid}`;
  img.classList.add("texture", "img-fluid", "ln-shadow");
  img.width = 50;
  img.height = 50;
  amountContainer.classList.add("badge", "bg-dark", "mt-3");
  userIcon.classList.add("icon", "icon-user");

  amountContainer.appendChild(amount);
  amountContainer.appendChild(userIcon);
  picture.appendChild(webp);
  picture.appendChild(png);
  picture.appendChild(img);
  link.appendChild(name);
  link.appendChild(picture);
  link.appendChild(amountContainer);
  container.appendChild(link);
  return container;
}

async function getBadges() {
  const res = await fetch(endpoint);
  const data = await res.json();
  console.log("Userscript: Found badges", data);
  return data;
}

setTimeout(async () => {
  const labyTitle = document.querySelector("h2.mt-5:nth-child(20)")
  removeAllAfter(labyTitle)
  const badges = await getBadges()
  badges.forEach((badge) => {
    const card = generateCard(
      `https://laby.net/badge/${badge.uuid}`,
      badge.name,
      badge.uuid,
      ""
    );
    insertAfter(labyTitle, card)
  })
}, 500);