Allow Cancelling Match Mode [AARD-2009] (#1231)

Co-authored-by: Zach Rutman <92497727+rutmanz@users.noreply.github.com>
Co-authored-by: Brandon Pacewic <92102436+BrandonPacewic@users.noreply.github.com>

Author: BrandonPacewic

fission/src/systems/MatchMode.ts

@@ -20,10 +20,13 @@ export const DEFAULT_ENDGAME_TIME = 20
 
 class MatchMode {
     private static _instance: MatchMode
-    private _matchEnabled: boolean = false
     private _endgame: boolean = false
     private _matchModeType: MatchModeType = MatchModeType.SANDBOX
 
+    private setMatchModeType(val: MatchModeType) {
+        this._matchModeType = val
+        new MatchStateChangeEvent(val).dispatch()
+    }
     private _initialTime: number = 0
     private _timeLeft: number = 0
     private _intervalId: number | null = null
@@ -77,7 +80,7 @@ class MatchMode {
 
     autonomousModeStart(openModal: (modalName: string) => void) {
         SoundPlayer.play(MatchStart)
-        this._matchModeType = MatchModeType.AUTONOMOUS
+        this.setMatchModeType(MatchModeType.AUTONOMOUS)
         this.startTimer(this._matchModeConfig.autonomousTime, () => this.autonomousModeEnd(openModal))
     }
 
@@ -88,7 +91,7 @@ class MatchMode {
 
     teleopModeStart(openModal: (modalName: string) => void) {
         SoundPlayer.play(MatchResume)
-        this._matchModeType = MatchModeType.TELEOP
+        this.setMatchModeType(MatchModeType.TELEOP)
         this.startTimer(this._matchModeConfig.teleopTime, () => this.matchEnded(openModal))
     }
 
@@ -98,22 +101,19 @@ class MatchMode {
     }
 
     start(openModal: (modalName: string) => void) {
-        this._matchEnabled = true
         this.autonomousModeStart(openModal)
         SimulationSystem.resetScores()
     }
 
     matchEnded(openModal: (modalName: string) => void) {
         SoundPlayer.play(MatchEnd)
         clearInterval(this._intervalId as number)
-        this._matchEnabled = false
-        this._matchModeType = MatchModeType.MATCH_ENDED
+        this.setMatchModeType(MatchModeType.MATCH_ENDED)
         if (openModal) openModal("match-results")
     }
 
     sandboxModeStart() {
-        this._matchEnabled = false
-        this._matchModeType = MatchModeType.SANDBOX
+        this.setMatchModeType(MatchModeType.SANDBOX)
         clearInterval(this._intervalId as number)
         this._initialTime = 0
         this._timeLeft = 0
@@ -122,7 +122,7 @@ class MatchMode {
     }
 
     isMatchEnabled(): boolean {
-        return this._matchEnabled
+        return !(this._matchModeType == MatchModeType.SANDBOX || this._matchModeType == MatchModeType.MATCH_ENDED)
     }
 
     isEndgame(): boolean {
@@ -158,3 +158,25 @@ export class UpdateTimeLeft extends Event {
         window.removeEventListener(UpdateTimeLeft.EVENT_KEY, func as (e: Event) => void)
     }
 }
+
+export class MatchStateChangeEvent extends Event {
+    public static readonly EVENT_KEY = "MatchEnd"
+
+    public readonly matchModeType: MatchModeType
+    constructor(matchModeType: MatchModeType) {
+        super(MatchStateChangeEvent.EVENT_KEY)
+        this.matchModeType = matchModeType
+    }
+
+    public dispatch(): void {
+        window.dispatchEvent(this)
+    }
+
+    public static addListener(func: (e: MatchStateChangeEvent) => void) {
+        window.addEventListener(MatchStateChangeEvent.EVENT_KEY, func as (e: Event) => void)
+    }
+
+    public static removeListener(func: (e: MatchStateChangeEvent) => void) {
+        window.removeEventListener(MatchStateChangeEvent.EVENT_KEY, func as (e: Event) => void)
+    }
+}

fission/src/ui/components/MainHUD.tsx

@@ -13,7 +13,7 @@ import { Box } from "@mui/material"
 import { TouchControlsEvent, TouchControlsEventKeys } from "./TouchControls"
 import { setAddToast } from "./GlobalUIControls"
 import { SoundPlayer } from "@/systems/sound/SoundPlayer"
-import MatchMode from "@/systems/MatchMode"
+import MatchMode, { MatchStateChangeEvent } from "@/systems/MatchMode"
 import { globalAddToast } from "@/components/GlobalUIControls.ts"
 
 type ButtonProps = {
@@ -66,13 +66,20 @@ const MainHUD: React.FC = () => {
     setAddToast(addToast)
 
     const [userInfo, setUserInfo] = useState(APS.userInfo)
+    const [matchModeRunning, setMatchModeRunning] = useState(MatchMode.getInstance().isMatchEnabled())
 
     useEffect(() => {
         document.addEventListener(APS_USER_INFO_UPDATE_EVENT, () => {
             setUserInfo(APS.userInfo)
         })
     }, [])
 
+    useEffect(() => {
+        MatchStateChangeEvent.addListener(() => {
+            setMatchModeRunning(MatchMode.getInstance().isMatchEnabled())
+        })
+    }, [])
+
     return (
         <>
             {!isOpen && (
@@ -193,21 +200,27 @@ const MainHUD: React.FC = () => {
                         onClick={() => APS.requestAuthCode()}
                     />
                 )}
-                <MainHUDButton
-                    value={"Start Match Mode"}
-                    icon={SynthesisIcons.GAMEPAD}
-                    larger={true}
-                    onClick={() => {
-                        MatchMode.getInstance().isMatchEnabled()
-                            ? globalAddToast(
-                                  "error",
-                                  "Match Mode Already Running",
-                                  "You can't start match mode if its already running"
-                              )
-                            : openPanel("match-mode-config")
-                        setIsOpen(false)
-                    }}
-                />
+                {!matchModeRunning ? (
+                    <MainHUDButton
+                        value={"Start Match Mode"}
+                        icon={SynthesisIcons.GAMEPAD}
+                        larger={true}
+                        onClick={() => {
+                            openPanel("match-mode-config")
+                            setIsOpen(false)
+                        }}
+                    />
+                ) : (
+                    <MainHUDButton
+                        value={"Abort Match Mode"}
+                        icon={SynthesisIcons.XMARK_LARGE}
+                        larger={true}
+                        onClick={() => {
+                            MatchMode.getInstance().sandboxModeStart()
+                            globalAddToast("info", "Match Mode Cancelled", "")
+                        }}
+                    />
+                )}
             </motion.div>
         </>
     )