From fa0161c1713097c4896609a15a299d04d8da63f0 Mon Sep 17 00:00:00 2001
From: Thai Pangsakulyanont <org.yi.dttvb@gmail.com>
Date: Tue, 17 Feb 2015 00:32:33 +0700
Subject: [PATCH] feat(game/loading-scene): fade-out on load complete

---
 src/game/index.js                 |  4 +++-
 src/game/loading-scene/index.js   |  4 ++++
 src/game/loading-scene/style.scss | 37 ++++++++++++++++++++++++++++---
 src/game/loading-scene/view.jade  | 14 +++++++-----
 4 files changed, 49 insertions(+), 10 deletions(-)

diff --git a/src/game/index.js b/src/game/index.js
index 78c3e7394..b66d060d2 100644
--- a/src/game/index.js
+++ b/src/game/index.js
@@ -15,5 +15,7 @@ export function main() {
   let loader = new GameLoader()
   let promise = loader.load('/music/aoi_olivia/olivia_SPpp.bml')
   SCENE_MANAGER.display(new LoadingScene({ loader, song }))
-  promise.done()
+  promise.then(function() {
+    SCENE_MANAGER.display(null)
+  })
 }
diff --git a/src/game/loading-scene/index.js b/src/game/loading-scene/index.js
index 68da5ba61..61f88c468 100644
--- a/src/game/loading-scene/index.js
+++ b/src/game/loading-scene/index.js
@@ -19,5 +19,9 @@ export default function LoadingScene({ loader, song }) {
     let view = new View({ el: container, data })
     loader.on('progress', () => { console.log('progress') })
     loader.on('progress', () => view.set(getData()))
+    return function() {
+      container.classList.add('is-exiting')
+      return Promise.delay(500)
+    }
   }
 }
diff --git a/src/game/loading-scene/style.scss b/src/game/loading-scene/style.scss
index 8ddb762e4..2ca3e531e 100644
--- a/src/game/loading-scene/style.scss
+++ b/src/game/loading-scene/style.scss
@@ -8,10 +8,13 @@
   background: url(~assets/bg/a.jpg) center no-repeat;
   background-size: cover;
 
-  .loading-scene-song-info {
+  &--info {
     position: absolute;
     top: 40%; left: 0; right: 0;
     transform: translateY(-50%);
+  }
+
+  .loading-scene-song-info {
     animation: loading-scene-song-info-animation 1s ease;
   }
 
@@ -20,11 +23,39 @@
     bottom: 10px; left: 10px;
   }
 
+  &--cover {
+    position: absolute;
+    top: 0; right: 0; bottom: 0; left: 0; opacity: 0;
+    pointer-events: none;
+
+    background: black;
+  }
+
+  .scene.is-exiting & {
+    &--info {
+      animation: loading-scene--info-exit 0.3s linear;
+    }
+    &--cover {
+      animation: loading-scene--cover-exit 0.3s linear;
+      opacity: 1;
+    }
+  }
+
 }
 
 @keyframes loading-scene-song-info-animation {
-  0%    { transform: translateY(-50%) scale(1.5, 0.02); }
-  100%  { transform: translateY(-50%) scale(1, 1); }
+  0%    { transform: scale(1.5, 0.02); }
+  100%  { transform: scale(1, 1); }
+}
+
+@keyframes loading-scene--info-exit {
+  0%    { transform: translateY(-50%) scale(1, 1); }
+  100%  { transform: translateY(-50%) scale(2, 2); }
+}
+
+@keyframes loading-scene--cover-exit {
+  0%    { opacity: 0; }
+  100%  { opacity: 1; }
 }
 
 .loading-scene-song-info {
diff --git a/src/game/loading-scene/view.jade b/src/game/loading-scene/view.jade
index 769c0af66..f0e184bad 100644
--- a/src/game/loading-scene/view.jade
+++ b/src/game/loading-scene/view.jade
@@ -4,12 +4,13 @@ mixin section(name)
   != '{{/' + name + '}}'
 
 .loading-scene
-  .loading-scene-song-info
-    .loading-scene-song-info--genre {{song.genre}}
-    .loading-scene-song-info--title {{song.title}}
-    +section('song.subtitle')
-      .loading-scene-song-info--subtitle {{.}}
-    .loading-scene-song-info--artist {{song.artist}}
+  .loading-scene--info
+    .loading-scene-song-info
+      .loading-scene-song-info--genre {{song.genre}}
+      .loading-scene-song-info--title {{song.title}}
+      +section('song.subtitle')
+        .loading-scene-song-info--subtitle {{.}}
+      .loading-scene-song-info--artist {{song.artist}}
   .loading-scene-progress
     +section('items')
       .loading-scene-progress--item
@@ -17,3 +18,4 @@ mixin section(name)
           .loading-scene-progress-bar--bar(style='width:{{width}}')
         | {{text}}
         span.loading-scene-progress-bar--progress {{progress}}
+  .loading-scene--cover