PixelPlanet Old Chat UI

Restores compact chat: removes avatars, hides images, image toggle
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name         PixelPlanet Old Chat UI
// @namespace    https://pixelplanet.fun/
// @version      1.0
// @description  Restores compact chat: removes avatars, hides images, image toggle
// @author       Able
// @match        https://pixelplanet.fun/*
// @match        https://www.pixelplanet.fun/
// @grant        GM_addStyle
// @grant        GM_getValue
// @grant        GM_setValue
// @license MIT
// @run-at       document-start
// ==/UserScript==

(function () {
  'use strict';

  let imagesHidden = GM_getValue('ppoc_images_hidden', true);

  GM_addStyle(`
    div.avatar {
      display: none !important;
    }

    li.chatmsg {
      display: block !important;
      padding: 1px 4px !important;
      min-height: unset !important;
    }

    div.msgcontent {
      display: block !important;
      width: 100% !important;
      padding: 0 !important;
      margin: 0 !important;
    }

    .ppoc-images-off div.attcontainer,
    .ppoc-images-off img.attachment {
      display: none !important;
    }
    .ppoc-images-on div.attcontainer { display: block !important; }
    .ppoc-images-on img.attachment   { display: block !important; }

    #ppoc-toggle {
      position: fixed !important;
      top: 6px !important;
      right: 48px !important;
      z-index: 99999 !important;
      background: #2a2a2a !important;
      color: #fff !important;
      border: 1px solid #555 !important;
      border-radius: 4px !important;
      padding: 3px 7px !important;
      font-size: 11px !important;
      cursor: pointer !important;
      user-select: none !important;
      opacity: 0.85 !important;
      line-height: 1.4 !important;
    }
    #ppoc-toggle:hover { opacity: 1 !important; background: #444 !important; }
    #ppoc-toggle.off   { border-color: #f66 !important; color: #f99 !important; }
    #ppoc-toggle.on    { border-color: #6a6 !important; color: #9d9 !important; }
  `);

  function removeAvatars(root) {
    (root.querySelectorAll ? root : document)
      .querySelectorAll('div.avatar')
      .forEach(el => el.remove());
  }

  function applyImageState() {
    document.body.classList.toggle('ppoc-images-off', imagesHidden);
    document.body.classList.toggle('ppoc-images-on',  !imagesHidden);
    const btn = document.getElementById('ppoc-toggle');
    if (btn) {
      btn.textContent = imagesHidden ? '🖼 Images: OFF' : '🖼 Images: ON';
      btn.className   = imagesHidden ? 'off' : 'on';
    }
  }

  function injectButton() {
    if (document.getElementById('ppoc-toggle')) return;
    const btn = document.createElement('button');
    btn.id = 'ppoc-toggle';
    btn.addEventListener('click', () => {
      imagesHidden = !imagesHidden;
      GM_setValue('ppoc_images_hidden', imagesHidden);
      applyImageState();
    });
    document.body.appendChild(btn);
    applyImageState();
  }

  function startObserver() {
    new MutationObserver((mutations) => {
      for (const m of mutations) {
        for (const node of m.addedNodes) {
          if (node.nodeType !== 1) continue;
          if (node.classList && node.classList.contains('avatar')) {
            node.remove();
            continue;
          }
          removeAvatars(node);
        }
      }
    }).observe(document.body, { childList: true, subtree: true });
  }

  function init() {
    removeAvatars(document);
    applyImageState();
    injectButton();
    startObserver();
    [300, 800, 1500, 3000].forEach(t => setTimeout(() => {
      removeAvatars(document);
      injectButton();
    }, t));
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }

})();