diff --git a/dev/shots/skills-window-chain.png b/dev/shots/skills-window-chain.png index e11a7c9..09b2f5e 100644 Binary files a/dev/shots/skills-window-chain.png and b/dev/shots/skills-window-chain.png differ diff --git a/dev/shots/skills-window-closed.png b/dev/shots/skills-window-closed.png index 61bb9ef..999c503 100644 Binary files a/dev/shots/skills-window-closed.png and b/dev/shots/skills-window-closed.png differ diff --git a/dev/shots/skills-window-long-tree.png b/dev/shots/skills-window-long-tree.png index 6c08568..31f7bdd 100644 Binary files a/dev/shots/skills-window-long-tree.png and b/dev/shots/skills-window-long-tree.png differ diff --git a/dev/shots/skills-window-ranked.png b/dev/shots/skills-window-ranked.png index cb6fee1..3e9f69d 100644 Binary files a/dev/shots/skills-window-ranked.png and b/dev/shots/skills-window-ranked.png differ diff --git a/dev/shots/skills-window-selected.png b/dev/shots/skills-window-selected.png index cca2346..83cdf7e 100644 Binary files a/dev/shots/skills-window-selected.png and b/dev/shots/skills-window-selected.png differ diff --git a/js/ui/SkillWindow.js b/js/ui/SkillWindow.js index cb9bc24..2a2b5be 100644 --- a/js/ui/SkillWindow.js +++ b/js/ui/SkillWindow.js @@ -405,28 +405,33 @@ export class SkillWindow extends Phaser.GameObjects.Container { * door answers with the refusal copy — the same honest wall as the bar). */ button(x, y, w, h, label, accent, onPress, { inert = false, tag = '', kind = null, rowId = null, align = 0.5 } = {}) { const g = this.scene.add.graphics().setDepth(DEPTH); + // The fill joins the container FIRST, before the label below is added: container + // children paint in add-order, so a fill added after the text would cover it with + // its 0.8-alpha panel and leave the label at ~20% brightness (dark-on-dark). + this.add(g); const paint = (hot) => { g.clear(); g.fillStyle(C.panel, hot && !inert ? 0.95 : 0.8); - g.lineStyle(1, inert ? C.faint : accent, inert ? 0.7 : hot ? 1 : 0.85); + g.lineStyle(1, inert ? C.dim : accent, inert ? 0.6 : hot ? 1 : 0.85); g.strokeRoundedRect(x, y, w, h, 3); g.fillRect(x, y, w, h); if (!inert) { // The lit base-line: a button that can act reads lit even without the cursor. - g.fillStyle(inert ? C.faint : accent, hot ? 1 : 0.75); + g.fillStyle(accent, hot ? 1 : 0.75); g.fillRect(x + 1, y + h - 2, w - 2, 2); } }; paint(false); + // Inert labels read C.dim (never C.faint): faint is too dark on the panel fill. this.txt(align === 0.5 ? x + w / 2 : x + 10, y + h / 2, label, { size: 11, - color: inert ? C.faint : accent, + color: inert ? C.dim : accent, origin: align === 0.5 ? 0.5 : 0, ls: 2, header: true, }); if (tag) { - this.txt(x + w - 6, y + h / 2, tag, { size: 9, color: inert ? C.faint : C.dim, origin: 1, ls: 1 }); + this.txt(x + w - 6, y + h / 2, tag, { size: 9, color: inert ? C.dim : C.faint, origin: 1, ls: 1 }); } const hit = this.scene.add .rectangle(x, y, w, h, 0x000000, 0.001) @@ -442,7 +447,6 @@ export class SkillWindow extends Phaser.GameObjects.Container { // The action map (kind + skill id + the rect it lives in) — debugging aid and // what a browser test clicks on. (this._hits ??= []).push({ kind, id: rowId ?? null, x, y, w, h }); - this.add(g); this.add(hit); this._body.push(g, hit); return { setInert: (v) => { inert = v; paint(false); } };