|
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"; |
| 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" |
8 | 8 |
|
9 | 9 | type Entry = {
|
10 |
| - name: string; |
11 |
| - value: number; |
12 |
| -}; |
| 10 | + name: string |
| 11 | + value: number |
| 12 | +} |
13 | 13 |
|
14 | 14 | 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 | +} |
23 | 23 |
|
24 | 24 | const getPerRobotScores = (): {
|
25 |
| - redRobotScores: Entry[]; |
26 |
| - blueRobotScores: Entry[]; |
| 25 | + redRobotScores: Entry[] |
| 26 | + blueRobotScores: Entry[] |
27 | 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 |
| -}; |
| 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 | +} |
45 | 45 |
|
46 | 46 | const MatchResultsModal: React.FC<ModalImplProps<void, void>> = ({ modal }) => {
|
47 |
| - const { configureScreen, closeModal } = useUIContext(); |
| 47 | + const { configureScreen, closeModal } = useUIContext() |
48 | 48 |
|
49 |
| - const { message } = getMatchWinner(); |
| 49 | + const { message } = getMatchWinner() |
50 | 50 |
|
51 |
| - const { redRobotScores, blueRobotScores } = getPerRobotScores(); |
| 51 | + const { redRobotScores, blueRobotScores } = getPerRobotScores() |
52 | 52 |
|
53 |
| - useEffect(() => { |
54 |
| - configureScreen( |
55 |
| - modal!, |
56 |
| - { hideCancel: true, hideAccept: true, allowClickAway: false }, |
57 |
| - {}, |
58 |
| - ); |
59 |
| - }, []); |
| 53 | + useEffect(() => { |
| 54 | + configureScreen(modal!, { hideCancel: true, hideAccept: true, allowClickAway: false }, {}) |
| 55 | + }, []) |
60 | 56 |
|
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 |
| - // ] |
| 57 | + // TODO |
| 58 | + // const breakdown: Array<{ label: string; red: number; blue: number }> = [ |
| 59 | + // { label: "LEAVE", red: 0, blue: 0 }, |
| 60 | + // { label: "CORAL", red: 0, blue: 0 }, |
| 61 | + // { label: "ALGAE", red: 0, blue: 0 }, |
| 62 | + // { label: "BARGE", red: 0, blue: 0 }, |
| 63 | + // { label: "PENALTY", red: 0, blue: 0 }, |
| 64 | + // ] |
69 | 65 |
|
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> |
| 66 | + return ( |
| 67 | + <div className="w-[90vw] h-[80vh] text-white rounded-lg overflow-hidden select-none"> |
| 68 | + <div className="w-full bg-[#0d1b2a] px-4 py-2 text-center text-sm tracking-widest uppercase"> |
| 69 | + Match Results |
| 70 | + </div> |
| 71 | + <div className="w-full h-[calc(80vh-2.25rem)] flex flex-row bg-[#0b2233]"> |
| 72 | + <div className="w-[20%] h-full bg-[#7a1010] flex flex-col p-3 gap-2"> |
| 73 | + <div className="text-xs font-bold opacity-80">Red Alliance</div> |
| 74 | + <div className="flex-1 flex flex-col gap-2 overflow-auto"> |
| 75 | + {redRobotScores.length === 0 && <div className="text-sm opacity-70">No robots</div>} |
| 76 | + {redRobotScores.map(e => ( |
| 77 | + <div |
| 78 | + key={e.name} |
| 79 | + className="flex flex-row justify-between items-center bg-[#a41616] rounded px-2 py-1" |
| 80 | + > |
| 81 | + <span className="text-sm">{e.name}</span> |
| 82 | + <span className="text-sm font-bold">{e.value}</span> |
| 83 | + </div> |
| 84 | + ))} |
| 85 | + </div> |
| 86 | + </div> |
93 | 87 |
|
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> |
| 88 | + <div className="w-[60%] h-full flex flex-col"> |
| 89 | + <div className="w-full flex justify-center mt-3"> |
| 90 | + <div className="bg-[#ffd000] text-black font-extrabold px-4 py-1 rounded-sm text-lg"> |
| 91 | + {message.toUpperCase()} |
| 92 | + </div> |
| 93 | + </div> |
100 | 94 |
|
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> |
| 95 | + <div className="flex flex-row items-stretch justify-between gap-3 px-4 py-3"> |
| 96 | + <div className="flex-1 bg-[#be1e2d] rounded-md flex items-center justify-center"> |
| 97 | + <span className="text-[6rem] leading-none font-extrabold drop-shadow-lg"> |
| 98 | + {SimulationSystem.redScore} |
| 99 | + </span> |
| 100 | + </div> |
| 101 | + <div className="w-[38%] bg-[#e6e6e6] text-black rounded-md overflow-hidden self-stretch"> |
| 102 | + {/* Breakdown coming soon */} |
| 103 | + <div className="flex flex-col items-center justify-center h-full py-8"> |
| 104 | + <span className="text-base font-semibold text-gray-600">Breakdown coming soon</span> |
| 105 | + </div> |
| 106 | + </div> |
| 107 | + <div className="flex-1 bg-[#1f4fbf] rounded-md flex items-center justify-center"> |
| 108 | + <span className="text-[6rem] leading-none font-extrabold drop-shadow-lg"> |
| 109 | + {SimulationSystem.blueScore} |
| 110 | + </span> |
| 111 | + </div> |
| 112 | + </div> |
121 | 113 |
|
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> |
| 114 | + <div className="mt-auto px-4 pb-4 flex items-center justify-end"> |
| 115 | + <Button |
| 116 | + onClick={() => { |
| 117 | + closeModal(CloseType.Accept) |
| 118 | + MatchMode.getInstance().sandboxModeStart() |
| 119 | + }} |
| 120 | + > |
| 121 | + Back to Sandbox Mode |
| 122 | + </Button> |
| 123 | + </div> |
| 124 | + </div> |
133 | 125 |
|
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 |
| -}; |
| 126 | + <div className="w-[20%] h-full bg-[#10346b] flex flex-col p-3 gap-2"> |
| 127 | + <div className="text-xs font-bold opacity-80">Blue Alliance</div> |
| 128 | + <div className="flex-1 flex flex-col gap-2 overflow-auto"> |
| 129 | + {blueRobotScores.length === 0 && <div className="text-sm opacity-70">No robots</div>} |
| 130 | + {blueRobotScores.map(e => ( |
| 131 | + <div |
| 132 | + key={e.name} |
| 133 | + className="flex flex-row justify-between items-center bg-[#1f4fbf] rounded px-2 py-1" |
| 134 | + > |
| 135 | + <span className="text-sm">{e.name}</span> |
| 136 | + <span className="text-sm font-bold">{e.value}</span> |
| 137 | + </div> |
| 138 | + ))} |
| 139 | + </div> |
| 140 | + </div> |
| 141 | + </div> |
| 142 | + </div> |
| 143 | + ) |
| 144 | +} |
155 | 145 |
|
156 |
| -export default MatchResultsModal; |
| 146 | +export default MatchResultsModal |
0 commit comments