WarEra: Inventory Equipment Icon Toggle

Add an option in the Inventory interface to toggle the visibility of Equipment icons, allowing more content to be displayed at once.
安裝腳本 ?
發表問題、評論、或檢舉該腳本。
換行
// ==UserScript==
// @name             WarEra: Inventory Equipment Icon Toggle
// @namespace        -
// @version          0.17.9-beta-2025Oct15-3
// @description      Add an option in the Inventory interface to toggle the visibility of Equipment icons, allowing more content to be displayed at once.
// @author           LianSheng
// @match            https://app.warera.io/*
// @grant            none
// @run-at           document-idle
// @license          MIT
// ==/UserScript==

(function() {
    'use strict';

    setInterval(_ => {
        if (location.href.endsWith("inventory")) {
            const html = `
<div id="__show_icon_container__" class="_1dnmndyahi _1dnmndyafk _1dnmndyajg _1dnmndyjt7 _1dnmndykfp" style="bottom: -12px; right: 20px;">
  <label class="switch-container">
    Show Icon
    <div class="switch">
      <input id="_showIconSwitch" type="checkbox" checked>
      <span class="slider"></span>
    </div>
  </label>
  <style>
    .switch-container {
      display: flex;
      align-items: center;
      gap: 8px;
      font-family: sans-serif;
      font-size: 14px;
    }

    .switch {
      position: relative;
      width: 40px;
      height: 20px;
    }

    .switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .slider {
      position: absolute;
      cursor: pointer;
      inset: 0;
      background: linear-gradient(to right, #4caf50 50%, #f44336 50%);
      background-size: 200% 100%;
      background-position: right;
      border-radius: 20px;
      transition: background-position 0.2s;
    }

    .slider::before {
      content: "";
      position: absolute;
      height: 16px;
      width: 16px;
      left: 2px;
      top: 2px;
      background-color: white;
      border-radius: 50%;
      transition: transform 0.2s;
    }

    input:checked+.slider {
      background-position: left;
    }

    input:checked+.slider::before {
      transform: translateX(20px);
    }
  </style>
</div>`;
            const topMenuElem = document.querySelector("#layoutUserMenu");

            if (topMenuElem === null) {
                return;
            }

            if (!topMenuElem.querySelector("#__show_icon_container__")) {
                topMenuElem.insertAdjacentHTML("beforeend", html);
            }

            let switchElem = topMenuElem.querySelector("#_showIconSwitch");

            const weaponElems = document.querySelectorAll("._1dnmndy1oz._1dnmndyk0p._1dnmndyk87._1dnmndyafk._1dnmndyajg._1dnmndyjtc > ._1dnmndykfk");
            const notWeaponElems = document.querySelectorAll("._1dnmndy1oz._1dnmndyago._1dnmndyk0p._1dnmndyk87._1dnmndyafk._1dnmndyajg._1dnmndyjtc > ._1dnmndykfk");
            const equipmentElems = [...weaponElems, ...notWeaponElems];
            switchElem.onchange = () => {
                if (switchElem.checked) {
                    equipmentElems.forEach(e => {
                        const box = e.querySelector("[class='_1dnmndykfk']");
                        const icon = e.querySelector("img");

                        box.style.height = "48px";
                        icon.style.display = "";
                    });
                } else {
                    equipmentElems.forEach(e => {
                        const box = e.querySelector("[class='_1dnmndykfk']");
                        const icon = e.querySelector("img");

                        box.style.height = "0px";
                        icon.style.display = "none";

                    });
                }
            }
        } else {
            const containerElem = document.querySelector("#__show_icon_container__");

            if(containerElem !== null) {
                containerElem.remove();
            }
        }
    }, 50);
})();