Remove broken link and redirect to wiki

newIDE/app/resources/inAppTutorials/flingGame.json

@@ -4760,7 +4760,7 @@
     {
       "elementToHighlightId": "objectInObjectOrResourceSelector:scoreText",
       "nextStepTrigger": {
-        "presenceOfElement": "#instruction-item-TextObject--String"
+        "presenceOfElement": "#instruction-item-TextContainerCapability--TextContainerBehavior--SetValue"
       },
       "tooltip": {
         "description": {
@@ -4777,7 +4777,7 @@
       "isOnClosableDialog": true
     },
     {
-      "elementToHighlightId": "#instruction-item-TextObject--String",
+      "elementToHighlightId": "#instruction-item-TextContainerCapability--TextContainerBehavior--SetValue",
       "nextStepTrigger": {
         "presenceOfElement": "#instruction-parameters-container"
       },

newIDE/app/resources/inAppTutorials/inAppTutorialShortHeaders.json

@@ -14,7 +14,7 @@
   {
     "id": "flingGame",
     "contentUrl": "https://resources.gdevelop-app.com/in-app-tutorials/flingGame.json",
-    "availableLocales": ["en", "fr", "es", "pt", "th"]
+    "availableLocales": ["en", "fr", "es", "pt", "th", "ar"]
   },
   {
     "id": "healthBar",
@@ -26,7 +26,7 @@
   {
     "id": "joystick",
     "contentUrl": "https://resources.gdevelop-app.com/in-app-tutorials/joystick.json",
-    "availableLocales": ["en", "fr", "es", "pt", "th", "ar"],
+    "availableLocales": ["en", "fr", "es", "pt", "th", "ar", "sq"],
     "initialTemplateUrl": "https://resources.gdevelop-app.com/in-app-tutorials/templates/joystick/game.json",
     "initialProjectData": {
       "gameScene": "GameScene",

newIDE/app/src/MainFrame/EditorContainers/BaseEditor.js

@@ -82,7 +82,6 @@ export type RenderEditorContainerProps = {|
   onOpenPrivateGameTemplateListingData: (
     privateGameTemplateListingData: PrivateGameTemplateListingData
   ) => void,
-  onOpenHelpFinder: () => void,
   onOpenLanguageDialog: () => void,
   selectInAppTutorial: (tutorialId: string) => void,
   onOpenProfile: () => void,

newIDE/app/src/MainFrame/EditorContainers/HomePage/InAppTutorials/FlingGame.js

@@ -0,0 +1,259 @@
+// @flow
+import * as React from 'react';
+import { Trans, t } from '@lingui/macro';
+import GridList from '@material-ui/core/GridList';
+import GridListTile from '@material-ui/core/GridListTile';
+import {
+  useResponsiveWindowWidth,
+  type WidthType,
+} from '../../../../UI/Reponsive/ResponsiveWindowMeasurer';
+import { Line } from '../../../../UI/Grid';
+import InAppTutorialContext from '../../../../InAppTutorial/InAppTutorialContext';
+import PlaceholderLoader from '../../../../UI/PlaceholderLoader';
+import { LARGE_WIDGET_SIZE } from '../CardWidget';
+import InAppTutorialPhaseCard from './InAppTutorialPhaseCard';
+import PlaceholderError from '../../../../UI/PlaceholderError';
+import { FLING_GAME_IN_APP_TUTORIAL_ID } from '../../../../Utils/GDevelopServices/InAppTutorial';
+import PreferencesContext from '../../../Preferences/PreferencesContext';
+import AuthenticatedUserContext from '../../../../Profile/AuthenticatedUserContext';
+import Building from './Icons/Building';
+import Unboxing from './Icons/Unboxing';
+import Podium from './Icons/Podium';
+
+const getColumnsFromWidth = (width: WidthType) => {
+  switch (width) {
+    case 'small':
+      return 1;
+    case 'medium':
+    case 'large':
+    case 'xlarge':
+    default:
+      return 3;
+  }
+};
+
+const MAX_COLUMNS = getColumnsFromWidth('xlarge');
+const MAX_SECTION_WIDTH = (LARGE_WIDGET_SIZE + 2 * 5) * MAX_COLUMNS; // widget size + 5 padding per side
+const ITEMS_SPACING = 5;
+const styles = {
+  grid: {
+    textAlign: 'center',
+    // Avoid tiles taking too much space on large screens.
+    maxWidth: MAX_SECTION_WIDTH,
+    overflow: 'hidden',
+    width: `calc(100% + ${2 * ITEMS_SPACING}px)`, // This is needed to compensate for the `margin: -5px` added by MUI related to spacing.
+  },
+  bannerContainer: {
+    width: '100%',
+    maxWidth: MAX_SECTION_WIDTH - 2 * ITEMS_SPACING,
+  },
+};
+
+type Props = {|
+  selectInAppTutorial: (tutorialId: string) => void,
+|};
+
+const FlingGame = ({ selectInAppTutorial }: Props) => {
+  const {
+    inAppTutorialShortHeaders,
+    inAppTutorialsFetchingError,
+    fetchInAppTutorials,
+    currentlyRunningInAppTutorial,
+  } = React.useContext(InAppTutorialContext);
+  const { getTutorialProgress } = React.useContext(PreferencesContext);
+  const authenticatedUser = React.useContext(AuthenticatedUserContext);
+  const windowWidth = useResponsiveWindowWidth();
+
+  const getTutorialPartProgress = ({
+    tutorialId,
+    part,
+  }: {
+    tutorialId: string,
+    part: number,
+  }) => {
+    const tutorialProgress = getTutorialProgress({
+      tutorialId,
+      userId: authenticatedUser.profile
+        ? authenticatedUser.profile.id
+        : undefined,
+    });
+    if (!tutorialProgress || !tutorialProgress.progress) return 0;
+    return tutorialProgress.progress[part];
+  };
+
+  const isTutorialPartComplete = ({
+    tutorialId,
+    part,
+  }: {
+    tutorialId: string,
+    part: number,
+  }) => {
+    return (
+      getTutorialPartProgress({
+        tutorialId,
+        part,
+      }) === 100
+    );
+  };
+
+  const flingInAppTutorialCards = [
+    {
+      key: 'create',
+      title: t`Start your game`,
+      description: t`Add your first characters to the scene and throw your first objects.`,
+      keyPoints: [
+        t`Game scene size`,
+        t`Objects and characters`,
+        t`Game Scenes`,
+        t`Throwing physics`,
+      ],
+      durationInMinutes: 5,
+      locked: false, // First phase is never locked
+      // Phase is disabled if complete or if there's a running tutorial
+      disabled:
+        !!currentlyRunningInAppTutorial ||
+        isTutorialPartComplete({
+          tutorialId: FLING_GAME_IN_APP_TUTORIAL_ID,
+          part: 0,
+        }),
+      progress: getTutorialPartProgress({
+        tutorialId: FLING_GAME_IN_APP_TUTORIAL_ID,
+        part: 0,
+      }),
+      renderImage: props => <Unboxing {...props} />,
+    },
+    {
+      key: 'publish',
+      title: t`Improve and publish your Game`,
+      description: t`Add personality to your game and publish it online.`,
+      keyPoints: [
+        t`Game background`,
+        t`In-game obstacles`,
+        t`“You win” message`,
+        t`Sharing online`,
+      ],
+      durationInMinutes: 10,
+      // Second phase is locked if first phase is not complete
+      locked: !isTutorialPartComplete({
+        tutorialId: FLING_GAME_IN_APP_TUTORIAL_ID,
+        part: 0,
+      }),
+      // Phase is disabled if complete or if there's a running tutorial
+      disabled:
+        !!currentlyRunningInAppTutorial ||
+        isTutorialPartComplete({
+          tutorialId: FLING_GAME_IN_APP_TUTORIAL_ID,
+          part: 1,
+        }),
+      progress: getTutorialPartProgress({
+        tutorialId: FLING_GAME_IN_APP_TUTORIAL_ID,
+        part: 1,
+      }),
+      renderImage: props => <Building {...props} />,
+    },
+    {
+      key: 'leaderboards',
+      title: t`Add leaderboards to your online Game`,
+      description: t`Add player logins to your game and add a leaderboard.`,
+      keyPoints: [
+        t`Game personalisation`,
+        t`“Start” screen`,
+        t`Timers`,
+        t`Leaderboards`,
+      ],
+      durationInMinutes: 15,
+      // Third phase is locked if second phase is not complete
+      locked: !isTutorialPartComplete({
+        tutorialId: FLING_GAME_IN_APP_TUTORIAL_ID,
+        part: 1,
+      }),
+      // Phase is disabled if complete or if there's a running tutorial
+      disabled:
+        !!currentlyRunningInAppTutorial ||
+        isTutorialPartComplete({
+          tutorialId: FLING_GAME_IN_APP_TUTORIAL_ID,
+          part: 2,
+        }),
+      progress: getTutorialPartProgress({
+        tutorialId: FLING_GAME_IN_APP_TUTORIAL_ID,
+        part: 2,
+      }),
+      renderImage: props => <Podium {...props} />,
+    },
+  ];
+
+  const isFlingTutorialComplete =
+    isTutorialPartComplete({
+      tutorialId: FLING_GAME_IN_APP_TUTORIAL_ID,
+      part: 0,
+    }) &&
+    isTutorialPartComplete({
+      tutorialId: FLING_GAME_IN_APP_TUTORIAL_ID,
+      part: 1,
+    }) &&
+    isTutorialPartComplete({
+      tutorialId: FLING_GAME_IN_APP_TUTORIAL_ID,
+      part: 2,
+    });
+
+  return (
+    <Line>
+      <div style={styles.bannerContainer}>
+        {inAppTutorialsFetchingError ? (
+          <PlaceholderError onRetry={fetchInAppTutorials}>
+            <Trans>An error occurred when downloading the tutorials.</Trans>{' '}
+            <Trans>
+              Please check your internet connection or try again later.
+            </Trans>
+          </PlaceholderError>
+        ) : inAppTutorialShortHeaders === null ? (
+          <PlaceholderLoader />
+        ) : (
+          <GridList
+            cols={
+              isFlingTutorialComplete ? 1 : getColumnsFromWidth(windowWidth)
+            }
+            style={styles.grid}
+            cellHeight="auto"
+            spacing={ITEMS_SPACING * 2}
+          >
+            {isFlingTutorialComplete ? (
+              <GridListTile>
+                <InAppTutorialPhaseCard
+                  title={t`Congratulations! You've finished this tutorial!`}
+                  description={t`Find your finished game on the “Build” section. Or restart the tutorial by clicking on the card.`}
+                  size="banner"
+                  locked={false}
+                  disabled={false}
+                  renderImage={props => (
+                    <Line justifyContent="space-around" expand>
+                      <Unboxing {...props} />
+                      <Building {...props} />
+                      <Podium {...props} />
+                    </Line>
+                  )}
+                  onClick={() =>
+                    selectInAppTutorial(FLING_GAME_IN_APP_TUTORIAL_ID)
+                  }
+                />
+              </GridListTile>
+            ) : (
+              flingInAppTutorialCards.map(item => (
+                <GridListTile key={item.key}>
+                  <InAppTutorialPhaseCard
+                    {...item}
+                    onClick={() =>
+                      selectInAppTutorial(FLING_GAME_IN_APP_TUTORIAL_ID)
+                    }
+                  />
+                </GridListTile>
+              ))
+            )}
+          </GridList>
+        )}
+      </div>
+    </Line>
+  );
+};
+
+export default FlingGame;

newIDE/app/src/MainFrame/EditorContainers/HomePage/InAppTutorials/GuidedLessons.js

@@ -41,13 +41,13 @@ const getColumnsFromWidth = (width: WidthType) => {
     case 'small':
       return 1;
     case 'medium':
-      return 2;
-    case 'large':
       return 3;
-    case 'xlarge':
+    case 'large':
       return 4;
+    case 'xlarge':
+      return 6;
     default:
-      return 2;
+      return 3;
   }
 };