Main Menu Screen [AARD-1878] (#1128)

Author: BrandonPacewic

fission/src/Synthesis.tsx

@@ -1,6 +1,6 @@
 import Scene from "@/components/Scene.tsx"
 import { AnimatePresence } from "framer-motion"
-import { ReactElement, useCallback, useEffect, useState } from "react"
+import { ReactElement, useCallback, useEffect, useRef, useState } from "react"
 import { ModalControlProvider, useModalManager } from "@/ui/ModalContext"
 import { PanelControlProvider, usePanelManager } from "@/ui/PanelContext"
 import { useTheme } from "@/ui/ThemeContext"
@@ -65,9 +65,10 @@ import GlobalUIComponent from "./ui/components/GlobalUIComponent.tsx"
 import InitialConfigPanel from "./ui/panels/configuring/initial-config/InitialConfigPanel.tsx"
 import WPILibConnectionStatus from "./ui/components/WPILibConnectionStatus.tsx"
 import AutoTestPanel from "./ui/panels/simulation/AutoTestPanel.tsx"
+import MainMenuModal from "@/modals/MainMenuModal"
 
 function Synthesis() {
-    const { openModal, closeModal, getActiveModalElement } = useModalManager(initialModals)
+    const { openModal, closeModal, getActiveModalElement, registerModal } = useModalManager(initialModals)
     const { openPanel, closePanel, closeAllPanels, getActivePanelElements } = usePanelManager(initialPanels)
     const { showTooltip } = useTooltipManager()
 
@@ -82,34 +83,44 @@ function Synthesis() {
     const panelElements = getActivePanelElements()
     const modalElement = getActiveModalElement()
 
+    const mainLoopHandle = useRef(0)
+    registerModal("main-menu", {
+        id: "main-menu",
+        component: (
+            <MainMenuModal
+                key="main-menu"
+                modalId="main-menu"
+                startSingleplayerCallback={() => {
+                    World.InitWorld()
+
+                    if (!PreferencesSystem.getGlobalPreference<boolean>("ReportAnalytics") && !import.meta.env.DEV) {
+                        setConsentPopupDisable(false)
+                    }
+
+                    const mainLoop = () => {
+                        mainLoopHandle.current = requestAnimationFrame(mainLoop)
+                        World.UpdateWorld()
+                    }
+                    mainLoop()
+
+                    World.SceneRenderer.UpdateSkyboxColors(defaultTheme)
+                }}
+            />
+        ),
+    })
+
     useEffect(() => {
         const urlParams = new URLSearchParams(document.location.search)
         if (urlParams.has("code")) {
             window.opener.convertAuthToken(urlParams.get("code"))
             window.close()
             return
         }
-
-        World.InitWorld()
-
-        if (!PreferencesSystem.getGlobalPreference<boolean>("ReportAnalytics") && !import.meta.env.DEV) {
-            setConsentPopupDisable(false)
-        }
-
-        let mainLoopHandle = 0
-        const mainLoop = () => {
-            mainLoopHandle = requestAnimationFrame(mainLoop)
-
-            World.UpdateWorld()
-        }
-        mainLoop()
-
-        World.SceneRenderer.UpdateSkyboxColors(defaultTheme)
-
+        openModal("main-menu")
         // Cleanup
         return () => {
             // TODO: Teardown literally everything
-            cancelAnimationFrame(mainLoopHandle)
+            cancelAnimationFrame(mainLoopHandle.current)
             World.DestroyWorld()
             // World.SceneRenderer.RemoveAllSceneObjects();
         }

fission/src/ui/components/Modal.tsx

@@ -22,6 +22,7 @@ type ModalProps = {
     cancelBlocked?: boolean
     middleBlocked?: boolean
     acceptBlocked?: boolean
+    allowClickAway?: boolean
     children?: ReactNode
     className?: string
     contentClassName?: string
@@ -44,6 +45,7 @@ const Modal: React.FC<ModalProps> = ({
     cancelBlocked = false,
     middleBlocked = false,
     acceptBlocked = false,
+    allowClickAway = true,
     className,
     contentClassName,
 }) => {
@@ -52,7 +54,12 @@ const Modal: React.FC<ModalProps> = ({
     const iconEl: ReactNode = typeof icon === "string" ? <img src={icon} className="w-6" alt="Icon" /> : icon
 
     return (
-        <ClickAwayListener onClickAway={_ => closeModal()} key={modalId}>
+        <ClickAwayListener
+            onClickAway={_ => {
+                if (allowClickAway) closeModal()
+            }}
+            key={modalId}
+        >
             <div
                 id={modalId}
                 key={modalId}

fission/src/ui/modals/MainMenuModal.tsx

@@ -0,0 +1,45 @@
+import React from "react"
+import Modal, { ModalPropsImpl } from "@/components/Modal"
+import { SynthesisIcons } from "../components/StyledComponents"
+import Button from "@/components/Button.tsx"
+import { useModalControlContext } from "@/ui/ModalContext"
+import { Global_AddToast } from "@/components/GlobalUIControls.ts"
+
+const MainMenuModal: React.FC<ModalPropsImpl & { startSingleplayerCallback: () => void }> = ({
+    modalId,
+    startSingleplayerCallback,
+}) => {
+    const { closeModal } = useModalControlContext()
+
+    return (
+        <Modal
+            name={"Welcome"}
+            icon={SynthesisIcons.Gamepad}
+            modalId={modalId}
+            middleEnabled={false}
+            cancelEnabled={false}
+            acceptEnabled={false}
+            allowClickAway={false}
+        >
+            <div className="flex flex-col">
+                <Button
+                    value={"Singleplayer"}
+                    onClick={() => {
+                        closeModal()
+                        startSingleplayerCallback()
+                    }}
+                    className="w-full my-1"
+                />
+                <Button
+                    value={"Multiplayer"}
+                    onClick={() => {
+                        Global_AddToast?.("error", "Not Supported", "Multiplayer is not yet supported. Come back soon!")
+                    }}
+                    className="w-full mt-1 mb-3"
+                />
+            </div>
+        </Modal>
+    )
+}
+
+export default MainMenuModal