mirror of
https://github.com/openfrontio/OpenFrontIO.git
synced 2026-07-23 14:06:09 +00:00
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:
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user