From ffb6216ea5317cf05eb8a639ef94877fb123c00c Mon Sep 17 00:00:00 2001 From: Diego Marcos Date: Tue, 6 Nov 2018 19:15:06 -0800 Subject: [PATCH] Add gameplay debug mode --- src/components/beat-loader.js | 169 ++++++++++++++++++++++++++++++---- src/state/index.js | 19 ++++ 2 files changed, 171 insertions(+), 17 deletions(-) diff --git a/src/components/beat-loader.js b/src/components/beat-loader.js index 1603278..1ac3b03 100644 --- a/src/components/beat-loader.js +++ b/src/components/beat-loader.js @@ -14,19 +14,10 @@ AFRAME.registerComponent('beat-loader', { challengeId: {type: 'string'}, // If clicked play. difficulty: {type: 'string'}, isPlaying: {default: false}, - menuSelectedChallengeId: {type: 'string'} // If menu selected. + menuSelectedChallengeId: {type: 'string'} }, - orientationsHumanized: { - 0: 'up', - 1: 'down', - 2: 'left', - 3: 'right', - 4: 'upleft', - 5: 'upright', - 6: 'downleft', - 7: 'downright' - }, + orientationsHumanized: ['up', 'down', 'left', 'right', 'upleft', 'upright', 'downleft', 'downright'], horizontalPositions: [-0.75, -0.25, 0.25, 0.75], @@ -37,6 +28,23 @@ AFRAME.registerComponent('beat-loader', { 3: 'right' }, + positionHumanized: { + topLeft: {layer: 2, index: 0}, + topCenterLeft: {layer: 2, index: 1}, + topCenterRight: {layer: 2, index: 2}, + topRight: {layer: 2, index: 3}, + + middleLeft: {layer: 1, index: 0}, + middleCenterLeft: {layer: 1, index: 1}, + middleCenterRight: {layer: 1, index: 2}, + middleRight: {layer: 1, index: 3}, + + bottomLeft: {layer: 0, index: 0}, + bottomCenterLeft: {layer: 0, index: 1}, + bottomCenterRight: {layer: 0, index: 2}, + bottomRight: {layer: 0, index: 3}, + }, + verticalPositionsHumanized: { 0: 'bottom', 1: 'middle', @@ -62,6 +70,8 @@ AFRAME.registerComponent('beat-loader', { this.el.addEventListener('cleargame', this.clearBeats.bind(this)); // this.addDebugControls(); + + this.addBeatGenerationControls(); }, update: function (oldData) { @@ -327,6 +337,131 @@ 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; @@ -387,12 +522,12 @@ AFRAME.registerComponent('beat-loader', { onKeyDown: function (event) { const keyCode = event.keyCode; switch (keyCode) { - case 32: // Space. - this.generateBeat({ - _lineIndex: 2, - _lineLayer: 1, - _cutDirection: 1, - _type: 1 + 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: diff --git a/src/state/index.js b/src/state/index.js index 6e0c93e..2d80d16 100644 --- a/src/state/index.js +++ b/src/state/index.js @@ -150,6 +150,25 @@ AFRAME.registerState({ state.challenge.isLoading = true; }, + /** + * To work on game over page. + * + * ?debugstate=gameplay + */ + debuggameplay: state => { + resetScore(state); + + // Set challenge. `beat-loader` is listening. + Object.assign(state.challenge, state.menuSelectedChallenge); + + // Reset menu. + state.menuActive = false; + state.menuSelectedChallenge.id = ''; + + state.isSearching = false; + state.isSongLoading = false; + }, + /** * To work on game over page. *