feat: [AARD-2112] Synthesis Help Options.

fission/bun.lock

@@ -1,5 +1,6 @@
 {
   "lockfileVersion": 1,
+  "configVersion": 0,
   "workspaces": {
     "": {
       "name": "synthesis-fission",

fission/src/Synthesis.tsx

@@ -3,7 +3,7 @@ import { SnackbarProvider } from "notistack"
 import Slide from "@mui/material/Slide"
 import { useCallback, useEffect, useRef, useState } from "react"
 import { globalAddToast } from "@/components/GlobalUIControls.ts"
-import MainHUD from "@/components/MainHUD"
+import MainHUD, { EVENT_KEY_OPEN_MAIN_HUD } from "@/components/MainHUD"
 import MultiplayerHUD from "@/components/MultiplayerHUD.tsx"
 import Scene from "@/components/Scene.tsx"
 import MultiplayerStartModal from "@/modals/MultiplayerStartModal.tsx"
@@ -40,6 +40,8 @@ function Synthesis() {
             World.updateWorld()
         }
 
+        document.dispatchEvent(new Event(EVENT_KEY_OPEN_MAIN_HUD))
+
         mainLoop()
     }
     useEffect(() => {

fission/src/ui/components/HelpPopover.tsx

@@ -0,0 +1,71 @@
+import { Button, List, ListItemButton, ListItemIcon, ListItemText, Popover } from "@mui/material"
+import { IoHelpCircle } from "react-icons/io5"
+import { useCallback, useState } from "react"
+import { type HelpOption, HelpOptionType } from "@/util/HelpOption"
+import { FaDiscord, FaYoutube } from "react-icons/fa6"
+import { MdArticle } from "react-icons/md"
+
+function helpOptionIcon(type: HelpOptionType) {
+    switch (type) {
+        case HelpOptionType.YouTube:
+            return <FaYoutube />
+        case HelpOptionType.Codelab:
+            return <MdArticle />
+        case HelpOptionType.Discord:
+            return <FaDiscord />
+        case HelpOptionType.Website:
+            return <IoHelpCircle />
+        default:
+            return <IoHelpCircle />
+    }
+}
+
+const HelpPopover: React.FC<{ id: string; helpOptions?: HelpOption[] }> = ({ id, helpOptions }) => {
+    const [helpPopoverAnchor, setHelpPopoverAnchor] = useState<HTMLButtonElement | null>(null)
+
+    const handleHelpButton = useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
+        setHelpPopoverAnchor(event.currentTarget)
+    }, [])
+
+    const handleCloseHelpPopover = useCallback(() => {
+        setHelpPopoverAnchor(null)
+    }, [])
+
+    const helpPopoverOpen = Boolean(helpPopoverAnchor)
+    const helpPopoverId = helpPopoverOpen ? id : undefined
+
+    return (
+        helpOptions && (
+            <>
+                <Button variant="outlined" startIcon={<IoHelpCircle />} onClick={handleHelpButton}>
+                    Help
+                </Button>
+                <Popover
+                    id={helpPopoverId}
+                    open={helpPopoverOpen}
+                    anchorEl={helpPopoverAnchor}
+                    onClose={handleCloseHelpPopover}
+                    anchorOrigin={{
+                        vertical: "bottom",
+                        horizontal: "center",
+                    }}
+                >
+                    <List
+                        sx={{ width: "100%", maxWidth: 360, bgcolor: "background.paper" }}
+                        component="nav"
+                        aria-labelledby="nested-list-subheader"
+                    >
+                        {helpOptions.map(x => (
+                            <ListItemButton onClick={() => window.open(x.link, "_blank", "noopener, noreferrer")}>
+                                <ListItemIcon>{helpOptionIcon(x.type)}</ListItemIcon>
+                                <ListItemText primary={x.text} />
+                            </ListItemButton>
+                        ))}
+                    </List>
+                </Popover>
+            </>
+        )
+    )
+}
+
+export { HelpPopover }

fission/src/ui/components/MainHUD.tsx

@@ -1,4 +1,4 @@
-import { Box, ButtonGroup, ButtonProps, Stack } from "@mui/material"
+import { Box, ButtonGroup, type ButtonProps, Stack } from "@mui/material"
 import { motion } from "framer-motion"
 import type React from "react"
 import { useEffect, useState } from "react"
@@ -22,6 +22,23 @@ import { setAddToast, setOpenModal, setOpenPanel } from "./GlobalUIControls"
 import { Button, IconButton, SynthesisIcons } from "./StyledComponents"
 import { TouchControlsEvent, TouchControlsEventKeys } from "./TouchControls"
 import UserIcon from "./UserIcon"
+import { HelpPopover } from "./HelpPopover"
+import {
+    HELP_OPTION_ALL_TUTORIALS,
+    HELP_OPTION_DISCORD,
+    HELP_OPTION_EXPORT_CODELAB,
+    HELP_OPTION_SPAWN_ASSET_YOUTUBE,
+    type HelpOption,
+} from "@/util/HelpOption"
+
+const HELP_OPTIONS: HelpOption[] = [
+    HELP_OPTION_SPAWN_ASSET_YOUTUBE,
+    HELP_OPTION_EXPORT_CODELAB,
+    HELP_OPTION_ALL_TUTORIALS,
+    HELP_OPTION_DISCORD,
+]
+
+export const EVENT_KEY_OPEN_MAIN_HUD = "openMainHud"
 
 const MainHUDButton: React.FC<ButtonProps> = ({ startIcon, endIcon, children, ...props }) => {
     return (
@@ -61,6 +78,17 @@ const MainHUD: React.FC = () => {
     const [userInfo, setUserInfo] = useState(APS.userInfo)
     const [matchModeRunning, setMatchModeRunning] = useState(MatchMode.getInstance().isMatchEnabled())
 
+    useEffect(() => {
+        const handler = (event: Event) => {
+            if (event.type === EVENT_KEY_OPEN_MAIN_HUD) setIsOpen(true)
+        }
+
+        document.addEventListener(EVENT_KEY_OPEN_MAIN_HUD, handler)
+        return () => {
+            document.removeEventListener(EVENT_KEY_OPEN_MAIN_HUD, handler)
+        }
+    }, [])
+
     useEffect(() => {
         document.addEventListener(APS_USER_INFO_UPDATE_EVENT, () => {
             setUserInfo(APS.userInfo)
@@ -267,6 +295,7 @@ const MainHUD: React.FC = () => {
                         Abort Match Mode
                     </MainHUDButton>
                 )}
+                <HelpPopover id="main-hud-help" helpOptions={HELP_OPTIONS} />
             </Box>
         </>
     )

fission/src/ui/components/Modal.tsx

@@ -1,8 +1,9 @@
-import { Card, CardActions, CardContent, CardHeader, Modal as MUIModal } from "@mui/material"
-import React, { type ReactElement } from "react"
+import { Box, Card, CardActions, CardContent, CardHeader, Modal as MUIModal, Typography } from "@mui/material"
+import React, { useMemo, type ReactElement } from "react"
 import type { Modal as ModalType, Panel as PanelType } from "../helpers/UIProviderHelpers"
 import { CloseType, useUIContext } from "../helpers/UIProviderHelpers"
 import { Button } from "./StyledComponents"
+import { HelpPopover } from "./HelpPopover"
 
 export type ModalImplProps<T, P> = Partial<{
     modal: ModalType<T, P>
@@ -22,6 +23,15 @@ export const Modal = <T, P>({ children, modal, parent }: ModalElementProps<T, P>
 
     const props = modal.props
 
+    const header = useMemo(() => {
+        return (
+            <Box sx={{ display: "flex", justifyContent: "space-between" }}>
+                <Typography>{props.title}</Typography>
+                <HelpPopover id={`model-help-${modal.id}`} helpOptions={modal.props.helpOptions} />
+            </Box>
+        )
+    }, [props.title])
+
     return (
         <MUIModal
             open={modal !== undefined}
@@ -47,7 +57,7 @@ export const Modal = <T, P>({ children, modal, parent }: ModalElementProps<T, P>
             >
                 {props.title && (
                     <CardHeader
-                        title={props.title}
+                        title={header}
                         className="select-none"
                         titleTypographyProps={{ variant: "h5" }}
                         sx={{

fission/src/ui/components/Panel.tsx

@@ -1,5 +1,5 @@
-import { Card, CardActions, CardContent, CardHeader } from "@mui/material"
-import React, { type ReactElement, useRef } from "react"
+import { Box, Card, CardActions, CardContent, CardHeader, Typography } from "@mui/material"
+import React, { type ReactElement, useMemo, useRef } from "react"
 import Draggable from "react-draggable"
 import {
     CloseType,
@@ -9,6 +9,7 @@ import {
     useUIContext,
 } from "../helpers/UIProviderHelpers"
 import { Button } from "./StyledComponents"
+import { HelpPopover } from "./HelpPopover"
 
 // biome-ignore-start lint/suspicious/noExplicitAny: need to be able to extend
 export type PanelImplProps<T, P> = Partial<{
@@ -59,6 +60,23 @@ export const Panel = <T, P>({ children, panel, parent }: PanelElementProps<T, P>
     const props = panel.props
     const nodeRef = useRef<HTMLDivElement | null>(null)
 
+    const header = useMemo(() => {
+        return (
+            <Box
+                sx={{
+                    display: "flex",
+                    flexDirection: "row",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    gap: "1rem",
+                }}
+            >
+                <Typography variant="h5">{props.title}</Typography>
+                <HelpPopover id={`panel-help-${panel.id}`} helpOptions={panel.props.helpOptions} />
+            </Box>
+        )
+    }, [props.title])
+
     // FIXME: sliders show up as <span> so want to cancel drag on those
     // however still can drag on dropdown but menu elements are left behind
     return (
@@ -84,7 +102,7 @@ export const Panel = <T, P>({ children, panel, parent }: PanelElementProps<T, P>
             >
                 {props.title && (
                     <CardHeader
-                        title={props.title}
+                        title={header}
                         className="panel-drag-handle select-none hover:cursor-grab active:cursor-grabbing"
                         sx={{
                             cursor: "move",

fission/src/ui/helpers/UIProviderHelpers.ts

@@ -3,6 +3,7 @@ import { createContext, type FunctionComponent, type ReactNode, useContext } fro
 import type { ModalImplProps } from "../components/Modal"
 import type { PanelImplProps } from "../components/Panel"
 import type { UICallback } from "../UICallbacks"
+import type { HelpOption } from "@/util/HelpOption"
 
 export enum CloseType {
     Accept = 0,
@@ -28,6 +29,7 @@ export interface UIScreenProps<P> {
     disableAccept?: boolean
     cancelText?: string
     acceptText?: string
+    helpOptions?: HelpOption[]
     custom: P
 }
 

fission/src/ui/panels/configuring/assembly-config/ConfigurePanel.tsx

@@ -35,6 +35,7 @@ import { Tab, Tabs } from "@mui/material"
 import { SoundPlayer } from "@/systems/sound/SoundPlayer"
 import CommandRegistry, { type CommandDefinition, type CommandProvider } from "@/ui/components/CommandRegistry"
 import { globalOpenPanel } from "@/ui/components/GlobalUIControls"
+import { HELP_OPTION_CONFIGURE_YOUTUBE } from "@/util/HelpOption"
 
 // Register command: Configure Assets (module-scope side effect)
 CommandRegistry.get().registerCommands([
@@ -314,7 +315,12 @@ const ConfigurePanel: React.FC<PanelImplProps<void, ConfigurePanelCustomProps>>
 
         configureScreen(
             panel!,
-            { title: "Configure Assets", acceptText: "Save", cancelText: "Cancel" },
+            {
+                title: "Configure Assets",
+                acceptText: "Save",
+                cancelText: "Cancel",
+                helpOptions: [HELP_OPTION_CONFIGURE_YOUTUBE],
+            },
             { onBeforeAccept, onCancel }
         )
     }, [selectedAssembly, pendingDeletes])

fission/src/ui/panels/configuring/initial-config/InitialConfigPanel.tsx

@@ -21,6 +21,7 @@ import { useUIContext } from "@/ui/helpers/UIProviderHelpers"
 import NewInputSchemeModal from "@/ui/modals/configuring/inputs/NewInputSchemeModal"
 import ConfigurePanel from "../assembly-config/ConfigurePanel"
 import InputSchemeSelection from "./InputSchemeSelection"
+import { HELP_OPTION_SPAWN_ASSET_YOUTUBE } from "@/util/HelpOption"
 
 const InitialConfigPanel: React.FC<PanelImplProps<void, void>> = ({ panel }) => {
     // TODO: can we pass these as custom props?
@@ -76,7 +77,12 @@ const InitialConfigPanel: React.FC<PanelImplProps<void, void>> = ({ panel }) =>
 
         configureScreen(
             panel!,
-            { title: "Assembly Setup", acceptText: "Finish", cancelText: "Remove" },
+            {
+                title: "Assembly Setup",
+                acceptText: "Finish",
+                cancelText: "Remove",
+                helpOptions: [HELP_OPTION_SPAWN_ASSET_YOUTUBE],
+            },
             {
                 onBeforeAccept: () => {
                     closeFinish()

fission/src/ui/panels/mirabuf/ImportMirabufPanel.tsx

@@ -45,6 +45,7 @@ import {
 import InitialConfigPanel from "../configuring/initial-config/InitialConfigPanel"
 import CommandRegistry from "@/ui/components/CommandRegistry"
 import type { CustomOrbitControls } from "@/systems/scene/CameraControls"
+import { HELP_OPTION_SPAWN_ASSET_YOUTUBE } from "@/util/HelpOption"
 
 // Register commands: Open import panel scoped to robots/fields (module-scope side effect)
 CommandRegistry.get().registerCommands([
@@ -192,7 +193,16 @@ const ImportMirabufPanel: React.FC<PanelImplProps<void, ImportMirabufPanelCustom
     const [files, setFiles] = useState<Data[] | undefined>(undefined)
 
     useEffect(() => {
-        configureScreen(panel!, { title: "Spawn Asset", hideAccept: true, cancelText: "Back" }, {})
+        configureScreen(
+            panel!,
+            {
+                title: "Spawn Asset",
+                hideAccept: true,
+                cancelText: "Back",
+                helpOptions: [HELP_OPTION_SPAWN_ASSET_YOUTUBE],
+            },
+            {}
+        )
     }, [])
 
     useEffect(() => {

fission/src/util/HelpOption.ts

@@ -0,0 +1,42 @@
+export enum HelpOptionType {
+    YouTube = "YouTube",
+    Codelab = "Codelab",
+    Website = "Website",
+    Discord = "Discord",
+}
+
+export type HelpOption = {
+    text: string
+    link: string
+    type: HelpOptionType
+}
+
+export const HELP_OPTION_SPAWN_ASSET_YOUTUBE: HelpOption = {
+    text: "How to Spawn a Robot/Field",
+    link: "https://youtu.be/u608dgHAc2s?si=25tbYWZpHNxGdVzU",
+    type: HelpOptionType.YouTube,
+}
+
+export const HELP_OPTION_CONFIGURE_YOUTUBE: HelpOption = {
+    text: "How to Configure a Robot/Field",
+    link: "https://youtu.be/hHf-7Ojl-fE?si=6xpjRkiFwjrosDyd",
+    type: HelpOptionType.YouTube,
+}
+
+export const HELP_OPTION_DISCORD: HelpOption = {
+    text: "Synthesis Community",
+    link: "https://discord.gg/AnGhEyAn",
+    type: HelpOptionType.Discord,
+}
+
+export const HELP_OPTION_EXPORT_CODELAB: HelpOption = {
+    text: "Exporter Guide",
+    link: "https://synthesis.autodesk.com/codelab/FusionExporterCodelab/#0",
+    type: HelpOptionType.Codelab,
+}
+
+export const HELP_OPTION_ALL_TUTORIALS: HelpOption = {
+    text: "All Tutorials",
+    link: "https://synthesis.autodesk.com/tutorials.html",
+    type: HelpOptionType.Website,
+}