From 0a2bebfed51c1cb005ea229e1039fcaa5da25301 Mon Sep 17 00:00:00 2001
From: bedlam343 <jagik22@gmail.com>
Date: Thu, 23 May 2024 15:29:54 -0700
Subject: [PATCH] hightlight info icon when under gaze

---
 src/components/Widget/MapWarningWidget.tsx | 15 +++++++++------
 src/hooks/useGaze.ts                       |  1 -
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/components/Widget/MapWarningWidget.tsx b/src/components/Widget/MapWarningWidget.tsx
index 918e547..81ac4c5 100644
--- a/src/components/Widget/MapWarningWidget.tsx
+++ b/src/components/Widget/MapWarningWidget.tsx
@@ -23,27 +23,30 @@ const MapWarningWidget = ({ widget }: MapWarningWidgetProps) => {
   const elementsInGaze = useAppSelector(getElementsInGaze);
   const dispatch = useAppDispatch();
 
-  const inGaze = elementsInGaze.some(
+  const warningIconInGaze = elementsInGaze.some(
     (element) => element.id === iconElement.id,
   );
+  const threatInfoInGaze = elementsInGaze.some(
+    (element) => element.id === threatInfoElement.id,
+  );
 
   useEffect(() => {
     // show threat info element if icon element is in gaze
-    if (inGaze && threatInfoElement.collapsed) {
+    if (warningIconInGaze && threatInfoElement.collapsed) {
       dispatch(
         updateElement(widget.id, { ...threatInfoElement, collapsed: false }),
       );
     }
-  }, [inGaze, dispatch, threatInfoElement, widget.id]);
+  }, [warningIconInGaze, dispatch, threatInfoElement, widget.id]);
 
   useEffect(() => {
-    if (inGaze && threatInfoElement.expirationIntervalMs) {
+    if (warningIconInGaze && threatInfoElement.expirationIntervalMs) {
       // update expiration even if only icon element is in gaze
       // keep displaying threat info element while we hover over the icon
       dispatch(updateElementExpiration(widget.id, threatInfoElement.id));
     }
   }, [
-    inGaze,
+    warningIconInGaze,
     dispatch,
     threatInfoElement.id,
     threatInfoElement.expirationIntervalMs,
@@ -67,7 +70,7 @@ const MapWarningWidget = ({ widget }: MapWarningWidgetProps) => {
           <div style={{ height: 2, width: 75, border: '2px dashed white' }} />
           <MapThreatInfoElement
             element={threatInfoElement as InformationElementType}
-            inGaze={inGaze}
+            inGaze={warningIconInGaze || threatInfoInGaze}
           />
         </>
       )}
diff --git a/src/hooks/useGaze.ts b/src/hooks/useGaze.ts
index ecaa327..8e0a63d 100644
--- a/src/hooks/useGaze.ts
+++ b/src/hooks/useGaze.ts
@@ -40,7 +40,6 @@ const useGaze = ({ screen }: GazeProps) => {
 
         const divId = div.id;
 
-        // TODO: just a little off when cursor on left or right side of the div
         // find the closest point in the div to the mouse
         const closestX =
           mouseX < divLeft ? divLeft : mouseX > divRight ? divRight : mouseX;