feat(scoreboard): always visible when match mode active

Signed-off-by: Dhruv Arora <dhruv.arora1@autodesk.com>

Author: Dhruv-0-Arora

fission/src/test/ui/ScoreboardVisibility.test.ts

@@ -11,6 +11,12 @@ test("only auto depends on gameplay", () => {
     expect(isScoreboardVisible("off", true)).toBe(false)
 })
 
+test("a running match shows the scoreboard in every mode", () => {
+    for (const mode of SCOREBOARD_MODES) {
+        expect(isScoreboardVisible(mode, true, true)).toBe(true)
+    }
+})
+
 test("cycling visits every mode and returns to the start", () => {
     let mode: ScoreboardMode = SCOREBOARD_MODES[0]
     const visited = SCOREBOARD_MODES.map(() => (mode = nextScoreboardMode(mode)))

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

@@ -17,18 +17,20 @@ const SCOREBOARD_TOOLTIPS: Record<ScoreboardMode, string> = {
     off: "Scoreboard: always off",
 }
 
+const MATCH_OVERRIDE_TOOLTIP = "Scoreboard: shown while a match is running"
+
 const ScoreboardModeButton: React.FC = () => {
-    const { mode, visible, setMode } = useScoreboard()
+    const { mode, visible, overriddenByMatch, setMode } = useScoreboard()
 
     const ScoreboardGlyph = visible ? SynthesisIcons.SCOREBOARD : SynthesisIcons.SCOREBOARD_HIDDEN
     const nextMode = nextScoreboardMode(mode)
     const cycleMode = useCallback(() => setMode(nextMode), [setMode, nextMode])
 
     return (
         <TopBarButton
-            label={SCOREBOARD_TOOLTIPS[mode]}
+            label={overriddenByMatch ? MATCH_OVERRIDE_TOOLTIP : SCOREBOARD_TOOLTIPS[mode]}
             icon={
-                <Box sx={SCOREBOARD_GLYPH_SX[mode]}>
+                <Box sx={overriddenByMatch ? SCOREBOARD_GLYPH_SX.on : SCOREBOARD_GLYPH_SX[mode]}>
                     <ScoreboardGlyph />
                 </Box>
             }

fission/src/ui/helpers/ScoreboardVisibility.ts

@@ -23,8 +23,8 @@ export const SCOREBOARD_GLYPH_SX: Record<ScoreboardMode, SxProps<Theme>> = {
     off: { ...TOP_BAR_GLYPH_SX, opacity: MUTED_GLYPH_OPACITY },
 }
 
-export function isScoreboardVisible(mode: ScoreboardMode, gameplayActive: boolean): boolean {
-    return mode === "on" || (mode === "auto" && gameplayActive)
+export function isScoreboardVisible(mode: ScoreboardMode, gameplayActive: boolean, matchActive = false): boolean {
+    return matchActive || mode === "on" || (mode === "auto" && gameplayActive)
 }
 
 export function nextScoreboardMode(mode: ScoreboardMode): ScoreboardMode {
@@ -34,6 +34,7 @@ export function nextScoreboardMode(mode: ScoreboardMode): ScoreboardMode {
 export interface Scoreboard {
     mode: ScoreboardMode
     visible: boolean
+    overriddenByMatch: boolean // the scoreboard is visible when a match is active
     setMode: (mode: ScoreboardMode) => void
 }
 
@@ -67,5 +68,10 @@ export function useScoreboard(): Scoreboard {
         [inMatchMode]
     )
 
-    return { mode, visible: isScoreboardVisible(mode, gameplayActive), setMode }
+    return {
+        mode,
+        visible: isScoreboardVisible(mode, gameplayActive, inMatchMode),
+        overriddenByMatch: inMatchMode && !isScoreboardVisible(mode, gameplayActive),
+        setMode,
+    }
 }