Split UI into sub-layers

EtherealEngine · Aug 26, 2021 · a984cec · a984cec
1 parent f0a25a0
commit a984cec
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 14 deletions.
diff --git a/packages/client/src/pages/golf/GolfScorecardUISystem.tsx b/packages/client/src/pages/golf/GolfScorecardUISystem.tsx
@@ -27,6 +27,7 @@ const GolfLabelColumn = () => {
   return (
     <div
       id="labels"
+      xr-layer="true"
       style={{
         display: 'flex',
         flexDirection: 'column',
@@ -109,6 +110,8 @@ const GolfHoleColumn = (props: { hole: number }) => {
   const holeState = useState(GolfState.holes)
   return (
     <div
+      className="hole"
+      xr-layer="true"
       style={{
         display: 'flex',
         flexDirection: 'column',
@@ -134,7 +137,6 @@ const GolfHoleColumn = (props: { hole: number }) => {
         {props.hole}
       </div>
       <div
-        id="data"
         style={{
           width: '40px',
           height: '40px',
@@ -172,11 +174,11 @@ const GolfScorecardView = () => {
           width: 'fit-content',
           height: 'fit-content',
           background: ' rgba(0, 0, 0, 0.51)',
-          border: '10px solid #FFFFFF',
+          border: '8px solid #FFFFFF',
           boxSizing: 'border-box',
           filter: 'drop-shadow(0 0 20px rgba(0, 0, 0, 0.57))',
           borderRadius: '60px',
-          margin: '50px',
+          margin: '80px',
           fontFamily: 'Racing Sans One',
           fontStyle: 'normal',
           fontWeight: 'normal'
@@ -208,12 +210,14 @@ export const GolfScorecardUISystem = async () => {
 
     // const uiTransform = getComponent(ui.entity, TransformComponent)
     const layer = uiComponent.layer
-    layer.position.set(0, 0, -1)
+    layer.position.set(0, 0, -0.5)
     layer.quaternion.set(0, 0, 0, 1)
     layer.scale.setScalar(1)
     layer.matrix.compose(layer.position, layer.quaternion, layer.scale).premultiply(mat4)
     layer.matrix.decompose(layer.position, layer.quaternion, layer.scale)
 
+    // uiComponent.layer.querySelector()
+
     // uiTransform.rotation.copy(cameraTransform.rotation)
     // uiTransform.position.copy(cameraTransform.position)
     // uiTransform.position.z = -10

diff --git a/packages/client/src/pages/golf/GolfSystem.ts b/packages/client/src/pages/golf/GolfSystem.ts
@@ -1,6 +1,12 @@
+/**
+ * @author HydraFire <github.com/HydraFire>
+ * @author Josh Field <github.com/hexafield>
+ * @author Gheric Speiginer <github.com/speigg>
+ */
+
 import { Engine } from '@xrengine/engine/src/ecs/classes/Engine'
-import { defineQuery, defineSystem, enterQuery, exitQuery, Not, System, pipe } from 'bitecs'
-import { ECSWorld, World } from '@xrengine/engine/src/ecs/classes/World'
+import { defineQuery, defineSystem, enterQuery, exitQuery, System } from 'bitecs'
+import { ECSWorld } from '@xrengine/engine/src/ecs/classes/World'
 import { AssetLoader } from '@xrengine/engine/src/assets/classes/AssetLoader'
 import { GolfAction, GolfActionType } from './GolfAction'
 import { Network } from '@xrengine/engine/src/networking/classes/Network'
@@ -26,7 +32,6 @@ import {
 } from './prefab/GolfBallPrefab'
 import { initializeGolfClub, spawnClub, updateClub } from './prefab/GolfClubPrefab'
 import { SpawnNetworkObjectComponent } from '@xrengine/engine/src/scene/components/SpawnNetworkObjectComponent'
-import { Entity } from '@xrengine/engine/src/ecs/classes/Entity'
 import { GolfClubComponent } from './components/GolfClubComponent'
 import { setupPlayerInput } from './functions/setupPlayerInput'
 import { registerGolfBotHooks } from './functions/registerGolfBotHooks'
@@ -45,12 +50,6 @@ import { NetworkObjectComponentOwner } from '@xrengine/engine/src/networking/com
 import { setupPlayerAvatar, setupPlayerAvatarNotInVR, setupPlayerAvatarVR } from './functions/setupPlayerAvatar'
 import { XRInputSourceComponent } from '@xrengine/engine/src/avatar/components/XRInputSourceComponent'
 
-/**
- * @author HydraFire <github.com/HydraFire>
- * @author Josh Field <github.com/hexafield>
- * @author Gheric Speiginer <github.com/speigg>
- */
-
 export function getHole(world: ECSWorld, i: number) {
   return world.world.namedEntities.get(`GolfHole-${i}`)
 }

diff --git a/packages/engine/package.json b/packages/engine/package.json
@@ -56,8 +56,8 @@
     "detect-browser": "^5.2.0",
     "draco3dgltf": "^1.4.1",
     "earcut": "^2.2.3",
-    "ethereal": "^2.0.13",
     "gl-matrix": "^3.0.0",
+    "ethereal": "^2.0.19",
     "hls.js": "^1.0.7",
     "idb-keyval": "^5.0.5",
     "lodash": "4.17.21",