adding mobility

src/components/Scout.jsx

@@ -81,11 +81,11 @@ const Scout = () => {
       </div>
       {phaseTabContent}
 
-      <Undo wide = {false}></Undo>
-      {!showNext && (
+      <Undo width = {state.phase === "auto"? "default": "halfWide"}></Undo>
+      {state.phase === "auto" && (
               <Dropdown
               phase = {true}
-              wide = {false}
+              width = "default"
               center = {true}
               prop="chargeStation"
               options={[
@@ -95,6 +95,19 @@ const Scout = () => {
               ]}
             ></Dropdown>
       )}
+
+      {state.phase === "auto" && (
+          <Bool
+            phase = {true}
+            prop="mobility"
+            label="Mobility"
+            trueLabel="Mobility Success"
+            color="green"
+            tall={false}
+      ></Bool>
+      )}
+
+
       {showNext && <Next width ="halfWide"></Next>}
 
     </>

src/components/inputs/Bool.jsx

@@ -10,7 +10,7 @@ const Bool = ({ label, trueLabel, prop, onFlip, phase, color, wide, tall}) => {
 
   return (
     <button
-      className={`${color ?? ""} ${wide ? " wide" : ""} ${tall ? "tall" : ""}`}
+      className={`${color ?? ""} ${wide ? " wide " : " default "} ${tall ? "tall" : ""}`}
       disabled={current}
       onClick={() => {
         dispatch({

src/components/inputs/Dropdown.jsx

@@ -4,7 +4,7 @@ import PropTypes from "prop-types"
 import "./inputs.scss"
 
 
-const Dropdown = ({prop, phase, wide, center, options}) => {
+const Dropdown = ({prop, phase, width, center, options}) => {
   const [state, dispatch] = useContext(Context)
   const optionsElems = useMemo(
     () =>
@@ -17,10 +17,10 @@ const Dropdown = ({prop, phase, wide, center, options}) => {
     )
   return (
     <select
-      className={(wide ? " wide " : " halfWide ") + (center ? " center-text " : "")}
+      className={(width ? width : " wide ") + (center ? " center-text " : "")}
       onChange={(event) => {
 
-        console.log("phase:" + phase + " prop:" + prop + " val:" + event.target.value)
+        //console.log("phase:" + phase + " prop:" + prop + " val:" + event.target.value)
 
         dispatch({
           type: `set${phase ? "InPhase" : ""}`,
@@ -43,7 +43,7 @@ Dropdown.propTypes = {
   })).isRequired,
   prop: PropTypes.string.isRequired,
   phase: PropTypes.bool,
-  wide: PropTypes.bool,
+  width: PropTypes.string,
   center: PropTypes.bool
 }
 

src/components/inputs/Undo.jsx

@@ -4,12 +4,12 @@ import PropTypes from "prop-types"
 
 import "./buttons.scss"
 
-const Undo = ({ wide }) => {
+const Undo = ({ width }) => {
   const [state, dispatch] = useContext(Context)
 
   return (
     <button
-      className={`${wide ? "wide" : "halfWide"} blue`}
+      className={`${width ? width : "halfWide"} blue`}
       disabled={state.undoStack[state.phase].length === 0}
       onClick={() => {
         dispatch({ type: "undo" })
@@ -21,7 +21,7 @@ const Undo = ({ wide }) => {
 }
 
 Undo.propTypes = {
-  wide: PropTypes.bool,
+  width: PropTypes.string,
 }
 
 export default Undo

src/reducer.js

@@ -37,6 +37,7 @@ export const initialState = {
   phase: "auto", //auto, teleop, endgame
   auto: {
     chargeStation: "None",
+    mobility: false,
     ...grid,
   },
   teleop: {