From e922d336a1a39dee683f0a6dbf50bf020e073a7e Mon Sep 17 00:00:00 2001 From: Evan Date: Wed, 11 Mar 2026 10:06:38 -0700 Subject: [PATCH] update radial menu styling (#3404) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Description: Before: Screenshot 2026-03-10 at 10 29 12 PM After: Screenshot 2026-03-10 at 10 27 33 PM ## Please complete the following: - [x] I have added screenshots for all UI updates - [x] I process any text displayed to the user through translateText() and I've added it to the en.json file - [x] I have added relevant tests to the test directory - [x] I confirm I have thoroughly tested these changes and take full responsibility for any bugs introduced ## Please put your Discord username so you can be contacted if a bug or regression is found: evan --- src/client/graphics/layers/MainRadialMenu.ts | 2 +- src/client/graphics/layers/RadialMenu.ts | 29 +++++------- .../graphics/layers/RadialMenuElements.ts | 46 +++++++++---------- 3 files changed, 35 insertions(+), 42 deletions(-) diff --git a/src/client/graphics/layers/MainRadialMenu.ts b/src/client/graphics/layers/MainRadialMenu.ts index c2029ecea..15ffd7b6e 100644 --- a/src/client/graphics/layers/MainRadialMenu.ts +++ b/src/client/graphics/layers/MainRadialMenu.ts @@ -144,7 +144,7 @@ export class MainRadialMenu extends LitElement implements Layer { this.radialMenu.setCenterButtonAppearance( isFriendlyTarget ? donateTroopIcon : swordIcon, - isFriendlyTarget ? "#34D399" : "#2c3e50", + isFriendlyTarget ? "#22d3ee" : "#0f2744", isFriendlyTarget ? this.radialMenu.getDefaultCenterIconSize() * 0.75 : this.radialMenu.getDefaultCenterIconSize(), diff --git a/src/client/graphics/layers/RadialMenu.ts b/src/client/graphics/layers/RadialMenu.ts index acc700a99..68364e3a7 100644 --- a/src/client/graphics/layers/RadialMenu.ts +++ b/src/client/graphics/layers/RadialMenu.ts @@ -88,7 +88,7 @@ export class RadialMenu implements Layer { private backButtonHoverTimeout: number | null = null; private navigationInProgress: boolean = false; private originalCenterButtonIcon: string = ""; - private readonly defaultCenterButtonColor = "#2c3e50"; + private readonly defaultCenterButtonColor = "#0f2744"; private centerButtonColor: string; private centerButtonIconSize: number; @@ -227,7 +227,7 @@ export class RadialMenu implements Layer { this.tooltipElement.className = "radial-tooltip"; this.tooltipElement.style.position = "absolute"; this.tooltipElement.style.pointerEvents = "none"; - this.tooltipElement.style.background = "rgba(0, 0, 0, 0.7)"; + this.tooltipElement.style.background = "rgba(12, 35, 64, 0.88)"; this.tooltipElement.style.color = "white"; this.tooltipElement.style.padding = "6px 10px"; this.tooltipElement.style.borderRadius = "6px"; @@ -332,8 +332,8 @@ export class RadialMenu implements Layer { const disabled = this.params === null || d.data.disabled(this.params); const color = disabled ? this.config.disabledColor - : (resolveColor(d.data, this.params) ?? "#333333"); - const opacity = disabled ? 0.5 : 0.7; + : (resolveColor(d.data, this.params) ?? "#1e3a5f"); + const opacity = disabled ? 0.4 : 0.82; if (d.data.id === this.selectedItemId && this.currentLevel > level) { return color; @@ -341,8 +341,7 @@ export class RadialMenu implements Layer { return d3.color(color)?.copy({ opacity: opacity })?.toString() ?? color; }) - .attr("stroke", "#ffffff") - .attr("stroke-width", "2") + .attr("stroke", "none") .style("cursor", (d) => this.params === null || d.data.disabled(this.params) ? "not-allowed" @@ -353,9 +352,7 @@ export class RadialMenu implements Layer { ) .style( "transition", - `filter ${this.config.menuTransitionDuration / 2}ms, stroke-width ${ - this.config.menuTransitionDuration / 2 - }ms, fill ${this.config.menuTransitionDuration / 2}ms`, + `filter ${this.config.menuTransitionDuration / 2}ms, fill ${this.config.menuTransitionDuration / 2}ms`, ) .attr("data-id", (d) => d.data.id); @@ -366,8 +363,8 @@ export class RadialMenu implements Layer { const disabled = this.params === null || d.data.disabled(this.params); const baseColor = disabled ? this.config.disabledColor - : (resolveColor(d.data, this.params) ?? "#333333"); - const opacity = disabled ? 0.5 : 0.7; + : (resolveColor(d.data, this.params) ?? "#1e3a5f"); + const opacity = disabled ? 0.4 : 0.82; const normalColor = d3.color(baseColor)?.copy({ opacity: opacity })?.toString() ?? @@ -419,12 +416,11 @@ export class RadialMenu implements Layer { this.currentLevel > 0 ) { path.attr("filter", "url(#glow)"); - path.attr("stroke-width", "3"); const color = this.params === null || d.data.disabled(this.params) ? this.config.disabledColor - : (resolveColor(d.data, this.params) ?? "#333333"); + : (resolveColor(d.data, this.params) ?? "#1e3a5f"); path.attr("fill", color); } }); @@ -467,7 +463,6 @@ export class RadialMenu implements Layer { } path.attr("filter", "url(#glow)"); - path.attr("stroke-width", "3"); }; const onMouseOut = (d: d3.PieArcDatum, path: any) => { @@ -487,11 +482,10 @@ export class RadialMenu implements Layer { ) return; path.attr("filter", null); - path.attr("stroke-width", "2"); const color = disabled ? this.config.disabledColor : (resolveColor(d.data, this.params) ?? "#333333"); - const opacity = disabled ? 0.5 : 0.7; + const opacity = disabled ? 0.4 : 0.82; if (d.data.timerFraction) { path.attr("fill", `url(#timer-gradient-${d.data.id})`); @@ -811,7 +805,6 @@ export class RadialMenu implements Layer { const selectedPath = this.menuPaths.get(this.selectedItemId); if (selectedPath) { selectedPath.attr("filter", null); - selectedPath.attr("stroke-width", "2"); } } // Use refresh() to update all item appearances consistently @@ -1127,7 +1120,7 @@ export class RadialMenu implements Layer { const color = disabled ? this.config.disabledColor : (resolveColor(item, this.params) ?? "#333333"); - const opacity = disabled ? 0.5 : 0.7; + const opacity = disabled ? 0.4 : 0.82; // Update path appearance (skip fill for timer items — gradient handles it) if (!item.timerFraction) { diff --git a/src/client/graphics/layers/RadialMenuElements.ts b/src/client/graphics/layers/RadialMenuElements.ts index 72c00852d..2f55a55e6 100644 --- a/src/client/graphics/layers/RadialMenuElements.ts +++ b/src/client/graphics/layers/RadialMenuElements.ts @@ -82,32 +82,32 @@ export interface CenterButtonElement { } export const COLORS = { - build: "#ebe250", - building: "#2c2c2c", - boat: "#3f6ab1", - ally: "#53ac75", - breakAlly: "#c74848", - breakAllyNoDebuff: "#d4882b", - delete: "#ff0000", - info: "#64748B", - target: "#ff0000", - attack: "#ff0000", + build: "#e6c74a", + building: "#1e3a5f", + boat: "#2a82c9", + ally: "#4ade80", + breakAlly: "#dc2626", + breakAllyNoDebuff: "#d97706", + delete: "#ef4444", + info: "#475569", + target: "#ef4444", + attack: "#ef4444", infoDetails: "#7f8c8d", - infoEmoji: "#f1c40f", - trade: "#008080", - embargo: "#6600cc", + infoEmoji: "#fbbf24", + trade: "#0891b2", + embargo: "#7c3aed", tooltip: { - cost: "#ffd700", - count: "#aaa", + cost: "#f59e0b", + count: "#94a3b8", }, chat: { - default: "#66c", - help: "#4caf50", - attack: "#f44336", - defend: "#2196f3", - greet: "#ff9800", - misc: "#9c27b0", - warnings: "#e3c532", + default: "#6366f1", + help: "#22c55e", + attack: "#ef4444", + defend: "#3b82f6", + greet: "#f97316", + misc: "#a855f7", + warnings: "#fbbf24", }, }; @@ -484,7 +484,7 @@ const donateGoldRadialElement: MenuElement = { params.game.inSpawnPhase() || !params.playerActions?.interaction?.canDonateGold, icon: donateGoldIcon, - color: "#EAB308", + color: "#f59e0b", action: (params: MenuElementParams) => { if (!params.selected) return; params.playerPanel.openSendGoldModal(