IdlePixel Chat window resizer handle

Resize the chat window to your heart's content
换行
// ==UserScript==
// @name         IdlePixel Chat window resizer handle
// @namespace    com.zlef.idlepixel
// @version      1.0.0
// @description  Resize the chat window to your heart's content
// @author       Zlef
// @license      MIT
// @match        *://idle-pixel.com/login/play*
// @grant        none
// @require      https://gf.qytechs.cn/scripts/441206-idlepixel/code/IdlePixel+.js?anticache=20220905
// ==/UserScript==

(function() {
    'use strict';

    class ChatResizer extends IdlePixelPlusPlugin {
        constructor() {
            super("chatresizer", {
                about: {
                    name: GM_info.script.name,
                    version: GM_info.script.version,
                    author: GM_info.script.author,
                    description: GM_info.script.description
                }
            });
        }

        onLogin() {
            // Add the resizable handle to the chat window
            this.addResizableHandle();
        }

        addResizableHandle() {
            // Assuming the chat window has an ID of 'game-chat' and the game has an ID of 'game-screen'
            const chat = $('#game-chat');
            const game = $('#game-screen');

            // Create the resizer div and insert it between the game and chat divs
            const resizer = $('<div id="chat-resizer-handle"></div>');
            resizer.insertAfter(game); // Place the resizer after the game div

            // Make the resizer handle interactive
            resizer.draggable({
                axis: 'x',
                containment: 'parent', // Contain the drag within the parent element
                drag: (event, ui) => {
                    const totalWidth = game.width() + chat.width();
                    const gameWidth = ui.position.left;
                    const chatWidth = totalWidth - gameWidth;

                    // Update the widths of game and chat divs
                    game.width(gameWidth);
                    chat.width(chatWidth);

                    // Move the chat div to the new position
                    chat.css('left', gameWidth);
                }
            });

            // Style the handle
            resizer.css({
                width: '5px',
                height: '100%',
                cursor: 'ew-resize',
                'background-color': 'gray',
                position: 'absolute',
                top: 0,
                // Position the resizer to the left edge of the chat div
                left: game.width()
            });

            // Initial position adjustment for chat
            chat.css({
                position: 'absolute', // Make the chat div absolute
                left: game.width(), // Position it next to the game div
                width: chat.width() // Set the initial width if needed
            });

        }
    }

    // Update class initialiser
    const plugin = new ChatResizer();
    IdlePixelPlus.registerPlugin(plugin);

})();
欢迎访问Greasy Fork镜像
