hide logo when playing

src/components/logoflicker.js

@@ -3,11 +3,13 @@ AFRAME.registerComponent('logoflicker', {
 
   schema: {
     delay: {default: 1000.0},
+    active: {default: true}
   },
 
   init: function () {
     this.setOff = this.setOff.bind(this);
     this.setOn = this.setOn.bind(this);
+    this.timeout = 0;
 
     this.sparks = document.getElementById('logosparks');
     this.sparkPositions = [
@@ -15,8 +17,16 @@ AFRAME.registerComponent('logoflicker', {
       {position: new THREE.Vector3(0.3, 0.8, 0)},
       {position: new THREE.Vector3(-0.3, 0.8, 0)}
     ];
+  },
 
-    this.setOn();
+  update: function (oldData) {
+    if (this.data.active !== oldData.active){
+      if (this.data.active) {
+        this.setOn();
+      } else {
+        clearTimeout(this.timeout);
+      }
+    }
   },
 
   setOff: function () {
@@ -25,13 +35,13 @@ AFRAME.registerComponent('logoflicker', {
       this.sparkPositions[Math.floor(Math.random() * this.sparkPositions.length)],
       false);
 
-    setTimeout(this.setOn,
+    this.timeout = setTimeout(this.setOn,
                50 + Math.floor(Math.random() * 100));
   },
 
   setOn: function () {
     this.el.object3D.visible = true;
-    setTimeout(this.setOff,
+    this.timeout = setTimeout(this.setOff,
                Math.floor((this.data.delay * 3 / 10) + Math.random() * this.data.delay));
   }
 });

src/templates/stage.html

@@ -57,11 +57,12 @@
     position="0 6 0"
     light="type: spot; penumbra: 1; intensity: 5; angle: 20"
     animation="property: rotation; from: 0 50 0; to: 0 -50 0; dur:300; easing: linear; startEvents: audioanalyser-beat"></a-entity>
-  <a-entity id="logosparks" particleplayer="src: #logoSparks; scale: 1.4; pscale: 0.35; count: 10; dur: 600; on: logoflicker" position="-2.8 5.5 -7.2"></a-entity>
-  <a-entity id="logo" position="0 6 -7.5" rotation="90 0 0">
+
+  <a-entity id="logosparks" bind__visible="menu.active" particleplayer="src: #logoSparks; scale: 1.4; pscale: 0.35; count: 10; dur: 600; on: logoflicker" position="-2.8 5.5 -7.2"></a-entity>
+  <a-entity id="logo" bind__visible="menu.active" position="0 6 -7.5" rotation="90 0 0">
     <a-entity obj-model="obj: #logoback-obj" material="color: #001B29"></a-entity>
     <a-entity obj-model="obj: #logofront-obj"  material="color: #e81e23"></a-entity>
-    <a-entity obj-model="obj: #logofront-u-obj" material="color: #e81e23" logoflicker="delay: 1200"></a-entity>
+    <a-entity obj-model="obj: #logofront-u-obj" material="color: #e81e23" logoflicker="delay: 1200" bind__logoflicker="active: menu.active"></a-entity>
   </a-entity>
 
   <a-entity