mirror of
https://github.com/openfrontio/OpenFrontIO.git
synced 2026-07-03 23:30:36 +00:00
Add Graphics Settings modal with live name-label tuning (#4065)
## Description:
- Add a user-facing **Graphics Settings** modal accessible from the
in-game Settings menu, with live preview as sliders change.
- First two knobs: **Name Scale** and **Minimum Name Size** (the
name-cull threshold).
- Overrides stored as a single JSON blob in `localStorage` under
`settings.graphics`, validated by a Zod schema
(`GraphicsOverridesSchema`). Future graphics knobs just extend the
schema + slider list.
## How it fits together
- `generateRenderSettings(overrides)` (`RenderSettings.ts`) — pure
function: clones `render-settings.json` defaults, layers overrides on
top, returns a fresh `RenderSettings`.
- `UserSettings.graphicsOverrides()` / `setGraphicsOverrides()` —
read/write the blob; falls back to `{}` on a missing/corrupt entry.
- `ClientGameRunner` listens for
`USER_SETTINGS_CHANGED_EVENT:settings.graphics`, regenerates, and
`Object.assign`s each category into the live `view.getSettings()` slice
so passes pick up the new values on the next frame (no renderer
reconstruction).
- Modal reads defaults straight from `render-settings.json` so there's
no duplication.
<img width="599" height="515" alt="Screenshot 2026-05-28 at 11 18 43 AM"
src="https://github.com/user-attachments/assets/263d7d91-10d8-4a66-a069-10015c735d60"
/>
## 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
This commit is contained in:
@@ -0,0 +1,14 @@
|
||||
import { z } from "zod";
|
||||
|
||||
export const GraphicsOverridesSchema = z
|
||||
.object({
|
||||
name: z
|
||||
.object({
|
||||
nameScaleFactor: z.number(),
|
||||
cullThreshold: z.number(),
|
||||
})
|
||||
.partial(),
|
||||
})
|
||||
.partial();
|
||||
|
||||
export type GraphicsOverrides = z.infer<typeof GraphicsOverridesSchema>;
|
||||
@@ -1,3 +1,4 @@
|
||||
import { GraphicsOverrides } from "./GraphicsOverrides";
|
||||
import defaults from "./render-settings.json";
|
||||
|
||||
export interface RenderSettings {
|
||||
@@ -260,6 +261,23 @@ export function createRenderSettings(): RenderSettings {
|
||||
return JSON.parse(JSON.stringify(defaults)) as RenderSettings;
|
||||
}
|
||||
|
||||
/**
|
||||
* Generate a fresh RenderSettings by layering user overrides on top of the
|
||||
* render-settings.json defaults. Pure — does not mutate any input.
|
||||
*/
|
||||
export function generateRenderSettings(
|
||||
overrides: GraphicsOverrides,
|
||||
): RenderSettings {
|
||||
const settings = createRenderSettings();
|
||||
if (overrides.name?.nameScaleFactor !== undefined) {
|
||||
settings.name.nameScaleFactor = overrides.name.nameScaleFactor;
|
||||
}
|
||||
if (overrides.name?.cullThreshold !== undefined) {
|
||||
settings.name.cullThreshold = overrides.name.cullThreshold;
|
||||
}
|
||||
return settings;
|
||||
}
|
||||
|
||||
/** Dump current settings to a downloadable JSON file. */
|
||||
export function dumpSettings(settings: RenderSettings): void {
|
||||
const json = JSON.stringify(settings, null, 2);
|
||||
|
||||
@@ -9,8 +9,14 @@ export type {
|
||||
RadialMenuSelectEvent,
|
||||
} from "./Events";
|
||||
export { GameView } from "./GameView";
|
||||
export { GraphicsOverridesSchema } from "./GraphicsOverrides";
|
||||
export type { GraphicsOverrides } from "./GraphicsOverrides";
|
||||
export type { SpawnCenter } from "./passes/SpawnOverlayPass";
|
||||
export { createRenderSettings, dumpSettings } from "./RenderSettings";
|
||||
export {
|
||||
createRenderSettings,
|
||||
dumpSettings,
|
||||
generateRenderSettings,
|
||||
} from "./RenderSettings";
|
||||
export type { RenderSettings } from "./RenderSettings";
|
||||
export { deepAssign, deepDiff } from "./SettingsUtils";
|
||||
export { buildTerrainRGBA, getPaletteSize } from "./utils/ColorUtils";
|
||||
|
||||
Reference in New Issue
Block a user