From b1f5a9c13a56247c41f74e9fd06648b240bb7e99 Mon Sep 17 00:00:00 2001
From: joni <johnfshaughnessy@gmail.com>
Date: Mon, 26 Feb 2018 11:44:23 -0800
Subject: [PATCH] Adjust the size of the nametag based on the length of the
username.
---
src/components/2d-hud.css | 29 +++++-----------------
src/components/2d-hud.js | 8 +++---
src/components/2d-mute-state-indicator.css | 1 +
src/room.js | 3 ---
4 files changed, 12 insertions(+), 29 deletions(-)
diff --git a/src/components/2d-hud.css b/src/components/2d-hud.css
index 2158a7f3f..87b229fb0 100644
--- a/src/components/2d-hud.css
+++ b/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
diff --git a/src/components/2d-hud.js b/src/components/2d-hud.js
index 4ca3c8f9c..842896c6e 100644
--- a/src/components/2d-hud.js
+++ b/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;
}
});
diff --git a/src/components/2d-mute-state-indicator.css b/src/components/2d-mute-state-indicator.css
index 564cbb123..ad5aae62f 100644
--- a/src/components/2d-mute-state-indicator.css
+++ b/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;
diff --git a/src/room.js b/src/room.js
index e61a2acf2..71beeb949 100644
--- a/src/room.js
+++ b/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");
--
GitLab