diff --git a/resources/images/SirenIconWhite.svg b/resources/images/SirenIconWhite.svg new file mode 100644 index 0000000000..dd8ce43f25 --- /dev/null +++ b/resources/images/SirenIconWhite.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/resources/lang/en.json b/resources/lang/en.json index cd7c69a016..2953d70111 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 973a9a1694..407cd81ff8 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 3956204f0a..23ee9f5e75 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 { + +