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

victory rank color

Browse Source
This commit is contained in:
Kevin Ngo
2018-10-25 07:17:08 -07:00
parent d5bb21253c
commit 5e0e243592
7 changed files with 116 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/components/victory-rank.js Normal file
View File

@@ -0,0 +1,45 @@
/**
* Rank color.
*/
AFRAME.registerComponent('victory-rank', {
schema: {
rank: {type: 'string'}
},
update: function () {
const rank = this.data.rank;
if (!rank) { return; }
this.el.setAttribute('text', 'value', rank);
switch (rank[0]) {
case 'S': {
this.setColor('#FFF');
break;
}
case 'A': {
this.setColor('#c2d076');
break;
}
case 'B': {
this.setColor('#23f0c7');
break;
}
case 'C': {
this.setColor('#ffe347');
break;
}
case 'D': {
this.setColor('#ce6c47');
break;
}
case 'F': {
this.setColor('##960200');
break;
}
}
},
setColor: function (color) {
this.el.setAttribute('text', 'color', color);
}
});

4
src/index.html
View File

@@ -30,7 +30,7 @@
effect-bloom="strength: 1"
gpu-preloader
loading-screen="backgroundColor: #000;"
overlay="objects: #menu, #keyboard, #rightHand, #leftHand, [mixin~='cursorMesh'], #gameMenu, #stepback, #loadingSongInfoContainer"
overlay="objects: #rightHand, #leftHand, [mixin~='cursorMesh'], .overlay"
pool__beat-arrow-blue="mixin: arrowBlueBeat; size: 5; container: #beatContainer"
pool__beat-arrow-red="mixin: arrowRedBeat; size: 10; container: #beatContainer"
pool__beat-dot-blue="mixin: dotBlueBeat; size: 10; container: #beatContainer"
@@ -65,6 +65,7 @@
{% include './templates/score.html' %}
{% include './templates/menu.html' %}
{% include './templates/gameMenu.html' %}
{% include './templates/victory.html' %}
</a-entity>
<!-- Wrong + miss beat visual indicators. -->
@@ -186,6 +187,7 @@
<a-entity
id="stepback"
class="overlay"
geometry="primitive: plane; width: 0.5; height: 0.25;"
position="0 1.6 -1.55"
material="shader: flat; src: #stepbackImg; transparent: true; opacity: 0"></a-entity>

18
src/state/index.js
View File

@@ -351,12 +351,24 @@ AFRAME.registerState({
if (accuracy === 1) {
state.rank = 'S';
} else if (accuracy >= .90) {
} else if (accuracy >= .98) {
state.rank = 'A+';
} else if (accuracy >= .93) {
state.rank = 'A';
} else if (accuracy >= .80) {
} else if (accuracy >= .9) {
state.rank = 'A-';
} else if (accuracy >= .88) {
state.rank = 'B+';
} else if (accuracy >= .83) {
state.rank = 'B';
} else if (accuracy >= .70) {
} else if (accuracy >= .8) {
state.rank = 'B-';
} else if (accuracy >= .78) {
state.rank = 'C+';
} else if (accuracy >= .73) {
state.rank = 'C';
} else if (accuracy >= .7) {
state.rank = 'C-';
} else if (accuracy >= .60) {
state.rank = 'D';
} else {

42
src/templates/gameMenu.html
View File

@@ -1,5 +1,6 @@
<a-mixin
id="gameMenuButton"
class="overlay"
mixin="slice"
animation__mouseenter="property: components.slice9.material.color; type: color; from: #050505; to: #067197; startEvents: mouseenter; pauseEvents: mouseleave; dur: 150"
animation__mouseleave="property: components.slice9.material.color; type: color; from: #067197; to: #050505; startEvents: mouseleave; pauseEvents: mouseenter; dur: 150"
@@ -19,6 +20,7 @@
<a-entity
id="gameMenu"
class="overlay"
bind__visible="isGameOver || isPaused || isVictory"
position="0 1.1 -2"
play-sound="event: mouseenter; sound: #hoverSound; volume: 0.03"
@@ -70,44 +72,4 @@
bind__text="value: menuSelectedChallenge.songName"></a-entity>
</a-entity>
</a-entity>
<!-- Victory. -->
<a-entity id="victoryInfoContainer" position="1.64 -0.12 0.798" rotation="0 -55 0" bind__visible="isVictory">
<a-entity mixin="slice" slice9="width: 0.77; height: 1; padding: 0.04" position="0 0.110 -0.03"></a-entity>
<a-entity
id="victoryAccuracyRing"
bind__victory-accuracy-ring="accuracy: score.accuracy"
animation="property: components.material.material.uniforms.progress.value; from: 0; easing: easeOutQuad; delay: 500; dur: 2000; autoplay: false"
geometry="primitive: plane; width: 0.7; height: 0.7"
material="shader: ring; transparent: true; color: #ABABAB; radiusInner: 0.8; color: #FAFAFA"
position="0 0.48 0"></a-entity>
<a-entity id="victoryInfo" layout="type: box; columns: 1; margin: -0.1">
<!-- TODO: Different color text based on rank. (bind__rank-text="rank: score.rank") -->
<a-entity
id="victoryInfoRank"
mixin="textFont"
text="wrapCount: 1; align: center; color: #AAFFAA; width: 0.5"
bind__text="value: score.rank"></a-entity>
<a-entity
id="victoryInfoScore"
mixin="textFont"
text="align: center; color: #FAFAFA; wrapCount: 22; baseline: top; lineHeight: 36; width: 0.81"
bind__text="value: score.scoreText"></a-entity>
<a-entity
id="victoryInfoAccuracy"
mixin="textFont"
text="align: center; color: #FAFAFA; wrapCount: 22; baseline: top; lineHeight: 36; width: 0.81"
bind__text="value: score.accuracyText"></a-entity>
<a-entity
id="victoryInfoMaxCombo"
mixin="textFont"
text="align: center; color: #FAFAFA; wrapCount: 22; baseline: top; lineHeight: 36; width: 0.81"
bind__text="value: score.maxComboText"></a-entity>
</a-entity>
</a-entity>
</a-entity>

4
src/templates/loading.html
View File

@@ -1,4 +1,6 @@
<a-entity id="loadingSongInfoContainer"
<a-entity
id="loadingSongInfoContainer"
class="overlayExclude"
bind__animation__scale="enabled: isSongLoading"
bind__visible="isSongLoading"
animation__scale="property: scale; from: 1 1 1; to: 1.05 1.05 1.05; dir: alternate; loop: true; dur: 1200; easing: easeInOutCubic"

2
src/templates/menu.html
View File

@@ -102,6 +102,7 @@
<!-- Menu container begins here. -->
<a-entity
id="menu"
class="overlay"
bind__visible="menuActive"
position="0 1.1 -2"
visible="false">
@@ -232,6 +233,7 @@
<a-entity
id="keyboard"
class="overlay"
bind__super-keyboard="{% if not DEBUG_KEYBOARD %}hand: activeHand === 'left' && '#leftHand' || '#rightHand'; {% endif %}show: isSearching"
super-keyboard="label: Search from over 2500 songs!; inputColor: #fff; labelColor: #FFF; width: 1.2; hand: {{ DEBUG_KEYBOARD and '#mouseCursor' or '#rightHand' }}; imagePath: assets/img/keyboard/; font: assets/fonts/Teko-Bold.json; align: center; model: supersaber; keyColor: #fff; injectToRaycasterObjects: false; filters: allupper; keyHoverColor: #fff"
position="0.6 1.1 -1.999"

46
src/templates/victory.html Normal file
View File

@@ -0,0 +1,46 @@
<!-- Victory. -->
<a-entity
id="victoryInfoContainer"
class="overlay"
position="1.64 1 -1.2"
rotation="0 -55 0"
bind__visible="isVictory">
<a-entity mixin="slice" slice9="width: 0.77; height: 1; padding: 0.04" position="0 0.110 -0.03"></a-entity>
<a-entity
id="victoryAccuracyRing"
bind__victory-accuracy-ring="accuracy: score.accuracy"
animation="property: components.material.material.uniforms.progress.value; from: 0; easing: easeOutQuad; delay: 500; dur: 2000; autoplay: false"
geometry="primitive: plane; width: 0.7; height: 0.7"
material="shader: ring; transparent: true; color: #ABABAB; radiusInner: 0.8; color: #FAFAFA"
position="0 0.48 0"></a-entity>
<a-entity id="victoryInfo" layout="type: box; columns: 1; margin: -0.1">
<a-entity
id="victoryInfoRank"
mixin="textFont"
bind__victory-rank="rank: score.rank"
text="wrapCount: 1; align: center; color: #AAFFAA; width: 0.5"></a-entity>
<a-entity
id="victoryInfoScore"
mixin="textFont"
text="align: center; color: #FAFAFA; wrapCount: 22; baseline: top; lineHeight: 36; width: 0.81"
bind__text="value: score.scoreText"></a-entity>
<a-entity
id="victoryInfoAccuracy"
mixin="textFont"
text="align: center; color: #FAFAFA; wrapCount: 22; baseline: top; lineHeight: 36; width: 0.81"
bind__text="value: score.accuracyText"></a-entity>
<a-entity
id="victoryInfoMaxCombo"
mixin="textFont"
text="align: center; color: #FAFAFA; wrapCount: 22; baseline: top; lineHeight: 36; width: 0.81"
bind__text="value: score.maxComboText"></a-entity>
</a-entity>
</a-entity>
<a-timeline id="victoryTimeline">
</a-timeline>