Greasy Fork is available in English.

Pixiv-JoystickControl

Implement joystick control in Pixiv using the HTML5 Gamepad API.

// ==UserScript==
// @name                Pixiv-JoystickControl
// @name:zh-CN          Pixiv-摇杆控制
// @name:ja             Pixiv-コントローラー制御
// @namespace           https://github.com/Mehver
// @version             1.0
// @description         Implement joystick control in Pixiv using the HTML5 Gamepad API.
// @description:zh-CN   使用HTML5 Gamepad API在Pixiv上实现操纵杆控制。
// @description:ja      HTML5 Gamepad APIを使用してPixivでジョイスティックコントロールを実装します。
// @author              https://github.com/Mehver
// @icon                data:image/png;base64,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
// @match               http*://pixiv.net
// @match               http*://pixiv.net/*
// @match               http*://www.pixiv.net
// @match               http*://www.pixiv.net/*
// @license             MPL-2.0
// @license             Mozilla Public License 2.0
// @homepageURL         https://github.com/SynRGB/Pixiv-JoystickControl
// @contributionURL     https://github.com/SynRGB/Pixiv-JoystickControl
// @copyright           Copyright © 2022-PRESENT, Mehver (https://github.com/Mehver)
// @charset             UTF-8
// @grant               GM_registerMenuCommand
// @grant               GM_setValue
// @grant               GM_getValue
// @grant               unsafeWindow
// @run-at              document-end
// ==/UserScript==

(function () {
    'use strict';

    let buttonA, buttonB, buttonX, buttonY, buttonRB, buttonLB, buttonRT, buttonLT;
    let buttonESC, buttonLike, buttonPageBack, buttonPageForward;
    // let buttonTabindexExit, buttonShiftTab, buttonTab, buttonEnter;

    let buttonPageBackPrevious = false;
    let buttonPageForwardPrevious = false;

    let buttonTabindexExitPrevious = false;
    let buttonShiftTabPrevious = false;
    let buttonTabPrevious = false;
    let buttonEnterPrevious = false;


    let preset = GM_getValue("preset", "Xbox");

    function setupPreset() {
        buttonA = preset === "Xbox" ? 0 : 2;
        buttonB = preset === "Xbox" ? 1 : 1;
        buttonX = preset === "Xbox" ? 2 : 0;
        buttonY = preset === "Xbox" ? 3 : 3;
        buttonRB = preset === "Xbox" ? 5 : 5;
        buttonLB = preset === "Xbox" ? 4 : 4;
        buttonRT = preset === "Xbox" ? 7 : 7;
        buttonLT = preset === "Xbox" ? 6 : 6;

        // buttonESC = buttonA;
        // buttonLike = buttonB;
        // buttonPageBack = buttonX;
        // buttonPageForward = buttonY;
    }

    function switchToXbox() {
        preset = "Xbox";
        GM_setValue("preset", "Xbox");
        setupPreset();
    }

    function switchToPlayStation() {
        preset = "PlayStation";
        GM_setValue("preset", "PlayStation");
        setupPreset();
    }

    GM_registerMenuCommand("Switch to Xbox preset", switchToXbox);
    GM_registerMenuCommand("Switch to PlayStation preset", switchToPlayStation);

    setupPreset();

    window.addEventListener("gamepadconnected", (event) => {
        console.log("A gamepad was connected:", event.gamepad);
    });

    let lastAxis0 = null;
    let lastAxis1 = null;

    function simulateKeyPress(key, extraParams = {}) {
        const eventInitDict = {bubbles: true, cancelable: true, composed: true, ...extraParams};
        document.dispatchEvent(new KeyboardEvent('keydown', {...eventInitDict, key}));
        document.dispatchEvent(new KeyboardEvent('keyup', {...eventInitDict, key}));
    }

    function focusNextElement(reverse = false) {
        const focusableElements = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
        const focusables = Array.from(document.querySelectorAll(focusableElements));

        const currentIndex = focusables.findIndex(el => el === document.activeElement);
        let nextIndex = reverse ? currentIndex - 1 : currentIndex + 1;

        if (nextIndex < 0) nextIndex = focusables.length - 1;
        if (nextIndex >= focusables.length) nextIndex = 0;

        focusables[nextIndex]?.focus();
    }

    function pollGamepad() {
        const gamepads = navigator.getGamepads();
        if (gamepads[0]) {
            const gp = gamepads[0];

            if (lastAxis0 === null) lastAxis0 = gp.axes[0];
            if (lastAxis1 === null) lastAxis1 = gp.axes[1];

            if (Math.abs(gp.axes[0] - lastAxis0) > 0.7) {
                if (gp.axes[0] > 0.7) {
                    simulateKeyPress("ArrowRight");
                } else if (gp.axes[0] < -0.7) {
                    simulateKeyPress("ArrowLeft");
                }
                lastAxis0 = gp.axes[0];
            }

            if (Math.abs(gp.axes[1] - lastAxis1) > 0.7) {
                if (gp.axes[1] > 0.7) {
                    simulateKeyPress("ArrowDown");
                } else if (gp.axes[1] < -0.7) {
                    simulateKeyPress("ArrowUp");
                }
                lastAxis1 = gp.axes[1];
            }

            if (gp.buttons[buttonESC].pressed) {
                simulateKeyPress("Escape");
            }

            if (gp.buttons[buttonLike].pressed) {
                const url = window.location.href;
                const artworksRegex1 = /\/artworks\/\d+/;
                if (artworksRegex1.test(url)) {
                    const xpath1 = '//*[@id="root"]/div[2]/div/div[3]/div/div/div[1]/main/section/div[1]/div/div[4]/div/div[2]/section/div[3]/button';
                    const xpath2 = '//*[@id="root"]/div[2]/div/div[3]/div/div/div[1]/main/section/div[1]/div/div[4]/div/div[2]/section/div[3]/a';
                    const xpath3 = '//*[@id="root"]/div[2]/div/div[3]/div/div/div[1]/main/section/div[1]/div/div[5]/div/div[2]/section/div[3]/a';
                    const element1 = document.evaluate(xpath1, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
                    const element2 = document.evaluate(xpath2, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
                    const element3 = document.evaluate(xpath3, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
                    if (element1) {
                        element1.click();
                    } else if (element2) {
                        element2.click();
                    } else if (element3) {
                        element3.click();
                    }
                }
                const artworksRegex2 = /\/bookmark_add\.php\?type=illust&illust_id=\d+/;
                if (artworksRegex2.test(url)) {
                    const xpath = '//*[@id="wrapper"]/div[1]/section/form[2]/input[7]';
                    const element = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
                    if (element) {
                        element.click();
                    }
                }
            }

            if (gp.buttons[buttonPageBack].pressed && !buttonPageBackPrevious) {
                window.history.back();
            }
            buttonPageBackPrevious = gp.buttons[buttonPageBack].pressed;

            if (gp.buttons[buttonPageForward].pressed && !buttonPageForwardPrevious) {
                window.history.forward();
            }
            buttonPageForwardPrevious = gp.buttons[buttonPageForward].pressed;

            // if (gp.buttons[buttonTabindexExit].pressed) {
            //     document.elementFromPoint(10, 10)?.click();
            // }
            // buttonTabindexExitPrevious = gp.buttons[buttonTabindexExit].pressed;
            //
            // if (gp.buttons[buttonEnter].pressed && !buttonEnterPrevious) {
            //     simulateKeyPress("Enter");
            // }
            // buttonEnterPrevious = gp.buttons[buttonEnter].pressed;
            //
            // if (gp.buttons[buttonShiftTab].pressed && !buttonShiftTabPrevious) {
            //     focusNextElement(true);
            // }
            // buttonShiftTabPrevious = gp.buttons[buttonShiftTab].pressed;
            //
            // if (gp.buttons[buttonTab].pressed && !buttonTabPrevious) {
            //     focusNextElement();
            // }
            // buttonTabPrevious = gp.buttons[buttonTab].pressed;
        }
        requestAnimationFrame(pollGamepad);
    }

    pollGamepad();

    console.log("JS script Pixiv-JoystickControl (Pixiv-摇杆控制) loaded. See more details at https://github.com/SynRGB/Pixiv-JoystickControl");
})();