updated the iframe for play game at credentials

src/components/pages/dashboard/userDashboard/gameCredentials/CredentialsCard.tsx

@@ -8,6 +8,7 @@ import TapIcon from '@/icons/Tap'
 import { CredentialsProps } from '@/types/game'
 import { CardPasswordField } from './CardPasswordHandler'
 import CopyToClipboard from './CopyToClipboard'
+import GameIframeDialog from '../games/exclusiveGames/exclusiveGameDetail/GameIframeDialog'
 
 
 export default function CredentialsCard({ cred, balance }: { cred: CredentialsProps; balance: any }) {
@@ -53,10 +54,19 @@ export default function CredentialsCard({ cred, balance }: { cred: CredentialsPr
             </ul>
             <div className="action__group mt-4 flex flex-col md:flex-row justify-between gap-2 md:gap-4">
                 <Link href={`/buy-coins/${cred?.id}`} className='ss-btn bg-primary-grad flex justify-center items-center gap-1'><Coin />Buy Coins</Link>
-                <Link href={cred.game_url} target='_blank' className='ss-btn bg-secondary-grad flex justify-center items-center text-[#426A66] gap-2 '>
+                {
+                    !cred.is_iframe ? (
+                        <Link href={"#"} className='ss-btn bg-secondary-grad flex justify-center items-center text-[#426A66] gap-2 '>
                             <TapIcon />
                             Play Game
                         </Link>
+                    ) : <GameIframeDialog
+                        gameName={cred?.full_name}
+                        gameUrl={cred?.game_url || ""}
+                        isCredCard={true}
+                    />
+                }
+                
             </div>
         </Box>
     )

src/components/pages/dashboard/userDashboard/games/exclusiveGames/exclusiveGameDetail/GameIframeDialog.tsx

+'use client';
+
+import React, { useState } from "react";
+import { Dialog, DialogContent, DialogTitle, IconButton } from "@mui/material";
+import { CloseCircle } from "@wandersonalwes/iconsax-react";
+import TapIcon from "@/icons/Tap";
+
+interface GameIframeDialogProps {
+    gameName: string;
+    gameUrl: string;
+    triggerButtonText?: string;
+    buttonClassName?: string;
+    isCredCard?: boolean;
+}
+
+export default function GameIframeDialog({
+    gameName,
+    gameUrl,
+    triggerButtonText = "Play Now",
+    buttonClassName = "ss-btn bg-primary-grad",
+    isCredCard
+}: GameIframeDialogProps) {
+    const [open, setOpen] = useState(false);
+
+    const handleOpen = () => setOpen(true);
+    const handleClose = () => setOpen(false);
+
+    return (
+        <>
+            {isCredCard ? <button className='ss-btn bg-secondary-grad flex justify-center items-center text-[#426A66] gap-2' onClick={handleOpen}>
+                <TapIcon />
+                Play Game
+            </button> : <button className={buttonClassName} onClick={handleOpen}>
+                {triggerButtonText}
+            </button>}
+
+            <Dialog open={open} onClose={handleClose} maxWidth="lg" fullWidth>
+                <DialogTitle>
+                    {gameName}
+                    <IconButton
+                        aria-label="close"
+                        onClick={handleClose}
+                        sx={{ position: "absolute", right: 8, top: 8 }}
+                    >
+                        <CloseCircle />
+                    </IconButton>
+                </DialogTitle>
+                <DialogContent sx={{ height: "80vh", p: 0 }}>
+                    <iframe
+                        src={gameUrl}
+                        title={gameName}
+                        width="100%"
+                        height="100%"
+                        frameBorder="0"
+                        allowFullScreen
+                    />
+                </DialogContent>
+            </Dialog>
+        </>
+    );
+}

src/components/pages/dashboard/userDashboard/games/exclusiveGames/exclusiveGameDetail/index.tsx

@@ -9,8 +9,13 @@ import ScreenShotSlider from "@/components/molecules/Sliders/ScreenShotSlider";
 import CustomLightGallery from "@/components/organism/LightGallery";
 import Link from "next/link";
 import UserCoin from "./UserCoin";
+import { redirect } from "next/dist/server/api-utils";
+import GameIframeDialog from "./GameIframeDialog";
 
 export default function ExclusiveGameDetail({ game }: { game: SingleGameResponse }) {
+
+    console.log({ isIframe: game?.data?.is_iframe, gameUrl: game?.data?.game_url, redirect: game?.data?.has_redirection });
+
     return (
         <>
             <section className="detail__banner mb-8">
@@ -55,7 +60,27 @@ export default function ExclusiveGameDetail({ game }: { game: SingleGameResponse
                                 </Box>}
 
                             </div>
-                            {game?.data?.game_url ? <Link className="ss-btn bg-primary-grad" href={game?.data?.game_url}>Play Now</Link> : ""}
+                            {
+                                game?.data?.is_iframe
+                                    ? (
+                                        // <Link className="ss-btn bg-primary-grad" href={"#"} data-iframe-url={game?.data?.game_url}>
+                                        //     Play Now
+                                        // </Link>
+                                        <GameIframeDialog
+                                            gameName={game?.data?.name}
+                                            gameUrl={game?.data?.game_url || ""}
+                                        />
+                                    )
+                                    : game?.data?.game_url
+                                        ? (
+                                            <Link className="ss-btn bg-primary-grad" href={game.data.game_url} target={game?.data?.has_redirection ? "_blank" : "_self"} rel={game?.data?.has_redirection ? "noopener noreferrer" : ""}>
+                                                Play Now
+                                            </Link>
+                                        )
+                                        : null
+                            }
+
+
 
                             {game?.data?.screenshots ? <ScreenShotSlider screenshots={game.data.screenshots} /> : ""}
                         </div>

src/types/game.ts

@@ -28,6 +28,8 @@ export interface GameItem extends CommonGameProps {
     screenshots?: string[] | null;
     subgames?: string[] | null;
     game_url?: string;
+    is_iframe?: boolean;
+    has_redirection?: boolean;
 }
 
 export interface Pagination {
@@ -80,6 +82,8 @@ export interface CredentialsProps {
     full_name: string,
     custom_password: boolean
     entries: string | number;
+    is_iframe?: boolean;
+    has_redirection?: boolean;
 }
 export interface CredentialsResponseProps {
     data: CredentialsProps[];