modularisation refactoring

examples/avatarBenchmark.tsx

@@ -2,11 +2,8 @@ import React, { useEffect, useState } from 'react'
 
 import { LocationIcons } from '@etherealengine/client-core/src/components/LocationIcons'
 import { LoadingCircle } from '@etherealengine/client-core/src/components/LoadingCircle'
-import { LoadEngineWithScene } from '@etherealengine/client-core/src/components/World/LoadEngineWithScene'
-import { OfflineLocation } from '@etherealengine/client-core/src/components/World/OfflineLocation'
 import { LocationAction } from '@etherealengine/client-core/src/social/services/LocationService'
-import { loadSceneJsonOffline } from '@etherealengine/client/src/pages/offline/utils'
-import { useEngineState } from '@etherealengine/engine/src/ecs/classes/EngineState'
+import { EngineState, useEngineState } from '@etherealengine/engine/src/ecs/classes/EngineState'
 import { dispatchAction, getMutableState, useHookstate } from '@etherealengine/hyperflux'
 import { AvatarService, AvatarState } from '@etherealengine/client-core/src/user/services/AvatarService'
 import { SelectInput } from '@etherealengine/editor/src/components/inputs/SelectInput'
@@ -19,6 +16,9 @@ import { Engine } from '@etherealengine/engine/src/ecs/classes/Engine'
 import { UserId } from '@etherealengine/common/src/interfaces/UserId'
 import { DefaultLocationSystems } from '@etherealengine/client-core/src/world/DefaultLocationSystems'
 import { useSimulateMovement } from './utils/simulateMovement'
+import { useLoadEngineWithScene, useOfflineScene } from '@etherealengine/client-core/src/components/World/EngineHooks'
+import { AppLoadingState } from '@etherealengine/engine/src/common/AppLoadingService'
+import { useLoadLocationScene } from '@etherealengine/client-core/src/components/World/LoadLocationScene'
 
 // let entities = [] as Entity[]
 // let entitiesLength = 0
@@ -42,7 +42,8 @@ import { useSimulateMovement } from './utils/simulateMovement'
 // }
 
 export default function AvatarBenchmarking() {
-  const engineState = useEngineState()
+  const engineState = useHookstate(getMutableState(EngineState))
+  const appState = useHookstate(getMutableState(AppLoadingState).state)
 
   const projectName = 'default-project'
   const sceneName = 'default'
@@ -55,11 +56,10 @@ export default function AvatarBenchmarking() {
 
   useSimulateMovement()
 
-  useEffect(() => {
-    AvatarService.fetchAvatarList()
-    dispatchAction(LocationAction.setLocationName({ locationName: `${projectName}/${sceneName}` }))
-    loadSceneJsonOffline(projectName, sceneName)
+  useLoadLocationScene()
+  useOfflineScene({ projectName, sceneName, spectate: true })
 
+  useEffect(() => {
     engineState.avatarLoadingEffect.set(false)
 
     const queryString = window.location.search
@@ -79,11 +79,11 @@ export default function AvatarBenchmarking() {
     for (let i = 0; i < count; i++) loadNetworkAvatar(avatar, i)
   }, [count, avatar, engineState.joinedWorld])
 
+  useLoadEngineWithScene({ injectedSystems: DefaultLocationSystems })
+
   return (
     <>
-      {engineState.isEngineInitialized.value ? <></> : <LoadingCircle />}
-      <LoadEngineWithScene spectate injectedSystems={DefaultLocationSystems} />
-      <OfflineLocation />
+      {appState.value === 'START_STATE' && <LoadingCircle message={t('common:loader.loadingEngine')} />}
       <div style={{ width: '50%', display: 'flex', flexDirection: 'column', margin: 'auto', paddingTop: '100px', pointerEvents: 'all' }}>
         <SelectInput options={avatars.avatarList.value.map(val => ({ value: val, label: val.name }))} onChange={setAvatar} value={avatar} />
         <NumericInput onChange={setCount} value={count} />

examples/avatarTest.tsx

@@ -1,10 +1,6 @@
 import React, { useEffect } from 'react'
 
 import { LoadingCircle } from '@etherealengine/client-core/src/components/LoadingCircle'
-import { LoadEngineWithScene } from '@etherealengine/client-core/src/components/World/LoadEngineWithScene'
-import { OfflineLocation } from '@etherealengine/client-core/src/components/World/OfflineLocation'
-import { LocationAction } from '@etherealengine/client-core/src/social/services/LocationService'
-import { loadSceneJsonOffline } from '@etherealengine/client/src/pages/offline/utils'
 import { EngineState, useEngineState } from '@etherealengine/engine/src/ecs/classes/EngineState'
 import { EngineActions } from '@etherealengine/engine/src/ecs/classes/EngineState'
 import { matchActionOnce } from '@etherealengine/engine/src/networking/functions/matchActionOnce'
@@ -13,6 +9,9 @@ import { AvatarService, AvatarState } from '@etherealengine/client-core/src/user
 import { accessAuthState } from '@etherealengine/client-core/src/user/services/AuthService'
 import { mockNetworkAvatars, mockAnimAvatars, mockTPoseAvatars, mockIKAvatars } from './utils/loadAvatarHelpers'
 import { LocationIcons } from '@etherealengine/client-core/src/components/LocationIcons'
+import { useOfflineScene, useLoadEngineWithScene } from '@etherealengine/client-core/src/components/World/EngineHooks'
+import { DefaultLocationSystems } from '@etherealengine/client-core/src/world/DefaultLocationSystems'
+import { useLoadLocationScene } from '@etherealengine/client-core/src/components/World/LoadLocationScene'
 
 export default function AvatarBenchmarking() {
   const engineState = useEngineState()
@@ -34,16 +33,13 @@ export default function AvatarBenchmarking() {
     mockTPoseAvatars(avatars)
   }
 
-  useEffect(() => {
-    dispatchAction(LocationAction.setLocationName({ locationName: `${projectName}/${sceneName}` }))
-    loadSceneJsonOffline(projectName, sceneName)
-  }, [])
+  useOfflineScene({ projectName, sceneName , spectate: false})
+  useLoadLocationScene()
+  useLoadEngineWithScene({ injectedSystems: DefaultLocationSystems, spectate: false })
 
   return (
     <>
       {engineState.isEngineInitialized.value ? <></> : <LoadingCircle />}
-      <LoadEngineWithScene />
-      <OfflineLocation />
       <LocationIcons />
     </>
   )

examples/avatarTestByIndex.tsx

@@ -1,11 +1,6 @@
 import React, { useEffect } from 'react'
 
 import { LoadingCircle } from '@etherealengine/client-core/src/components/LoadingCircle'
-import { LoadEngineWithScene } from '@etherealengine/client-core/src/components/World/LoadEngineWithScene'
-import { OfflineLocation } from '@etherealengine/client-core/src/components/World/OfflineLocation'
-import { LocationAction } from '@etherealengine/client-core/src/social/services/LocationService'
-import { accessAuthState } from '@etherealengine/client-core/src/user/services/AuthService'
-import { loadSceneJsonOffline } from '@etherealengine/client/src/pages/offline/utils'
 import { EngineState, useEngineState } from '@etherealengine/engine/src/ecs/classes/EngineState'
 import { EngineActions } from '@etherealengine/engine/src/ecs/classes/EngineState'
 import { matchActionOnce } from '@etherealengine/engine/src/networking/functions/matchActionOnce'
@@ -14,6 +9,8 @@ import { AvatarService, AvatarState } from '@etherealengine/client-core/src/user
 import { mockNetworkAvatars, mockAnimAvatars, mockTPoseAvatars, mockIKAvatars } from './utils/loadAvatarHelpers'
 import { LocationIcons } from '@etherealengine/client-core/src/components/LocationIcons'
 import { useSimulateMovement } from './utils/simulateMovement'
+import { useOfflineScene, useLoadEngineWithScene } from '@etherealengine/client-core/src/components/World/EngineHooks'
+import { DefaultLocationSystems } from '@etherealengine/client-core/src/world/DefaultLocationSystems'
 
 export default function AvatarBenchmarking() {
   const engineState = useEngineState()
@@ -27,6 +24,8 @@ export default function AvatarBenchmarking() {
     matchActionOnce(EngineActions.joinedWorld.matches, mockAvatars)
   }, [])
 
+  useOfflineScene({ projectName, sceneName, spectate: true })
+  useLoadEngineWithScene({ injectedSystems: DefaultLocationSystems, spectate: true })
   useSimulateMovement()
 
   const mockAvatars = () => {
@@ -42,16 +41,9 @@ export default function AvatarBenchmarking() {
     mockTPoseAvatars([avatars[index]])
   }
 
-  useEffect(() => {
-    dispatchAction(LocationAction.setLocationName({ locationName: `${projectName}/${sceneName}` }))
-    loadSceneJsonOffline(projectName, sceneName)
-  }, [])
-
   return (
     <>
       {engineState.isEngineInitialized.value ? <></> : <LoadingCircle />}
-      <LoadEngineWithScene spectate/>
-      <OfflineLocation />
       <LocationIcons />
     </>
   )

examples/physicsBenchmark.tsx

@@ -1,17 +1,17 @@
 import React, { useEffect, useState } from 'react'
 
 import { LoadingCircle } from '@etherealengine/client-core/src/components/LoadingCircle'
-import { LoadEngineWithScene } from '@etherealengine/client-core/src/components/World/LoadEngineWithScene'
-import { OfflineLocation } from '@etherealengine/client-core/src/components/World/OfflineLocation'
 import { LocationAction } from '@etherealengine/client-core/src/social/services/LocationService'
-import { loadSceneJsonOffline } from '@etherealengine/client/src/pages/offline/utils'
 import { useEngineState } from '@etherealengine/engine/src/ecs/classes/EngineState'
 import { dispatchAction } from '@etherealengine/hyperflux'
 import { AvatarService } from '@etherealengine/client-core/src/user/services/AvatarService'
 import NumericInput from '@etherealengine/editor/src/components/inputs/NumericInput'
 import { Entity } from '@etherealengine/engine/src/ecs/classes/Entity'
 import { removeEntity } from '@etherealengine/engine/src/ecs/functions/EntityFunctions'
 import { createPhysicsObjects } from './utils/loadPhysicsHelpers'
+import { useLoadEngineWithScene, useOfflineScene } from '@etherealengine/client-core/src/components/World/EngineHooks'
+import { DefaultLocationSystems } from '@etherealengine/client-core/src/world/DefaultLocationSystems'
+import { useLoadLocationScene } from '@etherealengine/client-core/src/components/World/LoadLocationScene'
 
 process.env['APP_ENV'] = 'test'
 
@@ -25,10 +25,12 @@ export default function AvatarBenchmarking() {
 
   const [entities, setEntities] = useState([] as Entity[])
 
+  useOfflineScene({ projectName, sceneName, spectate: true })
+  useLoadLocationScene()
+  useLoadEngineWithScene({ injectedSystems: DefaultLocationSystems, spectate: true })
+
   useEffect(() => {
     AvatarService.fetchAvatarList()
-    dispatchAction(LocationAction.setLocationName({ locationName: `${projectName}/${sceneName}` }))
-    loadSceneJsonOffline(projectName, sceneName)
   }, [])
 
   useEffect(() => {
@@ -40,8 +42,6 @@ export default function AvatarBenchmarking() {
   return (
     <>
       {engineState.isEngineInitialized.value ? <></> : <LoadingCircle />}
-      <LoadEngineWithScene />
-      <OfflineLocation />
       <div style={{ pointerEvents: 'all' }}>
         <NumericInput onChange={setCount} value={count} />
       </div>

examples/template.tsx

@@ -1,30 +1,25 @@
-import React, { useEffect } from 'react'
+import React from 'react'
 
 import { LoadingCircle } from '@etherealengine/client-core/src/components/LoadingCircle'
-import { LoadEngineWithScene } from '@etherealengine/client-core/src/components/World/LoadEngineWithScene'
-import { OfflineLocation } from '@etherealengine/client-core/src/components/World/OfflineLocation'
-import { LocationAction } from '@etherealengine/client-core/src/social/services/LocationService'
-import { loadSceneJsonOffline } from '@etherealengine/client/src/pages/offline/utils'
 import { useEngineState } from '@etherealengine/engine/src/ecs/classes/EngineState'
-import { dispatchAction } from '@etherealengine/hyperflux'
 import { LocationIcons } from '@etherealengine/client-core/src/components/LocationIcons'
+import { useOfflineScene, useLoadEngineWithScene } from '@etherealengine/client-core/src/components/World/EngineHooks'
+import { useLoadLocationScene } from '@etherealengine/client-core/src/components/World/LoadLocationScene'
+import { DefaultLocationSystems } from '@etherealengine/client-core/src/world/DefaultLocationSystems'
 
 export default function AvatarBenchmarking() {
   const engineState = useEngineState()
 
   const projectName = 'default-project'
   const sceneName = 'default'
 
-  useEffect(() => {
-    dispatchAction(LocationAction.setLocationName({ locationName: `${projectName}/${sceneName}` }))
-    loadSceneJsonOffline(projectName, sceneName)
-  }, [])
+  useOfflineScene({ projectName, sceneName, spectate: true })
+  useLoadLocationScene()
+  useLoadEngineWithScene({ injectedSystems: DefaultLocationSystems, spectate: true })
 
   return (
     <>
       {engineState.isEngineInitialized.value ? <></> : <LoadingCircle />}
-      <LoadEngineWithScene />
-      <OfflineLocation />
       <LocationIcons />
     </>
   )

examplesRoute.tsx

@@ -1,18 +1,18 @@
 import React from 'react'
 import { Route, Routes } from 'react-router-dom'
 
-import avatarBenchmark from './examples/avatarBenchmark'
-import avatarTest from './examples/avatarTest'
-import avatarTestByIndex from './examples/avatarTestByIndex'
-import physicsBenchmark from './examples/physicsBenchmark'
+import AvatarBenchmark from './examples/avatarBenchmark'
+import AvatarTest from './examples/avatarTest'
+import AvatarTestByIndex from './examples/avatarTestByIndex'
+import PhysicsBenchmark from './examples/physicsBenchmark'
 
 const ExampleRoutes = () => {
   return (
     <Routes>
-      <Route path="/examples/avatarBenchmark" component={avatarBenchmark} />
-      <Route path="/examples/avatarTest" component={avatarTest} />
-      <Route path="/examples/avatarTestByIndex" component={avatarTestByIndex} />
-      <Route path="/examples/physicsBenchmark" component={physicsBenchmark} />
+      <Route path="/avatarBenchmark" element={<AvatarBenchmark />} />
+      <Route path="/avatarTest" element={<AvatarTest />} />
+      <Route path="/avatarTestByIndex" element={<AvatarTestByIndex />} />
+      <Route path="/physicsBenchmark" element={<PhysicsBenchmark />} />
     </Routes>
   )
 }