From de00cdd76edc29031468f044da90edb36ed0c7bd Mon Sep 17 00:00:00 2001
From: wil <wil@storyteller.ai>
Date: Fri, 22 Mar 2024 23:10:55 -0400
Subject: [PATCH] make space for the control buttons

---
 app/pages/PageEnigma/PageEnigma.tsx             | 17 ++++++++++-------
 .../PageEnigma/comps/Controls3D/Controls3D.tsx  | 10 ++++++++++
 app/pages/PageEnigma/comps/Controls3D/index.tsx |  1 +
 .../comps/ControlsVideo/ControlsVideo.tsx       |  6 ++++++
 .../PageEnigma/comps/ControlsVideo/index.tsx    |  1 +
 .../PageEnigma/comps/Timeline/Timeline.tsx      | 10 ++++++++++
 app/pages/PageEnigma/comps/Timeline/index.tsx   |  1 +
 7 files changed, 39 insertions(+), 7 deletions(-)
 create mode 100644 app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx
 create mode 100644 app/pages/PageEnigma/comps/Controls3D/index.tsx
 create mode 100644 app/pages/PageEnigma/comps/ControlsVideo/ControlsVideo.tsx
 create mode 100644 app/pages/PageEnigma/comps/ControlsVideo/index.tsx
 create mode 100644 app/pages/PageEnigma/comps/Timeline/Timeline.tsx
 create mode 100644 app/pages/PageEnigma/comps/Timeline/index.tsx

diff --git a/app/pages/PageEnigma/PageEnigma.tsx b/app/pages/PageEnigma/PageEnigma.tsx
index 0555eaf6eb..96f71054dc 100644
--- a/app/pages/PageEnigma/PageEnigma.tsx
+++ b/app/pages/PageEnigma/PageEnigma.tsx
@@ -10,12 +10,16 @@ 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 { 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';
 
@@ -96,6 +100,8 @@ export const PageEnigma = () => {
             <p>Ask Miles about ThreeJS</p>
             <p>Ask Wil about React</p>
           </ButtonDialogue>
+          <Controls3D/>
+          <ControlsVideo/>
         </div>
       </div>
       <SidePanel>
@@ -103,10 +109,7 @@ export const PageEnigma = () => {
         <Button onClick={handleButtonRender}>Render</Button>
         <Button onClick={handleButtonPlay}>Play</Button>
       </SidePanel>
-      <LowerPanel>
-        <div className='h-10 w-full border-b border-ui-panel-border'></div>
-        <input style={{ display: 'none' }} type="file" id="load-upload" name="load-upload"></input>
-      </LowerPanel>
+      <Timeline />
     </div>
   );
 }
\ 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(
+    <div 
+      className="fixed left-1/2 -translate-x-1/2 bg-ui-panel border-b border-x border-ui-panel-border rounded-b-md p-2 text-white"
+      style={{top: "72px"}}
+    >
+      Controls for the 3D scene
+      </div>
+  );
+}
\ 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(
+    <div className="fixed top-3/4 left-1/2 -translate-x-1/2 -mt-10 bg-ui-panel border-t border-x border-ui-panel-border rounded-t-md p-2 text-white">Video Controls</div>
+  );
+};
\ 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(
+    <LowerPanel>
+      <div className='h-10 w-full border-b border-ui-panel-border'></div>
+      <input style={{ display: 'none' }} type="file" id="load-upload" name="load-upload"></input>
+    </LowerPanel>
+  )
+}
\ 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