Fix Lint Error for AR Module (#298)

* Added AR module

* Fix missing exit toggle

* Add base64 image

* Added export and import objects to json string

* Fix json parsing for ui

* Clean code and added hit-test controls

* Fix error

* Fix highlight not working

* Add highlight for UI component

* Improve outline

* Fix lighting issue for UI

* Improve parsing of state

* Remove convert to string

* Clean up code

* Clean code

* Added lint ignore for skeletonutils.js

* Remove unrequired width and height variables

* Clean up calibration library

* Improved documentation for controls library

* Object state library clean up

* Added more documentation for object library

* Add syncing of movement

* Address issues brought up in review

* Rename arObject parameters

* Add ability to get the object in front

* Fix line-of-sight selection

* Use saar package

* Remove imports for ar, replace with saar

* Increase saar version

* Fix imports

* Fix imports for tab

* Remove gl

* change entries to values

* Fix spring console spam

* Fix empty catch and other lint issues

---------

Co-authored-by: Yin Joe Ng <[email protected]>

package.json

@@ -132,6 +132,7 @@
   },
   "resolutions": {
     "@types/react": "^18.2.0",
-    "esbuild": "^0.18.20"
+    "esbuild": "^0.18.20",
+    "**/gl": "^6.0.2"
   }
 }

src/bundles/ar/AR.ts

@@ -1,6 +1,6 @@
+import { Vector3 } from 'saar/libraries/misc';
 import { ARObject } from 'saar/libraries/object_state_library/ARObject';
 import { OverlayHelper, Toggle } from './OverlayHelper';
-import { Vector3 } from 'saar/libraries/misc';
 
 export class ARState {
   arObjects: ARObject[] = [];

src/bundles/ar/ObjectsHelper.ts

@@ -1,3 +1,4 @@
+import { type Vector3 } from 'saar/libraries/misc';
 import {
   type ARObject,
   CubeObject,
@@ -18,19 +19,18 @@ import {
   RotateToUser,
   SpringMovement,
 } from 'saar/libraries/object_state_library/Behaviour';
-import uniqid from 'uniqid';
+import UIBase64ImageComponent from 'saar/libraries/object_state_library/ui_component/UIBase64ImageItem';
+import UIColumnItem, {
+  type HorizontalAlignment,
+} from 'saar/libraries/object_state_library/ui_component/UIColumnItem';
+import UIImageItem from 'saar/libraries/object_state_library/ui_component/UIImageItem';
 import type { UIBasicItem } from 'saar/libraries/object_state_library/ui_component/UIItem';
 import UIRowItem, {
   type VerticalAlignment,
 } from 'saar/libraries/object_state_library/ui_component/UIRowItem';
-import UIColumnItem, {
-  type HorizontalAlignment,
-} from 'saar/libraries/object_state_library/ui_component/UIColumnItem';
 import UITextItem from 'saar/libraries/object_state_library/ui_component/UITextItem';
-import UIImageItem from 'saar/libraries/object_state_library/ui_component/UIImageItem';
+import uniqid from 'uniqid';
 import { callARCallback } from './AR';
-import UIBase64ImageComponent from 'saar/libraries/object_state_library/ui_component/UIBase64ImageItem';
-import { type Vector3 } from 'saar/libraries/misc';
 
 // Objects
 

src/tabs/AugmentedReality/AugmentedContent.tsx

@@ -1,14 +1,14 @@
 import { useState, type RefObject, useRef, useEffect } from 'react';
+import { usePlayArea } from 'saar/libraries/calibration_library/PlayAreaContext';
+import { useControls } from 'saar/libraries/controls_library/ControlsContext';
+import { ARObject } from 'saar/libraries/object_state_library/ARObject';
+import { useScreenState } from 'saar/libraries/screen_state_library/ScreenStateContext';
 import {
   getModuleState,
   type ARState,
   setFrontObject,
 } from '../../bundles/ar/AR';
 import type { OverlayHelper } from '../../bundles/ar/OverlayHelper';
-import { useScreenState } from 'saar/libraries/screen_state_library/ScreenStateContext';
-import { usePlayArea } from 'saar/libraries/calibration_library/PlayAreaContext';
-import { useControls } from 'saar/libraries/controls_library/ControlsContext';
-import { ARObject } from 'saar/libraries/object_state_library/ARObject';
 
 /**
  * Content to be shown on screen.
@@ -160,15 +160,16 @@ export function AugmentedContent(props: ARState) {
       fetch('https://worldtimeapi.org/api/timezone/Asia/Singapore')
         .then((response) => response.json())
         .then((data) => {
-          let time = new Date(data.datetime).getTime();
-          let offset = time - new Date().getTime();
+          const time = new Date(data.datetime).getTime();
+          const offset = time - new Date().getTime();
           setTimeOffset(offset);
-          console.log('Time offset', offset);
         })
         .catch((error) => {
           console.log(error);
         });
-    } catch {}
+    } catch {
+      setTimeOffset(0);
+    }
   }, []);
 
   /**

src/tabs/AugmentedReality/AugmentedLayer.tsx

@@ -1,6 +1,6 @@
-import type { ARState } from '../../bundles/ar/AR';
 import { PlayAreaContext } from 'saar/libraries/calibration_library/PlayAreaContext';
 import { ControlsContext } from 'saar/libraries/controls_library/ControlsContext';
+import type { ARState } from '../../bundles/ar/AR';
 import { AugmentedContent } from './AugmentedContent';
 
 /**

src/tabs/AugmentedReality/StartButton.tsx

@@ -1,9 +1,9 @@
 import { useEffect } from 'react';
-import type { ARState } from '../../bundles/ar/AR';
-import { useScreenState } from 'saar/libraries/screen_state_library/ScreenStateContext';
 import { ARButton } from 'saar/libraries/misc';
-import { Overlay } from './Overlay';
+import { useScreenState } from 'saar/libraries/screen_state_library/ScreenStateContext';
+import type { ARState } from '../../bundles/ar/AR';
 import { AugmentedLayer } from './AugmentedLayer';
+import { Overlay } from './Overlay';
 
 /**
  * Toggle to start AR context, for tab.

src/tabs/AugmentedReality/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { getModuleState } from '../../bundles/ar/AR';
 import { ScreenStateContext } from 'saar/libraries/screen_state_library/ScreenStateContext';
+import { getModuleState } from '../../bundles/ar/AR';
 import { StartButton } from './StartButton';
 
 /**