From a6c899b26cede1800076a49eb5cecdfa16cb4721 Mon Sep 17 00:00:00 2001
From: joni <johnfshaughnessy@gmail.com>
Date: Wed, 18 Apr 2018 14:39:13 -0700
Subject: [PATCH] Show block text button when in freeze mode.
---
src/components/text-button.js | 55 ++++++++++++++++++++++++++
src/components/visible-while-frozen.js | 19 +++++++++
src/hub.html | 25 +++++++++++-
src/hub.js | 2 +
4 files changed, 99 insertions(+), 2 deletions(-)
create mode 100644 src/components/text-button.js
create mode 100644 src/components/visible-while-frozen.js
diff --git a/src/components/text-button.js b/src/components/text-button.js
new file mode 100644
index 000000000..f858faaec
--- /dev/null
+++ b/src/components/text-button.js
@@ -0,0 +1,55 @@
+AFRAME.registerComponent("text-button", {
+ schema: {
+ haptic: { type: "selector" },
+ textEl: { type: "string" },
+ textHoverColor: { type: "string" },
+ textColor: { type: "string" },
+ backgroundHoverColor: { type: "string" },
+ backgroundColor: { type: "string" }
+ },
+
+ init() {
+ this.onHover = () => {
+ this.hovering = true;
+ this.updateButtonState();
+ this.emitHapticPulse();
+ };
+ this.onHoverOut = () => {
+ this.hovering = false;
+ this.updateButtonState();
+ };
+ this.onClick = () => {
+ this.emitHapticPulse();
+ };
+ this.textEl = this.el.querySelector(this.data.textEl);
+ },
+
+ emitHapticPulse() {
+ if (this.data.haptic) {
+ this.data.haptic.emit("haptic_pulse", { intensity: "low" });
+ }
+ },
+
+ play() {
+ this.updateButtonState();
+ this.el.addEventListener("mouseover", this.onHover);
+ this.el.addEventListener("mouseout", this.onHoverOut);
+ this.el.addEventListener("click", this.onClick);
+ },
+
+ pause() {
+ this.el.removeEventListener("mouseover", this.onHover);
+ this.el.removeEventListener("mouseout", this.onHoverOut);
+ this.el.removeEventListener("click", this.onClick);
+ },
+
+ update() {
+ this.updateButtonState();
+ },
+
+ updateButtonState() {
+ const hovering = this.hovering;
+ this.el.setAttribute("slice9", "color", hovering ? this.data.backgroundHoverColor : this.data.backgroundColor);
+ this.textEl.setAttribute("text", "color", hovering ? this.data.textHoverColor : this.data.textColor);
+ }
+});
diff --git a/src/components/visible-while-frozen.js b/src/components/visible-while-frozen.js
new file mode 100644
index 000000000..15724b8d9
--- /dev/null
+++ b/src/components/visible-while-frozen.js
@@ -0,0 +1,19 @@
+AFRAME.registerComponent("visible-while-frozen", {
+ init() {
+ this.onStateChange = evt => {
+ if (!evt.detail === "frozen") return;
+ this.el.setAttribute("visible", this.el.sceneEl.is("frozen"));
+ };
+ this.el.setAttribute("visible", 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);
+ }
+});
diff --git a/src/hub.html b/src/hub.html
index a80599f4f..aff18e1d4 100644
--- a/src/hub.html
+++ b/src/hub.html
@@ -94,8 +94,29 @@
<a-entity>
<a-entity personal-space-invader="radius: 0.2; useMaterial: true;" bone-visibility> </a-entity>
<a-entity billboard>
- <a-entity slice9="width: 0.45; height: 0.2; left: 53; top: 53; right: 10; bottom: 10; 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
+ visible-while-frozen
+ text-button="haptic:#player-right-controller;
+ textEl:.text;
+ textHoverColor: #f00;
+ textColor: #fff;
+ backgroundHoverColor: #f00;
+ backgroundColor: #fff;
+ "
+ slice9="width: 0.45;
+ height: 0.2;
+ left: 53;
+ top: 53;
+ right: 10;
+ bottom: 10;
+ opacity: 1.3;
+ src: #tooltip"
+ position="0 0 .35">
+ <a-entity class="text"
+ text="value:Block;
+ width:3;
+ align:center;"
+ position="0 0 0.01"></a-entity>
</a-entity>
</a-entity>
</a-entity>
diff --git a/src/hub.js b/src/hub.js
index f04c5ae7d..9728c6217 100644
--- a/src/hub.js
+++ b/src/hub.js
@@ -52,6 +52,8 @@ import "./components/gltf-bundle";
import "./components/hud-controller";
import "./components/freeze-controller";
import "./components/icon-button";
+import "./components/text-button";
+import "./components/visible-while-frozen";
import "./components/stats-plus";
import ReactDOM from "react-dom";
--
GitLab