@@ -420,6 +440,7 @@ export const CategoryTile = ({
imageAlt,
onSelect,
style,
+ disabled,
}: {|
id: string,
title: React.Node,
@@ -428,20 +449,23 @@ export const CategoryTile = ({
onSelect: () => void,
/** Props needed so that GridList component can adjust tile size */
style?: any,
+ disabled?: boolean,
|}) => {
- const classesForGridListItem = useStylesForGridListItem();
+ const classesForGridListItem = useStylesForGridListItem({
+ disabled,
+ });
const gdevelopTheme = React.useContext(GDevelopThemeContext);
return (
): void => {
- if (shouldValidate(event)) {
+ if (shouldValidate(event) && !disabled) {
onSelect();
}
}}
style={style}
- onClick={onSelect}
+ onClick={!disabled ? onSelect : undefined}
>
void,
/** Props needed so that GridList component can adjust tile size */
style?: any,
owned: boolean,
+ disabled?: boolean,
|}) => {
- const classesForGridListItem = useStylesForGridListItem();
+ const classesForGridListItem = useStylesForGridListItem({
+ disabled,
+ });
return (
): void => {
- if (shouldValidate(event)) {
+ if (shouldValidate(event) && !disabled) {
onSelect();
}
}}
style={style}
- onClick={onSelect}
+ onClick={!disabled ? onSelect : undefined}
>
void,
@@ -530,6 +559,7 @@ export const ExampleTile = ({
style?: any,
customTitle?: string,
useQuickCustomizationThumbnail?: boolean,
+ disabled?: boolean,
|}) => {
const thumbnailImgUrl = React.useMemo(
() => {
@@ -546,27 +576,38 @@ export const ExampleTile = ({
[exampleShortHeader, useQuickCustomizationThumbnail]
);
- const classesForGridListItem = useStylesForGridListItem();
+ const classesForGridListItem = useStylesForGridListItem({ disabled });
return (
): void => {
- if (shouldValidate(event)) {
+ if (shouldValidate(event) && !disabled) {
onSelect();
}
}}
style={style}
- onClick={onSelect}
+ onClick={!disabled ? onSelect : undefined}
>
{exampleShortHeader ? (
-
+ thumbnailImgUrl ? (
+
+ ) : (
+
+ {exampleShortHeader.name}
+
+ )
) : (
void,
onSelectExampleShortHeader: ExampleShortHeader => void,
- onPreviewPrivateGameTemplateListingData: PrivateGameTemplateListingData => void,
- onOpenPrivateGameTemplateListingData: (
- privateGameTemplateListingData: PrivateGameTemplateListingData
- ) => void,
+ onSelectPrivateGameTemplateListingData: PrivateGameTemplateListingData => void,
onOpenLanguageDialog: () => void,
selectInAppTutorial: (tutorialId: string) => void,
onOpenProfile: () => void,
@@ -127,6 +123,7 @@ export type RenderEditorContainerProps = {|
i18n: I18nType
) => Promise,
onOpenTemplateFromTutorial: (tutorialId: string) => Promise,
+ onOpenPrivateGameTemplateListingData: PrivateGameTemplateListingData => void,
// Project save
onSave: () => Promise,
diff --git a/newIDE/app/src/MainFrame/EditorContainers/HomePage/BuildSection/index.js b/newIDE/app/src/MainFrame/EditorContainers/HomePage/BuildSection/index.js
index e6af02633983..b4353293189f 100644
--- a/newIDE/app/src/MainFrame/EditorContainers/HomePage/BuildSection/index.js
+++ b/newIDE/app/src/MainFrame/EditorContainers/HomePage/BuildSection/index.js
@@ -44,8 +44,7 @@ import Refresh from '../../../../UI/CustomSvgIcons/Refresh';
import ProjectFileListItem from './ProjectFileListItem';
import { type MenuItemTemplate } from '../../../../UI/Menu/Menu.flow';
import {
- getAllGameTemplatesAndExamplesFlaggedAsGameCount,
- getExampleAndTemplateItemsForBuildSection,
+ getExampleAndTemplateTiles,
getLastModifiedInfoByProjectId,
getProjectLineHeight,
transformCloudProjectsIntoFileMetadataWithStorageProviderName,
@@ -54,7 +53,6 @@ import ErrorBoundary from '../../../../UI/ErrorBoundary';
import InfoBar from '../../../../UI/Messages/InfoBar';
import GridList from '@material-ui/core/GridList';
import type { WindowSizeType } from '../../../../UI/Responsive/ResponsiveWindowMeasurer';
-import FlatButton from '../../../../UI/FlatButton';
import useAlertDialog from '../../../../UI/Alert/useAlertDialog';
import optionalRequire from '../../../../Utils/OptionalRequire';
import { deleteCloudProject } from '../../../../Utils/GDevelopServices/Project';
@@ -64,6 +62,8 @@ import ContextMenu, {
} from '../../../../UI/Menu/ContextMenu';
import type { ClientCoordinates } from '../../../../Utils/UseLongTouch';
import PromotionsSlideshow from '../../../../Promotions/PromotionsSlideshow';
+import ExampleStore from '../../../../AssetStore/ExampleStore';
+
const electron = optionalRequire('electron');
const path = optionalRequire('path');
@@ -115,7 +115,6 @@ type Props = {|
) => void,
storageProviders: Array,
i18n: I18nType,
- onOpenExampleStore: () => void,
onManageGame: (gameId: string) => void,
canManageGame: (gameId: string) => boolean,
closeProject: () => Promise,
@@ -139,7 +138,6 @@ const BuildSection = ({
onOpenRecentFile,
storageProviders,
i18n,
- onOpenExampleStore,
onManageGame,
canManageGame,
closeProject,
@@ -187,16 +185,6 @@ const BuildSection = ({
const columnsCount = getItemsColumns(windowSize, isLandscape);
- const allGameTemplatesAndExamplesFlaggedAsGameCount = React.useMemo(
- () =>
- getAllGameTemplatesAndExamplesFlaggedAsGameCount({
- privateGameTemplateListingDatas,
- exampleShortHeaders,
- columnsCount,
- }),
- [privateGameTemplateListingDatas, exampleShortHeaders, columnsCount]
- );
-
let projectFiles: Array = getRecentProjectFiles().filter(
file => file.fileMetadata
);
@@ -380,40 +368,27 @@ const BuildSection = ({
const examplesAndTemplatesToDisplay = React.useMemo(
() =>
- getExampleAndTemplateItemsForBuildSection({
+ getExampleAndTemplateTiles({
receivedGameTemplates: authenticatedUser.receivedGameTemplates,
privateGameTemplateListingDatas,
exampleShortHeaders,
onSelectPrivateGameTemplateListingData,
onSelectExampleShortHeader,
i18n,
- numberOfItemsExclusivelyInCarousel: showAllGameTemplates
- ? 0
- : isMobile
- ? 3
- : 5,
- numberOfItemsInCarousel: showAllGameTemplates ? 0 : isMobile ? 8 : 12,
- numberOfItemsInGrid: showAllGameTemplates
- ? allGameTemplatesAndExamplesFlaggedAsGameCount
- : isMobile
- ? 16
- : 20,
+ numberOfItemsExclusivelyInCarousel: isMobile ? 3 : 5,
+ numberOfItemsInCarousel: isMobile ? 8 : 12,
privateGameTemplatesPeriodicity: shouldDisplayPremiumGameTemplates
- ? isMobile
- ? 2
- : 3
+ ? 2
: 0,
}),
[
authenticatedUser.receivedGameTemplates,
- showAllGameTemplates,
exampleShortHeaders,
onSelectExampleShortHeader,
onSelectPrivateGameTemplateListingData,
privateGameTemplateListingDatas,
i18n,
isMobile,
- allGameTemplatesAndExamplesFlaggedAsGameCount,
shouldDisplayPremiumGameTemplates,
]
);
@@ -425,24 +400,19 @@ const BuildSection = ({
const skeletonLineHeight = getProjectLineHeight({ isMobile });
const pageContent = showAllGameTemplates ? (
- setShowAllGameTemplates(false)}>
-
-
- {examplesAndTemplatesToDisplay.gridItems}
-
-
- See more}
- onClick={onOpenExampleStore}
- />
-
+ setShowAllGameTemplates(false)}
+ flexBody
+ >
+
+
) : (
@@ -475,7 +445,7 @@ const BuildSection = ({
displayItemTitles={false}
browseAllLabel={Browse all templates}
onBrowseAllClick={() => setShowAllGameTemplates(true)}
- items={examplesAndTemplatesToDisplay.carouselItems}
+ items={examplesAndTemplatesToDisplay.carouselThumbnailItems}
browseAllIcon={}
roundedImages
displayArrowsOnDesktop
@@ -523,7 +493,7 @@ const BuildSection = ({
isMobile ? (
Create
) : (
- Create from scratch
+ Create new game
)
}
onClick={onOpenNewProjectSetupDialog}
@@ -672,7 +642,7 @@ const BuildSection = ({
cellHeight="auto"
spacing={cellSpacing}
>
- {examplesAndTemplatesToDisplay.gridItems}
+ {examplesAndTemplatesToDisplay.gridItemsCompletingCarousel}
diff --git a/newIDE/app/src/MainFrame/EditorContainers/HomePage/BuildSection/utils.js b/newIDE/app/src/MainFrame/EditorContainers/HomePage/BuildSection/utils.js
index 4109e45303d1..386e09bf2a8f 100644
--- a/newIDE/app/src/MainFrame/EditorContainers/HomePage/BuildSection/utils.js
+++ b/newIDE/app/src/MainFrame/EditorContainers/HomePage/BuildSection/utils.js
@@ -164,6 +164,70 @@ const formatExampleShortHeaderForCarousel = ({
};
};
+const formatItemForCarousel = ({
+ item,
+ onSelectGameTemplate,
+ onSelectExample,
+ i18n,
+ receivedGameTemplates,
+}: {
+ item: PrivateGameTemplateListingData | ExampleShortHeader,
+ onSelectGameTemplate: PrivateGameTemplateListingData => void,
+ onSelectExample: ExampleShortHeader => void,
+ i18n: I18nType,
+ receivedGameTemplates: ?Array,
+}): CarouselThumbnail => {
+ if (item.previewImageUrls) {
+ return formatExampleShortHeaderForCarousel({
+ exampleShortHeader: item,
+ onSelectExample: onSelectExample,
+ });
+ } else {
+ return formatGameTemplateListingDataForCarousel({
+ i18n,
+ onSelectGameTemplate: onSelectGameTemplate,
+ gameTemplateListingData: item,
+ receivedGameTemplates: receivedGameTemplates,
+ });
+ }
+};
+
+const formatItemForGrid = ({
+ item,
+ onSelectGameTemplate,
+ onSelectExample,
+ i18n,
+ receivedGameTemplates,
+}: {
+ item: PrivateGameTemplateListingData | ExampleShortHeader,
+ onSelectGameTemplate: PrivateGameTemplateListingData => void,
+ onSelectExample: ExampleShortHeader => void,
+ i18n: I18nType,
+ receivedGameTemplates: ?Array,
+}): React.Node => {
+ if (item.previewImageUrls) {
+ return (
+ onSelectExample(item)}
+ />
+ );
+ } else {
+ const isTemplateOwned =
+ !!receivedGameTemplates &&
+ !!receivedGameTemplates.find(
+ receivedGameTemplate => receivedGameTemplate.id === item.id
+ );
+ return (
+ onSelectGameTemplate(item)}
+ owned={isTemplateOwned}
+ />
+ );
+ }
+};
+
/**
* This method allocates examples and private game templates between the
* build section carousel and grid.
@@ -171,17 +235,17 @@ const formatExampleShortHeaderForCarousel = ({
* should appear in the carousel only. The rest appears in both the carousel
* and the grid.
*/
-export const getExampleAndTemplateItemsForBuildSection = ({
+export const getExampleAndTemplateTiles = ({
receivedGameTemplates,
privateGameTemplateListingDatas,
exampleShortHeaders,
onSelectPrivateGameTemplateListingData,
onSelectExampleShortHeader,
i18n,
- numberOfItemsExclusivelyInCarousel,
- numberOfItemsInCarousel,
- numberOfItemsInGrid,
+ numberOfItemsExclusivelyInCarousel = 0,
+ numberOfItemsInCarousel = 0,
privateGameTemplatesPeriodicity,
+ showOwnedGameTemplatesFirst,
}: {|
receivedGameTemplates: ?Array,
privateGameTemplateListingDatas?: ?Array,
@@ -191,133 +255,156 @@ export const getExampleAndTemplateItemsForBuildSection = ({
) => void,
onSelectExampleShortHeader: (exampleShortHeader: ExampleShortHeader) => void,
i18n: I18nType,
- numberOfItemsExclusivelyInCarousel: number,
- numberOfItemsInCarousel: number,
- numberOfItemsInGrid: number,
+ numberOfItemsExclusivelyInCarousel?: number,
+ numberOfItemsInCarousel?: number,
privateGameTemplatesPeriodicity: number,
+ showOwnedGameTemplatesFirst?: boolean,
|}): {|
- carouselItems: Array,
- gridItems: Array,
+ carouselThumbnailItems: Array,
+ gridItemsCompletingCarousel: Array,
+ allGridItems: Array,
|} => {
if (!exampleShortHeaders || !privateGameTemplateListingDatas) {
- return { carouselItems: [], gridItems: [] };
+ return {
+ carouselThumbnailItems: [],
+ gridItemsCompletingCarousel: [],
+ allGridItems: [],
+ };
}
const exampleShortHeadersWithThumbnails = exampleShortHeaders.filter(
exampleShortHeader =>
!!exampleShortHeader.previewImageUrls &&
!!exampleShortHeader.previewImageUrls[0]
);
+ const exampleShortHeadersWithoutThumbnails = exampleShortHeaders.filter(
+ exampleShortHeader =>
+ !exampleShortHeader.previewImageUrls ||
+ !exampleShortHeader.previewImageUrls[0]
+ );
+
+ const carouselItems: Array<
+ PrivateGameTemplateListingData | ExampleShortHeader
+ > = [];
+ const itemsCompletingCarousel: Array<
+ PrivateGameTemplateListingData | ExampleShortHeader
+ > = [];
+ const allItems: Array<
+ PrivateGameTemplateListingData | ExampleShortHeader
+ > = [];
+
+ const maxIndex = Math.max(
+ exampleShortHeadersWithThumbnails.length,
+ privateGameTemplateListingDatas.length
+ );
- const carouselItems: Array = [];
- const gridItems = [];
+ let gameTemplateIndex = 0;
let exampleIndex = 0;
- let privateGameTemplateIndex = 0;
- for (
- let i = 0;
- i < numberOfItemsInGrid + numberOfItemsExclusivelyInCarousel;
- ++i
- ) {
+ for (let index = 0; index < maxIndex; index++) {
+ if (
+ gameTemplateIndex >= privateGameTemplateListingDatas.length &&
+ exampleIndex >= exampleShortHeadersWithThumbnails.length
+ ) {
+ break;
+ }
+ const privateGameTemplateListingData =
+ privateGameTemplateListingDatas[gameTemplateIndex];
+ const exampleShortHeader = exampleShortHeadersWithThumbnails[exampleIndex];
+
const shouldAddPrivateGameTemplate =
- i % privateGameTemplatesPeriodicity ===
- privateGameTemplatesPeriodicity - 1;
+ privateGameTemplatesPeriodicity &&
+ index >= 1 && // Do not add them too early.
+ index % privateGameTemplatesPeriodicity === 0;
- // At one point, we might run out of private game templates to display while
- // it is assumed that we have enough examples to display. This boolean is used
- // to know if we actually could add a private game template. This way, indices
- // can be increased accordingly.
- let privateGameTemplateActuallyAdded = false;
- if (i < numberOfItemsInCarousel) {
- // There should always be enough private game templates to sparsely fill the carousel.
- privateGameTemplateActuallyAdded = shouldAddPrivateGameTemplate;
- carouselItems.push(
- shouldAddPrivateGameTemplate
- ? formatGameTemplateListingDataForCarousel({
- i18n,
- onSelectGameTemplate: onSelectPrivateGameTemplateListingData,
- gameTemplateListingData:
- privateGameTemplateListingDatas[privateGameTemplateIndex],
- receivedGameTemplates: receivedGameTemplates,
- })
- : formatExampleShortHeaderForCarousel({
- exampleShortHeader:
- exampleShortHeadersWithThumbnails[exampleIndex],
- onSelectExample: onSelectExampleShortHeader,
- })
- );
+ // First handle example.
+ if (exampleShortHeader) {
+ // Handle carousel.
+ if (carouselItems.length < numberOfItemsInCarousel) {
+ carouselItems.push(exampleShortHeader);
+ }
+ // Handle grid.
+ allItems.push(exampleShortHeader);
+ if (carouselItems.length > numberOfItemsExclusivelyInCarousel) {
+ itemsCompletingCarousel.push(exampleShortHeader);
+ }
}
- if (i >= numberOfItemsExclusivelyInCarousel) {
- if (shouldAddPrivateGameTemplate) {
- const privateGameTemplateListingData =
- privateGameTemplateListingDatas[privateGameTemplateIndex];
- if (privateGameTemplateListingData) {
- const isTemplateOwned =
- !!receivedGameTemplates &&
- !!receivedGameTemplates.find(
- receivedGameTemplate =>
- receivedGameTemplate.id === privateGameTemplateListingData.id
- );
- gridItems.push(
- {
- onSelectPrivateGameTemplateListingData(
- privateGameTemplateListingData
- );
- }}
- owned={isTemplateOwned}
- key={privateGameTemplateListingData.id}
- />
- );
- privateGameTemplateActuallyAdded = true;
- }
+
+ // Then handle private game template if in the right periodicity.
+ if (shouldAddPrivateGameTemplate && privateGameTemplateListingData) {
+ // Handle carousel.
+ if (carouselItems.length < numberOfItemsInCarousel) {
+ carouselItems.push(privateGameTemplateListingData);
}
- if (!privateGameTemplateActuallyAdded) {
- const exampleShortHeader =
- exampleShortHeadersWithThumbnails[exampleIndex];
- gridItems.push(
- onSelectExampleShortHeader(exampleShortHeader)}
- key={exampleShortHeader.name}
- />
- );
+ // Handle grid.
+ if (privateGameTemplateListingData) {
+ allItems.push(privateGameTemplateListingData);
+ if (carouselItems.length > numberOfItemsExclusivelyInCarousel) {
+ itemsCompletingCarousel.push(privateGameTemplateListingData);
+ }
}
}
- if (privateGameTemplateActuallyAdded) privateGameTemplateIndex++;
- else exampleIndex++;
- if (
- exampleIndex >= exampleShortHeadersWithThumbnails.length &&
- privateGameTemplateIndex >= privateGameTemplateListingDatas.length
- ) {
- break;
+
+ // Increment the index for the next iteration.
+ if (shouldAddPrivateGameTemplate) {
+ gameTemplateIndex++;
}
+ exampleIndex++;
}
- return { carouselItems, gridItems };
-};
+ // Finally, add examples without thumbnails to the grid.
+ exampleShortHeadersWithoutThumbnails.forEach(exampleShortHeader => {
+ allItems.push(exampleShortHeader);
+ });
-export const getAllGameTemplatesAndExamplesFlaggedAsGameCount = ({
- privateGameTemplateListingDatas,
- exampleShortHeaders,
- columnsCount,
-}: {
- privateGameTemplateListingDatas: ?(PrivateGameTemplateListingData[]),
- exampleShortHeaders: ?(ExampleShortHeader[]),
- columnsCount: number,
-}) => {
- return (
- Math.floor(
- ((privateGameTemplateListingDatas
- ? privateGameTemplateListingDatas.length
- : 0) +
- (exampleShortHeaders
- ? exampleShortHeaders.filter(
- exampleShortHeader =>
- exampleShortHeader.tags.includes('game') ||
- exampleShortHeader.tags.includes('Starter')
- ).length
- : 0)) /
- columnsCount
- ) * columnsCount
+ const carouselThumbnailItems = carouselItems.map(item =>
+ formatItemForCarousel({
+ item,
+ onSelectGameTemplate: onSelectPrivateGameTemplateListingData,
+ onSelectExample: onSelectExampleShortHeader,
+ i18n,
+ receivedGameTemplates,
+ })
+ );
+
+ const gridItemsCompletingCarousel = itemsCompletingCarousel.map(item =>
+ formatItemForGrid({
+ item,
+ onSelectGameTemplate: onSelectPrivateGameTemplateListingData,
+ onSelectExample: onSelectExampleShortHeader,
+ i18n,
+ receivedGameTemplates,
+ })
);
+
+ const allGridItems = allItems
+ .sort((item1, item2) => {
+ if (showOwnedGameTemplatesFirst) {
+ const isItem1ATemplateOwned =
+ !!item1.sellerId && // Private game template
+ !!receivedGameTemplates &&
+ !!receivedGameTemplates.find(
+ receivedGameTemplate => receivedGameTemplate.id === item1.id
+ );
+ const isItem2ATemplateOwned =
+ !!item2.sellerId && // Private game template
+ !!receivedGameTemplates &&
+ !!receivedGameTemplates.find(
+ receivedGameTemplate => receivedGameTemplate.id === item2.id
+ );
+ if (isItem1ATemplateOwned && !isItem2ATemplateOwned) return -1;
+ if (!isItem1ATemplateOwned && isItem2ATemplateOwned) return 1;
+ }
+
+ return 0;
+ })
+ .map(item =>
+ formatItemForGrid({
+ item,
+ onSelectGameTemplate: onSelectPrivateGameTemplateListingData,
+ onSelectExample: onSelectExampleShortHeader,
+ i18n,
+ receivedGameTemplates,
+ })
+ );
+
+ return { carouselThumbnailItems, gridItemsCompletingCarousel, allGridItems };
};
diff --git a/newIDE/app/src/MainFrame/EditorContainers/HomePage/LearnSection/MainPage.js b/newIDE/app/src/MainFrame/EditorContainers/HomePage/LearnSection/MainPage.js
index 86b7b77abacd..33dabb045065 100644
--- a/newIDE/app/src/MainFrame/EditorContainers/HomePage/LearnSection/MainPage.js
+++ b/newIDE/app/src/MainFrame/EditorContainers/HomePage/LearnSection/MainPage.js
@@ -132,7 +132,6 @@ export const TutorialsRow = ({
);
type Props = {|
- onOpenExampleStore: () => void,
onTabChange: (tab: HomeTab) => void,
onSelectCategory: (?TutorialCategory) => void,
tutorials: Array,
@@ -140,7 +139,6 @@ type Props = {|
|};
const MainPage = ({
- onOpenExampleStore,
onTabChange,
onSelectCategory,
tutorials,
@@ -180,11 +178,6 @@ const MainPage = ({
action: () =>
Window.openExternalURL('https://wiki.gdevelop.io/gdevelop5/'),
},
- {
- title: Examples,
- description: Have a look at existing games from the inside,
- action: onOpenExampleStore,
- },
{
title: Forums,
description: Ask your questions to the community,
diff --git a/newIDE/app/src/MainFrame/EditorContainers/HomePage/LearnSection/index.js b/newIDE/app/src/MainFrame/EditorContainers/HomePage/LearnSection/index.js
index e6671d3c45ec..f54d742429eb 100644
--- a/newIDE/app/src/MainFrame/EditorContainers/HomePage/LearnSection/index.js
+++ b/newIDE/app/src/MainFrame/EditorContainers/HomePage/LearnSection/index.js
@@ -115,7 +115,6 @@ const styles = {
};
type Props = {|
- onOpenExampleStore: () => void,
onTabChange: (tab: HomeTab) => void,
selectInAppTutorial: (tutorialId: string) => void,
initialCategory: TutorialCategory | null,
@@ -123,7 +122,6 @@ type Props = {|
|};
const LearnSection = ({
- onOpenExampleStore,
onTabChange,
selectInAppTutorial,
initialCategory,
@@ -172,7 +170,6 @@ const LearnSection = ({
return !selectedCategory ? (
void,
onOpenRecentFile: (file: FileMetadataAndStorageProviderName) => Promise,
- onOpenExampleStore: () => void,
onSelectExampleShortHeader: ExampleShortHeader => void,
- onPreviewPrivateGameTemplateListingData: (
- privateGameTemplateListingData: PrivateGameTemplateListingData
- ) => void,
+ onSelectPrivateGameTemplateListingData: PrivateGameTemplateListingData => void,
onOpenPrivateGameTemplateListingData: (
privateGameTemplateListingData: PrivateGameTemplateListingData
) => void,
@@ -175,9 +172,8 @@ export const HomePage = React.memo(
onChooseProject,
onOpenRecentFile,
onOpenNewProjectSetupDialog,
- onOpenExampleStore,
onSelectExampleShortHeader,
- onPreviewPrivateGameTemplateListingData,
+ onSelectPrivateGameTemplateListingData,
onOpenPrivateGameTemplateListingData,
onOpenProjectManager,
onOpenLanguageDialog,
@@ -547,10 +543,9 @@ export const HomePage = React.memo(
onOpenNewProjectSetupDialog={onOpenNewProjectSetupDialog}
onSelectExampleShortHeader={onSelectExampleShortHeader}
onSelectPrivateGameTemplateListingData={
- onPreviewPrivateGameTemplateListingData
+ onSelectPrivateGameTemplateListingData
}
onOpenRecentFile={onOpenRecentFile}
- onOpenExampleStore={onOpenExampleStore}
onManageGame={onManageGame}
canManageGame={canManageGame}
storageProviders={storageProviders}
@@ -560,7 +555,6 @@ export const HomePage = React.memo(
)}
{activeTab === 'learn' && (
Promise,
allowNetworkPreview: boolean,
onOpenHomePage: () => void,
- onCreateBlank: () => void,
+ onCreateProject: () => void,
onOpenProject: () => void,
onSaveProject: () => Promise,
onSaveProjectAs: () => void,
@@ -115,7 +115,7 @@ const useMainFrameCommands = (handlers: CommandHandlers) => {
});
useCommand('CREATE_NEW_PROJECT', true, {
- handler: handlers.onCreateBlank,
+ handler: handlers.onCreateProject,
});
useCommand('OPEN_PROJECT', true, {
diff --git a/newIDE/app/src/MainFrame/MainMenu.js b/newIDE/app/src/MainFrame/MainMenu.js
index e1e67c28e0dd..ae7387c730de 100644
--- a/newIDE/app/src/MainFrame/MainMenu.js
+++ b/newIDE/app/src/MainFrame/MainMenu.js
@@ -37,8 +37,7 @@ export type MainMenuCallbacks = {|
onCloseApp: () => void,
onExportProject: () => void,
onInviteCollaborators: () => void,
- onCreateProject: (open?: boolean) => void,
- onCreateBlank: () => void,
+ onCreateProject: () => void,
onOpenProjectManager: (open?: boolean) => void,
onOpenHomePage: () => void,
onOpenDebugger: () => void,
@@ -63,7 +62,7 @@ export type MainMenuEvent =
| 'main-menu-close-app'
| 'main-menu-export'
| 'main-menu-invite-collaborators'
- | 'main-menu-create-template'
+ | 'main-menu-create-project'
| 'main-menu-create-blank'
| 'main-menu-open-project-manager'
| 'main-menu-open-home-page'
@@ -88,8 +87,7 @@ const getMainMenuEventCallback = (
'main-menu-close-app': callbacks.onCloseApp,
'main-menu-export': callbacks.onExportProject,
'main-menu-invite-collaborators': callbacks.onInviteCollaborators,
- 'main-menu-create-template': callbacks.onCreateProject,
- 'main-menu-create-blank': callbacks.onCreateBlank,
+ 'main-menu-create-project': callbacks.onCreateProject,
'main-menu-open-project-manager': callbacks.onOpenProjectManager,
'main-menu-open-home-page': callbacks.onOpenHomePage,
'main-menu-open-debugger': callbacks.onOpenDebugger,
@@ -115,20 +113,9 @@ export const buildMainMenuDeclarativeTemplate = ({
label: i18n._(t`File`),
submenu: [
{
- label: i18n._(t`Create`),
- submenu: [
- {
- label: i18n._(t`New empty project...`),
- accelerator: getElectronAccelerator(
- shortcutMap['CREATE_NEW_PROJECT']
- ),
- onClickSendEvent: 'main-menu-create-blank',
- },
- {
- label: i18n._(t`New project from template...`),
- onClickSendEvent: 'main-menu-create-template',
- },
- ],
+ label: i18n._(t`Create a game`),
+ accelerator: getElectronAccelerator(shortcutMap['CREATE_NEW_PROJECT']),
+ onClickSendEvent: 'main-menu-create-project',
},
{ type: 'separator' },
{
diff --git a/newIDE/app/src/MainFrame/UseExampleOrGameTemplateDialogs.js b/newIDE/app/src/MainFrame/UseExampleOrGameTemplateDialogs.js
deleted file mode 100644
index a8ee9f45814b..000000000000
--- a/newIDE/app/src/MainFrame/UseExampleOrGameTemplateDialogs.js
+++ /dev/null
@@ -1,208 +0,0 @@
-// @flow
-
-import * as React from 'react';
-import {
- listAllExamples,
- type ExampleShortHeader,
-} from '../Utils/GDevelopServices/Example';
-import type { PrivateGameTemplateListingData } from '../Utils/GDevelopServices/Shop';
-import ExampleStoreDialog from '../AssetStore/ExampleStore/ExampleStoreDialog';
-import { ExampleDialog } from '../AssetStore/ExampleStore/ExampleDialog';
-import PrivateGameTemplateInformationDialog from '../AssetStore/PrivateGameTemplates/PrivateGameTemplateInformationDialog';
-import { PrivateGameTemplateStoreContext } from '../AssetStore/PrivateGameTemplates/PrivateGameTemplateStoreContext';
-import AuthenticatedUserContext from '../Profile/AuthenticatedUserContext';
-import LoaderModal from '../UI/LoaderModal';
-
-type Props = {|
- isProjectOpening: boolean,
- onOpenNewProjectSetupDialog: () => void,
-|};
-
-const useExampleOrGameTemplateDialogs = ({
- isProjectOpening,
- onOpenNewProjectSetupDialog,
-}: Props) => {
- const [isFetchingExample, setIsFetchingExample] = React.useState(false);
- const [
- exampleStoreDialogOpen,
- setExampleStoreDialogOpen,
- ] = React.useState(false);
- const [
- selectedExampleShortHeader,
- setSelectedExampleShortHeader,
- ] = React.useState(null);
- const [
- selectedPrivateGameTemplate,
- setSelectedPrivateGameTemplate,
- ] = React.useState(null);
-
- const { receivedGameTemplates } = React.useContext(AuthenticatedUserContext);
- const { privateGameTemplateListingDatas } = React.useContext(
- PrivateGameTemplateStoreContext
- );
-
- const closeExampleStoreDialog = React.useCallback(
- ({
- deselectExampleAndGameTemplate,
- }: {|
- deselectExampleAndGameTemplate: boolean,
- |}) => {
- setExampleStoreDialogOpen(false);
- if (deselectExampleAndGameTemplate) {
- setSelectedExampleShortHeader(null);
- setSelectedPrivateGameTemplate(null);
- }
- },
- [setExampleStoreDialogOpen]
- );
- const openExampleStoreDialog = React.useCallback(
- () => {
- setExampleStoreDialogOpen(true);
- },
- [setExampleStoreDialogOpen]
- );
-
- const privateGameTemplateListingDatasFromSameCreator: ?Array = React.useMemo(
- () => {
- if (
- !selectedPrivateGameTemplate ||
- !privateGameTemplateListingDatas ||
- !receivedGameTemplates
- )
- return null;
-
- const receivedGameTemplateIds = receivedGameTemplates.map(
- template => template.id
- );
-
- return privateGameTemplateListingDatas
- .filter(
- template =>
- template.sellerId ===
- selectedPrivateGameTemplate.privateGameTemplateListingData
- .sellerId &&
- !receivedGameTemplateIds.includes(template.sellerId)
- )
- .sort((template1, template2) =>
- template1.name.localeCompare(template2.name)
- );
- },
- [
- selectedPrivateGameTemplate,
- privateGameTemplateListingDatas,
- receivedGameTemplates,
- ]
- );
-
- const fetchAndOpenNewProjectSetupDialogForExample = React.useCallback(
- async (exampleSlug: string) => {
- try {
- setIsFetchingExample(true);
- const fetchedAllExamples = await listAllExamples();
- const exampleShortHeader = fetchedAllExamples.exampleShortHeaders.find(
- exampleShortHeader => exampleShortHeader.slug === exampleSlug
- );
- if (!exampleShortHeader) {
- throw new Error(
- `Unable to find the example with slug "${exampleSlug}"`
- );
- }
-
- setSelectedExampleShortHeader(exampleShortHeader);
- } catch (error) {
- console.error('Error caught while opening example:', error);
- return;
- } finally {
- setIsFetchingExample(false);
- }
-
- onOpenNewProjectSetupDialog();
- },
- [setSelectedExampleShortHeader, onOpenNewProjectSetupDialog]
- );
-
- const renderExampleOrGameTemplateDialogs = () => {
- return (
- <>
- {isFetchingExample && }
- {exampleStoreDialogOpen && (
-
- closeExampleStoreDialog({ deselectExampleAndGameTemplate: true })
- }
- isProjectOpening={isProjectOpening}
- selectedExampleShortHeader={selectedExampleShortHeader}
- selectedPrivateGameTemplateListingData={
- selectedPrivateGameTemplate
- ? selectedPrivateGameTemplate.privateGameTemplateListingData
- : null
- }
- onSelectExampleShortHeader={setSelectedExampleShortHeader}
- onSelectPrivateGameTemplateListingData={privateGameTemplateListingData =>
- privateGameTemplateListingData
- ? setSelectedPrivateGameTemplate({
- privateGameTemplateListingData,
- openDialog: true,
- })
- : setSelectedPrivateGameTemplate(null)
- }
- onOpenNewProjectSetupDialog={onOpenNewProjectSetupDialog}
- />
- )}
- {!!selectedExampleShortHeader && (
- setSelectedExampleShortHeader(null)}
- />
- )}
- {!!selectedPrivateGameTemplate &&
- selectedPrivateGameTemplate.openDialog && (
-
- setSelectedPrivateGameTemplate({
- privateGameTemplateListingData,
- openDialog: true,
- })
- }
- onClose={() => setSelectedPrivateGameTemplate(null)}
- privateGameTemplateListingDatasFromSameCreator={
- privateGameTemplateListingDatasFromSameCreator
- }
- />
- )}
-
- );
- };
- return {
- selectedExampleShortHeader,
- selectedPrivateGameTemplateListingData: selectedPrivateGameTemplate
- ? selectedPrivateGameTemplate.privateGameTemplateListingData
- : null,
- closeExampleStoreDialog,
- openExampleStoreDialog,
- onSelectExampleShortHeader: setSelectedExampleShortHeader,
- onSelectPrivateGameTemplate: setSelectedPrivateGameTemplate,
- renderExampleOrGameTemplateDialogs,
- fetchAndOpenNewProjectSetupDialogForExample,
- };
-};
-
-export default useExampleOrGameTemplateDialogs;
diff --git a/newIDE/app/src/MainFrame/UseNewProjectDialog.js b/newIDE/app/src/MainFrame/UseNewProjectDialog.js
new file mode 100644
index 000000000000..b6a535ca5137
--- /dev/null
+++ b/newIDE/app/src/MainFrame/UseNewProjectDialog.js
@@ -0,0 +1,246 @@
+// @flow
+
+import * as React from 'react';
+import { type I18n as I18nType } from '@lingui/core';
+import {
+ listAllExamples,
+ type ExampleShortHeader,
+} from '../Utils/GDevelopServices/Example';
+import type { PrivateGameTemplateListingData } from '../Utils/GDevelopServices/Shop';
+import { PrivateGameTemplateStoreContext } from '../AssetStore/PrivateGameTemplates/PrivateGameTemplateStoreContext';
+import AuthenticatedUserContext from '../Profile/AuthenticatedUserContext';
+import LoaderModal from '../UI/LoaderModal';
+import NewProjectSetupDialog, {
+ type NewProjectSetup,
+} from '../ProjectCreation/NewProjectSetupDialog';
+import { type StorageProvider } from '../ProjectsStorage';
+
+type Props = {|
+ isProjectOpening: boolean,
+ newProjectSetupDialogOpen: boolean,
+ setNewProjectSetupDialogOpen: boolean => void,
+ createEmptyProject: NewProjectSetup => Promise,
+ createProjectFromExample: (
+ exampleShortHeader: ExampleShortHeader,
+ newProjectSetup: NewProjectSetup,
+ i18n: I18nType
+ ) => Promise,
+ createProjectFromPrivateGameTemplate: (
+ privateGameTemplateListingData: PrivateGameTemplateListingData,
+ newProjectSetup: NewProjectSetup
+ ) => Promise,
+ createProjectFromAIGeneration: (
+ projectFileUrl: string,
+ newProjectSetup: NewProjectSetup
+ ) => Promise,
+ storageProviders: Array,
+|};
+
+const useExampleOrGameTemplateDialogs = ({
+ isProjectOpening,
+ newProjectSetupDialogOpen,
+ setNewProjectSetupDialogOpen,
+ createEmptyProject,
+ createProjectFromExample,
+ createProjectFromPrivateGameTemplate,
+ createProjectFromAIGeneration,
+ storageProviders,
+}: Props) => {
+ const [isFetchingExample, setIsFetchingExample] = React.useState(false);
+ const [
+ selectedPrivateGameTemplateListingData,
+ setSelectedPrivateGameTemplateListingData,
+ ] = React.useState(null);
+ const [
+ selectedExampleShortHeader,
+ setSelectedExampleShortHeader,
+ ] = React.useState(null);
+ const [preventBackHome, setPreventBackHome] = React.useState(true);
+ const [preventBackDetails, setPreventBackDetails] = React.useState(false);
+
+ const { receivedGameTemplates } = React.useContext(AuthenticatedUserContext);
+ const { privateGameTemplateListingDatas } = React.useContext(
+ PrivateGameTemplateStoreContext
+ );
+
+ const closeNewProjectDialog = React.useCallback(
+ () => {
+ setPreventBackHome(false);
+ setPreventBackDetails(false);
+ setSelectedExampleShortHeader(null);
+ setSelectedPrivateGameTemplateListingData(null);
+ setNewProjectSetupDialogOpen(false);
+ },
+ [setNewProjectSetupDialogOpen]
+ );
+ const openNewProjectDialog = React.useCallback(
+ () => {
+ setPreventBackHome(false);
+ setPreventBackDetails(false);
+ setSelectedExampleShortHeader(null);
+ setSelectedPrivateGameTemplateListingData(null);
+ setNewProjectSetupDialogOpen(true);
+ },
+ [setNewProjectSetupDialogOpen]
+ );
+
+ const privateGameTemplateListingDatasFromSameCreator: ?Array = React.useMemo(
+ () => {
+ if (
+ !selectedPrivateGameTemplateListingData ||
+ !privateGameTemplateListingDatas ||
+ !receivedGameTemplates
+ )
+ return null;
+
+ const receivedGameTemplateIds = receivedGameTemplates.map(
+ template => template.id
+ );
+
+ return privateGameTemplateListingDatas
+ .filter(
+ template =>
+ template.sellerId ===
+ selectedPrivateGameTemplateListingData.sellerId &&
+ !receivedGameTemplateIds.includes(template.sellerId)
+ )
+ .sort((template1, template2) =>
+ template1.name.localeCompare(template2.name)
+ );
+ },
+ [
+ selectedPrivateGameTemplateListingData,
+ privateGameTemplateListingDatas,
+ receivedGameTemplates,
+ ]
+ );
+
+ const onSelectPrivateGameTemplateListingData = React.useCallback(
+ ({
+ privateGameTemplateListingData,
+ preventBackHome,
+ preventBackDetails,
+ }: {|
+ privateGameTemplateListingData: ?PrivateGameTemplateListingData,
+ preventBackHome?: boolean,
+ preventBackDetails?: boolean,
+ |}) => {
+ setSelectedPrivateGameTemplateListingData(privateGameTemplateListingData);
+ setPreventBackHome(!!preventBackHome);
+ setPreventBackDetails(!!preventBackDetails);
+ if (privateGameTemplateListingData) {
+ setNewProjectSetupDialogOpen(true);
+ }
+ },
+ [setSelectedPrivateGameTemplateListingData, setNewProjectSetupDialogOpen]
+ );
+
+ const onSelectExampleShortHeader = React.useCallback(
+ ({
+ exampleShortHeader,
+ preventBackHome,
+ preventBackDetails,
+ }: {|
+ exampleShortHeader: ?ExampleShortHeader,
+ preventBackHome?: boolean,
+ preventBackDetails?: boolean,
+ |}) => {
+ setSelectedExampleShortHeader(exampleShortHeader);
+ setPreventBackHome(!!preventBackHome);
+ setPreventBackDetails(!!preventBackDetails);
+ if (exampleShortHeader) {
+ setNewProjectSetupDialogOpen(true);
+ }
+ },
+ [setSelectedExampleShortHeader, setNewProjectSetupDialogOpen]
+ );
+
+ const fetchAndOpenNewProjectSetupDialogForExample = React.useCallback(
+ async (exampleSlug: string) => {
+ try {
+ setIsFetchingExample(true);
+ const fetchedAllExamples = await listAllExamples();
+ const exampleShortHeader = fetchedAllExamples.exampleShortHeaders.find(
+ exampleShortHeader => exampleShortHeader.slug === exampleSlug
+ );
+ if (!exampleShortHeader) {
+ throw new Error(
+ `Unable to find the example with slug "${exampleSlug}"`
+ );
+ }
+
+ onSelectExampleShortHeader({
+ exampleShortHeader,
+ preventBackHome: false,
+ });
+ } catch (error) {
+ console.error('Error caught while opening example:', error);
+ return;
+ } finally {
+ setIsFetchingExample(false);
+ }
+ },
+ [onSelectExampleShortHeader]
+ );
+
+ const renderNewProjectDialog = () => {
+ return (
+ <>
+ {isFetchingExample && }
+ {newProjectSetupDialogOpen && (
+ {
+ const projectFileUrl = generatedProject.fileUrl;
+ if (!projectFileUrl) return;
+ await createProjectFromAIGeneration(projectFileUrl, projectSetup);
+ }}
+ storageProviders={storageProviders}
+ selectedExampleShortHeader={selectedExampleShortHeader}
+ onSelectExampleShortHeader={exampleShortHeader =>
+ onSelectExampleShortHeader({
+ exampleShortHeader,
+ preventBackHome: false,
+ })
+ }
+ selectedPrivateGameTemplateListingData={
+ selectedPrivateGameTemplateListingData
+ }
+ onSelectPrivateGameTemplateListingData={privateGameTemplateListingData =>
+ onSelectPrivateGameTemplateListingData({
+ privateGameTemplateListingData,
+ preventBackHome: false,
+ })
+ }
+ privateGameTemplateListingDatasFromSameCreator={
+ privateGameTemplateListingDatasFromSameCreator
+ }
+ preventBackHome={preventBackHome}
+ preventBackDetails={preventBackDetails}
+ />
+ )}
+
+ );
+ };
+ return {
+ selectedExampleShortHeader: selectedExampleShortHeader,
+ selectedPrivateGameTemplateListingData: selectedPrivateGameTemplateListingData,
+ closeNewProjectDialog,
+ openNewProjectDialog,
+ onSelectExampleShortHeader,
+ onSelectPrivateGameTemplateListingData,
+ renderNewProjectDialog,
+ fetchAndOpenNewProjectSetupDialogForExample,
+ };
+};
+
+export default useExampleOrGameTemplateDialogs;
diff --git a/newIDE/app/src/MainFrame/index.js b/newIDE/app/src/MainFrame/index.js
index b7f4c172d495..1f6d314a35d4 100644
--- a/newIDE/app/src/MainFrame/index.js
+++ b/newIDE/app/src/MainFrame/index.js
@@ -137,7 +137,7 @@ import HotReloadLogsDialog from '../HotReload/HotReloadLogsDialog';
import { useDiscordRichPresence } from '../Utils/UpdateDiscordRichPresence';
import { delay } from '../Utils/Delay';
import { type ExtensionShortHeader } from '../Utils/GDevelopServices/Extension';
-import useExampleOrGameTemplateDialogs from './UseExampleOrGameTemplateDialogs';
+import useNewProjectDialog from './UseNewProjectDialog';
import { findAndLogProjectPreviewErrors } from '../Utils/ProjectErrorsChecker';
import { renameResourcesInProject } from '../ResourcesList/ResourceUtils';
import { NewResourceDialog } from '../ResourcesList/NewResourceDialog';
@@ -156,7 +156,6 @@ import {
} from '../Utils/Analytics/EventSender';
import { useLeaderboardReplacer } from '../Leaderboard/UseLeaderboardReplacer';
import useAlertDialog from '../UI/Alert/useAlertDialog';
-import NewProjectSetupDialog from '../ProjectCreation/NewProjectSetupDialog';
import {
useResourceMover,
type ResourceMover,
@@ -520,19 +519,6 @@ const MainFrame = (props: Props) => {
? currentProject.isFolderProject()
: false,
});
- const {
- selectedExampleShortHeader,
- selectedPrivateGameTemplateListingData,
- onSelectExampleShortHeader,
- onSelectPrivateGameTemplate,
- renderExampleOrGameTemplateDialogs,
- closeExampleStoreDialog,
- openExampleStoreDialog,
- fetchAndOpenNewProjectSetupDialogForExample,
- } = useExampleOrGameTemplateDialogs({
- isProjectOpening,
- onOpenNewProjectSetupDialog: () => setNewProjectSetupDialogOpen(true),
- });
const gamesList = useGamesList();
@@ -911,7 +897,6 @@ const MainFrame = (props: Props) => {
currentProject: project,
currentFileMetadata: fileMetadata,
}));
- closeExampleStoreDialog({ deselectExampleAndGameTemplate: false });
// Load all the EventsFunctionsExtension when the game is loaded. If they are modified,
// their editor will take care of reloading them.
@@ -952,7 +937,6 @@ const MainFrame = (props: Props) => {
setState,
closeProject,
preferences,
- closeExampleStoreDialog,
eventsFunctionsExtensionsState,
getStorageProvider,
getStorageProviderOperations,
@@ -1143,7 +1127,6 @@ const MainFrame = (props: Props) => {
createProjectFromPrivateGameTemplate,
createProjectFromInAppTutorial,
createProjectFromTutorial,
- createProjectWithLogin,
createProjectFromAIGeneration,
} = useCreateProject({
beforeCreatingProject: () => {
@@ -1157,7 +1140,6 @@ const MainFrame = (props: Props) => {
options,
}) => {
setNewProjectSetupDialogOpen(false);
- closeExampleStoreDialog({ deselectExampleAndGameTemplate: true });
if (options.openQuickCustomizationDialog) {
setQuickCustomizationDialogOpenedFromGameId(oldProjectId);
} else {
@@ -1198,6 +1180,23 @@ const MainFrame = (props: Props) => {
onGameRegistered: gamesList.fetchGames,
});
+ const {
+ onSelectExampleShortHeader,
+ onSelectPrivateGameTemplateListingData,
+ renderNewProjectDialog,
+ fetchAndOpenNewProjectSetupDialogForExample,
+ openNewProjectDialog,
+ } = useNewProjectDialog({
+ isProjectOpening,
+ newProjectSetupDialogOpen,
+ setNewProjectSetupDialogOpen,
+ createEmptyProject,
+ createProjectFromExample,
+ createProjectFromPrivateGameTemplate,
+ createProjectFromAIGeneration,
+ storageProviders: props.storageProviders,
+ });
+
const closeApp = React.useCallback((): void => {
return Window.quit();
}, []);
@@ -3393,7 +3392,7 @@ const MainFrame = (props: Props) => {
onLaunchNetworkPreview: launchNetworkPreview,
onLaunchPreviewWithDiagnosticReport: launchPreviewWithDiagnosticReport,
onOpenHomePage: openHomePage,
- onCreateBlank: () => setNewProjectSetupDialogOpen(true),
+ onCreateProject: () => setNewProjectSetupDialogOpen(true),
onOpenProject: () => openOpenFromStorageProviderDialog(),
onSaveProject: saveProject,
onSaveProjectAs: saveProjectAs,
@@ -3454,8 +3453,7 @@ const MainFrame = (props: Props) => {
onCloseApp: closeApp,
onExportProject: () => openShareDialog('publish'),
onInviteCollaborators: () => openShareDialog('invite'),
- onCreateProject: openExampleStoreDialog,
- onCreateBlank: () => setNewProjectSetupDialogOpen(true),
+ onCreateProject: () => setNewProjectSetupDialogOpen(true),
onOpenProjectManager: () => openProjectManager(true),
onOpenHomePage: openHomePage,
onOpenDebugger: openDebugger,
@@ -3663,27 +3661,30 @@ const MainFrame = (props: Props) => {
).length,
onChooseProject: () => openOpenFromStorageProviderDialog(),
onOpenRecentFile: openFromFileMetadataWithStorageProvider,
- onOpenNewProjectSetupDialog: () => {
- setNewProjectSetupDialogOpen(true);
- },
+ onOpenNewProjectSetupDialog: openNewProjectDialog,
onOpenProjectManager: () => openProjectManager(true),
askToCloseProject,
closeProject,
- onOpenExampleStore: openExampleStoreDialog,
- onSelectExampleShortHeader: onSelectExampleShortHeader,
- onCreateProjectFromExample: createProjectFromExample,
- onPreviewPrivateGameTemplateListingData: privateGameTemplateListingData =>
- onSelectPrivateGameTemplate({
+ onSelectExampleShortHeader: exampleShortHeader => {
+ onSelectExampleShortHeader({
+ exampleShortHeader,
+ preventBackHome: true,
+ });
+ },
+ onSelectPrivateGameTemplateListingData: privateGameTemplateListingData => {
+ onSelectPrivateGameTemplateListingData({
privateGameTemplateListingData,
- openDialog: true,
- }),
+ preventBackHome: true,
+ });
+ },
onOpenPrivateGameTemplateListingData: privateGameTemplateListingData => {
- onSelectPrivateGameTemplate({
+ onSelectPrivateGameTemplateListingData({
privateGameTemplateListingData,
- openDialog: false,
+ preventBackHome: true,
+ preventBackDetails: true,
});
- setNewProjectSetupDialogOpen(true);
},
+ onCreateProjectFromExample: createProjectFromExample,
onOpenProfile: () => openProfileDialog(true),
onOpenLanguageDialog: () => openLanguageDialog(true),
onOpenPreferences: () => openPreferencesDialog(true),
@@ -3813,31 +3814,7 @@ const MainFrame = (props: Props) => {
}}
/>
)}
- {// Render example or game template dialogs before NewProjectSetupDialog to make sure it's always displayed on top
- renderExampleOrGameTemplateDialogs()}
- {newProjectSetupDialogOpen && (
- setNewProjectSetupDialogOpen(false)}
- onCreateEmptyProject={createEmptyProject}
- onCreateFromExample={createProjectFromExample}
- onCreateProjectFromPrivateGameTemplate={
- createProjectFromPrivateGameTemplate
- }
- onCreateWithLogin={createProjectWithLogin}
- onCreateFromAIGeneration={async (generatedProject, projectSetup) => {
- const projectFileUrl = generatedProject.fileUrl;
- if (!projectFileUrl) return;
- await createProjectFromAIGeneration(projectFileUrl, projectSetup);
- }}
- storageProviders={props.storageProviders}
- selectedExampleShortHeader={selectedExampleShortHeader}
- selectedPrivateGameTemplateListingData={
- selectedPrivateGameTemplateListingData
- }
- />
- )}
+ {renderNewProjectDialog()}
{cloudProjectFileMetadataToRecover && (
Promise,
+ isProjectOpening?: boolean,
+ isGeneratingProject: boolean,
+ storageProvider: StorageProvider,
+ saveAsLocation: ?SaveAsLocation,
+ generatingProjectId: ?string,
+ onGenerationClosed: () => void,
+ generationPrompt: string,
+ onGenerationPromptChange: (generationPrompt: string) => void,
+|};
+
+const AIPromptField = ({
+ onCreateFromAIGeneration,
+ isProjectOpening,
+ isGeneratingProject,
+ storageProvider,
+ saveAsLocation,
+ generatingProjectId,
+ onGenerationClosed,
+ generationPrompt,
+ onGenerationPromptChange,
+}: Props): React.Node => {
+ const { authenticated, limits } = React.useContext(AuthenticatedUserContext);
+ const isOnline = useOnlineStatus();
+ const generationCurrentUsage = limits
+ ? limits.quotas['ai-project-generation']
+ : null;
+ const canGenerateProjectFromPrompt =
+ generationCurrentUsage && !generationCurrentUsage.limitReached;
+ const disabled = isProjectOpening || isGeneratingProject;
+
+ return (
+ <>
+
+
+
+ onGenerationPromptChange(text)}
+ floatingLabelText={AI prompt}
+ floatingLabelFixed
+ translatableHintText={
+ !authenticated || !isOnline
+ ? t`Log in to enter a prompt`
+ : t`Type a prompt or generate one`
+ }
+ endAdornment={
+ onGenerationPromptChange(generatePrompt())}
+ tooltip={t`Generate random prompt`}
+ disabled={
+ disabled ||
+ !authenticated ||
+ !isOnline ||
+ !canGenerateProjectFromPrompt
+ }
+ >
+
+
+ }
+ />
+
+ {authenticated && !canGenerateProjectFromPrompt && (
+
+
+
+
+
+ You've used all your daily pre-made AI scenes! Generate as
+ many as you want with a subscription.
+
+
+
+
+
+ )}
+
+ {isGeneratingProject && generatingProjectId && (
+
+ )}
+
+ );
+};
+
+export default AIPromptField;
diff --git a/newIDE/app/src/ProjectCreation/CreateProject.js b/newIDE/app/src/ProjectCreation/CreateProject.js
index 7fc0de8b75af..9fe8a6456db6 100644
--- a/newIDE/app/src/ProjectCreation/CreateProject.js
+++ b/newIDE/app/src/ProjectCreation/CreateProject.js
@@ -46,17 +46,6 @@ export const addDefaultLightToAllLayers = (layout: gdLayout): void => {
}
};
-const addDefaultLightToProject = (project: gdProject): void => {
- for (
- let layoutIndex = 0;
- layoutIndex < project.getLayoutsCount();
- layoutIndex++
- ) {
- const layout = project.getLayoutAt(layoutIndex);
- addDefaultLightToAllLayers(layout);
- }
-};
-
export const createNewEmptyProject = (): NewProjectSource => {
const project: gdProject = gd.ProjectHelper.createNewGDJSProject();
@@ -68,20 +57,6 @@ export const createNewEmptyProject = (): NewProjectSource => {
};
};
-export const createNewProjectWithDefaultLogin = (): NewProjectSource => {
- const url =
- 'https://resources.gdevelop-app.com/examples-database/login-template.json';
- sendNewGameCreated({
- exampleUrl: url,
- exampleSlug: 'login-template',
- });
- const newProjectSource = getNewProjectSourceFromUrl(url);
- if (newProjectSource.project) {
- addDefaultLightToProject(newProjectSource.project);
- }
- return newProjectSource;
-};
-
export const createNewProjectFromAIGeneratedProject = (
generatedProjectUrl: string
): NewProjectSource => {
diff --git a/newIDE/app/src/ProjectCreation/EmptyAndBaseProjects.js b/newIDE/app/src/ProjectCreation/EmptyAndBaseProjects.js
new file mode 100644
index 000000000000..53be7b5e0201
--- /dev/null
+++ b/newIDE/app/src/ProjectCreation/EmptyAndBaseProjects.js
@@ -0,0 +1,137 @@
+// @flow
+import * as React from 'react';
+import { I18n } from '@lingui/react';
+import { type StorageProvider, type SaveAsLocation } from '../ProjectsStorage';
+import Add from '../UI/CustomSvgIcons/Add';
+import Text from '../UI/Text';
+import { Trans } from '@lingui/macro';
+import { Column, Line } from '../UI/Grid';
+import { type GDevelopTheme } from '../UI/Theme';
+import GDevelopThemeContext from '../UI/Theme/GDevelopThemeContext';
+import { ExampleTile } from '../AssetStore/ShopTiles';
+import { ExampleStoreContext } from '../AssetStore/ExampleStore/ExampleStoreContext';
+import { type ExampleShortHeader } from '../Utils/GDevelopServices/Example';
+import { useResponsiveWindowSize } from '../UI/Responsive/ResponsiveWindowMeasurer';
+import { GridList, GridListTile } from '@material-ui/core';
+import { shouldValidate } from '../UI/KeyboardShortcuts/InteractionKeys';
+import classes from './EmptyAndBaseProjects.module.css';
+import classNames from 'classnames';
+import { getItemsColumns } from './NewProjectSetupDialog';
+
+const getStyles = (theme: GDevelopTheme) => ({
+ grid: {
+ margin: 0,
+ // Remove the scroll capability of the grid, the scroll view handles it.
+ overflow: 'unset',
+ },
+ cellSpacing: 2,
+});
+
+type EmptyProjectTileProps = {|
+ onSelectEmptyProject: () => void,
+ disabled?: boolean,
+ /** Props needed so that GridList component can adjust tile size */
+ style?: any,
+|};
+
+const EmptyProjectTile = ({
+ onSelectEmptyProject,
+ disabled,
+ style,
+}: EmptyProjectTileProps) => {
+ return (
+
+
+
): void => {
+ if (shouldValidate(event) && !disabled) {
+ onSelectEmptyProject();
+ }
+ }}
+ >
+
+
+
+ Empty project
+
+
+
+
+
+
+
+
+