From fad510824b7f22cd19a07fb0749171ec9e3ef9a1 Mon Sep 17 00:00:00 2001 From: Aries Powvalla Date: Mon, 18 Aug 2025 14:56:15 -0700 Subject: [PATCH 1/3] Completely redo the Math Results screen --- fission/src/ui/modals/MatchResultsModal.tsx | 164 ++++++++++++-------- 1 file changed, 98 insertions(+), 66 deletions(-) diff --git a/fission/src/ui/modals/MatchResultsModal.tsx b/fission/src/ui/modals/MatchResultsModal.tsx index fa5db71f8a..fd69fba219 100644 --- a/fission/src/ui/modals/MatchResultsModal.tsx +++ b/fission/src/ui/modals/MatchResultsModal.tsx @@ -1,10 +1,8 @@ -import { Stack, styled, Typography } from "@mui/material" import { Button } from "../components/StyledComponents" import type React from "react" import { useEffect } from "react" import MatchMode from "@/systems/match_mode/MatchMode" import SimulationSystem from "@/systems/simulation/SimulationSystem" -import Label from "../components/Label" import type { ModalImplProps } from "../components/Modal" import { CloseType, useUIContext } from "../helpers/UIProviderHelpers" @@ -36,82 +34,116 @@ const getPerRobotScores = (): { redRobotScores: Entry[]; blueRobotScores: Entry[ return { redRobotScores, blueRobotScores } } -const LabelStyled = styled(Typography)<{ winnerColor: string; fontSize: string }>(({ winnerColor, fontSize }) => ({ - fontWeight: 700, - fontSize: fontSize, - margin: "0pt", - marginTop: "0.5rem", - color: winnerColor, -})) - const MatchResultsModal: React.FC> = ({ modal }) => { const { configureScreen, closeModal } = useUIContext() - const { message, color } = getMatchWinner() - - const entries: Entry[] = [ - { name: "Red Score", value: SimulationSystem.redScore }, - { name: "Blue Score", value: SimulationSystem.blueScore }, - ] + const { message } = getMatchWinner() const { redRobotScores, blueRobotScores } = getPerRobotScores() useEffect(() => { - configureScreen( - modal!, - { title: "Match Results", hideCancel: true, hideAccept: true, allowClickAway: false }, - {} - ) + configureScreen(modal!, { hideCancel: true, hideAccept: true, allowClickAway: false }, {}) }, []) + // placeholder for now, since we don't have a way to track scoring methods seperately + const breakdown: Array<{ label: string; red: number; blue: number }> = [ + { label: "LEAVE", red: 0, blue: 0 }, + { label: "CORAL", red: 0, blue: 0 }, + { label: "ALGAE", red: 0, blue: 0 }, + { label: "BARGE", red: 0, blue: 0 }, + { label: "PENALTY", red: 0, blue: 0 }, + ] + return ( - <> - - {message} - - - {entries.map(e => ( - - - - - ))} - - - Robot Score Contributions - - - Red Alliance - -
- {redRobotScores.map(e => ( - - - - - ))} +
+
+ Match Results
- - Blue Alliance - -
- {blueRobotScores.map(e => ( - - - - - ))} +
+
+
Red Alliance
+
+ {redRobotScores.length === 0 &&
No robots
} + {redRobotScores.map(e => ( +
+ {e.name} + {e.value} +
+ ))} +
+
+ +
+
+
+ {message.toUpperCase()} +
+
+ +
+
+ + {SimulationSystem.redScore} + +
+
+
+
Red
+
Category
+
Blue
+
+
+ {breakdown.map(row => ( +
+
{row.red}
+
{row.label}
+
{row.blue}
+
+ ))} +
+
+
+ + {SimulationSystem.blueScore} + +
+
+ +
+ +
+
+ +
+
Blue Alliance
+
+ {blueRobotScores.length === 0 &&
No robots
} + {blueRobotScores.map(e => ( +
+ {e.name} + {e.value} +
+ ))} +
+
- - +
) } From b961dc6f42a8f54463d02d9873f077f9f7184484 Mon Sep 17 00:00:00 2001 From: Aries Powvalla Date: Wed, 20 Aug 2025 15:13:59 -0700 Subject: [PATCH 2/3] replace placeholder with coming soon label --- fission/src/ui/modals/MatchResultsModal.tsx | 272 ++++++++++---------- 1 file changed, 139 insertions(+), 133 deletions(-) diff --git a/fission/src/ui/modals/MatchResultsModal.tsx b/fission/src/ui/modals/MatchResultsModal.tsx index fd69fba219..327fb7f62d 100644 --- a/fission/src/ui/modals/MatchResultsModal.tsx +++ b/fission/src/ui/modals/MatchResultsModal.tsx @@ -1,150 +1,156 @@ -import { Button } from "../components/StyledComponents" -import type React from "react" -import { useEffect } from "react" -import MatchMode from "@/systems/match_mode/MatchMode" -import SimulationSystem from "@/systems/simulation/SimulationSystem" -import type { ModalImplProps } from "../components/Modal" -import { CloseType, useUIContext } from "../helpers/UIProviderHelpers" +import type React from "react"; +import { useEffect } from "react"; +import MatchMode from "@/systems/match_mode/MatchMode"; +import SimulationSystem from "@/systems/simulation/SimulationSystem"; +import type { ModalImplProps } from "../components/Modal"; +import { Button } from "../components/StyledComponents"; +import { CloseType, useUIContext } from "../helpers/UIProviderHelpers"; type Entry = { - name: string - value: number -} + name: string; + value: number; +}; const getMatchWinner = (): { message: string; color: string } => { - if (SimulationSystem.redScore > SimulationSystem.blueScore) { - return { message: "Red Team Wins!", color: "#ff0000" } - } else if (SimulationSystem.blueScore > SimulationSystem.redScore) { - return { message: "Blue Team Wins!", color: "#1818ff" } - } else { - return { message: "It's a Tie!", color: "#ffffff" } - } -} + if (SimulationSystem.redScore > SimulationSystem.blueScore) { + return { message: "Red Team Wins!", color: "#ff0000" }; + } else if (SimulationSystem.blueScore > SimulationSystem.redScore) { + return { message: "Blue Team Wins!", color: "#1818ff" }; + } else { + return { message: "It's a Tie!", color: "#ffffff" }; + } +}; -const getPerRobotScores = (): { redRobotScores: Entry[]; blueRobotScores: Entry[] } => { - const redRobotScores: Entry[] = [] - const blueRobotScores: Entry[] = [] - SimulationSystem.perRobotScore.forEach((score, robot) => { - if (robot.alliance === "red") { - redRobotScores.push({ name: `${robot.nameTag?.text()} (${robot.assemblyName})`, value: score }) - } else { - blueRobotScores.push({ name: `${robot.nameTag?.text()} (${robot.assemblyName})`, value: score }) - } - }) - return { redRobotScores, blueRobotScores } -} +const getPerRobotScores = (): { + redRobotScores: Entry[]; + blueRobotScores: Entry[]; +} => { + const redRobotScores: Entry[] = []; + const blueRobotScores: Entry[] = []; + SimulationSystem.perRobotScore.forEach((score, robot) => { + if (robot.alliance === "red") { + redRobotScores.push({ + name: `${robot.nameTag?.text()} (${robot.assemblyName})`, + value: score, + }); + } else { + blueRobotScores.push({ + name: `${robot.nameTag?.text()} (${robot.assemblyName})`, + value: score, + }); + } + }); + return { redRobotScores, blueRobotScores }; +}; const MatchResultsModal: React.FC> = ({ modal }) => { - const { configureScreen, closeModal } = useUIContext() + const { configureScreen, closeModal } = useUIContext(); - const { message } = getMatchWinner() + const { message } = getMatchWinner(); - const { redRobotScores, blueRobotScores } = getPerRobotScores() + const { redRobotScores, blueRobotScores } = getPerRobotScores(); - useEffect(() => { - configureScreen(modal!, { hideCancel: true, hideAccept: true, allowClickAway: false }, {}) - }, []) + useEffect(() => { + configureScreen( + modal!, + { hideCancel: true, hideAccept: true, allowClickAway: false }, + {}, + ); + }, []); - // placeholder for now, since we don't have a way to track scoring methods seperately - const breakdown: Array<{ label: string; red: number; blue: number }> = [ - { label: "LEAVE", red: 0, blue: 0 }, - { label: "CORAL", red: 0, blue: 0 }, - { label: "ALGAE", red: 0, blue: 0 }, - { label: "BARGE", red: 0, blue: 0 }, - { label: "PENALTY", red: 0, blue: 0 }, - ] + // TODO + // const breakdown: Array<{ label: string; red: number; blue: number }> = [ + // { label: "LEAVE", red: 0, blue: 0 }, + // { label: "CORAL", red: 0, blue: 0 }, + // { label: "ALGAE", red: 0, blue: 0 }, + // { label: "BARGE", red: 0, blue: 0 }, + // { label: "PENALTY", red: 0, blue: 0 }, + // ] - return ( -
-
- Match Results -
-
-
-
Red Alliance
-
- {redRobotScores.length === 0 &&
No robots
} - {redRobotScores.map(e => ( -
- {e.name} - {e.value} -
- ))} -
-
+ return ( +
+
+ Match Results +
+
+
+
Red Alliance
+
+ {redRobotScores.length === 0 && ( +
No robots
+ )} + {redRobotScores.map((e) => ( +
+ {e.name} + {e.value} +
+ ))} +
+
-
-
-
- {message.toUpperCase()} -
-
+
+
+
+ {message.toUpperCase()} +
+
-
-
- - {SimulationSystem.redScore} - -
-
-
-
Red
-
Category
-
Blue
-
-
- {breakdown.map(row => ( -
-
{row.red}
-
{row.label}
-
{row.blue}
-
- ))} -
-
-
- - {SimulationSystem.blueScore} - -
-
+
+
+ + {SimulationSystem.redScore} + +
+
+ {/* Breakdown coming soon */} +
+ + Breakdown coming soon + +
+
+
+ + {SimulationSystem.blueScore} + +
+
-
- -
-
+
+ +
+
-
-
Blue Alliance
-
- {blueRobotScores.length === 0 &&
No robots
} - {blueRobotScores.map(e => ( -
- {e.name} - {e.value} -
- ))} -
-
-
-
- ) -} +
+
Blue Alliance
+
+ {blueRobotScores.length === 0 && ( +
No robots
+ )} + {blueRobotScores.map((e) => ( +
+ {e.name} + {e.value} +
+ ))} +
+
+
+
+ ); +}; -export default MatchResultsModal +export default MatchResultsModal; From d41dd4e2d9899e8461e6b03d8734ad8f2606af39 Mon Sep 17 00:00:00 2001 From: Aries Powvalla Date: Wed, 20 Aug 2025 15:14:14 -0700 Subject: [PATCH 3/3] chore: format --- fission/src/ui/modals/MatchResultsModal.tsx | 264 ++++++++++---------- 1 file changed, 127 insertions(+), 137 deletions(-) diff --git a/fission/src/ui/modals/MatchResultsModal.tsx b/fission/src/ui/modals/MatchResultsModal.tsx index 327fb7f62d..002b5b400d 100644 --- a/fission/src/ui/modals/MatchResultsModal.tsx +++ b/fission/src/ui/modals/MatchResultsModal.tsx @@ -1,156 +1,146 @@ -import type React from "react"; -import { useEffect } from "react"; -import MatchMode from "@/systems/match_mode/MatchMode"; -import SimulationSystem from "@/systems/simulation/SimulationSystem"; -import type { ModalImplProps } from "../components/Modal"; -import { Button } from "../components/StyledComponents"; -import { CloseType, useUIContext } from "../helpers/UIProviderHelpers"; +import type React from "react" +import { useEffect } from "react" +import MatchMode from "@/systems/match_mode/MatchMode" +import SimulationSystem from "@/systems/simulation/SimulationSystem" +import type { ModalImplProps } from "../components/Modal" +import { Button } from "../components/StyledComponents" +import { CloseType, useUIContext } from "../helpers/UIProviderHelpers" type Entry = { - name: string; - value: number; -}; + name: string + value: number +} const getMatchWinner = (): { message: string; color: string } => { - if (SimulationSystem.redScore > SimulationSystem.blueScore) { - return { message: "Red Team Wins!", color: "#ff0000" }; - } else if (SimulationSystem.blueScore > SimulationSystem.redScore) { - return { message: "Blue Team Wins!", color: "#1818ff" }; - } else { - return { message: "It's a Tie!", color: "#ffffff" }; - } -}; + if (SimulationSystem.redScore > SimulationSystem.blueScore) { + return { message: "Red Team Wins!", color: "#ff0000" } + } else if (SimulationSystem.blueScore > SimulationSystem.redScore) { + return { message: "Blue Team Wins!", color: "#1818ff" } + } else { + return { message: "It's a Tie!", color: "#ffffff" } + } +} const getPerRobotScores = (): { - redRobotScores: Entry[]; - blueRobotScores: Entry[]; + redRobotScores: Entry[] + blueRobotScores: Entry[] } => { - const redRobotScores: Entry[] = []; - const blueRobotScores: Entry[] = []; - SimulationSystem.perRobotScore.forEach((score, robot) => { - if (robot.alliance === "red") { - redRobotScores.push({ - name: `${robot.nameTag?.text()} (${robot.assemblyName})`, - value: score, - }); - } else { - blueRobotScores.push({ - name: `${robot.nameTag?.text()} (${robot.assemblyName})`, - value: score, - }); - } - }); - return { redRobotScores, blueRobotScores }; -}; + const redRobotScores: Entry[] = [] + const blueRobotScores: Entry[] = [] + SimulationSystem.perRobotScore.forEach((score, robot) => { + if (robot.alliance === "red") { + redRobotScores.push({ + name: `${robot.nameTag?.text()} (${robot.assemblyName})`, + value: score, + }) + } else { + blueRobotScores.push({ + name: `${robot.nameTag?.text()} (${robot.assemblyName})`, + value: score, + }) + } + }) + return { redRobotScores, blueRobotScores } +} const MatchResultsModal: React.FC> = ({ modal }) => { - const { configureScreen, closeModal } = useUIContext(); + const { configureScreen, closeModal } = useUIContext() - const { message } = getMatchWinner(); + const { message } = getMatchWinner() - const { redRobotScores, blueRobotScores } = getPerRobotScores(); + const { redRobotScores, blueRobotScores } = getPerRobotScores() - useEffect(() => { - configureScreen( - modal!, - { hideCancel: true, hideAccept: true, allowClickAway: false }, - {}, - ); - }, []); + useEffect(() => { + configureScreen(modal!, { hideCancel: true, hideAccept: true, allowClickAway: false }, {}) + }, []) - // TODO - // const breakdown: Array<{ label: string; red: number; blue: number }> = [ - // { label: "LEAVE", red: 0, blue: 0 }, - // { label: "CORAL", red: 0, blue: 0 }, - // { label: "ALGAE", red: 0, blue: 0 }, - // { label: "BARGE", red: 0, blue: 0 }, - // { label: "PENALTY", red: 0, blue: 0 }, - // ] + // TODO + // const breakdown: Array<{ label: string; red: number; blue: number }> = [ + // { label: "LEAVE", red: 0, blue: 0 }, + // { label: "CORAL", red: 0, blue: 0 }, + // { label: "ALGAE", red: 0, blue: 0 }, + // { label: "BARGE", red: 0, blue: 0 }, + // { label: "PENALTY", red: 0, blue: 0 }, + // ] - return ( -
-
- Match Results -
-
-
-
Red Alliance
-
- {redRobotScores.length === 0 && ( -
No robots
- )} - {redRobotScores.map((e) => ( -
- {e.name} - {e.value} -
- ))} -
-
+ return ( +
+
+ Match Results +
+
+
+
Red Alliance
+
+ {redRobotScores.length === 0 &&
No robots
} + {redRobotScores.map(e => ( +
+ {e.name} + {e.value} +
+ ))} +
+
-
-
-
- {message.toUpperCase()} -
-
+
+
+
+ {message.toUpperCase()} +
+
-
-
- - {SimulationSystem.redScore} - -
-
- {/* Breakdown coming soon */} -
- - Breakdown coming soon - -
-
-
- - {SimulationSystem.blueScore} - -
-
+
+
+ + {SimulationSystem.redScore} + +
+
+ {/* Breakdown coming soon */} +
+ Breakdown coming soon +
+
+
+ + {SimulationSystem.blueScore} + +
+
-
- -
-
+
+ +
+
-
-
Blue Alliance
-
- {blueRobotScores.length === 0 && ( -
No robots
- )} - {blueRobotScores.map((e) => ( -
- {e.name} - {e.value} -
- ))} -
-
-
-
- ); -}; +
+
Blue Alliance
+
+ {blueRobotScores.length === 0 &&
No robots
} + {blueRobotScores.map(e => ( +
+ {e.name} + {e.value} +
+ ))} +
+
+
+
+ ) +} -export default MatchResultsModal; +export default MatchResultsModal