UI Components (#976)

Autodesk · Jun 20, 2024 · 2f598c9 · 2f598c9
2 parents 71a598c + 39c272c
commit 2f598c9
Show file tree

Hide file tree

Showing 107 changed files with 9,042 additions and 9,278 deletions.
diff --git a/fission/README.md b/fission/README.md
@@ -35,8 +35,8 @@ npm i
 | `lint` | Runs eslint on the project. |
 | `lint:fix` | Attempts to fix issues found with eslint. |
 | `prettier` | Runs prettier on the project as a check. |
-| `prettier:fix` | Runs prettier on the project to fix any issues with formating. **DO NOT USE**, I don't like the current format it uses. |
-| `format` | Runs `prettier:fix` and `lint:fix`. **Do not use** for the same reasons as `prettier:fix`. |
+| `prettier:fix` | Runs prettier on the project to fix any issues with formating. |
+| `format` | Runs `prettier:fix` and `lint:fix`. |
 | `assetpack` | Downloads the assetpack and unzips/installs it in the correct location. |
 
 ### Autodesk Platform Services

diff --git a/fission/bun.lockb b/fission/bun.lockb
diff --git a/fission/package-lock.json b/fission/package-lock.json
diff --git a/fission/package.json b/fission/package.json
@@ -20,6 +20,9 @@
   },
   "dependencies": {
     "@barclah/jolt-physics": "^0.19.3",
+    "@mui/base": "^5.0.0-beta.40",
+    "@mui/icons-material": "^5.15.20",
+    "@mui/system": "^5.15.20",
     "@react-three/drei": "^9.96.5",
     "@react-three/fiber": "^8.15.15",
     "@vitest/coverage-v8": "^1.6.0",

diff --git a/fission/prettier.config.js b/fission/prettier.config.js
@@ -9,6 +9,7 @@ const config = {
     bracketSpacing: true,
     bracketSameLine: false,
     arrowParens: "avoid",
+    printWidth: 120
 }
 
 export default config;
diff --git a/fission/src/Synthesis.tsx b/fission/src/Synthesis.tsx
@@ -4,7 +4,7 @@ import { LoadMirabufRemote } from './mirabuf/MirabufLoader.ts';
 import { mirabuf } from './proto/mirabuf';
 import MirabufParser, { ParseErrorSeverity } from './mirabuf/MirabufParser.ts';
 import MirabufInstance from './mirabuf/MirabufInstance.ts';
-import { AnimatePresence, motion } from "framer-motion"
+import { AnimatePresence } from "framer-motion"
 import { ReactElement, useEffect } from "react"
 import { ModalControlProvider, useModalManager } from "@/ui/ModalContext"
 import { PanelControlProvider, usePanelManager } from "@/ui/PanelContext"
@@ -54,21 +54,18 @@ import World from '@/systems/World.ts';
 import { AddRobotsModal, AddFieldsModal, SpawningModal } from '@/modals/spawning/SpawningModals.tsx';
 import ImportMirabufModal from '@/modals/mirabuf/ImportMirabufModal.tsx';
 
-const DEFAULT_MIRA_PATH = '/api/mira/Robots/Team 2471 (2018)_v7.mira';
+const DEFAULT_MIRA_PATH = "/api/mira/Robots/Team 2471 (2018)_v7.mira"
 
 function Synthesis() {
-
-    const urlParams = new URLSearchParams(document.location.search);
-    if (urlParams.has('code')) {
-        const code = urlParams.get('code')
+    const urlParams = new URLSearchParams(document.location.search)
+    if (urlParams.has("code")) {
+        const code = urlParams.get("code")
         window.opener?.setAuthCode(code)
         window.close()
     }
-
-    const { openModal, closeModal, getActiveModalElement } =
-        useModalManager(initialModals)
-    const { openPanel, closePanel, closeAllPanels, getActivePanelElements } =
-        usePanelManager(initialPanels)
+
+    const { openModal, closeModal, getActiveModalElement } = useModalManager(initialModals)
+    const { openPanel, closePanel, closeAllPanels, getActivePanelElements } = usePanelManager(initialPanels)
     const { showTooltip } = useTooltipManager()
 
     const { currentTheme, applyTheme } = useTheme()
@@ -77,141 +74,64 @@ function Synthesis() {
         applyTheme(currentTheme)
     }, [currentTheme, applyTheme])
 
-
     const panelElements = getActivePanelElements()
-
-    const motionPanelElements = panelElements.map((el, i) => (
-        <motion.div
-            initial={{
-                scale: 0,
-                opacity: 0,
-                width: "min-content",
-                height: "min-content",
-            }}
-            animate={{
-                scale: 1,
-                opacity: 1,
-                width: "min-content",
-                height: "min-content",
-            }}
-            exit={{
-                scale: 0,
-                opacity: 0,
-                width: "min-content",
-                height: "min-content",
-            }}
-            transition={{
-                type: "spring",
-                stiffness: 300,
-                damping: 20,
-            }}
-            style={{ translateX: "-50%", translateY: "-50%" }}
-            className="absolute left-1/2 top-1/2"
-            key={"panel-" + i}
-        >
-            {el}
-        </motion.div>
-    ))
-
     const modalElement = getActiveModalElement()
-    const motionModalElement =
-        modalElement == null ? null : (
-            <motion.div
-                initial={{
-                    scale: 0,
-                    opacity: 0,
-                    width: "min-content",
-                    height: "min-content",
-                }}
-                animate={{
-                    scale: 1,
-                    opacity: 1,
-                    width: "min-content",
-                    height: "min-content",
-                }}
-                exit={{
-                    scale: 0,
-                    opacity: 0,
-                    width: "min-content",
-                    height: "min-content",
-                }}
-                transition={{
-                    type: "spring",
-                    stiffness: 300,
-                    damping: 25,
-                }}
-                style={{ translateX: "-50%", translateY: "-50%" }}
-                className="absolute left-1/2 top-1/2"
-                key={"modal"}
-            >
-                {getActiveModalElement()}
-            </motion.div>
-        )
 
-
-
-	useEffect(() => {
-
-        World.InitWorld();
+    useEffect(() => {
+        World.InitWorld()
 
-        let mira_path = DEFAULT_MIRA_PATH;
+        let mira_path = DEFAULT_MIRA_PATH
 
-        const urlParams = new URLSearchParams(document.location.search);
+        const urlParams = new URLSearchParams(document.location.search)
 
         if (urlParams.has("mira")) {
-            mira_path = `test_mira/${urlParams.get("mira")!}`;
-            console.debug(`Selected Mirabuf File: ${mira_path}`);
+            mira_path = `test_mira/${urlParams.get("mira")!}`
+            console.debug(`Selected Mirabuf File: ${mira_path}`)
         }
         console.log(urlParams)
 
-		const setup = async () => {
-
-			const miraAssembly = await LoadMirabufRemote(mira_path)
-				.catch(
-					_ => LoadMirabufRemote(DEFAULT_MIRA_PATH)
-				).catch(console.error);
+        const setup = async () => {
+            const miraAssembly = await LoadMirabufRemote(mira_path)
+                .catch(_ => LoadMirabufRemote(DEFAULT_MIRA_PATH))
+                .catch(console.error)
 
             await (async () => {
                 if (!miraAssembly || !(miraAssembly instanceof mirabuf.Assembly)) {
-                    return;
+                    return
                 }
-        
-                const parser = new MirabufParser(miraAssembly);
+
+                const parser = new MirabufParser(miraAssembly)
                 if (parser.maxErrorSeverity >= ParseErrorSeverity.Unimportable) {
-                    console.error(`Assembly Parser produced significant errors for '${miraAssembly.info!.name!}'`);
-                    return;
+                    console.error(`Assembly Parser produced significant errors for '${miraAssembly.info!.name!}'`)
+                    return
                 }
-
-                const mirabufSceneObject = new MirabufSceneObject(new MirabufInstance(parser));
-                World.SceneRenderer.RegisterSceneObject(mirabufSceneObject);
-            })();
-		};
-		setup();
 
-        let mainLoopHandle = 0;
-		const mainLoop = () => {
-			mainLoopHandle = requestAnimationFrame(mainLoop);
-
-			World.UpdateWorld();
-		};
-		mainLoop();
+                const mirabufSceneObject = new MirabufSceneObject(new MirabufInstance(parser))
+                World.SceneRenderer.RegisterSceneObject(mirabufSceneObject)
+            })()
+        }
+        setup()
+
+        let mainLoopHandle = 0
+        const mainLoop = () => {
+            mainLoopHandle = requestAnimationFrame(mainLoop)
+
+            World.UpdateWorld()
+        }
+        mainLoop()
         // Cleanup
         return () => {
             // TODO: Teardown literally everything
-            cancelAnimationFrame(mainLoopHandle);
-            World.DestroyWorld();
+            cancelAnimationFrame(mainLoopHandle)
+            World.DestroyWorld()
             // World.SceneRenderer.RemoveAllSceneObjects();
-        };
-	}, []);
+        }
+    }, [])
 
     return (
         <AnimatePresence>
             <TooltipControlProvider
-                showTooltip={(
-                    type: TooltipType,
-                    controls?: TooltipControl[],
-                    duration: number = TOOLTIP_DURATION
-                ) => {
+                showTooltip={(type: TooltipType, controls?: TooltipControl[], duration: number = TOOLTIP_DURATION) => {
                     showTooltip(type, controls, duration)
                 }}
             >
@@ -229,11 +149,10 @@ function Synthesis() {
                         }}
                     >
                         <ToastProvider>
-							<Scene useStats={true} />
+                            <Scene useStats={true} />
                             <MainHUD />
-                            {motionPanelElements.length > 0 &&
-                                motionPanelElements}
-                            {motionModalElement && motionModalElement}
+                            {panelElements.length > 0 && panelElements}
+                            {modalElement && <div className="absolute w-full h-full left-0 top-0">{modalElement}</div>}
                             <ToastContainer />
                         </ToastProvider>
                     </PanelControlProvider>
@@ -276,7 +195,7 @@ const initialModals = [
 ]
 
 const initialPanels: ReactElement[] = [
-    <RobotSwitchPanel panelId="multibot" />,
+    <RobotSwitchPanel panelId="multibot" openLocation="right" sidePadding={8} />,
     <DriverStationPanel panelId="driver-station" />,
     <SpawnLocationsPanel panelId="spawn-locations" />,
     <ScoreboardPanel panelId="scoreboard" />,
@@ -286,4 +205,4 @@ const initialPanels: ReactElement[] = [
     <ZoneConfigPanel panelId="zone-config" />,
 ]
 
-export default Synthesis;
+export default Synthesis
diff --git a/fission/src/Window.d.ts b/fission/src/Window.d.ts
@@ -1,3 +1,3 @@
 declare interface Window {
-    setAuthCode(code: string): void;
-}
+    setAuthCode(code: string): void
+}