igaryhe / Drag Center

// ==UserScript==
// @name         Drag Center
// @namespace    https://igaryhe.io/
// @version      0.2
// @description  Hack the stuff
// @author       Dan
// @license MIT
// @match        https://gamecenter.nyu.edu/people/students/
// @icon         https://kts342zqk4j11wtj43xitvzi-wpengine.netdna-ssl.com/favicon.ico
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    var active = false;
    var activeItem = null;
    var topz = 100;
    var grid = document.getElementsByClassName('students-grid')[0];
    const links = grid.querySelectorAll("a");
    const h3 = grid.querySelector('h3');
    const str = h3.innerHTML.substr(h3.innerHTML.length - 5);
    const len = links.length;
    const num = Math.floor(Math.random() * len);
    links.forEach((i, id) => {
        let p = document.createElement('p');
        if (id == num) {
            console.log(`num: ${num}`);
            p.innerHTML = str;
            p.style = "position:absolute;color:red";
        } else {
            p.innerHTML = makeid(5);
            p.style = "position:absolute;color:white";
        }
        i.appendChild(p);
    });
    grid.querySelectorAll("a").forEach((i, id) => {
        let p = document.createElement("p");
        p.innerHTML = makeid(5);
        p.style = "position:absolute;color:white";
        i.appendChild(p);
    });
    grid.addEventListener("contextmenu", e => {e.preventDefault()});
    grid.addEventListener("mousedown", dragStart, false);
    grid.addEventListener("mousemove", drag, false);
    grid.addEventListener("mouseup", dragEnd, false);

    function dragStart(e) {
        if (e.target !== e.currentTarget) {
            active = true;
            activeItem = e.target.closest(".gridBox");
            if (activeItem !== null) {
                activeItem.style.zIndex = ++topz;
                if (!activeItem.xOffset) activeItem.xOffset = 0;
                if (!activeItem.yOffset) activeItem.yOffset = 0;
                activeItem.initialX = e.clientX - activeItem.xOffset;
                activeItem.initialY = e.clientY - activeItem.yOffset;
            }
        }
    }

    function drag(e) {
        if (active && activeItem != null) {
            activeItem.xOffset = e.clientX - activeItem.initialX;
            activeItem.yOffset = e.clientY - activeItem.initialY;
            setTranslate(activeItem.xOffset, activeItem.yOffset, activeItem);
        }
    }

    function dragEnd() {
        if (activeItem !== null) {
            activeItem.initialX = activeItem.xOffset;
            activeItem.initialY = activeItem.yOffset;
        }
        active = false;
        activeItem = null;
    }

    function setTranslate(xPos, yPos, el) {
        el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
    }
    
    function makeid(length) {
        let result = '';
        const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
        const charactersLength = characters.length;
        for ( let i = 0; i < length; i++ ) {
            result += characters.charAt(Math.floor(Math.random() * charactersLength));
        }
        return result;
    }
})();