From 69f62b8f009ed2bbe5bcbb1b94b783aa369de88d Mon Sep 17 00:00:00 2001 From: BFlat Date: Sun, 24 Mar 2024 11:23:17 +0700 Subject: [PATCH 01/13] tabs styling --- app/modules/SidePanel/SidePanel.tsx | 97 +++++++--------- app/modules/SidePanel/SidePanelInner.tsx | 54 ++++----- app/modules/Tabs/Tabs.tsx | 55 ++++----- package-lock.json | 23 +++- package.json | 1 + tailwind.config.ts | 136 ++++++++++++----------- 6 files changed, 177 insertions(+), 189 deletions(-) diff --git a/app/modules/SidePanel/SidePanel.tsx b/app/modules/SidePanel/SidePanel.tsx index 085700f34f..1bf4a0cfdf 100644 --- a/app/modules/SidePanel/SidePanel.tsx +++ b/app/modules/SidePanel/SidePanel.tsx @@ -1,67 +1,54 @@ -import { - Fragment, - useState -} from 'react' -import { Dialog, Transition } from '@headlessui/react' -import { - faGears, -} from '@fortawesome/pro-solid-svg-icons'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { Fragment, useState } from "react"; +import { Dialog, Transition } from "@headlessui/react"; +import { faGears } from "@fortawesome/pro-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { Button } from '~/components/Button'; +import { Button } from "~/components/Button"; -import { SidePanelInner } from './SidePanelInner'; +import { SidePanelInner } from "./SidePanelInner"; -interface SidePanelPropsI{ +interface SidePanelPropsI { title?: string; children: React.ReactNode; } -export const SidePanel =({ - title, - children, -}:SidePanelPropsI)=>{ - +export const SidePanel = ({ title, children }: SidePanelPropsI) => { const [open, setOpen] = useState(false); - const handleOpen = ()=> setOpen(true); - const handleClose = ()=>setOpen(false); + const handleOpen = () => setOpen(true); + const handleClose = () => setOpen(false); - return (<> - - - -
+ return ( + <> + + + +
-
-
-
- - - - {children} - - - +
+
+
+ + + + {children} + + + +
-
-
- - ); -} \ No newline at end of file +
+ + + ); +}; diff --git a/app/modules/SidePanel/SidePanelInner.tsx b/app/modules/SidePanel/SidePanelInner.tsx index 260f98f1c7..3112e81c5d 100644 --- a/app/modules/SidePanel/SidePanelInner.tsx +++ b/app/modules/SidePanel/SidePanelInner.tsx @@ -1,35 +1,29 @@ -import { - useCallback, - useLayoutEffect, - useState -} from 'react'; -import { Dialog } from '@headlessui/react' +import { useCallback, useLayoutEffect, useState } from "react"; +import { Dialog } from "@headlessui/react"; -import { - faXmark, -} from '@fortawesome/pro-solid-svg-icons'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faXmark } from "@fortawesome/pro-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { TOP_BAR_HEIGHT } from '~/constants'; +import { TOP_BAR_HEIGHT } from "~/constants"; export const SidePanelInner = ({ title, children, - closeCallback -}:{ + closeCallback, +}: { title?: string; children: React.ReactNode; - closeCallback: ()=>void; -})=>{ + closeCallback: () => void; +}) => { const [height, setHeight] = useState(0); - const handleWindowResize = useCallback(()=>{ - if(window){ - setHeight (Math.ceil(window.innerHeight * 3 / 4) - TOP_BAR_HEIGHT); + const handleWindowResize = useCallback(() => { + if (window) { + setHeight(Math.ceil((window.innerHeight * 3) / 4) - TOP_BAR_HEIGHT); } return 0; - },[]) + }, []); - useLayoutEffect(()=>{ + useLayoutEffect(() => { handleWindowResize(); window.addEventListener("resize", handleWindowResize); return () => { @@ -37,19 +31,19 @@ export const SidePanelInner = ({ }; }, [handleWindowResize]); - return( + return (
- {!title && } - {title && + {!title && } + {title && ( {title} - } + )}
-
- {children} -
+
{children}
); -} \ No newline at end of file +}; diff --git a/app/modules/Tabs/Tabs.tsx b/app/modules/Tabs/Tabs.tsx index ba5a258bf6..8954db1f37 100644 --- a/app/modules/Tabs/Tabs.tsx +++ b/app/modules/Tabs/Tabs.tsx @@ -1,55 +1,44 @@ -import { useState } from 'react' -import { Tab } from '@headlessui/react' +import { useState } from "react"; +import { Tab } from "@headlessui/react"; +import { twMerge } from "tailwind-merge"; -import { joinClassNames } from '~/helpers'; - -export type Tab = { +export type TabType = { header: string; children: JSX.Element; -} +}; -export const Tabs = ({ - tabs: tabProps -}:{ - tabs:Tab[] -}) =>{ - const [tabs, setTabs] = useState(tabProps); +export const Tabs = ({ tabs: tabProps }: { tabs: TabType[] }) => { + const [tabs] = useState(tabProps); + + const tabHeaderClassName = (selected: boolean) => + twMerge( + "px-4 py-4 text-md font-medium leading-5 focus:outline-none transition duration-150 ease-in-out border-b-[3px] border-white/[.1]", + selected + ? "bg-ui-panel text-white border-brand-primary" + : "text-gray-400 hover:bg-ui-panel hover:text-white hover:border-white/[.2]", + ); return ( -
+
- + {tabs.map((tab, idx) => ( - joinClassNames( - 'w-full rounded-lg py-2.5 text-sm font-medium leading-5', - 'ring-white/60 ring-offset-2 ring-offset-blue-400 focus:outline-none focus:ring-2', - selected - ? 'bg-white text-blue-700 shadow' - : 'text-blue-100 hover:bg-white/[0.12] hover:text-white' - ) - } + className={({ selected }) => tabHeaderClassName(selected)} > {tab.header} ))} - + {tabs.map((tab, idx) => ( - + {tab.children} ))}
- ) -} \ No newline at end of file + ); +}; diff --git a/package-lock.json b/package-lock.json index 3b9da8ebb3..af9fdcb114 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27,6 +27,7 @@ "isbot": "^4.1.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "tailwind-merge": "^2.2.2", "three": "^0.162.0", "uuid": "^9.0.1", "webm-writer": "^1.0.0" @@ -722,10 +723,9 @@ } }, "node_modules/@babel/runtime": { - "version": "7.23.9", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.9.tgz", - "integrity": "sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==", - "dev": true, + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.1.tgz", + "integrity": "sha512-+BIznRzyqBf+2wCTxcKE3wDjfGeCoVE61KSHGpkzqrLi8qxqFwBeUFyId2cxkTmm55fzDGnm0+yCxaxygrLUnQ==", "dependencies": { "regenerator-runtime": "^0.14.0" }, @@ -10600,8 +10600,7 @@ "node_modules/regenerator-runtime": { "version": "0.14.1", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz", - "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==", - "dev": true + "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==" }, "node_modules/regexp.prototype.flags": { "version": "1.5.2", @@ -11720,6 +11719,18 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/tailwind-merge": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.2.2.tgz", + "integrity": "sha512-tWANXsnmJzgw6mQ07nE3aCDkCK4QdT3ThPMCzawoYA2Pws7vSTCvz3Vrjg61jVUGfFZPJzxEP+NimbcW+EdaDw==", + "dependencies": { + "@babel/runtime": "^7.24.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/dcastil" + } + }, "node_modules/tailwindcss": { "version": "3.4.1", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.1.tgz", diff --git a/package.json b/package.json index 471a92f1b6..a40f2b10c2 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "isbot": "^4.1.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "tailwind-merge": "^2.2.2", "three": "^0.162.0", "uuid": "^9.0.1", "webm-writer": "^1.0.0" diff --git a/tailwind.config.ts b/tailwind.config.ts index 4b8ad34260..31e8137280 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -1,5 +1,5 @@ -import type { Config } from 'tailwindcss'; -import colors from 'tailwindcss/colors'; +import type { Config } from "tailwindcss"; +import colors from "tailwindcss/colors"; export default { content: [ @@ -8,76 +8,84 @@ export default { "./app/*.{js,jsx,ts,tsx}", ], theme: { - // extend: {}, - colors:{ - transparent: 'transparent', - current: 'currentColor', + extend: { + fontFamily: { + "custom-font": ["Fira Sans", "sans-serif"], + }, + }, + colors: { + transparent: "transparent", + current: "currentColor", - 'brand-primary': { //sunglo - DEFAULT: '#e66462', //=500 - '50': '#fdf3f3', - '100': '#fce4e4', - '200': '#facfce', - '300': '#f6acab', - '400': '#ef7c7a', - '500': '#e66462', - '600': '#cf3533', - '700': '#ae2927', - '800': '#902624', - '900': '#782524', - '950': '#410f0e', + "brand-primary": { + //sunglo + DEFAULT: "#e66462", //=500 + "50": "#fdf3f3", + "100": "#fce4e4", + "200": "#facfce", + "300": "#f6acab", + "400": "#ef7c7a", + "500": "#e66462", + "600": "#cf3533", + "700": "#ae2927", + "800": "#902624", + "900": "#782524", + "950": "#410f0e", }, - 'brand-secondary': { //gunpowder - DEFAULT: '#39394c', //=950 - '50': '#f5f6f9', - '100': '#e8eaf1', - '200': '#d7dbe6', - '300': '#bbc1d5', - '400': '#9aa2c0', - '500': '#8188b0', - '600': '#6f74a1', - '700': '#636492', - '800': '#545579', - '900': '#464762', - '950': '#39394c', + "brand-secondary": { + //gunpowder + DEFAULT: "#39394c", //=950 + "50": "#f5f6f9", + "100": "#e8eaf1", + "200": "#d7dbe6", + "300": "#bbc1d5", + "400": "#9aa2c0", + "500": "#8188b0", + "600": "#6f74a1", + "700": "#636492", + "800": "#545579", + "900": "#464762", + "950": "#39394c", }, - danger: { //copper rust - DEFAULT: '#8f4951', //=700 - '50': '#fbf5f5', - '100': '#f7ecec', - '200': '#efdcdc', - '300': '#e2c0bf', - '400': '#d19b9c', - '500': '#bd7679', - '600': '#a5595f', - '700': '#8f4951', - '800': '#743d45', - '900': '#64373f', - '950': '#361b1e', + danger: { + //copper rust + DEFAULT: "#8f4951", //=700 + "50": "#fbf5f5", + "100": "#f7ecec", + "200": "#efdcdc", + "300": "#e2c0bf", + "400": "#d19b9c", + "500": "#bd7679", + "600": "#a5595f", + "700": "#8f4951", + "800": "#743d45", + "900": "#64373f", + "950": "#361b1e", }, - success:{ //apple - DEFAULT: '#40ad48', //=500 - '50': '#f2fbf2', - '100': '#e2f6e3', - '200': '#c5edc7', - '300': '#98dd9d', - '400': '#64c46b', - '500': '#40ad48', - '600': '#2f8a35', - '700': '#286d2e', - '800': '#245728', - '900': '#1f4823', - '950': '#0c270f', + success: { + //apple + DEFAULT: "#40ad48", //=500 + "50": "#f2fbf2", + "100": "#e2f6e3", + "200": "#c5edc7", + "300": "#98dd9d", + "400": "#64c46b", + "500": "#40ad48", + "600": "#2f8a35", + "700": "#286d2e", + "800": "#245728", + "900": "#1f4823", + "950": "#0c270f", }, - 'ui-background': '#1a1a27', - 'ui-panel': '#242433', - 'ui-panel-border': '#5e6097', + "ui-background": "#1a1a27", + "ui-panel": "#242433", + "ui-panel-border": "#5e6097", gray: colors.gray, - white: colors.white - } + white: colors.white, + }, }, plugins: [], -} satisfies Config \ No newline at end of file +} satisfies Config; From 94c9fbefb80c75c2402db78a175817443f132201 Mon Sep 17 00:00:00 2001 From: BFlat Date: Sun, 24 Mar 2024 12:02:50 +0700 Subject: [PATCH 02/13] font added --- app/root.tsx | 56 ++++++++++++++++++++++++++++++--------------- app/styles/base.css | 8 +++++-- 2 files changed, 43 insertions(+), 21 deletions(-) diff --git a/app/root.tsx b/app/root.tsx index be08e77812..9323954542 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react'; +import { useState } from "react"; import { LinksFunction } from "@remix-run/deno"; import { Links, @@ -13,22 +13,39 @@ import tailwindCss from "./styles/tailwind.css?url"; import baseCss from "./styles/base.css?url"; import { TopBar } from "./modules/TopBar"; -import { TopBarInnerContext } from '~/contexts/TopBarInner'; +import { TopBarInnerContext } from "~/contexts/TopBarInner"; - -export const links : LinksFunction = () => [{ - rel: "stylesheet", - href: normalizeCss, -},{ - rel: "stylesheet", - href: tailwindCss, -},{ - rel: "stylesheet", - href: baseCss, -}]; +export const links: LinksFunction = () => [ + { + rel: "stylesheet", + href: normalizeCss, + }, + { + rel: "stylesheet", + href: tailwindCss, + }, + { + rel: "stylesheet", + href: baseCss, + }, + { + rel: "preconnect", + href: "https://fonts.googleapis.com", + }, + { + rel: "preconnect", + href: "https://fonts.gstatic.com", + crossOrigin: "anonymous", + }, + { + rel: "stylesheet", + href: "https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap", + }, +]; export default function App() { - const [topBarInnerComponent, setTopBarInnerComponent] = useState(null); + const [topBarInnerComponent, setTopBarInnerComponent] = + useState(null); return ( @@ -39,12 +56,13 @@ export default function App() { - - -
+ setTopBarInner: setTopBarInnerComponent, + }} + > +
diff --git a/app/styles/base.css b/app/styles/base.css index f1e87e7614..58e00006f4 100644 --- a/app/styles/base.css +++ b/app/styles/base.css @@ -1,4 +1,8 @@ -.topbar-spacer{ +body { + font-family: "Fira Sans", sans-serif; +} + +.topbar-spacer { height: 73px; width: 100vw; -} \ No newline at end of file +} From da823a3fb87e757ecbe59a91754fa5ac320f2c64 Mon Sep 17 00:00:00 2001 From: BFlat Date: Sun, 24 Mar 2024 14:05:52 +0700 Subject: [PATCH 03/13] structure relayout --- app/modules/LowerPanel/LowerPanel.tsx | 28 +-- app/modules/SidePanel/SidePanel.tsx | 2 +- app/pages/PageEnigma/PageEnigma.tsx | 210 +++++++++++------- .../comps/Controls3D/Controls3D.tsx | 85 +++---- .../comps/ControlsVideo/ControlsVideo.tsx | 76 +++---- 5 files changed, 217 insertions(+), 184 deletions(-) diff --git a/app/modules/LowerPanel/LowerPanel.tsx b/app/modules/LowerPanel/LowerPanel.tsx index dd04237b5e..3fee99c41a 100644 --- a/app/modules/LowerPanel/LowerPanel.tsx +++ b/app/modules/LowerPanel/LowerPanel.tsx @@ -1,20 +1,20 @@ -import { useState } from 'react' +import { useState } from "react"; -interface LowerPanelPropsI{ +interface LowerPanelPropsI { children: React.ReactNode; } -export const LowerPanel =({ - children, -}:LowerPanelPropsI)=>{ - const [open, setOpen] = useState(false) - const handleOpen = ()=>{ +export const LowerPanel = ({ children }: LowerPanelPropsI) => { + const [open, setOpen] = useState(false); + const handleOpen = () => { setOpen(true); - } + }; - return (<> -
- {children} -
- ); -} \ No newline at end of file + return ( + <> +
+ {children} +
+ + ); +}; diff --git a/app/modules/SidePanel/SidePanel.tsx b/app/modules/SidePanel/SidePanel.tsx index 1bf4a0cfdf..3313b0327e 100644 --- a/app/modules/SidePanel/SidePanel.tsx +++ b/app/modules/SidePanel/SidePanel.tsx @@ -38,7 +38,7 @@ export const SidePanel = ({ title, children }: SidePanelPropsI) => { leaveFrom="translate-x-0" leaveTo="translate-x-full" > - + {children} diff --git a/app/pages/PageEnigma/PageEnigma.tsx b/app/pages/PageEnigma/PageEnigma.tsx index 53ac6bde4c..9c29022965 100644 --- a/app/pages/PageEnigma/PageEnigma.tsx +++ b/app/pages/PageEnigma/PageEnigma.tsx @@ -1,118 +1,166 @@ -import { - useCallback, - useEffect, - useRef, -} from 'react'; +import { useCallback, useEffect, useRef, useState } from "react"; import { faChevronLeft, faWandSparkles, } from "@fortawesome/pro-solid-svg-icons"; +import { Button, ButtonLink } from "~/components"; +import { ButtonDialogue } from "~/modules/ButtonDialogue"; +import { TopBarHelmet } from "~/modules/TopBarHelmet/TopBarHelmet"; +// import { SidePanel } from "~/modules/SidePanel"; +import { Tabs } from "~/modules/Tabs"; +import { Controls3D } from "./comps/Controls3D"; +import { ControlsVideo } from "./comps/ControlsVideo"; +import { Timeline } from "./comps/Timeline"; -import { - Button, - ButtonLink, -} from '~/components'; -import { ButtonDialogue } from '~/modules/ButtonDialogue'; -import { TopBarHelmet } from '~/modules/TopBarHelmet/TopBarHelmet'; -import { SidePanel } from '~/modules/SidePanel'; -import { Tabs } from '~/modules/Tabs'; -import { Controls3D } from './comps/Controls3D'; -import { ControlsVideo } from './comps/ControlsVideo'; -import { Timeline } from './comps/Timeline'; - -import Editor from './js/editor'; +import Editor from "./js/editor"; export const PageEnigma = () => { // const { setTopBarInner } = useContext(TopBarInnerContext) || {}; const canvasRef = useRef(null); const editorRef = useRef(null); + const [timelineHeight, setTimelineHeight] = useState(0); + const containerRef = useRef(null); + const timelineRef = useRef(null); const editorCallback = useCallback(() => { // handle editorCallback here - },[]); + }, []); + + useEffect(() => { + //componentDidMount - useEffect(() => { //componentDidMount - if (editorRef.current == null) { editorRef.current = new Editor(); editorRef.current.initialize(); } - }, []); - const handleButtonSave = ()=>{ + const handleButtonSave = () => { editorRef.current?.save(); - } + }; - const handleButtonCameraView = ()=> { + const handleButtonCameraView = () => { editorRef.current?.change_camera_view(); - } + }; - const handleButtonPlayBack = ()=> { + const handleButtonPlayBack = () => { editorRef.current?.start_playback(); - } + }; - return( + const updateTimelineHeight = useCallback(() => { + if (timelineRef.current) { + setTimelineHeight(timelineRef.current.offsetHeight); + } + }, []); + + useEffect(() => { + const observer = new ResizeObserver((entries) => { + for (let entry of entries) { + updateTimelineHeight(); + } + }); + + if (timelineRef.current) { + observer.observe(timelineRef.current); + } + + return () => observer.disconnect(); + }, [updateTimelineHeight]); + + return (
- - Back to Dashboard - - - -
+ + Back to Dashboard + + + +
- -
-
- - - -

Do you need help?

-

Ask Michael about this project

-

Ask Miles about ThreeJS

-

Ask Wil about React

- - - + +
+ {/* Engine section/side panel */} +
+
+ + + {/* Top controls */} +
+
+
+ + + +

Do you need help?

+

Ask Michael about this project

+

Ask Miles about ThreeJS

+

Ask Wil about React

+ +
+ + +
+
+ + {/* Bottom controls */} +
+ +
+
+ + {/* Side panel */} +
+ Animation Tab

, + }, + { + header: "Camera", + children:

Camera Tab

, + }, + { + header: "Audio", + children:

Audio Tab

, + }, + { + header: "Styling", + children:

Styling Tab

, + }, + ]} + /> +
+
+ + {/* Timeline */} +
+
- - Animation Tab

- },{ - header: 'Camera', - children:

Camera Tab

- },{ - header: 'Audio', - children:

Audio Tab

- },{ - header: 'Styling', - children:

Styling Tab

- } - ]}/> - -
); -} \ No newline at end of file +}; diff --git a/app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx b/app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx index ef99e19b2c..15d0865a06 100644 --- a/app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx +++ b/app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx @@ -1,76 +1,61 @@ - import { faArrowsRotate, faArrowsUpDownLeftRight, faPlus, faUpRightAndDownLeftFromCenter, -} from '@fortawesome/pro-solid-svg-icons'; +} from "@fortawesome/pro-solid-svg-icons"; import { fa3dCylinder, fa3dTorus, fa3dSphere, -} from '@awesome.me/kit-fde2be5eb0/icons/kit/custom'; +} from "@awesome.me/kit-fde2be5eb0/icons/kit/custom"; -import { ButtonIcon } from '~/components'; +import { ButtonIcon } from "~/components"; -export const Controls3D = ()=>{ +export const Controls3D = () => { const handlePlus = () => { - console.log('Controls 3D: Plus button clicked'); + console.log("Controls 3D: Plus button clicked"); }; const handleCylinder = () => { - console.log('Controls 3D: Cylinder button clicked'); + console.log("Controls 3D: Cylinder button clicked"); }; - const handleTorus= () => { - console.log('Controls 3D: Torus Button clicked'); + const handleTorus = () => { + console.log("Controls 3D: Torus Button clicked"); }; - const handleSphere= () => { - console.log('Controls 3D: Sphere Button clicked'); + const handleSphere = () => { + console.log("Controls 3D: Sphere Button clicked"); }; const handleMoveArrows = () => { - console.log('Controls 3D: Move Arrows clicked'); + console.log("Controls 3D: Move Arrows clicked"); }; const handleRotateArrows = () => { - console.log('Controls 3D: Rotate Arrows clicked'); + console.log("Controls 3D: Rotate Arrows clicked"); }; const handleZoomArrows = () => { - console.log('Controls 3D: Zoom Arrows clicked'); + console.log("Controls 3D: Zoom Arrows clicked"); }; - return( -
-
- - - - - - - - + return ( +
+
+
+
+ + + + + + + + +
+
); -} \ No newline at end of file +}; diff --git a/app/pages/PageEnigma/comps/ControlsVideo/ControlsVideo.tsx b/app/pages/PageEnigma/comps/ControlsVideo/ControlsVideo.tsx index e9f5b8befd..d447e772a9 100644 --- a/app/pages/PageEnigma/comps/ControlsVideo/ControlsVideo.tsx +++ b/app/pages/PageEnigma/comps/ControlsVideo/ControlsVideo.tsx @@ -4,54 +4,54 @@ import { faForwardFast, faForwardStep, faPlay, -} from '@fortawesome/pro-solid-svg-icons'; -import { ButtonIcon } from '~/components'; +} from "@fortawesome/pro-solid-svg-icons"; +import { ButtonIcon } from "~/components"; -export const ControlsVideo = ()=>{ +export const ControlsVideo = () => { const handleBackwardFast = () => { - console.log('Controls Video: Backward-Fast clicked'); + console.log("Controls Video: Backward-Fast clicked"); }; const handleBackwardStep = () => { - console.log('Controls Video: Backward-Step clicked'); + console.log("Controls Video: Backward-Step clicked"); }; - const handlePlay= () => { - console.log('Controls Video: Play clicked'); + const handlePlay = () => { + console.log("Controls Video: Play clicked"); }; const handleForwardStep = () => { - console.log('Controls Video: Forward-Step clicked'); + console.log("Controls Video: Forward-Step clicked"); }; const handleForwardFast = () => { - console.log('Controls Video: Forward-Fast clicked'); + console.log("Controls Video: Forward-Fast clicked"); }; - return( -
-
- - - - - + return ( +
+
+
+
+ + + + + +
+
); -}; \ No newline at end of file +}; From 0aa05813d6a20111148cc90e950a689bbcef8d81 Mon Sep 17 00:00:00 2001 From: BFlat Date: Sun, 24 Mar 2024 14:25:07 +0700 Subject: [PATCH 04/13] dynamic engine section height according to timeline height/resize --- app/modules/LowerPanel/LowerPanel.tsx | 2 +- app/pages/PageEnigma/PageEnigma.tsx | 4 +- .../PageEnigma/comps/Timeline/Timeline.tsx | 45 ++++++++++--------- app/root.tsx | 2 +- 4 files changed, 26 insertions(+), 27 deletions(-) diff --git a/app/modules/LowerPanel/LowerPanel.tsx b/app/modules/LowerPanel/LowerPanel.tsx index 3fee99c41a..2b0573ba72 100644 --- a/app/modules/LowerPanel/LowerPanel.tsx +++ b/app/modules/LowerPanel/LowerPanel.tsx @@ -12,7 +12,7 @@ export const LowerPanel = ({ children }: LowerPanelPropsI) => { return ( <> -
+
{children}
diff --git a/app/pages/PageEnigma/PageEnigma.tsx b/app/pages/PageEnigma/PageEnigma.tsx index 9c29022965..c93a7f29ec 100644 --- a/app/pages/PageEnigma/PageEnigma.tsx +++ b/app/pages/PageEnigma/PageEnigma.tsx @@ -22,7 +22,6 @@ export const PageEnigma = () => { const canvasRef = useRef(null); const editorRef = useRef(null); const [timelineHeight, setTimelineHeight] = useState(0); - const containerRef = useRef(null); const timelineRef = useRef(null); const editorCallback = useCallback(() => { @@ -94,7 +93,6 @@ export const PageEnigma = () => { id="video-scene" width="1280px" height="720px" - className="hidden" /> {/* Top controls */} @@ -157,7 +155,7 @@ export const PageEnigma = () => {
{/* Timeline */} -
+
diff --git a/app/pages/PageEnigma/comps/Timeline/Timeline.tsx b/app/pages/PageEnigma/comps/Timeline/Timeline.tsx index e0c1f6a20c..9738f52295 100644 --- a/app/pages/PageEnigma/comps/Timeline/Timeline.tsx +++ b/app/pages/PageEnigma/comps/Timeline/Timeline.tsx @@ -1,31 +1,32 @@ import { LowerPanel } from "~/modules/LowerPanel"; -import { - Button, -} from '~/components'; -import Editor from '../../js/editor'; +import { Button } from "~/components"; +import Editor from "../../js/editor"; export const Timeline = ({ - editorCurrent -}:{ - editorCurrent: Editor|null; -})=>{ - const handleButtonLoad = ()=>{ + editorCurrent, +}: { + editorCurrent: Editor | null; +}) => { + const handleButtonLoad = () => { document.getElementById("load-upload")?.click(); - } - const handleButtonRender = ()=>{ + }; + const handleButtonRender = () => { editorCurrent?.togglePlayback(); - } - const handleButtonPlay = ()=>{ + }; + const handleButtonPlay = () => {}; - } - - return( + return ( -
- +
+ - - + + - ) -} \ No newline at end of file + ); +}; diff --git a/app/root.tsx b/app/root.tsx index 9323954542..024b82cecc 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -55,7 +55,7 @@ export default function App() { - + Date: Sun, 24 Mar 2024 14:45:51 +0700 Subject: [PATCH 05/13] color updates --- app/components/ButtonIcon.tsx | 35 ++++++++----------- app/modules/Tabs/Tabs.tsx | 4 +-- .../comps/Controls3D/Controls3D.tsx | 5 +-- .../comps/ControlsVideo/ControlsVideo.tsx | 26 +++----------- tailwind.config.ts | 3 +- 5 files changed, 26 insertions(+), 47 deletions(-) diff --git a/app/components/ButtonIcon.tsx b/app/components/ButtonIcon.tsx index 08d271a1e9..bba32e7ce8 100644 --- a/app/components/ButtonIcon.tsx +++ b/app/components/ButtonIcon.tsx @@ -1,35 +1,28 @@ import { IconDefinition } from "@fortawesome/fontawesome-svg-core"; import { FontAwesomeIcon, - FontAwesomeIconProps + FontAwesomeIconProps, } from "@fortawesome/react-fontawesome"; - -export interface ButtonIconPropsI extends React.ButtonHTMLAttributes { - icon: IconDefinition; - iconClass?: string; - iconProps?: FontAwesomeIconProps +export interface ButtonIconPropsI + extends React.ButtonHTMLAttributes { + icon: IconDefinition; + iconClass?: string; + iconProps?: FontAwesomeIconProps; } export const ButtonIcon = ({ icon, iconClass, iconProps, - className : propsClassName, + className: propsClassName, ...rest -}:ButtonIconPropsI)=>{ - return( - ); -} \ No newline at end of file +}; diff --git a/app/modules/Tabs/Tabs.tsx b/app/modules/Tabs/Tabs.tsx index 8954db1f37..e2ab1e68b2 100644 --- a/app/modules/Tabs/Tabs.tsx +++ b/app/modules/Tabs/Tabs.tsx @@ -14,8 +14,8 @@ export const Tabs = ({ tabs: tabProps }: { tabs: TabType[] }) => { twMerge( "px-4 py-4 text-md font-medium leading-5 focus:outline-none transition duration-150 ease-in-out border-b-[3px] border-white/[.1]", selected - ? "bg-ui-panel text-white border-brand-primary" - : "text-gray-400 hover:bg-ui-panel hover:text-white hover:border-white/[.2]", + ? "text-white border-brand-primary" + : "text-gray-400 hover:text-white hover:border-white/[.3]", ); return ( diff --git a/app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx b/app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx index 15d0865a06..0d19d012b6 100644 --- a/app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx +++ b/app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx @@ -37,13 +37,14 @@ export const Controls3D = () => { return (
-
+
- + + { return (
-
+
- - + + - - + +
diff --git a/tailwind.config.ts b/tailwind.config.ts index 31e8137280..3dffe6da9b 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -81,7 +81,8 @@ export default { "ui-background": "#1a1a27", "ui-panel": "#242433", - "ui-panel-border": "#5e6097", + "ui-panel-border": "#393948", + "ui-controls": "#39394D", gray: colors.gray, white: colors.white, From c50c84344484aa1e50db4ee287f74295cb2fe86a Mon Sep 17 00:00:00 2001 From: BFlat Date: Sun, 24 Mar 2024 17:09:48 +0700 Subject: [PATCH 06/13] top and bottom buttons styling --- app/components/ButtonIcon.tsx | 35 ++++++----- app/components/ButtonIconSelect.tsx | 44 ++++++++++++++ app/components/index.tsx | 7 +-- app/contexts/ButtonSelectContext.tsx | 31 ++++++++++ app/modules/Tabs/Tabs.tsx | 2 +- app/pages/PageEnigma/PageEnigma.tsx | 2 +- .../comps/Controls3D/Controls3D.tsx | 59 +++++++++++++------ .../comps/ControlsVideo/ControlsVideo.tsx | 6 +- tailwind.config.ts | 1 + 9 files changed, 141 insertions(+), 46 deletions(-) create mode 100644 app/components/ButtonIconSelect.tsx create mode 100644 app/contexts/ButtonSelectContext.tsx diff --git a/app/components/ButtonIcon.tsx b/app/components/ButtonIcon.tsx index bba32e7ce8..fa74559bb0 100644 --- a/app/components/ButtonIcon.tsx +++ b/app/components/ButtonIcon.tsx @@ -1,28 +1,27 @@ +// ButtonIcon.tsx +import React from "react"; import { IconDefinition } from "@fortawesome/fontawesome-svg-core"; -import { - FontAwesomeIcon, - FontAwesomeIconProps, -} from "@fortawesome/react-fontawesome"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -export interface ButtonIconPropsI - extends React.ButtonHTMLAttributes { +interface ButtonIconProps { icon: IconDefinition; - iconClass?: string; - iconProps?: FontAwesomeIconProps; + fill?: boolean; + onClick: () => void; } -export const ButtonIcon = ({ +const ButtonIcon: React.FC = ({ icon, - iconClass, - iconProps, - className: propsClassName, - ...rest -}: ButtonIconPropsI) => { + onClick, + fill = false, +}) => { return ( - ); }; + +export { ButtonIcon }; diff --git a/app/components/ButtonIconSelect.tsx b/app/components/ButtonIconSelect.tsx new file mode 100644 index 0000000000..4e96ce01ff --- /dev/null +++ b/app/components/ButtonIconSelect.tsx @@ -0,0 +1,44 @@ +// ButtonIconSelect.tsx +import { useState } from "react"; +import { IconDefinition } from "@fortawesome/fontawesome-svg-core"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; + +interface Option { + value: string; + icon: IconDefinition; +} + +interface ButtonIconSelectProps { + options: Option[]; + onOptionChange?: (value: string) => void; +} + +export function ButtonIconSelect({ + options, + onOptionChange, +}: ButtonIconSelectProps) { + const [selectedOption, setSelectedOption] = useState( + options[0].value, + ); + + const handleOptionChange = (value: string) => { + setSelectedOption(value); + if (onOptionChange) { + onOptionChange(value); + } + }; + + return ( +
+ {options.map(({ value, icon }) => ( + + ))} +
+ ); +} diff --git a/app/components/index.tsx b/app/components/index.tsx index 5ddffb4ded..10671425e4 100644 --- a/app/components/index.tsx +++ b/app/components/index.tsx @@ -1,9 +1,6 @@ import { Button } from "./Button"; import { ButtonIcon } from "./ButtonIcon"; import { ButtonLink } from "./ButtonLink"; +import { ButtonIconSelect } from "./ButtonIconSelect"; -export { - Button, - ButtonIcon, - ButtonLink, -}; +export { Button, ButtonIcon, ButtonLink, ButtonIconSelect }; diff --git a/app/contexts/ButtonSelectContext.tsx b/app/contexts/ButtonSelectContext.tsx new file mode 100644 index 0000000000..649c5c6d25 --- /dev/null +++ b/app/contexts/ButtonSelectContext.tsx @@ -0,0 +1,31 @@ +import React, { createContext, useContext, useState } from "react"; + +interface ButtonSelectContextType { + selectedButton: number | null; + setSelectedButton: (index: number | null) => void; +} + +const ButtonSelectContext = createContext( + undefined, +); + +export const ButtonSelectProvider: React.FC = ({ children }) => { + const [selectedButton, setSelectedButton] = useState(null); + + return ( + + {children} + + ); +}; + +// Custom hook to use the context +export const useButtonSelect = () => { + const context = useContext(ButtonSelectContext); + if (context === undefined) { + throw new Error( + "useButtonSelect must be used within a ButtonSelectProvider", + ); + } + return context; +}; diff --git a/app/modules/Tabs/Tabs.tsx b/app/modules/Tabs/Tabs.tsx index e2ab1e68b2..321d038e04 100644 --- a/app/modules/Tabs/Tabs.tsx +++ b/app/modules/Tabs/Tabs.tsx @@ -15,7 +15,7 @@ export const Tabs = ({ tabs: tabProps }: { tabs: TabType[] }) => { "px-4 py-4 text-md font-medium leading-5 focus:outline-none transition duration-150 ease-in-out border-b-[3px] border-white/[.1]", selected ? "text-white border-brand-primary" - : "text-gray-400 hover:text-white hover:border-white/[.3]", + : "text-white/[0.5] hover:text-white hover:border-white/[.3]", ); return ( diff --git a/app/pages/PageEnigma/PageEnigma.tsx b/app/pages/PageEnigma/PageEnigma.tsx index c93a7f29ec..eef4ef84a6 100644 --- a/app/pages/PageEnigma/PageEnigma.tsx +++ b/app/pages/PageEnigma/PageEnigma.tsx @@ -130,7 +130,7 @@ export const PageEnigma = () => {
{/* Side panel */} -
+
{ const handlePlus = () => { @@ -34,25 +33,49 @@ export const Controls3D = () => { const handleZoomArrows = () => { console.log("Controls 3D: Zoom Arrows clicked"); }; + + const handleModeChange = (value: string) => { + switch (value) { + case "move": + handleMoveArrows(); + break; + case "rotate": + handleRotateArrows(); + break; + case "scale": + handleZoomArrows(); + break; + default: + console.log("Unknown option"); + } + }; + + const modes = [ + { value: "move", icon: faArrowsUpDownLeftRight }, + { value: "rotate", icon: faArrowsRotate }, + { value: "scale", icon: faUpRightAndDownLeftFromCenter }, + ]; + return (
-
-
- - - - - - - - - +
+ + + + +
+ + + +
+ + + +
diff --git a/app/pages/PageEnigma/comps/ControlsVideo/ControlsVideo.tsx b/app/pages/PageEnigma/comps/ControlsVideo/ControlsVideo.tsx index 84664de1c2..ade68ff1be 100644 --- a/app/pages/PageEnigma/comps/ControlsVideo/ControlsVideo.tsx +++ b/app/pages/PageEnigma/comps/ControlsVideo/ControlsVideo.tsx @@ -26,11 +26,11 @@ export const ControlsVideo = () => { return (
-
-
+
+
- +
diff --git a/tailwind.config.ts b/tailwind.config.ts index 3dffe6da9b..fe39bb2e87 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -83,6 +83,7 @@ export default { "ui-panel": "#242433", "ui-panel-border": "#393948", "ui-controls": "#39394D", + "ui-controls-button": "#676781", gray: colors.gray, white: colors.white, From 94db2df0cf86ae5234f7bbbf52cc413151ffb5a3 Mon Sep 17 00:00:00 2001 From: BFlat Date: Sun, 24 Mar 2024 17:33:10 +0700 Subject: [PATCH 07/13] top bar styling fixes/cleanup, centered --- app/contexts/ButtonSelectContext.tsx | 31 ------------- app/modules/TopBar/TopBar.tsx | 68 ++++++++++++++++++---------- app/pages/PageEnigma/PageEnigma.tsx | 10 +--- app/styles/base.css | 2 +- 4 files changed, 47 insertions(+), 64 deletions(-) delete mode 100644 app/contexts/ButtonSelectContext.tsx diff --git a/app/contexts/ButtonSelectContext.tsx b/app/contexts/ButtonSelectContext.tsx deleted file mode 100644 index 649c5c6d25..0000000000 --- a/app/contexts/ButtonSelectContext.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import React, { createContext, useContext, useState } from "react"; - -interface ButtonSelectContextType { - selectedButton: number | null; - setSelectedButton: (index: number | null) => void; -} - -const ButtonSelectContext = createContext( - undefined, -); - -export const ButtonSelectProvider: React.FC = ({ children }) => { - const [selectedButton, setSelectedButton] = useState(null); - - return ( - - {children} - - ); -}; - -// Custom hook to use the context -export const useButtonSelect = () => { - const context = useContext(ButtonSelectContext); - if (context === undefined) { - throw new Error( - "useButtonSelect must be used within a ButtonSelectProvider", - ); - } - return context; -}; diff --git a/app/modules/TopBar/TopBar.tsx b/app/modules/TopBar/TopBar.tsx index 0e7b0bca10..810f459186 100644 --- a/app/modules/TopBar/TopBar.tsx +++ b/app/modules/TopBar/TopBar.tsx @@ -1,32 +1,52 @@ -import { useContext } from 'react'; +import { useContext } from "react"; -import { Button } from '~/components/Button' -import { faRightToBracket } from '@fortawesome/pro-solid-svg-icons' -import { TopBarInnerContext } from '~/contexts/TopBarInner'; +import { Button } from "~/components/Button"; +import { + faChevronLeft, + faRightToBracket, +} from "@fortawesome/pro-solid-svg-icons"; +import { TopBarInnerContext } from "~/contexts/TopBarInner"; +import { ButtonLink } from "~/components"; export const TopBar = () => { return ( -
-