Files
Skigim 32adfa2f79 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
2026-02-07 12:51:02 -08:00

118 lines
3.1 KiB
TypeScript

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);
});
});
});