diff --git a/app/components/index.tsx b/app/components/index.tsx new file mode 100644 index 0000000000..f6a578160b --- /dev/null +++ b/app/components/index.tsx @@ -0,0 +1,7 @@ +import { Button } from "./Button"; +import { ButtonLink } from "./ButtonLink"; + +export { + Button, + ButtonLink +}; diff --git a/app/modules/SidePanel/SidePanel.tsx b/app/modules/SidePanel/SidePanel.tsx index 4000196f52..4ae06616a4 100644 --- a/app/modules/SidePanel/SidePanel.tsx +++ b/app/modules/SidePanel/SidePanel.tsx @@ -1,18 +1,16 @@ import { Fragment, - useCallback, - useLayoutEffect, useState } from 'react' import { Dialog, Transition } from '@headlessui/react' import { - faXmark, faGears, } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Button } from '~/components/Button'; -import { TOP_BAR_HEIGHT } from '~/constants'; + +import { SidePanelInner } from './SidePanelInner'; interface SidePanelPropsI{ title?: string; @@ -23,21 +21,10 @@ export const SidePanel =({ title, children, }:SidePanelPropsI)=>{ - const [height, setHeight] = useState(0); + const [open, setOpen] = useState(false); const handleOpen = ()=> setOpen(true); - - const handleWindowResize = useCallback(()=>{ - setHeight((window.innerHeight * 3 / 4) - TOP_BAR_HEIGHT); - },[]) - - useLayoutEffect(()=>{ - handleWindowResize(); - window.addEventListener("resize", handleWindowResize); - return () => { - window.removeEventListener("resize", handleWindowResize); - }; - }, [handleWindowResize]) + const handleClose = ()=>setOpen(false); return (<> - - - -
- {children} -
- + {children} + diff --git a/app/modules/SidePanel/SidePanelInner.tsx b/app/modules/SidePanel/SidePanelInner.tsx new file mode 100644 index 0000000000..775abbe38c --- /dev/null +++ b/app/modules/SidePanel/SidePanelInner.tsx @@ -0,0 +1,75 @@ +import { + useCallback, + useLayoutEffect, + useState +} from 'react'; +import { Dialog } from '@headlessui/react' + +import { + faXmark, +} from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; + +import { TOP_BAR_HEIGHT } from '~/constants'; + +export const SidePanelInner = ({ + title, + children, + closeCallback +}:{ + title?: string; + children: React.ReactNode; + closeCallback: ()=>void; +})=>{ + const [height, setHeight] = useState(0); + const handleWindowResize = useCallback(()=>{ + if(window){ + setHeight (Math.ceil(window.innerHeight * 3 / 4) - TOP_BAR_HEIGHT); + } + return 0; + },[]) + + useLayoutEffect(()=>{ + handleWindowResize(); + window.addEventListener("resize", handleWindowResize); + return () => { + window.removeEventListener("resize", handleWindowResize); + }; + }, [handleWindowResize]); + + return( +
+
+
+ {!title && } + {title && + + {title} + + } +
+ +
+
+
+
+ {children} +
+
+ ); +} \ No newline at end of file diff --git a/app/modules/TopBarHelmet/TopBarHelmet.tsx b/app/modules/TopBarHelmet/TopBarHelmet.tsx new file mode 100644 index 0000000000..c626dd4417 --- /dev/null +++ b/app/modules/TopBarHelmet/TopBarHelmet.tsx @@ -0,0 +1,38 @@ +import { + useContext, + useEffect, + useLayoutEffect, + useState, +} from 'react'; +import { TopBarInnerContext } from "~/contexts/TopBarInner"; + + +export const TopBarHelmet = (props:{ + children: JSX.Element | null; +})=>{ + const [showChild, setShowChild] = useState(false); + // Wait until after client-side hydration to show + useEffect(() => { + setShowChild(true); + }, []); + if (!showChild) { + // You can show some kind of placeholder UI here + return null; + } + + return ; +} + +const LazyLoadTopBarInnerContent = (props:{ + children: JSX.Element | null; +})=>{ + const { setTopBarInner } = useContext(TopBarInnerContext) || {}; + + useLayoutEffect(()=>{ + if(setTopBarInner){ + setTopBarInner(props.children); + } + },[setTopBarInner]); + + return null; +} diff --git a/app/modules/TopBarHelmet/index.tsx b/app/modules/TopBarHelmet/index.tsx new file mode 100644 index 0000000000..b56a85e036 --- /dev/null +++ b/app/modules/TopBarHelmet/index.tsx @@ -0,0 +1 @@ +export { TopBarHelmet } from "./TopBarHelmet"; \ No newline at end of file diff --git a/app/pages/PageCube/PageCube.tsx b/app/pages/PageCube/PageCube.tsx index f6d231a777..d01f6a03ff 100644 --- a/app/pages/PageCube/PageCube.tsx +++ b/app/pages/PageCube/PageCube.tsx @@ -2,7 +2,6 @@ import { useCallback, useContext, useEffect, - useLayoutEffect, useRef, useState, } from 'react'; @@ -13,15 +12,13 @@ import { import { Button } from '~/components/Button'; import { ButtonLink } from '~/components/ButtonLink'; -import { TopBarInnerContext } from "~/contexts/TopBarInner"; +import { TopBarHelmet } from '~/modules/TopBarHelmet'; import { SidePanel } from '~/modules/SidePanel'; - import { SceneWithCube } from './SceneWithCube'; export const PageCube = () => { - const { setTopBarInner } = useContext(TopBarInnerContext) || {}; const mountRef = useRef(null); const sceneRef = useRef(null); @@ -63,9 +60,9 @@ export const PageCube = () => { }; }, []); - useLayoutEffect(()=>{ - if(setTopBarInner){ - const BackButton = ( + return ( +
+ { > Back to Dashboard - ); - setTopBarInner(BackButton); - } - },[setTopBarInner]); - - return ( -
+
diff --git a/app/pages/PageEnigma/PageEnigma.tsx b/app/pages/PageEnigma/PageEnigma.tsx index 20ff7457de..96f71054dc 100644 --- a/app/pages/PageEnigma/PageEnigma.tsx +++ b/app/pages/PageEnigma/PageEnigma.tsx @@ -1,10 +1,7 @@ import { useCallback, - useContext, useEffect, - useLayoutEffect, useRef, - // useState, } from 'react'; import { @@ -13,17 +10,21 @@ import { } from "@fortawesome/free-solid-svg-icons"; -import { Button } from '~/components/Button'; -import { ButtonLink } from '~/components/ButtonLink'; +import { + Button, + ButtonLink, +} from '~/components'; import { ButtonDialogue } from '~/modules/ButtonDialogue'; -import { TopBarInnerContext } from "~/contexts/TopBarInner"; +import { TopBarHelmet } from '~/modules/TopBarHelmet/TopBarHelmet'; import { SidePanel } from '~/modules/SidePanel'; -import { LowerPanel } from '~/modules/LowerPanel'; +import { Controls3D } from './comps/Controls3D'; +import { ControlsVideo } from './comps/ControlsVideo'; +import { Timeline } from './comps/Timeline'; import Editor from './js/editor'; export const PageEnigma = () => { - const { setTopBarInner } = useContext(TopBarInnerContext) || {}; + // const { setTopBarInner } = useContext(TopBarInnerContext) || {}; const canvasRef = useRef(null); const editorRef = useRef(null); @@ -50,29 +51,6 @@ export const PageEnigma = () => { } }, []); - useLayoutEffect(()=>{ - if(setTopBarInner){ - const TopBarInnerButtons = ( -
- - Back to Dashboard - - - -
- ); - setTopBarInner(TopBarInnerButtons); - } - },[setTopBarInner]); - const handleButtonSave = ()=>{ editorRef.current?.save(); } @@ -88,6 +66,23 @@ export const PageEnigma = () => { return(
+ +
+ + Back to Dashboard + + + +
+
@@ -105,6 +100,8 @@ export const PageEnigma = () => {

Ask Miles about ThreeJS

Ask Wil about React

+ +
@@ -112,10 +109,7 @@ export const PageEnigma = () => { - -
- - +
); } \ No newline at end of file diff --git a/app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx b/app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx new file mode 100644 index 0000000000..37a2a5b6c0 --- /dev/null +++ b/app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx @@ -0,0 +1,10 @@ +export const Controls3D = ()=>{ + return( +
+ Controls for the 3D scene +
+ ); +} \ No newline at end of file diff --git a/app/pages/PageEnigma/comps/Controls3D/index.tsx b/app/pages/PageEnigma/comps/Controls3D/index.tsx new file mode 100644 index 0000000000..73deaa5a35 --- /dev/null +++ b/app/pages/PageEnigma/comps/Controls3D/index.tsx @@ -0,0 +1 @@ +export { Controls3D } from './Controls3D'; \ No newline at end of file diff --git a/app/pages/PageEnigma/comps/ControlsVideo/ControlsVideo.tsx b/app/pages/PageEnigma/comps/ControlsVideo/ControlsVideo.tsx new file mode 100644 index 0000000000..a7701b1536 --- /dev/null +++ b/app/pages/PageEnigma/comps/ControlsVideo/ControlsVideo.tsx @@ -0,0 +1,6 @@ + +export const ControlsVideo = ()=>{ + return( +
Video Controls
+ ); +}; \ No newline at end of file diff --git a/app/pages/PageEnigma/comps/ControlsVideo/index.tsx b/app/pages/PageEnigma/comps/ControlsVideo/index.tsx new file mode 100644 index 0000000000..d4c0c69732 --- /dev/null +++ b/app/pages/PageEnigma/comps/ControlsVideo/index.tsx @@ -0,0 +1 @@ +export { ControlsVideo } from './ControlsVideo'; \ No newline at end of file diff --git a/app/pages/PageEnigma/comps/Timeline/Timeline.tsx b/app/pages/PageEnigma/comps/Timeline/Timeline.tsx new file mode 100644 index 0000000000..fe278ba39e --- /dev/null +++ b/app/pages/PageEnigma/comps/Timeline/Timeline.tsx @@ -0,0 +1,10 @@ +import { LowerPanel } from "~/modules/LowerPanel"; + +export const Timeline = ()=>{ + return( + +
+ + + ) +} \ No newline at end of file diff --git a/app/pages/PageEnigma/comps/Timeline/index.tsx b/app/pages/PageEnigma/comps/Timeline/index.tsx new file mode 100644 index 0000000000..2015b7541d --- /dev/null +++ b/app/pages/PageEnigma/comps/Timeline/index.tsx @@ -0,0 +1 @@ +export { Timeline } from './Timeline'; \ No newline at end of file diff --git a/app/routes/Cube.tsx b/app/routes/Cube.tsx index 909c2f0521..fcdce4c1d9 100644 --- a/app/routes/Cube.tsx +++ b/app/routes/Cube.tsx @@ -1,6 +1,7 @@ import { useState } from 'react'; import { PageCube } from "../pages/PageCube"; -import { Button } from '~/components/Button'; +import { Button } from '~/components'; + export default function Cube(){ const pausedRiddle = true; const [riddle, setRiddle] = useState(""); diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx index 4676568346..9f26515f16 100644 --- a/app/routes/_index.tsx +++ b/app/routes/_index.tsx @@ -1,9 +1,6 @@ -import { - useContext, - useLayoutEffect, -} from "react"; + import type { MetaFunction } from "@remix-run/deno"; -import { TopBarInnerContext } from "~/contexts/TopBarInner"; +import { TopBarHelmet } from "~/modules/TopBarHelmet"; import sonic from "./_assets/sonic-the-hedgehog-classic-sonic.gif"; @@ -15,14 +12,9 @@ export const meta: MetaFunction = () => { }; export default function Index() { - const { setTopBarInner } = useContext(TopBarInnerContext) || {}; - useLayoutEffect(()=>{ - if(setTopBarInner){ - setTopBarInner(null); - } - },[setTopBarInner]); return (
+ {null}