alois/OpenFrontIO
1
0
Fork 0
mirror of https://github.com/openfrontio/OpenFrontIO.git synced 2026-08-18 00:28:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

Coordinate grid (#4224)

Browse Source 
**Add approved & assigned issue number here:**

Resolves #3839

## Description:
A bunch of small updates to make the coordinate grid a lot nicer.
 - Removes black backgrounds on text.
 - Allows user to modify the opacity of the coordinate grid
 - Persist the enable state of the coordinate grid

### Before
<img width="2344" height="1168" alt="image"
src="https://github.com/user-attachments/assets/22c2fb77-9db6-41bf-a50a-987f651cc19a"
/>

### After
<img width="2331" height="1174" alt="image"
src="https://github.com/user-attachments/assets/0e5a9575-8a79-407b-8d78-8564df02b259"
/>

<img width="407" height="947" alt="image"
src="https://github.com/user-attachments/assets/b9e5f9f1-3cc1-4832-b7d4-38e1f5e93d57"
/>

## 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

## Please put your Discord username so you can be contacted if a bug or
regression is found:

FrederikJA
This commit is contained in:
FrederikJA
2026-06-11 20:11:34 -07:00
committed by GitHub
parent 94f2293149
commit b1e9955af3
9 changed files with 93 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/client/hud/layers/GraphicsSettingsModal.ts
+46
View File
@@ -52,6 +52,10 @@ const TERRITORY_ALPHA_MIN = 0;
const TERRITORY_ALPHA_MAX = 1;
const TERRITORY_ALPHA_STEP = 0.01;
const COORDINATE_GRID_OPACITY_MIN = 0;
const COORDINATE_GRID_OPACITY_MAX = 1;
const COORDINATE_GRID_OPACITY_STEP = 0.01;
// Train track "draw distance" is presented inverted: a higher slider value means
// tracks stay visible when more zoomed out, i.e. a lower railMinZoom.
const RAIL_ZOOM_MIN = 0;
@@ -252,6 +256,13 @@ export class GraphicsSettingsModal extends LitElement implements Controller {
);
}
private currentCoordinateGridOpacity(): number {
return (
this.userSettings.graphicsOverrides().mapOverlay?.coordinateGridOpacity ??
renderDefaults.mapOverlay.coordinateGridOpacity
);
}
private currentRailMinZoom(): number {
return (
this.userSettings.graphicsOverrides().railroad?.railMinZoom ??
@@ -291,6 +302,11 @@ export class GraphicsSettingsModal extends LitElement implements Controller {
this.patchMapOverlay({ territoryAlpha: value });
}
private onCoordinateGridOpacityChange(event: Event) {
const value = parseFloat((event.target as HTMLInputElement).value);
this.patchMapOverlay({ coordinateGridOpacity: value });
}
private onRailDrawDistanceChange(event: Event) {
const drawDistance = parseFloat((event.target as HTMLInputElement).value);
// Invert: higher draw distance => tracks visible when more zoomed out.
@@ -412,6 +428,7 @@ export class GraphicsSettingsModal extends LitElement implements Controller {
const highlightThicken = this.currentHighlightThicken();
const territorySat = this.currentTerritorySat();
const territoryAlpha = this.currentTerritoryAlpha();
const coordinateGridOpacity = this.currentCoordinateGridOpacity();
const railDrawDistance = RAIL_ZOOM_MAX - this.currentRailMinZoom();
const railThickness = this.currentRailThickness();
const colorblind = this.currentColorblind();
@@ -751,6 +768,35 @@ export class GraphicsSettingsModal extends LitElement implements Controller {
</div>
</div>
<div
class="flex gap-3 items-center w-full text-left p-3 hover:bg-slate-700 rounded-sm text-white transition-colors"
>
<div class="flex-1">
<div class="font-medium">
${translateText(
"graphics_setting.coordinate_grid_opacity_label",
)}
</div>
<div class="text-sm text-slate-400">
${translateText(
"graphics_setting.coordinate_grid_opacity_desc",
)}
</div>
<input
type="range"
min=${COORDINATE_GRID_OPACITY_MIN}
max=${COORDINATE_GRID_OPACITY_MAX}
step=${COORDINATE_GRID_OPACITY_STEP}
.value=${String(coordinateGridOpacity)}
@input=${this.onCoordinateGridOpacityChange}
class="w-full border border-slate-500 rounded-lg"
/>
</div>
<div class="text-sm text-slate-400 w-12 text-right">
${coordinateGridOpacity.toFixed(2)}
</div>
</div>
<div
class="flex gap-3 items-center w-full text-left p-3 hover:bg-slate-700 rounded-sm text-white transition-colors"
>