fix overlap not triggering when appraoching from left or right of element

src/components/Widget/ListWidget.tsx

@@ -7,7 +7,7 @@ type ListWidgetProps = {
 
 const ListWidget = ({ widget }: ListWidgetProps) => {
   const className =
-    'absolute border-2 border-black p-2 flex flex-col gap-2 items-center';
+    'absolute border-2 border-black p-2 flex flex-col gap-2 items-center overflow-scroll';
 
   // Sort elements by priority
   const sortedElementsByPriority = [...widget.elements].sort(
@@ -32,6 +32,7 @@ const ListWidget = ({ widget }: ListWidgetProps) => {
       {sortedElementsByPriority.map((element) => (
         // ListWidget enforces a certain layout and style for its Elements
         <div
+          id={element.id}
           key={element.id}
           className="w-full min-h-[75px] border-2 border-black 
           flex items-center justify-center"

src/pages/Layout.tsx

@@ -3,13 +3,10 @@ import { Outlet, useLocation, useNavigate } from 'react-router-dom';
 import Gaze from 'src/ui/Gaze';
 // ~~~~~~~ Redux ~~~~~~~
 import { useAppDispatch, useAppSelector } from 'src/redux/hooks';
-import { getSections, getWidgets } from 'src/redux/slices/minimapSlice';
 import {
   addKeyDown,
   getElementsInGaze,
-  getGazesAndKeys,
   removeKeyDown,
-  setElementsInGaze,
   type ElementInGaze,
 } from 'src/redux/slices/gazeSlice';
 // ~~~~~~~ Cusdom Hooks ~~~~~~~
@@ -91,7 +88,6 @@ const Layout = () => {
 
   return (
     <div>
-      {/* {pathname !== '/prototype' && <Navigation />} */}
       {pathname !== '/prototype' && <Gaze mousePosition={mousePosition} />}
 
       <main>

src/pages/LeftScreen.tsx

@@ -14,9 +14,9 @@ const LeftScreen = () => {
 
   const elementsInGaze = useAppSelector(getElementsInGaze);
 
-  useEffect(() => {
-    console.log('elementsInGaze: ', elementsInGaze);
-  }, [elementsInGaze]);
+  // useEffect(() => {
+  //   console.log('elementsInGaze: ', elementsInGaze);
+  // }, [elementsInGaze]);
 
   return (
     <div className="absolute top-0 left-0 bg-stone-200 w-[1920px] h-[1080px] hover:cursor-pointer">

src/pages/Prototype.tsx

@@ -10,11 +10,6 @@ import {
   getWidgets,
   initializeState,
 } from 'src/redux/slices/minimapSlice';
-import {
-  getElementsInGaze,
-  getGazesAndKeys,
-  type ElementInGaze,
-} from 'src/redux/slices/gazeSlice';
 // ~~~~~~~ Cusdom Hooks ~~~~~~~
 import useWorldSim from 'src/hooks/useWorldSim';
 // ~~~~~~~ Prototype ~~~~~~~
@@ -33,8 +28,6 @@ const Prototype = () => {
   // ~~~~~ Selectors ~~~~~~
   const sections = useAppSelector(getSections);
   const widgets = useAppSelector(getWidgets);
-  const gazesAndKeys = useAppSelector(getGazesAndKeys);
-  const elemsInGaze: ElementInGaze[] = useAppSelector(getElementsInGaze);
 
   const dispatch = useAppDispatch();
 

src/utils/constants.ts

@@ -13,3 +13,5 @@ export const OWNSHIP_TRAJECTORY = {
 };
 
 export const GAZE_RADIUS = 50;
+export const CIRCLE_PERCENTAGE_THRESH = 0.1;
+export const ELEMENT_PERCENTAGE_THRESH = 0.1;