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

improved victory screen (fixes #171)

Browse Source
This commit is contained in:
Diego F. Goberna
2018-11-13 21:50:08 +01:00
parent 1b8c813add
commit e753b96884
4 changed files with 111 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/components/text-counter.js Normal file
View File

@@ -0,0 +1,46 @@
AFRAME.registerComponent('text-counter', {
dependencies: ['text'],
schema: {
value: {default: 0.0, type: 'float'},
dur: {default: 2000, type: 'int'},
prefix: {default: ''},
suffix: {default: ''},
decimals: {default: 0}
},
init: function () {
this.startTime = null;
this.currentValue = -1;
},
decimals: function (n) {
var d = Math.pow(10, this.data.decimals);
return (parseInt(n * d) / d).toFixed(this.data.decimals);
},
update: function (oldData) {
this.startTime = null;
this.currentValue = -1;
this.el.setAttribute('text', {
value: `${this.data.prefix} ${this.decimals(0)} ${this.data.suffix}`
});
},
tick: function (time) {
if (this.currentValue < this.data.value) {
if (this.startTime === null) { this.startTime = time};
const prevValue = Math.floor(this.currentValue);
this.currentValue = this.data.value * (time - this.startTime) / this.data.dur;
if (Math.floor(this.currentValue) !== prevValue) {
if (this.currentValue >= this.data.value) {
this.currentValue = this.data.value;
document.getElementById('victoryInfoRank').emit('appear');
document.getElementById('victoryButtons').emit('appear');
}
this.el.setAttribute('text', {
value: `${this.data.prefix} ${this.decimals(this.currentValue)} ${this.data.suffix}`
});
}
}
}
})

11
src/state/index.js
View File

@@ -7,7 +7,7 @@ const SONG_NAME_TRUNCATE = 24;
const SONG_SUB_NAME_TRUNCATE = 32;
const DAMAGE_DECAY = 0.25;
const DAMAGE_MAX = 10;
const DAMAGE_MAX = 1000000;
const DEBUG_CHALLENGE = {
author: 'Superman',
@@ -77,12 +77,10 @@ AFRAME.registerState({
},
score: {
accuracy: 0,
accuracyText: '',
beatsHit: 0,
beatsMissed: 0,
combo: 0,
maxCombo: 0,
maxComboText: 0,
multiplier: 1,
rank: '', // Grade (S to F).
score: 0
@@ -210,9 +208,8 @@ AFRAME.registerState({
Object.assign(state.challenge, DEBUG_CHALLENGE);
state.isVictory = true;
state.menuActive = false;
state.score.accuracy = .88;
state.score.accuracyText = '99.99%';
state.score.maxComboText = 'MAX COMBO - 123';
state.score.accuracy = 74.99;
state.score.maxCombo = 123;
state.score.rank = 'B';
state.score.score = 9001;
},
@@ -401,8 +398,6 @@ AFRAME.registerState({
state.score.beatsHit /
(state.score.beatsMissed + state.score.beatsHit);
state.score.accuracy = accuracy;
state.score.accuracyText = `${(accuracy * 100).toFixed()}%`;
state.score.maxComboText = `MAX COMBO - ${state.score.maxCombo}`;
if (accuracy === 1) {
state.score.rank = 'S';

33
src/templates/gameMenu.html
View File

@@ -39,7 +39,8 @@
<a-entity
id="restartButton"
mixin="gameMenuButton"
bind-toggle__raycastable="isPaused || isGameOver || isVictory"
bind__visible="!isVictory"
bind-toggle__raycastable="isPaused || isGameOver"
proxy-event="event: click; to: a-scene; as: gamemenurestart">
<a-entity mixin="gameMenuButtonText" text="value: RESTART SONG"></a-entity>
</a-entity>
@@ -47,12 +48,40 @@
<a-entity
id="exitButton"
mixin="gameMenuButton"
bind-toggle__raycastable="isPaused || isGameOver || isVictory"
bind__visible="!isVictory"
bind-toggle__raycastable="isPaused || isGameOver"
position="0 -0.35 0"
proxy-event="event: click; to: a-scene; as: gamemenuexit">
<a-entity mixin="gameMenuButtonText" text="value: EXIT TO MENU"></a-entity>
</a-entity>
<a-entity
id="victoryButtons"
visible="false"
animation="property: visible; from: false; to: true; delay: 1000; startEvents: appear">
<a-entity
id="victoryRestartButton"
mixin="gameMenuButton"
bind__visible="isVictory"
position="-0.56 -0.79 0.05"
bind-toggle__raycastable="isVictory"
proxy-event="event: click; to: a-scene; as: gamemenurestart">
<a-entity mixin="gameMenuButtonText" text="value: RESTART SONG"></a-entity>
</a-entity>
<a-entity
id="victoryExitButton"
mixin="gameMenuButton"
bind__visible="isVictory"
bind-toggle__raycastable="isVictory"
position="0.56 -0.79 0.05"
proxy-event="event: click; to: a-scene; as: gamemenuexit">
<a-entity mixin="gameMenuButtonText" text="value: EXIT TO MENU"></a-entity>
</a-entity>
</a-entity>
<!-- Song info. -->
<a-entity id="gameMenuSongInfoContainer" position="-1.64 -0.12 0.798" rotation="0 55 0">
<a-entity mixin="slice" slice9="width: 0.77; height: 0.72; padding: 0.04" position="0 0.25 -0.03"></a-entity>

50
src/templates/victory.html
View File

@@ -1,8 +1,23 @@
<!-- Victory. -->
<a-entity
id="victoryInfoContainer"
position="0 0.9 -2"
bind__visible="isVictory">
<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: 12000; 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>
<a-entity
id="victoryInfoContainerNoBloom"
class="overlay"
position="1.2 0.9 -2"
position="0 0.9 -2"
bind__visible="isVictory">
<a-entity
@@ -10,37 +25,34 @@
mixin="font"
bind__animation="enabled: isVictory"
bind__victory-rank="rank: score.rank"
animation="property: object3D.rotation.y; from: 0; to: 360; loop: true; easing: linear; dur: 3000"
text="wrapCount: 2; align: center; width: 0.82; side: double"></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>
scale="0 0 0"
position="0 0.2 0.05"
animation__rotation="property: object3D.rotation.y; from: 0; to: -360; loop: true; easing: linear; dur: 5000; startEvents: appear"
animation__scale="property: scale; to: 1 1 1; loop: false; easing: easeOutQuad; dur: 300; startEvents: appear"
text="wrapCount: 2; align: center; baseline: top; width: 0.82; side: double"></a-entity>
<a-entity
id="victoryInfoAccuracy"
mixin="font"
bind__text="value: score.accuracyText"
text="align: center; color: #FAFAFA; wrapCount: 22; baseline: top; lineHeight: 36; width: 0.81"
text="align: center; color: #FAFAFA; wrapCount: 22; baseline: top; width: 0.81"
text-counter="suffix: %; decimals: 2"
bind__text-counter="value: score.accuracy"
position="0.45 0.75 0"></a-entity>
<a-entity
id="victoryInfoScore"
mixin="font"
bind__text="value: score.score"
text="align: center; color: #FAFAFA; wrapCount: 22; baseline: top; lineHeight: 36; width: 2.25"
position="0 -0.15 0"></a-entity>
text="value: 0; align: center; color: #FAFAFA; wrapCount: 15; baseline: top; width: 2.25"
bind__text-counter="value: score.score"
position="0 -0.19 0"></a-entity>
<a-entity
id="victoryInfoMaxCombo"
mixin="font"
bind__text="value: score.maxComboText"
text="align: center; color: #FAFAFA; wrapCount: 22; baseline: top; lineHeight: 36; width: 1"
position="0 -0.28 0"></a-entity>
text="align: center; color: #FAFAFA; wrapCount: 22; baseline: top; width: 1"
text-counter="prefix: MAX COMBO: ;"
bind__text-counter="value: score.maxCombo"
position="0 -0.3 0"></a-entity>
</a-entity>
<a-timeline id="victoryTimeline">