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

work on victory screen. debugstate component (?debugstate=victory, ?debugstate=gameover, ?debugstate=loading)

Browse Source
This commit is contained in:
Kevin Ngo
2018-10-17 02:55:18 -07:00
parent d0610c3e4b
commit 8bcd5358a9
7 changed files with 112 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/img/molerat.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

12
src/components/debug-state.js Normal file
View File

@@ -0,0 +1,12 @@
/**
* Emit events from query parameter to state to automatically set up state.
*/
AFRAME.registerComponent('debug-state', {
play: function () {
const flags = AFRAME.utils.getUrlParameter('debugstate').trim();
if (!flags) { return; }
flags.split(',').forEach(flag => {
this.el.sceneEl.emit(`debug${flag.trim()}`, null, false);
});
}
});

2
src/index.html
View File

@@ -25,6 +25,7 @@
animation__gameoverfog="property: components.fog.el.object3D.fog.color; type: color; to: #330000; startEvents: gameover; dur: 500; easing: easeInQuad"
console-shortcuts
debug-controller
debug-state
effect-bloom="strength: 1"
gpu-preloader
loading-screen="backgroundColor: #000;"
@@ -122,6 +123,7 @@
bind__pause="isPaused: !isPlaying"
sound__beathit="poolSize: 12; src: assets/sounds/beatHit.ogg"></a-entity>
{% include './templates/stage.html' %}
{% include './templates/loading.html' %}
{% include './templates/score.html' %}
{% include './templates/menu.html' %}
{% include './templates/gameMenu.html' %}

47
src/state/index.js
View File

@@ -65,9 +65,11 @@ AFRAME.registerState({
beatsMissed: 0,
combo: 0,
maxCombo: 0,
maxComboText: 0,
multiplier: 1,
rank: '',
score: 0
score: 0,
scoreText: 0
},
search: {
active: true,
@@ -95,7 +97,7 @@ AFRAME.registerState({
state.damage -= DAMAGE_DECAY;
}
state.score.beatsHit++;
state.score.score++;
state.score.score += 1000;
state.score.combo++;
if (state.score.combo > state.score.maxCombo) {
state.score.maxCombo = state.score.combo;
@@ -133,6 +135,47 @@ AFRAME.registerState({
state.menuSelectedChallenge.songLength = undefined;
},
/**
* To work on game over page.
*
* ?debugstate=gameover
*/
debuggameover: state => {
state.isGameOver = true;
state.menuActive = false;
},
/**
* To work on victory page.
*
* ?debugstate=loading
*/
debugloading: state => {
state.menuActive = false;
state.isSongFetching = true;
state.isSongLoading = true;
state.menuSelectedChallenge.songName = 'Friday';
state.menuSelectedChallenge.songSubName = 'Rebecca Black';
$('#loadingSongImage').setAttribute('material', 'src', 'assets/img/molerat.jpg');
},
/**
* To work on victory page.
*
* ?debugstate=victory
*/
debugvictory: state => {
state.isVictory = true;
state.menuActive = false;
state.score.accuracy = 'Accuracy: 99.99%';
state.score.maxComboText = 'Max Combo: 123';
state.score.rank = 'S';
state.score.scoreText = 'Score: 9001';
state.menuSelectedChallenge.songName = 'Friday';
state.menuSelectedChallenge.songSubName = 'Rebecca Black';
$('#gameMenuSongImage').setAttribute('material', 'src', 'assets/img/molerat.jpg');
},
gamemenuresume: (state) => {
state.isPaused = false;
},

24
src/templates/gameMenu.html
View File

@@ -11,6 +11,7 @@
position="0 -0.07 0.01"
text="align: center; wrapCount: 17; color: #F0F0F0"></a-mixin>
<!-- Titles. -->
<a-entity id="inGameMenuTitles" position="0 1.7 -2.3">
<a-entity mixin="gameMenuButtonText" text="value: GAME OVER; color: #ff7171; width: 4" bind__visible="isGameOver"></a-entity>
@@ -22,6 +23,8 @@
bind__visible="isGameOver || isPaused || isVictory"
position="0 1.1 -2"
play-sound="event: mouseenter; sound: #hoverSound; volume: 0.03">
<!-- Actions. -->
<a-entity
id="resumeButton"
mixin="gameMenuButton"
@@ -31,7 +34,6 @@
bind__visible="!isGameOver">
<a-entity mixin="gameMenuButtonText" text="value: RESUME"></a-entity>
</a-entity>
<a-entity
id="restartButton"
bind-toggle__raycastable="isPaused || isGameOver"
@@ -39,7 +41,6 @@
proxy-event="event: click; to: a-scene; as: gamemenurestart">
<a-entity mixin="gameMenuButtonText" text="value: RESTART SONG"></a-entity>
</a-entity>
<a-entity
id="exitButton"
mixin="gameMenuButton"
@@ -49,6 +50,7 @@
<a-entity mixin="gameMenuButtonText" text="value: EXIT TO MENU"></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: 1; padding: 0.04" position="0 0.110 -0.03"></a-entity>
@@ -67,27 +69,35 @@
</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="victoryInfo" layout="type: box; columns: 1; margin: -0.9">
<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: 40; align: center; color: #FF185B"
text="wrapCount: 1; align: center; color: #AAFFAA; width: 0.5"
bind__text="value: score.rank"></a-entity>
<a-entity
id="victoryInfoScore"
mixin="textFont"
text="wrapCount: 40; align: center; color: #FF185B"
bind__text="value: score.score"></a-entity>
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: #FF185B; wrapCount: 22; baseline: top; lineHeight: 36; width: 0.81"
text="align: center; color: #FAFAFA; wrapCount: 22; baseline: top; lineHeight: 36; width: 0.81"
bind__text="value: score.accuracy"></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>

36
src/templates/loading.html Normal file
View File

@@ -0,0 +1,36 @@
<a-entity
id="songLoadingIndicator"
bind__visible="isSongFetching"
geometry="primitive: ring; radiusInner: 0.05; radiusOuter: 0.08"
material="shader: flat; color: #FAFAFA; opacity: 0.75; side: back"
position="0 1 -2.5"
rotation="0 180 0">
</a-entity>
<a-entity
id="loadingText"
mixin="textFont"
bind__animation__color="enabled: isSongLoading"
bind__text="value: loadingText"
animation__color="property: components.text.material.uniforms.color.value; type: color; from: #AAF; to: #88D; dir: alternate; loop: true; dur: 750; easing: easeInOutCubic; enabled: false"
text="align: center; color: #aaf; wrapCount: 18; width: 2"
position="0 1.1 -2.5"
bind__visible="isSongLoading"></a-entity>
<a-entity id="loadingSongInfoContainer" position="0 1.86 -2.5" bind__visible="isSongLoading">
<a-entity mixin="slice" slice9="width: 0.77; height: 0.9; padding: 0.08" position="0 0.08 -0.03"></a-entity>
<a-entity id="loadingSongImage"
copy-texture="from: #menuSelectedChallengeImage"
geometry="primitive: plane; buffer: false; skipCache: true; height: 0.3; width: 0.3"
material="shader: flat"
position="0 0.24 0"></a-entity>
<a-entity id="loadingSongInfo">
<a-entity position="0 -0.05 0" mixin="textFont"
text="wrapCount: 40; align: center; color: #FF185B"
bind__text="value: menuSelectedChallenge.songSubName"></a-entity>
<a-entity position="0 -0.13 0"
mixin="textFont" text="align: center; color: #FFF; wrapCount: 21; baseline: top; lineHeight: 36; width: 0.81"
bind__text="value: menuSelectedChallenge.songName"></a-entity>
</a-entity>
</a-entity>

40
src/templates/stage.html
View File

@@ -113,46 +113,6 @@
<a-entity id="beams" bind__beams="isPlaying: isPlaying"></a-entity>
<a-entity
id="songLoadingIndicator"
bind__visible="isSongFetching"
geometry="primitive: ring; radiusInner: 0.05; radiusOuter: 0.08"
material="shader: flat; color: #FAFAFA; opacity: 0.75; side: back"
position="0 1 -2.5"
rotation="0 180 0">
</a-entity>
<a-entity
id="loadingText"
mixin="textFont"
bind__animation__color="enabled: isSongLoading"
bind__text="value: loadingText"
animation__color="property: components.text.material.uniforms.color.value; type: color; from: #AAF; to: #88D; dir: alternate; loop: true; dur: 750; easing: easeInOutCubic; enabled: false"
text="align: center; color: #aaf; wrapCount: 18; width: 2"
position="0 1.1 -2.5"
bind__visible="isSongLoading"></a-entity>
<a-entity id="loadingSongInfoContainer" position="0 1.86 -2.5" bind__visible="isSongLoading">
<a-entity mixin="slice" slice9="width: 0.77; height: 0.9; padding: 0.08" position="0 0.08 -0.03"></a-entity>
<a-entity id="loadingSongImage"
copy-texture="from: #menuSelectedChallengeImage"
geometry="primitive: plane; buffer: false; skipCache: true; height: 0.3; width: 0.3"
material="shader: flat"
position="0 0.24 0"></a-entity>
<a-entity id="loadingSongInfo">
<a-entity position="0 -0.05 0" mixin="textFont"
text="wrapCount: 40; align: center; color: #FF185B"
bind__text="value: menuSelectedChallenge.songSubName"></a-entity>
<a-entity position="0 -0.13 0"
mixin="textFont" text="align: center; color: #FFF; wrapCount: 21; baseline: top; lineHeight: 36; width: 0.81"
bind__text="value: menuSelectedChallenge.songName"></a-entity>
</a-entity>
</a-entity>
<a-entity light="type: directional; intensity: 3" position="0 10 10"></a-entity>
<a-entity