@@ -398,7 +398,7 @@ function MatchApp() {
398398 </ button >
399399 </ div >
400400
401- < div >
401+ < div className = 'relative' >
402402 < h2 className = 'mb-5 mt-12 text-center text-5xl font-semibold text-green-600' >
403403 Autonomous
404404 </ h2 >
@@ -407,90 +407,96 @@ function MatchApp() {
407407 { < CheckBoxMatch
408408 checked = { ground1 }
409409 onChange = { setGround1 }
410- className = { `${ blueAlliance ? 'top-[660px ] left-[285px ]' :'top-[670px ] left-[440px ] ' } absolute z-20 h-10 w-10 overflow-hidden rounded-full text-left` } >
410+ className = { `${ blueAlliance ? 'top-[255px ] left-[155px ]' :'top-[265px ] left-[335px ] ' } absolute z-20 h-10 w-10 overflow-hidden rounded-full text-left` } >
411411 </ CheckBoxMatch >
412412 // ground 1
413413 }
414414 < CheckBoxMatch
415415 checked = { ground2 }
416416 onChange = { setGround2 }
417- className = { `${ blueAlliance ? 'top-[740px ] left-[285px ]' :'top-[760px ] left-[440px ]' } absolute z-20 h-10 w-10 overflow-hidden rounded-full text-left` } >
417+ className = { `${ blueAlliance ? 'top-[335px ] left-[155px ]' :'top-[365px ] left-[340px ]' } absolute z-20 h-10 w-10 overflow-hidden rounded-full text-left` } >
418418 </ CheckBoxMatch >
419419 { /* ground 2 */ }
420420 < CheckBoxMatch
421421 checked = { ground3 }
422422 onChange = { setGround3 }
423- className = { `${ blueAlliance ? 'top-[820px ] left-[285px ]' :'top-[840px ] left-[440px ]' } absolute z-20 h-10 w-10 overflow-hidden rounded-full text-left` } >
423+ className = { `${ blueAlliance ? 'top-[415px ] left-[155px ]' :'top-[435px ] left-[340px ]' } absolute z-20 h-10 w-10 overflow-hidden rounded-full text-left` } >
424424 </ CheckBoxMatch >
425425 { /* ground 3 */ }
426426 < CheckBoxMatch
427427 checked = { source1 }
428428 onChange = { setSource1 }
429- className = { `${ blueAlliance ? 'top-[570px ] left-[250px ]' :'top-[585px ] left-[485px ] ' } absolute z-20 h-10 w-10 overflow-hidden rounded-full text-left` } >
429+ className = { `${ blueAlliance ? 'top-[150px ] left-[130px ]' :'top-[175px ] left-[345px ] ' } absolute z-20 h-10 w-10 overflow-hidden rounded-full text-left` } >
430430 </ CheckBoxMatch >
431431 { /* source 1 */ }
432432 < CheckBoxMatch
433433 checked = { source2 }
434434 onChange = { setSource2 }
435- className = { `${ blueAlliance ? 'top-[910px ] left-[250px ]' :'top-[930px ] left-[485px ] ' } absolute z-20 h-10 w-10 overflow-hidden rounded-full text-left` } >
435+ className = { `${ blueAlliance ? 'top-[510px ] left-[130px ]' :'top-[510px ] left-[345px ] ' } absolute z-20 h-10 w-10 overflow-hidden rounded-full text-left` } >
436436 </ CheckBoxMatch >
437437 { /* source 2 */ }
438438 < CheckBoxMatch
439439 checked = { start1 }
440440 onChange = { setStart1 }
441- className = { `${ blueAlliance ? 'top-[645px ] left-[565px ] ' :'top-[660px ] left-[160px ]' } absolute z-20 h-10 w-10 overflow-hidden rounded-full text-left` } >
441+ className = { `${ blueAlliance ? 'top-[230px ] left-[440px ] ' :'top-[230px ] left-[35px ]' } absolute z-20 h-10 w-10 overflow-hidden rounded-full text-left` } >
442442 </ CheckBoxMatch >
443443 { /* starting location 1 */ }
444444 < CheckBoxMatch
445445 checked = { start2 }
446446 onChange = { setStart2 }
447- className = { `${ blueAlliance ? 'top-[740px ] left-[565px ]' :'top-[760px ] left-[160px ]' } absolute z-20 h-10 w-10 overflow-hidden rounded-full text-left` } >
447+ className = { `${ blueAlliance ? 'top-[330px ] left-[440px ]' :'top-[330px ] left-[35px ]' } absolute z-20 h-10 w-10 overflow-hidden rounded-full text-left` } >
448448 </ CheckBoxMatch >
449449 { /* starting location 2 */ }
450450 < CheckBoxMatch
451451 checked = { start3 }
452452 onChange = { setStart3 }
453- className = { `${ blueAlliance ? 'top-[835px ] left-[565px ]' :'top-[858px ] left-[160px ]' } absolute z-20 h-10 w-10 overflow-hidden rounded-full text-left` } >
453+ className = { `${ blueAlliance ? 'top-[430px ] left-[440px ]' :'top-[430px ] left-[35px ]' } absolute z-20 h-10 w-10 overflow-hidden rounded-full text-left` } >
454454 </ CheckBoxMatch >
455455 { /* starting location 3 */ }
456456
457-
457+
458458
459459 < CoralSectionButton
460460 onChange = { setDeposit1 }
461461 value = { deposit1 }
462- selectClassName = { `${ blueAlliance ? 'bg-green-300 absolute left-[27.45em] top-[44.3em]' :'bg-green-300 absolute left-[18.5em] top-[45.3em]' } h-[1em] w-[4.5em] rotate-[6.83rad]` }
463- unselectClassName = { `${ blueAlliance ? 'bg-red-300 absolute left-[27.45em] top-[44.3em]' :'bg-red-300 absolute left-[18.5em] top-[45.3em]' } h-[1em] w-[4.5em] rotate-[6.83rad]` } >
462+ className = { `absolute ${ blueAlliance ? 'left-[19.5em] top-[19em]' :'left-[12em] top-[20em]' } h-[1em] w-[4.5em] rotate-[30deg]` }
463+ selectClassName = 'bg-green-300'
464+ unselectClassName = 'bg-red-300' >
464465 </ CoralSectionButton >
465466 < CoralSectionButton
466467 onChange = { setDeposit2 }
467468 value = { deposit2 }
468- selectClassName = { `${ blueAlliance ? 'bg-green-300 absolute left-[29.4em] top-[47.1em]' :'bg-green-300 absolute left-[20.2em] top-[48.4em]' } h-[1em] w-[4em] rotate-90` }
469- unselectClassName = { `${ blueAlliance ? 'bg-red-300 absolute left-[29.4em] top-[47.1em]' :'bg-red-300 absolute left-[20.2em] top-[48.4em]' } h-[1em] w-[4em] rotate-90` } >
469+ className = { `absolute ${ blueAlliance ? 'left-[21em] top-[21.5em]' :'left-[13.5em] top-[23em]' } h-[1em] w-[4.5em] rotate-[90deg]` }
470+ selectClassName = 'bg-green-300'
471+ unselectClassName = 'bg-red-300' >
470472 </ CoralSectionButton >
471473 < CoralSectionButton
472474 onChange = { setDeposit3 }
473475 value = { deposit3 }
474- selectClassName = { `${ blueAlliance ? 'bg-green-300 absolute left-[27.6em] top-[49.9em]' :'bg-green-300 absolute left-[18.5em] top-[51.1em]' } h-[1em] w-[4em] rotate-[2.6rad]` }
475- unselectClassName = { `${ blueAlliance ? 'bg-red-300 absolute left-[27.6em] top-[49.9em]' :'bg-red-300 absolute left-[18.5em] top-[51.1em]' } h-[1em] w-[4em] rotate-[2.6rad]` } >
476+ className = { `absolute ${ blueAlliance ? 'left-[19.5em] top-[24.5em]' :'left-[12em] top-[26em]' } h-[1em] w-[4.5em] rotate-[-30deg]` }
477+ selectClassName = 'bg-green-300'
478+ unselectClassName = 'bg-red-300' >
476479 </ CoralSectionButton >
477480 < CoralSectionButton
478481 onChange = { setDeposit4 }
479482 value = { deposit4 }
480- selectClassName = { `${ blueAlliance ? 'bg-green-300 absolute left-[24.35em] top-[49.9em]' :'bg-green-300 absolute left-[15.2em] top-[51em]' } h-[1em] w-[4em] rotate-[6.83rad]` }
481- unselectClassName = { `${ blueAlliance ? 'bg-red-300 absolute left-[24.35em] top-[49.9em]' :'bg-red-300 absolute left-[15.2em] top-[51em]' } h-[1em] w-[4em] rotate-[6.83rad]` } >
483+ className = { `absolute ${ blueAlliance ? 'left-[16em] top-[24.5em]' :'left-[8.5em] top-[26em]' } h-[1em] w-[4.5em] rotate-[30deg]` }
484+ selectClassName = 'bg-green-300'
485+ unselectClassName = 'bg-red-300' >
482486 </ CoralSectionButton >
483487 < CoralSectionButton
484488 onChange = { setDeposit5 }
485489 value = { deposit5 }
486- selectClassName = { `${ blueAlliance ? 'bg-green-300 absolute left-[22.85em] top-[47.3em]' :'bg-green-300 absolute left-[13.75em] top-[48.05em]' } h-[1em] w-[4em] rotate-90` }
487- unselectClassName = { `${ blueAlliance ? 'bg-red-300 absolute left-[22.85em] top-[47.3em]' :'bg-red-300 absolute left-[13.75em] top-[48.05em]' } h-[1em] w-[4em] rotate-90` } >
490+ className = { `absolute ${ blueAlliance ? 'left-[14.5em] top-[21.5em]' :'left-[6.9em] top-[22.9em]' } h-[1em] w-[4.5em] rotate-[90deg]` }
491+ selectClassName = 'bg-green-300'
492+ unselectClassName = 'bg-red-300' >
488493 </ CoralSectionButton >
489494 < CoralSectionButton
490495 onChange = { setDeposit6 }
491496 value = { deposit6 }
492- selectClassName = { `${ blueAlliance ? 'bg-green-300 absolute left-[24.3em] top-[44.4em]' :'bg-green-300 absolute left-[15.4em] top-[45.3em]' } h-[1em] w-[4em] rotate-[2.6rad]` }
493- unselectClassName = { `${ blueAlliance ? 'bg-red-300 absolute left-[24.3em] top-[44.4em]' :'bg-red-300 absolute left-[15.4em] top-[45.3em]' } h-[1em] w-[4em] rotate-[2.6rad]` } >
497+ className = { `absolute ${ blueAlliance ? 'left-[16em] top-[19em]' :'left-[8.5em] top-[20em]' } h-[1em] w-[4.5em] rotate-[-30deg]` }
498+ selectClassName = 'bg-green-300'
499+ unselectClassName = 'bg-red-300' >
494500 </ CoralSectionButton >
495501
496502 < p
0 commit comments