From af408d42273337aa15a1c8259288904adb1214cd Mon Sep 17 00:00:00 2001 From: Kevin Ngo Date: Fri, 20 Jul 2018 20:47:42 +0200 Subject: [PATCH] work on ui and difficulty select --- package-lock.json | 36 +++++++++++++++++++--- package.json | 2 +- src/components/menu-difficulty-select.js | 12 ++++++++ src/components/search.js | 3 +- src/index.html | 2 -- src/state/index.js | 20 +++++++----- src/templates/menu.html | 39 +++++++++++++++++++----- 7 files changed, 90 insertions(+), 24 deletions(-) create mode 100644 src/components/menu-difficulty-select.js diff --git a/package-lock.json b/package-lock.json index 876a41d..9550b98 100644 --- a/package-lock.json +++ b/package-lock.json @@ -61,8 +61,8 @@ } }, "aframe": { - "version": "github:aframevr/aframe#2afb6ac191f1a44edbbfe6f0e733380356a9e0c8", - "from": "github:aframevr/aframe#master", + "version": "0.8.2", + "resolved": "github:aframevr/aframe#2afb6ac191f1a44edbbfe6f0e733380356a9e0c8", "requires": { "@tweenjs/tween.js": "^16.8.0", "browserify-css": "^0.8.2", @@ -119,9 +119,13 @@ "integrity": "sha512-ZZxD95DeMN7/NpLOe7Es3WCXNB37aIqttqI3meaTm00+OY0Q5q/1NkVsupthIlECO99iQg1evBhzRBfxj4wFWg==" }, "aframe-layout-component": { - "version": "4.3.1", - "resolved": "https://registry.npmjs.org/aframe-layout-component/-/aframe-layout-component-4.3.1.tgz", - "integrity": "sha512-BzCZCG4vEjJYNk0i6TjziDyXxaBIBl+8mXT0rBSsGpXhLcSLMrRrCm/cfl7XxUnIJV4p93Uw6eZX3cH7nA11rg==" + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/aframe-layout-component/-/aframe-layout-component-5.0.1.tgz", + "integrity": "sha512-vL7xsIMl0sm3hs4AT6WsLkUI+zvnPpHehQQR0uPNmQRMpxDiOl+wzXCCKINeuqlczjNDDRMMJZb8qrnn1Ziucg==", + "requires": { + "aframe": "^0.8.2", + "karma-chrome-launcher": "^2.2.0" + } }, "aframe-orbit-controls": { "version": "1.2.0", @@ -3897,6 +3901,14 @@ "resolved": "https://registry.npmjs.org/fs/-/fs-0.0.2.tgz", "integrity": "sha1-4fJE7zkzwbKmS9R5kTYGDQ9ZFPg=" }, + "fs-access": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/fs-access/-/fs-access-1.0.1.tgz", + "integrity": "sha1-1qh/JiJxzv6+wwxVNAf7mV2od3o=", + "requires": { + "null-check": "^1.0.0" + } + }, "fs-exists-sync": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/fs-exists-sync/-/fs-exists-sync-0.1.0.tgz", @@ -5467,6 +5479,15 @@ "integrity": "sha1-OGchPo3Xm/Ho8jAMDPwe+xgsDfE=", "dev": true }, + "karma-chrome-launcher": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/karma-chrome-launcher/-/karma-chrome-launcher-2.2.0.tgz", + "integrity": "sha512-uf/ZVpAabDBPvdPdveyk1EPgbnloPvFFGgmRhYLTDH7gEB4nZdSBk8yTU47w1g/drLSx5uMOkjKk7IWKfWg/+w==", + "requires": { + "fs-access": "^1.0.0", + "which": "^1.2.1" + } + }, "kind-of": { "version": "3.2.2", "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz", @@ -6144,6 +6165,11 @@ "resolved": "https://registry.npmjs.org/nosleep.js/-/nosleep.js-0.7.0.tgz", "integrity": "sha1-z9kZwlUjyg0PSmn7MwXAg62u4ok=" }, + "null-check": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/null-check/-/null-check-1.0.0.tgz", + "integrity": "sha1-l33/1xdgErnsMNKjnbXPcqBDnt0=" + }, "num2fraction": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz", diff --git a/package.json b/package.json index c420aa5..82f0955 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ "aframe-event-set-component": "^4.0.1", "aframe-gltf-part-component": "1.1.0", "aframe-haptics-component": "^1.4.1", - "aframe-layout-component": "^4.3.1", + "aframe-layout-component": "^5.0.1", "aframe-orbit-controls": "^1.2.0", "aframe-particle-system-component": "^1.0.11", "aframe-proxy-event-component": "^1.1.1", diff --git a/src/components/menu-difficulty-select.js b/src/components/menu-difficulty-select.js new file mode 100644 index 0000000..687997b --- /dev/null +++ b/src/components/menu-difficulty-select.js @@ -0,0 +1,12 @@ +var bindEvent = require('aframe-event-decorators').bindEvent; + +/** + * Select difficulty. + */ +AFRAME.registerComponent('menu-difficulty-select', { + click: bindEvent(function (evt) { + this.el.emit('menudifficultyselect', + evt.target.closest('difficultyOption').dataset.difficulty, + false); + }) +}); diff --git a/src/components/search.js b/src/components/search.js index 36ccf33..bbcf840 100644 --- a/src/components/search.js +++ b/src/components/search.js @@ -35,7 +35,8 @@ AFRAME.registerComponent('search', { */ AFRAME.registerComponent('search-result-list', { click: bindEvent(function (evt) { - this.el.sceneEl.emit('menuchallengeclick', evt.target.closest('.searchResult').dataset.id, + this.el.sceneEl.emit('menuchallengeselect', + evt.target.closest('.searchResult').dataset.id, false); }), }); diff --git a/src/index.html b/src/index.html index 7d6b68d..d2bbdc7 100644 --- a/src/index.html +++ b/src/index.html @@ -18,8 +18,6 @@ - - diff --git a/src/state/index.js b/src/state/index.js index 8378edb..fb4656e 100644 --- a/src/state/index.js +++ b/src/state/index.js @@ -5,17 +5,18 @@ var challengeDataStore = {}; AFRAME.registerState({ initialState: { challenge: { + difficulty: '', id: AFRAME.utils.getUrlParameter('challenge'), - isLoading: false, + isLoading: false }, inVR: false, maxStreak: 0, menu: { active: true }, + menuDifficulties: [], menuSelectedChallenge: { id: '', - difficulties: [] }, playButtonText: 'Play', score: 0, @@ -49,17 +50,21 @@ AFRAME.registerState({ /** * Song clicked from menu. */ - menuchallengeclick: function (state, id) { + menuchallengeselect: function (state, id) { let challengeData = challengeDataStore[id]; state.menuSelectedChallenge.id = id; - state.menuSelectedChallenge.difficulties.length = 0; + state.menuDifficulties.length = 0; for (let i = 0; i < challengeData.difficulties.length; i++) { - state.menuSelectedChallenge.difficulties.push(challengeData.difficulties[i]); + state.menuDifficulties.push(challengeData.difficulties[i]); } }, + menudifficultyselect: function (state, difficulty) { + state.menuSelectedChallenge.difficulty = difficulty; + }, + playbuttonclick: function (state) { - state.menuActive = false; + state.menu.active = false; }, /** @@ -71,13 +76,14 @@ AFRAME.registerState({ for (i = 0; i < 6; i++) { if (!payload.results[i]) { continue; } challengeDataStore[payload.results[i].id] = payload.results[i]; + payload.results[i].songSubName = payload.results[i].songSubName || 'Unknown Arist'; state.searchResults.push(payload.results[i]); } state.searchResults.__dirty = true; }, togglemenu: function (state) { - state.menuActive = !state.menuActive; + state.menu.active = !state.menu.active; }, 'enter-vr': function (state, payload) { diff --git a/src/templates/menu.html b/src/templates/menu.html index a8745f2..8f0f836 100644 --- a/src/templates/menu.html +++ b/src/templates/menu.html @@ -1,7 +1,7 @@ {% macro searchResults () %} @@ -10,16 +10,16 @@ - - - + + + @@ -44,9 +44,32 @@ bind-toggle__raycastable="playButtonShowing" bind__visible="playButtonShowing"> - + {{ searchResults() }} + + + {% raw %} + + {% endraw %} +