From 32adfa2f79350d8eb5307971b4ee22841182d6b1 Mon Sep 17 00:00:00 2001
From: Skigim <dwight.harr01@outlook.com>
Date: Sat, 7 Feb 2026 14:51:02 -0600
Subject: [PATCH] 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
---
 resources/lang/en.json                        |   1 +
 src/client/Main.ts                            |  26 ++++
 src/client/Matchmaking.ts                     |   2 +-
 src/client/graphics/layers/WinModal.ts        |  23 ++++
 tests/client/graphics/layers/WinModal.test.ts | 117 ++++++++++++++++++
 5 files changed, 168 insertions(+), 1 deletion(-)
 create mode 100644 tests/client/graphics/layers/WinModal.test.ts

diff --git a/resources/lang/en.json b/resources/lang/en.json
index 9750864e8..2bcf1a731 100644
--- a/resources/lang/en.json
+++ b/resources/lang/en.json
@@ -718,6 +718,7 @@
     "exit": "Exit Game",
     "keep": "Keep Playing",
     "spectate": "Spectate",
+    "requeue": "Play Again",
     "wishlist": "Wishlist on Steam!",
     "ofm_winter": "OpenFront Masters Winter Tournament!",
     "ofm_winter_description": "Join the competitive tournament and compete against the best players",
diff --git a/src/client/Main.ts b/src/client/Main.ts
index ba6569889..0b29ee0a7 100644
--- a/src/client/Main.ts
+++ b/src/client/Main.ts
@@ -755,6 +755,32 @@ class Client {
     if (decodedHash.startsWith("#refresh")) {
       window.location.href = "/";
     }
+
+    // Handle requeue parameter for ranked matchmaking
+    const searchParams = new URLSearchParams(window.location.search);
+    if (searchParams.has("requeue")) {
+      // Remove only the requeue parameter, preserving other params and hash
+      searchParams.delete("requeue");
+      const newUrl =
+        window.location.pathname +
+        (searchParams.toString() ? "?" + searchParams.toString() : "") +
+        window.location.hash;
+      history.replaceState(null, "", newUrl);
+      // Wait for matchmaking button to be defined, then trigger its click handler
+      // This goes through username validation instead of bypassing it
+      customElements.whenDefined("matchmaking-button").then(() => {
+        const matchmakingButton = document.querySelector(
+          "matchmaking-button button",
+        ) as HTMLButtonElement | null;
+        if (matchmakingButton) {
+          matchmakingButton.click();
+        } else {
+          console.warn(
+            "Requeue requested, but matchmaking button not found in DOM.",
+          );
+        }
+      });
+    }
   }
 
   private async handleJoinLobby(event: CustomEvent<JoinLobbyEvent>) {
diff --git a/src/client/Matchmaking.ts b/src/client/Matchmaking.ts
index 3fa4af738..2d8635d2d 100644
--- a/src/client/Matchmaking.ts
+++ b/src/client/Matchmaking.ts
@@ -320,7 +320,7 @@ export class MatchmakingButton extends LitElement {
     window.showPage?.("page-account");
   }
 
-  private open() {
+  public open() {
     this.matchmakingModal?.open();
   }
 
diff --git a/src/client/graphics/layers/WinModal.ts b/src/client/graphics/layers/WinModal.ts
index a6334379b..af2765e66 100644
--- a/src/client/graphics/layers/WinModal.ts
+++ b/src/client/graphics/layers/WinModal.ts
@@ -8,6 +8,7 @@ import {
 } from "../../../client/Utils";
 import { ColorPalette, Pattern } from "../../../core/CosmeticSchemas";
 import { EventBus } from "../../../core/EventBus";
+import { RankedType } from "../../../core/game/Game";
 import { GameUpdateType } from "../../../core/game/GameUpdates";
 import { GameView } from "../../../core/game/GameView";
 import { getUserMe } from "../../Api";
@@ -37,6 +38,9 @@ export class WinModal extends LitElement implements Layer {
   @state()
   private isWin = false;
 
+  @state()
+  private isRankedGame = false;
+
   @state()
   private patternContent: TemplateResult | null = null;
 
@@ -75,6 +79,16 @@ export class WinModal extends LitElement implements Layer {
           >
             ${translateText("win_modal.exit")}
           </button>
+          ${this.isRankedGame
+            ? html`
+                <button
+                  @click=${this._handleRequeue}
+                  class="flex-1 px-3 py-3 text-base cursor-pointer bg-purple-600 text-white border-0 rounded-sm transition-all duration-200 hover:bg-purple-500 hover:-translate-y-px active:translate-y-px"
+                >
+                  ${translateText("win_modal.requeue")}
+                </button>
+              `
+            : null}
           <button
             @click=${this.hide}
             class="flex-1 px-3 py-3 text-base cursor-pointer bg-blue-500/60 text-white border-0 rounded-sm transition-all duration-200 hover:bg-blue-500/80 hover:-translate-y-px active:translate-y-px"
@@ -251,6 +265,9 @@ export class WinModal extends LitElement implements Layer {
   async show() {
     crazyGamesSDK.gameplayStop();
     await this.loadPatternContent();
+    // Check if this is a ranked game
+    this.isRankedGame =
+      this.game.config().gameConfig().rankedType === RankedType.OneVOne;
     this.isVisible = true;
     this.requestUpdate();
     setTimeout(() => {
@@ -270,6 +287,12 @@ export class WinModal extends LitElement implements Layer {
     window.location.href = "/";
   }
 
+  private _handleRequeue() {
+    this.hide();
+    // Navigate to homepage and open matchmaking modal
+    window.location.href = "/?requeue";
+  }
+
   init() {}
 
   tick() {
diff --git a/tests/client/graphics/layers/WinModal.test.ts b/tests/client/graphics/layers/WinModal.test.ts
new file mode 100644
index 000000000..fcb59d6dc
--- /dev/null
+++ b/tests/client/graphics/layers/WinModal.test.ts
@@ -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);
+    });
+  });
+});