Display QRCode at the end of the gd games export flow (#6410)

4ian · Mar 1, 2024 · e1c22f6 · e1c22f6
1 parent 7b70f91
commit e1c22f6
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 29 deletions.
diff --git 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<boolean>(
     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 && (
       <DialogPrimaryButton
         key="publish"
         label={<Trans>Verify and Publish to gd.games</Trans>}
@@ -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 ? (
                 <ColumnStackLayout noMargin>
-                  <ShareLink url={buildUrl} />
-                  {isBuildPublished && (
-                    <ColumnStackLayout noMargin expand>
-                      {navigator.share ? (
-                        <ShareButton url={buildUrl} />
-                      ) : (
-                        <Column
-                          expand
-                          justifyContent="flex-end"
-                          noMargin
-                          alignItems="flex-end"
-                        >
-                          <SocialShareButtons url={buildUrl} />
-                        </Column>
-                      )}
-                      <GameRegistration
-                        project={project}
-                        hideLoader
-                        suggestAdditionalActions
+                  <ShareLink url={buildOrGameUrl} />
+                  <ColumnStackLayout noMargin expand>
+                    {navigator.share ? (
+                      <ShareButton url={buildOrGameUrl} />
+                    ) : (
+                      <Column
+                        expand
+                        justifyContent="flex-end"
+                        noMargin
+                        alignItems="flex-end"
+                      >
+                        <SocialShareButtons url={buildOrGameUrl} />
+                      </Column>
+                    )}
+                    <Line noMargin>
+                      <Text>
+                        <Trans>Share it with this QR code:</Trans>
+                      </Text>
+                    </Line>
+                    <Line noMargin justifyContent="center">
+                      <QrCode
+                        url={buildOrGameUrl}
+                        size={isMobile ? 100 : 150}
                       />
-                    </ColumnStackLayout>
-                  )}
-                  {!isBuildPublished && game && (
+                    </Line>
+                  </ColumnStackLayout>
+                  {isBuildPublished ? (
+                    <GameRegistration
+                      project={project}
+                      hideLoader
+                      suggestAdditionalActions
+                    />
+                  ) : game ? (
                     <AlertMessage kind="info">
                       <Trans>
                         This link is private. You can share it with
@@ -342,7 +355,7 @@ const OnlineGameLink = ({
                         gd.games - GDevelop gaming platform.
                       </Trans>
                     </AlertMessage>
-                  )}
+                  ) : null}
                 </ColumnStackLayout>
               ) : (
                 <ColumnStackLayout

diff --git a/...E/app/src/ExportAndShare/LocalExporters/LocalPreviewLauncher/LocalNetworkPreviewDialog.js b/...E/app/src/ExportAndShare/LocalExporters/LocalPreviewLauncher/LocalNetworkPreviewDialog.js
@@ -9,6 +9,7 @@ import { Line } from '../../../UI/Grid';
 import PlaceholderLoader from '../../../UI/PlaceholderLoader';
 import ShareLink from '../../../UI/ShareDialog/ShareLink';
 import QrCode from '../../../UI/QrCode';
+import { useResponsiveWindowSize } from '../../../UI/Responsive/ResponsiveWindowMeasurer';
 
 type Props = {|
   open: boolean,
@@ -30,6 +31,7 @@ const LocalNetworkPreviewDialog = ({
   onClose,
   onRunPreviewLocally,
 }: Props) => {
+  const { isMobile } = useResponsiveWindowSize();
   if (!open) return null;
   const urlWithProtocol = url ? `http://${url}` : '';
 
@@ -93,7 +95,7 @@ const LocalNetworkPreviewDialog = ({
                 </Text>
               </Line>
               <Line justifyContent="center">
-                <QrCode url={urlWithProtocol} size={100} />
+                <QrCode url={urlWithProtocol} size={isMobile ? 100 : 150} />
               </Line>
             </>
           )}

diff --git 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 <div ref={containerRef} />;
+  return <div ref={containerRef} style={styles.qrCodeContainer} />;
 };
 
 export default QrCode;