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 1 commit
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
164 changes: 98 additions & 66 deletions fission/src/ui/modals/MatchResultsModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"

Expand Down Expand Up @@ -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<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 }, {})
}, [])

// 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 (
<>
<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">
<div className="grid grid-cols-3 text-center text-xs font-bold tracking-widest">
<div className="py-2 bg-white">Red</div>
<div className="py-2 bg-[#e6e6e6]">Category</div>
<div className="py-2 bg-white">Blue</div>
</div>
<div className="flex flex-col">
{breakdown.map(row => (
<div
key={row.label}
className="grid grid-cols-3 items-center text-center border-t border-[#d0d0d0] text-base"
>
<div className="py-2 font-semibold text-[#be1e2d]">{row.red}</div>
<div className="py-2 font-bold">{row.label}</div>
<div className="py-2 font-semibold text-[#1f4fbf]">{row.blue}</div>
</div>
))}
</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