Skip to content

Match Results Screen Overhaul [AARD-1896] #1283

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: dev
Choose a base branch
from
Open

Match Results Screen Overhaul [AARD-1896] #1283

Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
fad5108
Completely redo the Math Results screen
itspvty Aug 18, 2025
b961dc6
replace placeholder with coming soon label
itspvty Aug 20, 2025
d41dd4e
chore: format
itspvty Aug 20, 2025
13ce5e6
Merge branch 'dev' into aries/1896/scoreboard-ui
itspvty Aug 21, 2025
cf2312e
Merge branch 'dev' into aries/1896/scoreboard-ui
itspvty Aug 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
168 changes: 98 additions & 70 deletions fission/src/ui/modals/MatchResultsModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
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 { Button } from "../components/StyledComponents"
import { CloseType, useUIContext } from "../helpers/UIProviderHelpers"

type Entry = {
Expand All @@ -23,95 +21,125 @@ const getMatchWinner = (): { message: string; color: string } => {
}
}

const getPerRobotScores = (): { redRobotScores: Entry[]; blueRobotScores: Entry[] } => {
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 })
redRobotScores.push({
name: `${robot.nameTag?.text()} (${robot.assemblyName})`,
value: score,
})
} else {
blueRobotScores.push({ name: `${robot.nameTag?.text()} (${robot.assemblyName})`, value: score })
blueRobotScores.push({
name: `${robot.nameTag?.text()} (${robot.assemblyName})`,
value: score,
})
}
})
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<ModalImplProps<void, void>> = ({ 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 }, {})
}, [])

// 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 (
<>
<LabelStyled winnerColor={color} fontSize="1.5rem">
{message}
</LabelStyled>
<Stack>
{entries.map(e => (
<Stack key={e.name} direction="row">
<Label size="md">{e.name}</Label>
<Label size="md">{e.value}</Label>
</Stack>
))}
</Stack>
<LabelStyled winnerColor={"#ffffff"} fontSize="1.25rem">
Robot Score Contributions
</LabelStyled>
<LabelStyled winnerColor={"#ff0000"} fontSize="1rem">
Red Alliance
</LabelStyled>
<div className="flex flex-col">
{redRobotScores.map(e => (
<Stack key={e.name} direction="row">
<Label size="md">{e.name}</Label>
<Label size="md">{e.value}</Label>
</Stack>
))}
<div className="w-[90vw] h-[80vh] text-white rounded-lg overflow-hidden select-none">
<div className="w-full bg-[#0d1b2a] px-4 py-2 text-center text-sm tracking-widest uppercase">
Match Results
</div>
<LabelStyled winnerColor={"#1818ff"} fontSize="1rem">
Blue Alliance
</LabelStyled>
<div className="flex flex-col">
{blueRobotScores.map(e => (
<Stack key={e.name} direction="row">
<Label size="md">{e.name}</Label>
<Label size="md">{e.value}</Label>
</Stack>
))}
<div className="w-full h-[calc(80vh-2.25rem)] flex flex-row bg-[#0b2233]">
<div className="w-[20%] h-full bg-[#7a1010] flex flex-col p-3 gap-2">
<div className="text-xs font-bold opacity-80">Red Alliance</div>
<div className="flex-1 flex flex-col gap-2 overflow-auto">
{redRobotScores.length === 0 && <div className="text-sm opacity-70">No robots</div>}
{redRobotScores.map(e => (
<div
key={e.name}
className="flex flex-row justify-between items-center bg-[#a41616] rounded px-2 py-1"
>
<span className="text-sm">{e.name}</span>
<span className="text-sm font-bold">{e.value}</span>
</div>
))}
</div>
</div>

<div className="w-[60%] h-full flex flex-col">
<div className="w-full flex justify-center mt-3">
<div className="bg-[#ffd000] text-black font-extrabold px-4 py-1 rounded-sm text-lg">
{message.toUpperCase()}
</div>
</div>

<div className="flex flex-row items-stretch justify-between gap-3 px-4 py-3">
<div className="flex-1 bg-[#be1e2d] rounded-md flex items-center justify-center">
<span className="text-[6rem] leading-none font-extrabold drop-shadow-lg">
{SimulationSystem.redScore}
</span>
</div>
<div className="w-[38%] bg-[#e6e6e6] text-black rounded-md overflow-hidden self-stretch">
{/* Breakdown coming soon */}
<div className="flex flex-col items-center justify-center h-full py-8">
<span className="text-base font-semibold text-gray-600">Breakdown coming soon</span>
</div>
</div>
<div className="flex-1 bg-[#1f4fbf] rounded-md flex items-center justify-center">
<span className="text-[6rem] leading-none font-extrabold drop-shadow-lg">
{SimulationSystem.blueScore}
</span>
</div>
</div>

<div className="mt-auto px-4 pb-4 flex items-center justify-end">
<Button
onClick={() => {
closeModal(CloseType.Accept)
MatchMode.getInstance().sandboxModeStart()
}}
>
Back to Sandbox Mode
</Button>
</div>
</div>

<div className="w-[20%] h-full bg-[#10346b] flex flex-col p-3 gap-2">
<div className="text-xs font-bold opacity-80">Blue Alliance</div>
<div className="flex-1 flex flex-col gap-2 overflow-auto">
{blueRobotScores.length === 0 && <div className="text-sm opacity-70">No robots</div>}
{blueRobotScores.map(e => (
<div
key={e.name}
className="flex flex-row justify-between items-center bg-[#1f4fbf] rounded px-2 py-1"
>
<span className="text-sm">{e.name}</span>
<span className="text-sm font-bold">{e.value}</span>
</div>
))}
</div>
</div>
</div>
<Button
onClick={() => {
closeModal(CloseType.Accept)
MatchMode.getInstance().sandboxModeStart()
}}
className="w-full"
>
Back to Sandbox Mode
</Button>
</>
</div>
)
}

Expand Down
Loading