Merge branch 'test' into feature/audio-sidepanel-v2

app/components/TransitionDialogue.tsx

@@ -2,17 +2,21 @@ import { useEffect } from "react";
 import { Dialog, Transition } from "@headlessui/react";
 import { Fragment, ReactNode } from "react";
 import { twMerge } from "tailwind-merge";
-import { disableHotkeyInput, enableHotkeyInput, DomLevels } from "~/pages/PageEnigma/store";
+import {
+  disableHotkeyInput,
+  enableHotkeyInput,
+  DomLevels,
+} from "~/pages/PageEnigma/store";
 
-const DialogBackdrop = ()=>{
-  useEffect(()=>{
+const DialogBackdrop = () => {
+  useEffect(() => {
     disableHotkeyInput(DomLevels.DIALOGUE);
-    return()=>{
+    return () => {
       enableHotkeyInput(DomLevels.DIALOGUE);
-    }
+    };
   }, []);
 
-  return(
+  return (
     <Transition.Child
       as={Fragment}
       enter="ease-out duration-300"
@@ -20,57 +24,57 @@ const DialogBackdrop = ()=>{
       enterTo="opacity-100"
       leave="ease-in duration-200"
       leaveFrom="opacity-100"
-      leaveTo="opacity-0"
-    >
+      leaveTo="opacity-0">
       <div className="fixed inset-0 bg-black/60" />
     </Transition.Child>
   );
 };
 
 export const TransitionDialogue = ({
-  isOpen, title, onClose, className, children,
-}:{
+  isOpen,
+  title,
+  onClose,
+  className,
+  children,
+}: {
   isOpen: boolean;
   title?: ReactNode;
-  onClose:()=>void;
+  onClose: () => void;
   className?: string;
   children: ReactNode;
-  
-})=>{
-  return(
+}) => {
+  return (
     <Transition appear show={isOpen} as={Fragment}>
-        <Dialog
-          as="div"
-          className="relative z-50 "
-          onClose={onClose}
-        >
-          <DialogBackdrop />
-          <div className="fixed inset-0 overflow-y-auto">
-            <div className="flex min-h-full items-center justify-center p-4 text-center">
-              <Transition.Child
-                as={Fragment}
-                enter="ease-out duration-300"
-                enterFrom="opacity-0 scale-95"
-                enterTo="opacity-100 scale-100"
-                leave="ease-in duration-200"
-                leaveFrom="opacity-100 scale-100"
-                leaveTo="opacity-0 scale-95"
-              >
-                <Dialog.Panel className={twMerge("w-full max-w-lg transform rounded-xl border border-ui-panel-border bg-ui-panel p-5 text-left align-middle shadow-xl transition-all", className)}>
-                  {title && (
-                    <Dialog.Title
-                      as="h4"
-                      className="mb-4 text-xl font-bold text-white"
-                    >
-                      {title}
-                    </Dialog.Title>
-                  )}
-                  {children}
-                </Dialog.Panel>
-              </Transition.Child>
-            </div>
+      <Dialog as="div" className="relative z-50 " onClose={onClose}>
+        <DialogBackdrop />
+        <div className="fixed inset-0 overflow-y-auto">
+          <div className="flex min-h-full items-center justify-center p-4 text-center">
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 scale-95"
+              enterTo="opacity-100 scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 scale-100"
+              leaveTo="opacity-0 scale-95">
+              <Dialog.Panel
+                className={twMerge(
+                  "w-full max-w-lg transform rounded-xl border border-ui-panel-border bg-ui-panel p-5 text-left align-middle shadow-xl transition-all",
+                  className,
+                )}>
+                {title && (
+                  <Dialog.Title
+                    as="h4"
+                    className="mb-4 text-xl font-bold text-white">
+                    {title}
+                  </Dialog.Title>
+                )}
+                {children}
+              </Dialog.Panel>
+            </Transition.Child>
           </div>
-        </Dialog>
-      </Transition>
+        </div>
+      </Dialog>
+    </Transition>
   );
-};
+};

app/modules/ButtonDialogue/ButtonDialogue.tsx

@@ -8,11 +8,12 @@ interface ButtonDialoguePropsI {
   buttonProps?: UnionedButtonProps;
   confirmButtonProps?: UnionedButtonProps;
   closeButtonProps?: UnionedButtonProps;
-  dialogProps?:{
+  dialogProps?: {
     className?: string;
   };
   title?: string;
   children: React.ReactNode;
+  showClose?: boolean;
 }
 
 export const ButtonDialogue = ({
@@ -22,6 +23,7 @@ export const ButtonDialogue = ({
   closeButtonProps: unionedCloseButtonProps,
   title,
   children,
+  showClose = true,
 }: ButtonDialoguePropsI) => {
   const [isOpen, setIsOpen] = useState(false);
 
@@ -43,19 +45,20 @@ export const ButtonDialogue = ({
         title={title}
         isOpen={isOpen}
         onClose={closeModal}
-        className={dialogProps.className}
-      >
-        <div className="mt-2">{children}</div>
+        className={dialogProps.className}>
+        <div className="mt-2 h-full">{children}</div>
 
         <div className="mt-6 flex justify-end gap-2">
-          <Button
-            type="button"
-            onClick={closeModal}
-            {...closeButtonProps}
-            variant="secondary"
-          >
-            {closeButtonLabel}
-          </Button>
+          {showClose && (
+            <Button
+              type="button"
+              onClick={closeModal}
+              {...closeButtonProps}
+              variant="secondary">
+              {closeButtonLabel}
+            </Button>
+          )}
+
           {confirmButtonProps && (
             <Button
               type="button"
@@ -65,15 +68,12 @@ export const ButtonDialogue = ({
                   confirmButtonProps.onClick(e);
                 }
                 closeModal();
-              }}
-            >
-              {confirmButtonProps.label
-                ? confirmButtonProps.label
-                : "Confirm"}
+              }}>
+              {confirmButtonProps.label ? confirmButtonProps.label : "Confirm"}
             </Button>
           )}
         </div>
-        </TransitionDialogue>
+      </TransitionDialogue>
     </>
   );
 };

app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx

@@ -6,6 +6,7 @@ import { ToasterContext } from "~/contexts/ToasterContext";
 // import { APPUI_ACTION_TYPES } from "app/reducers";
 
 import { TestFeaturesButtons } from "./TestFeaturesButtons";
+import { Help } from "./Help";
 
 export const ControlsTopButtons = () => {
   const editorEngine = useContext(EngineContext);
@@ -49,8 +50,7 @@ export const ControlsTopButtons = () => {
             label: "Load",
             disabled: sceneToken === "",
             onClick: handleButtonLoadScene,
-          }}
-        >
+          }}>
           <Input
             label="Please provide the Token of the scene you wished to load:"
             onChange={(e) => {
@@ -69,8 +69,7 @@ export const ControlsTopButtons = () => {
             label: "Save",
             disabled: sceneName === "",
             onClick: handleButtonSave,
-          }}
-        >
+          }}>
           <Input
             label="Please Enter a name for your scene"
             onChange={(e) => {
@@ -89,8 +88,7 @@ export const ControlsTopButtons = () => {
             disabled: mediaToken === "",
             onClick: handleMediaToken,
           }}
-          title="Add Scene Object via Media Token"
-        >
+          title="Add Scene Object via Media Token">
           <Input
             label="Please Enter a Media Token"
             onChange={(e) => {
@@ -104,15 +102,14 @@ export const ControlsTopButtons = () => {
             variant: "secondary",
             label: "Help",
           }}
-          title="Help"
-        >
-          <p>Do you need help?</p>
-          <p>Ask Michael about this project</p>
-          <p>Ask Miles about ThreeJS</p>
-          <p>Ask Wil about React</p>
+          dialogProps={{
+            className: "max-w-6xl w-auto",
+          }}
+          title="Help">
+          <Help />
         </ButtonDialogue>
       </div>
-      <TestFeaturesButtons debug={false}/>
+      <TestFeaturesButtons debug={false} />
     </div>
   );
 };

app/pages/PageEnigma/comps/ControlsTopButtons/Help/Help.tsx

@@ -0,0 +1,144 @@
+import { Label } from "~/components";
+
+const ShortcutsGroup = (props: {
+  label: string;
+  children?: React.ReactNode;
+}) => (
+  <div className="flex flex-col gap-1">
+    <Label className="text-md font-semibold" {...props}>
+      {props.label}
+    </Label>
+    <div className="relative flex flex-col gap-2.5">
+      {props.children}
+      <div className="absolute top-0 h-full w-0.5 bg-white/15" />
+    </div>
+  </div>
+);
+
+const Shortcut = (props: { label: string; children: React.ReactNode }) => (
+  <div className="flex items-center gap-2 ps-4">
+    <span className="text-md w-[280px] font-medium opacity-80">
+      {props.label}
+    </span>
+    {props.children}
+  </div>
+);
+
+const Key = (props: { button: string }) => (
+  <div className="flex h-7 w-auto min-w-7 items-center justify-center rounded-md border-b-2 border-[#9E9EA6] bg-white px-2 pt-1 text-center text-sm font-bold text-ui-background">
+    {props.button}
+  </div>
+);
+
+const KeyGroup = (props: { children: React.ReactNode }) => (
+  <div className="flex gap-1">{props.children}</div>
+);
+
+const Mouse = (props: {
+  button: "left" | "middle" | "right";
+  label: string;
+}) => (
+  <div className="flex items-center gap-2.5">
+    <img
+      alt={`${props.button} mouse`}
+      src={`/resources/icons/mouse_${props.button === "left" ? "lmb" : props.button === "middle" ? "mmb" : "rmb"}.png`}
+      className="h-7 w-auto object-contain"
+    />
+    <span className="text-sm font-normal opacity-60">{props.label}</span>
+  </div>
+);
+
+const Plus = () => <div className="text-xl font-medium">+</div>;
+
+export const Help = () => {
+  return (
+    <div className="mt-8 grid select-none grid-cols-2 gap-12 ps-4">
+      <div className="flex flex-col gap-8">
+        <ShortcutsGroup label="Navigation">
+          <Shortcut label="Pan View">
+            <Mouse button="right" label="(Drag)" />
+          </Shortcut>
+          <Shortcut label="Rotate View">
+            <Mouse button="middle" label="(Drag)" />
+          </Shortcut>
+          <Shortcut label="Zoom">
+            <Mouse button="middle" label="(Scroll)" />
+          </Shortcut>
+          {/* <Shortcut label="Free Fly">
+            <KeyGroup>
+              <Key button="W" />
+              <Key button="A" />
+              <Key button="S" />
+              <Key button="D" />
+              <Key button="Q" />
+              <Key button="E" />
+            </KeyGroup>
+          </Shortcut> */}
+        </ShortcutsGroup>
+
+        <ShortcutsGroup label="Interaction">
+          <Shortcut label="Select Object">
+            <Mouse button="left" label="(Click)" />
+          </Shortcut>
+          {/* <Shortcut label="Clear Selection">
+            <Key button="Esc" />
+          </Shortcut> */}
+          {/* <Shortcut label="Focus Selection">
+            <Key button="F" />
+          </Shortcut> */}
+          <Shortcut label="Delete Selection">
+            <Key button="Del" />
+          </Shortcut>
+        </ShortcutsGroup>
+
+        <ShortcutsGroup label="Side Panel">
+          <Shortcut label="Add Character">
+            <Mouse button="left" label="(Drag onto scene)" />
+          </Shortcut>
+          <Shortcut label="Add Animation">
+            <Mouse button="left" label="(Drag onto timeline)" />
+          </Shortcut>
+          <Shortcut label="Add Object">
+            <Mouse button="left" label="(Drag onto scene)" />
+          </Shortcut>
+        </ShortcutsGroup>
+      </div>
+
+      <div className="flex flex-col gap-8">
+        <ShortcutsGroup label="Timeline">
+          <Shortcut label="Select Clip">
+            <Mouse button="left" label="(Click)" />
+          </Shortcut>
+          <Shortcut label="Move Clip">
+            <Mouse button="left" label="(Drag)" />
+          </Shortcut>
+          <Shortcut label="Delete Selection">
+            <Key button="Del" />
+          </Shortcut>
+          <Shortcut label="Scroll">
+            <Mouse button="middle" label="(Scroll)" />
+          </Shortcut>
+          <Shortcut label="Side Scroll">
+            <Key button="Shift" />
+            <Plus />
+            <Mouse button="middle" label="(Scroll)" />
+          </Shortcut>
+          {/* <Shortcut label="Zoom">
+            <Key button="Ctrl/Cmd" />
+            <Plus />
+            <Mouse button="middle" label="(Scroll)" />
+          </Shortcut> */}
+          <Shortcut label="Add Keyframe to Selected Object">
+            <Key button="K" />
+          </Shortcut>
+          <Shortcut label="Select Keyframe">
+            <Mouse button="left" label="(Click)" />
+          </Shortcut>
+          <Shortcut label="Delete Selected Keyframe">
+            <Key button="Del" />
+          </Shortcut>
+        </ShortcutsGroup>
+      </div>
+    </div>
+  );
+};

app/pages/PageEnigma/comps/ControlsTopButtons/Help/index.tsx

@@ -0,0 +1 @@
+export { Help } from "./Help";