UI Continuity (#1089)

Autodesk · Aug 20, 2024 · 5bd353f · 5bd353f
2 parents a17f4f6 + a3f7843
commit 5bd353f
Show file tree

Hide file tree

Showing 29 changed files with 537 additions and 516 deletions.
diff --git a/fission/index.html b/fission/index.html
@@ -12,7 +12,11 @@
             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, user-scalable=no" />
+        <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
+        />
+
         <title>Fission | Synthesis</title>
     </head>
     <body>

diff --git a/fission/src/Synthesis.tsx b/fission/src/Synthesis.tsx
@@ -41,7 +41,6 @@ import ScoreboardPanel from "@/panels/information/ScoreboardPanel"
 import DriverStationPanel from "@/panels/simulation/DriverStationPanel"
 import PokerPanel from "@/panels/PokerPanel.tsx"
 import World from "@/systems/World.ts"
-import { AddRobotsModal, AddFieldsModal, SpawningModal } from "@/modals/spawning/SpawningModals.tsx"
 import ImportLocalMirabufModal from "@/modals/mirabuf/ImportLocalMirabufModal.tsx"
 import ImportMirabufPanel from "@/ui/panels/mirabuf/ImportMirabufPanel.tsx"
 import Skybox from "./ui/components/Skybox.tsx"
@@ -166,7 +165,7 @@ function Synthesis() {
                         closeAllPanels={closeAllPanels}
                     >
                         <ToastProvider key="toast-provider">
-                            <Scene useStats={true} key="scene-in-toast-provider" />
+                            <Scene useStats={import.meta.env.DEV} key="scene-in-toast-provider" />
                             <SceneOverlay />
                             <MainHUD key={"main-hud"} />
                             {panelElements.length > 0 && panelElements}
@@ -193,9 +192,6 @@ function Synthesis() {
 
 const initialModals = [
     <SettingsModal key="settings" modalId="settings" />,
-    <SpawningModal key="spawning" modalId="spawning" />,
-    <AddRobotsModal key="add-robot" modalId="add-robot" />,
-    <AddFieldsModal key="add-field" modalId="add-field" />,
     <ViewModal key="view" modalId="view" />,
     <DownloadAssetsModal key="download-assets" modalId="download-assets" />,
     <RoboRIOModal key="roborio" modalId="roborio" />,

diff --git a/fission/src/main.tsx b/fission/src/main.tsx
@@ -11,16 +11,16 @@ const defaultColors: Theme = {
         above: [],
     },
     InteractiveElementLeft: {
-        color: { r: 224, g: 130, b: 65, a: 1 },
+        color: { r: 207, g: 114, b: 57, a: 1 },
         above: ["Background", "BackgroundSecondary"],
     },
     InteractiveElementRight: {
-        color: { r: 218, g: 102, b: 89, a: 1 },
+        color: { r: 212, g: 75, b: 62, a: 1 },
         above: ["Background", "BackgroundSecondary"],
     },
     Background: { color: { r: 0, g: 0, b: 0, a: 1 }, above: [] },
-    BackgroundSecondary: { color: { r: 30, g: 30, b: 30, a: 1 }, above: [] },
-    InteractiveBackground: { color: { r: 52, g: 58, b: 64, a: 1 }, above: [] },
+    BackgroundSecondary: { color: { r: 18, g: 18, b: 18, a: 1 }, above: [] },
+    InteractiveBackground: { color: { r: 40, g: 44, b: 47, a: 1 }, above: [] },
     MainText: {
         color: { r: 255, g: 255, b: 255, a: 1 },
         above: [
@@ -33,8 +33,8 @@ const defaultColors: Theme = {
         ],
     },
     Scrollbar: { color: { r: 170, g: 170, b: 170, a: 1 }, above: [] },
-    AcceptButton: { color: { r: 71, g: 138, b: 226, a: 1 }, above: [] },
-    CancelButton: { color: { r: 231, g: 85, b: 81, a: 1 }, above: [] },
+    AcceptButton: { color: { r: 33, g: 137, b: 228, a: 1 }, above: [] },
+    CancelButton: { color: { r: 248, g: 78, b: 78, a: 1 }, above: [] },
     InteractiveElementText: {
         color: { r: 255, g: 255, b: 255, a: 1 },
         above: [],
@@ -63,8 +63,8 @@ const defaultColors: Theme = {
     SkyboxTop: { color: { r: 255, g: 255, b: 255, a: 1 }, above: [] },
     SkyboxBottom: { color: { r: 255, g: 255, b: 255, a: 1 }, above: [] },
     FloorGrid: { color: { r: 93, g: 93, b: 93, a: 1 }, above: [] },
-    MatchRedAlliance: { color: { r: 255, g: 0, b: 0, a: 1 }, above: [] },
-    MatchBlueAlliance: { color: { r: 0, g: 0, b: 255, a: 1 }, above: [] },
+    MatchRedAlliance: { color: { r: 180, g: 20, b: 20, a: 1 }, above: [] },
+    MatchBlueAlliance: { color: { r: 20, g: 20, b: 180, a: 1 }, above: [] },
     ToastInfo: { color: { r: 126, g: 34, b: 206, a: 1 }, above: [] },
     ToastWarning: { color: { r: 234, g: 179, b: 8, a: 1 }, above: [] },
     ToastError: { color: { r: 239, g: 68, b: 68, a: 1 }, above: [] },

diff --git a/fission/src/mirabuf/IntakeSensorSceneObject.ts b/fission/src/mirabuf/IntakeSensorSceneObject.ts
@@ -20,14 +20,10 @@ class IntakeSensorSceneObject extends SceneObject {
     private _deltaTransformation?: THREE.Matrix4
 
     private _joltBodyId?: Jolt.BodyID
-    private _mesh?: THREE.Mesh
     private _collision?: (e: OnContactPersistedEvent) => void
 
     public constructor(parentAssembly: MirabufSceneObject) {
         super()
-
-        console.debug("Trying to create intake sensor...")
-
         this._parentAssembly = parentAssembly
     }
 
@@ -47,12 +43,6 @@ class IntakeSensorSceneObject extends SceneObject {
                 return
             }
 
-            this._mesh = World.SceneRenderer.CreateSphere(
-                this._parentAssembly.intakePreferences.zoneDiameter / 2.0,
-                World.SceneRenderer.CreateToonMaterial(0x5eeb67)
-            )
-            World.SceneRenderer.scene.add(this._mesh)
-
             this._collision = (event: OnContactPersistedEvent) => {
                 const brain = this._parentAssembly.brain
                 const brainIndex = brain instanceof SynthesisBrain ? brain.brainIndex ?? -1 : -1
@@ -71,8 +61,6 @@ class IntakeSensorSceneObject extends SceneObject {
             }
 
             OnContactPersistedEvent.AddListener(this._collision)
-
-            console.debug("Intake sensor created successfully!")
         }
     }
 
@@ -88,25 +76,12 @@ class IntakeSensorSceneObject extends SceneObject {
 
             World.PhysicsSystem.SetBodyPosition(this._joltBodyId, ThreeVector3_JoltVec3(position))
             World.PhysicsSystem.SetBodyRotation(this._joltBodyId, ThreeQuaternion_JoltQuat(rotation))
-
-            if (this._mesh) {
-                this._mesh.position.setFromMatrixPosition(bodyTransform)
-                this._mesh.rotation.setFromRotationMatrix(bodyTransform)
-            }
         }
     }
 
     public Dispose(): void {
-        console.debug("Destroying intake sensor")
-
         if (this._joltBodyId) {
             World.PhysicsSystem.DestroyBodyIds(this._joltBodyId)
-
-            if (this._mesh) {
-                this._mesh.geometry.dispose()
-                ;(this._mesh.material as THREE.Material).dispose()
-                World.SceneRenderer.scene.remove(this._mesh)
-            }
         }
 
         if (this._collision) OnContactPersistedEvent.RemoveListener(this._collision)

diff --git a/fission/src/systems/input/InputSystem.ts b/fission/src/systems/input/InputSystem.ts
@@ -159,9 +159,21 @@ class InputSystem extends WorldSystem {
         this.gamepadDisconnected = this.gamepadDisconnected.bind(this)
         window.addEventListener("gamepaddisconnected", this.gamepadDisconnected)
 
+        // Detect when the user leaves the page to clear inputs
         document.addEventListener("visibilitychange", () => {
             if (document.hidden) this.clearKeyData()
         })
+
+        // Disable gesture inputs on track pad to zoom into UI
+        window.addEventListener(
+            "wheel",
+            function (e) {
+                if (e.ctrlKey) {
+                    e.preventDefault() // Prevent the zoom
+                }
+            },
+            { passive: false }
+        )
     }
 
     public Update(_: number): void {

diff --git a/fission/src/ui/components/Button.tsx b/fission/src/ui/components/Button.tsx
@@ -42,13 +42,23 @@ const Button: React.FC<ButtonProps> = ({ value, colorOverrideClass, sizeOverride
     return (
         <BaseButton
             onClick={onClick}
-            className={`${
-                colorOverrideClass
-                    ? colorOverrideClass
-                    : "bg-gradient-to-r from-interactive-element-left via-interactive-element-right to-interactive-element-left bg-[length:200%_100%] active:bg-right"
-            }  ${sizeClassNames} rounded-sm font-semibold cursor-pointer duration-200 border-none focus-visible:outline-0 focus:outline-0 ${
-                className || ""
-            }`}
+            className={`
+                ${colorOverrideClass || "bg-gradient-to-r from-interactive-element-left via-interactive-element-right to-interactive-element-left bg-[length:200%_100%] active:bg-right"}  
+                ${sizeClassNames} 
+                rounded-sm 
+                font-semibold 
+                cursor-pointer 
+                duration-200 
+                border-none 
+                focus-visible:outline-0 
+                focus:outline-0 
+                transform 
+                transition-transform 
+                hover:scale-[1.03] 
+                active:scale-[1.06] 
+                ${className || ""}
+            `}
+            style={{ userSelect: "none", MozUserSelect: "none", msUserSelect: "none", WebkitUserSelect: "none" }}
         >
             {value}
         </BaseButton>

diff --git a/fission/src/ui/components/Checkbox.tsx b/fission/src/ui/components/Checkbox.tsx
@@ -1,7 +1,8 @@
 import React, { useState } from "react"
-import Stack, { StackDirection } from "./Stack"
 import Label, { LabelSize } from "./Label"
 import { Switch } from "@mui/base/Switch"
+import { Box } from "@mui/material"
+import { LabelWithTooltip } from "./StyledComponents"
 
 type CheckboxProps = {
     label: string
@@ -10,13 +11,30 @@ type CheckboxProps = {
     stateOverride?: boolean
     hideLabel?: boolean
     onClick?: (checked: boolean) => void
+    tooltipText?: string
 }
 
-const Checkbox: React.FC<CheckboxProps> = ({ label, className, defaultState, stateOverride, hideLabel, onClick }) => {
+const Checkbox: React.FC<CheckboxProps> = ({
+    label,
+    className,
+    defaultState,
+    stateOverride,
+    hideLabel,
+    onClick,
+    tooltipText,
+}) => {
     const [state] = useState(defaultState)
     return (
-        <Stack direction={StackDirection.Horizontal} className="items-center">
-            {hideLabel ? null : (
+        <Box
+            display="flex"
+            flexDirection={"row"}
+            justifyContent={"space-between"}
+            alignItems={"center"}
+            textAlign={"center"}
+        >
+            {hideLabel ? null : tooltipText ? (
+                LabelWithTooltip(label, tooltipText)
+            ) : (
                 <Label size={LabelSize.Small} className={`mr-12 ${className} whitespace-nowrap`}>
                     {label}
                 </Label>
@@ -25,14 +43,14 @@ const Checkbox: React.FC<CheckboxProps> = ({ label, className, defaultState, sta
                 onChange={(e: React.ChangeEvent<HTMLInputElement>) => onClick && onClick(e.target.checked)}
                 slotProps={{
                     root: {
-                        className: `group relative inline-block w-[24px] h-[24px] m-2.5 cursor-pointer`,
+                        className: `group relative inline-block w-[24px] h-[24px] m-2.5 cursor-pointer transform transition-transform hover:scale-[1.03] active:scale-[1.06]`,
                     },
                     input: {
                         className: `cursor-inherit absolute w-full h-full top-0 left-0 opacity-0 z-10 border-none`,
                     },
                     track: ownerState => {
                         return {
-                            className: `absolute block w-full h-full transition rounded-full border border-solid outline-none border-interactive-element-right dark:border-interactive-element-right group-[.base--focusVisible]:shadow-outline-switch ${ownerState.checked ? "bg-gradient-to-br from-interactive-element-left to-interactive-element-right" : "bg-background-secondary"}`,
+                            className: `absolute block w-full h-full transition rounded-full border border-solid outline-none border-interactive-element-right dark:border-interactive-element-right group-[.base--focusVisible]:shadow-outline-switch ${ownerState.checked ? "bg-gradient-to-br from-interactive-element-left to-interactive-element-right" : "bg-background-secondary"} transform transition-transform group-hover:scale-[1.03] group-active:scale-[1.06]`,
                         }
                     },
                     thumb: {
@@ -41,7 +59,7 @@ const Checkbox: React.FC<CheckboxProps> = ({ label, className, defaultState, sta
                 }}
                 defaultChecked={stateOverride != null ? undefined : state}
             />
-        </Stack>
+        </Box>
     )
 }
 

diff --git a/fission/src/ui/components/Dropdown.tsx b/fission/src/ui/components/Dropdown.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from "react"
-import { styled } from "@mui/system"
+import { alpha, styled } from "@mui/system"
 import { Menu, MenuItem, Button, Tooltip } from "@mui/material"
 import { colorNameToVar } from "../ThemeContext"
 
@@ -35,6 +35,9 @@ const CustomButton = styled(Button)({
         border: "0 !important",
         backgroundColor: colorNameToVar("BackgroundSecondary"),
     },
+    "& .MuiTouchRipple-root": {
+        color: "#ffffff30",
+    },
 })
 
 const CustomMenu = styled(Menu)({
@@ -45,9 +48,17 @@ const CustomMenu = styled(Menu)({
         minWidth: "unset",
     },
     "& .MuiMenuItem-root": {
-        "transition": "background-color 0.3s ease, color 0.3s ease",
+        "transition": "background-color 0.3s ease, color 0.3s ease, transform 0.2s ease",
+        "transform": "scale(1.06)",
         "&:hover": {
             color: "#da6659",
+            transform: "scale(1.05)",
+        },
+        "&:active": {
+            transform: "scale(1.03)",
+        },
+        "& .MuiTouchRipple-root": {
+            color: alpha("#d44a3e", 0.3),
         },
     },
 })
@@ -102,7 +113,11 @@ const Dropdown: React.FC<DropdownProps> = ({ options, defaultValue, onSelect, la
             )}
             <Tooltip title={label || ""}>
                 <div>
-                    <CustomButton onClick={handleClick} ref={buttonRef}>
+                    <CustomButton
+                        onClick={handleClick}
+                        ref={buttonRef}
+                        className={`transform transition-transform hover:scale-[1.012] active:scale-[1.024]`}
+                    >
                         {selectedValue || "Select an option"}
                     </CustomButton>
                 </div>

diff --git a/fission/src/ui/components/Label.tsx b/fission/src/ui/components/Label.tsx
@@ -29,7 +29,12 @@ type LabelProps = {
 }
 
 const Label: React.FC<LabelProps> = ({ children, size, className }) => (
-    <span className={`text-main-text h-min ${labelSizeToClassName(size)} ${className}`}>{children}</span>
+    <span
+        className={`text-main-text h-min ${labelSizeToClassName(size)} ${className}`}
+        style={{ userSelect: "none", MozUserSelect: "none", msUserSelect: "none", WebkitUserSelect: "none" }}
+    >
+        {children}
+    </span>
 )
 
 export default Label