Better CrazyGames integration (#3055)

## Description:

Better integration with CrazyGames:

* Don't show login because accounts have not been integrated with
CrazyGames yet
* Integrate CG invite links & usernames
* Refactor match making logic to Matchmaking.ts
* Allow periods to support crazy game usernames
* Create a no-crazygames class that disabled elements when on crazygames

## 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

src/client/components/CopyButton.ts

@@ -2,6 +2,7 @@ import { LitElement, html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { getServerConfigFromClient } from "../../core/configuration/ConfigLoader";
 import { UserSettings } from "../../core/game/UserSettings";
+import { crazyGamesSDK } from "../CrazyGamesSDK";
 import { copyToClipboard, translateText } from "../Utils";
 
 @customElement("copy-button")
@@ -73,15 +74,21 @@ export class CopyButton extends LitElement {
     return url;
   }
 
-  private async resolveCopyText(): Promise<string> {
+  private async resolveCopyText(): Promise<string | null> {
     if (this.copyText) return this.copyText;
+    if (crazyGamesSDK.isOnCrazyGames()) {
+      return crazyGamesSDK.createInviteLink(this.lobbyId);
+    }
     if (!this.lobbyId) return "";
     return await this.buildCopyUrl();
   }
 
   private async handleCopy() {
     const text = await this.resolveCopyText();
-    if (!text) return;
+    if (!text) {
+      alert("Error copying game id");
+      return;
+    }
     await copyToClipboard(
       text,
       () => (this.copySuccess = true),

src/client/components/DesktopNavBar.ts

@@ -105,7 +105,7 @@ export class DesktopNavBar extends LitElement {
           data-i18n="main.news"
         ></button>
         <button
-          class="nav-menu-item text-white/70 hover:text-blue-500 font-bold tracking-widest uppercase cursor-pointer transition-colors [&.active]:text-blue-500 relative"
+          class="nav-menu-item no-crazygames text-white/70 hover:text-blue-500 font-bold tracking-widest uppercase cursor-pointer transition-colors [&.active]:text-blue-500 relative"
           data-page="page-item-store"
           data-i18n="main.store"
         ></button>
@@ -127,14 +127,14 @@ export class DesktopNavBar extends LitElement {
         <lang-selector></lang-selector>
         <button
           id="nav-account-button"
-          class="nav-menu-item relative h-10 rounded-full overflow-hidden flex items-center justify-center gap-2 px-3 bg-transparent border border-white/20 text-white/80 hover:text-white cursor-pointer transition-colors [&.active]:text-white"
+          class="no-crazygames nav-menu-item relative h-10 rounded-full overflow-hidden flex items-center justify-center gap-2 px-3 bg-transparent border border-white/20 text-white/80 hover:text-white cursor-pointer transition-colors [&.active]:text-white"
           data-page="page-account"
           data-i18n-aria-label="main.account"
           data-i18n-title="main.account"
         >
           <img
             id="nav-account-avatar"
-            class="hidden w-8 h-8 rounded-full object-cover"
+            class="no-crazygames hidden w-8 h-8 rounded-full object-cover"
             alt=""
             data-i18n-alt="main.discord_avatar_alt"
             referrerpolicy="no-referrer"

src/client/components/MobileNavBar.ts

@@ -125,7 +125,7 @@ export class MobileNavBar extends LitElement {
           data-i18n="main.stats"
         ></button>
         <button
-          class="nav-menu-item block w-full text-left font-bold uppercase tracking-[0.05em] text-white/70 transition-all duration-200 cursor-pointer hover:text-blue-600 hover:translate-x-2.5 hover:drop-shadow-[0_0_20px_rgba(37,99,235,0.5)] [&.active]:text-blue-600 [&.active]:translate-x-2.5 [&.active]:drop-shadow-[0_0_20px_rgba(37,99,235,0.5)] text-[clamp(18px,2.8vh,32px)] py-[clamp(0.2rem,0.8vh,0.75rem)]"
+          class="no-crazygames nav-menu-item block w-full text-left font-bold uppercase tracking-[0.05em] text-white/70 transition-all duration-200 cursor-pointer hover:text-blue-600 hover:translate-x-2.5 hover:drop-shadow-[0_0_20px_rgba(37,99,235,0.5)] [&.active]:text-blue-600 [&.active]:translate-x-2.5 [&.active]:drop-shadow-[0_0_20px_rgba(37,99,235,0.5)] text-[clamp(18px,2.8vh,32px)] py-[clamp(0.2rem,0.8vh,0.75rem)]"
           data-page="page-item-store"
           data-i18n="main.store"
         ></button>
@@ -135,7 +135,7 @@ export class MobileNavBar extends LitElement {
           data-i18n="main.settings"
         ></button>
         <button
-          class="nav-menu-item block w-full text-left font-bold uppercase tracking-[0.05em] text-white/70 transition-all duration-200 cursor-pointer hover:text-blue-600 hover:translate-x-2.5 hover:drop-shadow-[0_0_20px_rgba(37,99,235,0.5)] [&.active]:text-blue-600 [&.active]:translate-x-2.5 [&.active]:drop-shadow-[0_0_20px_rgba(37,99,235,0.5)] text-[clamp(18px,2.8vh,32px)] py-[clamp(0.2rem,0.8vh,0.75rem)]"
+          class="no-crazygames nav-menu-item block w-full text-left font-bold uppercase tracking-[0.05em] text-white/70 transition-all duration-200 cursor-pointer hover:text-blue-600 hover:translate-x-2.5 hover:drop-shadow-[0_0_20px_rgba(37,99,235,0.5)] [&.active]:text-blue-600 [&.active]:translate-x-2.5 [&.active]:drop-shadow-[0_0_20px_rgba(37,99,235,0.5)] text-[clamp(18px,2.8vh,32px)] py-[clamp(0.2rem,0.8vh,0.75rem)]"
           data-page="page-account"
           data-i18n="main.account"
         ></button>

src/client/components/PatternButton.ts

@@ -72,7 +72,7 @@ export class PatternButton extends LitElement {
 
     return html`
       <div
-        class="flex flex-col items-center justify-between gap-2 p-3 bg-white/5 backdrop-blur-sm border rounded-xl w-48 h-full transition-all duration-200 ${this
+        class="no-crazygames flex flex-col items-center justify-between gap-2 p-3 bg-white/5 backdrop-blur-sm border rounded-xl w-48 h-full transition-all duration-200 ${this
           .selected
           ? "border-green-500 shadow-[0_0_15px_rgba(34,197,94,0.5)]"
           : "hover:bg-white/10 hover:border-white/20 hover:shadow-xl border-white/10"}"

src/client/components/PlayPage.ts

@@ -138,32 +138,7 @@ export class PlayPage extends LitElement {
 
           <!-- Matchmaking Buttons (Full Width across entire grid) -->
           <div class="lg:col-span-12 flex flex-col gap-6">
-            <!-- Not Logged In Button -->
-            <button
-              id="matchmaking-button-logged-out"
-              class="w-full h-20 bg-purple-600 hover:bg-purple-500 text-white font-black uppercase tracking-widest rounded-xl transition-all duration-200 flex flex-col items-center justify-center overflow-hidden relative cursor-pointer"
-            >
-              <span
-                class="relative z-10 text-2xl"
-                data-i18n="matchmaking_button.login_required"
-              ></span>
-            </button>
-
-            <!-- Logged In Button -->
-            <button
-              id="matchmaking-button"
-              class="hidden w-full h-20 bg-purple-600 hover:bg-purple-500 text-white font-black uppercase tracking-widest rounded-xl transition-all duration-200 flex flex-col items-center justify-center group overflow-hidden relative"
-              data-i18n-title="matchmaking_modal.title"
-            >
-              <span
-                class="relative z-10 text-2xl"
-                data-i18n="matchmaking_button.play_ranked"
-              ></span>
-              <span
-                class="relative z-10 text-xs font-medium text-purple-100 opacity-90 group-hover:opacity-100 transition-opacity"
-                data-i18n="matchmaking_button.description"
-              ></span>
-            </button>
+            <matchmaking-button></matchmaking-button>
           </div>
         </div>
       </div>