Skip to content

Commit b961dc6

Browse files
itspvtyitspvty
committed
replace placeholder with coming soon label
1 parent fad5108 commit b961dc6

File tree

1 file changed

+139
-133
lines changed

1 file changed

+139
-133
lines changed

‎fission/src/ui/modals/MatchResultsModal.tsx‎

Lines changed: 139 additions & 133 deletions
Original file line numberDiff line numberDiff line change
@@ -1,150 +1,156 @@
1-
import { Button } from "../components/StyledComponents"
2-
import type React from "react"
3-
import { useEffect } from "react"
4-
import MatchMode from "@/systems/match_mode/MatchMode"
5-
import SimulationSystem from "@/systems/simulation/SimulationSystem"
6-
import type { ModalImplProps } from "../components/Modal"
7-
import { CloseType, useUIContext } from "../helpers/UIProviderHelpers"
1+
import type React from "react";
2+
import { useEffect } from "react";
3+
import MatchMode from "@/systems/match_mode/MatchMode";
4+
import SimulationSystem from "@/systems/simulation/SimulationSystem";
5+
import type { ModalImplProps } from "../components/Modal";
6+
import { Button } from "../components/StyledComponents";
7+
import { CloseType, useUIContext } from "../helpers/UIProviderHelpers";
88

99
type Entry = {
10-
name: string
11-
value: number
12-
}
10+
name: string;
11+
value: number;
12+
};
1313

1414
const getMatchWinner = (): { message: string; color: string } => {
15-
if (SimulationSystem.redScore > SimulationSystem.blueScore) {
16-
return { message: "Red Team Wins!", color: "#ff0000" }
17-
} else if (SimulationSystem.blueScore > SimulationSystem.redScore) {
18-
return { message: "Blue Team Wins!", color: "#1818ff" }
19-
} else {
20-
return { message: "It's a Tie!", color: "#ffffff" }
21-
}
22-
}
15+
if (SimulationSystem.redScore > SimulationSystem.blueScore) {
16+
return { message: "Red Team Wins!", color: "#ff0000" };
17+
} else if (SimulationSystem.blueScore > SimulationSystem.redScore) {
18+
return { message: "Blue Team Wins!", color: "#1818ff" };
19+
} else {
20+
return { message: "It's a Tie!", color: "#ffffff" };
21+
}
22+
};
2323

24-
const getPerRobotScores = (): { redRobotScores: Entry[]; blueRobotScores: Entry[] } => {
25-
const redRobotScores: Entry[] = []
26-
const blueRobotScores: Entry[] = []
27-
SimulationSystem.perRobotScore.forEach((score, robot) => {
28-
if (robot.alliance === "red") {
29-
redRobotScores.push({ name: `${robot.nameTag?.text()} (${robot.assemblyName})`, value: score })
30-
} else {
31-
blueRobotScores.push({ name: `${robot.nameTag?.text()} (${robot.assemblyName})`, value: score })
32-
}
33-
})
34-
return { redRobotScores, blueRobotScores }
35-
}
24+
const getPerRobotScores = (): {
25+
redRobotScores: Entry[];
26+
blueRobotScores: Entry[];
27+
} => {
28+
const redRobotScores: Entry[] = [];
29+
const blueRobotScores: Entry[] = [];
30+
SimulationSystem.perRobotScore.forEach((score, robot) => {
31+
if (robot.alliance === "red") {
32+
redRobotScores.push({
33+
name: `${robot.nameTag?.text()} (${robot.assemblyName})`,
34+
value: score,
35+
});
36+
} else {
37+
blueRobotScores.push({
38+
name: `${robot.nameTag?.text()} (${robot.assemblyName})`,
39+
value: score,
40+
});
41+
}
42+
});
43+
return { redRobotScores, blueRobotScores };
44+
};
3645

3746
const MatchResultsModal: React.FC<ModalImplProps<void, void>> = ({ modal }) => {
38-
const { configureScreen, closeModal } = useUIContext()
47+
const { configureScreen, closeModal } = useUIContext();
3948

40-
const { message } = getMatchWinner()
49+
const { message } = getMatchWinner();
4150

42-
const { redRobotScores, blueRobotScores } = getPerRobotScores()
51+
const { redRobotScores, blueRobotScores } = getPerRobotScores();
4352

44-
useEffect(() => {
45-
configureScreen(modal!, { hideCancel: true, hideAccept: true, allowClickAway: false }, {})
46-
}, [])
53+
useEffect(() => {
54+
configureScreen(
55+
modal!,
56+
{ hideCancel: true, hideAccept: true, allowClickAway: false },
57+
{},
58+
);
59+
}, []);
4760

48-
// placeholder for now, since we don't have a way to track scoring methods seperately
49-
const breakdown: Array<{ label: string; red: number; blue: number }> = [
50-
{ label: "LEAVE", red: 0, blue: 0 },
51-
{ label: "CORAL", red: 0, blue: 0 },
52-
{ label: "ALGAE", red: 0, blue: 0 },
53-
{ label: "BARGE", red: 0, blue: 0 },
54-
{ label: "PENALTY", red: 0, blue: 0 },
55-
]
61+
// TODO
62+
// const breakdown: Array<{ label: string; red: number; blue: number }> = [
63+
// { label: "LEAVE", red: 0, blue: 0 },
64+
// { label: "CORAL", red: 0, blue: 0 },
65+
// { label: "ALGAE", red: 0, blue: 0 },
66+
// { label: "BARGE", red: 0, blue: 0 },
67+
// { label: "PENALTY", red: 0, blue: 0 },
68+
// ]
5669

57-
return (
58-
<div className="w-[90vw] h-[80vh] text-white rounded-lg overflow-hidden select-none">
59-
<div className="w-full bg-[#0d1b2a] px-4 py-2 text-center text-sm tracking-widest uppercase">
60-
Match Results
61-
</div>
62-
<div className="w-full h-[calc(80vh-2.25rem)] flex flex-row bg-[#0b2233]">
63-
<div className="w-[20%] h-full bg-[#7a1010] flex flex-col p-3 gap-2">
64-
<div className="text-xs font-bold opacity-80">Red Alliance</div>
65-
<div className="flex-1 flex flex-col gap-2 overflow-auto">
66-
{redRobotScores.length === 0 && <div className="text-sm opacity-70">No robots</div>}
67-
{redRobotScores.map(e => (
68-
<div
69-
key={e.name}
70-
className="flex flex-row justify-between items-center bg-[#a41616] rounded px-2 py-1"
71-
>
72-
<span className="text-sm">{e.name}</span>
73-
<span className="text-sm font-bold">{e.value}</span>
74-
</div>
75-
))}
76-
</div>
77-
</div>
70+
return (
71+
<div className="w-[90vw] h-[80vh] text-white rounded-lg overflow-hidden select-none">
72+
<div className="w-full bg-[#0d1b2a] px-4 py-2 text-center text-sm tracking-widest uppercase">
73+
Match Results
74+
</div>
75+
<div className="w-full h-[calc(80vh-2.25rem)] flex flex-row bg-[#0b2233]">
76+
<div className="w-[20%] h-full bg-[#7a1010] flex flex-col p-3 gap-2">
77+
<div className="text-xs font-bold opacity-80">Red Alliance</div>
78+
<div className="flex-1 flex flex-col gap-2 overflow-auto">
79+
{redRobotScores.length === 0 && (
80+
<div className="text-sm opacity-70">No robots</div>
81+
)}
82+
{redRobotScores.map((e) => (
83+
<div
84+
key={e.name}
85+
className="flex flex-row justify-between items-center bg-[#a41616] rounded px-2 py-1"
86+
>
87+
<span className="text-sm">{e.name}</span>
88+
<span className="text-sm font-bold">{e.value}</span>
89+
</div>
90+
))}
91+
</div>
92+
</div>
7893

79-
<div className="w-[60%] h-full flex flex-col">
80-
<div className="w-full flex justify-center mt-3">
81-
<div className="bg-[#ffd000] text-black font-extrabold px-4 py-1 rounded-sm text-lg">
82-
{message.toUpperCase()}
83-
</div>
84-
</div>
94+
<div className="w-[60%] h-full flex flex-col">
95+
<div className="w-full flex justify-center mt-3">
96+
<div className="bg-[#ffd000] text-black font-extrabold px-4 py-1 rounded-sm text-lg">
97+
{message.toUpperCase()}
98+
</div>
99+
</div>
85100

86-
<div className="flex flex-row items-stretch justify-between gap-3 px-4 py-3">
87-
<div className="flex-1 bg-[#be1e2d] rounded-md flex items-center justify-center">
88-
<span className="text-[6rem] leading-none font-extrabold drop-shadow-lg">
89-
{SimulationSystem.redScore}
90-
</span>
91-
</div>
92-
<div className="w-[38%] bg-[#e6e6e6] text-black rounded-md overflow-hidden self-stretch">
93-
<div className="grid grid-cols-3 text-center text-xs font-bold tracking-widest">
94-
<div className="py-2 bg-white">Red</div>
95-
<div className="py-2 bg-[#e6e6e6]">Category</div>
96-
<div className="py-2 bg-white">Blue</div>
97-
</div>
98-
<div className="flex flex-col">
99-
{breakdown.map(row => (
100-
<div
101-
key={row.label}
102-
className="grid grid-cols-3 items-center text-center border-t border-[#d0d0d0] text-base"
103-
>
104-
<div className="py-2 font-semibold text-[#be1e2d]">{row.red}</div>
105-
<div className="py-2 font-bold">{row.label}</div>
106-
<div className="py-2 font-semibold text-[#1f4fbf]">{row.blue}</div>
107-
</div>
108-
))}
109-
</div>
110-
</div>
111-
<div className="flex-1 bg-[#1f4fbf] rounded-md flex items-center justify-center">
112-
<span className="text-[6rem] leading-none font-extrabold drop-shadow-lg">
113-
{SimulationSystem.blueScore}
114-
</span>
115-
</div>
116-
</div>
101+
<div className="flex flex-row items-stretch justify-between gap-3 px-4 py-3">
102+
<div className="flex-1 bg-[#be1e2d] rounded-md flex items-center justify-center">
103+
<span className="text-[6rem] leading-none font-extrabold drop-shadow-lg">
104+
{SimulationSystem.redScore}
105+
</span>
106+
</div>
107+
<div className="w-[38%] bg-[#e6e6e6] text-black rounded-md overflow-hidden self-stretch">
108+
{/* Breakdown coming soon */}
109+
<div className="flex flex-col items-center justify-center h-full py-8">
110+
<span className="text-base font-semibold text-gray-600">
111+
Breakdown coming soon
112+
</span>
113+
</div>
114+
</div>
115+
<div className="flex-1 bg-[#1f4fbf] rounded-md flex items-center justify-center">
116+
<span className="text-[6rem] leading-none font-extrabold drop-shadow-lg">
117+
{SimulationSystem.blueScore}
118+
</span>
119+
</div>
120+
</div>
117121

118-
<div className="mt-auto px-4 pb-4 flex items-center justify-end">
119-
<Button
120-
onClick={() => {
121-
closeModal(CloseType.Accept)
122-
MatchMode.getInstance().sandboxModeStart()
123-
}}
124-
>
125-
Back to Sandbox Mode
126-
</Button>
127-
</div>
128-
</div>
122+
<div className="mt-auto px-4 pb-4 flex items-center justify-end">
123+
<Button
124+
onClick={() => {
125+
closeModal(CloseType.Accept);
126+
MatchMode.getInstance().sandboxModeStart();
127+
}}
128+
>
129+
Back to Sandbox Mode
130+
</Button>
131+
</div>
132+
</div>
129133

130-
<div className="w-[20%] h-full bg-[#10346b] flex flex-col p-3 gap-2">
131-
<div className="text-xs font-bold opacity-80">Blue Alliance</div>
132-
<div className="flex-1 flex flex-col gap-2 overflow-auto">
133-
{blueRobotScores.length === 0 && <div className="text-sm opacity-70">No robots</div>}
134-
{blueRobotScores.map(e => (
135-
<div
136-
key={e.name}
137-
className="flex flex-row justify-between items-center bg-[#1f4fbf] rounded px-2 py-1"
138-
>
139-
<span className="text-sm">{e.name}</span>
140-
<span className="text-sm font-bold">{e.value}</span>
141-
</div>
142-
))}
143-
</div>
144-
</div>
145-
</div>
146-
</div>
147-
)
148-
}
134+
<div className="w-[20%] h-full bg-[#10346b] flex flex-col p-3 gap-2">
135+
<div className="text-xs font-bold opacity-80">Blue Alliance</div>
136+
<div className="flex-1 flex flex-col gap-2 overflow-auto">
137+
{blueRobotScores.length === 0 && (
138+
<div className="text-sm opacity-70">No robots</div>
139+
)}
140+
{blueRobotScores.map((e) => (
141+
<div
142+
key={e.name}
143+
className="flex flex-row justify-between items-center bg-[#1f4fbf] rounded px-2 py-1"
144+
>
145+
<span className="text-sm">{e.name}</span>
146+
<span className="text-sm font-bold">{e.value}</span>
147+
</div>
148+
))}
149+
</div>
150+
</div>
151+
</div>
152+
</div>
153+
);
154+
};
149155

150-
export default MatchResultsModal
156+
export default MatchResultsModal;

0 commit comments

Comments
 (0)