diff --git a/app/pages/PageEnigma/PageEnigmaComponent.tsx b/app/pages/PageEnigma/PageEnigmaComponent.tsx index a90c5515c1..9789be5f42 100644 --- a/app/pages/PageEnigma/PageEnigmaComponent.tsx +++ b/app/pages/PageEnigma/PageEnigmaComponent.tsx @@ -2,7 +2,7 @@ import { useCallback, useEffect, useRef, useReducer } from "react"; import { faSparkles } from "@fortawesome/pro-solid-svg-icons"; -import { Button } from "~/components"; +import { Button, LoadingDotsBricks } from "~/components"; import { TopBarHelmet } from "~/modules/TopBarHelmet/TopBarHelmet"; import { SidePanel } from "~/modules/SidePanel"; import { Controls3D } from "./comps/Controls3D"; @@ -19,16 +19,14 @@ import { VIEW_MODES } from "./reducer/types"; import { ViewSideBySide } from "./comps/ViewSideBySide"; export const PageEnigmaComponent = () => { - const [pageState, dispatchPageState] = useReducer(reducer, initialState); + const [appUiState, dispatchAppUiState] = useReducer(reducer, initialState); const canvasRef = useRef(null); - - // const [timelineHeight, setTimelineHeight] = useState(260); const timelineRef = useRef(null); const updateTimelineHeight = useCallback(() => { if (timelineRef.current) { - dispatchPageState({ + dispatchAppUiState({ type: ACTION_TYPES.ON_TIMELINE_RESIZE, payload: { timelineHeight: timelineRef.current.offsetHeight @@ -59,17 +57,17 @@ export const PageEnigmaComponent = () => { - +
{/* Engine section/side panel */}
-
+
{
{ - pageState.viewMode === VIEW_MODES.SIDE_BY_SIDE && + appUiState.viewMode === VIEW_MODES.SIDE_BY_SIDE && }
@@ -104,7 +102,7 @@ export const PageEnigmaComponent = () => {
{/* Timeline */} - +
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/TabStyling.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/TabStylization.tsx similarity index 72% rename from app/pages/PageEnigma/comps/SidePanelTabs/TabStyling.tsx rename to app/pages/PageEnigma/comps/SidePanelTabs/TabStylization.tsx index b114bb545f..a356416e55 100644 --- a/app/pages/PageEnigma/comps/SidePanelTabs/TabStyling.tsx +++ b/app/pages/PageEnigma/comps/SidePanelTabs/TabStylization.tsx @@ -11,57 +11,61 @@ import { AppUiContext } from '../../contexts/AppUiContext'; import { ACTION_TYPES } from '../../reducer'; import { VIEW_MODES } from '../../reducer/types'; -export const TabStyling = ()=>{ - const [pageState, dispatchPageState] = useContext(AppUiContext); +export const TabStylization = ()=>{ + const [appUiState, dispatchAppUiState] = useContext(AppUiContext); const [ selection, setSelection ] = useState("Anime"); - const handlePickingStyle = (picked:string)=>{ + const handlePickingStylizer = (picked:string)=>{ console.log(`Picked style: ${picked}`); setSelection(picked); } const handleChangeViewMode = ()=>{ - if(dispatchPageState!==null) - dispatchPageState({ + if(dispatchAppUiState!==null){ + dispatchAppUiState({ type: ACTION_TYPES.ON_CHANGE_VIEW_MODE, payload: { - viewMode: pageState?.viewMode === VIEW_MODES.SIDE_BY_SIDE + viewMode: appUiState?.viewMode === VIEW_MODES.SIDE_BY_SIDE ? VIEW_MODES.EDITOR : VIEW_MODES.SIDE_BY_SIDE, } }) + } } return( <> -

Select Base Style

+

Select Base Stylizer

Enter a Prompt

-