Disable cursor and use grab cursor when in lobby

src/assets/stylesheets/entry.scss

@@ -10,15 +10,19 @@
   :local(.collapse) {
     @extend %fa-icon-button;
     position: absolute;
-    top: 4px;
-    right: 24px;
+    top: 0px;
+    right: 12px;
+    width: 32px;
+    height: 32px;
   }
 
   :local(.expand) {
     @extend %fa-icon-button;
     position: absolute;
-    top: -32px;
-    right: 24px;
+    top: -48px;
+    right: 12px;
+    width: 32px;
+    height: 32px;
   }
 }
 

src/assets/stylesheets/hub.scss

@@ -13,11 +13,14 @@
   display: none;
 }
 
+.grab-cursor {
+  cursor: grab;
+}
+
 .no-cursor {
   cursor: none;
 }
 
-
 .webxr-realities, .webxr-sessions {
   @extend %unselectable
 }

src/hub.html

@@ -21,6 +21,7 @@
     </audio>
 
     <a-scene
+        class="grab-cursor"
         renderer="antialias: true; gammaOutput: true; sortObjects: true; physicallyCorrectLights: true;"
         gamma-factor
         networked-scene="adapter: janus; audio: true; debug: true; connectOnLoad: false;"

src/hub.js

@@ -294,6 +294,8 @@ document.addEventListener("DOMContentLoaded", () => {
   const scene = document.querySelector("a-scene");
   const hubChannel = new HubChannel(store);
   const entryManager = new SceneEntryManager(hubChannel);
+  entryManager.init();
+
   const linkChannel = new LinkChannel(store);
 
   window.APP.scene = scene;

src/scene-entry-manager.js

@@ -21,9 +21,16 @@ export default class SceneEntryManager {
     this.hubChannel = hubChannel;
     this.store = window.APP.store;
     this.scene = document.querySelector("a-scene");
+    this.cursorController = document.querySelector("#cursor-controller");
     this.playerRig = document.querySelector("#player-rig");
   }
 
+  init = () => {
+    this.whenSceneLoaded(() => {
+      this.cursorController.components["cursor-controller"].disable();
+    });
+  };
+
   enterScene = async (mediaStream, enterInVR) => {
     const playerCamera = document.querySelector("#player-camera");
     playerCamera.removeAttribute("scene-preview-camera");
@@ -68,23 +75,30 @@ export default class SceneEntryManager {
       return;
     }
 
+    this.scene.classList.remove("hand-cursor");
     this.scene.classList.add("no-cursor");
 
+    const cursor = this.cursorController.components["cursor-controller"];
+    cursor.enable();
+    cursor.setCursorVisibility(true);
+
     this.hubChannel.sendEntryEvent().then(() => {
       this.store.update({ activity: { lastEnteredAt: new Date().toISOString() } });
     });
   };
 
-  enterSceneWhenLoaded = (mediaStream, enterInVR) => {
-    const enterSceneImmediately = () => this.enterScene(mediaStream, enterInVR);
-
+  whenSceneLoaded = callback => {
     if (this.scene.hasLoaded) {
-      enterSceneImmediately();
+      callback();
     } else {
-      this.scene.addEventListener("loaded", enterSceneImmediately);
+      this.scene.addEventListener("loaded", callback);
     }
   };
 
+  enterSceneWhenLoaded = (mediaStream, enterInVR) => {
+    this.whenSceneLoaded(() => this.enterScene(mediaStream, enterInVR));
+  };
+
   exitScene = () => {
     if (NAF.connection.adapter && NAF.connection.adapter.localMediaStream) {
       NAF.connection.adapter.localMediaStream.getTracks().forEach(t => t.stop());