diff --git a/src/components/beams.js b/src/components/beams.js
index 2594e84..64fd1bd 100644
--- a/src/components/beams.js
+++ b/src/components/beams.js
@@ -2,6 +2,7 @@ const ANIME = AFRAME.ANIME || AFRAME.anime;
AFRAME.registerComponent('beams', {
schema: {
+ isPlaying: {default: false},
poolSize: {default: 3}
},
@@ -48,13 +49,15 @@ AFRAME.registerComponent('beams', {
}
}
- this.el.sceneEl.addEventListener('cleargame', this.clearBeams.bind(this));
+ this.clearBeams = this.clearBeams.bind(this);
+ this.el.sceneEl.addEventListener('cleargame', this.clearBeams);
},
/**
* Use tick for manual ANIME animations, else it will create RAF.
*/
tick: function (t, dt) {
+ if (!this.data.isPlaying) { return; }
for (let i = 0; i < this.beams.length; i++) {
let beam = this.beams[i];
// Tie animation state to beam visibility.
@@ -85,6 +88,8 @@ AFRAME.registerComponent('beams', {
clearBeams: function () {
for (let i = 0; i < this.beams.length; i++) {
this.beams[i].visible = false;
+ this.beams[i].time = 0;
+ this.beams[i].scale.x = 1;
}
}
});
diff --git a/src/components/beat-loader.js b/src/components/beat-loader.js
index a6eb11d..678366a 100644
--- a/src/components/beat-loader.js
+++ b/src/components/beat-loader.js
@@ -18,6 +18,7 @@ AFRAME.registerComponent('beat-loader', {
init: function () {
this.audioSync = undefined;
+ this.beams = document.getElementById('beams').components.beams;
this.beatData = null;
this.beatContainer = document.getElementById('beatContainer');
this.bpm = undefined;
@@ -115,36 +116,36 @@ AFRAME.registerComponent('beat-loader', {
const beatObj = {};
return function (noteInfo) {
+ var beatEl;
var color;
var orientation;
- var el;
var type = noteInfo._cutDirection === 8 ? 'dot' : 'arrow';
+
color = noteInfo._type === 0 ? 'red' : 'blue';
if (noteInfo._type === 3) {
type = 'mine';
color = undefined;
}
- el = this.requestBeat(type, color);
- if (!el) { return; }
+ beatEl = this.requestBeat(type, color);
+ if (!beatEl) { return; }
beatObj.color = color;
beatObj.type = type;
beatObj.speed = this.data.beatSpeed;
- el.setAttribute('beat', beatObj);
- el.object3D.position.set(
+ beatEl.setAttribute('beat', beatObj);
+ beatEl.object3D.position.set(
this.horizontalPositions[noteInfo._lineIndex],
this.verticalPositions[noteInfo._lineLayer],
-this.data.beatAnticipationTime * this.data.beatSpeed
);
- el.object3D.rotation.z = THREE.Math.degToRad(this.orientations[noteInfo._cutDirection]);
- el.play();
+ beatEl.object3D.rotation.z = THREE.Math.degToRad(this.orientations[noteInfo._cutDirection]);
+ beatEl.play();
+
+ this.beams.newBeam(color, beatEl.object3D.position);
if (this.first) { return; }
- this.first = {
- el: el,
- time: noteInfo._time
- };
+ this.first = {el: beatEl, time: noteInfo._time};
};
})(),
diff --git a/src/components/beat.js b/src/components/beat.js
index 791a798..b08a7ed 100644
--- a/src/components/beat.js
+++ b/src/components/beat.js
@@ -53,7 +53,6 @@ AFRAME.registerComponent('beat', {
this.missElLeft = document.getElementById('missLeft');
this.missElRight = document.getElementById('missRight');
- this.beams = document.getElementById('beams').components['beams'];
this.particles = document.getElementById('saberParticles');
this.initBlock();
@@ -336,7 +335,6 @@ AFRAME.registerComponent('beat', {
this.destroyed = false;
this.el.object3D.visible = true;
this.blockEl.object3D.visible = true;
- this.beams.newBeam(this.data.color, this.el.object3D.position);
},
initCuttingClippingPlanes: function () {
diff --git a/src/index.html b/src/index.html
index 8bd0b30..4d2c968 100644
--- a/src/index.html
+++ b/src/index.html
@@ -84,25 +84,25 @@
-
-
+
+
{% include './templates/stage.html' %}
{% include './templates/gameUi.html' %}
{% include './templates/menu.html' %}
{% include './templates/dialogs.html' %}
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
{
+ if (!state.isPlaying) { return; }
state.isPaused = true;
},
diff --git a/src/templates/stage.html b/src/templates/stage.html
index fa7e820..3ca3ff8 100644
--- a/src/templates/stage.html
+++ b/src/templates/stage.html
@@ -53,7 +53,7 @@
-
+