perfectionist-plugins 1.9.0 → 2.4.0

package/hide-unowned-skins.js

@@ -1,10 +1,11 @@
-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";
 const HIDDEN_CLASS = "perf-unowned-skin-hidden";
 const SKIN_ITEM_SELECTOR = ".skin-selection-item";
 const DOT_SELECTOR = ".skin-selection-indicator-selector";
+const SELECTED_CLASS = "skin-selection-item-selected";
 const SESSION_URI = "/lol-champ-select/v1/session";
 const SELECTION_URI = "/lol-champ-select/v1/session/my-selection";
 const CAROUSEL_URI = "/lol-champ-select/v1/skin-carousel-skins";
@@ -17,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; }
 `;
 
@@ -161,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) => {
@@ -223,8 +224,7 @@ function installXhrFilter() {
             const kept = filterSkinList(json);
             recordClientOrder(kept ?? json);
             if (kept) cache.filtered = JSON.stringify(kept);
-          } catch {
-          }
+          } catch {}
         }
         return cache.filtered;
       };
@@ -270,6 +270,7 @@ let allSkinIds = null;
 let currentChampionId = null;
 let carouselOrder = [];
 let selectedSkinId = null;
+let lastServerSkinId = null;
 let failure = null;
 let requestToken = 0;
 let refreshTimer = null;
@@ -279,11 +280,17 @@ let selectInFlight = false;
 let sessionMisses = 0;
 let championMisses = 0;
 let renderObserver = null;
+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();
-let repackTimer = null;
-let removeStyle = null;
+const widthCache = new Map();
 
 function logError(scope, error) {
   console.error(`[Perfectionist] Hide Unowned Skins: ${scope}`, error);
@@ -295,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);
@@ -309,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++) {
@@ -327,6 +354,73 @@ function pruneRepack() {
   }
 }
 
+function guardSelection(items) {
+  const selectedIndex = items.findIndex((item) => item.classList.contains(SELECTED_CLASS));
+  if (selectedIndex < 0) return false;
+  const previous = lastSelectedDomIndex;
+  lastSelectedDomIndex = selectedIndex;
+  const selected = items[selectedIndex];
+  const hidden = selected.classList.contains(HIDDEN_CLASS) || Boolean(selected.parentElement?.classList.contains(HIDDEN_CLASS));
+  if (!hidden) {
+    lastSkipSignature = null;
+    return false;
+  }
+
+  const visible = items.map((item, index) => (item.classList.contains(HIDDEN_CLASS) ? -1 : index)).filter((index) => index >= 0);
+  if (visible.length === 0) return false;
+
+  const forward = previous < 0 ? true : selectedIndex >= previous;
+  const target = forward
+    ? (visible.find((index) => index > selectedIndex) ?? visible[0])
+    : ([...visible].reverse().find((index) => index < selectedIndex) ?? visible[visible.length - 1]);
+  const skinId = readSkinId(items[target]);
+  if (skinId === null) return false;
+
+  const signature = `${selectedIndex}:${skinId}`;
+  if (lastSkipSignature === signature) return true;
+  const now = Date.now();
+  if (now < navFixAt) return true;
+  navFixAt = now + 150;
+  lastSkipSignature = signature;
+  lastSelectedDomIndex = target;
+  selectSkin(skinId).catch((error) => logError("could not skip the unowned skin.", error));
+  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));
@@ -335,25 +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) => item.getBoundingClientRect().width || (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`;
@@ -370,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() {
@@ -400,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);
@@ -411,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);
@@ -424,8 +514,10 @@ function applyAll() {
     else if (dotsHidden === 0 && dotList.hasAttribute("data-perf-dots")) dotList.removeAttribute("data-perf-dots");
   }
 
-  if (ownedSkinIds !== null && hidden > 0) scheduleRepack();
-  else if (hidden === 0) restoreRepack();
+  if (ownedSkinIds !== null && hidden > 0) {
+    if (guardSelection(items)) runRepack();
+    else scheduleRepack();
+  } else if (hidden === 0) restoreRepack();
 }
 
 function scheduleRepack() {
@@ -433,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();
@@ -442,7 +555,7 @@ function runRepack() {
     if (ownedSkinIds !== null && hidden) repackVisibleItems(items);
     else restoreRepack();
   } finally {
-    renderObserver?.observe(document.documentElement ?? document, OBSERVER_OPTIONS);
+    startRenderObserver();
   }
 }
 
@@ -451,7 +564,7 @@ function applyAllGuarded() {
   try {
     applyAll();
   } finally {
-    renderObserver?.observe(document.documentElement ?? document, OBSERVER_OPTIONS);
+    startRenderObserver();
   }
 }
 
@@ -585,11 +698,13 @@ function updateForSession(session, selection) {
 
   const knownUnownedSkin = allSkinIds !== null && allSkinIds.has(serverSkinId) && !ownedSkinIds.has(serverSkinId);
   if (!selectInFlight && knownUnownedSkin) {
-    const fallback = nextOwnedSkin(ownedSkinIds, 0, 1);
+    const direction = lastServerSkinId !== null && serverSkinId !== null && serverSkinId < lastServerSkinId ? -1 : 1;
+    const fallback = nextOwnedSkin(ownedSkinIds, serverSkinId ?? 0, direction) ?? nextOwnedSkin(ownedSkinIds, 0, 1);
     if (fallback !== null) {
       selectSkin(fallback).catch((error) => logError("could not correct the selected skin.", error));
     }
   }
+  if (!selectInFlight && belongsToChampion && ownedSkinIds.has(serverSkinId)) lastServerSkinId = serverSkinId;
 
   applyAllGuarded();
 }
@@ -606,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);
 }
 
@@ -621,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;
   }
@@ -634,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();
@@ -658,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,6 +1,6 @@
 {
   "name": "perfectionist-plugins",
-  "version": "1.9.0",
+  "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",
@@ -11,7 +11,8 @@
     "./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"
+    "./auto-read.js": "./auto-read.js",
+    "./better-client.js": "./better-client.js"
   },
   "files": [
     "perfectionist-utils.js",
@@ -19,7 +20,8 @@
     "hide-unowned-skins.js",
     "unlock-profile-skins.js",
     "auto-claimer.js",
-    "auto-read.js"
+    "auto-read.js",
+    "better-client.js"
   ],
   "repository": {
     "type": "git",

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 = "1.8.0";
+export const version = "2.4.0";
 
 const PKG = "perfectionist-plugins";
 const CDN = "https://cdn.jsdelivr.net/npm";
@@ -22,6 +22,13 @@ const BUNDLED_MODULES = [
     description: "Shared core for the Perfectionism plugins.",
     core: true,
   },
+  {
+    id: "better-client",
+    file: "better-client.js",
+    name: "BetterClient",
+    version: "1.7.0",
+    description: "Debloats the client: blocks telemetry, merges duplicate requests, caches immutable data, decodes images asynchronously and fixes several bugs.",
+  },
   {
     id: "ban-blocker",
     file: "ban-blocker.js",
@@ -29,20 +36,20 @@ const BUNDLED_MODULES = [
     version: "3.6.0",
     description: "During bans, blocking a teammate instantly claims the champion they hover to ban.",
   },
-  {
-    id: "hide-unowned-skins",
-    file: "hide-unowned-skins.js",
-    name: "Hide Unowned Skins",
-    version: "2.4.0",
-    description: "In champion select, only shows the skins you own for the picked champion.",
-  },
   {
     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.5.1",
+    description: "In champion select, only shows the skins you own for the picked champion.",
+  },
   {
     id: "auto-claimer",
     file: "auto-claimer.js",
@@ -120,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;
@@ -334,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];
@@ -629,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 ?? "";
@@ -651,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;
@@ -660,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;
@@ -741,9 +800,6 @@ function installedModules() {
   return getAvailableModules().filter(isInstalled);
 }
 
-// The master switch is a UI lock only: it greys out every card's settings and
-// toggle (same treatment as a disabled parent's child options) while each
-// plugin keeps its own enabled/disabled state untouched.
 function masterLocked() {
   return installedModules().length > 0 && state.masterLocked === true;
 }
@@ -1016,6 +1072,7 @@ const utils = {
   getAvailableModules,
   installModule,
   uninstallModule,
+  loadPluginFile,
   checkForUpdates,
   watch,
   waitFor,