Merge branch 'feat-robotpictures' of https://github.com/team4099/Falc…

…onScout into feat-robotpictures

scoutingapp/src/components/img/RobotImage.tsx

@@ -1,16 +1,28 @@
 import React from "react"
 import { ComponentSetup } from "../interface"
 
-interface RobotImageProps extends ComponentSetup {
-  robotNumber?: string;
-}
+export const emptyImage = <img
+  style={{width: "80%", height: "80%", alignItems: 'center', justifyContent: 'center'}}
+  src='../img/gray.png'
+  alt={`Picture of robot`}
+/>
+
+export function RobotImage(props: ComponentSetup) {
+  const robotNumber = props.getValue["TeamNumber"]
+
+  const makeAltText = (robotNumber: string) => {
+    if (robotNumber) {
+      return `Picture of robot ${robotNumber}`
+    } else {
+      return 'Insert robot number above'
+    }
+  }
 
-export function RobotImage({ robotNumber = "4099", ...props }: RobotImageProps) {
   return (
     <img
-      style={{ width: "60%", height: "60%", alignItems: 'center', justifyContent: 'center', margin: "auto"}}
+      style={{ width: "60%", height: "60%", alignItems: 'center', justifyContent: 'center', margin: "auto" }}
       src={`./src/components/img/${robotNumber}.png`}
-      alt={`Picture of robot ${robotNumber}`}
+      alt={makeAltText(robotNumber)}
     />
   )
 }

scoutingapp/src/components/pages/Page.tsx

@@ -7,7 +7,7 @@ import { ComponentSetup, PageSetup } from "../interface"
 import { GenericCheckboxSelect, GenericDropdown, GenericRadioSelect, GenericToggle, ChargedUpGridSelect } from "../selects"
 import { GenericHeaderOne, GenericHeaderTwo, QRCodeModal, Timer } from "../texts"
 import { CycleCounter } from "../monitor"
-import { RobotImage } from "../img/RobotImage"
+import { RobotImage, emptyImage } from "../img/RobotImage"
 import ChargedUpStartingPosition from "../selects/ChargedUpStartingPosition"
 
 interface ImportedComponentSetup extends ComponentSetup {
@@ -33,14 +33,7 @@ export function Page(props: PageSetup) {
         "ChargedUpGridSelect": [ChargedUpGridSelect, []],
         "ChargedUpStartingPosition": [ChargedUpStartingPosition, ""],
         "ConeCubeIncrementInput": [ConeCubeIncrementInput, []],
-        "RobotImage": [
-          RobotImage,
-          <img
-            style={{width: "80%", height: "80%", alignItems: 'center', justifyContent: 'center'}}
-            src='../img/gray.png'
-            alt={`Picture of robot`}
-          />
-        ]
+        "RobotImage": [RobotImage, emptyImage]
     }
 
     let componentSetup: any = {}