From 1b5969751839d7cca5c15fe188e55615258cc513 Mon Sep 17 00:00:00 2001 From: Kevin Ngo Date: Tue, 16 Oct 2018 19:22:21 -0700 Subject: [PATCH] start integrating search into menu --- src/components/keyboard-raycastable.js | 2 +- src/components/menu-slide-animation.js | 38 ++++++++++++++++++++++ src/components/song-preview.js | 5 +++ src/components/stage-lasers.js | 2 +- src/index.html | 2 -- src/state/index.js | 11 ++++--- src/templates/menu.html | 44 ++++++++++++++------------ 7 files changed, 75 insertions(+), 29 deletions(-) create mode 100644 src/components/menu-slide-animation.js diff --git a/src/components/keyboard-raycastable.js b/src/components/keyboard-raycastable.js index eda5f88..b1482fd 100644 --- a/src/components/keyboard-raycastable.js +++ b/src/components/keyboard-raycastable.js @@ -3,6 +3,6 @@ AFRAME.registerComponent('keyboard-raycastable', { play: function () { this.el.components['super-keyboard'].kbImg.setAttribute('bind-toggle__raycastable', - 'keyboardActive'); + 'isSearching'); } }); diff --git a/src/components/menu-slide-animation.js b/src/components/menu-slide-animation.js new file mode 100644 index 0000000..9c4ee57 --- /dev/null +++ b/src/components/menu-slide-animation.js @@ -0,0 +1,38 @@ +AFRAME.registerComponent('menu-slide-animation', { + schema: { + isSearching: {default: false}, + menuSelectedChallengeId: {type: 'string'} + }, + + init: function () { + this.isOpen = false; // Means toleft. + }, + + update: function (oldData) { + const data = this.data; + + if (this.isOpen) { + // Unselect. + if (oldData.menuSelectedChallengeId && !data.menuSelectedChallengeId) { this.closeMenu(); } + // Keyboard close. + if (oldData.isSearching && !data.isSearching) { this.closeMenu(); } + } + + if (!this.isOpen) { + // Select. + if (!oldData.menuSelectedChallengeId && data.menuSelectedChallengeId) { this.openMenu(); } + // Keyboard open. + if (!oldData.isSearching && data.isSearching) { this.openMenu(); } + } + }, + + closeMenu: function () { + this.el.components.animation__menuright.beginAnimation(); + this.isOpen = false; + }, + + openMenu: function () { + this.el.components.animation__menuleft.beginAnimation(); + this.isOpen = true; + } +}); diff --git a/src/components/song-preview.js b/src/components/song-preview.js index b7b0225..9e37b19 100644 --- a/src/components/song-preview.js +++ b/src/components/song-preview.js @@ -36,6 +36,11 @@ AFRAME.registerComponent('song-preview-system', { return; } + // Unselect. + if (oldData.selectedChallengeId && !data.selectedChallengeId) { + this.stopSong(); + } + // Song finished loading. // Continue to play preview song during loading to keep entertained. if (oldData.isSongLoading && !data.isSongLoading) { diff --git a/src/components/stage-lasers.js b/src/components/stage-lasers.js index 93996c1..00536aa 100644 --- a/src/components/stage-lasers.js +++ b/src/components/stage-lasers.js @@ -30,4 +30,4 @@ AFRAME.registerComponent('stage-lasers', { this.lasers[1].rotation.z -= this.speed * delta * 1.01; this.lasers[2].rotation.z += this.speed * delta * 1.02; } -}) \ No newline at end of file +}) diff --git a/src/index.html b/src/index.html index 095ea22..4992bf4 100644 --- a/src/index.html +++ b/src/index.html @@ -35,8 +35,6 @@ pool__beat-dot-red="mixin: dotRedBeat; size: 10; container: #beatContainer" pool__beat-mine="mixin: mine; size: 10; container: #beatContainer" pool__wall="mixin: wall; size: 10; container: #beatContainer" - proxy-event__menuleft="event: menuchallengeunselect; to: .menuAnimation" - proxy-event__menuright="event: menuchallengeselect; to: .menuAnimation" proxy-event__cleargame1="event: gamemenuexit; as: cleargame; to: a-scene" proxy-event__cleargame2="event: gamemenurestart; as: cleargame; to: a-scene" search diff --git a/src/state/index.js b/src/state/index.js index d3e753a..5c65df5 100644 --- a/src/state/index.js +++ b/src/state/index.js @@ -37,10 +37,10 @@ AFRAME.registerState({ isGameOver: false, // Game over screen. isPaused: false, // Playing, but paused. Not active during menu. isPlaying: false, // Actively playing (slicing beats). + isSearching: false, // Whether search is open. isSongFetching: false, // Fetching stage. isSongLoading: false, // Either fetching or decoding. isVictory: false, // Victory screen. - keyboardActive: false, // Whether search is open. menuActive: true, menuDifficulties: [], menuSelectedChallenge: { @@ -147,11 +147,12 @@ AFRAME.registerState({ }, keyboardclose: (state) => { - state.keyboardActive = false; + state.isSearching = false; }, keyboardopen: (state) => { - state.keyboardActive = true; + state.isSearching = true; + state.menuSelectedChallenge.id = ''; }, /** @@ -175,7 +176,7 @@ AFRAME.registerState({ state.menuSelectedChallenge.downloadsText = `${challengeData.downloads} Plays`; computeMenuSelectedChallengeIndex(state); - state.keyboardActive = false; + state.isSearching = false; }, menuchallengeunselect: state => { @@ -209,7 +210,7 @@ AFRAME.registerState({ state.menuActive = false; state.menuSelectedChallenge.id = ''; - state.keyboardActive = false; + state.isSearching = false; state.challenge.isLoading = true; state.isSongLoading = true; }, diff --git a/src/templates/menu.html b/src/templates/menu.html index 927d596..f4de9ef 100644 --- a/src/templates/menu.html +++ b/src/templates/menu.html @@ -100,7 +100,10 @@ {% endraw %} - + + bind__menu-slide-animation="isSearching: isSearching; menuSelectedChallengeId: menuSelectedChallenge.id" + animation__menuleft="property: object3D.position.x; to: -0.59; dur: 200; easing: easeOutCubic; autoplay: false" + animation__menuright="property: object3D.position.x; to: 0; dur: 200; easing: easeOutCubic; autoplay: false"> - - - - - + proxy-event__accept="event: superkeyboardinput; to: a-scene; as: keyboardclose"> + + + + +