From 6ca81211eab0a22c555b1fe2f4580291276fb69b Mon Sep 17 00:00:00 2001
From: VariableVince <24507472+VariableVince@users.noreply.github.com>
Date: Thu, 4 Dec 2025 22:26:55 +0100
Subject: [PATCH] Alert frame: add to in-game settings, orange for attack
instead of red (#2561)
## Description:
The red alert frame for betrayals was added in
https://github.com/openfrontio/OpenFrontIO/pull/1195. It also flashes
red for incoming land attacks since
https://github.com/openfrontio/OpenFrontIO/pull/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:
- [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:
tryout33
---
resources/images/SirenIconWhite.svg | 11 +++++++++
resources/lang/en.json | 2 +-
src/client/graphics/layers/AlertFrame.ts | 16 +++++++++++--
src/client/graphics/layers/SettingsModal.ts | 26 +++++++++++++++++++++
4 files changed, 52 insertions(+), 3 deletions(-)
create mode 100644 resources/images/SirenIconWhite.svg
diff --git a/resources/images/SirenIconWhite.svg b/resources/images/SirenIconWhite.svg
new file mode 100644
index 000000000..dd8ce43f2
--- /dev/null
+++ b/resources/images/SirenIconWhite.svg
@@ -0,0 +1,11 @@
+
+
diff --git a/resources/lang/en.json b/resources/lang/en.json
index cd7c69a01..2953d7011 100644
--- a/resources/lang/en.json
+++ b/resources/lang/en.json
@@ -336,7 +336,7 @@
"emojis_label": "Emojis",
"emojis_desc": "Toggle whether emojis are shown in game",
"alert_frame_label": "Alert Frame",
- "alert_frame_desc": "Toggle the alert frame. When enabled, the frame will be displayed when you are betrayed.",
+ "alert_frame_desc": "Toggle the alert frame. When enabled, the frame will be displayed when you are betrayed or attacked over land.",
"special_effects_label": "Special effects",
"special_effects_desc": "Toggle special effects. Deactivate to improve performances",
"structure_sprites_label": "Structure Sprites",
diff --git a/src/client/graphics/layers/AlertFrame.ts b/src/client/graphics/layers/AlertFrame.ts
index 973a9a169..407cd81ff 100644
--- a/src/client/graphics/layers/AlertFrame.ts
+++ b/src/client/graphics/layers/AlertFrame.ts
@@ -21,6 +21,8 @@ export class AlertFrame extends LitElement implements Layer {
@state()
private isActive = false;
+ @state()
+ private alertType: "betrayal" | "land-attack" = "betrayal";
private animationTimeout: number | null = null;
private seenAttackIds: Set = new Set();
@@ -36,12 +38,20 @@ export class AlertFrame extends LitElement implements Layer {
width: 100%;
height: 100%;
pointer-events: none;
- border: 17px solid #ee0000;
+ border: 17px solid;
box-sizing: border-box;
z-index: 40;
opacity: 0;
}
+ .alert-border.betrayal {
+ border-color: #ee0000;
+ }
+
+ .alert-border.land-attack {
+ border-color: #ffa500;
+ }
+
.alert-border.animate {
animation: alertBlink ${ALERT_SPEED}s ease-in-out ${ALERT_COUNT};
}
@@ -119,6 +129,7 @@ export class AlertFrame extends LitElement implements Layer {
// Only trigger alert if the current player is the betrayed one
if (betrayed === myPlayer) {
+ this.alertType = "betrayal";
this.activateAlert();
}
}
@@ -202,6 +213,7 @@ export class AlertFrame extends LitElement implements Layer {
// 3. The attack is too small (less than 1/5 of our troops)
if (!inCooldown && !isRetaliation && !isSmallAttack) {
this.seenAttackIds.add(attack.id);
+ this.alertType = "land-attack";
this.activateAlert();
} else {
// Still mark as seen so we don't alert later
@@ -237,7 +249,7 @@ export class AlertFrame extends LitElement implements Layer {
return html`
this.dismissAlert()}
>
`;
diff --git a/src/client/graphics/layers/SettingsModal.ts b/src/client/graphics/layers/SettingsModal.ts
index 3956204f0..23ee9f5e7 100644
--- a/src/client/graphics/layers/SettingsModal.ts
+++ b/src/client/graphics/layers/SettingsModal.ts
@@ -8,6 +8,7 @@ import explosionIcon from "../../../../resources/images/ExplosionIconWhite.svg";
import mouseIcon from "../../../../resources/images/MouseIconWhite.svg";
import ninjaIcon from "../../../../resources/images/NinjaIconWhite.svg";
import settingsIcon from "../../../../resources/images/SettingIconWhite.svg";
+import sirenIcon from "../../../../resources/images/SirenIconWhite.svg";
import treeIcon from "../../../../resources/images/TreeIconWhite.svg";
import musicIcon from "../../../../resources/images/music.svg";
import { EventBus } from "../../../core/EventBus";
@@ -130,6 +131,11 @@ export class SettingsModal extends LitElement implements Layer {
this.requestUpdate();
}
+ private onToggleAlertFrameButtonClick() {
+ this.userSettings.toggleAlertFrame();
+ this.requestUpdate();
+ }
+
private onToggleDarkModeButtonClick() {
this.userSettings.toggleDarkMode();
this.eventBus.emit(new RefreshGraphicsEvent());
@@ -346,6 +352,26 @@ export class SettingsModal extends LitElement implements Layer {
+
+