crazygames

Author: evanpelle

src/client/CrazyGamesSDK.ts

@@ -3,6 +3,28 @@ declare global {
     CrazyGames?: {
       SDK: {
         init: () => Promise<void>;
+        user: {
+          getUser(): Promise<{
+            username: string;
+          } | null>;
+          addAuthListener: (
+            listener: (
+              user: {
+                username: string;
+              } | null,
+            ) => void,
+          ) => void;
+        };
+        ad: {
+          requestAd: (
+            adType: string,
+            callbacks: {
+              adStarted: () => void;
+              adFinished: () => void;
+              adError: (error: any) => void;
+            },
+          ) => void;
+        };
         game: {
           gameplayStart: () => Promise<void>;
           gameplayStop: () => Promise<void>;
@@ -14,7 +36,9 @@ declare global {
             [key: string]: string | number;
           }) => string;
           hideInviteButton: () => void;
+          inviteLink: (params: { [key: string]: string | number }) => string;
           getInviteParam: (paramName: string) => string | null;
+          isInstantMultiplayer?: boolean;
         };
       };
     };
@@ -24,6 +48,24 @@ declare global {
 export class CrazyGamesSDK {
   private initialized = false;
   private isGameplayActive = false;
+  private readyPromise: Promise<void>;
+  private resolveReady!: () => void;
+
+  constructor() {
+    this.readyPromise = new Promise((resolve) => {
+      this.resolveReady = resolve;
+    });
+  }
+
+  async ready(): Promise<boolean> {
+    const timeout = new Promise<boolean>((resolve) => {
+      setTimeout(() => resolve(false), 3000);
+    });
+
+    const ready = this.readyPromise.then(() => true);
+
+    return Promise.race([ready, timeout]);
+  }
 
   isOnCrazyGames(): boolean {
     try {
@@ -70,12 +112,58 @@ export class CrazyGamesSDK {
     try {
       await window.CrazyGames.SDK.init();
       this.initialized = true;
+      this.resolveReady();
       console.log("CrazyGames SDK initialized");
     } catch (error) {
       console.error("Failed to initialize CrazyGames SDK:", error);
     }
   }
 
+  async getUsername(): Promise<string | null> {
+    const isReady = await this.ready();
+    if (!isReady) {
+      return null;
+    }
+    try {
+      return (await window.CrazyGames!.SDK.user.getUser())?.username ?? null;
+    } catch (e) {
+      console.log("error getting CrazyGames username: ", e);
+      return null;
+    }
+  }
+
+  async addAuthListener(
+    listener: (
+      user: {
+        username: string;
+      } | null,
+    ) => void,
+  ): Promise<void> {
+    if (!(await this.ready())) {
+      return;
+    }
+
+    try {
+      console.log("registering CrazyGames auth listener");
+      window.CrazyGames!.SDK.user.addAuthListener(listener);
+    } catch (error) {
+      console.error("Failed to add auth listener:", error);
+    }
+  }
+
+  async isInstantMultiplayer(): Promise<boolean> {
+    const isReady = await this.ready();
+    if (!isReady) {
+      return false;
+    }
+    try {
+      return window.CrazyGames!.SDK.game.isInstantMultiplayer ?? false;
+    } catch (e) {
+      console.log("Error getting instant multiplayer: ", e);
+      return false;
+    }
+  }
+
   async gameplayStart(): Promise<void> {
     if (!this.isReady()) {
       return;
@@ -186,6 +274,22 @@ export class CrazyGamesSDK {
     }
   }
 
+  createInviteLink(gameId: string): string | null {
+    if (!this.isReady()) {
+      console.warn("CrazyGames SDK not ready, cannot create invite link");
+      return null;
+    }
+
+    try {
+      const link = window.CrazyGames!.SDK.game.inviteLink({ gameId });
+      console.log("CrazyGames: created invite link:", link);
+      return link;
+    } catch (error) {
+      console.error("Failed to create invite link:", error);
+      return null;
+    }
+  }
+
   getInviteGameId(): string | null {
     if (!this.isReady()) {
       return null;
@@ -200,6 +304,33 @@ export class CrazyGamesSDK {
       return null;
     }
   }
+
+  requestMidgameAd(): Promise<void> {
+    return new Promise((resolve) => {
+      if (!this.isReady()) {
+        resolve();
+        return;
+      }
+
+      try {
+        const callbacks = {
+          adFinished: () => {
+            console.log("End midgame ad");
+            resolve();
+          },
+          adError: (error: any) => {
+            console.log("Error midgame ad", error);
+            resolve();
+          },
+          adStarted: () => console.log("Start midgame ad"),
+        };
+        window.CrazyGames!.SDK.ad.requestAd("midgame", callbacks);
+      } catch (error) {
+        console.error("Failed to request midgame ad:", error);
+        resolve();
+      }
+    });
+  }
 }
 
 export const crazyGamesSDK = new CrazyGamesSDK();

src/client/HostLobbyModal.ts

@@ -113,6 +113,12 @@ export class HostLobbyModal extends BaseModal {
   }
 
   private async buildLobbyUrl(): Promise<string> {
+    if (crazyGamesSDK.isOnCrazyGames()) {
+      const link = crazyGamesSDK.createInviteLink(this.lobbyId);
+      if (link !== null) {
+        return link;
+      }
+    }
     const config = await getServerConfigFromClient();
     return `${window.location.origin}/${config.workerPath(this.lobbyId)}/game/${this.lobbyId}?lobby&s=${encodeURIComponent(this.lobbyUrlSuffix)}`;
   }
@@ -123,7 +129,9 @@ export class HostLobbyModal extends BaseModal {
   }
 
   private updateHistory(url: string): void {
-    history.replaceState(null, "", url);
+    if (!crazyGamesSDK.isOnCrazyGames()) {
+      history.replaceState(null, "", url);
+    }
   }
 
   render() {

src/client/LangSelector.ts

@@ -228,6 +228,7 @@ export class LangSelector extends LitElement {
       "stats-modal",
       "flag-input-modal",
       "flag-input",
+      "matchmaking-button",
     ];
 
     document.title = this.translateText("main.title") ?? document.title;

src/client/Main.ts

@@ -214,6 +214,7 @@ class Client {
   private usernameInput: UsernameInput | null = null;
   private flagInput: FlagInput | null = null;
 
+  private hostModal: HostPrivateLobbyModal;
   private joinModal: JoinPrivateLobbyModal;
   private publicLobby: PublicLobby;
   private userSettings: UserSettings = new UserSettings();
@@ -431,56 +432,8 @@ class Client {
     ) {
       console.warn("Matchmaking modal element not found");
     }
-    const matchmakingButton = document.getElementById("matchmaking-button");
-    const matchmakingButtonLoggedOut = document.getElementById(
-      "matchmaking-button-logged-out",
-    );
-
-    const updateMatchmakingButton = (loggedIn: boolean) => {
-      if (!loggedIn) {
-        matchmakingButton?.classList.add("hidden");
-        matchmakingButtonLoggedOut?.classList.remove("hidden");
-      } else {
-        matchmakingButton?.classList.remove("hidden");
-        matchmakingButtonLoggedOut?.classList.add("hidden");
-      }
-    };
-
-    if (matchmakingButton) {
-      matchmakingButton.addEventListener("click", () => {
-        if (this.usernameInput?.isValid()) {
-          window.showPage?.("page-matchmaking");
-          this.publicLobby.leaveLobby();
-        } else {
-          window.dispatchEvent(
-            new CustomEvent("show-message", {
-              detail: {
-                message: this.usernameInput?.validationError,
-                color: "red",
-                duration: 3000,
-              },
-            }),
-          );
-        }
-      });
-    }
-
-    if (matchmakingButtonLoggedOut) {
-      matchmakingButtonLoggedOut.addEventListener("click", () => {
-        window.showPage?.("page-account");
-      });
-    }
 
     const onUserMe = async (userMeResponse: UserMeResponse | false) => {
-      // Check if user has actual authentication (discord or email), not just a publicId
-      const loggedIn =
-        userMeResponse !== false &&
-        userMeResponse !== null &&
-        typeof userMeResponse === "object" &&
-        userMeResponse.user &&
-        (userMeResponse.user.discord !== undefined ||
-          userMeResponse.user.email !== undefined);
-      updateMatchmakingButton(loggedIn);
       updateAccountNavButton(userMeResponse);
       document.dispatchEvent(
         new CustomEvent("userMeResponse", {
@@ -522,10 +475,10 @@ class Client {
         }
       });
 
-    const hostModal = document.querySelector(
+    this.hostModal = document.querySelector(
       "host-lobby-modal",
     ) as HostPrivateLobbyModal;
-    if (!hostModal || !(hostModal instanceof HostPrivateLobbyModal)) {
+    if (!this.hostModal || !(this.hostModal instanceof HostPrivateLobbyModal)) {
       console.warn("Host private lobby modal element not found");
     }
     const hostLobbyButton = document.getElementById("host-lobby-button");
@@ -641,6 +594,14 @@ class Client {
         return;
       }
     }
+    crazyGamesSDK.isInstantMultiplayer().then((isInstant) => {
+      if (isInstant) {
+        console.log(
+          `CrazyGames: joining instant multiplayer lobby from CrazyGames`,
+        );
+        this.hostModal.open();
+      }
+    });
 
     const strip = () =>
       history.replaceState(
@@ -951,11 +912,27 @@ class Client {
   }
 }
 
+// Hide elements with no-crazygames class if on CrazyGames
+const hideCrazyGamesElements = () => {
+  if (crazyGamesSDK.isOnCrazyGames()) {
+    document.querySelectorAll(".no-crazygames").forEach((el) => {
+      (el as HTMLElement).style.display = "none";
+    });
+  }
+};
+
 // Initialize the client when the DOM is loaded
 const bootstrap = () => {
   initLayout();
   new Client().initialize();
   initNavigation();
+
+  // Hide elements immediately
+  hideCrazyGamesElements();
+
+  // Also hide elements after a short delay to catch late-rendered components
+  setTimeout(hideCrazyGamesElements, 100);
+  setTimeout(hideCrazyGamesElements, 500);
 };
 
 if (document.readyState === "loading") {