diff --git a/newIDE/app/src/ExportAndShare/GenericExporters/OnlineWebExport/OnlineGameLink.js b/newIDE/app/src/ExportAndShare/GenericExporters/OnlineWebExport/OnlineGameLink.js index ce70066c6fc8..4a946a7eb1ac 100644 --- a/newIDE/app/src/ExportAndShare/GenericExporters/OnlineWebExport/OnlineGameLink.js +++ b/newIDE/app/src/ExportAndShare/GenericExporters/OnlineWebExport/OnlineGameLink.js @@ -33,6 +33,8 @@ import { ColumnStackLayout } from '../../../UI/Layout'; import useAlertDialog from '../../../UI/Alert/useAlertDialog'; import CircularProgress from '../../../UI/CircularProgress'; import { GameRegistration } from '../../../GameDashboard/GameRegistration'; +import QrCode from '../../../UI/QrCode'; +import { useResponsiveWindowSize } from '../../../UI/Responsive/ResponsiveWindowMeasurer'; type OnlineGameLinkProps = {| build: ?Build, @@ -65,6 +67,7 @@ const OnlineGameLink = ({ const [isShareDialogOpen, setIsShareDialogOpen] = React.useState( false ); + const { isMobile } = useResponsiveWindowSize(); const [ isOnlineGamePropertiesDialogOpen, setIsOnlineGamePropertiesDialogOpen, @@ -83,7 +86,7 @@ const OnlineGameLink = ({ const isBuildComplete = build && build.status === 'complete'; const isBuildPublished = build && game && build.id === game.publicWebBuildId; const gameUrl = getGameUrl(game); - const buildUrl = + const buildOrGameUrl = exportPending || !isBuildComplete ? null : isBuildPublished @@ -259,7 +262,7 @@ const OnlineGameLink = ({ onClick={() => setIsShareDialogOpen(false)} />, // Ensure there is a game loaded, meaning the user owns the game. - game && buildUrl && !isBuildPublished && ( + game && buildOrGameUrl && !isBuildPublished && ( Verify and Publish to gd.games} @@ -303,37 +306,47 @@ const OnlineGameLink = ({ open onRequestClose={() => setIsShareDialogOpen(false)} onApply={() => { - if (game && buildUrl && !isBuildPublished) { + if (game && buildOrGameUrl && !isBuildPublished) { setIsOnlineGamePropertiesDialogOpen(true); } }} flexColumnBody > - {buildUrl && !isGameLoading ? ( + {buildOrGameUrl && !isGameLoading ? ( - - {isBuildPublished && ( - - {navigator.share ? ( - - ) : ( - - - - )} - + + {navigator.share ? ( + + ) : ( + + + + )} + + + Share it with this QR code: + + + + - - )} - {!isBuildPublished && game && ( + + + {isBuildPublished ? ( + + ) : game ? ( This link is private. You can share it with @@ -342,7 +355,7 @@ const OnlineGameLink = ({ gd.games - GDevelop gaming platform. - )} + ) : null} ) : ( { + const { isMobile } = useResponsiveWindowSize(); if (!open) return null; const urlWithProtocol = url ? `http://${url}` : ''; @@ -93,7 +95,7 @@ const LocalNetworkPreviewDialog = ({ - + )} diff --git a/newIDE/app/src/UI/QrCode.js b/newIDE/app/src/UI/QrCode.js index a951930cee42..ca59954a0c28 100644 --- a/newIDE/app/src/UI/QrCode.js +++ b/newIDE/app/src/UI/QrCode.js @@ -4,6 +4,10 @@ import * as React from 'react'; import QrCreator from 'qr-creator'; import GDevelopThemeContext from './Theme/GDevelopThemeContext'; +const styles = { + qrCodeContainer: { imageRendering: 'pixelated' }, +}; + type Props = {| url: string, size?: number, @@ -41,7 +45,7 @@ const QrCode = ({ url, size = 128 }: Props) => { }, [url, size, gdevelopTheme] ); - return
; + return
; }; export default QrCode;