☰

IdlePixel Chat window resizer handle

Resize the chat window to your heart's content

  1. // ==UserScript==
  2. // @name         IdlePixel Chat window resizer handle
  3. // @namespace    com.zlef.idlepixel
  4. // @version      1.0.0
  5. // @description  Resize the chat window to your heart's content
  6. // @author       Zlef
  7. // @license      MIT
  8. // @match        *://idle-pixel.com/login/play*
  9. // @grant        none
  10. // @require      https://greasyfork.org/scripts/441206-idlepixel/code/IdlePixel+.js?anticache=20220905
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.  
  16.     class ChatResizer extends IdlePixelPlusPlugin {
  17.         constructor() {
  18.             super("chatresizer", {
  19.                 about: {
  20.                     name: GM_info.script.name,
  21.                     version: GM_info.script.version,
  22.                     author: GM_info.script.author,
  23.                     description: GM_info.script.description
  24.                 }
  25.             });
  26.         }
  27.  
  28.         onLogin() {
  29.             // Add the resizable handle to the chat window
  30.             this.addResizableHandle();
  31.         }
  32.  
  33.         addResizableHandle() {
  34.             // Assuming the chat window has an ID of 'game-chat' and the game has an ID of 'game-screen'
  35.             const chat = $('#game-chat');
  36.             const game = $('#game-screen');
  37.  
  38.             // Create the resizer div and insert it between the game and chat divs
  39.             const resizer = $('<div id="chat-resizer-handle"></div>');
  40.             resizer.insertAfter(game); // Place the resizer after the game div
  41.  
  42.             // Make the resizer handle interactive
  43.             resizer.draggable({
  44.                 axis: 'x',
  45.                 containment: 'parent', // Contain the drag within the parent element
  46.                 drag: (event, ui) => {
  47.                     const totalWidth = game.width() + chat.width();
  48.                     const gameWidth = ui.position.left;
  49.                     const chatWidth = totalWidth - gameWidth;
  50.  
  51.                     // Update the widths of game and chat divs
  52.                     game.width(gameWidth);
  53.                     chat.width(chatWidth);
  54.  
  55.                     // Move the chat div to the new position
  56.                     chat.css('left', gameWidth);
  57.                 }
  58.             });
  59.  
  60.             // Style the handle
  61.             resizer.css({
  62.                 width: '5px',
  63.                 height: '100%',
  64.                 cursor: 'ew-resize',
  65.                 'background-color': 'gray',
  66.                 position: 'absolute',
  67.                 top: 0,
  68.                 // Position the resizer to the left edge of the chat div
  69.                 left: game.width()
  70.             });
  71.  
  72.             // Initial position adjustment for chat
  73.             chat.css({
  74.                 position: 'absolute', // Make the chat div absolute
  75.                 left: game.width(), // Position it next to the game div
  76.                 width: chat.width() // Set the initial width if needed
  77.             });
  78.  
  79.         }
  80.     }
  81.  
  82.     // Update class initialiser
  83.     const plugin = new ChatResizer();
  84.     IdlePixelPlus.registerPlugin(plugin);
  85.  
  86. })();