arJS:sarphati: enhancing the story elements

evaristoc · Aug 14, 2019 · 1e3e1a4 · 1e3e1a4
1 parent 4f01422
commit 1e3e1a4
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 3 deletions.
diff --git a/arJS/tests/sarphati/assets/grph/cube.png b/arJS/tests/sarphati/assets/grph/cube.png
diff --git a/arJS/tests/sarphati/assets/js/sarphati.js b/arJS/tests/sarphati/assets/js/sarphati.js
@@ -619,7 +619,17 @@ var app = (function APPmodule(){
                     var zelf = this;
                     //statsGlobal.update();
 
-                    $("#intro").delay(350).fadeOut(15000);
+                    //var p = $("#intro");
+                    //p.delay(350).fadeOut(5000, function(){var p = $("#intro"); p.html("<p>HELLO</p>"); p.show(); p.fadeIn(6000);}); //generates a loop!!
+                    //$("#intro").html("<p>HELLO</p>").fadeIn(15000);
+                    console.log($("#intro_text1").css("opacity"));
+                    if (($("#intro_text1").css("opacity") - 1/500) <= 0) {
+                      //code
+                      $("#intro_text1").hide();
+                    }else{
+                      $("#intro_text1").css("opacity", $("#intro_text1").css("opacity") - 1/500);
+                    };
+
                     cameraCtrl.update();
                     TWEEN.update();
                     //for (var i = 0; i < this.objects.butterflies.length; i++) {
@@ -651,6 +661,8 @@ var app = (function APPmodule(){
                         //scene.add(camera);
                         //this.renderer.render(scene, this.camera);
                         //$('#entryscene2').width(globalWidth);
+                        //$("#intro_text2").fadeOut(700);
+                        $("#intro_text2").css("display", "none");
                         $('#entryscene2').width("100%");
                         $('#log').html("test width "+globalWidth);
 
@@ -1143,6 +1155,9 @@ var app = (function APPmodule(){
             document.getElementById("entryscene2").style.width = "0";
             emitter.emit('event:close-nav', {});
         };
+
+        //$("#intro_text1").delay(350).fadeOut(6000);
+        $("#intro_text2").delay(6500).fadeIn(3000);
         ////  /* Set the width of the side navigation to 0 */
         //window.closeNav = (function() {
         //    document.getElementById("entryscene2").style.width = "0";

diff --git a/arJS/tests/sarphati/sarphati.html b/arJS/tests/sarphati/sarphati.html
@@ -37,13 +37,20 @@
 </div>
 <div id="entryscene2" class="sidenav">
   <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
-  <a>And then everything turned dark and sad. But maybe... if you could find the source of the darkness... Follow the numbers on the side of the track!</a>
+  <a>The air we flew in became darker and sader. We were disappearing.
+  Fortunately we found a hero: YOU, who could help us to stop what made it so bad for us!
+  Our hero started following the marks on the side of the track...</a>
   <a id="log" style="color:white;"></a>
   <!--<a><img src="https://data.whicdn.com/images/97140491/large.jpg" align="right"></a> modified with https://onlinepngtools.com/create-transparent-png-->
   <img src="assets/grph/output-onlinepngtools-butterfly.png" align="right">
 </div>
 <div id="addedtext">
-  <div id="intro" style="color:orange;"><h2>Once upon a time there where butterflies everywhere, but something bad started to happen...</h2></div>
+  <div id="intro_text1" style="color:orange;">
+	<h2>Once upon a time we, the butterflies, were everywhere.</h2>
+  </div>
+    <div id="intro_text2" style="color:orange; display:none;">
+	<h2>However, something bad started to happen to us...</h2>
+  </div>
 </div>
 </body>
 </html>