feat(client): Share/link button in the in-game top-right control bar (#5856)

resources/lang/en.json

@@ -1008,6 +1008,9 @@
     "hvn": "Humans vs Nations",
     "teams": "Teams"
   },
+  "game_right_sidebar": {
+    "share_link": "Share Link"
+  },
   "game_settings": {
     "bots": "Tribes: ",
     "compact_map": "Compact Map",

src/client/hud/layers/GameRightSidebar.ts

@@ -13,7 +13,12 @@ import { gamePortal } from "../../GamePortal";
 import { showInGameAlert, showInGameConfirm } from "../../InGameModal";
 import { TogglePauseIntentEvent } from "../../InputHandler";
 import { PauseGameIntentEvent, SendWinnerEvent } from "../../Transport";
-import { homeHref, showToast, translateText } from "../../Utils";
+import {
+  copyToClipboard,
+  homeHref,
+  showToast,
+  translateText,
+} from "../../Utils";
 import { GameView } from "../../view";
 import { ImmunityBarVisibleEvent } from "./ImmunityTimer";
 import { ShowReplayPanelEvent } from "./ReplayPanel";
@@ -25,6 +30,7 @@ const pauseIcon = assetUrl("images/PauseIconWhite.svg");
 const playIcon = assetUrl("images/PlayIconWhite.svg");
 const newLobbyIcon = assetUrl("images/ReplayRegularIconWhite.svg");
 const settingsIcon = assetUrl("images/SettingIconWhite.svg");
+const shareIcon = assetUrl("images/ShareIconWhite.svg");
 const fullscreenIcon = assetUrl("images/FullscreenIconWhite.svg");
 const exitFullscreenIcon = assetUrl("images/ExitFullscreenIconWhite.svg");
 
@@ -288,6 +294,34 @@ export class GameRightSidebar extends LitElement implements Controller {
     );
   }
 
+  private isShareable(): boolean {
+    return Boolean(this.game?.gameID?.());
+  }
+
+  private async onShareButtonClick() {
+    const gameId = this.game?.gameID?.();
+    if (!gameId) {
+      showToast(translateText("common.failed_copy"), "red");
+      return;
+    }
+
+    try {
+      const text = gamePortal.isOnGamePortal()
+        ? await gamePortal.createInviteLink(gameId)
+        : `${ClientEnv.shareOrigin()}${ClientEnv.gamePath(gameId)}`;
+
+      if (!text) {
+        showToast(translateText("common.failed_copy"), "red");
+        return;
+      }
+
+      await copyToClipboard(text);
+      showToast(translateText("common.copied"), "green");
+    } catch {
+      showToast(translateText("common.failed_copy"), "red");
+    }
+  }
+
   private onFullscreenButtonClick() {
     if (!document.fullscreenElement) {
       document.documentElement.requestFullscreen().catch((err) => {
@@ -380,6 +414,25 @@ export class GameRightSidebar extends LitElement implements Controller {
           <img src=${settingsIcon} alt="settings" width="20" height="20" />
         </div>
 
+        ${
+          this.isShareable()
+            ? html`<button
+                type="button"
+                class="cursor-pointer bg-transparent border-0 p-0 flex items-center justify-center text-white"
+                @click=${this.onShareButtonClick}
+                title=${translateText("game_right_sidebar.share_link")}
+                aria-label=${translateText("game_right_sidebar.share_link")}
+              >
+                <img
+                  src=${shareIcon}
+                  alt=""
+                  aria-hidden="true"
+                  width="20"
+                  height="20"
+                />
+              </button>`
+            : ""
+        }
         ${
           document.fullscreenEnabled && !this.hideFullscreenButton
             ? html`<div

tests/client/GameRightSidebar.fullscreen.test.ts

@@ -57,7 +57,7 @@ async function flush(el: TestSidebar): Promise<void> {
 function fullscreenButton(el: TestSidebar): HTMLImageElement | undefined {
   const images = [
     ...el.renderRoot.querySelectorAll<HTMLImageElement>("img"),
-  ].filter((img) => img.alt !== "settings" && img.alt !== "exit");
+  ].filter((img) => img.src.includes("Fullscreen"));
   return images[0];
 }