mirror of
https://github.com/openfrontio/OpenFrontIO.git
synced 2026-07-25 01:47:04 +00:00
Add requeue button to Ranked victory/defeat modal (#3121)
## Description: Adds a "Play Again" requeue button to the victory/defeat modal for Ranked 1v1 games. When clicked, it navigates the player back to the homepage and automatically opens the matchmaking modal to queue for another ranked match. Changes: - WinModal.ts: Added isRankedGame state, purple "Play Again" button (only shown for ranked 1v1), and _handleRequeue() method - Main.ts: Added ?requeue URL parameter handling to trigger matchmaking modal on page load - en.json: Added "requeue": "Play Again" translation string - added tests to WinModal.test.ts Note: temporarily set isRanked flag to true to get the modal to pop in a solo match on dev server and confirmed that ?requeue URL parameter called _handleRequeue() correctly, which opened the sign in process since actually signing in and queuing for a ranked match isn't possible on dev server. <img width="771" height="364" alt="play-again" src="https://github.com/user-attachments/assets/6e3f5a02-f1ae-465a-9b28-656126c11d3d" /> ## 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: skigim
This commit is contained in:
@@ -0,0 +1,117 @@
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
|
||||
import { RankedType } from "../../../../src/core/game/Game";
|
||||
|
||||
vi.mock("../../../../src/client/Utils", () => ({
|
||||
translateText: vi.fn((key: string) => {
|
||||
const translations: Record<string, string> = {
|
||||
"win_modal.exit": "Exit",
|
||||
"win_modal.requeue": "Play Again",
|
||||
"win_modal.keep": "Keep Playing",
|
||||
"win_modal.spectate": "Spectate",
|
||||
};
|
||||
return translations[key] || key;
|
||||
}),
|
||||
getGamesPlayed: vi.fn(() => 10),
|
||||
isInIframe: vi.fn(() => false),
|
||||
TUTORIAL_VIDEO_URL: "https://example.com/tutorial",
|
||||
}));
|
||||
|
||||
vi.mock("../../../../src/client/Api", () => ({
|
||||
getUserMe: vi.fn(async () => null),
|
||||
}));
|
||||
|
||||
vi.mock("../../../../src/client/Cosmetics", () => ({
|
||||
fetchCosmetics: vi.fn(async () => []),
|
||||
handlePurchase: vi.fn(),
|
||||
patternRelationship: vi.fn(() => ({})),
|
||||
}));
|
||||
|
||||
vi.mock("../../../../src/client/CrazyGamesSDK", () => ({
|
||||
crazyGamesSDK: {
|
||||
happytime: vi.fn(),
|
||||
requestAd: vi.fn(),
|
||||
gameplayStop: vi.fn(),
|
||||
},
|
||||
}));
|
||||
|
||||
describe("WinModal Requeue", () => {
|
||||
let mockLocationHref = "";
|
||||
|
||||
beforeEach(() => {
|
||||
mockLocationHref = "";
|
||||
// Mock window.location.href using Object.defineProperty
|
||||
const locationMock = {
|
||||
get href() {
|
||||
return mockLocationHref;
|
||||
},
|
||||
set href(value: string) {
|
||||
mockLocationHref = value;
|
||||
},
|
||||
};
|
||||
Object.defineProperty(window, "location", {
|
||||
value: locationMock,
|
||||
writable: true,
|
||||
configurable: true,
|
||||
});
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
vi.restoreAllMocks();
|
||||
});
|
||||
|
||||
describe("isRankedGame detection", () => {
|
||||
it("should detect ranked 1v1 game", () => {
|
||||
const gameConfig = {
|
||||
rankedType: RankedType.OneVOne,
|
||||
};
|
||||
const isRankedGame = gameConfig.rankedType === RankedType.OneVOne;
|
||||
expect(isRankedGame).toBe(true);
|
||||
});
|
||||
|
||||
it("should not detect non-ranked game", () => {
|
||||
const gameConfig = {
|
||||
rankedType: undefined,
|
||||
};
|
||||
const isRankedGame = gameConfig.rankedType === RankedType.OneVOne;
|
||||
expect(isRankedGame).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe("requeue navigation", () => {
|
||||
it("should navigate to /?requeue when requeue is triggered", () => {
|
||||
// Simulate the _handleRequeue behavior
|
||||
const handleRequeue = () => {
|
||||
window.location.href = "/?requeue";
|
||||
};
|
||||
|
||||
handleRequeue();
|
||||
|
||||
expect(window.location.href).toBe("/?requeue");
|
||||
});
|
||||
|
||||
it("should navigate to / when exit is triggered", () => {
|
||||
// Simulate the _handleExit behavior
|
||||
const handleExit = () => {
|
||||
window.location.href = "/";
|
||||
};
|
||||
|
||||
handleExit();
|
||||
|
||||
expect(window.location.href).toBe("/");
|
||||
});
|
||||
});
|
||||
|
||||
describe("requeue URL parameter handling", () => {
|
||||
it("should parse requeue parameter from URL", () => {
|
||||
const url = new URL("http://localhost:9000/?requeue");
|
||||
const hasRequeue = url.searchParams.has("requeue");
|
||||
expect(hasRequeue).toBe(true);
|
||||
});
|
||||
|
||||
it("should not find requeue parameter when absent", () => {
|
||||
const url = new URL("http://localhost:9000/");
|
||||
const hasRequeue = url.searchParams.has("requeue");
|
||||
expect(hasRequeue).toBe(false);
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user