Add Classic Icons toggle to Graphics Settings

Adds a "Classic icons" toggle in the structure-icons section of the
Graphics Settings modal. Off (default) keeps today's renderer look;
on switches to a classic style — lighter player-colored shape behind
a dark icon glyph, with 0.75 alpha for a subtle translucent feel.

Exposes the underlying tuning as new render-settings knobs
(`structure.fillDarken`, `borderDarken`, `iconAlpha`, `iconR/G/B`) and
threads them through the structure shader as uniforms, replacing the
previously hardcoded `darken(_, 0.65)` / `darken(_, 0.35)` calls and
the hardcoded white `vec3(1.0)` icon color. The `classicIcons` boolean
in the override schema is the single user-facing knob; the generator
derives the five underlying field values from it. Extends the
ClientGameRunner live-apply path to copy the `structure` slice too,
and adds tests covering the schema and preset derivation.
This commit is contained in:
evanpelle
2026-05-28 14:47:40 -07:00
parent e938e5936b
commit fc3d80ec73
9 changed files with 164 additions and 8 deletions
@@ -127,6 +127,25 @@ export class GraphicsSettingsModal extends LitElement implements Controller {
this.requestUpdate();
}
private patchStructure(patch: Partial<GraphicsOverrides["structure"]>) {
const current = this.userSettings.graphicsOverrides();
this.userSettings.setGraphicsOverrides({
...current,
structure: { ...current.structure, ...patch },
});
this.requestUpdate();
}
private currentClassicIcons(): boolean {
return (
this.userSettings.graphicsOverrides().structure?.classicIcons ?? false
);
}
private onToggleClassicIcons() {
this.patchStructure({ classicIcons: !this.currentClassicIcons() });
}
private onNameScaleChange(event: Event) {
const value = parseFloat((event.target as HTMLInputElement).value);
this.patchName({ nameScaleFactor: value });
@@ -159,6 +178,7 @@ export class GraphicsSettingsModal extends LitElement implements Controller {
const nameScale = this.currentNameScale();
const nameCull = this.currentNameCull();
const namesColored = !this.currentDarkNames();
const classicIcons = this.currentClassicIcons();
return html`
<div
@@ -264,6 +284,31 @@ export class GraphicsSettingsModal extends LitElement implements Controller {
</div>
</button>
<div
class="px-3 py-1 text-xs font-semibold text-slate-400 uppercase tracking-wider mt-2"
>
${translateText("graphics_setting.section_structure_icons")}
</div>
<button
class="flex gap-3 items-center w-full text-left p-3 hover:bg-slate-700 rounded-sm text-white transition-colors"
@click=${this.onToggleClassicIcons}
>
<div class="flex-1">
<div class="font-medium">
${translateText("graphics_setting.classic_icons_label")}
</div>
<div class="text-sm text-slate-400">
${translateText("graphics_setting.classic_icons_desc")}
</div>
</div>
<div class="text-sm text-slate-400">
${classicIcons
? translateText("user_setting.on")
: translateText("user_setting.off")}
</div>
</button>
<div class="border-t border-slate-600 pt-3 mt-4">
<button
class="flex gap-3 items-center w-full text-left p-3 hover:bg-slate-700 rounded-sm text-white transition-colors"