From 8e67a410637f6176d70a93ccc370a82e5bf98716 Mon Sep 17 00:00:00 2001
From: Hugo Averty <h.averty@thecodingmachine.com>
Date: Tue, 16 Jun 2020 13:51:25 +0200
Subject: [PATCH] Adding fixed bubbles

---
 website/dist/index.html      | 24 +++++++++++++++---------
 website/src/sass/styles.scss | 16 +++++++++++-----
 2 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/website/dist/index.html b/website/dist/index.html
index 8ad82161..15bdbbf5 100644
--- a/website/dist/index.html
+++ b/website/dist/index.html
@@ -225,9 +225,6 @@
             opacity: 1,
             y: 0
         })
-        .to(".bubble-1", {
-            opacity: 0
-        })
         .to(".story-1", {
             x: -maxImageTranslateValue * (2/bubbleNumber),
             onStart: function() {
@@ -237,13 +234,13 @@
                 document.getElementById("leymah").src = charStaticImage;
             }
         })
+        .to(".bubble-1", {
+            opacity: 0
+        })
         .to(".bubble-2", {
             opacity: 1,
             y: 0
         })
-        .to(".bubble-2", {
-            opacity: 0
-        })
         .to(".story-1", {
             x: -maxImageTranslateValue * (3/bubbleNumber),
             onStart: function() {
@@ -253,13 +250,13 @@
                 document.getElementById("leymah").src = charStaticImage;
             }
         })
+        .to(".bubble-2", {
+            opacity: 0
+        })
         .to(".bubble-3", {
             opacity: 1,
             y: 0
         })
-        .to(".bubble-3", {
-            opacity: 0
-        })
         .to(".story-1", {
             x: -maxImageTranslateValue,
             onStart: function() {
@@ -269,10 +266,19 @@
                 document.getElementById("leymah").src = "static/images/story/character-static.png";
             }
         })
+        .to(".bubble-3", {
+            opacity: 0
+        })
         .to(".bubble-4", {
             opacity: 1,
             y: 0
         })
+        .to(".character, .bubble-4", {
+            x: "51vw",
+            onStart: function() {
+                document.getElementById("leymah").src = "static/images/story/character-walk-right.gif";
+            },
+        })
         .to(".bubble-4", {
             opacity: 0
         });
diff --git a/website/src/sass/styles.scss b/website/src/sass/styles.scss
index afe3a957..56b015d4 100644
--- a/website/src/sass/styles.scss
+++ b/website/src/sass/styles.scss
@@ -21,6 +21,12 @@
     font-family: 'VCR OSD Mono';
     src: url('../fonts/VCR_OSD.ttf') format('truetype');
 }
+@function randomNum($min, $max) {
+    $rand: random();
+    $randomNum: $min + floor($rand * (($max - $min) + 1));
+
+    @return $randomNum;
+}
 
 header {
     background: #28A7FC url("../images/sky.jpg") no-repeat bottom;
@@ -275,20 +281,20 @@ img{
                     transform: translate(0px, 0px);
                 }
                 25% {
-                    transform: translate(#{25+random(50)}px, #{10+random(35)}px);
+                    transform: translate(#{randomNum(0, 50)}px, #{randomNum(0, 50)}px);
                 }
                 50% {
-                    transform: translate(#{25+random(50)}px, #{10+random(35)}px);
+                    transform: translate(#{randomNum(0, 50)}px, #{randomNum(0, 50)}px);
                 }
                 75% {
-                    transform: translate(#{25+random(50)}px, #{10+random(35)}px);
+                    transform: translate(#{randomNum(0, 50)}px, #{randomNum(0, 50)}px);
                 }
                 100% {
-                    transform: translate(#{25+random(50)}px, #{10+random(35)}px);
+                    transform: translate(#{randomNum(0, 50)}px, #{randomNum(0, 50)}px);
                 }
             }
             .bird-#{$i} {
-                margin: 0 #{random(7)}vw;
+                margin: 0 #{randomNum(0, 10)}vw;
                 transition-timing-function: cubic-bezier(0.150, -0.600, 0.155, 1.650);
                 animation-duration: 15s;
                 animation-name: fly-#{$i};