juni/junisaber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

move debug controls into debug-beat-loader

Browse Source
This commit is contained in:
Kevin Ngo
2018-11-08 15:09:38 +08:00
parent 468cc89f6b
commit 4f9a4c8f5b
4 changed files with 240 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files

231
src/components/beat-loader.js
View File

@@ -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; }

221
src/components/debug-beat-loader.js Normal file
View File

@@ -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'); });
}
});

9
src/components/mine-fragments-loader.js
View File

@@ -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);
})
}
});

1
src/index.html
View File

@@ -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"