From cc8eb624515b4dec5b292e3d195545b16955a982 Mon Sep 17 00:00:00 2001
From: netpro2k <netpro2k@gmail.com>
Date: Wed, 28 Mar 2018 19:04:57 -0700
Subject: [PATCH] Fix in world hud nametag issues and minor code cleanups
---
src/components/in-world-hud.js | 50 ++++-----------------------------
src/react-components/2d-hud.css | 1 +
src/room.html | 8 ++++--
src/room.js | 4 ++-
4 files changed, 14 insertions(+), 49 deletions(-)
diff --git a/src/components/in-world-hud.js b/src/components/in-world-hud.js
index c7c389c16..e69cfd737 100644
--- a/src/components/in-world-hud.js
+++ b/src/components/in-world-hud.js
@@ -6,35 +6,17 @@ AFRAME.registerComponent("in-world-hud", {
init() {
this.bg = this.el.querySelector(".bg");
this.mic = this.el.querySelector(".mic");
- this.nametag = this.el.querySelector(".nametag");
+ this.nametag = this.el.querySelector(".username");
this.nametag.object3DMap.text.material.depthTest = false;
- this.avatar = this.el.querySelector(".avatar");
this.data.raycaster.components.line.material.depthTest = false;
const muted = this.el.sceneEl.is("muted");
this.mic.setAttribute("src", muted ? "#muted" : "#unmuted");
- const avatarScale = "0.1 0.1 0.1";
- const flipXAvatarScale = "-" + avatarScale;
-
const scene = this.el.sceneEl;
this.onUsernameChanged = this.onUsernameChanged.bind(this);
scene.addEventListener("username-changed", this.onUsernameChanged);
- this.onNametagHovered = () => {
- this.nametag.setAttribute("color", "#00eeee");
- this.data.haptic.emit("haptic_pulse", { intensity: "low" });
- };
- this.onNametagUnhovered = () => {
- this.nametag.setAttribute("color", "white");
- };
- this.onAvatarHovered = () => {
- this.avatar.setAttribute("scale", flipXAvatarScale);
- this.data.haptic.emit("haptic_pulse", { intensity: "low" });
- };
- this.onAvatarUnhovered = () => {
- this.avatar.setAttribute("scale", avatarScale);
- };
this.showCorrectMuteState = () => {
const muted = this.el.sceneEl.is("muted");
this.mic.setAttribute("src", muted ? "#muted" : "#unmuted");
@@ -94,12 +76,6 @@ AFRAME.registerComponent("in-world-hud", {
this.mic.addEventListener("raycaster-intersected", this.onMicHover);
this.mic.addEventListener("raycaster-intersected-cleared", this.onMicHoverExit);
- this.nametag.addEventListener("raycaster-intersected", this.onNametagHovered);
- this.nametag.addEventListener("raycaster-intersected-cleared", this.onNametagUnhovered);
-
- this.avatar.addEventListener("raycaster-intersected", this.onAvatarHovered);
- this.avatar.addEventListener("raycaster-intersected-cleared", this.onAvatarUnhovered);
-
this.el.sceneEl.addEventListener("stateadded", this.onStateChange);
this.el.sceneEl.addEventListener("stateremoved", this.onStateChange);
@@ -112,12 +88,6 @@ AFRAME.registerComponent("in-world-hud", {
this.nametag.removeEventListener("raycaster-intersected", this.onNametagHovered);
this.nametag.removeEventListener("raycaster-intersected-cleared", this.onNametagUnhovered);
- this.mic.removeEventListener("raycaster-intersected", this.onMicHover);
- this.mic.removeEventListener("raycaster-intersected-cleared", this.onMicHoverExit);
-
- this.avatar.removeEventListener("raycaster-intersected", this.onAvatarHovered);
- this.avatar.removeEventListener("raycaster-intersected-cleared", this.onAvatarUnhovered);
-
this.el.sceneEl.removeEventListener("stateadded", this.onStateChange);
this.el.sceneEl.removeEventListener("stateremoved", this.onStateChange);
@@ -143,19 +113,9 @@ AFRAME.registerComponent("in-world-hud", {
},
onUsernameChanged(evt) {
- let width;
- if (evt.detail.username.length == 0) {
- width = 1;
- } else {
- width = 40 / evt.detail.username.length;
- }
- const maxWidth = 6;
- if (width > maxWidth) {
- width = maxWidth;
- }
-
- this.nametag.setAttribute("text", "width", width);
- this.nametag.setAttribute("text", "value", evt.detail.username);
- this.nametag.components["text"].updateFont();
+ const { username } = evt.detail;
+ const width = evt.detail.username.length == 0 ? 1 : 40 / username.length;
+ this.nametag.setAttribute("text", "width", Math.min(width, 6));
+ this.nametag.setAttribute("text", "value", username);
}
});
diff --git a/src/react-components/2d-hud.css b/src/react-components/2d-hud.css
index 9a6429044..556431ac6 100644
--- a/src/react-components/2d-hud.css
+++ b/src/react-components/2d-hud.css
@@ -40,6 +40,7 @@
mask: url(../assets/hud/unmuted.png);
mask-size: 48px;
background-color: white;
+ cursor: pointer;
}
:local(.mic:hover) {
diff --git a/src/room.html b/src/room.html
index 3d8c1a5f9..2984baa1e 100644
--- a/src/room.html
+++ b/src/room.html
@@ -143,6 +143,8 @@
radius=0.02
static-body="shape: sphere;"
mixin="super-hands"
+ segments-height="9"
+ segments-width="9"
></a-sphere>
</a-entity>
@@ -167,9 +169,9 @@
>
<a-entity in-world-hud="haptic:#player-right-controller;raycaster:#player-right-controller;" rotation="-39 0 0">
<a-box geometry="height:0.13;width:0.6;depth:0.001" material="depthTest:false; color:#000000;opacity:0.35" class="hud bg"></a-box>
- <a-image src="#unmuted" scale="-0.1 0.1 0.1" position="-0.2 0 0.001" class="hud mic" material="alphaTest:0.1;depthTest:false;" geometry=""></a-image>
- <a-text scale="0.3 0.3 0.3" position="-0.12 0 0.001" class="hud nametag" text="width:6;alphaTest:0.1"></a-text>
- <a-image src="#avatar" scale="0.1 0.1 0.1" position="0.2 0 0.001" class="hud avatar" material="depthTest:false;" geometry=""></a-image>
+ <a-image src="#unmuted" scale="-0.1 0.1 0.1" position="-0.2 0 0.001" class="hud mic" material="alphaTest:0.1;depthTest:false;"></a-image>
+ <a-text scale="0.3 0.3 0.3" position="0 0 0.001" class="hud username" text="width:6;alphaTest:0.1;align:center;"></a-text>
+ <a-image src="#avatar" scale="0.1 0.1 0.1" position="0.2 0 0.001" class="hud avatar" material="depthTest:false;"></a-image>
</a-entity>
</a-entity>
diff --git a/src/room.js b/src/room.js
index b8a954920..9c236faa4 100644
--- a/src/room.js
+++ b/src/room.js
@@ -136,12 +136,14 @@ async function exitScene() {
}
function updatePlayerInfoFromStore() {
+ const displayName = store.state.profile.display_name;
const qs = queryString.parse(location.search);
const playerRig = document.querySelector("#player-rig");
playerRig.setAttribute("player-info", {
- displayName: store.state.profile.display_name,
+ displayName,
avatar: qs.avatar || "#bot-skinned-mesh"
});
+ document.querySelector("a-scene").emit("username-changed", { username: displayName });
}
async function enterScene(mediaStream, enterInVR) {
--
GitLab