Alert frame: add to in-game settings, orange for attack instead of red

[VariableVince]

Description:

The red alert frame for betrayals was added in #1195. It also flashes red for incoming land attacks since #2358.

The same color for betrayals and attacks leads to confusion. And possibly red alert fatigue. But when players find themselves fatigued and want to shut it off for awhile, they can't because the setting doesn't exist in-game. Also, the setting description on the homepage settings didn't yet reflect that the alert frame flashes for attacks too.

This PR fixes this by:

• making the color for land attacks orange. This is well discernable from red for various colorblindness types, while still looking alarming.
• adding the setting to in-game SettingsModal
• adding land attack to setting description

Reference to comments on it on Dev Discord:
https://discord.com/channels/1359946986937258015/1381347989464809664/1441232666065240064

https://discord.com/channels/1359946986937258015/1360078040222142564/1434574256704061523

Orange alert frame on being attacked over land:
https://github.com/user-attachments/assets/e0772d62-5b25-4213-a393-dd5af13e8bc9

Settings description change and addition to in-game toggles:

Please complete the following:

• I have added screenshots for all UI updates
• I process any text displayed to the user through translateText() and I've added it to the en.json file
• I have added relevant tests to the test directory
• 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:

tryout33

[coderabbitai]

Walkthrough

Extended AlertFrame to support two alert types—betrayal and land-attack—each with distinct border styling. Updated SettingsModal with a toggle control to manage alert frame display. Refreshed localization strings to reflect the expanded alert behavior.

Changes

Cohort / File(s)	Summary
AlertFrame Implementation src/client/graphics/layers/AlertFrame.ts	Added alertType state (union type: "betrayal" | "land-attack") with default value "betrayal". Introduced CSS classes alert-border__betrayal and alert-border__land-attack for conditional styling. Set alertType to "betrayal" on alliance breaks and "land-attack" when incoming land attacks exceed thresholds. Updated render logic with dynamic class binding.
Settings UI src/client/graphics/layers/SettingsModal.ts	Imported siren icon asset. Added onToggleAlertFrameButtonClick handler to toggle alertFrame setting. Introduced new UI button in settings modal with icon, label, description, and dynamic on/off text based on userSettings state.
Localization resources/lang/en.json	Updated alert_frame_desc string to reflect that alert frame displays when betrayed or attacked over land (previously only when betrayed).

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

• AlertFrame.ts logic: Review alert type detection in event handlers and ensure land-attack threshold logic is correct.
• Dynamic class binding: Verify CSS class names are consistent between TypeScript and stylesheet.
• SettingsModal integration: Confirm toggle state flows correctly to userSettings service.
• Type union usage: Validate alertType union type is properly applied throughout.

Possibly related PRs

• Show a red alert frame when the player is betrayed #1195: Introduces original AlertFrame and settings functionality that this PR extends.
• Add localization support for game events, settings, and UI text elements #1372: Modifies same SettingsModal.ts and en.json files for UI and localization consistency.
• Add Visual Alert when Attacked #2358: Extends AlertFrame.ts with incoming-attack detection and land-attack styling logic.

Suggested labels

Translation

Suggested reviewers

• evanpelle
• scottanderson
• Aotumuri

Poem

🚨 An alert frame now watches two foes—
Betrayal whispers, land attack flows,
Settings toggle brings control,
Border colors play their role,
Defenders see the danger, woe! 🛡️

Pre-merge checks

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main changes: adding the alert frame to in-game settings and changing the attack alert color from red to orange.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description check	✅ Passed	The pull request description clearly explains the problem (red alert fatigue, confusion between betrayals and attacks, missing in-game setting), the solution (orange for attacks, add setting to SettingsModal, update description), and references relevant context including Discord discussions and screenshots.

---

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 and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

src/client/graphics/layers/AlertFrame.ts (1)

24-25: Alert-type handling and styling look solid

• alertType: "betrayal" | "land-attack" is a nice, tight union and keeps the set of alert kinds explicit.
• CSS split into a base .alert-border + per-type classes (.betrayal, .land-attack) is simple and composable.
• Logic correctly sets alertType = "betrayal" on betrayal updates and "land-attack" on qualifying incoming attacks, right before activateAlert(), so the right color is always used.
• Render binding class=${\alert-border animate ${this.alertType}`}` is straightforward and idiomatic for Lit.

Optional: if you expect more alert types later, you could introduce a small alias like:

type AlertType = "betrayal" | "land-attack";

and reuse it for the state and any helpers, to keep the union in one place.

Also applies to: 41-42, 47-53, 132-133, 216-217, 252-252

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ec0bf07 and de97aa7.

⛔ Files ignored due to path filters (1)

• resources/images/SirenIconWhite.svg is excluded by !**/*.svg

📒 Files selected for processing (3)

• resources/lang/en.json (1 hunks)
• src/client/graphics/layers/AlertFrame.ts (5 hunks)
• src/client/graphics/layers/SettingsModal.ts (3 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

src/client/graphics/layers/SettingsModal.ts (1)

src/client/LangSelector.ts (1)

• translateText (258-278)

🔇 Additional comments (2)

resources/lang/en.json (1)

339-339: Alert-frame description matches new behavior

Text is clear, simple, and correctly mentions both betrayal and land attacks. No issues.

src/client/graphics/layers/SettingsModal.ts (1)

11-11: Alert-frame toggle wiring is consistent and clear

• Using a dedicated handler that calls userSettings.toggleAlertFrame() and requestUpdate() matches the pattern of existing toggles.
• New button mirrors the structure of other settings (icon, label, description, On/Off text via translateText), so UX stays consistent and easy to understand.
• The alertFrame boolean accessor and toggle keep things simple; no extra complexity.

No changes needed here.

Also applies to: 134-137, 355-373

[evanpelle]

Thanks!