@playruo/embed 1.1.4 → 1.2.0

package/dist/index.cjs

@@ -32,9 +32,12 @@ var import_react = require("react");
 
 // src/url.ts
 var buildEmbedUrl = ({ baseUrl, operation = "iframe", storeUrl }) => {
-  const url = new URL("/embed", baseUrl);
-  url.searchParams.set("operation", operation);
-  if (storeUrl) url.searchParams.set("storeUrl", storeUrl);
+  const operationPath = operation.startsWith("/") ? operation.slice(1) : operation;
+  const url = new URL(`/${operationPath}`, baseUrl);
+  url.searchParams.set("iframe", "true");
+  if (storeUrl) {
+    url.searchParams.set("storeUrl", storeUrl);
+  }
   return url.toString();
 };
 
@@ -56,10 +59,63 @@ var PlayruoEmbed = ({
 }) => {
   const internalIframeRef = (0, import_react.useRef)(null);
   const iframeRef = externalIframeRef || internalIframeRef;
-  const [isReady, setIsReady] = (0, import_react.useState)(false);
-  const [state, setState] = (0, import_react.useState)(null);
+  const [isIframeLoaded, setIsIframeLoaded] = (0, import_react.useState)(false);
+  const [hasPlayedOnce, setHasPlayedOnce] = (0, import_react.useState)(false);
+  const [showGameIframe, setShowGameIframe] = (0, import_react.useState)(false);
+  const [isMobile, setIsMobile] = (0, import_react.useState)(false);
+  const [isValidChromium, setIsValidChromium] = (0, import_react.useState)(true);
   const [errorMessage, setErrorMessage] = (0, import_react.useState)(null);
+  const escapeKeyTimer = (0, import_react.useRef)(null);
+  const escapeKeyPressed = (0, import_react.useRef)(false);
+  const ESCAPE_HOLD_DURATION = 1500;
   const src = (0, import_react.useMemo)(() => buildEmbedUrl({ baseUrl, operation, storeUrl }), [baseUrl, operation, storeUrl]);
+  (0, import_react.useEffect)(() => {
+    if (typeof window === "undefined") return;
+    const detectMobile = () => {
+      const userAgent = navigator.userAgent || navigator.vendor || window.opera;
+      return /android|iPad|iPhone|iPod/i.test(userAgent);
+    };
+    const detectChromium = () => {
+      const hasChrome = !!window.chrome;
+      const isChromium = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
+      return hasChrome || isChromium;
+    };
+    setIsMobile(detectMobile());
+    setIsValidChromium(detectChromium());
+  }, []);
+  const isCompatible = !isMobile && isValidChromium;
+  const isReady = isCompatible ? isIframeLoaded : true;
+  const currentState = (0, import_react.useMemo)(() => ({
+    hasPlayedOnce,
+    tryNow: {
+      available: isCompatible,
+      status: !isCompatible ? "Browser not compatible" : hasPlayedOnce ? "Click to replay" : "Ready"
+    },
+    buyNow: {
+      available: true,
+      status: "Ready"
+    }
+  }), [hasPlayedOnce, isCompatible]);
+  const checkKeyboardLockPermission = async () => {
+    if (!navigator.permissions) {
+      console.log("[PlayruoEmbed] Permissions API not supported");
+      return false;
+    }
+    try {
+      const { state } = await navigator.permissions.query({
+        name: "keyboard-lock"
+      });
+      if (state === "granted" || state === "prompt") {
+        console.log(`[PlayruoEmbed] Keyboard lock permission: ${state}`);
+        return true;
+      }
+      console.log("[PlayruoEmbed] Keyboard lock permission denied");
+      return false;
+    } catch (error) {
+      console.warn("[PlayruoEmbed] Error checking keyboard lock permission:", error);
+      return false;
+    }
+  };
   const requestFullscreenWithKeyboardLock = async () => {
     const iframe = iframeRef.current;
     if (!iframe?.requestFullscreen) {
@@ -69,11 +125,17 @@ var PlayruoEmbed = ({
     try {
       const fullscreenPromise = iframe.requestFullscreen();
       if (navigator.keyboard) {
-        navigator.keyboard.lock(["Escape"]).then(() => {
-          console.log("[PlayruoEmbed] Keyboard locked successfully");
+        const permissionPromise = checkKeyboardLockPermission();
+        const keyboardLockPromise = navigator.keyboard.lock(["Escape"]);
+        void Promise.all([permissionPromise, keyboardLockPromise]).then(([hasPermission]) => {
+          if (hasPermission) {
+            console.log("[PlayruoEmbed] Keyboard locked successfully");
+          }
         }).catch((err) => {
           console.warn("[PlayruoEmbed] Keyboard lock failed:", err);
         });
+      } else {
+        console.log("[PlayruoEmbed] Keyboard API not supported");
       }
       void fullscreenPromise.then(() => {
         console.log("[PlayruoEmbed] Fullscreen activated successfully");
@@ -86,47 +148,157 @@ var PlayruoEmbed = ({
       return false;
     }
   };
-  const sendCommand = (type) => {
-    if (!iframeRef.current?.contentWindow) {
-      console.warn(`PlayruoEmbed: Cannot send ${type} command, iframe not ready`);
+  const handleTryNow = (0, import_react.useCallback)(() => {
+    if (!isCompatible) {
+      console.warn("[PlayruoEmbed] Browser not compatible");
+      return;
+    }
+    const iframe = iframeRef.current;
+    if (!iframe) {
+      console.warn("[PlayruoEmbed] Iframe not ready");
       return;
     }
-    if (type === "try_now") {
+    setShowGameIframe(true);
+    try {
       requestFullscreenWithKeyboardLock();
+      iframe.contentWindow?.postMessage({
+        type: "playruo",
+        action: "tryNowClick",
+        fromEmbed: true,
+        isFullscreen: true,
+        isReplay: hasPlayedOnce
+      }, "*");
+      console.log("[PlayruoEmbed] Sent tryNowClick to game", hasPlayedOnce ? "(replay)" : "(first time)");
+      iframe.focus();
+      requestAnimationFrame(() => {
+        iframe.contentWindow?.focus();
+      });
+      setHasPlayedOnce(true);
+    } catch (error) {
+      console.error("[PlayruoEmbed] Failed to start game:", error);
+      setErrorMessage("Failed to start game");
+      onError?.("Failed to start game");
     }
-    iframeRef.current.contentWindow.postMessage({ type }, "*");
-  };
+  }, [isCompatible, hasPlayedOnce, onError, iframeRef]);
+  const handleBuyNow = (0, import_react.useCallback)(() => {
+    if (!storeUrl) {
+      console.warn("[PlayruoEmbed] No store URL provided");
+      return;
+    }
+    onPurchaseRequest?.({ storeUrl });
+  }, [storeUrl, onPurchaseRequest]);
   (0, import_react.useEffect)(() => {
-    const handler = (event) => {
-      const msg = event?.data ?? {};
-      if (!msg || typeof msg.type !== "string" || !msg.type.startsWith("playruo_")) return;
-      if (msg.type === "playruo_ready") {
-        setIsReady(true);
-        onReady?.();
-      } else if (msg.type === "playruo_state_update") {
-        setState(msg.data);
-        onStateChange?.(msg.data);
-      } else if (msg.type === "playruo_demo_completed") {
-        onDemoCompleted?.(msg.data);
-      } else if (msg.type === "playruo_purchase_request") {
-        onPurchaseRequest?.(msg.data);
-      } else if (msg.type === "playruo_error") {
-        const message = msg.data?.message ?? "Unknown error";
-        setErrorMessage(message);
-        onError?.(message);
+    if (isReady) {
+      onStateChange?.(currentState);
+    }
+  }, [isReady, currentState, onStateChange]);
+  (0, import_react.useEffect)(() => {
+    if (isReady) {
+      onReady?.();
+    }
+  }, [isReady, onReady]);
+  (0, import_react.useEffect)(() => {
+    const handleGameMessage = (event) => {
+      const { type } = event.data || {};
+      if (type === "error" || type === "closeForBuy" || type === "goToStore") {
+        setHasPlayedOnce(true);
+        onDemoCompleted?.({
+          reason: "Demo session ended",
+          storeUrl
+        });
+      }
+    };
+    window.addEventListener("message", handleGameMessage);
+    return () => window.removeEventListener("message", handleGameMessage);
+  }, [storeUrl, onDemoCompleted]);
+  (0, import_react.useEffect)(() => {
+    const handleFullscreenChange = () => {
+      const doc = document;
+      const isFullscreen = !!(doc.fullscreenElement || doc.webkitFullscreenElement || doc.mozFullScreenElement || doc.msFullscreenElement);
+      if (isFullscreen) {
+        const iframe = iframeRef.current;
+        if (iframe) {
+          setTimeout(() => {
+            iframe.focus();
+            iframe.contentWindow?.focus();
+          }, 200);
+        }
+      } else {
+        escapeKeyPressed.current = false;
+        if (escapeKeyTimer.current) {
+          clearTimeout(escapeKeyTimer.current);
+          escapeKeyTimer.current = null;
+        }
+        setHasPlayedOnce(true);
+        onDemoCompleted?.({
+          reason: "Demo session ended",
+          storeUrl
+        });
       }
     };
-    window.addEventListener("message", handler);
-    return () => window.removeEventListener("message", handler);
-  }, [onReady, onStateChange, onDemoCompleted, onPurchaseRequest, onError]);
-  const isAvailable = Boolean(isReady && state?.tryNow?.available);
+    document.addEventListener("fullscreenchange", handleFullscreenChange);
+    document.addEventListener("webkitfullscreenchange", handleFullscreenChange);
+    document.addEventListener("mozfullscreenchange", handleFullscreenChange);
+    document.addEventListener("MSFullscreenChange", handleFullscreenChange);
+    return () => {
+      document.removeEventListener("fullscreenchange", handleFullscreenChange);
+      document.removeEventListener("webkitfullscreenchange", handleFullscreenChange);
+      document.removeEventListener("mozfullscreenchange", handleFullscreenChange);
+      document.removeEventListener("MSFullscreenChange", handleFullscreenChange);
+    };
+  }, [storeUrl, onDemoCompleted, iframeRef]);
+  (0, import_react.useEffect)(() => {
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape" && !escapeKeyPressed.current) {
+        escapeKeyPressed.current = true;
+        event.preventDefault();
+        escapeKeyTimer.current = setTimeout(() => {
+          if (document.fullscreenElement) {
+            document.exitFullscreen();
+          }
+        }, ESCAPE_HOLD_DURATION);
+      }
+      if (event.ctrlKey && event.shiftKey && event.key === "R") {
+        event.preventDefault();
+        if (document.fullscreenElement) {
+          document.exitFullscreen().catch(console.warn);
+        }
+        setTimeout(() => {
+          window.location.reload();
+        }, 500);
+      }
+    };
+    const handleKeyUp = (event) => {
+      if (event.key === "Escape" && escapeKeyPressed.current) {
+        escapeKeyPressed.current = false;
+        if (escapeKeyTimer.current) {
+          clearTimeout(escapeKeyTimer.current);
+          escapeKeyTimer.current = null;
+        }
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    document.addEventListener("keyup", handleKeyUp);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      document.removeEventListener("keyup", handleKeyUp);
+    };
+  }, []);
+  (0, import_react.useEffect)(() => {
+    if (!self.crossOriginIsolated) {
+      console.warn(
+        '[PlayruoEmbed] \u26A0\uFE0F Not in a cross-origin isolated context.\nSharedArrayBuffer and high-precision timers may not work.\n\nAdd these headers to your server:\n  Cross-Origin-Opener-Policy: same-origin\n  Cross-Origin-Embedder-Policy: credentialless\n\nFor Next.js, add to next.config.js:\n  async headers() {\n    return [{\n      source: "/:path*",\n      headers: [\n        { key: "Cross-Origin-Opener-Policy", value: "same-origin" },\n        { key: "Cross-Origin-Embedder-Policy", value: "credentialless" }\n      ]\n    }];\n  }'
+      );
+    }
+  }, []);
+  const isAvailable = Boolean(isReady && isCompatible);
   const renderContent = () => {
     if (!renderState) return null;
     const actions = {
-      tryNow: () => sendCommand("try_now"),
-      buyNow: () => sendCommand("buy_now"),
-      canTryNow: Boolean(isReady && state?.tryNow?.available),
-      canBuyNow: Boolean(isReady && state?.buyNow?.available)
+      tryNow: handleTryNow,
+      buyNow: handleBuyNow,
+      canTryNow: Boolean(isReady && isCompatible),
+      canBuyNow: Boolean(isReady)
     };
     if (errorMessage) {
       return renderState({ status: "error", message: errorMessage, actions });
@@ -134,7 +306,7 @@ var PlayruoEmbed = ({
     if (!isReady) {
       return renderState({ status: "loading", actions });
     }
-    const message = !isAvailable ? state?.tryNow?.status ?? state?.buyNow?.status : void 0;
+    const message = !isAvailable ? currentState.tryNow.status : void 0;
     return renderState({
       status: isAvailable ? "available" : "unavailable",
       message,
@@ -143,21 +315,38 @@ var PlayruoEmbed = ({
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className, children: [
     renderContent(),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    isCompatible && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "iframe",
       {
         ref: iframeRef,
         src,
-        allow: "fullscreen *; autoplay *; gamepad *",
+        allow: "fullscreen *; autoplay *; gamepad *; clipboard-write *; web-share *; encrypted-media *; accelerometer *; gyroscope *",
         className: "w-full h-[70vh] rounded-lg border",
+        ...{ credentialless: "true" },
+        sandbox: "allow-same-origin allow-scripts allow-popups allow-forms allow-presentation allow-top-navigation allow-modals allow-pointer-lock",
         title: "Playruo",
         style: {
           position: showIframe ? void 0 : "absolute",
           top: showIframe ? void 0 : -9999,
           left: showIframe ? void 0 : -9999,
           zIndex: showIframe ? void 0 : -10,
-          opacity: showIframe ? 1 : 0,
+          opacity: showIframe && showGameIframe ? 1 : 0,
+          visibility: showIframe && showGameIframe ? "visible" : "hidden",
           pointerEvents: showIframe ? "auto" : "none"
+        },
+        onLoad: () => {
+          setIsIframeLoaded(true);
+          setTimeout(() => {
+            if (iframeRef.current) {
+              iframeRef.current.focus();
+              iframeRef.current.contentWindow?.focus();
+            }
+          }, 500);
+        },
+        onError: () => {
+          console.error("[PlayruoEmbed] Iframe failed to load");
+          setErrorMessage("Failed to load game");
+          onError?.("Failed to load game");
         }
       }
     )

package/dist/index.d.cts

@@ -113,6 +113,12 @@ interface BuildUrlParams {
     operation?: string;
     storeUrl?: string;
 }
+/**
+ * Build direct game URL (no intermediate /embed page)
+ * @example
+ * buildEmbedUrl({ baseUrl: "https://playruo.live", operation: "my-game" })
+ * // => "https://playruo.live/my-game?iframe=true"
+ */
 declare const buildEmbedUrl: ({ baseUrl, operation, storeUrl }: BuildUrlParams) => string;
 
 export { type BuyNowCommand, type DemoCompletedPayload, type GetStateCommand, type PlayruoDemoCompletedMessage, PlayruoEmbed, type PlayruoEmbedActions, type PlayruoEmbedCommand, type PlayruoEmbedMessage, type PlayruoEmbedProps, type PlayruoEmbedRenderState, type PlayruoEmbedState, type PlayruoErrorMessage, type PlayruoPurchaseRequestMessage, type PlayruoReadyMessage, type PlayruoStateUpdateMessage, type TryNowCommand, buildEmbedUrl, isPlayruoEmbedCommand, isPlayruoEmbedMessage };

package/dist/index.d.ts

@@ -113,6 +113,12 @@ interface BuildUrlParams {
     operation?: string;
     storeUrl?: string;
 }
+/**
+ * Build direct game URL (no intermediate /embed page)
+ * @example
+ * buildEmbedUrl({ baseUrl: "https://playruo.live", operation: "my-game" })
+ * // => "https://playruo.live/my-game?iframe=true"
+ */
 declare const buildEmbedUrl: ({ baseUrl, operation, storeUrl }: BuildUrlParams) => string;
 
 export { type BuyNowCommand, type DemoCompletedPayload, type GetStateCommand, type PlayruoDemoCompletedMessage, PlayruoEmbed, type PlayruoEmbedActions, type PlayruoEmbedCommand, type PlayruoEmbedMessage, type PlayruoEmbedProps, type PlayruoEmbedRenderState, type PlayruoEmbedState, type PlayruoErrorMessage, type PlayruoPurchaseRequestMessage, type PlayruoReadyMessage, type PlayruoStateUpdateMessage, type TryNowCommand, buildEmbedUrl, isPlayruoEmbedCommand, isPlayruoEmbedMessage };

package/dist/index.js

@@ -1,11 +1,14 @@
 // src/react/playruo-embed.tsx
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState, useCallback } from "react";
 
 // src/url.ts
 var buildEmbedUrl = ({ baseUrl, operation = "iframe", storeUrl }) => {
-  const url = new URL("/embed", baseUrl);
-  url.searchParams.set("operation", operation);
-  if (storeUrl) url.searchParams.set("storeUrl", storeUrl);
+  const operationPath = operation.startsWith("/") ? operation.slice(1) : operation;
+  const url = new URL(`/${operationPath}`, baseUrl);
+  url.searchParams.set("iframe", "true");
+  if (storeUrl) {
+    url.searchParams.set("storeUrl", storeUrl);
+  }
   return url.toString();
 };
 
@@ -27,10 +30,63 @@ var PlayruoEmbed = ({
 }) => {
   const internalIframeRef = useRef(null);
   const iframeRef = externalIframeRef || internalIframeRef;
-  const [isReady, setIsReady] = useState(false);
-  const [state, setState] = useState(null);
+  const [isIframeLoaded, setIsIframeLoaded] = useState(false);
+  const [hasPlayedOnce, setHasPlayedOnce] = useState(false);
+  const [showGameIframe, setShowGameIframe] = useState(false);
+  const [isMobile, setIsMobile] = useState(false);
+  const [isValidChromium, setIsValidChromium] = useState(true);
   const [errorMessage, setErrorMessage] = useState(null);
+  const escapeKeyTimer = useRef(null);
+  const escapeKeyPressed = useRef(false);
+  const ESCAPE_HOLD_DURATION = 1500;
   const src = useMemo(() => buildEmbedUrl({ baseUrl, operation, storeUrl }), [baseUrl, operation, storeUrl]);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const detectMobile = () => {
+      const userAgent = navigator.userAgent || navigator.vendor || window.opera;
+      return /android|iPad|iPhone|iPod/i.test(userAgent);
+    };
+    const detectChromium = () => {
+      const hasChrome = !!window.chrome;
+      const isChromium = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
+      return hasChrome || isChromium;
+    };
+    setIsMobile(detectMobile());
+    setIsValidChromium(detectChromium());
+  }, []);
+  const isCompatible = !isMobile && isValidChromium;
+  const isReady = isCompatible ? isIframeLoaded : true;
+  const currentState = useMemo(() => ({
+    hasPlayedOnce,
+    tryNow: {
+      available: isCompatible,
+      status: !isCompatible ? "Browser not compatible" : hasPlayedOnce ? "Click to replay" : "Ready"
+    },
+    buyNow: {
+      available: true,
+      status: "Ready"
+    }
+  }), [hasPlayedOnce, isCompatible]);
+  const checkKeyboardLockPermission = async () => {
+    if (!navigator.permissions) {
+      console.log("[PlayruoEmbed] Permissions API not supported");
+      return false;
+    }
+    try {
+      const { state } = await navigator.permissions.query({
+        name: "keyboard-lock"
+      });
+      if (state === "granted" || state === "prompt") {
+        console.log(`[PlayruoEmbed] Keyboard lock permission: ${state}`);
+        return true;
+      }
+      console.log("[PlayruoEmbed] Keyboard lock permission denied");
+      return false;
+    } catch (error) {
+      console.warn("[PlayruoEmbed] Error checking keyboard lock permission:", error);
+      return false;
+    }
+  };
   const requestFullscreenWithKeyboardLock = async () => {
     const iframe = iframeRef.current;
     if (!iframe?.requestFullscreen) {
@@ -40,11 +96,17 @@ var PlayruoEmbed = ({
     try {
       const fullscreenPromise = iframe.requestFullscreen();
       if (navigator.keyboard) {
-        navigator.keyboard.lock(["Escape"]).then(() => {
-          console.log("[PlayruoEmbed] Keyboard locked successfully");
+        const permissionPromise = checkKeyboardLockPermission();
+        const keyboardLockPromise = navigator.keyboard.lock(["Escape"]);
+        void Promise.all([permissionPromise, keyboardLockPromise]).then(([hasPermission]) => {
+          if (hasPermission) {
+            console.log("[PlayruoEmbed] Keyboard locked successfully");
+          }
         }).catch((err) => {
           console.warn("[PlayruoEmbed] Keyboard lock failed:", err);
         });
+      } else {
+        console.log("[PlayruoEmbed] Keyboard API not supported");
       }
       void fullscreenPromise.then(() => {
         console.log("[PlayruoEmbed] Fullscreen activated successfully");
@@ -57,47 +119,157 @@ var PlayruoEmbed = ({
       return false;
     }
   };
-  const sendCommand = (type) => {
-    if (!iframeRef.current?.contentWindow) {
-      console.warn(`PlayruoEmbed: Cannot send ${type} command, iframe not ready`);
+  const handleTryNow = useCallback(() => {
+    if (!isCompatible) {
+      console.warn("[PlayruoEmbed] Browser not compatible");
+      return;
+    }
+    const iframe = iframeRef.current;
+    if (!iframe) {
+      console.warn("[PlayruoEmbed] Iframe not ready");
       return;
     }
-    if (type === "try_now") {
+    setShowGameIframe(true);
+    try {
       requestFullscreenWithKeyboardLock();
+      iframe.contentWindow?.postMessage({
+        type: "playruo",
+        action: "tryNowClick",
+        fromEmbed: true,
+        isFullscreen: true,
+        isReplay: hasPlayedOnce
+      }, "*");
+      console.log("[PlayruoEmbed] Sent tryNowClick to game", hasPlayedOnce ? "(replay)" : "(first time)");
+      iframe.focus();
+      requestAnimationFrame(() => {
+        iframe.contentWindow?.focus();
+      });
+      setHasPlayedOnce(true);
+    } catch (error) {
+      console.error("[PlayruoEmbed] Failed to start game:", error);
+      setErrorMessage("Failed to start game");
+      onError?.("Failed to start game");
     }
-    iframeRef.current.contentWindow.postMessage({ type }, "*");
-  };
+  }, [isCompatible, hasPlayedOnce, onError, iframeRef]);
+  const handleBuyNow = useCallback(() => {
+    if (!storeUrl) {
+      console.warn("[PlayruoEmbed] No store URL provided");
+      return;
+    }
+    onPurchaseRequest?.({ storeUrl });
+  }, [storeUrl, onPurchaseRequest]);
   useEffect(() => {
-    const handler = (event) => {
-      const msg = event?.data ?? {};
-      if (!msg || typeof msg.type !== "string" || !msg.type.startsWith("playruo_")) return;
-      if (msg.type === "playruo_ready") {
-        setIsReady(true);
-        onReady?.();
-      } else if (msg.type === "playruo_state_update") {
-        setState(msg.data);
-        onStateChange?.(msg.data);
-      } else if (msg.type === "playruo_demo_completed") {
-        onDemoCompleted?.(msg.data);
-      } else if (msg.type === "playruo_purchase_request") {
-        onPurchaseRequest?.(msg.data);
-      } else if (msg.type === "playruo_error") {
-        const message = msg.data?.message ?? "Unknown error";
-        setErrorMessage(message);
-        onError?.(message);
+    if (isReady) {
+      onStateChange?.(currentState);
+    }
+  }, [isReady, currentState, onStateChange]);
+  useEffect(() => {
+    if (isReady) {
+      onReady?.();
+    }
+  }, [isReady, onReady]);
+  useEffect(() => {
+    const handleGameMessage = (event) => {
+      const { type } = event.data || {};
+      if (type === "error" || type === "closeForBuy" || type === "goToStore") {
+        setHasPlayedOnce(true);
+        onDemoCompleted?.({
+          reason: "Demo session ended",
+          storeUrl
+        });
+      }
+    };
+    window.addEventListener("message", handleGameMessage);
+    return () => window.removeEventListener("message", handleGameMessage);
+  }, [storeUrl, onDemoCompleted]);
+  useEffect(() => {
+    const handleFullscreenChange = () => {
+      const doc = document;
+      const isFullscreen = !!(doc.fullscreenElement || doc.webkitFullscreenElement || doc.mozFullScreenElement || doc.msFullscreenElement);
+      if (isFullscreen) {
+        const iframe = iframeRef.current;
+        if (iframe) {
+          setTimeout(() => {
+            iframe.focus();
+            iframe.contentWindow?.focus();
+          }, 200);
+        }
+      } else {
+        escapeKeyPressed.current = false;
+        if (escapeKeyTimer.current) {
+          clearTimeout(escapeKeyTimer.current);
+          escapeKeyTimer.current = null;
+        }
+        setHasPlayedOnce(true);
+        onDemoCompleted?.({
+          reason: "Demo session ended",
+          storeUrl
+        });
       }
     };
-    window.addEventListener("message", handler);
-    return () => window.removeEventListener("message", handler);
-  }, [onReady, onStateChange, onDemoCompleted, onPurchaseRequest, onError]);
-  const isAvailable = Boolean(isReady && state?.tryNow?.available);
+    document.addEventListener("fullscreenchange", handleFullscreenChange);
+    document.addEventListener("webkitfullscreenchange", handleFullscreenChange);
+    document.addEventListener("mozfullscreenchange", handleFullscreenChange);
+    document.addEventListener("MSFullscreenChange", handleFullscreenChange);
+    return () => {
+      document.removeEventListener("fullscreenchange", handleFullscreenChange);
+      document.removeEventListener("webkitfullscreenchange", handleFullscreenChange);
+      document.removeEventListener("mozfullscreenchange", handleFullscreenChange);
+      document.removeEventListener("MSFullscreenChange", handleFullscreenChange);
+    };
+  }, [storeUrl, onDemoCompleted, iframeRef]);
+  useEffect(() => {
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape" && !escapeKeyPressed.current) {
+        escapeKeyPressed.current = true;
+        event.preventDefault();
+        escapeKeyTimer.current = setTimeout(() => {
+          if (document.fullscreenElement) {
+            document.exitFullscreen();
+          }
+        }, ESCAPE_HOLD_DURATION);
+      }
+      if (event.ctrlKey && event.shiftKey && event.key === "R") {
+        event.preventDefault();
+        if (document.fullscreenElement) {
+          document.exitFullscreen().catch(console.warn);
+        }
+        setTimeout(() => {
+          window.location.reload();
+        }, 500);
+      }
+    };
+    const handleKeyUp = (event) => {
+      if (event.key === "Escape" && escapeKeyPressed.current) {
+        escapeKeyPressed.current = false;
+        if (escapeKeyTimer.current) {
+          clearTimeout(escapeKeyTimer.current);
+          escapeKeyTimer.current = null;
+        }
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    document.addEventListener("keyup", handleKeyUp);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      document.removeEventListener("keyup", handleKeyUp);
+    };
+  }, []);
+  useEffect(() => {
+    if (!self.crossOriginIsolated) {
+      console.warn(
+        '[PlayruoEmbed] \u26A0\uFE0F Not in a cross-origin isolated context.\nSharedArrayBuffer and high-precision timers may not work.\n\nAdd these headers to your server:\n  Cross-Origin-Opener-Policy: same-origin\n  Cross-Origin-Embedder-Policy: credentialless\n\nFor Next.js, add to next.config.js:\n  async headers() {\n    return [{\n      source: "/:path*",\n      headers: [\n        { key: "Cross-Origin-Opener-Policy", value: "same-origin" },\n        { key: "Cross-Origin-Embedder-Policy", value: "credentialless" }\n      ]\n    }];\n  }'
+      );
+    }
+  }, []);
+  const isAvailable = Boolean(isReady && isCompatible);
   const renderContent = () => {
     if (!renderState) return null;
     const actions = {
-      tryNow: () => sendCommand("try_now"),
-      buyNow: () => sendCommand("buy_now"),
-      canTryNow: Boolean(isReady && state?.tryNow?.available),
-      canBuyNow: Boolean(isReady && state?.buyNow?.available)
+      tryNow: handleTryNow,
+      buyNow: handleBuyNow,
+      canTryNow: Boolean(isReady && isCompatible),
+      canBuyNow: Boolean(isReady)
     };
     if (errorMessage) {
       return renderState({ status: "error", message: errorMessage, actions });
@@ -105,7 +277,7 @@ var PlayruoEmbed = ({
     if (!isReady) {
       return renderState({ status: "loading", actions });
     }
-    const message = !isAvailable ? state?.tryNow?.status ?? state?.buyNow?.status : void 0;
+    const message = !isAvailable ? currentState.tryNow.status : void 0;
     return renderState({
       status: isAvailable ? "available" : "unavailable",
       message,
@@ -114,21 +286,38 @@ var PlayruoEmbed = ({
   };
   return /* @__PURE__ */ jsxs("div", { className, children: [
     renderContent(),
-    /* @__PURE__ */ jsx(
+    isCompatible && /* @__PURE__ */ jsx(
       "iframe",
       {
         ref: iframeRef,
         src,
-        allow: "fullscreen *; autoplay *; gamepad *",
+        allow: "fullscreen *; autoplay *; gamepad *; clipboard-write *; web-share *; encrypted-media *; accelerometer *; gyroscope *",
         className: "w-full h-[70vh] rounded-lg border",
+        ...{ credentialless: "true" },
+        sandbox: "allow-same-origin allow-scripts allow-popups allow-forms allow-presentation allow-top-navigation allow-modals allow-pointer-lock",
         title: "Playruo",
         style: {
           position: showIframe ? void 0 : "absolute",
           top: showIframe ? void 0 : -9999,
           left: showIframe ? void 0 : -9999,
           zIndex: showIframe ? void 0 : -10,
-          opacity: showIframe ? 1 : 0,
+          opacity: showIframe && showGameIframe ? 1 : 0,
+          visibility: showIframe && showGameIframe ? "visible" : "hidden",
           pointerEvents: showIframe ? "auto" : "none"
+        },
+        onLoad: () => {
+          setIsIframeLoaded(true);
+          setTimeout(() => {
+            if (iframeRef.current) {
+              iframeRef.current.focus();
+              iframeRef.current.contentWindow?.focus();
+            }
+          }, 500);
+        },
+        onError: () => {
+          console.error("[PlayruoEmbed] Iframe failed to load");
+          setErrorMessage("Failed to load game");
+          onError?.("Failed to load game");
         }
       }
     )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playruo/embed",
-  "version": "1.1.4",
+  "version": "1.2.0",
   "description": "React SDK to embed Playruo with postMessage API.",
   "license": "MIT",
   "type": "module",