recoloring ui stuff

src/assets.html

@@ -76,7 +76,7 @@
 <img id="noiseTexture" src="assets/img/noise.png">
 <img id="sparkImg" src="assets/img/spark.png">
 <img id="spark2Img" src="assets/img/spark2.png">
-<img id="soundboxingImg" src="assets/img/soundboxing.png">
+<img id="soundboxingImg" src="assets/img/soundboxing.jpg">
 <img id="genresImg" src="assets/img/genres.png">
 <img id="tutorialImg" src="assets/img/tutorial.png">
 <img id="floorEnvImg" src="assets/img/floorenv.jpg">
@@ -181,6 +181,9 @@
   animation__skycoloroff="isRawProperty: true; property: systems.materials.stageNormal.uniforms.skyColor.value; type: color; to: {{ COLORS.SKY_OFF }}; dur: 500; easing: linear; startEvents: bgcoloroff"
   animation__skycolorblue="isRawProperty: true; property: systems.materials.stageNormal.uniforms.skyColor.value; type: color; to: {{ COLORS.SKY_BLUE }}; dur: 5; easing: linear; startEvents: bgcolorblue"
   animation__skycolorred="isRawProperty: true; property: systems.materials.stageNormal.uniforms.skyColor.value; type: color; to: {{ COLORS.SKY_RED }}; dur: 5; easing: linear; startEvents: bgcolorred"
+
+  animation__bgcolorgameover="isRawProperty: true; property: systems.materials.stageNormal.uniforms.backglowColor.value; type: color; to: {{ COLORS.BG_OFF }}; dur: 500; easing: linear; startEvents: bgcolorgameover"
+  animation__skycolorgameover="isRawProperty: true; property: systems.materials.stageNormal.uniforms.skyColor.value; type: color; to: {{ COLORS.SKY_BLUE }}; dur: 5; easing: linear; startEvents: bgcolorgameover"
   ></a-mixin>
 
 <a-mixin id="tunnelColorAnimation"

src/components/gameover.js

@@ -37,5 +37,6 @@ AFRAME.registerComponent('gameover', {
       this.gameOverEls[i].emit('gameover', null, false);
     }
     this.el.emit('textglowoff', null, false);
+    this.el.emit('bgcolorgameover', null, false);
   }
 });

src/components/gpu-preloader.js

@@ -5,23 +5,37 @@ let i = 0;
  * three.js renderer by default will not upload textures from non-visible entities.
  */
 AFRAME.registerComponent('gpu-preloader', {
+  dependencies: ['materials'],
+
   play: function () {
     this.preloadMineEnvMaps();
 
     setTimeout(() => {
-      this.preloadBeamMap();
+      this.preloadAtlas();
+      this.preloadLogo();
+      //this.prelodBeamMap();
       this.preloadBeatEnvMap();
       this.preloadCutParticles();
       this.preloadKeyboard();
-      this.preloadMissMap();
+      //this.preloadMissMap();
       this.preloadPlayButton();
       this.preloadSearchPrevPage();
       //this.preloadWallMap();
-      this.preloadWrongMap();
+      //this.preloadWrongMap();
       this.preloadGenres();
     }, 1000);
   },
 
+  preloadAtlas: function () {
+    const stage = document.querySelector('#stageObj');
+    this.preloadTexture(stage.getObject3D('mesh').children[0].material.uniforms.src.value);
+  },
+
+  preloadLogo: function () {
+    const logo = document.querySelector('#logoBody');
+    this.preloadTexture(logo.getObject3D('mesh').children[0].material.uniforms.src.value);
+  },
+
   preloadBeamMap: function () {
     const beams = document.querySelector('[beams]');
     this.preloadTexture(beams.components.beams.texture);

src/constants/colors-brand.js

@@ -4,6 +4,7 @@ module.exports = {
   BLUE: '#08bfa2',
 
   UI_ACCENT: '#08bfa2',
+  UI_ACCENT2: '#f01978',
 
   SKY_OFF: '#297547',
   SKY_BLUE: '#840d42',

src/constants/colors-orig.js

@@ -4,6 +4,7 @@ module.exports = {
   BLUE: '#00f',
 
   UI_ACCENT: '#067197',
+  UI_ACCENT2: '#f00',
 
   SKY_OFF: '#222',
   SKY_BLUE: '#007AB8',

src/constants/colors.js

@@ -4,6 +4,7 @@ module.exports = {
   BLUE: '#08bfa2',
 
   UI_ACCENT: '#08bfa2',
+  UI_ACCENT2: '#f01978',
 
   SKY_OFF: '#297547',
   SKY_BLUE: '#840d42',

src/templates/gameMenu.html

@@ -13,8 +13,8 @@
 
 <!-- Titles. -->
 <a-entity id="inGameMenuTitles" position="0 1.7 -2.3">
-  <a-entity mixin="gameMenuButtonText" text="value: GAME OVER; color: #fff; width: 4" bind__visible="isGameOver"></a-entity>
+  <a-entity mixin="gameMenuButtonText" text="value: GAME OVER; color: {{ COLORS.UI_ACCENT2 }}; width: 4" bind__visible="isGameOver"></a-entity>
-  <a-entity mixin="gameMenuButtonText" text="value: SONG CLEARED; color: #66d8fd; width: 4" bind__visible="isVictory" position="0 0.2 0"></a-entity>
+  <a-entity mixin="gameMenuButtonText" text="value: SONG CLEARED; color: {{ COLORS.UI_ACCENT }}; width: 4" bind__visible="isVictory" position="0 0.2 0"></a-entity>
 </a-entity>
 
 <a-entity
@@ -67,9 +67,9 @@
 
     <a-entity id="gameMenuSongInfo">
       <a-entity class="gameMenuSongSubName" position="0 0.058 0"
-        mixin="font" text="wrapCount: 40; align: center; color: #FF185B" bind__text="value: menuSelectedChallenge.songSubName"></a-entity>
+        mixin="font" text="wrapCount: 40; align: center; color: {{ COLORS.UI_ACCENT }}" bind__text="value: menuSelectedChallenge.songSubName"></a-entity>
       <a-entity class="gameMenuSongName" position="0 -0.031 0"
-        mixin="font" text="align: center; color: #FF185B; wrapCount: 22; baseline: top; lineHeight: 36; width: 0.81"
+        mixin="font" text="align: center; color: {{ COLORS.UI_ACCENT }}; wrapCount: 22; baseline: top; lineHeight: 36; width: 0.81"
         bind__text="value: menuSelectedChallenge.songName"></a-entity>
     </a-entity>
   </a-entity>

src/templates/leaderboard.html

@@ -33,7 +33,7 @@
     mixin="font"
     bind__text="value: leaderboardNames"
     bind__visible="!leaderboardQualified && !leaderboardEmpty"
-    text="baseline: center; width: 1.2; anchor: left; color: #00acfc; wrapCount: 28; lineHeight: 53;"
+    text="baseline: center; width: 1.2; anchor: left; color: {{ COLORS.UI_ACCENT }}; wrapCount: 28; lineHeight: 53;"
     position="-0.7 -0.16 0.001"></a-entity>
 
   <a-entity

src/templates/menu.html

@@ -131,7 +131,8 @@
 
       <a-entity id="soundboxingLink"
         bind__visible="!menuSelectedChallenge.id && !isSearching && !genre"
-        position="0.95 -0.57 0.01">
+        position="0.9 -0.5 0.01">
+
         <a-entity id="soundboxingButton"
           link="href: https://webvr.soundboxing.co/; on: click"
           geometry="primitive:plane; width: 0.38; height: 0.19;"
@@ -146,7 +147,7 @@
             mixin="font"
             animation__show="property: components.text.material.uniforms.opacity.value; from: 0; to: 1; startEvents: show; dur: 100"
             animation__hide="property: components.text.material.uniforms.opacity.value; from: 1; to: 0; startEvents: hide; dur: 100"
-            text="value: If you liked Super Saber, you'll love Soundboxing! Play it now instantly.; opacity: 0; baseline: bottom; width: 0.7; wrapCount: 24; align: center"></a-entity>
+            text="value: If you liked Super Saber,\nyou'll love Soundboxing!\nPlay it now instantly.; letterSpacing: 2; opacity: 0; baseline: bottom; width: 0.7; wrapCount: 28; align: center; color:  #fa83d9;"></a-entity>
         </a-entity>
       </a-entity>
     </a-entity>

src/templates/stage.html

@@ -72,7 +72,7 @@
     position="0 -19 5"></a-entity>
 
   <a-entity
-    id="stageobj"
+    id="stageObj"
     mixin="gameoverAnimation"
     obj-model="obj: #stageNormalObj"
     materials="name: stageNormal"></a-entity>
@@ -114,7 +114,7 @@
 
   <a-entity id="logo" bind__visible="menuActive || isVictory" position="0 6 -7.5" rotation="90 0 0">
     <a-entity id="logoGodraysObj" obj-model="obj: #logoGodraysObj" materials="name: logoadditive"></a-entity>
-    <a-entity id="logoObj" obj-model="obj: #logoObj" materials="name: logo"></a-entity>
+    <a-entity id="logoBody" obj-model="obj: #logoObj" materials="name: logo"></a-entity>
     <a-entity id="logoFrontU" obj-model="obj: #logofrontUObj" materials="name: logo" logoflicker="delay: 1200" bind__logoflicker="active: menuActive || isVictory"></a-entity>
     <a-entity id="logoGlowObj" obj-model="obj: #logoGlowObj" materials="name: logoadditive"></a-entity>
   </a-entity>