Add structure dots toggle to graphics settings

Add an on/off toggle in the graphics settings modal's Structure Icons
section that controls whether structures collapse into small dots when
zoomed out. When disabled, applyGraphicsOverrides forces the renderer's
structure.dotsZoomThreshold to 0 — since zoom is always > 0, the dots LOD
never triggers and structures keep their full icon at every zoom level.

The debug GUI already exposes the underlying dotsZoomThreshold slider for
fine control; this surfaces a simple player-facing toggle.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Evan Pelle
2026-06-20 03:35:05 +00:00
parent 2f594ebc26
commit d30385fc56
4 changed files with 38 additions and 0 deletions
+2
View File
@@ -568,6 +568,8 @@
"section_name_labels": "Name Labels",
"section_structure_icons": "Structure Icons",
"section_terrain": "Terrain",
"structure_dots_desc": "Collapse structure icons into small dots when zoomed out",
"structure_dots_label": "Structure dots",
"territory_alpha_desc": "How opaque the territory fill is (lower lets terrain show through)",
"territory_alpha_label": "Territory opacity",
"territory_sat_desc": "How vivid the territory fill colors are (lower mutes them)",
@@ -455,6 +455,14 @@ export class GraphicsSettingsModal extends LitElement implements Controller {
this.patchStructure({ classicNumbers: !this.currentClassicNumbers() });
}
private currentShowDots(): boolean {
return this.userSettings.graphicsOverrides().structure?.showDots ?? true;
}
private onToggleShowDots() {
this.patchStructure({ showDots: !this.currentShowDots() });
}
private patchPassEnabled(patch: Partial<GraphicsOverrides["passEnabled"]>) {
const current = this.userSettings.graphicsOverrides();
this.userSettings.setGraphicsOverrides({
@@ -563,6 +571,7 @@ export class GraphicsSettingsModal extends LitElement implements Controller {
const iconSize = this.currentIconSize();
const classicIcons = this.currentClassicIcons();
const classicNumbers = this.currentClassicNumbers();
const showDots = this.currentShowDots();
const highlightFill = this.currentHighlightFill();
const highlightBrighten = this.currentHighlightBrighten();
const highlightThicken = this.currentHighlightThicken();
@@ -880,6 +889,25 @@ export class GraphicsSettingsModal extends LitElement implements Controller {
</div>
</button>
<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.onToggleShowDots}
>
<div class="flex-1">
<div class="font-medium">
${translateText("graphics_setting.structure_dots_label")}
</div>
<div class="text-sm text-slate-400">
${translateText("graphics_setting.structure_dots_desc")}
</div>
</div>
<div class="text-sm text-slate-400">
${showDots
? translateText("user_setting.on")
: translateText("user_setting.off")}
</div>
</button>
<div
class="px-3 py-1 text-xs font-semibold text-slate-400 uppercase tracking-wider mt-2"
>
@@ -17,6 +17,9 @@ export const GraphicsOverridesSchema = z
iconSize: z.number(),
classicIcons: z.boolean(),
classicNumbers: z.boolean(),
// When false, structures keep their full icon at any zoom instead of
// collapsing to dots when zoomed out (forces dotsZoomThreshold to 0).
showDots: z.boolean(),
})
.partial(),
mapOverlay: z
+5
View File
@@ -41,6 +41,11 @@ export function applyGraphicsOverrides(
if (overrides.structure?.classicNumbers !== undefined) {
settings.structureLevel.classicFont = overrides.structure.classicNumbers;
}
if (overrides.structure?.showDots === false) {
// Zoom is always > 0, so a threshold of 0 means the dots LOD never
// triggers — structures stay as full icons at every zoom level.
settings.structure.dotsZoomThreshold = 0;
}
if (overrides.mapOverlay?.highlightFillBrighten !== undefined) {
settings.mapOverlay.highlightFillBrighten =
overrides.mapOverlay.highlightFillBrighten;