mirror of
https://github.com/openfrontio/OpenFrontIO.git
synced 2026-06-21 10:10:55 +00:00
Improve Notification Panel (#3913)
Resolves #3910 ## Description: - Split the events HUD into two components: a new **`<actionable-events>`** that owns alliance prompts (request / renew) and a slimmed-down **`<events-display>`** for everything else. - Reworked `<events-display>` into two visual tiers: dim/scrolling tier 2 on top (trade results, unit losses, donations, alliance status), prominent tier 1 anchored at the bottom (inbound nukes, naval invasion, attack requests, alliance broken, conquered player, chat). Tier 2 caps at the 4 newest entries; events expire after 8s. - Added a transient **+gold pip** above the gold pill in `<control-panel>`, animated with a small fade-in. Fires for trade ships, trains, donations, and conquest. Trade-ship and train arrivals are removed from the events scroll since they're surfaced here instead. - New `MessageType.NUKE_DETONATED` and a server-side emission in `NukeExecution.detonate` — once an inbound nuke lands or gets intercepted, the inbound warning vanishes and a "detonated" entry takes its place. - `displayMessage` gained optional `unitID` and `focusPlayerID` params so events can link to a unit or a player. Unit captures and destructions now navigate to the unit's last tile when clicked; donations navigate to the other player. - ActionableEvents card width matches `<events-display>`; cards persist until the user clicks Accept/Reject/Renew/Ignore or the server-side request timeout expires. - Removed the in-events category filter UI and the gold-amount banner — `<events-display>` is now a lightweight log that hides entirely when empty. <img width="570" height="444" alt="Screenshot 2026-05-21 at 1 42 30 PM" src="https://github.com/user-attachments/assets/f103efb3-0e11-4b72-a11b-91ff6896177c" /> <img width="430" height="296" alt="Screenshot 2026-05-21 at 1 41 34 PM" src="https://github.com/user-attachments/assets/ae58475a-b252-4aa6-9ce5-99dea7575ce3" /> ## 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: evan
This commit is contained in:
+9
-9
@@ -21,10 +21,10 @@ vi.mock("lit/directives/unsafe-html.js", () => ({
|
||||
UnsafeHTMLDirective: class {},
|
||||
}));
|
||||
|
||||
import { EventsDisplay } from "../../../../src/client/hud/layers/EventsDisplay";
|
||||
import { ActionableEvents } from "../../../../src/client/hud/layers/ActionableEvents";
|
||||
import { MessageType } from "../../../../src/core/game/Game";
|
||||
|
||||
describe("EventsDisplay - alliance renewal cleanup (allianceID based)", () => {
|
||||
describe("ActionableEvents - alliance renewal cleanup (allianceID based)", () => {
|
||||
function makeRenewal(
|
||||
allianceID: number,
|
||||
focusID: number,
|
||||
@@ -40,7 +40,7 @@ describe("EventsDisplay - alliance renewal cleanup (allianceID based)", () => {
|
||||
}
|
||||
|
||||
test("removes ONLY renewal events for the broken alliance", () => {
|
||||
const display = new EventsDisplay();
|
||||
const display = new ActionableEvents();
|
||||
|
||||
const allianceAB = 1;
|
||||
const allianceAC = 2;
|
||||
@@ -67,7 +67,7 @@ describe("EventsDisplay - alliance renewal cleanup (allianceID based)", () => {
|
||||
});
|
||||
|
||||
test("does NOT remove renewals just because the same player is involved", () => {
|
||||
const display = new EventsDisplay();
|
||||
const display = new ActionableEvents();
|
||||
|
||||
const allianceAB = 10;
|
||||
const allianceAC = 11;
|
||||
@@ -86,7 +86,7 @@ describe("EventsDisplay - alliance renewal cleanup (allianceID based)", () => {
|
||||
});
|
||||
|
||||
test("breaking one alliance does not affect renewals between other players", () => {
|
||||
const display = new EventsDisplay();
|
||||
const display = new ActionableEvents();
|
||||
|
||||
const allianceAB = 100;
|
||||
const allianceCD = 200;
|
||||
@@ -105,7 +105,7 @@ describe("EventsDisplay - alliance renewal cleanup (allianceID based)", () => {
|
||||
});
|
||||
|
||||
test("onAllianceExtensionEvent removes renewal when playerID matches myPlayer", () => {
|
||||
const display = new EventsDisplay();
|
||||
const display = new ActionableEvents();
|
||||
|
||||
const allianceID = 42;
|
||||
const mySmallID = 7;
|
||||
@@ -127,7 +127,7 @@ describe("EventsDisplay - alliance renewal cleanup (allianceID based)", () => {
|
||||
});
|
||||
|
||||
test("onAllianceExtensionEvent keeps renewal when playerID does not match myPlayer", () => {
|
||||
const display = new EventsDisplay();
|
||||
const display = new ActionableEvents();
|
||||
|
||||
const allianceID = 42;
|
||||
const mySmallID = 7;
|
||||
@@ -150,7 +150,7 @@ describe("EventsDisplay - alliance renewal cleanup (allianceID based)", () => {
|
||||
});
|
||||
|
||||
test("onAllianceExtensionEvent keeps renewal when myPlayer is null", () => {
|
||||
const display = new EventsDisplay();
|
||||
const display = new ActionableEvents();
|
||||
|
||||
const allianceID = 42;
|
||||
|
||||
@@ -171,7 +171,7 @@ describe("EventsDisplay - alliance renewal cleanup (allianceID based)", () => {
|
||||
});
|
||||
|
||||
test("does not affect non-RENEW_ALLIANCE events", () => {
|
||||
const display = new EventsDisplay();
|
||||
const display = new ActionableEvents();
|
||||
|
||||
(display as any).events = [
|
||||
{
|
||||
@@ -1,6 +1,7 @@
|
||||
import { NukeExecution } from "../../../src/core/execution/NukeExecution";
|
||||
import {
|
||||
Game,
|
||||
MessageType,
|
||||
Player,
|
||||
PlayerInfo,
|
||||
PlayerType,
|
||||
@@ -119,6 +120,99 @@ describe("NukeExecution", () => {
|
||||
expect(player.isAlliedWith(otherPlayer)).toBe(false);
|
||||
});
|
||||
|
||||
test("AtomBomb detonation emits NUKE_DETONATED to each impacted player", () => {
|
||||
player.buildUnit(UnitType.MissileSilo, game.ref(1, 1), {});
|
||||
// Give otherPlayer a cluster around (50,50) so the blast intersects them.
|
||||
for (let x = 48; x < 53; x++) {
|
||||
for (let y = 48; y < 53; y++) {
|
||||
otherPlayer.conquer(game.ref(x, y));
|
||||
}
|
||||
}
|
||||
|
||||
const displayMessageSpy = vi.spyOn(game, "displayMessage");
|
||||
|
||||
game.addExecution(
|
||||
new NukeExecution(
|
||||
UnitType.AtomBomb,
|
||||
player,
|
||||
game.ref(50, 50),
|
||||
game.ref(1, 1),
|
||||
),
|
||||
);
|
||||
executeTicks(game, 200);
|
||||
|
||||
const detonatedCalls = displayMessageSpy.mock.calls.filter(
|
||||
(call) => call[1] === MessageType.NUKE_DETONATED,
|
||||
);
|
||||
expect(detonatedCalls.length).toBeGreaterThan(0);
|
||||
const otherCall = detonatedCalls.find(
|
||||
(call) => call[2] === otherPlayer.id(),
|
||||
);
|
||||
expect(otherCall).toBeDefined();
|
||||
expect(otherCall![0]).toBe("events_display.atom_bomb_detonated");
|
||||
// focusPlayerID (7th positional) is the launcher
|
||||
expect(otherCall![6]).toBe(player.id());
|
||||
|
||||
displayMessageSpy.mockRestore();
|
||||
});
|
||||
|
||||
test("HydrogenBomb detonation emits NUKE_DETONATED with hydrogen_bomb key", () => {
|
||||
player.buildUnit(UnitType.MissileSilo, game.ref(1, 1), {});
|
||||
for (let x = 48; x < 53; x++) {
|
||||
for (let y = 48; y < 53; y++) {
|
||||
otherPlayer.conquer(game.ref(x, y));
|
||||
}
|
||||
}
|
||||
|
||||
const displayMessageSpy = vi.spyOn(game, "displayMessage");
|
||||
|
||||
game.addExecution(
|
||||
new NukeExecution(
|
||||
UnitType.HydrogenBomb,
|
||||
player,
|
||||
game.ref(50, 50),
|
||||
game.ref(1, 1),
|
||||
),
|
||||
);
|
||||
executeTicks(game, 300);
|
||||
|
||||
const detonatedCalls = displayMessageSpy.mock.calls.filter(
|
||||
(call) => call[1] === MessageType.NUKE_DETONATED,
|
||||
);
|
||||
expect(detonatedCalls.length).toBeGreaterThan(0);
|
||||
expect(detonatedCalls[0][0]).toBe("events_display.hydrogen_bomb_detonated");
|
||||
|
||||
displayMessageSpy.mockRestore();
|
||||
});
|
||||
|
||||
test("MIRVWarhead detonation does NOT emit NUKE_DETONATED", () => {
|
||||
player.buildUnit(UnitType.MissileSilo, game.ref(1, 1), {});
|
||||
for (let x = 48; x < 53; x++) {
|
||||
for (let y = 48; y < 53; y++) {
|
||||
otherPlayer.conquer(game.ref(x, y));
|
||||
}
|
||||
}
|
||||
|
||||
const displayMessageSpy = vi.spyOn(game, "displayMessage");
|
||||
|
||||
game.addExecution(
|
||||
new NukeExecution(
|
||||
UnitType.MIRVWarhead,
|
||||
player,
|
||||
game.ref(50, 50),
|
||||
game.ref(1, 1),
|
||||
),
|
||||
);
|
||||
executeTicks(game, 200);
|
||||
|
||||
const detonatedCalls = displayMessageSpy.mock.calls.filter(
|
||||
(call) => call[1] === MessageType.NUKE_DETONATED,
|
||||
);
|
||||
expect(detonatedCalls).toHaveLength(0);
|
||||
|
||||
displayMessageSpy.mockRestore();
|
||||
});
|
||||
|
||||
test("nuke should break alliance when destroying ally's building even with few tiles", async () => {
|
||||
const req = player.createAllianceRequest(otherPlayer);
|
||||
req!.accept();
|
||||
|
||||
@@ -143,6 +143,7 @@ describe("TradeShipExecution", () => {
|
||||
tradeShipExecution.tick(1);
|
||||
expect(tradeShip.delete).toHaveBeenCalledWith(false);
|
||||
expect(tradeShipExecution.isActive()).toBe(false);
|
||||
expect(game.displayMessage).toHaveBeenCalled();
|
||||
expect(origOwner.addGold).toHaveBeenCalled();
|
||||
expect(dstOwner.addGold).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user