Adjust the size of the nametag based on the length of the username.

src/components/2d-hud.css

@@ -3,25 +3,23 @@
     top: 10px;
     display: flex;
     justify-content: center;
-    height: 48px;
+    height: 60px;
     width: 100%;
 }
 
 :local(.bgShown) {
     position: absolute;
-    top: 10px;
     display: flex;
-    justify-content: center;
-    align-content: flex-end;
+    justify-content: space-around;
+    align-items: center;
     height: 60px;
     width: 300px;
-    background-color:#030303;
+    background-color:rgba(0,0,0,.35);
 }
 
 :local(.nametagShown){
     display: flex;
     width: 192px;
-    align-self: center;
     justify-content: center;
     font-size: 32px;
     font-family: sans-serif;
@@ -34,25 +32,10 @@
 
 :local(.avatarImageShown) {
     display: flex;
-    /* position: absolute; */
-    /* top: 10px; */
-    /* left: calc(50vw + 48px); */
     width: 48px;
-    /* height: 32px; */
-    background-size: 100%;
-    background-image: url(../assets/hud/avatar.png);
-    background-repeat: no-repeat;
+    height: 48px;
 }
+
 :local(.flipX) {
     transform: scaleX(-1);
-}
-
-:local(.avatarImageHidden) {
-    /* position: absolute; */
-    /* top: 10px; */
-    /* left: calc(50vw + 48px); */
-    /* width: 0px; */
-    /* height: 0px; */
-    background-size: 100%;
-    background-image: url(../assets/hud/avatar.png);
 }
\ No newline at end of file

src/components/2d-hud.js

@@ -11,7 +11,8 @@ AFRAME.registerComponent("2d-hud", {
     this.nametag = document.createElement("div");
     this.nametag.classList.add(styles.nametagShown);
 
-    this.avatar = document.createElement("div");
+    this.avatar = document.createElement("img");
+    this.avatar.src = "../assets/hud/avatar.png";
     this.avatar.classList.add(styles.avatarImageShown);
 
     this.bg = document.createElement("div");
@@ -53,8 +54,9 @@ AFRAME.registerComponent("2d-hud", {
   },
 
   onUsernameChanged(evt) {
-    console.log("changed!");
-    console.log("got username: ", evt.detail.username);
+    const pixelsPerChar = 15;
+    this.bg.style.width = 200 + pixelsPerChar * evt.detail.username.length;
+    this.nametag.style.width = 50 + pixelsPerChar * evt.detail.username.length;
     this.nametag.innerHTML = evt.detail.username;
   }
 });

src/components/2d-mute-state-indicator.css

@@ -6,6 +6,7 @@
     /* width: 32px; */
     /* height: 32px; */
     width: 48px;
+    height: 48px;
     background-size: 100%;
     background-image: url(../assets/hud/unmuted.png);
     background-repeat: no-repeat;

src/room.js

@@ -114,9 +114,6 @@ window.App = {
     } else {
       username = promptForName(username); // promptForName is blocking
     }
-
-    console.log("woo");
-    console.log(username);
     scene.emit("username-changed", { username: username });
 
     const myNametag = document.querySelector("#player-rig .nametag");