Hunter - UI Tweaking (1) (#972)

Autodesk · May 29, 2024 · 0a18d67 · 0a18d67
2 parents 2601ecd + e075988
commit 0a18d67
Show file tree

Hide file tree

Showing 20 changed files with 882 additions and 790 deletions.
diff --git a/fission/index.html b/fission/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/synthesis-logo.svg" />
+    <link rel='stylesheet' href='https://static-dc.autodesk.net/etc/designs/v201808022224/templates-general/structure/fonts/artifakt/clientlibs/artifakt.css'/>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Fission | Synthesis</title>

diff --git a/fission/package-lock.json b/fission/package-lock.json
diff --git a/fission/src/Synthesis.tsx b/fission/src/Synthesis.tsx
@@ -21,7 +21,6 @@ import MainHUD from "./components/MainHUD"
 import DownloadAssetsModal from "./modals/DownloadAssetsModal"
 import ExitSynthesisModal from "./modals/ExitSynthesisModal"
 import MatchResultsModal from "./modals/MatchResultsModal"
-import SpawningModal from "./modals/SpawningModal"
 import UpdateAvailableModal from "./modals/UpdateAvailableModal"
 import ViewModal from "./modals/ViewModal"
 import ConnectToMultiplayerModal from "./modals/aether/ConnectToMultiplayerModal"
@@ -41,8 +40,6 @@ import DeleteAllThemesModal from "./modals/configuring/theme-editor/DeleteAllThe
 import DeleteThemeModal from "./modals/configuring/theme-editor/DeleteThemeModal"
 import NewThemeModal from "./modals/configuring/theme-editor/NewThemeModal"
 import ThemeEditorModal from "./modals/configuring/theme-editor/ThemeEditorModal"
-import AddFieldModal from "./modals/spawning/AddFieldModal"
-import AddRobotModal from "./modals/spawning/AddRobotModal"
 import MatchModeModal from "./modals/spawning/MatchModeModal"
 import RobotSwitchPanel from "./panels/RobotSwitchPanel"
 import SpawnLocationsPanel from "./panels/SpawnLocationPanel"
@@ -54,6 +51,7 @@ import ScoreboardPanel from "./panels/information/ScoreboardPanel"
 import DriverStationPanel from "./panels/simulation/DriverStationPanel"
 import ManageAssembliesModal from './modals/spawning/ManageAssembliesModal.tsx';
 import World from './systems/World.ts';
+import { AddRobotsModal, AddFieldsModal, SpawningModal } from './modals/spawning/SpawningModals.tsx';
 
 const DEFAULT_MIRA_PATH = 'test_mira/Team_2471_(2018)_v7.mira';
 // const DEFAULT_MIRA_PATH = 'test_mira/Dozer_v2.mira';
@@ -242,8 +240,8 @@ function Synthesis() {
 const initialModals = [
     <SettingsModal modalId="settings" />,
     <SpawningModal modalId="spawning" />,
-    <AddRobotModal modalId="add-robot" />,
-    <AddFieldModal modalId="add-field" />,
+    <AddRobotsModal modalId="add-robot" />,
+    <AddFieldsModal modalId="add-field" />,
     <ViewModal modalId="view" />,
     <DownloadAssetsModal modalId="download-assets" />,
     <RoboRIOModal modalId="roborio" />,

diff --git a/fission/src/components/MainHUD.tsx b/fission/src/components/MainHUD.tsx
@@ -87,9 +87,10 @@ const MainHUD: React.FC = () => {
                 className="fixed flex flex-col gap-2 bg-gradient-to-b from-interactive-element-right to-interactive-element-left w-min p-4 rounded-3xl ml-4 top-1/2 -translate-y-1/2"
             >
                 <div className="flex flex-row gap-2 w-60 h-10">
-                    <img src={logo} width={"80%"} />
+                    <img src={logo} className="w-[80%] h-[100%] object-contain" />
                     <button onClick={() => setIsOpen(false)}>
                         <GrFormClose
+                            color="bg-icon"
                             size={20}
                             className="text-main-hud-close-icon"
                         />

diff --git a/fission/src/components/Modal.tsx b/fission/src/components/Modal.tsx
@@ -64,7 +64,7 @@ const Modal: React.FC<ModalProps> = ({
                     <span className="flex justify-center align-center ml-8 text-icon">
                         {iconEl && iconEl}
                     </span>
-                    <h1 className="text-3xl inline-block align-middle whitespace-nowrap mr-10">
+                    <h1 className="text-3xl font-medium inline-block align-middle whitespace-nowrap mr-10">
                         {name}
                     </h1>
                 </div>
@@ -78,7 +78,7 @@ const Modal: React.FC<ModalProps> = ({
             </div>
             <div
                 id="footer"
-                className="flex justify-between mx-10 py-8 gap-4 text-accept-cancel-button-text"
+                className="flex justify-between px-8 py-6 gap-4 text-accept-cancel-button-text"
             >
                 {cancelEnabled && (
                     <input

diff --git a/fission/src/index.css b/fission/src/index.css
@@ -3,7 +3,8 @@
 @tailwind utilities;
 
 :root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  /* font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; */
+  font-family: 'Artifakt';
   line-height: 1.5;
   font-weight: 400;
 

diff --git a/fission/src/mirabuf/MirabufLoader.ts b/fission/src/mirabuf/MirabufLoader.ts
@@ -11,7 +11,7 @@ export function UnzipMira(buff: Uint8Array): Uint8Array {
 }
 
 export async function LoadMirabufRemote(fetchLocation: string, useCache: boolean = true): Promise<mirabuf.Assembly | undefined> {
-    const miraBuff = await fetch(fetchLocation, useCache ? undefined : {cache: "no-store"}).then(x => x.blob()).then(x => x.arrayBuffer());
+    const miraBuff = await fetch(encodeURI(fetchLocation), useCache ? undefined : {cache: "no-store"}).then(x => x.blob()).then(x => x.arrayBuffer());
     const byteBuffer = UnzipMira(new Uint8Array(miraBuff));
     return mirabuf.Assembly.decode(byteBuffer);
 }

diff --git a/fission/src/mirabuf/MirabufSceneObject.ts b/fission/src/mirabuf/MirabufSceneObject.ts
@@ -28,17 +28,16 @@ class MirabufSceneObject extends SceneObject {
     private _mechanism: Mechanism;
 
     public constructor(mirabufInstance: MirabufInstance) {
-        super();
+        super()
 
-        this._mirabufInstance = mirabufInstance;
+        this._mirabufInstance = mirabufInstance
 
-        if (this._mirabufInstance.parser.assembly.dynamic) {
-            this._physicsLayerReserve = new LayerReserve();
+        this._mechanism = World.PhysicsSystem.CreateMechanismFromParser(this._mirabufInstance.parser)
+        if (this._mechanism.layerReserve) {
+            this._physicsLayerReserve = this._mechanism.layerReserve
         }
-
-        this._mechanism = World.PhysicsSystem.CreateMechanismFromParser(this._mirabufInstance.parser);
 
-        this._debugBodies = null;
+        this._debugBodies = null
     }
 
     public Setup(): void {
@@ -99,6 +98,7 @@ class MirabufSceneObject extends SceneObject {
     }
 
     public Dispose(): void {
+        World.SimulationSystem.UnregisterMechanism(this._mechanism)
         World.PhysicsSystem.DestroyMechanism(this._mechanism);
         this._mirabufInstance.Dispose(World.SceneRenderer.scene);
         this._debugBodies?.forEach(x => {

diff --git a/fission/src/modals/SpawningModal.tsx b/fission/src/modals/SpawningModal.tsx
diff --git a/fission/src/modals/spawning/AddFieldModal.tsx b/fission/src/modals/spawning/AddFieldModal.tsx
diff --git a/fission/src/modals/spawning/AddRobotModal.tsx b/fission/src/modals/spawning/AddRobotModal.tsx
diff --git a/fission/src/modals/spawning/ManageAssembliesModal.tsx b/fission/src/modals/spawning/ManageAssembliesModal.tsx
@@ -1,25 +1,35 @@
-import React, { RefObject, useEffect, useRef } from "react"
+import React, { useReducer } from "react"
 import Modal, { ModalPropsImpl } from "../../components/Modal"
 import { FaPlus } from "react-icons/fa6"
-import ScrollView from "@/components/ScrollView"
+import Button from "@/components/Button";
+import Label, { LabelSize } from "@/components/Label";
+import World from "@/systems/World";
+import MirabufSceneObject from "@/mirabuf/MirabufSceneObject";
+
+interface AssemblyCardProps {
+    id: number;
+    update: React.DispatchWithoutAction;
+}
+
+const AssemblyCard: React.FC<AssemblyCardProps> = ({ id, update }) => {
+    return (
+        <div key={id} className="flex flex-row align-middle justify-between items-center bg-background rounded-sm p-2 gap-2">
+            <Label className="text-wrap break-all">{id}</Label>
+            <Button
+                value="Delete"
+                onClick={() => { World.SceneRenderer.RemoveSceneObject(id); update() }}
+            />
+        </div>
+    )
+}
 
 const ManageAssembliesModal: React.FC<ModalPropsImpl> = ({ modalId }) => {
     // update tooltip based on type of drivetrain, receive message from Synthesis
     // const { showTooltip } = useTooltipControlContext()
 
-    const refs: Array<RefObject<HTMLDivElement>> = new Array(2);
-    for (let i = 0; i < refs.length; i++) {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        refs[i] = useRef<HTMLDivElement>(null);
-    }
+    const [_, update] = useReducer((x) => !x, false)
 
-    useEffect(() => {
-        refs.forEach((x, i) => {
-            if (x.current) {
-                x.current.innerHTML = `Item ${i}`;
-            }
-        });
-    });
+    const assemblies = [...World.SceneRenderer.sceneObjects.entries()].filter(x => { const y = (x[1] instanceof MirabufSceneObject); return y }).map(x => x[0])
 
     return (
         <Modal
@@ -35,12 +45,12 @@ const ManageAssembliesModal: React.FC<ModalPropsImpl> = ({ modalId }) => {
                 }
             }
         >
-            <ScrollView maxHeight="max-h-70vh" className="h-32" children={
-                <div>
-                    {refs.map(x => <div ref={x}></div>)}
-                </div>
-            }>
-            </ScrollView>
+            <div className="flex overflow-y-auto flex-col gap-2 min-w-[50vw] max-h-[60vh] bg-background-secondary rounded-md p-2">
+                <Label size={LabelSize.Medium} className="text-center border-b-[1pt] mt-[4pt] mb-[2pt] mx-[5%]">{assemblies ? `${assemblies.length} Assemblies` : 'No Assemblies'}</Label>
+                {
+                    assemblies.map(x => AssemblyCard({id: x, update: update}))
+                }
+            </div>
         </Modal>
     )
 }

diff --git a/fission/src/modals/spawning/SpawningModal.tsx b/fission/src/modals/spawning/SpawningModal.tsx