From cca897d24d1b3e980d51ecf6c87c4fe2d06e8e85 Mon Sep 17 00:00:00 2001 From: CrossPr0duct Date: Fri, 23 May 2025 16:27:41 -0400 Subject: [PATCH] Remove the Wizard --- .../app/src/pages/PageEnigma/PageEnigma.tsx | 1 - .../pages/PageEnigma/Wizard/Background.tsx | 100 ---------- .../PageEnigma/Wizard/BackgroundList.tsx | 52 ----- .../pages/PageEnigma/Wizard/CharacterList.tsx | 72 ------- .../pages/PageEnigma/Wizard/Characters.tsx | 106 ----------- .../pages/PageEnigma/Wizard/ItemElement.tsx | 56 ------ .../src/pages/PageEnigma/Wizard/MainPage.tsx | 89 --------- .../pages/PageEnigma/Wizard/ObjectList.tsx | 72 ------- .../Wizard/ObjectSelectionButton.tsx | 43 ----- .../src/pages/PageEnigma/Wizard/Objects.tsx | 106 ----------- .../src/pages/PageEnigma/Wizard/Question.tsx | 20 -- .../app/src/pages/PageEnigma/Wizard/Remix.tsx | 100 ---------- .../pages/PageEnigma/Wizard/RemixVideo.tsx | 138 -------------- .../src/pages/PageEnigma/Wizard/TextField.tsx | 13 -- .../src/pages/PageEnigma/Wizard/Wizard.tsx | 177 ------------------ .../pages/PageEnigma/Wizard/WizardStep.tsx | 74 -------- .../pages/PageEnigma/Wizard/signals/wizard.ts | 24 --- 17 files changed, 1243 deletions(-) delete mode 100644 frontend/apps/editor3d/app/src/pages/PageEnigma/Wizard/Background.tsx delete mode 100644 frontend/apps/editor3d/app/src/pages/PageEnigma/Wizard/BackgroundList.tsx delete mode 100644 frontend/apps/editor3d/app/src/pages/PageEnigma/Wizard/CharacterList.tsx delete mode 100644 frontend/apps/editor3d/app/src/pages/PageEnigma/Wizard/Characters.tsx delete mode 100644 frontend/apps/editor3d/app/src/pages/PageEnigma/Wizard/ItemElement.tsx delete mode 100644 frontend/apps/editor3d/app/src/pages/PageEnigma/Wizard/MainPage.tsx delete mode 100644 frontend/apps/editor3d/app/src/pages/PageEnigma/Wizard/ObjectList.tsx delete mode 100644 frontend/apps/editor3d/app/src/pages/PageEnigma/Wizard/ObjectSelectionButton.tsx delete mode 100644 frontend/apps/editor3d/app/src/pages/PageEnigma/Wizard/Objects.tsx delete mode 100644 frontend/apps/editor3d/app/src/pages/PageEnigma/Wizard/Question.tsx delete mode 100644 frontend/apps/editor3d/app/src/pages/PageEnigma/Wizard/Remix.tsx delete mode 100644 frontend/apps/editor3d/app/src/pages/PageEnigma/Wizard/RemixVideo.tsx delete mode 100644 frontend/apps/editor3d/app/src/pages/PageEnigma/Wizard/TextField.tsx delete mode 100644 frontend/apps/editor3d/app/src/pages/PageEnigma/Wizard/Wizard.tsx delete mode 100644 frontend/apps/editor3d/app/src/pages/PageEnigma/Wizard/WizardStep.tsx delete mode 100644 frontend/apps/editor3d/app/src/pages/PageEnigma/Wizard/signals/wizard.ts diff --git a/frontend/apps/editor3d/app/src/pages/PageEnigma/PageEnigma.tsx b/frontend/apps/editor3d/app/src/pages/PageEnigma/PageEnigma.tsx index eb8aaaa63c..56ef3c496a 100644 --- a/frontend/apps/editor3d/app/src/pages/PageEnigma/PageEnigma.tsx +++ b/frontend/apps/editor3d/app/src/pages/PageEnigma/PageEnigma.tsx @@ -119,7 +119,6 @@ export const PageEnigma = ({ sceneToken }: { sceneToken?: string }) => { /> - {/* */} diff --git a/frontend/apps/editor3d/app/src/pages/PageEnigma/Wizard/Background.tsx b/frontend/apps/editor3d/app/src/pages/PageEnigma/Wizard/Background.tsx deleted file mode 100644 index e0a1243ab9..0000000000 --- a/frontend/apps/editor3d/app/src/pages/PageEnigma/Wizard/Background.tsx +++ /dev/null @@ -1,100 +0,0 @@ -import { WizardItem } from "~/pages/PageEnigma/Wizard/Wizard"; -import { ObjectSelectionButton } from "~/pages/PageEnigma/Wizard/ObjectSelectionButton"; -import { BucketConfig } from "~/api/BucketConfig"; -import { MediaInfo } from "~/pages/PageEnigma/models"; -import { AssetType, FilterEngineCategories, ToastTypes } from "~/enums"; -import { useCallback, useEffect, useState } from "react"; -import { MediaFilesApi } from "~/Classes/ApiManager"; -import { addToast } from "~/signals"; -import { - backgroundWizardItems, - currentStep, - selectedBackground, -} from "~/pages/PageEnigma/Wizard/signals/wizard"; -import { useSignals } from "@preact/signals-react/runtime"; -import { BackgroundList } from "~/pages/PageEnigma/Wizard/BackgroundList"; - -export const Background = () => { - useSignals(); - const item = currentStep.value as WizardItem; - const [showList, setShowList] = useState(false); - - const responseMapping = (data: MediaInfo[]) => { - return data - .filter( - (item) => - [ - "Sci-fi City", - "Cherry Blossom Petals", - "Barbie Dreamland Test", - "Space Station", - "graveyard_2", - "sand tile", - "Tiny Island", - "dock", - ].indexOf(item.maybe_title ?? "") > -1, - ) - .map((item) => { - const bucketConfig = new BucketConfig(); - const itemThumb = bucketConfig.getCdnUrl( - item.cover_image.maybe_cover_image_public_bucket_path ?? "", - 600, - 100, - ); - return { - colorIndex: item.cover_image.default_cover.color_index, - imageIndex: item.cover_image.default_cover.image_index, - media_id: item.token, - name: item.maybe_title ?? "Unknown", - type: AssetType.OBJECT, - media_type: item.media_type, - version: 1, - ...(item.cover_image.maybe_cover_image_public_bucket_path - ? { - thumbnail: itemThumb, - } - : {}), - }; - }); - }; - - const fetchFeaturedObjects = useCallback(async () => { - const mediaFilesApi = new MediaFilesApi(); - const response = await mediaFilesApi.ListFeaturedMediaFiles({ - filter_engine_categories: [FilterEngineCategories.OBJECT], - }); - if (response.success && response.data) { - backgroundWizardItems.value = responseMapping(response.data); - return; - } - addToast( - ToastTypes.ERROR, - response.errorMessage || "Unknown Error in Fetching Featured Objects", - ); - }, []); - - useEffect(() => { - fetchFeaturedObjects(); - }, [fetchFeaturedObjects]); - - if (showList) { - return setShowList(false)} />; - } - return ( -
-
{item.label}
- setShowList(true)} - label={ - selectedBackground.value ? "Selected Background" : "Select Background" - } - busy={!backgroundWizardItems.value} - imageSrc={ - selectedBackground.value?.thumbnail ?? - backgroundWizardItems.value?.[0]?.thumbnail ?? - "" - } - /> -
- ); -}; diff --git a/frontend/apps/editor3d/app/src/pages/PageEnigma/Wizard/BackgroundList.tsx b/frontend/apps/editor3d/app/src/pages/PageEnigma/Wizard/BackgroundList.tsx deleted file mode 100644 index 454c788e79..0000000000 --- a/frontend/apps/editor3d/app/src/pages/PageEnigma/Wizard/BackgroundList.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import { useContext } from "react"; -import { ItemElement } from "./ItemElement"; -import Queue from "~/pages/PageEnigma/Queue/Queue"; -import { QueueNames } from "~/pages/PageEnigma/Queue"; -import { toEngineActions } from "~/pages/PageEnigma/Queue/toEngineActions"; -import { objectGroup } from "~/pages/PageEnigma/signals"; -import { EngineContext } from "~/pages/PageEnigma/contexts/EngineContext"; -import { - backgroundWizardItems, - selectedBackground, -} from "~/pages/PageEnigma/Wizard/signals/wizard"; -import { useSignals } from "@preact/signals-react/runtime"; - -interface Props { - onClose: () => void; -} - -export const BackgroundList = ({ onClose }: Props) => { - useSignals(); - const editorEngine = useContext(EngineContext); - - return ( -
- {(backgroundWizardItems.value ?? []).map((item) => ( - - ))} -
- ); -}; diff --git a/frontend/apps/editor3d/app/src/pages/PageEnigma/Wizard/CharacterList.tsx b/frontend/apps/editor3d/app/src/pages/PageEnigma/Wizard/CharacterList.tsx deleted file mode 100644 index 29ef4e93c4..0000000000 --- a/frontend/apps/editor3d/app/src/pages/PageEnigma/Wizard/CharacterList.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import { Clip, MediaItem } from "~/pages/PageEnigma/models"; -import { useEffect, useRef } from "react"; -import { ItemElement } from "./ItemElement"; -import Queue from "~/pages/PageEnigma/Queue/Queue"; -import { QueueNames } from "~/pages/PageEnigma/Queue"; -import { fromEngineActions } from "~/pages/PageEnigma/Queue/fromEngineActions"; -import { AssetType } from "~/enums"; -import { - characterWizardItems, - selectedCharacters, - showList, -} from "~/pages/PageEnigma/Wizard/signals/wizard"; -import { toEngineActions } from "~/pages/PageEnigma/Queue/toEngineActions"; -import { useSignals } from "@preact/signals-react/runtime"; - -export const CharacterList = () => { - useSignals(); - const addingObject = useRef(null); - - useEffect(() => { - Queue.subscribe(QueueNames.FROM_ENGINE, "wizard-character", (message) => { - switch (message.action) { - case fromEngineActions.UPDATE_CHARACTER_ID: - if (addingObject.current) { - const data = message.data as Clip; - selectedCharacters.value = [ - ...selectedCharacters.value, - { - ...addingObject.current, - version: data.version, - type: data.type.toString() as AssetType, - media_id: data.media_id, - name: data.name, - object_uuid: data.object_uuid, - }, - ]; - } - break; - case fromEngineActions.DELETE_OBJECT: - selectedCharacters.value = selectedCharacters.value.filter( - (object) => - object.object_uuid !== (message.data as Clip).object_uuid, - ); - break; - } - }); - }, []); - - return ( -
- {(characterWizardItems.value ?? []).map((item) => ( - - ))} -
- ); -}; diff --git a/frontend/apps/editor3d/app/src/pages/PageEnigma/Wizard/Characters.tsx b/frontend/apps/editor3d/app/src/pages/PageEnigma/Wizard/Characters.tsx deleted file mode 100644 index 0d4275bc16..0000000000 --- a/frontend/apps/editor3d/app/src/pages/PageEnigma/Wizard/Characters.tsx +++ /dev/null @@ -1,106 +0,0 @@ -import { WizardItem, WizardType } from "~/pages/PageEnigma/Wizard/Wizard"; -import { ObjectSelectionButton } from "~/pages/PageEnigma/Wizard/ObjectSelectionButton"; -import { BucketConfig } from "~/api/BucketConfig"; -import { MediaInfo } from "~/pages/PageEnigma/models"; -import { AssetType, FilterEngineCategories, ToastTypes } from "~/enums"; -import { useCallback, useContext, useEffect } from "react"; -import { MediaFilesApi } from "~/Classes/ApiManager"; -import { addToast } from "~/signals"; -import { ItemElement } from "./ItemElement"; -import { EngineContext } from "~/pages/PageEnigma/contexts/EngineContext"; -import { - characterWizardItems, - currentStep, - selectedCharacters, -} from "~/pages/PageEnigma/Wizard/signals/wizard"; -import { useSignals } from "@preact/signals-react/runtime"; -import { demoCharacterItems } from "~/pages/PageEnigma/signals"; - -export const Characters = () => { - useSignals(); - const item = currentStep.value as WizardItem; - const editorEngine = useContext(EngineContext); - - const responseMapping = (data: MediaInfo[]) => { - return data.map((item) => { - const bucketConfig = new BucketConfig(); - const itemThumb = bucketConfig.getCdnUrl( - item.cover_image.maybe_cover_image_public_bucket_path ?? "", - 600, - 100, - ); - return { - object_uuid: item.token, - colorIndex: item.cover_image.default_cover.color_index, - imageIndex: item.cover_image.default_cover.image_index, - media_id: item.token, - name: item.maybe_title ?? "Unknown", - type: AssetType.OBJECT, - media_type: item.media_type, - version: 1, - ...(item.cover_image.maybe_cover_image_public_bucket_path - ? { - thumbnail: itemThumb, - } - : {}), - }; - }); - }; - - const fetchFeaturedCharacters = useCallback(async () => { - const mediaFilesApi = new MediaFilesApi(); - const response = await mediaFilesApi.ListFeaturedMediaFiles({ - filter_engine_categories: [FilterEngineCategories.CHARACTER], - }); - if (response.success && response.data) { - characterWizardItems.value = [ - ...responseMapping(response.data), - ...demoCharacterItems.value, - ]; - return; - } - addToast( - ToastTypes.ERROR, - response.errorMessage || "Unknown Error in Fetching Featured Objects", - ); - }, []); - - useEffect(() => { - fetchFeaturedCharacters(); - }, [fetchFeaturedCharacters]); - - console.log(characterWizardItems.value?.[0]?.thumbnail ?? ""); - const initialCharacter = characterWizardItems.value?.[0] ?? { - imageIndex: 0, - thumbnail: "", - }; - const defaultThumb = `/resources/images/default-covers/${(initialCharacter.imageIndex || 0) % 24}.webp`; - const thumbnail = initialCharacter.thumbnail - ? initialCharacter.thumbnail - : defaultThumb; - - return ( -
-
{item.label}
-
- {selectedCharacters.value.map((item) => ( - - ))} -
- {}} - label="Selected Character" - busy={!characterWizardItems.value} - imageSrc={thumbnail} - /> -
- ); -}; diff --git a/frontend/apps/editor3d/app/src/pages/PageEnigma/Wizard/ItemElement.tsx b/frontend/apps/editor3d/app/src/pages/PageEnigma/Wizard/ItemElement.tsx deleted file mode 100644 index d3389e0b8d..0000000000 --- a/frontend/apps/editor3d/app/src/pages/PageEnigma/Wizard/ItemElement.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import { MediaItem } from "~/pages/PageEnigma/models"; -import { useSignals } from "@preact/signals-react/runtime"; -import { SyntheticEvent } from "react"; -import { Badge } from "~/components"; -import { AssetType } from "~/enums"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faTrash } from "@fortawesome/pro-solid-svg-icons"; - -interface Props { - item: MediaItem; - showDelete?: boolean; -} - -export const ItemElement = ({ item, showDelete }: Props) => { - useSignals(); - const defaultThumb = `/resources/images/default-covers/${(item.imageIndex || 0) % 24}.webp`; - const thumbnail = item.thumbnail ? item.thumbnail : defaultThumb; - - return ( -
- {item.media_type && !showDelete && ( - - )} - {showDelete && ( -
- -
- )} - - ) => { - e.currentTarget.src = defaultThumb; - }} - alt={item.name} - className="pointer-events-none aspect-[4.5/5] w-full select-none bg-gradient-to-b from-[#CCCCCC] to-[#A0A0A0] object-cover object-center" - /> -
- {item.name || item.media_id} -
-
- ); -}; diff --git a/frontend/apps/editor3d/app/src/pages/PageEnigma/Wizard/MainPage.tsx b/frontend/apps/editor3d/app/src/pages/PageEnigma/Wizard/MainPage.tsx deleted file mode 100644 index 00d5fca3f6..0000000000 --- a/frontend/apps/editor3d/app/src/pages/PageEnigma/Wizard/MainPage.tsx +++ /dev/null @@ -1,89 +0,0 @@ -import { useSignals } from "@preact/signals-react/runtime"; -import { - currentStep, - showWizard, -} from "~/pages/PageEnigma/Wizard/signals/wizard"; -import { twMerge } from "tailwind-merge"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faArrowRight } from "@fortawesome/pro-solid-svg-icons"; -import { Fragment } from "react"; - -export const MainPage = () => { - useSignals(); - const step = currentStep.value; - - return ( -
-
How would you like to start?
-
- {(step?.options ?? []).map((option) => ( - - {option.label === "Remix" && ( - - )} - - {option.label === "Blank Scene" && ( - - )} - - ))} -
-
- ); -}; diff --git a/frontend/apps/editor3d/app/src/pages/PageEnigma/Wizard/ObjectList.tsx b/frontend/apps/editor3d/app/src/pages/PageEnigma/Wizard/ObjectList.tsx deleted file mode 100644 index cd65f6087f..0000000000 --- a/frontend/apps/editor3d/app/src/pages/PageEnigma/Wizard/ObjectList.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import { Clip, MediaItem } from "~/pages/PageEnigma/models"; -import { AssetType } from "~/enums"; -import { useEffect, useRef } from "react"; -import { ItemElement } from "./ItemElement"; -import Queue from "~/pages/PageEnigma/Queue/Queue"; -import { QueueNames } from "~/pages/PageEnigma/Queue"; -import { fromEngineActions } from "~/pages/PageEnigma/Queue/fromEngineActions"; -import { toEngineActions } from "~/pages/PageEnigma/Queue/toEngineActions"; -import { - objectWizardItems, - selectedObjects, - showList, -} from "~/pages/PageEnigma/Wizard/signals/wizard"; -import { useSignals } from "@preact/signals-react/runtime"; - -export const ObjectList = () => { - useSignals(); - const addingObject = useRef(null); - - useEffect(() => { - Queue.subscribe(QueueNames.FROM_ENGINE, "wizard-objects", (message) => { - switch (message.action) { - case fromEngineActions.ADD_OBJECT: - if (addingObject.current) { - const data = message.data as Clip; - selectedObjects.value = [ - ...selectedObjects.value, - { - ...addingObject.current, - version: data.version, - type: data.type.toString() as AssetType, - media_id: data.media_id, - name: data.name, - object_uuid: data.object_uuid, - }, - ]; - } - break; - case fromEngineActions.DELETE_OBJECT: - selectedObjects.value = selectedObjects.value.filter( - (object) => - object.object_uuid !== (message.data as Clip).object_uuid, - ); - break; - } - }); - }, []); - - return ( -
- {(objectWizardItems.value ?? []).map((item) => ( - - ))} -
- ); -}; diff --git a/frontend/apps/editor3d/app/src/pages/PageEnigma/Wizard/ObjectSelectionButton.tsx b/frontend/apps/editor3d/app/src/pages/PageEnigma/Wizard/ObjectSelectionButton.tsx deleted file mode 100644 index 25326080dd..0000000000 --- a/frontend/apps/editor3d/app/src/pages/PageEnigma/Wizard/ObjectSelectionButton.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import { faChevronRight } from "@fortawesome/pro-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { H4, LoadingSpinner } from "~/components"; - -interface ObjectSelectionButtonProps { - onClick: () => void; - label: string; - imageSrc: string; - busy: boolean; - disabled?: boolean; -} - -export function ObjectSelectionButton({ - onClick, - label, - imageSrc, - busy, - disabled, -}: ObjectSelectionButtonProps) { - return ( -
- -
- ); -} diff --git a/frontend/apps/editor3d/app/src/pages/PageEnigma/Wizard/Objects.tsx b/frontend/apps/editor3d/app/src/pages/PageEnigma/Wizard/Objects.tsx deleted file mode 100644 index 413a2a95e8..0000000000 --- a/frontend/apps/editor3d/app/src/pages/PageEnigma/Wizard/Objects.tsx +++ /dev/null @@ -1,106 +0,0 @@ -import { WizardItem, WizardType } from "~/pages/PageEnigma/Wizard/Wizard"; -import { ObjectSelectionButton } from "~/pages/PageEnigma/Wizard/ObjectSelectionButton"; -import { BucketConfig } from "~/api/BucketConfig"; -import { MediaInfo } from "~/pages/PageEnigma/models"; -import { AssetType, FilterEngineCategories, ToastTypes } from "~/enums"; -import { useCallback, useContext, useEffect } from "react"; -import { MediaFilesApi } from "~/Classes/ApiManager"; -import { addToast } from "~/signals"; -import { ItemElement } from "./ItemElement"; -import { EngineContext } from "~/pages/PageEnigma/contexts/EngineContext"; -import { - currentStep, - objectWizardItems, - selectedObjects, -} from "~/pages/PageEnigma/Wizard/signals/wizard"; -import { useSignals } from "@preact/signals-react/runtime"; - -export const Objects = () => { - useSignals(); - const item = currentStep.value as WizardItem; - const editorEngine = useContext(EngineContext); - - const responseMapping = (data: MediaInfo[]) => { - return data - .filter( - (item) => - [ - "Sci-fi City", - "Cherry Blossom Petals", - "Barbie Dreamland Test", - "Space Station", - "graveyard_2", - "sand tile", - "Tiny Island", - "dock", - ].indexOf(item.maybe_title ?? "") === -1, - ) - .map((item) => { - const bucketConfig = new BucketConfig(); - const itemThumb = bucketConfig.getCdnUrl( - item.cover_image.maybe_cover_image_public_bucket_path ?? "", - 600, - 100, - ); - return { - object_uuid: item.token, - colorIndex: item.cover_image.default_cover.color_index, - imageIndex: item.cover_image.default_cover.image_index, - media_id: item.token, - name: item.maybe_title ?? "Unknown", - type: AssetType.OBJECT, - media_type: item.media_type, - version: 1, - ...(item.cover_image.maybe_cover_image_public_bucket_path - ? { - thumbnail: itemThumb, - } - : {}), - }; - }); - }; - - const fetchFeaturedObjects = useCallback(async () => { - const mediaFilesApi = new MediaFilesApi(); - const response = await mediaFilesApi.ListFeaturedMediaFiles({ - filter_engine_categories: [FilterEngineCategories.OBJECT], - }); - if (response.success && response.data) { - objectWizardItems.value = responseMapping(response.data); - return; - } - addToast( - ToastTypes.ERROR, - response.errorMessage || "Unknown Error in Fetching Featured Objects", - ); - }, []); - - useEffect(() => { - fetchFeaturedObjects(); - }, [fetchFeaturedObjects]); - - return ( -
-
{item.label}
-
- {selectedObjects.value.map((item) => ( - - ))} -
- {}} - label="Selected Object" - busy={!objectWizardItems.value} - imageSrc={objectWizardItems.value?.[0]?.thumbnail ?? ""} - /> -
- ); -}; diff --git a/frontend/apps/editor3d/app/src/pages/PageEnigma/Wizard/Question.tsx b/frontend/apps/editor3d/app/src/pages/PageEnigma/Wizard/Question.tsx deleted file mode 100644 index 48e497fbf3..0000000000 --- a/frontend/apps/editor3d/app/src/pages/PageEnigma/Wizard/Question.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { WizardItem } from "~/pages/PageEnigma/Wizard/Wizard"; -import { useSignals } from "@preact/signals-react/runtime"; -import { Select } from "~/components"; -import { - currentStep, - showWizard, -} from "~/pages/PageEnigma/Wizard/signals/wizard"; - -export const Question = () => { - useSignals(); - const item = currentStep.value as WizardItem; - - return ( - (textInput.value = event.target.value)} - /> - - ); -}; diff --git a/frontend/apps/editor3d/app/src/pages/PageEnigma/Wizard/Wizard.tsx b/frontend/apps/editor3d/app/src/pages/PageEnigma/Wizard/Wizard.tsx deleted file mode 100644 index d7abc502a1..0000000000 --- a/frontend/apps/editor3d/app/src/pages/PageEnigma/Wizard/Wizard.tsx +++ /dev/null @@ -1,177 +0,0 @@ -import { SelectOption, TransitionDialogue } from "~/components"; -import { - currentStep, - selectedRemixCard, - showWizard, - textInput, -} from "~/pages/PageEnigma/Wizard/signals/wizard"; -import { useSignalEffect, useSignals } from "@preact/signals-react/runtime"; -import { WizardStep } from "~/pages/PageEnigma/Wizard/WizardStep"; -import { resetSceneGenerationMetadata } from "~/pages/PageEnigma/signals"; -import { CameraAspectRatio } from "~/pages/PageEnigma/enums"; -import { useContext, useMemo } from "react"; -import { EngineContext } from "~/pages/PageEnigma/contexts/EngineContext"; -import { faChevronLeft } from "@fortawesome/pro-solid-svg-icons"; - -export enum WizardType { - BACKGROUND = "background", - CHARACTER = "character", - OBJECT = "object", - QUESTION = "question", - MAIN_PAGE = "main-page", - REMIX = "remix", - TEXT_FIELD = "text_field", - NONE = "none", -} - -export interface WizardItem { - label: string; - type: WizardType; - options?: SelectOption[]; - showNext?: () => boolean; - nextTitle?: string; - showPrior?: () => boolean; - priorTitle?: string; - onPrior?: string; - nextPage?: string; - onNext?: (() => void) | string; - width?: number; -} - -export const Wizard = () => { - useSignals(); - const editorEngine = useContext(EngineContext); - - const wizardItems: Record = useMemo( - () => ({ - initial: { - label: "Welcome to Storyteller Studio", - type: WizardType.MAIN_PAGE, - showPrior: () => false, - showNext: () => false, - options: [ - { - label: "Remix", - value: "remix", - }, - { - label: "Blank Scene", - value: "end", - }, - ], - width: 593, - }, - new_scene: { - label: "Create a New Scene", - type: WizardType.MAIN_PAGE, - showPrior: () => false, - showNext: () => false, - options: [ - { - label: "Remix", - value: "remix", - }, - { - label: "Blank Scene", - value: "new_scene_title", - }, - ], - width: 593, - }, - new_scene_title: { - label: "Add New Scene Title", - type: WizardType.TEXT_FIELD, - showNext: () => !!textInput.value, - nextTitle: "Add New Scene", - onNext: () => { - resetSceneGenerationMetadata(); - editorEngine?.changeRenderCameraAspectRatio( - CameraAspectRatio.HORIZONTAL_3_2, - ); - editorEngine?.newScene(textInput.value); - showWizard.value = "end"; - }, - priorTitle: "Cancel", - onPrior: "new_scene", - }, - remix: { - label: "Choose a Scene to Remix", - type: WizardType.REMIX, - nextTitle: "Remix Scene", - showNext: () => !!selectedRemixCard.value, - priorTitle: "Cancel", - onPrior: "initial", - onNext: () => { - if (editorEngine && selectedRemixCard.value) { - editorEngine.loadScene(selectedRemixCard.value?.token); - showWizard.value = "end"; - } - }, - onBack: () => { - showWizard.value = "initial"; - }, - width: 1152, - }, - wizard: { - label: "What kind of scene do you want?", - type: WizardType.QUESTION, - showNext: () => false, - options: [ - { - label: "Dance", - value: "dance", - }, - { - label: "Monologue", - value: "mono", - }, - ], - }, - dance: { - label: "Pick a background", - type: WizardType.BACKGROUND, - nextPage: "danceCharacter", - }, - danceCharacter: { - label: "Pick a character", - type: WizardType.CHARACTER, - nextPage: "end", - }, - mono: { - label: "Pick a character", - type: WizardType.CHARACTER, - nextPage: "end", - }, - }), - [editorEngine], - ); - - useSignalEffect(() => { - if (showWizard.value === "end") { - return; - } - currentStep.value = wizardItems[showWizard.value]; - }); - - if (!currentStep.value) { - return null; - } - - return ( - (showWizard.value = "end")} - title={currentStep.value.label} - width={currentStep.value.width ?? 672} - titleIcon={showWizard.value === "remix" ? faChevronLeft : undefined} - titleIconClassName="text-white/60 hover:text-white/80 transition-colors duration-150" - onTitleIconClick={ - showWizard.value === "remix" - ? () => (showWizard.value = "initial") - : undefined - } - > - - - ); -}; diff --git a/frontend/apps/editor3d/app/src/pages/PageEnigma/Wizard/WizardStep.tsx b/frontend/apps/editor3d/app/src/pages/PageEnigma/Wizard/WizardStep.tsx deleted file mode 100644 index 4ad5d02b10..0000000000 --- a/frontend/apps/editor3d/app/src/pages/PageEnigma/Wizard/WizardStep.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import { Background } from "./Background"; -import { Button } from "@storyteller/ui-button"; -import { Objects } from "./Objects"; -import { Characters } from "./Characters"; -import { - currentStep, - showWizard, -} from "~/pages/PageEnigma/Wizard/signals/wizard"; -import { useSignals } from "@preact/signals-react/runtime"; -import { Question } from "~/pages/PageEnigma/Wizard/Question"; -import { WizardItem, WizardType } from "~/pages/PageEnigma/Wizard/Wizard"; -import { MainPage } from "~/pages/PageEnigma/Wizard/MainPage"; -import { Remix } from "~/pages/PageEnigma/Wizard/Remix"; -import { TextField } from "~/pages/PageEnigma/Wizard/TextField"; - -export const WizardStep = () => { - useSignals(); - const step = currentStep.value as WizardItem; - if (!step.nextTitle) { - step.nextTitle = "Next"; - } - if (!step.priorTitle) { - step.priorTitle = "Prior"; - } - - const wizardComponents: Record JSX.Element) | null> = { - [WizardType.BACKGROUND]: Background, - [WizardType.CHARACTER]: Characters, - [WizardType.OBJECT]: Objects, - [WizardType.QUESTION]: Question, - [WizardType.MAIN_PAGE]: MainPage, - [WizardType.REMIX]: Remix, - [WizardType.TEXT_FIELD]: TextField, - [WizardType.NONE]: null, - }; - - const Component = wizardComponents[step.type]; - if (Component === null) { - return null; - } - - return ( -
- -
- {(!step.showPrior || step.showPrior()) && ( - - )} - {(!step.showNext || step.showNext()) && ( - - )} -
-
- ); -}; diff --git a/frontend/apps/editor3d/app/src/pages/PageEnigma/Wizard/signals/wizard.ts b/frontend/apps/editor3d/app/src/pages/PageEnigma/Wizard/signals/wizard.ts deleted file mode 100644 index c76e11c441..0000000000 --- a/frontend/apps/editor3d/app/src/pages/PageEnigma/Wizard/signals/wizard.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { signal } from "@preact/signals-core"; -import { MediaItem } from "~/pages/PageEnigma/models"; -import { WizardItem } from "~/pages/PageEnigma/Wizard/Wizard"; - -export const showWizard = signal(""); -export const currentStep = signal(null); -export const textInput = signal(""); - -export const selectedAudios = signal([]); -export const selectedBackground = signal(null); -export const selectedCharacters = signal([]); -export const selectedObjects = signal([]); - -export const audioWizardItems = signal(null); -export const backgroundWizardItems = signal(null); -export const characterWizardItems = signal(null); -export const objectWizardItems = signal(null); - -export const selectedRemixCard = signal<{ - text: string; - defaultVideo: string; - hoverVideo: string; - token: string; -} | null>(null);