feat: Graphics presets and shareable settings JSON

[evanpelle]

Closes #4444

What

Adds two things to the in-game graphics settings modal:

Presets — a dropdown at the top of the modal for casual users:

• Default — everything from render-settings.json
• Performance — special effects and fallout passes off
• Atmospheric — lighting enabled (ambient level 6, unit glow 6)
• High Contrast — territory saturation and opacity at 1

A preset replaces the whole overrides object, so the resulting look is predictable and the dropdown can show which preset is active (deep-compare against stored overrides). Tweaking any individual setting flips the dropdown to Custom.

Share — a section above Reset:

• Copy settings writes the current overrides JSON to the clipboard (with a "Copied!" confirmation) so you can send it to other people
• Import settings is a paste field + Apply button; input is validated with the existing GraphicsOverridesSchema before being applied, and invalid text shows an inline error

Presets and imports apply live through the existing USER_SETTINGS_CHANGED_EVENT:settings.graphics listener — no new renderer wiring.

Testing

• Drove a headless singleplayer game and exercised the full flow: preset selection persists the expected overrides to localStorage, slider tweaks flip the dropdown to Custom, Default clears overrides, copy puts valid JSON on the clipboard, invalid import shows the error, valid import applies and snaps the dropdown to the matching preset
• npx tsc --noEmit, ESLint, Prettier clean
• EnJsonSorted and TranslationSystem tests pass

🤖 Generated with Claude Code

[coderabbitai]

Walkthrough

GraphicsSettingsModal.ts gains a preset system (default, performance, atmospheric, high_contrast, custom) with deep-equal matching, plus copy-to-clipboard and JSON import of graphics overrides validated by GraphicsOverridesSchema. New UI sections render preset selection and share controls. Corresponding English translation strings are added.

Changes

Graphics presets and share/import

Layer / File(s)	Summary
Preset data and matching logic src/client/hud/layers/GraphicsSettingsModal.ts	Adds GraphicsOverridesSchema import, GRAPHICS_PRESETS list of override sets, PRESET_CUSTOM constant, and a recursive deepEqual helper.
Component state and lifecycle hooks src/client/hud/layers/GraphicsSettingsModal.ts	Adds settingsCopied/importError state, DOM query accessors for the preset select and import input, and clears copiedResetTimer on disconnect.
Preset change, copy, and import handlers src/client/hud/layers/GraphicsSettingsModal.ts	Adds currentPresetId(), onPresetChange(), onCopySettingsClick(), onImportSettingsClick(), and dropdown syncing in updated().
Presets and share/import UI src/client/hud/layers/GraphicsSettingsModal.ts	Renders a new presets dropdown section and a share section with copy and import controls, including error display.
Translation strings resources/lang/en.json	Adds graphics_setting entries for copy, import, preset options, and new section headings.

Estimated code review effort: 3 (Moderate) | ~25 minutes

Possibly related PRs

• openfrontio/OpenFrontIO#4065: Extends the same GraphicsSettingsModal.ts component this PR builds preset/copy/import features on top of.
• openfrontio/OpenFrontIO#4280: Both PRs modify GraphicsSettingsModal.ts to extend the same modal UI/logic.
• openfrontio/OpenFrontIO#4372: Both PRs modify the modal's render() method affecting how the Graphics Settings modal is presented.

Suggested labels: UI/UX

Suggested reviewers: scottanderson

Poem

A rabbit hopped into the settings tray,
Found presets stacked in a tidy array,
Copy, import, no fuss, no fright,
One click and the JSON feels just right.
🐇✨ Custom or default — pick your way!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	⚠️ Warning	The share/import settings JSON work goes beyond linked issue #4444, which only asked for graphics presets.	If this PR should stay scoped to #4444, split the share/import workflow into a separate PR or add a linked issue covering it.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main changes: graphics presets plus shareable settings JSON.
Description check	✅ Passed	The description is directly related to the changes and explains the presets and share/import workflow.
Linked Issues check	✅ Passed	The PR implements the requested graphics presets dropdown for casual users.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

🧹 Nitpick comments (1)

src/client/hud/layers/GraphicsSettingsModal.ts (1)

137-162: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Consider a typed union for preset ids instead of plain string.

id: string on GRAPHICS_PRESETS lets p.id and PRESET_CUSTOM drift apart silently (typo in an id wouldn't be caught at compile time, and it's also used to build the translation key graphics_setting.preset_${id}). A string-literal union tightens this contract.

♻️ Suggested typed-union tightening

-const GRAPHICS_PRESETS: { id: string; overrides: GraphicsOverrides }[] = [
+const GRAPHICS_PRESET_IDS = [
+  "default",
+  "performance",
+  "atmospheric",
+  "high_contrast",
+] as const;
+type GraphicsPresetId = (typeof GRAPHICS_PRESET_IDS)[number];
+
+const GRAPHICS_PRESETS: { id: GraphicsPresetId; overrides: GraphicsOverrides }[] = [
   { id: "default", overrides: {} },
   ...
 ];

-const PRESET_CUSTOM = "custom";
+const PRESET_CUSTOM = "custom" as const;

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/client/hud/layers/GraphicsSettingsModal.ts` around lines 137 - 162, The
preset identifiers in GRAPHICS_PRESETS are currently typed as plain string,
which allows PRESET_CUSTOM and the preset ids used for
graphics_setting.preset_${id} to drift or typo silently. Tighten this by
introducing a string-literal union for the preset id values and using it in
GRAPHICS_PRESETS, PRESET_CUSTOM, and any helpers that compare or derive from
preset ids, so only the known preset ids can be assigned or referenced.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@src/client/hud/layers/GraphicsSettingsModal.ts`:
- Around line 137-162: The preset identifiers in GRAPHICS_PRESETS are currently
typed as plain string, which allows PRESET_CUSTOM and the preset ids used for
graphics_setting.preset_${id} to drift or typo silently. Tighten this by
introducing a string-literal union for the preset id values and using it in
GRAPHICS_PRESETS, PRESET_CUSTOM, and any helpers that compare or derive from
preset ids, so only the known preset ids can be assigned or referenced.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 8017f84c-65d8-430c-bcf1-69b9eb30aebb

📥 Commits

Reviewing files that changed from the base of the PR and between 1d5a6ae and ca7f3d3.

📒 Files selected for processing (2)

• resources/lang/en.json
• src/client/hud/layers/GraphicsSettingsModal.ts