From 88937b8e149fdfe6a70f2b7fff105ffc5460fefe Mon Sep 17 00:00:00 2001
From: 00magikarp <94652654+00magikarp@users.noreply.github.com>
Date: Tue, 23 Jul 2024 14:15:52 -0400
Subject: [PATCH] auto update robot picture every 500ms

---
 scoutingapp/src/components/img/RobotImage.tsx | 27 +++++++++++++------
 1 file changed, 19 insertions(+), 8 deletions(-)

diff --git a/scoutingapp/src/components/img/RobotImage.tsx b/scoutingapp/src/components/img/RobotImage.tsx
index 1d7d9d6..221a7bb 100644
--- a/scoutingapp/src/components/img/RobotImage.tsx
+++ b/scoutingapp/src/components/img/RobotImage.tsx
@@ -1,5 +1,6 @@
-import React from "react"
+import React, {useEffect, useState} from "react"
 import { ComponentSetup } from "../interface"
+import QRCode from "react-qr-code";
 
 export const emptyImage = <img
   style={{width: "80%", height: "80%", alignItems: 'center', justifyContent: 'center'}}
@@ -8,6 +9,7 @@ export const emptyImage = <img
 />
 
 export function RobotImage(props: ComponentSetup) {
+  const [componentInside, setComponentInside] = useState(<></>)
   const robotNumber = props.getValue["TeamNumber"]
 
   const makeAltText = (robotNumber: string) => {
@@ -18,11 +20,20 @@ export function RobotImage(props: ComponentSetup) {
     }
   }
 
-  return (
-    <img
-      style={{ height: "60%", alignItems: 'center', justifyContent: 'center', margin: "auto" }}
-      src={`./src/components/img/${robotNumber}.png`}
-      alt={makeAltText(robotNumber)}
-    />
-  )
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setComponentInside(
+        <img
+          style={{height: "60%", alignItems: 'center', justifyContent: 'center', margin: "auto"}}
+          src={`./src/components/img/${robotNumber}.png`}
+          alt={makeAltText(robotNumber)}
+        />
+      )
+    }, 500);
+    return () => clearInterval(interval);
+  })
+
+  return (<>
+    {componentInside}
+  </>)
 }
\ No newline at end of file