make image look better

team4099 · Mar 5, 2025 · d51e29b · d51e29b
1 parent 0c41f80
commit d51e29b
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 16 deletions.
diff --git a/scoutingapp/src/components/img/RobotImage.tsx b/scoutingapp/src/components/img/RobotImage.tsx
@@ -2,9 +2,8 @@ import React, {useEffect, useState} from "react"
 import { ComponentSetup } from "../interface"
 
 export const emptyImage = <img
-  style={{width: "80%", height: "80%", alignItems: 'center', justifyContent: 'center'}}
-  src='../img/gray.png'
-  alt={`Picture of robot`}
+    style={{height: "0px", alignItems: 'center', justifyContent: 'center', margin: "auto"}}
+    src={`./src/components/img/gray.png`}
 />
 
 export function RobotImage(props: ComponentSetup) {
@@ -14,19 +13,29 @@ export function RobotImage(props: ComponentSetup) {
   useEffect(() => {
     const interval = setInterval(() => {
       if (robotNumber) {
-        setComponentInside(
-          <img
-            style={{ height: "300px", alignItems: 'center', justifyContent: 'center', margin: "auto"}}
-            src={`./src/components/img/${robotNumber}.jpeg`}
-            alt={`Image of robot ${robotNumber} not found.`}
-          />
-        )
+        fileExists(`./src/components/img/${robotNumber}.jpeg`).then((exists) => {
+          console.log("Exists => ", exists)
+          if (exists) {
+            setComponentInside(
+                <img
+                    style={{ height: "300px", alignItems: 'center', justifyContent: 'center', margin: "auto"}}
+                    src={`./src/components/img/${robotNumber}.jpeg`}
+                />
+            )
+          } else {
+            setComponentInside(
+                <img
+                    style={{ height: "0px", alignItems: 'center', justifyContent: 'center', margin: "auto"}}
+                    src={`./src/components/img/gray.png`}
+                />
+            )
+          }
+        });
       } else {
         setComponentInside(
           <img
-            style={{ height: "300px", alignItems: 'center', justifyContent: 'center', margin: "auto"}}
+            style={{ height: "0px", alignItems: 'center', justifyContent: 'center', margin: "auto"}}
             src={`./src/components/img/gray.png`}
-            alt={'Insert robot number above'}
           />
         )
       }
@@ -37,4 +46,13 @@ export function RobotImage(props: ComponentSetup) {
   return (<>
     {componentInside}
   </>)
+}
+
+async function fileExists(imagePath: string): Promise<boolean> {
+  try {
+    const response = await fetch(imagePath, { method: "HEAD" });
+    return response.ok;
+  } catch {
+    return false;
+  }
 }
diff --git a/scoutingapp/src/components/texts/QRCodeModal.tsx b/scoutingapp/src/components/texts/QRCodeModal.tsx
@@ -9,7 +9,6 @@ export function QRCodeModal(props: ComponentSetup){
     */
 
     const addToLocalStorage = function () {
-        console.log(localStorage.getItem("codes") as string)
         var currentData = JSON.parse(localStorage.getItem("codes") as string)
         currentData[props.getValue["MatchKey"].join("")] = props.getValue["export"].text
         localStorage.setItem("codes", JSON.stringify(currentData))
@@ -19,10 +18,8 @@ export function QRCodeModal(props: ComponentSetup){
         const interval = setInterval(() => {
             var requiredFinished = true
 
-            console.log(props.required)
             for (const id of props.required){
-                console.log(props.getValue[id])
-                if (["", [], ","].includes(props.getValue[id]) || 
+                if (["", [], ","].includes(props.getValue[id]) ||
                     (props.getValue[id][0].length == 2 && 
                         (props.getValue[id][0] == "" || props.getValue[id][1] == "")
                     )