Merge tutorials and video tutorials in a single tab in the Create Project window

Author: 4ian

newIDE/app/public/res/tutorial_icons/geometry-monster.png

@@ -2,6 +2,7 @@
 import { t } from '@lingui/macro';
 import { type MessageDescriptor } from '../Utils/i18n/MessageDescriptor.flow';
 import { type AlertMessageIdentifier } from '../MainFrame/Preferences/PreferencesContext';
+import { getHelpLink } from '../Utils/HelpLink';
 
 export type Hint = {|
   kind: 'warning' | 'info',
@@ -12,9 +13,10 @@ export type TutorialHint = {|
   kind: 'tutorial' | 'video-tutorial',
   name: string,
   message: MessageDescriptor,
-  iconSrc: string,
+  iconSrc: ?string,
   link: string,
   identifier: string,
+  featuredForGettingStarted?: boolean,
 |};
 
 export const getDeprecatedBehaviorsInformation = (): {
@@ -132,6 +134,75 @@ export const getExtraInstructionInformation = (type: string): ?Hint => {
 };
 
 const tutorialHints = {
+  'geometry-monster': {
+    kind: 'tutorial',
+    iconSrc: 'res/tutorial_icons/geometry-monster.png',
+    name: 'Geometry Monster Tutorial',
+    message: t`Make a hyper-casual mobile game where the player must grab shapes and avoid bombs.`,
+    link: getHelpLink('/tutorials/geometry-monster'),
+    identifier: 'geometry-monster',
+    featuredForGettingStarted: true,
+  },
+  platformer: {
+    kind: 'tutorial',
+    iconSrc: 'res/tutorial_icons/platformer.png',
+    name: 'Platformer Tutorial',
+    message: t`Make a platform game from scratch.`,
+    link: getHelpLink('/tutorials/platformer/start'),
+    identifier: 'platformer',
+    featuredForGettingStarted: true,
+  },
+  'space-shooter': {
+    kind: 'tutorial',
+    iconSrc: 'res/tutorial_icons/space-shooter.png',
+    name: 'Space Shooter Tutorial',
+    message: t`Make a space shooter game from scratch.`,
+    link: getHelpLink('/tutorials/space-shooter'),
+    identifier: 'space-shooter',
+    featuredForGettingStarted: true,
+  },
+  'simple-game-physics-particles': {
+    kind: 'video-tutorial',
+    iconSrc: 'res/tutorial_icons/simple-game-physics-particles.jpg',
+    name: 'How to Create a Simple Game with Physics and Particles',
+    message: t`Create a game from scratch using physics and particles.`,
+    link: 'https://www.youtube.com/watch?v=w8B84Dpgkjc',
+    identifier: 'simple-game-physics-particles',
+    featuredForGettingStarted: true,
+  },
+  'tank-shooter': {
+    kind: 'tutorial',
+    iconSrc: null,
+    name: 'Tank Shooter Tutorial',
+    message: t`Make a simple tank shooter game from scratch.`,
+    link: getHelpLink('/tutorials/tank-shooter'),
+    identifier: 'tank-shooter',
+  },
+  'endless-runner': {
+    kind: 'tutorial',
+    iconSrc: null,
+    name: 'Endless Runner Tutorial',
+    message: t`Make a simple game where the player must jump on platforms for as long as possible.`,
+    link: getHelpLink('/tutorials/endless-runner'),
+    identifier: 'endless-runner',
+  },
+  'endless-car-game': {
+    kind: 'tutorial',
+    iconSrc: null,
+    name: 'Endless Car Game Tutorial',
+    message: t`Create a simple game where you must dodge the cars on the road.`,
+    link: getHelpLink('/tutorials/roadrider'),
+    identifier: 'endless-car-game',
+  },
+  'breakout-tutorial': {
+    kind: 'tutorial',
+    iconSrc: null,
+    name: 'Breakout Tutorial',
+    message: t`Create a simple breakout game where you must destroy all the bricks on the screen.`,
+    link: getHelpLink('/tutorials/breakout'),
+    identifier: 'breakout-tutorial',
+  },
+
   'screen-shake-timer-variables': {
     kind: 'video-tutorial',
     iconSrc: 'res/tutorial_icons/screen-shake-timer-variables.jpg',

newIDE/app/public/res/tutorial_icons/platformer.png

@@ -4,10 +4,10 @@ import { Trans } from '@lingui/macro';
 import * as React from 'react';
 import Dialog from '../UI/Dialog';
 import FlatButton from '../UI/FlatButton';
+import ScrollView from '../UI/ScrollView';
 import { Tabs, Tab } from '../UI/Tabs';
 import Tutorials from './Tutorials';
 import { Column } from '../UI/Grid';
-import { VideoTutorials } from './VideoTutorials';
 import { type StorageProvider, type FileMetadata } from '../ProjectsStorage';
 
 type State = {|
@@ -78,34 +78,41 @@ export default class CreateProjectDialog extends React.Component<Props, State> {
         onRequestClose={onClose}
         open={open}
         noMargin
+        flexBody
       >
-        <Column noMargin>
+        <Column expand noMargin>
           <Tabs value={this.state.currentTab} onChange={this._onChangeTab}>
             <Tab label={<Trans>Starters</Trans>} value="starters" />
             <Tab label={<Trans>Examples</Trans>} value="examples" />
             <Tab label={<Trans>Tutorials</Trans>} value="tutorials" />
-            <Tab label={<Trans>Videos</Trans>} value="video-tutorials" />
           </Tabs>
           {this.state.currentTab === 'starters' && (
-            <StartersComponent
-              onOpen={onOpen}
-              onCreate={onCreate}
-              onChangeOutputPath={outputPath => this.setState({ outputPath })}
-              onShowExamples={this._showExamples}
-              outputPath={this.state.outputPath}
-            />
+            <ScrollView>
+              <StartersComponent
+                onOpen={onOpen}
+                onCreate={onCreate}
+                onChangeOutputPath={outputPath => this.setState({ outputPath })}
+                onShowExamples={this._showExamples}
+                outputPath={this.state.outputPath}
+              />
+            </ScrollView>
           )}
           {this.state.currentTab === 'examples' && (
-            <ExamplesComponent
-              onOpen={onOpen}
-              onCreate={onCreate}
-              onChangeOutputPath={outputPath => this.setState({ outputPath })}
-              onExamplesLoaded={this._onExamplesLoaded}
-              outputPath={this.state.outputPath}
-            />
+            <ScrollView>
+              <ExamplesComponent
+                onOpen={onOpen}
+                onCreate={onCreate}
+                onChangeOutputPath={outputPath => this.setState({ outputPath })}
+                onExamplesLoaded={this._onExamplesLoaded}
+                outputPath={this.state.outputPath}
+              />
+            </ScrollView>
+          )}
+          {this.state.currentTab === 'tutorials' && (
+            <ScrollView>
+              <Tutorials />
+            </ScrollView>
           )}
-          {this.state.currentTab === 'tutorials' && <Tutorials />}
-          {this.state.currentTab === 'video-tutorials' && <VideoTutorials />}
         </Column>
       </Dialog>
     );