Match Mode Cancel Button [SYNTH-312] (#1473)

* Match Mode Abort UI Option

* Abort Match Top Bar Icon

* Better Contrast Match Mode Abort Line

* feat: add active highlight while match is running

---------

Co-authored-by: PepperLola <PepperLola@users.noreply.github.com>

Author: PepperLola

fission/src/ui/components/topbar/GameplayControls.tsx

@@ -1,14 +1,18 @@
 import { Box, Stack } from "@mui/material"
 import type React from "react"
 import { useEffect, useState } from "react"
+import EventSystem from "@/systems/EventSystem.ts"
+import MatchMode from "@/systems/match_mode/MatchMode"
 import PreferencesSystem from "@/systems/preferences/PreferencesSystem"
 import { useUIContext } from "@/ui/helpers/UIProviderHelpers"
 import MatchModeConfigPanel from "@/ui/panels/configuring/MatchModeConfigPanel"
+import MultiplayerStartModal from "@/ui/modals/multiplayer/MultiplayerStartModal"
+import ConfirmModal from "@/ui/modals/common/ConfirmModal"
 import { SynthesisIcons } from "@/ui/components/StyledComponents"
 import { TopBarButton } from "@/ui/components/topbar/TopBarButton"
 import { TOP_BAR_GLYPH_SX } from "@/ui/components/topbar/TopBarConfig"
 import { TopBarIcon } from "@/ui/components/topbar/TopBarIcons"
-import MultiplayerStartModal from "@/modals/multiplayer/MultiplayerStartModal.tsx"
+import { globalAddToast } from "@/ui/components/GlobalUIControls"
 
 export const ScoreboardButton: React.FC = () => {
     const [alwaysOn, setAlwaysOn] = useState(() => PreferencesSystem.getUserPreference("AlwaysShowScoreboard"))
@@ -40,16 +44,42 @@ export const ScoreboardButton: React.FC = () => {
 const GameplayControls: React.FC = () => {
     const { openModal, togglePanel } = useUIContext()
 
+    const [isMatchRunning, setIsMatchRunning] = useState(() => MatchMode.getInstance().isMatchEnabled())
+
+    useEffect(() => {
+        return EventSystem.listen("MatchStateChangedEvent", () => {
+            setIsMatchRunning(MatchMode.getInstance().isMatchEnabled())
+        })
+    }, [])
+
     const openMatchMode = () => togglePanel(MatchModeConfigPanel, undefined)
 
+    const abortMatchMode = () => {
+        openModal(
+            ConfirmModal,
+            { message: "Are you sure you want to abort the current match? This cannot be undone." },
+            undefined,
+            {
+                title: "Abort Match",
+                acceptText: "Abort Match",
+                cancelText: "Cancel",
+                onAccept: () => {
+                    MatchMode.getInstance().sandboxModeStart()
+                    globalAddToast("info", "Match Mode Cancelled")
+                },
+            }
+        )
+    }
+
     const openMultiplayer = () => openModal(MultiplayerStartModal, undefined)
 
     return (
         <Stack direction="row" alignItems="center" gap={1.5}>
             <TopBarButton
-                label="Start Match"
-                icon={<TopBarIcon name="gp-match-mode" size={30} />}
-                onClick={openMatchMode}
+                label={isMatchRunning ? "Abort Match" : "Start Match"}
+                active={isMatchRunning}
+                icon={<TopBarIcon name={isMatchRunning ? "gp-match-mode-abort" : "gp-match-mode"} size={30} />}
+                onClick={isMatchRunning ? abortMatchMode : openMatchMode}
             />
             <TopBarButton
                 label="Open Multiplayer"

fission/src/ui/components/topbar/TopBarIcons.tsx

@@ -61,6 +61,7 @@ export const TOP_BAR_ICON_NAMES = [
     "cfg-camera-positions",
     "gp-multiplayer",
     "gp-match-mode",
+    "gp-match-mode-abort",
 ] as const
 
 export type TopBarIconName = (typeof TOP_BAR_ICON_NAMES)[number]

fission/src/ui/components/topbar/icons/gp-match-mode-abort.svg

@@ -244,7 +244,7 @@ const MatchModeConfigPanel: React.FC<PanelImplProps<void, void>> = ({ panel }) =
                                 globalAddToast(
                                     "error",
                                     "Match Mode Already Running",
-                                    "You can't modify the match mode ruleset while a match is running"
+                                    "You can't start a new match while one is already running"
                                 )
                                 return
                             }