From ab0d2e3f51a54de479271a12e584c4df33cd2636 Mon Sep 17 00:00:00 2001 From: bananarama92 Date: Thu, 9 Jul 2026 16:30:15 +0200 Subject: [PATCH 1/2] MAINT: Adapt the WCE layering screen extension to R130 --- src/functions/layeringMenu.ts | 97 +++++++++++++++++++++++++---------- src/functions/wceStyles.ts | 61 +++++++++++----------- 2 files changed, 102 insertions(+), 56 deletions(-) diff --git a/src/functions/layeringMenu.ts b/src/functions/layeringMenu.ts index 2ab1731..2acfaad 100644 --- a/src/functions/layeringMenu.ts +++ b/src/functions/layeringMenu.ts @@ -38,34 +38,77 @@ export default async function layeringMenu(): Promise { if (defaultItemHide.length === 0) return ret; const overrideItemHide = Layering.Item.Property.wceOverrideHide || defaultItemHide; const root = document.getElementById(Layering.ID.root); - root.classList.add("scroll-box"); - root.querySelector("#layering-layer-div")?.classList.remove("scroll-box"); - ElementCreate({ tag: "h1", attributes: { id: "layering-hide-header" }, parent: root, children: [displayText("[WCE] Configure layer hiding")] }); - ElementCreate({ - tag: "form", - attributes: { id: "layering-wce-hide-div" }, - classList: ["layering-layer-inner-grid"], - parent: root, - children: defaultItemHide.map(h => ({ - tag: "div", - classList: ["layering-pair"], - children: [ - ElementCheckbox.Create( - `layering-wce-hide-cb-${h}`, - () => { - const hideForm: HTMLFormElement = document.getElementById("layering-wce-hide-div") as HTMLFormElement; - Layering.Item.Property.wceOverrideHide = new FormData(hideForm).getAll("checkbox-hide") as AssetGroupName[]; - if (defaultItemHide.length === Layering.Item.Property.wceOverrideHide.length) delete Layering.Item.Property.wceOverrideHide; - // oxlint-disable-next-line no-underscore-dangle - Layering._CharacterRefresh(Layering.Character, false, false); + if (GameVersion === "R129") { + root.classList.add("scroll-box"); + root.querySelector("#layering-layer-div")?.classList.remove("scroll-box"); + ElementCreate({ tag: "h1", attributes: { id: "layering-hide-header" }, parent: root, children: [displayText("[WCE] Configure layer hiding")] }); + ElementCreate({ + tag: "form", + attributes: { id: "layering-wce-hide-div" }, + classList: ["layering-layer-inner-grid"], + parent: root, + children: defaultItemHide.map(h => ({ + tag: "div", + classList: ["layering-pair"], + children: [ + ElementCheckbox.Create( + `layering-wce-hide-cb-${h}`, + () => { + const hideForm: HTMLFormElement = document.getElementById("layering-wce-hide-div") as HTMLFormElement; + Layering.Item.Property.wceOverrideHide = new FormData(hideForm).getAll("checkbox-hide") as AssetGroupName[]; + if (defaultItemHide.length === Layering.Item.Property.wceOverrideHide.length) delete Layering.Item.Property.wceOverrideHide; + // oxlint-disable-next-line no-underscore-dangle + Layering._CharacterRefresh(Layering.Character, false, false); + }, + { value: h, disabled: Layering.Readonly, checked: overrideItemHide.includes(h) }, + { checkbox: { attributes: { name: "checkbox-hide" } } } + ), + { tag: "span", classList: ["layering-pair-text"], children: [h] }, + ], + })), + }); + } else { + // >= R130Beta1 + root.querySelector(".screen-main")?.append( + ElementCreate({ + tag: "fieldset", + attributes: { name: "wce-hide", id: "layering-wce-hide-div", "aria-labelledby": "layering-hide-header", disabled: Layering.Readonly }, + children: [ + { tag: "h2", attributes: { id: "layering-hide-header" }, children: [displayText("[WCE] Configure layer hiding")] }, + { + tag: "fieldset", + classList: ["layering-layer-inner-grid"], + children: [ + { tag: "legend" as const, children: ["Layers"] }, + ...defaultItemHide.map(h => ({ + tag: "div" as const, + classList: ["layering-pair"], + children: [ + ElementCheckbox.Create( + `layering-wce-hide-cb-${h}`, + () => { + const hidingInputs = Array.from( + document.getElementById("layering-wce-hide-div")?.querySelectorAll("input[type='checkbox']") ?? [] + ); + const hiddenGroups = hidingInputs.filter(inp => inp.checked).map(inp => inp.value as AssetGroupName); + Layering.Item.Property.wceOverrideHide = hiddenGroups; + if (defaultItemHide.length === Layering.Item.Property.wceOverrideHide.length) delete Layering.Item.Property.wceOverrideHide; + // oxlint-disable-next-line no-underscore-dangle + Layering._CharacterRefresh(Layering.Character, false, false); + }, + { value: h, checked: overrideItemHide.includes(h) }, + { checkbox: { attributes: { name: "checkbox-hide" } } } + ), + { tag: "label" as const, classList: ["layering-pair-text"], children: [h], attributes: { for: `layering-wce-hide-cb-${h}` } }, + ], + })), + ], }, - { value: h, disabled: Layering.Readonly, checked: overrideItemHide.includes(h) }, - { checkbox: { attributes: { name: "checkbox-hide" } } } - ), - { tag: "span", classList: ["layering-pair-text"], children: [h] }, - ], - })), - }); + ], + }) + ); + } + return ret; }); diff --git a/src/functions/wceStyles.ts b/src/functions/wceStyles.ts index bb3459f..a7667ad 100644 --- a/src/functions/wceStyles.ts +++ b/src/functions/wceStyles.ts @@ -3,7 +3,7 @@ import { BCE_COLOR_ADJUSTMENTS_CLASS_NAME, DARK_INPUT_CLASS, WHISPER_CLASS } fro const INPUT_WARN_CLASS = "bce-input-warn"; export default function wceStyles(): void { - const css = /* CSS */ ` + let css = /* CSS */ ` .bce-beep-link { text-decoration: none; } @@ -293,34 +293,6 @@ export default function wceStyles(): void { z-index: 100 !important; } - #layering { - grid-template: - "asset-header button-grid" min-content - "asset-grid asset-grid" min-content - "layer-header layer-header" min-content - "layer-grid layer-grid" auto - "layer-hide-header layer-hide-header" min-content - "layer-hide-grid layer-hide-grid" auto - / auto min-content - ; - } - #layering-button-grid { - top: 0; - position: sticky; - } - #layering-hide-header { - grid-area: layer-hide-header; - } - #layering-wce-hide-div { - box-sizing: border-box; - grid-area: layer-hide-grid; - width: 100%; - height: calc(100% - min(2vh, 1vw)); - padding-left: min(2vh, 1vw); - padding-right: min(2vh, 1vw); - align-self: self-start; - } - .wce-chat-room-select, #wce-chat-garble-label { font-size: 80%; @@ -374,6 +346,37 @@ export default function wceStyles(): void { --button-color: #666; } `; + if (GameVersion === "R129") { + css += ` + #layering { + grid-template: + "asset-header button-grid" min-content + "asset-grid asset-grid" min-content + "layer-header layer-header" min-content + "layer-grid layer-grid" auto + "layer-hide-header layer-hide-header" min-content + "layer-hide-grid layer-hide-grid" auto + / auto min-content + ; + } + #layering-button-grid { + top: 0; + position: sticky; + } + #layering-hide-header { + grid-area: layer-hide-header; + } + #layering-wce-hide-div { + box-sizing: border-box; + grid-area: layer-hide-grid; + width: 100%; + height: calc(100% - min(2vh, 1vw)); + padding-left: min(2vh, 1vw); + padding-right: min(2vh, 1vw); + align-self: self-start; + } + `; + } const head = document.head || document.getElementsByTagName("head")[0]; const style = document.createElement("style"); style.appendChild(document.createTextNode(css)); From c5a4c119ec13dba5529761de8e4918ed67f50292 Mon Sep 17 00:00:00 2001 From: Silizia <66546362+KittenApps@users.noreply.github.com> Date: Fri, 10 Jul 2026 00:29:56 +0200 Subject: [PATCH 2/2] fix --- src/functions/layeringMenu.ts | 77 +++++++++++++++++------------------ src/functions/wceStyles.ts | 1 + 2 files changed, 39 insertions(+), 39 deletions(-) diff --git a/src/functions/layeringMenu.ts b/src/functions/layeringMenu.ts index 2acfaad..481df1e 100644 --- a/src/functions/layeringMenu.ts +++ b/src/functions/layeringMenu.ts @@ -38,6 +38,7 @@ export default async function layeringMenu(): Promise { if (defaultItemHide.length === 0) return ret; const overrideItemHide = Layering.Item.Property.wceOverrideHide || defaultItemHide; const root = document.getElementById(Layering.ID.root); + // ToDo: remove once R130 is out if (GameVersion === "R129") { root.classList.add("scroll-box"); root.querySelector("#layering-layer-div")?.classList.remove("scroll-box"); @@ -69,46 +70,44 @@ export default async function layeringMenu(): Promise { }); } else { // >= R130Beta1 - root.querySelector(".screen-main")?.append( - ElementCreate({ - tag: "fieldset", - attributes: { name: "wce-hide", id: "layering-wce-hide-div", "aria-labelledby": "layering-hide-header", disabled: Layering.Readonly }, - children: [ - { tag: "h2", attributes: { id: "layering-hide-header" }, children: [displayText("[WCE] Configure layer hiding")] }, - { - tag: "fieldset", - classList: ["layering-layer-inner-grid"], - children: [ - { tag: "legend" as const, children: ["Layers"] }, - ...defaultItemHide.map(h => ({ - tag: "div" as const, - classList: ["layering-pair"], - children: [ - ElementCheckbox.Create( - `layering-wce-hide-cb-${h}`, - () => { - const hidingInputs = Array.from( - document.getElementById("layering-wce-hide-div")?.querySelectorAll("input[type='checkbox']") ?? [] - ); - const hiddenGroups = hidingInputs.filter(inp => inp.checked).map(inp => inp.value as AssetGroupName); - Layering.Item.Property.wceOverrideHide = hiddenGroups; - if (defaultItemHide.length === Layering.Item.Property.wceOverrideHide.length) delete Layering.Item.Property.wceOverrideHide; - // oxlint-disable-next-line no-underscore-dangle - Layering._CharacterRefresh(Layering.Character, false, false); - }, - { value: h, checked: overrideItemHide.includes(h) }, - { checkbox: { attributes: { name: "checkbox-hide" } } } - ), - { tag: "label" as const, classList: ["layering-pair-text"], children: [h], attributes: { for: `layering-wce-hide-cb-${h}` } }, - ], - })), - ], - }, - ], - }) - ); + console.log(root); + ElementCreate({ + tag: "fieldset", + attributes: { name: "wce-hide", id: "layering-wce-hide-div", "aria-labelledby": "layering-hide-header", disabled: Layering.Readonly }, + parent: root.querySelector(".screen-main"), + children: [ + { tag: "h2", attributes: { id: "layering-hide-header" }, children: [displayText("[WCE] Configure layer hiding")] }, + { + tag: "fieldset", + classList: ["layering-layer-inner-grid"], + children: [ + { tag: "legend" as const, children: ["Layers"] }, + ...defaultItemHide.map(h => ({ + tag: "div" as const, + classList: ["layering-pair"], + children: [ + ElementCheckbox.Create( + `layering-wce-hide-cb-${h}`, + () => { + const hidingInputs = document + .getElementById("layering-wce-hide-div") + ?.querySelectorAll("input[type='checkbox']:checked"); + Layering.Item.Property.wceOverrideHide = Array.from(hidingInputs).map(inp => inp.value as AssetGroupName); + if (defaultItemHide.length === Layering.Item.Property.wceOverrideHide.length) delete Layering.Item.Property.wceOverrideHide; + // oxlint-disable-next-line no-underscore-dangle + Layering._CharacterRefresh(Layering.Character, false, false); + }, + { value: h, checked: overrideItemHide.includes(h) }, + { checkbox: { attributes: { name: "checkbox-hide" } } } + ), + { tag: "label" as const, classList: ["layering-pair-text"], children: [h], attributes: { for: `layering-wce-hide-cb-${h}` } }, + ], + })), + ], + }, + ], + }); } - return ret; }); diff --git a/src/functions/wceStyles.ts b/src/functions/wceStyles.ts index a7667ad..df11931 100644 --- a/src/functions/wceStyles.ts +++ b/src/functions/wceStyles.ts @@ -346,6 +346,7 @@ export default function wceStyles(): void { --button-color: #666; } `; + // ToDo: remove once R130 is out if (GameVersion === "R129") { css += ` #layering {