perfectionist-plugins 2.0.0 → 2.4.0

package/hide-unowned-skins.js

@@ -1,4 +1,4 @@
-export const version = "2.4.0";
+export const version = "2.5.1";
 
 const PLUGIN_ID = "hide-unowned-skins";
 const STYLE_ID = "perfectionist-hide-unowned-skins-style";
@@ -18,7 +18,7 @@ const RETRY_MS = 5000;
 const STATE_KEY = "perfectionist-plugins:state";
 
 const CSS = `
-.${HIDDEN_CLASS} { display: none !important; margin: 0 !important; padding: 0 !important; border: none !important; }
+.${HIDDEN_CLASS} { display: none !important; margin: 0 !important; padding: 0 !important; border: none !important; pointer-events: none !important; }
 [data-perf-dots] { justify-content: center !important; }
 `;
 
@@ -162,13 +162,13 @@ function installFetchFilter() {
 
   const wrapped = function (input, init) {
     const url =
-    typeof input === "string"
-      ? input
-      : typeof input?.url === "string"
-        ? input.url
-        : typeof input?.href === "string"
-          ? input.href
-          : "";
+      typeof input === "string"
+        ? input
+        : typeof input?.url === "string"
+          ? input.url
+          : typeof input?.href === "string"
+            ? input.href
+            : "";
     const promise = original.call(this, input, init);
     if (!filterActive || url.split("?")[0].indexOf(CAROUSEL_URI) === -1) return promise;
     return promise.then((response) => {
@@ -224,8 +224,7 @@ function installXhrFilter() {
             const kept = filterSkinList(json);
             recordClientOrder(kept ?? json);
             if (kept) cache.filtered = JSON.stringify(kept);
-          } catch {
-          }
+          } catch {}
         }
         return cache.filtered;
       };
@@ -281,14 +280,16 @@ let selectInFlight = false;
 let sessionMisses = 0;
 let championMisses = 0;
 let renderObserver = null;
-const repackOriginals = new Map();
-const lastAppliedLeft = new Map();
-const skinSuffixCache = new Map();
+let sessionActive = false;
 let repackTimer = null;
 let removeStyle = null;
 let lastSelectedDomIndex = -1;
 let navFixAt = 0;
 let lastSkipSignature = null;
+let itemSkinIds = new WeakMap();
+const repackOriginals = new Map();
+const lastAppliedLeft = new Map();
+const skinSuffixCache = new Map();
 const widthCache = new Map();
 
 function logError(scope, error) {
@@ -301,7 +302,8 @@ function skinSuffixOf(text) {
   return /Skins\/Base\//i.test(text) ? 0 : null;
 }
 
-function readSkinId(item) {
+function skinIdFromImages(item) {
+  if (currentChampionId === null) return null;
   for (const img of item.querySelectorAll("img[src]")) {
     const src = img.getAttribute("src");
     let suffix = skinSuffixCache.get(src);
@@ -315,6 +317,25 @@ function readSkinId(item) {
   return suffix === null ? null : currentChampionId * 1000 + suffix;
 }
 
+function readSkinId(item) {
+  return itemSkinIds.get(item) ?? skinIdFromImages(item);
+}
+
+function effectiveOrder() {
+  return clientSkinOrder.length > 0 ? clientSkinOrder : carouselOrder;
+}
+
+function mapCarouselToItems(items) {
+  const order = effectiveOrder();
+  itemSkinIds = new WeakMap();
+  if (order.length === 0 || order.length !== items.length) return false;
+  items.forEach((item, index) => {
+    const id = order[index];
+    if (typeof id === "number") itemSkinIds.set(item, id);
+  });
+  return true;
+}
+
 function hideTargetFor(item) {
   let target = item;
   for (let depth = 0; depth < 2; depth++) {
@@ -366,6 +387,40 @@ function guardSelection(items) {
   return true;
 }
 
+function leftToPx(item, raw) {
+  if (!raw) return 0;
+  if (raw.endsWith("px")) return parseFloat(raw);
+  if (raw.endsWith("%")) return (parseFloat(raw) / 100) * (item.parentElement?.offsetWidth || 468);
+  return 0;
+}
+
+function originalLeftOf(item) {
+  const original = repackOriginals.get(item);
+  return leftToPx(item, original ? original.value : item.style.getPropertyValue("left"));
+}
+
+function refreshOriginal(item) {
+  const current = item.style.getPropertyValue("left");
+  const priority = item.style.getPropertyPriority("left");
+  const last = lastAppliedLeft.get(item);
+  if (last !== undefined && current === last && priority === "important") return;
+  repackOriginals.set(item, { value: current, priority });
+  lastAppliedLeft.delete(item);
+}
+
+function widthOf(item, anchor) {
+  if (item.offsetWidth > 0) {
+    widthCache.set(item, item.offsetWidth);
+    return item.offsetWidth;
+  }
+  const measured = item.getBoundingClientRect().width;
+  if (measured > 0) {
+    widthCache.set(item, measured);
+    return measured;
+  }
+  return widthCache.get(item) ?? (item === anchor ? 117 : 73);
+}
+
 function repackVisibleItems(items) {
   pruneRepack();
   const visible = items.filter((item) => !item.classList.contains(HIDDEN_CLASS));
@@ -374,32 +429,15 @@ function repackVisibleItems(items) {
     return;
   }
 
-  const selectedIndex = items.findIndex((item) => item.classList.contains("skin-selection-item-selected"));
+  const selectedIndex = items.findIndex((item) => item.classList.contains(SELECTED_CLASS));
   let anchor = selectedIndex >= 0 ? items[selectedIndex] : null;
   if (!anchor && selectedSkinId !== null) {
     anchor = visible.find((item) => readSkinId(item) === selectedSkinId) ?? null;
   }
   if (!anchor) anchor = visible[Math.floor(visible.length / 2)];
   const anchorDomIndex = items.indexOf(anchor);
-
-  const widthOf = (item) => {
-    const measured = item.getBoundingClientRect().width;
-    if (measured > 0) {
-      widthCache.set(item, measured);
-      return measured;
-    }
-    return widthCache.get(item) ?? (item === anchor ? 117 : 73);
-  };
-  const toPx = (item) => {
-    const raw = item.style.left || "0";
-    if (raw.endsWith("px")) return parseFloat(raw);
-    const box = item.parentElement?.getBoundingClientRect().width || 468;
-    return (parseFloat(raw) / 100) * box;
-  };
-
-  const anchorLeft = toPx(anchor);
-  let rightX = anchorLeft + widthOf(anchor);
-  let leftX = anchorLeft;
+  refreshOriginal(anchor);
+  const anchorLeft = originalLeftOf(anchor);
 
   const setLeft = (item, x) => {
     const want = `${x}px`;
@@ -416,19 +454,23 @@ function repackVisibleItems(items) {
     lastAppliedLeft.set(item, want);
   };
 
-  items.forEach((item, index) => {
-    if (item === anchor || item.classList.contains(HIDDEN_CLASS)) return;
+  let rightX = anchorLeft + widthOf(anchor, anchor);
+  for (let index = anchorDomIndex + 1; index < items.length; index++) {
+    const item = items[index];
+    if (item.classList.contains(HIDDEN_CLASS)) continue;
+    const width = widthOf(item, anchor);
+    setLeft(item, rightX);
+    rightX += width;
+  }
 
-    const isRight = index > anchorDomIndex;
-    const w = widthOf(item);
-    if (isRight) {
-      setLeft(item, rightX);
-      rightX += w;
-    } else {
-      leftX -= w;
-      setLeft(item, leftX);
-    }
-  });
+  let leftX = anchorLeft;
+  for (let index = anchorDomIndex - 1; index >= 0; index--) {
+    const item = items[index];
+    if (item.classList.contains(HIDDEN_CLASS)) continue;
+    const width = widthOf(item, anchor);
+    leftX -= width;
+    setLeft(item, leftX);
+  }
 }
 
 function restoreRepack() {
@@ -446,6 +488,7 @@ function restoreRepack() {
 
 function applyAll() {
   const items = [...document.querySelectorAll(SKIN_ITEM_SELECTOR)];
+  mapCarouselToItems(items);
   let hidden = 0;
   items.forEach((item) => {
     const skinId = currentChampionId === null ? null : readSkinId(item);
@@ -457,9 +500,10 @@ function applyAll() {
 
   const dots = [...document.querySelectorAll(DOT_SELECTOR)];
   let dotsHidden = 0;
-  const dotsMapped = carouselOrder.length > 0 && dots.length === carouselOrder.length;
+  const dotOrder = effectiveOrder();
+  const dotsMapped = dotOrder.length > 0 && dots.length === dotOrder.length;
   dots.forEach((dot, index) => {
-    const skinId = dotsMapped ? carouselOrder[index] : undefined;
+    const skinId = dotsMapped ? dotOrder[index] : undefined;
     const hide = ownedSkinIds !== null && skinId !== undefined && allSkinIds !== null && allSkinIds.has(skinId) && !ownedSkinIds.has(skinId);
     if (hide) dotsHidden++;
     dot.classList.toggle(HIDDEN_CLASS, hide);
@@ -481,6 +525,27 @@ function scheduleRepack() {
   repackTimer = setTimeout(runRepack, REPACK_SETTLE_MS);
 }
 
+function startRenderObserver() {
+  if (!sessionActive || renderObserver || !api) return;
+  renderObserver = new MutationObserver(() => {
+    ensureSourceFilter();
+    const item = document.querySelector(SKIN_ITEM_SELECTOR);
+    if (!item && !document.querySelector(DOT_SELECTOR)) return;
+    applyAllGuarded();
+    if (item) scheduleRefresh();
+  });
+  try {
+    renderObserver.observe(document.documentElement ?? document, OBSERVER_OPTIONS);
+  } catch {
+    renderObserver = null;
+  }
+}
+
+function stopRenderObserver() {
+  renderObserver?.disconnect();
+  renderObserver = null;
+}
+
 function runRepack() {
   repackTimer = null;
   renderObserver?.disconnect();
@@ -490,7 +555,7 @@ function runRepack() {
     if (ownedSkinIds !== null && hidden) repackVisibleItems(items);
     else restoreRepack();
   } finally {
-    renderObserver?.observe(document.documentElement ?? document, OBSERVER_OPTIONS);
+    startRenderObserver();
   }
 }
 
@@ -499,7 +564,7 @@ function applyAllGuarded() {
   try {
     applyAll();
   } finally {
-    renderObserver?.observe(document.documentElement ?? document, OBSERVER_OPTIONS);
+    startRenderObserver();
   }
 }
 
@@ -656,11 +721,15 @@ function scheduleRefresh() {
 function onSessionPush(raw) {
   const msg = raw ?? {};
   if (msg.eventType === "Delete") {
+    sessionActive = false;
+    stopRenderObserver();
     resetState();
     return;
   }
   const s = msg.data ?? msg;
   if (!s?.myTeam) return;
+  sessionActive = true;
+  startRenderObserver();
   updateForSession(s, null);
 }
 
@@ -671,11 +740,17 @@ async function pollSession() {
   try {
     const session = await api.lcu.get(SESSION_URI);
     sessionMisses = 0;
+    sessionActive = true;
+    startRenderObserver();
     const selection = await api.lcu.get(SELECTION_URI).catch(() => null);
     updateForSession(session, selection);
   } catch {
     sessionMisses++;
-    if (sessionMisses >= 3) resetState();
+    if (sessionMisses >= 3) {
+      sessionActive = false;
+      stopRenderObserver();
+      resetState();
+    }
   } finally {
     pollInFlight = false;
   }
@@ -684,17 +759,9 @@ async function pollSession() {
 function onEnable(utils) {
   api = utils;
   filterActive = true;
+  sessionActive = false;
   removeStyle = api.addStyle(STYLE_ID, CSS);
 
-  renderObserver = new MutationObserver(() => {
-    ensureSourceFilter();
-    const item = document.querySelector(SKIN_ITEM_SELECTOR);
-    if (!item && !document.querySelector(DOT_SELECTOR)) return;
-    applyAllGuarded();
-    if (item) scheduleRefresh();
-  });
-  renderObserver.observe(document.documentElement ?? document, OBSERVER_OPTIONS);
-
   window.addEventListener("resize", onWindowResize);
   unsubscribe = api.subscribe(SESSION_URI, onSessionPush);
   pollSession();
@@ -708,9 +775,9 @@ function onDisable() {
   refreshTimer = null;
   clearTimeout(repackTimer);
   repackTimer = null;
-  renderObserver?.disconnect();
+  sessionActive = false;
+  stopRenderObserver();
   removeStyle?.();
-  renderObserver = null;
   removeStyle = null;
   filterActive = false;
 

package/package.json

@@ -1,37 +1,36 @@
-{
-  "name": "perfectionist-plugins",
-  "version": "2.0.0",
-  "description": "Small plugins that fix the annoying parts of League of Legends champ select. Built for Pengu Loader.",
-  "type": "module",
-  "main": "perfectionist-utils.js",
-  "exports": {
-    ".": "./perfectionist-utils.js",
-    "./perfectionist-utils.js": "./perfectionist-utils.js",
-    "./ban-blocker.js": "./ban-blocker.js",
-    "./hide-unowned-skins.js": "./hide-unowned-skins.js",
-    "./unlock-profile-skins.js": "./unlock-profile-skins.js",
-    "./auto-claimer.js": "./auto-claimer.js",
-    "./auto-read.js": "./auto-read.js",
-    "./better-client.js": "./better-client.js"
-  },
-  "files": [
-    "perfectionist-utils.js",
-    "ban-blocker.js",
-    "hide-unowned-skins.js",
-    "unlock-profile-skins.js",
-    "auto-claimer.js",
-    "auto-read.js",
-    "better-client.js",
-    "tools/betterclient-monitor.js"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/SrKing-9812/Perfectionist-Plugins.git"
-  },
-  "keywords": [
-    "pengu-loader",
-    "league-of-legends",
-    "plugin"
-  ],
-  "author": "Sr. King"
-}
+{
+  "name": "perfectionist-plugins",
+  "version": "2.4.0",
+  "description": "Small plugins that fix the annoying parts of League of Legends champ select. Built for Pengu Loader.",
+  "type": "module",
+  "main": "perfectionist-utils.js",
+  "exports": {
+    ".": "./perfectionist-utils.js",
+    "./perfectionist-utils.js": "./perfectionist-utils.js",
+    "./ban-blocker.js": "./ban-blocker.js",
+    "./hide-unowned-skins.js": "./hide-unowned-skins.js",
+    "./unlock-profile-skins.js": "./unlock-profile-skins.js",
+    "./auto-claimer.js": "./auto-claimer.js",
+    "./auto-read.js": "./auto-read.js",
+    "./better-client.js": "./better-client.js"
+  },
+  "files": [
+    "perfectionist-utils.js",
+    "ban-blocker.js",
+    "hide-unowned-skins.js",
+    "unlock-profile-skins.js",
+    "auto-claimer.js",
+    "auto-read.js",
+    "better-client.js"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/SrKing-9812/Perfectionist-Plugins.git"
+  },
+  "keywords": [
+    "pengu-loader",
+    "league-of-legends",
+    "plugin"
+  ],
+  "author": "Sr. King"
+}

package/perfectionist-utils.js

@@ -6,7 +6,7 @@ const PANEL_ID = "perfectionist-plugins-panel";
 const STYLE_ID = "perfectionist-plugins-style";
 const TAB_TITLE = "Perfectionism";
 
-export const version = "2.0.0";
+export const version = "2.4.0";
 
 const PKG = "perfectionist-plugins";
 const CDN = "https://cdn.jsdelivr.net/npm";
@@ -26,7 +26,7 @@ const BUNDLED_MODULES = [
     id: "better-client",
     file: "better-client.js",
     name: "BetterClient",
-    version: "1.2.0",
+    version: "1.7.0",
     description: "Debloats the client: blocks telemetry, merges duplicate requests, caches immutable data, decodes images asynchronously and fixes several bugs.",
   },
   {
@@ -40,14 +40,14 @@ const BUNDLED_MODULES = [
     id: "unlock-profile-skins",
     file: "unlock-profile-skins.js",
     name: "Unlock Profile Skins",
-    version: "1.2.1",
+    version: "1.2.4",
     description: "Unlocks every skin in the Set profile background window.",
   },
   {
     id: "hide-unowned-skins",
     file: "hide-unowned-skins.js",
     name: "Hide Unowned Skins",
-    version: "2.4.0",
+    version: "2.5.1",
     description: "In champion select, only shows the skins you own for the picked champion.",
   },
   {
@@ -127,6 +127,9 @@ const STYLE_CSS = `
 #${PANEL_ID} .perf-chip:hover { color: #f0e6d2; border-color: #c89b3c; }
 #${PANEL_ID} .perf-chip--on { color: #010a13; background: #c89b3c; border-color: #c89b3c; }
 #${PANEL_ID} .perf-chip--on:hover { background: #f0e6d2; }
+#${PANEL_ID} .perf-info { margin-top: 11px; padding-top: 8px; border-top: 1px solid rgba(120, 90, 40, 0.35); }
+#${PANEL_ID} .perf-info-line { font-size: 10px; line-height: 16px; letter-spacing: 0.2px; color: #a09b8c;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 
 #${PANEL_ID} .perf-tools { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; margin-bottom: 14px; }
 #${PANEL_ID} .perf-search { flex: 1 1 auto; min-width: 0; box-sizing: border-box;
@@ -341,6 +344,14 @@ function importModule(url) {
   return coords?.importModule ? coords.importModule(url) : import(url);
 }
 
+// Lets a feature module (BetterClient → Pages Remake) pull its code only when enabled.
+// A local override keeps the dev harness on freshly edited files instead of the CDN copy.
+function loadPluginFile(file) {
+  const local = typeof window !== "undefined" ? window.PerfectionistLocalBase : null;
+  const url = local ? new URL(file, local).href : moduleUrl(file);
+  return importModule(url);
+}
+
 async function installModule(mod) {
   state.installed[mod.id] = true;
   delete state.enabled[mod.id];
@@ -636,6 +647,17 @@ function buildOptionRow(mod, option, disabled, onChange) {
   return row;
 }
 
+function buildInfo(option) {
+  const block = el("div", "perf-info");
+  if (option.label) block.append(el("div", "perf-chips-label", option.label));
+  let lines = [];
+  try {
+    lines = option.lines?.() ?? [];
+  } catch {}
+  for (const line of lines) block.append(el("div", "perf-info-line", String(line)));
+  return block;
+}
+
 function buildChips(mod, option, locked) {
   const block = el("div", "perf-chip-block");
   block.title = option.description ?? "";
@@ -658,6 +680,28 @@ function buildChips(mod, option, locked) {
   return block;
 }
 
+function buildAction(option, locked) {
+  const button = el("button", "perf-btn", option.label);
+  button.type = "button";
+  button.title = option.description ?? "";
+  button.disabled = Boolean(locked);
+  button.addEventListener("click", async () => {
+    const original = button.textContent;
+    button.disabled = true;
+    try {
+      await option.onClick?.();
+      button.textContent = "Copied";
+    } catch {
+      button.textContent = "Copy failed";
+    }
+    setTimeout(() => {
+      button.textContent = original;
+      button.disabled = Boolean(locked);
+    }, 1600);
+  });
+  return button;
+}
+
 function buildOptions(mod, locked) {
   const options = registry.get(mod.id)?.options ?? [];
   if (options.length === 0) return null;
@@ -667,6 +711,14 @@ function buildOptions(mod, locked) {
       wrap.append(buildChips(mod, option, locked));
       continue;
     }
+    if (option.type === "info") {
+      wrap.append(buildInfo(option));
+      continue;
+    }
+    if (option.type === "action") {
+      wrap.append(buildAction(option, locked));
+      continue;
+    }
     if (!option.children?.length) {
       wrap.append(buildOptionRow(mod, option, Boolean(locked)));
       continue;
@@ -1020,6 +1072,7 @@ const utils = {
   getAvailableModules,
   installModule,
   uninstallModule,
+  loadPluginFile,
   checkForUpdates,
   watch,
   waitFor,