Fix up block button text and collisions

src/components/block-button.js

@@ -23,5 +23,6 @@ AFRAME.registerComponent("block-button", {
   // Currently unused
   unblock(clientId) {
     NAF.connection.adapter.unblock(clientId);
+    NAF.connection.entities.completeSync(clientId);
   }
 });

src/components/text-button.js

@@ -20,7 +20,7 @@ AFRAME.registerComponent("text-button", {
     this.onClick = () => {
       this.emitHapticPulse();
     };
-    this.textEl = this.el.querySelector("[text]");
+    this.textEl = this.el.parentEl.querySelector("[text]");
   },
 
   emitHapticPulse() {

src/components/visible-while-frozen.js

@@ -17,3 +17,23 @@ AFRAME.registerComponent("visible-while-frozen", {
     this.el.sceneEl.removeEventListener("stateremoved", this.onStateChange);
   }
 });
+
+AFRAME.registerComponent("ui-class-while-frozen", {
+  init() {
+    this.onStateChange = evt => {
+      if (!evt.detail === "frozen") return;
+      this.el.classList.toggle("ui", this.el.sceneEl.is("frozen"));
+    };
+    this.el.classList.toggle("ui", this.el.sceneEl.is("frozen"));
+  },
+
+  play() {
+    this.el.sceneEl.addEventListener("stateadded", this.onStateChange);
+    this.el.sceneEl.addEventListener("stateremoved", this.onStateChange);
+  },
+
+  pause() {
+    this.el.sceneEl.removeEventListener("stateadded", this.onStateChange);
+    this.el.sceneEl.removeEventListener("stateremoved", this.onStateChange);
+  }
+});

src/hub.html

@@ -94,13 +94,13 @@
                               <a-entity personal-space-invader="radius: 0.2; useMaterial: true;" bone-visibility> </a-entity>
                               <a-entity billboard>
                                   <a-entity
-                                      class="ui"
                                       block-button
                                       visible-while-frozen
+                                      ui-class-while-frozen
                                       text-button="haptic:#player-right-controller;
-                                                   textHoverColor: #f00;
+                                                   textHoverColor: #ea4b54;
                                                    textColor: #fff;
-                                                   backgroundHoverColor: #f00;
+                                                   backgroundHoverColor: #ea4b54;
                                                    backgroundColor: #fff;"
                                       slice9="width: 0.45;
                                                    height: 0.2;
@@ -111,11 +111,13 @@
                                                    opacity: 1.3;
                                                    src: #tooltip"
                                       position="0 0 .35">
-                                      <a-entity text="value:Block;
-                                                       width:3;
-                                                       align:center;"
-                                                position="0 0 0.01"></a-entity>
                                   </a-entity>
+                                  <a-entity
+                                      visible-while-frozen
+                                      text="value:Block;
+                                            width:3;
+                                            align:center;"
+                                      position="0 0 0.36"></a-entity>
                               </a-entity>
                             </a-entity>
                         </template>