Merge branch 'dev' into more-scene-ecs-refactor

packages/client-core/src/admin/adminRoutes.tsx

@@ -40,7 +40,7 @@ import '@etherealengine/engine/src/EngineModule'
 const $allowed = lazy(() => import('@etherealengine/client-core/src/admin/allowedRoutes'))
 
 const AdminRoutes = () => {
-  const location = useLocation()
+  const _location = useLocation()
   const admin = useHookstate(getMutableState(AuthState)).user
 
   const allowedRoutes = useHookstate(getMutableState(AllowedAdminRoutesState))
@@ -70,7 +70,7 @@ const AdminRoutes = () => {
 
   return (
     <Dashboard>
-      <Suspense fallback={<LoadingCircle message={`Loading ${location.pathname.split('/')[2]}...`} />}>
+      <Suspense fallback={<LoadingCircle message={`Loading ${_location.pathname.split('/')[2]}...`} />}>
         <Routes>
           <Route path="/*" element={<$allowed />} />
           {<Route path="/" element={<Analytics />} />}

packages/client-core/src/admin/components/Analytics/index.tsx

@@ -95,8 +95,13 @@ const Analytics = () => {
   return (
     <>
       <div className={styles.dashboardCardsContainer}>
-        {analyticsServiceQueries.map((query) => (
-          <AnalyticsService name={query.type} colors={query.colors!} analyticsQueryMap={analyticsQueryMap} />
+        {analyticsServiceQueries.map((query, index) => (
+          <AnalyticsService
+            key={query.type + index}
+            name={query.type}
+            colors={query.colors!}
+            analyticsQueryMap={analyticsQueryMap}
+          />
         ))}
       </div>
       <div className={styles.mt20px}>

packages/client-core/src/admin/components/Invite/CreateInviteModal.tsx

@@ -144,8 +144,7 @@ const CreateInviteModal = ({ open, onClose }: Props) => {
     locationId.set(e.target.value)
     const location = adminLocations.find((location) => location.id === e.target.value)
     if (location && location.sceneId) {
-      const sceneName = location.sceneId.split('/')
-      AdminSceneService.fetchAdminScene(sceneName[0], sceneName[1])
+      AdminSceneService.fetchAdminScene(location.sceneId)
     }
   }
 
@@ -155,8 +154,7 @@ const CreateInviteModal = ({ open, onClose }: Props) => {
     if (instance) {
       const location = adminLocations.find((location) => location.id === instance.locationId)
       if (location) {
-        const sceneName = location.sceneId.split('/')
-        AdminSceneService.fetchAdminScene(sceneName[0], sceneName[1])
+        AdminSceneService.fetchAdminScene(location.sceneId)
       }
     }
   }

packages/client-core/src/admin/components/Invite/UpdateInviteModal.tsx

@@ -202,8 +202,7 @@ const UpdateInviteModal = ({ open, onClose, invite }: Props) => {
     locationId.set(e.target.value)
     const location = await Engine.instance.api.service(locationPath).get(e.target.value)
     if (location && location.sceneId) {
-      const sceneName = location.sceneId.split('/')
-      AdminSceneService.fetchAdminScene(sceneName[0], sceneName[1])
+      AdminSceneService.fetchAdminScene(location.sceneId)
     }
   }
 
@@ -216,7 +215,7 @@ const UpdateInviteModal = ({ open, onClose, invite }: Props) => {
 
     if (!location) return
     const sceneName = location.sceneId.split('/')
-    AdminSceneService.fetchAdminScene(sceneName[0], sceneName[1])
+    AdminSceneService.fetchAdminScene(location.sceneId)
   }
 
   const handleUserChange = (e) => {

packages/client-core/src/admin/components/Location/LocationTable.tsx

@@ -112,7 +112,7 @@ const LocationTable = ({ className, search }: Props) => {
       el,
       id,
       name: <a href={`/location/${transformLink(name)}`}>{name}</a>,
-      sceneId: <a href={`/studio/${sceneId}`}>{sceneId}</a>,
+      sceneId: <a href={`/studio/${sceneId.split('/')[0]}`}>{sceneId}</a>,
       maxUsersPerInstance,
       scene,
       locationType,

packages/client-core/src/admin/services/SceneService.ts

@@ -23,25 +23,24 @@ All portions of the code written by the Ethereal Engine team are Copyright © 20
 Ethereal Engine. All Rights Reserved.
 */
 
-import { SceneData, SceneMetadata } from '@etherealengine/common/src/interfaces/SceneInterface'
 import { Engine } from '@etherealengine/engine/src/ecs/classes/Engine'
-import { SceneDataType, scenePath } from '@etherealengine/engine/src/schemas/projects/scene.schema'
+import { SceneDataType, SceneMetadataType, scenePath } from '@etherealengine/engine/src/schemas/projects/scene.schema'
 import { defineState, getMutableState } from '@etherealengine/hyperflux'
 
 export const SCENE_PAGE_LIMIT = 100
 
 export const AdminSceneState = defineState({
   name: 'AdminSceneState',
   initial: () => ({
-    scenes: [] as Array<SceneMetadata>,
+    scenes: [] as Array<SceneMetadataType>,
     skip: 0,
     limit: SCENE_PAGE_LIMIT,
     total: 0,
     retrieving: false,
     fetched: false,
     updateNeeded: true,
     lastFetched: Date.now(),
-    singleScene: { scene: {} } as SceneData
+    singleScene: { scene: {} } as SceneDataType
   })
 })
 
@@ -58,10 +57,10 @@ export const AdminSceneService = {
       lastFetched: Date.now()
     })
   },
-  fetchAdminScene: async (projectName: string, sceneName: string) => {
+  fetchAdminScene: async (sceneKey: string) => {
     const scene = await Engine.instance.api
       .service(scenePath)
-      .get(null, { query: { project: projectName, name: sceneName, metadataOnly: false } })
+      .get(null, { query: { sceneKey: sceneKey, metadataOnly: false } })
     getMutableState(AdminSceneState).merge({
       singleScene: scene,
       retrieving: false,

packages/client-core/src/components/World/LoadLocationScene.tsx

@@ -76,7 +76,9 @@ export const useLoadLocation = (props: { locationName: string }) => {
    */
   useEffect(() => {
     if (!locationState.currentLocation.location.sceneId.value) return
-    const [project, scene] = locationState.currentLocation.location.sceneId.value.split('/')
+    const scenePath = locationState.currentLocation.location.sceneId.value.split('/')
+    const project = scenePath[scenePath.length - 2]
+    const scene = scenePath[scenePath.length - 1].replace('.scene.json', '')
     return SceneServices.setCurrentScene(project, scene)
   }, [locationState.currentLocation.location.sceneId])
 }

packages/client-core/src/world/utils.ts

@@ -24,16 +24,15 @@ Ethereal Engine. All Rights Reserved.
 */
 
 import config from '@etherealengine/common/src/config'
-import { SceneJson } from '@etherealengine/common/src/interfaces/SceneInterface'
 import { parseStorageProviderURLs } from '@etherealengine/engine/src/common/functions/parseSceneJSON'
 import { SceneState } from '@etherealengine/engine/src/ecs/classes/Scene'
-import { SceneID } from '@etherealengine/engine/src/schemas/projects/scene.schema'
+import { SceneID, SceneJsonType } from '@etherealengine/engine/src/schemas/projects/scene.schema'
 
 const fileServer = config.client.fileServer
 
 export const loadSceneJsonOffline = async (projectName, sceneName) => {
   const sceneID = `${projectName}/${sceneName}` as SceneID
-  const sceneData = (await (await fetch(`${fileServer}/projects/${sceneID}.scene.json`)).json()) as SceneJson
+  const sceneData = (await (await fetch(`${fileServer}/projects/${sceneID}.scene.json`)).json()) as SceneJsonType
   const hasKTX2 = await fetch(`${fileServer}/projects/${sceneID}.thumbnail.ktx2`).then((res) => res.ok)
   SceneState.loadScene(sceneID, {
     scene: parseStorageProviderURLs(sceneData),

packages/client/src/engine.tsx

@@ -48,12 +48,14 @@ initializeBrowser()
 API.createAPI()
 pipeLogs(Engine.instance.api)
 
-export default function ({ children }) {
+export default function ({ children, tailwind = false }) {
   const ref = createRef()
   const { t } = useTranslation()
-  return (
+  return !tailwind ? (
     <FullscreenContainer ref={ref}>
       <Suspense fallback={<LoadingCircle message={t('common:loader.loadingClient')} />}>{children}</Suspense>
     </FullscreenContainer>
+  ) : (
+    children
   )
 }

packages/client/src/main.tsx

@@ -49,8 +49,8 @@ const App = () => {
         <Routes>
           {/* @todo - these are for backwards compatibility with non tailwind pages - they will be removed eventually */}
           <Route
-            key={'admin'}
-            path={'/admin/*'}
+            key="admin"
+            path="/admin/*"
             element={
               <Suspense fallback={<LoadingCircle message={t('common:loader.starting')} />}>
                 <Engine>
@@ -60,8 +60,8 @@ const App = () => {
             }
           />
           <Route
-            key={'location'}
-            path={'/location/*'}
+            key="location"
+            path="/location/*"
             element={
               <Suspense fallback={<LoadingCircle message={t('common:loader.starting')} />}>
                 <Engine>
@@ -71,8 +71,8 @@ const App = () => {
             }
           />
           <Route
-            key={'studio'}
-            path={'/studio/*'}
+            key="studio"
+            path="/studio/*"
             element={
               <Suspense fallback={<LoadingCircle message={t('common:loader.starting')} />}>
                 <Engine>
@@ -82,8 +82,8 @@ const App = () => {
             }
           />
           <Route
-            key={'offline'}
-            path={'/offline/*'}
+            key="offline"
+            path="/offline/*"
             element={
               <Suspense fallback={<LoadingCircle message={t('common:loader.starting')} />}>
                 <Engine>
@@ -94,11 +94,13 @@ const App = () => {
           />
           {/* This will become redundant and we can embed the TailwindPage directly */}
           <Route
-            key={'default'}
-            path={'/*'}
+            key="default"
+            path="/*"
             element={
               <Suspense>
-                <TailwindPage />
+                <Engine tailwind>
+                  <TailwindPage />
+                </Engine>
               </Suspense>
             }
           />

packages/client/src/pages/_app_tw.tsx

@@ -38,13 +38,10 @@ import { Engine } from '@etherealengine/engine/src/ecs/classes/Engine'
 import { getMutableState, useHookstate } from '@etherealengine/hyperflux'
 import { loadWebappInjection } from '@etherealengine/projects/loadWebappInjection'
 
-import EngineTW from '../engine_tw'
 import PublicRouter, { CenteredLoadingCircle } from '../route/public_tw'
 import { ThemeContextProvider } from '../themes/themeContext'
 
-import 'daisyui/dist/full.css'
 import { useTranslation } from 'react-i18next'
-import 'tailwindcss/tailwind.css'
 import '../themes/base.css'
 import '../themes/components.css'
 import '../themes/utilities.css'
@@ -101,19 +98,17 @@ const TailwindPage = () => {
   }, [notistackRef.current])
 
   return (
-    <EngineTW>
-      <ThemeContextProvider>
-        <SnackbarProvider
-          ref={notistackRef as any}
-          maxSnack={7}
-          anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
-          action={defaultAction}
-        >
-          <AppPage />
-          <Debug />
-        </SnackbarProvider>
-      </ThemeContextProvider>
-    </EngineTW>
+    <ThemeContextProvider>
+      <SnackbarProvider
+        ref={notistackRef as any}
+        maxSnack={7}
+        anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+        action={defaultAction}
+      >
+        <AppPage />
+        <Debug />
+      </SnackbarProvider>
+    </ThemeContextProvider>
   )
 }
 

packages/client/src/pages/editor/editor.tsx

@@ -46,7 +46,6 @@ const EditorRouter = () => {
     <Suspense fallback={<LoadingCircle message={t('common:loader.loadingEditor')} />}>
       <PopupMenuInline />
       <Routes>
-        <Route path=":projectName/:sceneName" element={<EditorPage />} />
         <Route path=":projectName" element={<EditorPage />} />
         <Route path="*" element={<ProjectPage />} />
       </Routes>

packages/client/tailwind.config.js

@@ -35,7 +35,7 @@ module.exports = {
     themes: ['default', 'dark', 'vaporwave'],
     // daisyUI config (optional)
     styled: true,
-    base: true,
+    base: false,
     utils: true,
     logs: false,
     rtl: false,