From 4f9a4c8f5bbba56f81e2f18f4de02691b862ac96 Mon Sep 17 00:00:00 2001 From: Kevin Ngo Date: Thu, 8 Nov 2018 15:09:38 +0800 Subject: [PATCH] move debug controls into debug-beat-loader --- src/components/beat-loader.js | 231 ++---------------------- src/components/debug-beat-loader.js | 221 +++++++++++++++++++++++ src/components/mine-fragments-loader.js | 9 +- src/index.html | 1 + 4 files changed, 240 insertions(+), 222 deletions(-) create mode 100644 src/components/debug-beat-loader.js diff --git a/src/components/beat-loader.js b/src/components/beat-loader.js index 867448b..200288a 100644 --- a/src/components/beat-loader.js +++ b/src/components/beat-loader.js @@ -6,6 +6,7 @@ import utils from '../utils'; */ AFRAME.registerComponent('beat-loader', { dependencies: ['stage-colors'], + schema: { beatAnticipationTime: {default: 2.0}, beatSpeed: {default: 4.0}, @@ -14,11 +15,19 @@ AFRAME.registerComponent('beat-loader', { challengeId: {type: 'string'}, // If clicked play. difficulty: {type: 'string'}, isPlaying: {default: false}, - menuSelectedChallengeId: {type: 'string'}, - debugMode: {default: false} + menuSelectedChallengeId: {type: 'string'} }, - orientationsHumanized: ['up', 'down', 'left', 'right', 'upleft', 'upright', 'downleft', 'downright'], + orientationsHumanized: [ + 'up', + 'down', + 'left', + 'right', + 'upleft', + 'upright', + 'downleft', + 'downright' + ], horizontalPositions: [-0.75, -0.25, 0.25, 0.75], @@ -51,7 +60,7 @@ AFRAME.registerComponent('beat-loader', { 1: 'middle', 2: 'top' }, - + init: function () { this.audioAnalyserEl = document.getElementById('audioanalyser'); this.beatData = null; @@ -61,7 +70,6 @@ AFRAME.registerComponent('beat-loader', { this.beatsTimeOffset = undefined; this.bpm = undefined; this.songCurrentTime = undefined; - this.onKeyDown = this.onKeyDown.bind(this); this.xhr = null; this.stageColors = this.el.components['stage-colors']; this.twister = document.getElementById('twister'); @@ -69,18 +77,11 @@ AFRAME.registerComponent('beat-loader', { this.rightStageLasers = document.getElementById('rightStageLasers'); this.el.addEventListener('cleargame', this.clearBeats.bind(this)); - - // this.addDebugControls(); - if (AFRAME.utils.getUrlParameter('debugstate').trim() === 'gameplay') { - this.addBeatGenerationControls(); - } }, update: function (oldData) { const data = this.data; - if (data.debugMode) { this.addBeatGenerationControls(); } - // Start playing. if (!oldData.challengeId && data.challengeId && this.beatData) { this.processBeats(); @@ -96,14 +97,6 @@ AFRAME.registerComponent('beat-loader', { } }, - play: function () { - window.addEventListener('keydown', this.onKeyDown); - }, - - pause: function () { - window.removeEventListener('keydown', this.onKeyDown); - }, - /** * XHR. Beat data is prefetched when user selects a menu challenge, and stored away * to be processed later. @@ -340,204 +333,6 @@ AFRAME.registerComponent('beat-loader', { } } }, - - addBeatGenerationControls: function () { - var parentDiv = document.createElement('div'); - var self = this; - this.selectedBeat = { - 'color': 'red', - 'position': 'middleCenterLeft', - 'type': 'arrow', - 'orientation': 'up' - }; - parentDiv.style.position = 'absolute'; - parentDiv.style.right = '0'; - parentDiv.style.top = '0'; - parentDiv.style.padding = '10px'; - parentDiv.style.width = '500px'; - parentDiv.style.height = '600px'; - document.body.appendChild(parentDiv); - - addTypeBeatMenu(); - addColorBeatMenu(); - addOrientationMenu(); - addBeatPositionMenu(); - - addGenerateButton(); - - function addOrientationMenu() { - var menuDiv = addMenu('orientation'); - addButton('top', menuDiv); - addButton('left', menuDiv); - addButton('right', menuDiv); - addButton('down', menuDiv); - parentDiv.appendChild(menuDiv); - } - - function addColorBeatMenu() { - var menuDiv = addMenu('color'); - addButton('blue', menuDiv); - addButton('red', menuDiv); - parentDiv.appendChild(menuDiv); - } - - function addTypeBeatMenu() { - var menuDiv = addMenu('type'); - addButton('arrow', menuDiv); - addButton('dot', menuDiv); - addButton('mine', menuDiv); - parentDiv.appendChild(menuDiv); - } - - function addBeatPositionMenu() { - var menuDiv = addMenu('position'); - addButton('topLeft', menuDiv); - addButton('topCenterLeft', menuDiv); - addButton('topCenterRight', menuDiv); - addButton('topRight', menuDiv); - - addButton('middleLeft', menuDiv); - addButton('middleCenterLeft', menuDiv); - addButton('middleCenterRight', menuDiv); - addButton('middleRight', menuDiv); - - addButton('bottomLeft', menuDiv); - addButton('bottomCenterLeft', menuDiv); - addButton('bottomCenterRight', menuDiv); - addButton('bottomRight', menuDiv); - } - - function addMenu(name) { - var menuDiv = document.createElement('div'); - menuDiv.id = name; - menuDiv.style.marginBottom = '20px'; - menuDiv.style.width = '500px'; - menuDiv.style.display = 'inline-block'; - parentDiv.appendChild(menuDiv); - return menuDiv; - } - - function addButton(text, containerEl, clickHandler) { - var div = document.createElement('div'); - var handler = clickHandler || function onClick () { - var i; - var buttons = div.parentElement.querySelectorAll('.button'); - for (i = 0; i < buttons.length; i++) { buttons[i].style.background = '#000'; } - div.style.background = '#66f'; - self.selectedBeat[div.parentElement.id] = div.innerHTML; - }; - div.classList.add('button'); - div.id = 'button' + text; - div.style.width = '100px'; - div.style.height = '30px'; - div.style.background = '#000'; - div.style.color = '#fff'; - div.style.zIndex = 999999999; - div.style.padding = '5px'; - div.style.margin = '5px'; - div.style.font = '14px sans-serif'; - div.style.textAlign = 'center'; - div.style.lineHeight = '30px'; - div.style.cursor = 'pointer'; - div.style.display = 'inline-block'; - div.innerHTML = text; - containerEl.appendChild(div); - div.addEventListener('click', handler); - return div; - }; - - function addGenerateButton(text, containerEl) { - var buttonEl = addButton('Spawn Beat (Space Bar)', parentDiv, function () { - var type; - - if (self.selectedBeat.type === 'mine') { - type = 3; - } else { - type = self.selectedBeat.color === 'red' ? 0 : 1; - } - self.generateBeat({ - _lineIndex: self.positionHumanized[self.selectedBeat.position].index, - _lineLayer: self.positionHumanized[self.selectedBeat.position].layer, - _cutDirection: self.selectedBeat.type === 'dot' ? 8 : self.orientationsHumanized.indexOf[self.selectedBeat.orientation], - _type: type - }); - }); - buttonEl.style.width = '440px'; - }; - }, - - addDebugControls: function () { - var self = this; - var currControl = 0; - - function addControl (i, name, type) { - var div = document.createElement('div'); - div.style.position = 'absolute'; - div.id = 'stagecontrol' + i; - div.style.width = '100px'; - div.style.height = '30px'; - div.style.top = type === 'element' ? '20px' : '70px'; - div.style.background = '#000'; - div.style.color = '#fff'; - div.style.zIndex = 999999999; - div.style.padding = '5px'; - div.style.font = '14px sans-serif'; - div.style.textAlign = 'center'; - div.style.cursor = 'pointer'; - div.style.left = (20 + i * 120)+'px'; - div.innerHTML = name; - if (type === 'element') { - div.addEventListener('click', () => { - document.getElementById('stagecontrol' + currControl).style.background = '#000'; - div.style.background = '#66f'; - currControl = i; - }); - } else { - div.addEventListener('click', () => { - self.generateEvent({_type: currControl, _value: i}) - }) - } - document.body.appendChild(div); - } - - [ - 'sky', - 'tunnelNeon', - 'leftStageLasers', - 'rightStageLasers', - 'floor' - ].forEach((id, i) => { addControl(i, id, 'element'); }); - - [ - 'off', - 'blue', - 'blue', - 'bluefade', - '', - 'red', - 'red', - 'redfade' - ].forEach((id, i) => { addControl(i, id, 'value'); }); - }, - - /** - * Debug generate beats. - */ - onKeyDown: function (event) { - const keyCode = event.keyCode; - switch (keyCode) { - case 32: // Space bar. - this.generateBeat({ - _lineIndex: this.positionHumanized[this.selectedBeat.position].index, - _lineLayer: this.positionHumanized[this.selectedBeat.position].layer, - _cutDirection: this.selectedBeat.type === 'dot' ? 8 : this.orientationsHumanized.indexOf[this.selectedBeat.orientation], - _type: type - }); - break; - default: - break; - } - } }); function lessThan (a, b) { return a._time - b._time; } diff --git a/src/components/debug-beat-loader.js b/src/components/debug-beat-loader.js new file mode 100644 index 0000000..c28a94d --- /dev/null +++ b/src/components/debug-beat-loader.js @@ -0,0 +1,221 @@ +AFRAME.registerComponent('debug-beat-loader', { + dependencies: ['beat-loader'], + + schema: { + beatEnabled: {default: false}, + stageEnabled: {default: false} + }, + + init: function () { + this.beatLoader = this.el.components['beat-loader']; + this.selectedBeat = { + color: 'red', + position: 'middleCenterLeft', + type: 'arrow', + orientation: 'up' + }; + + this.onKeyDown = this.onKeyDown.bind(this); + + if (this.data.stageEnabled || AFRAME.utils.getUrlParameter('debugstage')) { + this.addDebugStageControls(); + } + + if (this.data.beatEnabled || + AFRAME.utils.getUrlParameter('debugstate').trim() === 'gameplay') { + window.addEventListener('keydown', this.onKeyDown); + this.addDebugBeatControls(); + } + }, + + /** + * Debug generate beats. + */ + onKeyDown: function (event) { + const keyCode = event.keyCode; + switch (keyCode) { + case 32: { // Space bar. + this.beatLoader.generateBeat({ + _lineIndex: this.beatLoader.positionHumanized[this.selectedBeat.position].index, + _lineLayer: this.beatLoader.positionHumanized[this.selectedBeat.position].layer, + _cutDirection: this.selectedBeat.type === 'dot' + ? 8 + : this.beatLoader.orientationsHumanized.indexOf(this.selectedBeat.orientation), + _type: type }); + break; + } + } + }, + + addDebugBeatControls: function () { + const parentDiv = document.createElement('div'); + const self = this; + + parentDiv.style.position = 'absolute'; + parentDiv.style.right = '0'; + parentDiv.style.top = '0'; + parentDiv.style.padding = '10px'; + parentDiv.style.width = '500px'; + parentDiv.style.height = '600px'; + document.body.appendChild(parentDiv); + + addTypeBeatMenu(); + addColorBeatMenu(); + addOrientationMenu(); + addBeatPositionMenu(); + addGenerateButton(); + + function addOrientationMenu () { + const menuDiv = addMenu('orientation'); + addButton('top', menuDiv); + addButton('left', menuDiv); + addButton('right', menuDiv); + addButton('down', menuDiv); + parentDiv.appendChild(menuDiv); + } + + function addColorBeatMenu () { + const menuDiv = addMenu('color'); + addButton('blue', menuDiv); + addButton('red', menuDiv); + parentDiv.appendChild(menuDiv); + } + + function addTypeBeatMenu () { + const menuDiv = addMenu('type'); + addButton('arrow', menuDiv); + addButton('dot', menuDiv); + addButton('mine', menuDiv); + parentDiv.appendChild(menuDiv); + } + + function addBeatPositionMenu () { + const menuDiv = addMenu('position'); + addButton('topLeft', menuDiv); + addButton('topCenterLeft', menuDiv); + addButton('topCenterRight', menuDiv); + addButton('topRight', menuDiv); + + addButton('middleLeft', menuDiv); + addButton('middleCenterLeft', menuDiv); + addButton('middleCenterRight', menuDiv); + addButton('middleRight', menuDiv); + + addButton('bottomLeft', menuDiv); + addButton('bottomCenterLeft', menuDiv); + addButton('bottomCenterRight', menuDiv); + addButton('bottomRight', menuDiv); + } + + function addMenu (name) { + const menuDiv = document.createElement('div'); + menuDiv.id = name; + menuDiv.style.marginBottom = '20px'; + menuDiv.style.width = '500px'; + menuDiv.style.display = 'inline-block'; + parentDiv.appendChild(menuDiv); + return menuDiv; + } + + function addButton (text, containerEl, clickHandler) { + const div = document.createElement('div'); + const handler = clickHandler || function onClick () { + const buttons = div.parentElement.querySelectorAll('.button'); + for (let i = 0; i < buttons.length; i++) { buttons[i].style.background = '#000'; } + div.style.background = '#66f'; + self.selectedBeat[div.parentElement.id] = div.innerHTML; + }; + div.classList.add('button'); + div.id = 'button' + text; + div.style.width = '100px'; + div.style.height = '30px'; + div.style.background = '#000'; + div.style.color = '#fff'; + div.style.zIndex = 999999999; + div.style.padding = '5px'; + div.style.margin = '5px'; + div.style.font = '14px sans-serif'; + div.style.textAlign = 'center'; + div.style.lineHeight = '30px'; + div.style.cursor = 'pointer'; + div.style.display = 'inline-block'; + div.innerHTML = text; + containerEl.appendChild(div); + div.addEventListener('click', handler); + return div; + }; + + function addGenerateButton (text, containerEl) { + const buttonEl = addButton('Spawn Beat (Space Bar)', parentDiv, () => { + var type; + if (self.selectedBeat.type === 'mine') { + type = 3; + } else { + type = self.selectedBeat.color === 'red' ? 0 : 1; + } + self.beatLoader.generateBeat({ + _lineIndex: self.beatLoader.positionHumanized[self.selectedBeat.position].index, + _lineLayer: self.beatLoader.positionHumanized[self.selectedBeat.position].layer, + _cutDirection: self.selectedBeat.type === 'dot' + ? 8 + : self.beatLoader.orientationsHumanized.indexOf(self.selectedBeat.orientation), + _type: type + }); + }); + buttonEl.style.width = '440px'; + } + }, + + addDebugStageControls: function () { + var currControl = 0; + + const addControl = (i, name, type) => { + const div = document.createElement('div'); + div.style.position = 'absolute'; + div.id = 'stagecontrol' + i; + div.style.width = '100px'; + div.style.height = '30px'; + div.style.top = type === 'element' ? '20px' : '70px'; + div.style.background = '#000'; + div.style.color = '#fff'; + div.style.zIndex = 999999999; + div.style.padding = '5px'; + div.style.font = '14px sans-serif'; + div.style.textAlign = 'center'; + div.style.cursor = 'pointer'; + div.style.left = (20 + i * 120)+'px'; + div.innerHTML = name; + if (type === 'element') { + div.addEventListener('click', () => { + document.getElementById('stagecontrol' + currControl).style.background = '#000'; + div.style.background = '#66f'; + currControl = i; + }); + } else { + div.addEventListener('click', () => { + this.beatLoader.generateEvent({_type: currControl, _value: i}) + }) + } + document.body.appendChild(div); + }; + + [ + 'sky', + 'tunnelNeon', + 'leftStageLasers', + 'rightStageLasers', + 'floor' + ].forEach((id, i) => { addControl(i, id, 'element'); }); + + [ + 'off', + 'blue', + 'blue', + 'bluefade', + '', + 'red', + 'red', + 'redfade' + ].forEach((id, i) => { addControl(i, id, 'value'); }); + } +}); diff --git a/src/components/mine-fragments-loader.js b/src/components/mine-fragments-loader.js index 29b674a..aeefcb3 100644 --- a/src/components/mine-fragments-loader.js +++ b/src/components/mine-fragments-loader.js @@ -1,10 +1,11 @@ +const objLoader = new THREE.OBJLoader(); + AFRAME.registerSystem('mine-fragments-loader', { init: function () { this.fragments = null; - var objData = document.getElementById('mineBrokenObj'); - objData.addEventListener('loaded', (ev) => { - var objLoader = new THREE.OBJLoader(); - this.fragments = objLoader.parse(ev.target.data); + const objData = document.getElementById('mineBrokenObj'); + objData.addEventListener('loaded', evt => { + this.fragments = objLoader.parse(evt.target.data); }) } }); diff --git a/src/index.html b/src/index.html index dad38f8..1f1b2fa 100644 --- a/src/index.html +++ b/src/index.html @@ -25,6 +25,7 @@ animation__gameover="property: object3D.background; type: color; to: #750000; startEvents: gameover" animation__gameoverfog="property: components.fog.el.object3D.fog.color; type: color; to: #330000; startEvents: gameover; dur: 500; easing: easeInQuad" console-shortcuts + debug-beat-loader debug-controller debug-state effect-bloom="strength: 1"