@@ -47,7 +47,7 @@ function ScoreCalculator() {
4747 const [ Deep , setDeep ] = useState ( 0 ) ;
4848 const [ Shallow , setShallow ] = useState ( 0 ) ;
4949
50- const autoPoints = autoLeave * 3 ;
50+ const autoPoints = autoLeave * 3 + autoCoral1 * 3 + autoCoral2 * 4 + autoCoral3 * 6 + autoCoral4 * 7 + autoAlgaeProcessor * 6 + autoAlgaeNet * 4 ;
5151 const CoralPoints =
5252 autoCoral1 * 3 + autoCoral2 * 4 + autoCoral3 * 6 + autoCoral4 * 7 + teleCoral1 * 2 + teleCoral2 * 3 + teleCoral3 * 4 + teleCoral4 * 5 ;
5353 const AlgaePoints =
@@ -59,6 +59,9 @@ function ScoreCalculator() {
5959 CoralPoints +
6060 AlgaePoints +
6161 cagePoints ;
62+ const autoCoralTotal = autoCoral1 * 3 + autoCoral2 * 4 + autoCoral3 * 6 + autoCoral4 * 7 ;
63+ const teleCoralTotal = teleCoral1 * 2 + teleCoral2 * 3 + teleCoral3 * 4 + teleCoral4 * 5 ;
64+ const teleopPoints = teleCoralTotal + cagePoints + teleAlgaeNet * 4 + teleAlgaeProcessor * 6 ;
6265
6366 const handleReset = ( ) => {
6467 setAutoLeave ( 0 ) ;
@@ -186,36 +189,39 @@ function ScoreCalculator() {
186189
187190 </ div >
188191 </ div >
192+
193+ < div className = 'grid grid-cols-12 justify-center py-2 bg-gray-800 text-black-100 text-xl' >
194+ < p className = 'col-span-3 border-green-800 border-4 bg-green-400 px-3 py-2 text-center' > Auto Leave</ p >
195+ < p className = 'col-span-9 border-green-800 border-4 bg-green-300 px-3 py-2 text-center' > Points: { autoLeave * 3 } </ p >
196+ < p className = 'col-span-3 border-green-800 border-4 bg-green-500 px-3 py-2 text-center' > Auto Coral</ p >
197+ < p className = 'col-span-1 border-green-800 border-4 bg-green-400 px-3 py-2' > L1: { autoCoral1 } </ p >
198+ < p className = 'col-span-1 border-green-800 border-4 bg-green-400 px-3 py-2' > L2: { autoCoral2 } </ p >
199+ < p className = 'col-span-1 border-green-800 border-4 bg-green-400 px-3 py-2' > L3: { autoCoral3 } </ p >
200+ < p className = 'col-span-1 border-green-800 border-4 bg-green-400 px-3 py-2' > L4: { autoCoral4 } </ p >
201+ < p className = 'col-span-5 border-green-800 border-4 bg-green-400 px-3 py-2 text-center' > Points: { autoCoralTotal } </ p >
202+ < p className = 'col-span-3 border-green-900 border-4 bg-green-400 px-3 py-2 text-center font-bold' > Total Auto</ p >
203+ < p className = 'col-span-9 border-green-900 border-4 bg-green-300 px-3 py-2 text-center font-bold' > Points: { autoPoints } </ p >
204+ < p className = 'col-span-3 border-green-800 border-4 bg-green-500 px-3 py-2 text-center' > Teleop Coral</ p >
205+ < p className = 'col-span-1 border-green-800 border-4 bg-green-400 px-3 py-2' > L1: { teleCoral1 + autoCoral1 } </ p >
206+ < p className = 'col-span-1 border-green-800 border-4 bg-green-400 px-3 py-2' > L2: { teleCoral2 + autoCoral2 } </ p >
207+ < p className = 'col-span-1 border-green-800 border-4 bg-green-400 px-3 py-2' > L3: { teleCoral3 + autoCoral3 } </ p >
208+ < p className = 'col-span-1 border-green-800 border-4 bg-green-400 px-3 py-2' > L4: { teleCoral4 + autoCoral4 } </ p >
209+ < p className = 'col-span-5 border-green-800 border-4 bg-green-400 px-3 py-2 text-center' > Points: { teleCoralTotal } </ p >
210+ < p className = 'col-span-3 border-green-800 border-4 bg-green-400 px-3 py-2 text-center' > Algae</ p >
211+ < p className = 'col-span-2 border-green-800 border-4 bg-green-300 px-3 py-2' > Net: { teleAlgaeNet + autoAlgaeNet } </ p >
212+ < p className = 'col-span-2 border-green-800 border-4 bg-green-300 px-3 py-2' > Processor: { teleAlgaeProcessor + autoAlgaeProcessor } </ p >
213+ < p className = 'col-span-5 border-green-800 border-4 bg-green-300 px-3 py-2 text-center' > Points: { AlgaePoints } </ p >
214+ < p className = 'col-span-3 border-green-800 border-4 bg-green-500 px-3 py-2 text-center' > Barge</ p >
215+ < div className = 'col-span-4 flex' >
216+ < p className = 'border-green-800 border-4 bg-green-400 px-3 py-2 w-80' > Park: { park } </ p >
217+ < p className = 'border-green-800 border-4 bg-green-400 px-3 py-2 w-80' > Deep: { Deep } </ p >
218+ < p className = 'border-green-800 border-4 bg-green-400 px-3 py-2 w-80' > Shallow: { Shallow } </ p >
219+ </ div >
220+ < p className = 'col-span-5 border-green-800 border-4 bg-green-400 px-3 py-2 text-center' > Points: { cagePoints } </ p >
221+ < p className = 'col-span-3 border-green-900 border-4 bg-green-400 px-3 py-2 text-center font-bold' > Total Teleop</ p >
222+ < p className = 'col-span-9 border-green-900 border-4 bg-green-300 px-3 py-2 text-center font-bold' > Points: { teleopPoints } </ p >
189223
190- < div className = 'col-span-2 grid grid-cols-2 justify-center gap-2 py-2 bg-gray-800' >
191- < p className = 'text-black-100 text-md rounded-md border-green-800 bg-green-400 px-3 py-2 text-center' >
192- Leave:{ ' ' }
193- < span className = 'rounded-lg bg-black/15 p-2 py-1' >
194- { autoPoints }
195- </ span >
196- </ p >
197-
198- < p
199- className = { ` text-black-100 text-md rounded-md border-green-800 bg-green-400 px-3 py-2 text-center` } >
200- Coral:{ ' ' }
201- < span className = 'rounded-lg bg-black/15 p-2 py-1' >
202- { CoralPoints }
203- </ span >
204- </ p >
205-
206- < p className = 'text-black-100 text-md rounded-md border-green-800 bg-green-400 px-3 py-2 text-center' >
207- Algae:{ ' ' }
208- < span className = 'rounded-lg bg-black/15 p-2 py-1' >
209- { AlgaePoints }
210- </ span >
211- </ p >
212-
213- < p className = 'text-black-100 text-md rounded-md border-green-800 bg-green-400 px-3 py-2 text-center' >
214- Barge:{ ' ' }
215- < span className = 'rounded-lg bg-black/15 p-2 py-2' >
216- { cagePoints }
217- </ span >
218- </ p >
224+
219225 </ div >
220226 < p className = 'text-black-100 text-md rounded-md border-green-800 bg-green-400/70 px-3 py-2 text-center font-black' >
221227 Total:{ ' ' }
0 commit comments