Baited Newfag Awards

// ==UserScript==
// @name        Baited Newfag Awards
// @description Baited Newfag Awards
// @author      Anonymous
// @version     1.1.0
// @match       https://boards.4chan.org/*
// @match       https://boards.4channel.org/*
// @grant       none
// ==/UserScript==

// Note that I'm not using jQuery because 4chan doesn't play nice with certain event handlers and errors get spammed

(function() {
  "use strict";

  function GetOrdinal(int) {
    const dString = String(int);
    const last = +dString.slice(-2);

    if (last > 3 && last < 21) {
      return "th";
    }

    switch (last % 10) {
      case 1: return "st";
      case 2: return "nd";
      case 3: return "rd";
      default: return "th";
    }
  }

  function FallbackCopyTextToClipboard(text) {
    const textArea = document.createElement("textarea");
    textArea.value = text;

    // Avoid scrolling to bottom
    textArea.style.top = "0";
    textArea.style.left = "0";
    textArea.style.position = "fixed";

    document.body.appendChild(textArea);
    textArea.focus();
    textArea.select();

    try {
      const successful = document.execCommand("copy");
      const msg = successful ? "successful" : "unsuccessful";
      console.log(`Fallback: Copying text command was ${msg}`);
    } catch (err) {
      console.error("Fallback: Oops, unable to copy", err);
    }

    document.body.removeChild(textArea);
  }

  function CopyTextToClipboard(text) {
    if (!navigator.clipboard) {
      FallbackCopyTextToClipboard(text);
      return;
    }

    navigator.clipboard.writeText(text).then(() => {
      console.log("Async: Copying to clipboard was successful!");
    }, (err) => {
      console.error("Async: Could not copy text: ", err);
    });
  }

  // Create new CSS styling for the Baited Newfag Awards button that will appear on the navigation at the top of the page
  const cssText = `
    .btn-baited-newfag-awards {
      position: absolute;
      border: 1px solid black;
      background-color: white;
      color: black;
      padding: 2px 4px;
      cursor: pointer;
      user-select: none;
      -ms-user-select: none;
      -moz-user-select: none;
      -khtml-user-select: none;
      -webkit-user-select: none;
    }

    .btn-baited-newfag-awards:hover {
      background-color: lightgray;
    }

    .btn-baited-newfag-awards:active {
      background-color: gray;
      color: white;
    }
  `;

  const style = document.createElement("style");
  style.type = "text/css";
  style.innerText = cssText;
  document.head.appendChild(style);

  // Create the button and put it onto the navigation at the top of the page
  const parentElement = document.getElementsByTagName("body")[0];
  const button = document.createElement("span");
  button.innerText = "Baited Newfag Awards";
  button.classList.add("btn-baited-newfag-awards");
  parentElement.insertBefore(button, parentElement.children[0]);

  let baitedNewfagBtnTop = localStorage.getItem("baited-newfag-btn-top");
  let baitedNewfagBtnLeft = localStorage.getItem("baited-newfag-btn-left");

  if (baitedNewfagBtnTop === null || baitedNewfagBtnLeft === null) {
    baitedNewfagBtnTop = "120px";
    baitedNewfagBtnLeft = "10px";
    localStorage.setItem("baited-newfag-btn-top", baitedNewfagBtnTop);
    localStorage.setItem("baited-newfag-btn-left", baitedNewfagBtnLeft);
  }

  button.style.top = baitedNewfagBtnTop;
  button.style.left = baitedNewfagBtnLeft;

  let dragging = true;

  // Generate "Welcome to the baited newfag awards!" copypasta text whenever you click on the button
  button.onclick = function() {
    if (dragging === false) {
      dragging = true;
      return;
    }

    const data = {};
    const dataArr = [];
    const postContainers = document.getElementsByClassName("postContainer");

    for (let i = 0; i < postContainers.length; i++) {
      const postContainer = postContainers[i];
      const user = postContainer.querySelectorAll("[title='Highlight posts by this ID']")[0];
      const post = postContainer.querySelectorAll("[title='Reply to this post']")[0];
      const userId = user.innerText;
      const postNumber = post.innerText;

      if (userId in data) {
        data[userId].push(`>>${postNumber}`);
      } else {
        data[userId] = [`>>${postNumber}`];
      }
    }

    // Only keep newfags that have at least two posts
    for (const key in data) {
      if (data[key].length === 1) {
        delete data[key];
      }
    }

    // Transform the data into a data array so that it can be sorted
    for (const key in data) {
      dataArr.push({
        user: key,
        posts: data[key]
      });
    }

    // Sort the array so that the newfags with the most post appear first
    dataArr.sort((a, b) => {return b.posts.length - a.posts.length;});

    let string = "Welcome to the Baited Newfag Awards! Here are the results.";
    let place = 1;

    for (const obj of dataArr) {
      const { user, posts } = obj;
      const ordinal = GetOrdinal(place);
      string += `\n\n${place}${ordinal} place:\n${user} with ${posts.length} posts:\n${posts.join(" ")}`;

      // Your post can only handle a maximum of 17 places
      if (++place === 18) {
        break;
      }
    }

    string += "\n\nTampermonkey Script: https://pastebin.com/UvXMFC5S";

    CopyTextToClipboard(string);
    alert("The results of the Baited Newfag Awards has been copied to your clipboard");
  };

  function dragElement(element) {
    let pos1 = 0;
    let pos2 = 0;
    let pos3 = 0;
    let pos4 = 0;

    function elementDrag(e) {
      dragging = false;
      console.log(dragging);

      e = e || window.event;
      e.preventDefault();
      // calculate the new cursor position:
      pos1 = pos3 - e.clientX;
      pos2 = pos4 - e.clientY;
      pos3 = e.clientX;
      pos4 = e.clientY;
      // set the element's new position:
      element.style.top = `${element.offsetTop - pos2}px`;
      element.style.left = `${element.offsetLeft - pos1}px`;
    }

    function closeDragElement() {
      /* stop moving when mouse button is released:*/
      document.onmouseup = null;
      document.onmousemove = null;

      localStorage.setItem("baited-newfag-btn-top", `${button.getBoundingClientRect().top}px`);
      localStorage.setItem("baited-newfag-btn-left", `${button.getBoundingClientRect().left}px`);
    }

    function dragMouseDown(e) {
      e = e || window.event;
      e.preventDefault();
      // get the mouse cursor position at startup:
      pos3 = e.clientX;
      pos4 = e.clientY;
      document.onmouseup = closeDragElement;
      // call a function whenever the cursor moves:
      document.onmousemove = elementDrag;
    }

    if (document.getElementById(`${element.id}header`)) {
      /* if present, the header is where you move the DIV from:*/
      document.getElementById(`${element.id}header`).onmousedown = dragMouseDown;
    } else {
      /* otherwise, move the DIV from anywhere inside the DIV:*/
      element.onmousedown = dragMouseDown;
    }
  }

  dragElement(button);
})();