Small cleanup and merge hud work and mode work together

src/components/in-world-hud.js

 AFRAME.registerComponent("in-world-hud", {
   init() {
-    this.bg = document.createElement("a-box");
-    this.mic = document.createElement("a-image");
-    this.nametag = document.createElement("a-text");
-    this.avatar = document.createElement("a-image");
-    this.el.appendChild(this.bg);
-    this.bg.appendChild(this.mic);
-    this.bg.appendChild(this.nametag);
-    this.bg.appendChild(this.avatar);
-
-    this.bg.setAttribute("position", "0 2.0 -1");
-    this.bg.setAttribute("geometry", {
-      height: 0.13,
-      width: 0.6,
-      depth: 0.001
-    });
-    this.bg.setAttribute("material", {
-      color: "#000000",
-      opacity: 0.35
-    });
+    this.bg = this.el.querySelector(".bg");
+    this.mic = this.el.querySelector(".mic");
+    this.nametag = this.el.querySelector(".nametag");
+    this.avatar = this.el.querySelector(".avatar");
 
     const muted = this.el.sceneEl.is("muted");
     this.mic.setAttribute("src", muted ? "#muted" : "#unmuted");
-    this.mic.setAttribute("scale", "-0.1 0.1 0.1");
-    this.mic.setAttribute("position", "-0.2 0.0 0.001");
-    this.mic.classList.add("menu");
 
-    this.avatar.setAttribute("src", "#avatar");
     const avatarScale = "0.1 0.1 0.1";
     const flipXAvatarScale = "-" + avatarScale;
-    this.avatar.setAttribute("scale", avatarScale);
-    this.avatar.setAttribute("position", "0.2 0 0.001");
-    this.avatar.classList.add("menu");
 
-    this.nametag.setAttribute("scale", "0.3 0.3 0.3");
-    this.nametag.setAttribute("position", "-0.12 0 0.0001");
-    this.nametag.classList.add("menu");
-
-    const scene = document.querySelector("a-scene");
+    const scene = this.el.sceneEl;
     this.onUsernameChanged = this.onUsernameChanged.bind(this);
     scene.addEventListener("username-changed", this.onUsernameChanged);
 
@@ -119,7 +93,7 @@ AFRAME.registerComponent("in-world-hud", {
   },
 
   onUsernameChanged(evt) {
-    var width;
+    let width;
     if (evt.detail.username.length == 0) {
       width = 1;
     } else {

src/systems/app-mode.js

@@ -42,11 +42,11 @@ AFRAME.registerComponent("mode-responder-hudstate", {
       switch (e.detail.mode) {
         case AppModes.HUD:
           this.el.setAttribute("material", "color", "green");
-          this.el.setAttribute("scale", "2 1 1");
+          this.el.setAttribute("scale", "2 2 2");
           break;
         case AppModes.DEFAULT:
           this.el.setAttribute("material", "color", "white");
-          this.el.setAttribute("scale", "0.3 0.3 1");
+          this.el.setAttribute("scale", "1 1 1");
           break;
       }
     });
@@ -54,20 +54,20 @@ AFRAME.registerComponent("mode-responder-hudstate", {
 });
 
 AFRAME.registerComponent("hud-detector", {
-  dependencies: ["raycaster"],
-
   init() {
     const AppModeSystem = this.el.sceneEl.systems["app-mode"];
 
     let hoverTimeout;
-    this.el.addEventListener("raycaster-intersection", e => {
-      console.log("raycast hit", e.detail.els, e.detail.intersections);
+    this.el.addEventListener("raycaster-intersected", e => {
+      if (e.target != this.el) return;
+      console.log("raycast hit", e);
       hoverTimeout = setTimeout(() => {
         AppModeSystem.setMode(AppModes.HUD);
       }, 500);
     });
-    this.el.addEventListener("raycaster-intersection-cleared", e => {
-      console.log("raycast clear", e.detail.clearedEls);
+    this.el.addEventListener("raycaster-intersected-cleared", e => {
+      if (e.target != this.el) return;
+      console.log("raycast clear", e);
       AppModeSystem.setMode(AppModes.DEFAULT);
       clearTimeout(hoverTimeout);
     });

templates/room.hbs

@@ -41,11 +41,10 @@
                          onConnect: App.onConnect;
                          connectOnLoad: false;"
         mute-mic="eventSrc: a-scene; toggleEvents: action_mute"
-        raycaster="objects:.menu;"
+        raycaster="objects:.hud;"
         cursor="rayOrigin: mouse;"
         2d-mute-state-indicator
         2d-hud
-        in-world-hud
         light="defaultLightsEnabled: false">
 
         <a-assets>
@@ -127,15 +126,17 @@
             mode-responder-toggle__character-controller="mode: hud; invert: true;"
             ik-root
         >
-            <a-plane
-                class="hud"
-                mode-responder-hudstate
-                position="0 0.7 -0.7"
-                rotation="-28.9 0 0"
-                scale="0.3 0.3 1"
-                material="side:double"
-            >
-            </a-plane>
+            <a-entity
+                mode-responder-hudstate=""
+                in-world-hud=""
+                position="0 1.002 -1.363"
+                rotation="-39.01000608674482 0 0">
+                <a-box hud-detector geometry="height:0.13;width:0.6;depth:0.001" material="color:#000000;opacity:0.35" class="hud bg">
+                    <a-image src="#unmuted" scale="-0.1 0.1 0.1" position="-0.2 0 0.001" class="hud mic" material="" geometry=""></a-image>
+                    <a-text scale="0.3 0.3 0.3" position="-0.12 0 0.0001" class="hud nametag" text="width:6;value:dom"></a-text>
+                    <a-image src="#avatar" scale="0.1 0.1 0.1" position="0.2 0 0.001" class="hud avatar" material="" geometry=""></a-image>
+                </a-box>
+            </a-entity>
 
             <a-entity
                 id="player-camera"
@@ -145,7 +146,6 @@
                 personal-space-bubble
                 look-controls
                 raycaster="objects: .hud; interval: 100; showLine: true; direction: 0 0 -1; origin: 0 -0.05 0;"
-                hud-detector
             ></a-entity>
             
             <a-entity