// ==UserScript==
// @name         Hoyolab
// @namespace    http://tampermonkey.net/
// @version      2025-04-28
// @description  whatever
// @author       You
// @match        https://act.hoyolab.com/app/community-game-records-sea/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=hoyolab.com
// @grant        none
// ==/UserScript==

const additionalCSS = `
    .pc-root-layout__container {
        max-width: calc(100% - var(--gpx));
        .layout {
              padding: 0;
        }
    }
    .role-medium.tw-cursor-pointer {
        display: inline-block;
        position: relative;
    }
    .main-container {
        display: block;
        position: relative;
        height: 2000px;
    }
    .dragging {
        position: absolute;
        pointer-events: none;
    }
`;

const addGlobalStyle = (css = '') => {
    try {
        const target = document.getElementsByTagName('head')[0] || document.body || document.documentElement;
        const style = document.createElement('style');

        style.type = 'text/css';
        style.id = 'cccccc';
        style.innerHTML = css.replaceAll(';', ' !important;');
        target.appendChild(style);
    } catch (e) {
        console.error('Error while add global styles:', e);
    }
}


const addDragToElements = () => {
    const elements = document.getElementsByClassName('tw-cursor-pointer');
    if (elements.length > 0) {
        const l = elements.length;
        for (let i = 0; i < l; i++) {
            elements.item(i).replaceWith(elements.item(i).cloneNode(true));
            dragElement(elements.item(i));
        }
    }
    console.log('add draggable completed!');
};

const clamp = (value, min, max) => {
    return Math.min(max, Math.max(min, value))
}

const dragElement = (elmnt) => {
    elmnt.onclick = (e) => {
        e.stopImmediatePropagation();
        return false;
    };
    elmnt.onmousedown = dragStart;

    let dragTarget;
    let diffX;
    let diffY;

    const px = v => `${v}px`;

    const unpx = v => parseInt(v.slice(0, -2));

    function dragStart(e) {
        dragTarget = this;
        dragTarget.classList.add("dragging");
        let container = document.getElementsByClassName('main-container')[0];
        const { left, top } = container.getBoundingClientRect()
        diffX = e.pageX - unpx(dragTarget.style.left || '0px');
        diffY = e.pageY - unpx(dragTarget.style.top || '0px');
        window.addEventListener('mousemove', dragMove, {passive: false});
        window.addEventListener('mouseup', dragStop, {passive: false});
        return false;
    }

    function dragMove(e) {
        if (dragTarget) {
            e.preventDefault();
            e.stopPropagation();
            const x = e.pageX - diffX;
            const y = e.pageY - diffY;
            dragTarget.style.left = px(x);
            dragTarget.style.top = px(y);
        }
    }

    function dragStop(e) {
        dragTarget.classList.remove("dragging");
        dragTarget = undefined;
        window.removeEventListener('mousemove', dragMove);
        window.removeEventListener('mouseup', dragStop);
    }
}

const addSetDragElementBtn = () => {
    const target = document.querySelector('.tw-justify-between.tw-px-3.tw-py-6.tw-flex-items-center');
    if (target) {
        const dragBtn = document.createElement('div');
        dragBtn.classList.add('tw-cursor-pointer');
        dragBtn.classList.add('tw-space-x-1');
        dragBtn.classList.add('tw-flex-items-center');
        dragBtn.onclick = () => addDragToElements();
        const dragBtnChild = document.createElement('span');
        dragBtnChild.classList.add('tw-text-sm-pc');
        dragBtnChild.classList.add('tw-text-gt-l-text-white-3');
        dragBtnChild.innerHTML = 'Add Drag';
        dragBtn.appendChild(dragBtnChild);
        target.appendChild(dragBtn);
    }
}

setTimeout(() => {
    addGlobalStyle(additionalCSS);
    addSetDragElementBtn();
}, 5000);