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

work on ui and difficulty select

Browse Source
This commit is contained in:
Kevin Ngo
2018-07-20 20:47:42 +02:00
parent 0fb8ba0cb5
commit af408d4227
7 changed files with 90 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
package-lock.json generated
View File

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

2
package.json
View File

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

12
src/components/menu-difficulty-select.js Normal file
View File

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

3
src/components/search.js
View File

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

2
src/index.html
View File

@@ -18,8 +18,6 @@
<a-mixin id="raycaster" raycaster="objects: [raycastable]; far: 2"></a-mixin>
<img id="playImg" src="assets/img/play.png">
<img id="resultImg" src="assets/img/result.png">
<img id="resultIconsImg" src="assets/img/resulticons.png">
<img id="tubeImg" src="assets/img/tube.png">
<img id="gridImg" src="assets/img/grid.png">
<img id="sliceImg" src="assets/img/slice.png">
<a-mixin id="slice" slice9="color: #050505; src: #sliceImg; left: 50; right: 52; top: 50; bottom: 52; padding: 0.04"></a-mixin>

20
src/state/index.js
View File

@@ -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) {

39
src/templates/menu.html
View File

@@ -1,7 +1,7 @@
{% macro searchResults () %}
<a-entity id="searchResultList"
bind-for="for: item; in: searchResults; key: id; template: #searchResultTemplate"
layout="type: box; columns: 1; marginRow: 0.125"
layout="type: box; columns: 1; marginRow: 0.1"
search-result-list>
</a-entity>
@@ -10,16 +10,16 @@
<a-entity class="searchResult" data-id="{{ item.id }}">
<a-entity class="searchResultSlice"
geometry="primitive: plane; width: 0.8; height: 0.1"
material="shader: flat; transparent: true; src: #resultImg; color: #BBB"
material="shader: flat; transparent: true; color: #111; opacity: 0.45"
position="0 -0.13 -0.01"
play-audio="event: mouseenter; audio: #hoverSound; volume: 0.03"
animation__mouseenter="property: material.color; from: #BBB; to: #FFF; startEvents: mouseenter; pauseEvents: mouseleave; dur: 150"
animation__mouseleave="property: material.color; from: #FFF; to: #BBB; startEvents: mouseleave; pauseEvents: mouseenter; dur: 150"
animation__mouseenter="property: material.color; from: #111; to: #444; startEvents: mouseenter; pauseEvents: mouseleave; dur: 150"
animation__mouseleave="property: material.color; from: #444; to: #111; startEvents: mouseleave; pauseEvents: mouseenter; dur: 150"
raycastable></a-entity>
<a-entity class="searchResultContent" position="0.125 -0.05 0">
<a-entity class="searchResultImage" geometry="primitive: plane; width: 0.1; height: 0.1" material="shader: flat; src: url(https://s3-us-west-2.amazonaws.com/supersaber/{{ item.id }}-image.jpg)" position="-0.6 -0.08 0.001"></a-entity>
<a-entity class="searchResultAuthor" mixin="textFont" text="wrapCount: 48; align: left; color: #54c2fd; value: {{ item.songSubName }}" position="0 -0.060 0"></a-entity>
<a-entity class="searchResultTitle" mixin="textFont" text="align: left; color: #FFF; wrapCount: 35; value: {{ item.songName }}" position="0 -0.09 0"></a-entity>
<a-entity class="searchResultImage" geometry="primitive: plane; width: 0.1; height: 0.1" material="shader: flat; src: url(https://s3-us-west-2.amazonaws.com/supersaber/{{ item.id }}-image.jpg)" position="-0.58 -0.08 0.001"></a-entity>
<a-entity class="searchResultAuthor" mixin="textFont" text="wrapCount: 55; align: left; color: #54c2fd; value: {{ item.songSubName }}" position="0 -0.055 0"></a-entity>
<a-entity class="searchResultTitle" mixin="textFont" text="align: left; color: #FFF; wrapCount: 45; value: {{ item.songName }}" position="0 -0.09 0"></a-entity>
<a-entity class="searchResultDownloads" mixin="textFont" text="color: #cc0856; anchor: left; value: {{ item.downloads }}" position="0.12 -0.09 0"></a-entity>
</a-entity>
</a-entity>
@@ -44,9 +44,32 @@
bind-toggle__raycastable="playButtonShowing"
bind__visible="playButtonShowing"></a-plane>
<a-entity id="searchResultsContainer" position="-0.85 0.7 0">
<a-entity id="searchResultsContainer" position="0 0.7 0">
{{ searchResults() }}
</a-entity>
<a-entity id="menuDifficulties"
bind-for="for: difficulty; in: menuDifficulties"
bind__visible="!!menuSelectedChallenge.id"
menu-difficulty-select
layout="type: box; columns: 1; marginRow: -0.125"
position="1 1 0">
{% raw %}
<template>
<a-entity class="difficultyOption" data-difficulty="{{ difficulty }}">
<a-entity class="difficultySlice"
geometry="primitive: plane; width: 0.3; height: 0.1"
material="shader: flat; transparent: true; color: #111; opacity: 0.45"
position="-0.4 -0.005 0"
play-audio="event: mouseenter; audio: #hoverSound; volume: 0.03"
animation__mouseenter="property: material.color; from: #111; to: #444; startEvents: mouseenter; pauseEvents: mouseleave; dur: 150"
animation__mouseleave="property: material.color; from: #444; to: #111; startEvents: mouseleave; pauseEvents: mouseenter; dur: 150"
bind-toggle__raycastable="menu.active && !!menuSelectedChallenge.id"></a-entity>
<a-entity mixin="textFont" text="value: {{ difficulty }}" position="0 0 0.001"></a-entity>
</a-entity>
</template>
{% endraw %}
</a-entity>
</a-entity>
<a-entity id="songInfo"