From d54e884063a5d44856579e57c669768d39af93c2 Mon Sep 17 00:00:00 2001
From: Hugo Averty <h.averty@thecodingmachine.com>
Date: Sun, 14 Jun 2020 13:29:47 +0200
Subject: [PATCH] Adding full screen (vh) story

---
 website/dist/index.html      | 47 ++++++++++++++++++++-------
 website/src/sass/styles.scss | 62 +++++++++++++++++++++---------------
 2 files changed, 72 insertions(+), 37 deletions(-)

diff --git a/website/dist/index.html b/website/dist/index.html
index 8e68cca6..8ad82161 100644
--- a/website/dist/index.html
+++ b/website/dist/index.html
@@ -86,11 +86,11 @@
                         </div>
                     </div>
                 </div>
-                <div class="title text-center">
+                <div class="title title-main text-center">
                     <h1>Your workplace<br/>but better</h1>
                     <h3>You are impatient to discover this new world? Click on "Play online" and meet new people or share this adventure with your colleagues and friends by clicking on "Private mode"</h3>
                 </div>
-                <div class="row justify-content-md-center pt-5">
+                <div class="row buttons-row justify-content-md-center pt-5">
                     <div class="col col-lg-3">
                         <a class="custom-link start" href="/choose-map.html" title="PRIVATE MODE">
                             PRIVATE MODE
@@ -112,6 +112,12 @@
         </div>
     </header>
     <section class="story-wrapper">
+        <div class="clouds clouds-2">
+            <div class="cloud"></div>
+        </div>
+        <div class="clouds">
+            <div class="cloud"></div>
+        </div>
         <div class="sky"></div>
         <div class="mountains"></div>
         <img src="static/images/story/story-map-bg.png" height="672" class="story-1" />
@@ -153,16 +159,41 @@
             <div>
                 <p>You can also create a private room with your friends or your team ! </p>
                 <p class="bubble-legend">To try, press button private mode</p>
-                <p class="bubble-action"><span onclick="startGame()">
+                <p class="bubble-action"><a href="/choose-map.html">
                     <img src="static/images/playicon.png" />
                     START IN PRIVATE MODE
-                </span></p>
+                </a></p>
             </div>
         </div>
         <!-- PRELOADING (hidden elements) -->
         <img src="static/images/story/character-walk-right.gif" style="display:none;" />
     </section>
     <script>
+
+        gsap.to(".title-main", {
+            //y:-1000,
+            scale: 0,
+            opacity: 0,
+            ease: "none",
+            scrollTrigger: {
+                trigger: "header",
+                 start: "top top", // the default values
+                // end: "bottom top",
+                scrub: true
+            },
+        });
+
+        gsap.to(".over-image .clouds", {
+            y: 100,
+            ease: "none",
+            scrollTrigger: {
+                trigger: "header",
+                 start: "top top", // the default values
+                // end: "bottom top",
+                scrub: true
+            },
+        });
+
         var maxImageTranslateValue = 3507 - window.innerWidth;
         var bubbleNumber = document.getElementsByClassName("bubble").length;
         var charWalkToRightImage = "static/images/story/character-walk-right.gif";
@@ -177,11 +208,6 @@
                 scrub: 1, // smooth scrubbing, takes 1 second to "catch up" to the scrollbar
             }
         });
-        var moveMountains = function() {
-            storyScrollTrigger.to(".mountains", {
-                x: -100
-            })
-        };
 
         storyScrollTrigger.to(".birds", {
             x: (-window.innerWidth -200)
@@ -206,7 +232,6 @@
             x: -maxImageTranslateValue * (2/bubbleNumber),
             onStart: function() {
                 document.getElementById("leymah").src = charWalkToRightImage;
-                moveMountains();
             },
             onComplete: function() {
                 document.getElementById("leymah").src = charStaticImage;
@@ -223,7 +248,6 @@
             x: -maxImageTranslateValue * (3/bubbleNumber),
             onStart: function() {
                 document.getElementById("leymah").src = charWalkToRightImage;
-                moveMountains();
             },
             onComplete: function() {
                 document.getElementById("leymah").src = charStaticImage;
@@ -240,7 +264,6 @@
             x: -maxImageTranslateValue,
             onStart: function() {
                 document.getElementById("leymah").src = "static/images/story/character-walk-right.gif";
-                moveMountains();
             },
             onComplete: function() {
                 document.getElementById("leymah").src = "static/images/story/character-static.png";
diff --git a/website/src/sass/styles.scss b/website/src/sass/styles.scss
index f698c150..afe3a957 100644
--- a/website/src/sass/styles.scss
+++ b/website/src/sass/styles.scss
@@ -75,10 +75,12 @@ header {
                 font-family: 'Karmatic Arcade';
                 font-size: 2.75rem;
                 margin-bottom: 1.25rem;
+                color: white;
             }
             h3 {
                 min-height: 200px;
                 padding: 1rem;
+                color: #106ca2;
             }
             @include media-breakpoint-down(xs) {
                 h3 {
@@ -87,34 +89,34 @@ header {
             }
         }
     }
-    .clouds {
-        content: "";
-        position: absolute;
-        bottom: 0;
-        right: 0;
-        height: 162px;
-        overflow: hidden;
-        width: 100%;
-        z-index: 1;
-        &.clouds-2 {
-            bottom: 25px;
-            .cloud {
-                transform: translateX(50px);
-                -webkit-animation-duration: 80s;
-                opacity: .6;
-            }
-        }
+
+}
+.clouds {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    height: 162px;
+    overflow: hidden;
+    width: 100%;
+    z-index: 1;
+    &.clouds-2 {
+        bottom: 25px;
         .cloud {
-            background: url('../images/cloud.png') repeat-x;
-            height: 162px;
-            width: 4000px;
-            -webkit-animation-name: prop-600;
-            -webkit-animation-duration: 50s;
-            -webkit-animation-iteration-count: infinite;
-            -webkit-animation-direction:alternate;
+            transform: translateX(50px);
+            -webkit-animation-duration: 80s;
+            opacity: .6;
         }
     }
-
+    .cloud {
+        background: url('../images/cloud.png') repeat-x;
+        height: 162px;
+        width: 4000px;
+        -webkit-animation-name: prop-600;
+        -webkit-animation-duration: 50s;
+        -webkit-animation-iteration-count: infinite;
+        -webkit-animation-direction:alternate;
+    }
 }
 @-webkit-keyframes prop-600 {
     0% {
@@ -124,6 +126,7 @@ header {
         -webkit-transform: translateX(-400px);
     }
 }
+
 .custom-link{
     cursor: pointer;
     font-family: "VCR OSD Mono";
@@ -212,6 +215,7 @@ img{
 .story-wrapper {
     background: white;
     position: relative;
+    height: 100vh;
     min-height: calc(672px + 75px);
     padding-top: 75px;
     width: 100%;
@@ -223,6 +227,7 @@ img{
         max-width: none;
     }
     .sky {
+        margin-top: 8vh;
         z-index: 1;
         position: absolute;
         top: 0;
@@ -230,6 +235,12 @@ img{
         height: 242px;
         background: url(../images/story/sky.jpg) repeat-x top left;
     }
+    .clouds {
+        bottom: auto;
+        top: 0;
+        z-index: 2;
+        transform: scaleY(-1);
+    }
     .mountains {
         z-index: 5;
         position: absolute;
@@ -242,6 +253,7 @@ img{
         position: absolute;
         z-index: 10;
         left: 0;
+        bottom: 0;
         overflow: hidden;
     }
     .character {