Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
evanpelle merged 4 commits into from
Dec 4, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
95c1aeb
Settings alert icon
VariableVince Dec 4, 2025
e0914e9
Modify alert frame description for clarity
VariableVince Dec 4, 2025
f5a6a26
Orange for attack and keep red for betrayal
VariableVince Dec 4, 2025
de97aa7
Add alert frame toggle to SettingsModal
VariableVince Dec 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions resources/images/SirenIconWhite.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion resources/lang/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
16 changes: 14 additions & 2 deletions src/client/graphics/layers/AlertFrame.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<string> = new Set();
Expand All @@ -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};
}
Expand Down Expand Up @@ -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();
}
}
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -237,7 +249,7 @@ export class AlertFrame extends LitElement implements Layer {

return html`
<div
class="alert-border animate"
class=${`alert-border animate ${this.alertType}`}
@animationend=${() => this.dismissAlert()}
></div>
`;
Expand Down
26 changes: 26 additions & 0 deletions src/client/graphics/layers/SettingsModal.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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());
Expand Down Expand Up @@ -346,6 +352,26 @@ export class SettingsModal extends LitElement implements Layer {
</div>
</button>

<button
class="flex gap-3 items-center w-full text-left p-3 hover:bg-slate-700 rounded text-white transition-colors"
@click="${this.onToggleAlertFrameButtonClick}"
>
<img src=${sirenIcon} alt="alertFrame" width="20" height="20" />
<div class="flex-1">
<div class="font-medium">
${translateText("user_setting.alert_frame_label")}
</div>
<div class="text-sm text-slate-400">
${translateText("user_setting.alert_frame_desc")}
</div>
</div>
<div class="text-sm text-slate-400">
${this.userSettings.alertFrame()
? translateText("user_setting.on")
: translateText("user_setting.off")}
</div>
</button>

<button
class="flex gap-3 items-center w-full text-left p-3 hover:bg-slate-700 rounded text-white transition-colors"
@click="${this.onToggleStructureSpritesButtonClick}"
Expand Down
Loading